绑定支付

src/components/phoneCode.vue

@@ -5,10 +5,10 @@
             <div class="title">输入验证码</div>
             <div class="phone">已发送到您{{ phoneText }}手机</div>
             <div class="send" @click="onSubmit">未收到验证码?</div>
-            <van-password-input :value="code" :length="4" />
+            <van-password-input :value="code" :length="6" />
             <!-- 数字键盘 -->
             <van-number-keyboard
-                maxlength="4"
+                maxlength="6"
                 theme="custom"
                 v-model="code"
                 :show="show"
@@ -29,7 +29,7 @@ export default {
     },
     watch: {
         code() {
-            if (this.code && this.code.length === 4) {
+            if (this.code && this.code.length === 6) {
                 this.$emit('bind', this.code);
             }
         }

src/views/pay/BankPay.vue

@@ -6,12 +6,15 @@
             <span>{{ orderInfo.totalPrice }}</span>
         </div>
 
-        <van-cell title="支付银行卡" isLink>
-            <div class="code not">请选择</div>
+        <van-cell title="支付银行卡" isLink @click="chooseBanK">
+            <div class="code" v-if="bankInfo.bindCardId">{{ bankName }}</div>
+            <div class="code not" v-else>请选择</div>
         </van-cell>
 
         <div class="btn">
-            <van-button type="primary" block round @click="onSubmit">确认支付</van-button>
+            <van-button type="primary" block round :disabled="!this.bankInfo.bindCardId" @click="submit"
+                >确认支付</van-button
+            >
         </div>
 
         <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
@@ -25,23 +28,63 @@ export default {
     data() {
         return {
             orderId: 0,
-            orderInfo: {}
+            orderInfo: {},
+            bankInfo: {},
+            payOrder: {}
         };
     },
+    computed: {
+        bankName() {
+            if (this.bankInfo.bindCardId) {
+                return this.bankInfo.bankName + '(' + this.bankInfo.bankNo.slice(-4) + ')';
+            }
+            return '';
+        }
+    },
     mounted() {
         if (this.$route.query.id) {
             this.orderId = this.$route.query.id;
             this.$http.get('/order/get/' + this.orderId).then(res => {
                 this.orderInfo = res;
             });
+
+            this.$http.get('/user/myBankCard').then(res => {
+                if (res.length !== 0) {
+                    this.bankInfo = res[0];
+                }
+            });
         }
     },
     methods: {
+        submit(e) {
+            if (!this.checkWebDriver(e)) {
+                return;
+            }
+            if (!this.bankInfo.bindCardId) {
+                this.$toast('请选择银行卡');
+                return;
+            }
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post('/payOrder/v2/agreement?id=' + this.orderId, {
+                    bindCardId: this.bankInfo.bindCardId
+                })
+                .then(res => {
+                    this.payOrder = res;
+                    if (res.needCaptcha) {
+                        this.onSubmit(e);
+                    }
+                });
+        },
         onSubmit(e) {
             if (!this.checkWebDriver(e)) {
                 return;
             }
 
+            this.$toast.success('发送成功');
             this.$refs.code.init();
         },
         bind(code) {
@@ -49,7 +92,27 @@ export default {
                 message: '加载中...',
                 forbidClick: true
             });
-            console.log(code);
+            this.$http
+                .post(
+                    `/payOrder/v2/confirmAgreement?requestId=${this.payOrder.requestId}&paymentOrderId=${this.payOrder.paymentOrderId}&code=${code}`
+                )
+                .then(() => {
+                    this.$toast.success('支付成功');
+                    setTimeout(() => {
+                        this.$router.replace('/orderDetail?id=' + this.orderId);
+                    }, 1000);
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                    setTimeout(() => {
+                        this.$router.go(-1);
+                    }, 1000);
+                });
+        },
+        chooseBanK() {
+            if (!this.bankInfo.bindCardId) {
+                this.$router.push('/mineBanksAdd');
+            }
         }
     }
 };
@@ -96,7 +159,11 @@ export default {
 
 .code {
     font-size: 14px;
-    color: #c8c9cc;
+    color: #000;
     line-height: 24px;
+
+    &.not {
+        color: #c8c9cc;
+    }
 }
 </style>

src/views/user/BanksAdd.vue

@@ -51,7 +51,8 @@ export default {
         return {
             form: {},
             show: false,
-            identityAuthInfo: {}
+            identityAuthInfo: {},
+            bindCardId: 0
         };
     },
     computed: {
@@ -88,8 +89,24 @@ export default {
             if (!this.checkWebDriver(e)) {
                 return;
             }
-            this.sendMsg(this.form.phone);
-            this.$refs.code.init();
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            let bankNo = this.form.bankNo.replace(/ /g, '');
+            this.$http
+                .post('/userBankCard/bindCard?phone=' + this.form.phone + '&bankNo=' + bankNo)
+                .then(res => {
+                    this.bindCardId = res.bindCardId;
+                    return this.$http.post('/userBankCard/bindCardCaptcha?bindCardId=' + res.bindCardId);
+                })
+                .then(() => {
+                    this.$toast.success('发送成功');
+                    this.$refs.code.init();
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
         },
         bind(code) {
             this.$toast.loading({
@@ -98,7 +115,7 @@ export default {
             });
             let bankNo = this.form.bankNo.replace(/ /g, '');
             this.$http
-                .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${code}`)
+                .post(`/userBankCard/bindCardConfirm?bindCardId=${this.bindCardId}&code=${code}`)
                 .then(res => {
                     this.$toast.success('添加成功');
                     setTimeout(() => {