add保证金支付

src/pages/pay/marginPay/first-pay.vue

@@ -30,14 +30,14 @@
               <CurrencyInput v-model="money" type="number" placeholder="请输入支付金额" />
               <!-- <div @click="createOrder">
                 <img src="@/assets/payment/into.png" >
-              </div> -->
+              </div>-->
             </div>
           </div>
         </div>
         <div class="write">
           <div class="box">
             <span>备注</span>
-            <textarea placeholder="请输入您的备注……" />
+            <textarea v-model="pay_note" placeholder="请输入您的备注……" />
           </div>
         </div>
       </section>
@@ -53,7 +53,7 @@
       </div>
     </h-content>
     <bottom-tab>
-      <tab-button class="footer" @click.native="toPayEntry(money)">支&nbsp;&nbsp;付</tab-button>
+      <tab-button class="footer" @click.native="putOrder(money)">提交订单</tab-button>
     </bottom-tab>
   </h-view>
 </template>
@@ -69,25 +69,40 @@ export default {
     return {
       money: 0,
       default: 0,
+      pay_note: '', // 备注
     }
   },
   beforeRouteEnter (to, from, next) {
-    next(vm => {
-    })
+    next(vm => {})
   },
   computed: {},
   watch: {},
   methods: {
-
-    toPayEntry (money) {
+    putOrder (money) {
+      let vm = this
+      let url = process.env.basePath + 'create_order_agent_amt'
+      let param = {
+        info: {
+          bp_id: window.localStorage.bp_id,
+          amount: money,
+          pay_note: this.pay_note,
+        },
+      }
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
           this.$router.push({
             name: 'MarginPayEntry',
             params: {
+              order_id: res.order_id,
               money,
             },
           })
+        }
+      })
     },
-
+    toPayEntry (money) {},
   },
 }
 </script>
@@ -97,7 +112,7 @@ export default {
     width: 96%;
     height: 172px;
     background-color: #fff;
-    margin-top:10px;
+    margin-top: 10px;
     box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
     span {
       font-family: PingFangSC-Regular;

src/pages/pay/marginPay/pay-entry.vue

 <template>
-  <h-view id="pay-entry-margin" class="public-style">
+  <h-view id="marginPay-pay-entry" class="public-style">
     <transition name="trans">
       <div v-show="downNum" class="modal-show">
         <div class="down">
@@ -14,57 +14,18 @@
         <div class="down">
           <div class="top">
             <img src="@/assets/payment/back.png" @click="show=false" >
-            <span>支付方式</span>
+            <span>选择支付渠道</span>
           </div>
           <scroll>
             <list-item :item-height="56" class="pay-way">
               <item
-                v-for="(item,index) in nongBank"
-                :proportion="[7,1,1]"
-                :key="item.bank_account_num"
-                @click.native="isSelect(`nong${index}`);ischeck(item)"
-              >
-                <div slot="name" style="flex=3">
-                  <img :src="selectImg(item)" alt class="icon" >
-                  {{ item.bank_full_name }}({{ selectLast(item) }})
-                  <img
-                    v-show="item.recommand"
-                    class="push"
-                    src="@/assets/payment/push.png"
-                  >
-                </div>
-                <section slot="content">
-                  <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
-                  <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
-                </section>
-              </item>
-              <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
-                <div slot="name">
-                  <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
-                </div>
-                <section slot="content">
-                  <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
-                  <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
-                </section>
-              </item>
-              <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
-                <div slot="name">
-                  <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
-                </div>
-                <section slot="content">
-                  <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
-                  <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
-                </section>
-              </item>
-              <item
-                v-for="(item,index) in newList"
+                v-for="(item,index) in payTypeList"
                 :proportion="[7,1,1]"
                 :key="index"
-                @click.native="isSelect(`three${index}`);ischeck(item)"
-              >
+                @click.native="isSelect(`three${index}`);ischeck(item)"><!--;confirmToPay(item)-->
                 <div slot="name" style="flex=3">
                   <img :src="selectImg(item)" alt class="icon" >
-                  {{ item.bank_full_name }}({{ selectLast(item) }})
+                  {{ item.code_name }}
                   <img
                     v-show="item.recommand"
                     class="push"
@@ -86,7 +47,7 @@
         <div class="down">
           <div class="top">
             <img src="@/assets/payment/back.png" @click="confirm=false" >
-            <span>确认付款</span>
+            <span>确认付款方式</span>
           </div>
           <div class="info">
             <div class="info-item">
@@ -101,17 +62,23 @@
               <span>+¥{{ serviceCharge |currency }}</span>
             </div>
             <div class="info-item" @click="show=true">
-              <span>付款方式</span>
+              <span>支付渠道</span>
               <span>
-                <img :src="checkType.img" >
-                <span>{{ checkType.bank_full_name }}</span>
-                <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+                <img :src="payTypeObj.img" >
+                <span>{{ payTypeObj.payType_n }}</span>
                 <img class="arrow" src="@/assets/payment/go.png" >
               </span>
             </div>
+            <!-- <list-item :item-height="44">
+              <item :showArrow="true" @click.native="selectPayType">
+                <div slot="name">支付渠道</div>
+                <input
+                  slot="content" v-model="payTypeObj.payType_n" readonly>
+              </item>
+            </list-item> -->
           </div>
           <bottom-tab>
-            <tab-button class="foot" @click.native="pay">立即支付</tab-button>
+            <tab-button class="foot" @click.native="checkPay">去支付</tab-button>
           </bottom-tab>
         </div>
       </div>
@@ -119,7 +86,7 @@
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
-        <span>支付中心</span>
+        <span>{{ title }}</span>
       </div>
     </h-header>
     <h-content class="entry-content">
@@ -139,24 +106,32 @@
           <span>手续费</span>
           <span>+¥{{ serviceCharge }}</span>
         </div>
+        <!-- <list-item :item-height="44">
+          <item :showArrow="true" @click.native="selectPayType">
+            <div slot="name">支付渠道</div>
+            <input
+              slot="content" v-model="payTypeObj.payType_n" readonly>
+          </item>
+        </list-item> -->
         <div class="info-item" @click="show=true">
-          <span>付款方式</span>
+          <span>支付渠道</span>
           <span>
-            <img :src="checkType.img" >
-            <span>{{ checkType.bank_full_name }}</span>
-            <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+            <img :src="payTypeObj.img" >
+            <span>{{ payTypeObj.payType_n }}</span>
             <img class="arrow" src="@/assets/payment/go.png" >
           </span>
         </div>
       </div>
     </h-content>
     <bottom-tab>
-      <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
+      <tab-button class="foot" @click.native="affirm">确认订单</tab-button>
     </bottom-tab>
   </h-view>
 </template>
 
 <script>
+import zfb from '@/assets/payment/alipay.png'
+import wx from '@/assets/payment/wx.png'
 import js from '@/assets/payment/js.png'
 import ny from '@/assets/payment/ly.png'
 import pf from '@/assets/payment/pf.png'
@@ -170,50 +145,94 @@ import xy from '@/assets/payment/xy.png'
 import yzcx from '@/assets/payment/yzcx.png'
 import zg from '@/assets/payment/zg.png'
 import zs from '@/assets/payment/zs.png'
+import yinlian from '@/assets/payment/bind.png'
 import zx from '@/assets/payment/zx.png'
-import bank from '@/assets/payment/bank.png'
 export default {
-  name: 'PayEntry',
   components: {},
   data () {
     return {
       money: '',
+      wayShow: false,
+      timer: null,
       select: 'three0',
       name: '',
+      sectctNong: false,
+      pay_type: '',
+      bank_account_id: '',
+      isNongPay: false,
+      checkType: {
+        img: '',
+        bank_full_name: '',
+        bank_account_num: '',
+      },
+      payTypeList: [],
+      payTypeObj: {
+        img: ny,
+        payType: 'ABC_PAY',
+        payType_n: '农行支付',
+      },
+      confirm: false,
+      show: false,
+      showOutside: false,
       downNum: false,
       recommand: false,
+      userName: window.localStorage.getItem('bp_name'),
       flag: false, // 用于判断是否有农业银行卡
       lists: [],
       nongBank: [], // 存农行卡
+      notNongList: [],
+      nongPayList: [],
     }
   },
   computed: {
+    title () {
+      if (this.confirm) {
+        return '支付中心'
+      } else {
+        return '确认订单'
+      }
+    },
+    text () {
+      if (this.payTypeObj.payType_n.indexOf('农行') !== -1) {
+        return 'K码/K令支付'
+      } else if (this.payTypeObj.payType_n.indexOf('农行') === -1) {
+        return '银联支付'
+      }
+    },
+    serviceCharge () {
+      return (this.money * (this.rate / 100)).toFixed(2)
+    },
+    rate () {
+      return this.payTypeObj.payType_n.indexOf('农行') !== -1 ? 0.0 : 0.18
+    },
+    sumMoney () {
+      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
+        2
+      )
+    },
     newList () {
       let vm = this
-      vm.nongBank = []
-      vm.lists.forEach((item, i) => {
-        if (item.bank_full_name.indexOf('农业') !== -1) {
-          vm.nongBank.push(vm.lists[i])
-          vm.flag = true
-        }
-      })
       let notNong = vm.lists.filter(i => {
-        return (i.bank_full_name.indexOf('农业') === -1)
+        return i.bank_full_name.indexOf('农业') === -1
       })
-      if (vm.flag) {
-        vm.select = 'nong0'
-      } else {
-        vm.select = 'one'
-      }
       return notNong
     },
   },
-  watch: {},
+  watch: {
+    'payTypeObj.payType_n' () {
+    //  this.confirmToPay()
+    },
+  },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.confirm = false
+      vm.show = false
+      vm.showOutside = false
+      vm.downNum = false
       vm.name = from.name
       vm.getType()
       vm.nongBank = []
+      vm.getPayType()
     })
   },
 
@@ -221,38 +240,41 @@ export default {
     this.money = this.$route.params.money
   },
   methods: {
+    selectPayType (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.payTypeList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.payTypeObj.payType = obj.bp_type
+          vm.payTypeObj.payType_n = obj.bp_type_n
+        },
+      })
+    },
+    getPayType () {
+      let vm = this
+      let url = process.env.basePath + 'payment_type_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.payTypeList = res.lists.map(item => {
+            return {
+              code: item.pay_type,
+              code_name: item.pay_type_name,
+            }
+          })
+        }
+      })
+    },
     selectImg (e) {
-      if (e.bank_full_name.indexOf('建设') !== -1) {
-        return js
-      } else if (e.bank_full_name.indexOf('农业') !== -1) {
+      if (e.code_name.indexOf('农行') !== -1) {
         e.recommand = true
         return ny
-      } else if (e.bank_full_name.indexOf('光大') !== -1) {
-        return gd
-      } else if (e.bank_full_name.indexOf('广发') !== -1) {
-        return gf
-      } else if (e.bank_full_name.indexOf('浦') !== -1) {
-        return pf
-      } else if (e.bank_full_name.indexOf('工商') !== -1) {
-        return gs
-      } else if (e.bank_full_name.indexOf('交通') !== -1) {
-        return jt
-      } else if (e.bank_full_name.indexOf('民生') !== -1) {
-        return ms
-      } else if (e.bank_full_name.indexOf('平安') !== -1) {
-        return pa
-      } else if (e.bank_full_name.indexOf('兴业') !== -1) {
-        return xy
-      } else if (e.bank_full_name.indexOf('邮') !== -1) {
-        return yzcx
-      } else if (e.bank_full_name.indexOf('中国') !== -1) {
-        return zg
-      } else if (e.bank_full_name.indexOf('招商') !== -1) {
-        return zs
-      } else if (e.bank_full_name.indexOf('中信') !== -1) {
-        return zx
-      } else {
-        return bank
+      } else if (e.code_name.indexOf('银联') !== -1) {
+        return yinlian
       }
     },
     selectLast (item) {
@@ -262,17 +284,78 @@ export default {
     isSelect (way) {
       this.select = way
     },
-    pay () {
+    ischeck (way) {
+      this.payTypeObj.payType = way.code
+      this.payTypeObj.payType_n = way.code_name
+      this.payTypeObj.img = this.selectImg(way)
+      this.show = false
+    },
+    confirmToPay (e) {
       let vm = this
+      let randomString = Math.floor(Math.random() * 21)
+      let url = process.env.basePath + 'update_order_info' + '&index' +
+        `'${randomString}'`
+      if (e) {
+        vm.pay_type = e.pay_type
+        vm.bank_account_id = e.bank_account_id
+      }
+      let param = {
+        info: {
+          order_id: vm.$route.params.order_id,
+          fee: vm.serviceCharge,
+          bank_account_id: '0',
+          pay_type: vm.payTypeObj.payType,
+        },
+      }
       hlsPopup.showLoading('请稍候')
-      setTimeout(() => {
+      vm.$post(url, param).then(function (res) {
+        if (res.result === 'S') {
+          vm.hlsPopup.hideLoading()
+          vm.checkPay()
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    checkPay () {
+      let vm = this
+      if (parseFloat(vm.sumMoney) === 0) {
+        hlsPopup.showLongCenter('您支付的金额为0元')
+      } else {
+        vm.pay()
+      }
+    },
+    pay () {
+      let vm = this
+      let url = process.env.basePath + 'merchant_payment'
+      let param = {
+        order_id: vm.$route.params.order_id,
+      }
+      // hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
-        if (vm.money === 0) {
-          vm.downNum = true
+        if (res.result === 'S') {
+          if (res.return_code !== '0000') {
+            hlsPopup.showLongCenter(res.error_message)
+          } else {
+            vm.$router.push({
+              name: 'PayPage',
+              params: {
+                url: res.paymentURL,
+                order_id: vm.$route.params.order_id,
+                text: vm.text,
+                payType: vm.payTypeObj.payType,
+              },
+            })
+          }
         } else {
-          vm.changePage()
+          hlsPopup.showLongCenter(res.message)
         }
-      }, 2000)
+      })
+    },
+    affirm () {
+      // this.confirm = true
+      this.confirmToPay()
     },
     changePage () {
       this.$router.push({
@@ -283,7 +366,6 @@ export default {
         },
       })
     },
-
     getType () {
       let vm = this
       let url = process.env.basePath + 'payment_method_query'
@@ -295,6 +377,36 @@ export default {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
           vm.lists = res.lists
+          vm.nongBank = []
+          vm.lists.forEach((item, i) => {
+            if (item.bank_full_name.indexOf('农业') !== -1) {
+              vm.nongBank.push(vm.lists[i])
+              vm.flag = true
+            }
+          })
+          if (vm.flag) {
+            vm.select = 'nong0'
+            vm.checkType.bank_full_name = '农业银行'
+            vm.checkType.img = ny
+            vm.checkType.bank_account_num = vm.nongBank[0].bank_account_num
+            vm.sectctNong = true
+            // vm.confirmToPay(vm.nongBank[0])
+            vm.pay_type = vm.nongBank[0].pay_type
+            vm.bank_account_id = vm.nongBank[0].bank_account_id
+          } else if (!vm.flag && vm.lists.length !== 0) {
+            vm.select = 'three0'
+            vm.checkType.bank_full_name = vm.newList[0].bank_full_name
+            vm.checkType.img = vm.selectImg(vm.newList[0])
+            vm.checkType.bank_account_num = vm.newList[0].bank_account_num
+            vm.sectctNong = true
+            vm.pay_type = vm.lists[0].pay_type
+            vm.bank_account_id = vm.lists[0].bank_account_id
+            // vm.confirmToPay(vm.lists[0])
+          } else if (!vm.flag && vm.lists === 0) {
+            vm.sectctNong = false
+            hlsPopup.showLongCenter('请先绑定银行卡')
+            vm.checkType.bank_full_name = '（无）'
+          }
         } else {
           hlsPopup.showLongCenter(res.message)
         }
@@ -304,8 +416,11 @@ export default {
 }
 </script>
 <style lang='less' >
-#pay-entry-margin {
- .vue-better-scroll__wrapper{
+#marginPay-pay-entry{
+  .hls-list-item{
+    margin-bottom: 2px !important;
+  }
+  .vue-better-scroll__wrapper {
     padding: 0;
   }
   .trans-enter-active,
@@ -329,7 +444,7 @@ export default {
       height: 466px;
       width: 100%;
       position: relative;
-      top:18%;
+      top: 18%;
       background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
@@ -346,7 +461,7 @@ export default {
           width: 20px;
         }
         span {
-          margin-left: 38%;
+          margin-left: 30%;
           font-family: PingFangSC-Semibold;
           font-size: 16px;
           color: #656464;
@@ -359,6 +474,94 @@ export default {
       }
     }
   }
+  .modal-show-payWay{
+     width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    z-index: 910;
+    background-color: rgba(56, 63, 69, 0.3);
+    justify-content: center;
+    align-items: center;
+    .down {
+      height: 466px;
+      width: 100%;
+      position: relative;
+      top: 18%;
+      background: #fff;
+      border-radius: 12px 12px 0 0;
+      overflow: scroll;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      .top {
+        left: 24px;
+        width: 330px;
+        height: 54px;
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        img {
+          width: 20px;
+        }
+        span {
+          margin-left: 38%;
+          font-family: PingFangSC-Semibold;
+          font-size: 16px;
+          color: #656464;
+          letter-spacing: 0.49px;
+          text-align: center;
+        }
+      }
+      .pay-way {
+        //width: 350px;
+        //margin: 0 auto;
+        width: 100%;
+        padding: 0 4% 0 4%;
+        background: #fff;
+        .hls-item {
+          padding-left: 12px;
+          .add-name {
+            flex: 3;
+            line-height: 56px;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #656464;
+            div {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            .icon1 {
+              width: 34px;
+              height: 34px;
+              display: block;
+              float: left;
+              margin-top: 10px;
+              margin-right: 5px;
+            }
+            .icon2 {
+              width: 32px;
+              display: block;
+              float: left;
+              margin-top: 12px;
+              margin-right: 8px;
+            }
+            .icon {
+              width: 30px;
+              margin: 0 8px 0 3px;
+            }
+          }
+
+          .add-content {
+            img {
+              width: 21px;
+            }
+          }
+        }
+      }
+    }
+  }
   .modal-show-bank {
     width: 100%;
     height: 100%;
@@ -372,7 +575,7 @@ export default {
       height: 466px;
       width: 100%;
       position: relative;
-      top:18%;
+      top: 18%;
       background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
@@ -412,7 +615,7 @@ export default {
             font-family: PingFangSC-Regular;
             font-size: 14px;
             color: #656464;
-            div{
+            div {
               display: flex;
               justify-content: center;
               align-items: center;

src/router/index.js

@@ -244,8 +244,8 @@ export default new Router({
     {path: '/new-list', component: NewList, name: 'NewList', meta: {keepAlive: true}},
     {path: '/payment-contract-record', component: PaymentContractRecord, name: 'PaymentContractRecord', meta: {keepAlive: true}},
     // 保证金支付
-    {path: '/margin-first-pay', component: MarginFirstPay, name: 'MarginFirstPay', meta: {keepAlive: true}},
-    {path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}},
+    {path: '/margin-first-pay', component: MarginFirstPay, name: 'MarginFirstPay', meta: {keepAlive: false}},
+    {path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: false}},
     // 支付页
     {path: '/pay-page', component: PayPage, name: 'PayPage', meta: {keepAlive: false}},
     // 产品查询