发送手机

src/components/phoneCode.vue

@@ -0,0 +1,138 @@
+<template>
+    <van-popup class="popup-content" v-model:show="show" teleport="body" position="bottom">
+        <div class="popup">
+            <div class="cancel" @click="show = false">取消</div>
+            <div class="title">输入验证码</div>
+            <div class="phone">已发送到您{{ phoneText }}手机</div>
+            <div class="send" @click="onSubmit">未收到验证码?</div>
+            <van-password-input :value="code" :length="4" />
+            <!-- 数字键盘 -->
+            <van-number-keyboard
+                maxlength="4"
+                theme="custom"
+                v-model="code"
+                :show="show"
+                close-button-text="完成"
+                @close="bind"
+            />
+        </div>
+    </van-popup>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            show: false,
+            code: ''
+        };
+    },
+    watch: {
+        code() {
+            if (this.code && this.code.length === 4) {
+                this.$emit('bind', this.code);
+            }
+        }
+    },
+    methods: {
+        onSubmit(e) {
+            this.$emit('onSubmit', e);
+        },
+        bind() {
+            if (!this.code || this.code.length < 4) {
+                this.$toast('请输入验证码');
+            }
+            this.$emit('bind', this.code);
+        },
+        init() {
+            this.code = '';
+            this.show = true;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@bottom: 280px;
+@gray3: #c8c9cc;
+.popup {
+    color: #000;
+    position: relative;
+    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
+    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
+    .title {
+        text-align: center;
+        font-size: @font3;
+        padding: 20px 0;
+        border-bottom: 1px solid #f5f7fa;
+    }
+
+    .cancel {
+        position: absolute;
+        font-size: @font1;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: @text3;
+        line-height: 22px;
+        padding: 21px 20px;
+        left: 0;
+        top: 0;
+    }
+
+    .send {
+        position: absolute;
+        font-size: @font1;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: @text3;
+        line-height: 22px;
+        padding: 21px 20px;
+        right: 0;
+        top: 0;
+        text-decoration: underline;
+    }
+
+    .phone {
+        padding: 12px 0 20px;
+        text-align: center;
+        font-size: 12px;
+        color: #aaabad;
+        line-height: 24px;
+    }
+
+    /deep/.van-password-input {
+        margin: 0 80px;
+    }
+
+    /deep/.van-key {
+        &:hover {
+            background-color: @gray3;
+        }
+        &:focus {
+            background-color: @gray3;
+        }
+        &:active {
+            background-color: @gray3;
+        }
+        &:link {
+            background-color: @gray3;
+        }
+        &:visited {
+            background-color: @gray3;
+        }
+
+        &.van-key--active {
+            background-color: @gray3;
+        }
+    }
+
+    /deep/[class*='van-hairline']::after {
+        border-color: @gray3;
+    }
+
+    /deep/.van-key--blue {
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
+        color: @btnText;
+    }
+}
+</style>

src/router/index.js

@@ -578,6 +578,14 @@ const routes = [
             title: '绿洲宇宙'
         }
     },
+    {
+        path: '/bankPay',
+        name: 'bankPay',
+        component: () => import('../views/pay/BankPay.vue'),
+        meta: {
+            title: '首信易快捷支付'
+        }
+    },
     {
         path: '/mineBanks',
         name: 'mineBanks',

src/views/Submit.vue

@@ -63,7 +63,7 @@
             @cancel="(showPwdDialog = false), $toast.clear()"
             @confirm="pay"
         >
-            <div style="padding: 20px 0">
+            <div style="padding: 20px 0;">
                 <van-password-input
                     :value="tradeCode"
                     :focused="showKeyboard"
@@ -373,7 +373,10 @@ export default {
                 }, 1000);
                 return;
             }
-            if (this.payType === 'IAP') {
+            if (this.payType === 'SYXPAY') {
+                this.$toast.clear();
+                this.$router.replace('/bankPay?id=' + this.orderId);
+            } else if (this.payType === 'IAP') {
                 window.store.order('358');
                 this.getOrder(true);
             } else if (this.payType === 'ALIPAY_BRIDGE') {

src/views/pay/BankPay.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="pay">
+        <div class="title">总计</div>
+        <div class="price">
+            <img src="@assets/jiage_huang.png" alt="" />
+            <span>{{ orderInfo.totalPrice }}</span>
+        </div>
+
+        <van-cell title="支付银行卡" isLink>
+            <div class="code not">请选择</div>
+        </van-cell>
+
+        <div class="btn">
+            <van-button type="primary" block round @click="onSubmit">确认支付</van-button>
+        </div>
+
+        <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
+    </div>
+</template>
+
+<script>
+import phoneCode from '../../components/phoneCode.vue';
+export default {
+    components: { phoneCode },
+    data() {
+        return {
+            orderId: 0,
+            orderInfo: {}
+        };
+    },
+    mounted() {
+        if (this.$route.query.id) {
+            this.orderId = this.$route.query.id;
+            this.$http.get('/order/get/' + this.orderId).then(res => {
+                this.orderInfo = res;
+            });
+        }
+    },
+    methods: {
+        onSubmit(e) {
+            if (!this.checkWebDriver(e)) {
+                return;
+            }
+
+            this.$refs.code.init();
+        },
+        bind(code) {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            console.log(code);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 24px;
+}
+.pay {
+    padding: 30px 0;
+    .flex-col();
+    align-items: center;
+}
+.van-cell {
+    margin-top: 58px;
+}
+
+.price {
+    .flex();
+    align-items: flex-end;
+    margin-top: 14px;
+    img {
+        width: 10px;
+        height: 11px;
+        margin-bottom: 5px;
+    }
+    span {
+        font-size: 36px;
+        font-family: OSP-DIN, OSP;
+        color: #3ab200;
+        line-height: 30px;
+    }
+}
+
+.btn {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 188px 48px;
+}
+
+.code {
+    font-size: 14px;
+    color: #c8c9cc;
+    line-height: 24px;
+}
+</style>

src/views/user/BanksAdd.vue

@@ -37,30 +37,15 @@
             </div>
         </van-form>
 
-        <van-popup class="popup-content" v-model:show="show" teleport="body" position="bottom">
-            <div class="popup">
-                <div class="cancel" @click="show = false">取消</div>
-                <div class="title">输入验证码</div>
-                <div class="phone">已发送到您{{ phoneText }}手机</div>
-                <div class="send" @click="onSubmit">未收到验证码?</div>
-                <van-password-input :value="form.code" :length="4" />
-                <!-- 数字键盘 -->
-                <van-number-keyboard
-                    maxlength="4"
-                    theme="custom"
-                    v-model="form.code"
-                    :show="show"
-                    close-button-text="完成"
-                    @close="bind"
-                />
-            </div>
-        </van-popup>
+        <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
     </div>
 </template>
 
 <script>
+import phoneCode from '../../components/phoneCode.vue';
 import phone from '../../mixins/phone';
 export default {
+    components: { phoneCode },
     mixins: [phone],
     data() {
         return {
@@ -104,32 +89,27 @@ export default {
                 return;
             }
             this.sendMsg(this.form.phone);
-            this.form.code = '';
-            this.show = true;
+            this.$refs.code.init();
         },
-        bind() {
-            if (!this.form.code || this.form.code.length < 4) {
-                this.$toast('请输入验证码');
-            } else {
-                this.$toast.loading({
-                    message: '加载中...',
-                    forbidClick: true
+        bind(code) {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            let bankNo = this.form.bankNo.replace(/ /g, '');
+            this.$http
+                .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${code}`)
+                .then(res => {
+                    this.$toast.success('添加成功');
+                    setTimeout(() => {
+                        this.$router.go(-1);
+                    }, 1000);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
                 });
-                let bankNo = this.form.bankNo.replace(/ /g, '');
-                this.$http
-                    .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.code}`)
-                    .then(res => {
-                        this.$toast.success('添加成功');
-                        setTimeout(() => {
-                            this.$router.go(-1);
-                        }, 1000);
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e.error);
-                        }
-                    });
-            }
         },
         bankFormatter(val) {
             let _val = val.replace(/ /g, '');