银行卡

src/main/nine-space/src/components/Loading.vue

@@ -24,7 +24,7 @@ export default {};
     overflow: hidden;
     box-sizing: border-box;
     border-width: 0;
-    width: 60%;
+    width: 88px;
     .img1 {
         position: absolute;
         left: -1px;

src/main/nine-space/src/components/PageBar.vue

@@ -1,6 +1,14 @@
 <template>
     <div class="bar">
-        <span><slot>第九空间</slot></span>
+        <div>
+            <div class="text1">
+                <slot>第九空间</slot>
+            </div>
+            <div class="text2">
+                <span> <slot name="sub"></slot></span>
+                <span class="prim"> <slot name="sub-prim"></slot></span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -10,11 +18,23 @@ export default {};
 
 <style lang="less" scoped>
 .bar {
-    height: 50px;
-    padding: 0 16px;
+    padding: 10px 16px;
     background-color: @bg;
-    font-size: 20px;
-    font-weight: bold;
     .flex();
+
+    .text1 {
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .text2 {
+        font-size: 12px;
+        color: #939599;
+        line-height: 22px;
+        margin-top: 4px;
+        .prim {
+            color: @prim;
+        }
+    }
 }
 </style>

src/main/nine-space/src/main.js

@@ -17,6 +17,7 @@ import Driver from './components/Driver.vue';
 import common from './mixins/common';
 import VueClipboard from 'vue-clipboard2';
 import queryString from 'query-string';
+import PageBar from './components/PageBar';
 store.commit('setFirstUrl', location.href);
 
 import ImgContent from './components/ImgContent.vue';
@@ -68,6 +69,7 @@ createApp(App)
     .component('like-button', LikeButton)
     .component('driver', Driver)
     .component('van-image', ImgContent)
+    .component('page-bar', PageBar)
     .use(store)
     .use(router)
     .mount('#app');

src/main/nine-space/src/mixins/common.js

@@ -95,6 +95,26 @@ export default {
             m = Math.pow(10, Math.max(r1, r2));
             return (arg1 * m + arg2 * m) / m;
         },
+        checkAuth() {
+            if (this.authStatus === '已认证') {
+                return Promise.resolve();
+            } else {
+                this.$dialog
+                    .confirm({
+                        title: '实名认证',
+                        message: '您的账户还未实名认证，认证后可进行添加银行卡',
+                        confirmButtonText: '前往认证'
+                    })
+                    .then(() => {
+                        if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                            this.$router.push('/waiting');
+                        } else if (this.authStatus === '未认证') {
+                            this.$router.push('/Authentication');
+                        }
+                    });
+                return Promise.reject();
+            }
+        },
         checkLogin() {
             if (this.isLogin) {
                 return Promise.resolve();

src/main/nine-space/src/plugins/http.js

@@ -5,9 +5,9 @@ import qs from 'qs';
 let baseUrl = 'http://localhost:8080';
 switch (process.env.NODE_ENV) {
     case 'development':
-        baseUrl = 'https://nfttest.9space.vip/';
+        // baseUrl = 'https://nfttest.9space.vip/';
         // baseUrl = 'http://192.168.50.190:8080';
-        // baseUrl = 'http://localhost:8080';
+        baseUrl = 'http://localhost:8080';
         // baseUrl = 'http://192.168.50.190:8080';
         break;
     case 'test':

src/main/nine-space/src/router/index.js

@@ -375,6 +375,22 @@ const routes = [
             title: '第九空间'
         }
     },
+    {
+        path: '/mineBanks',
+        name: 'mineBanks',
+        component: () => import('../views/user/Banks.vue'),
+        meta: {
+            title: '第九空间'
+        }
+    },
+    {
+        path: '/mineBanksAdd',
+        name: 'mineBanksAdd',
+        component: () => import('../views/user/BanksAdd.vue'),
+        meta: {
+            title: '第九空间'
+        }
+    },
     {
         path: '/mineAddress',
         name: 'mineAddress',

src/main/nine-space/src/styles/app.less

@@ -35,6 +35,8 @@
     --van-search-content-background-color: #0f0f0f;
     // --van-picker-background-color: @bg;
     --van-button-default-height: 38px;
+    --van-dialog-has-title-message-text-color: #000;
+    --van-field-label-color: #aaabad;
 }
 
 [contenteditable='true'],
@@ -113,7 +115,7 @@ input:-webkit-autofill {
     }
     .van-dialog__confirm {
         .van-button__text {
-            color: #ffa746;
+            color: #ff4f50;
         }
     }
 }
@@ -170,3 +172,13 @@ input:-webkit-autofill {
         }
     }
 }
+
+.van-button--primary {
+    background: linear-gradient(135deg, @prim 0%, #ff8f3e 100%);
+    border-width: 0;
+    color: #333230;
+}
+
+.popup-content {
+    border-radius: 12px 12px 0px 0px;
+}

src/main/nine-space/src/views/Mine.vue

@@ -101,7 +101,7 @@
         <van-cell class="title" title="我的服务" :border="false" />
 
         <van-grid class="menus">
-            <van-grid-item text="我的银行卡" @click="wait">
+            <van-grid-item text="我的银行卡" :to="{ path: '/mineBanks' }">
                 <template #icon>
                     <van-icon :name="require('../assets/icon_yinhangka.png')" class="search-icon" />
                 </template>

src/main/nine-space/src/views/user/Banks.vue

@@ -2,7 +2,7 @@
     <div class="page">
         <page-bar>我的银行卡</page-bar>
 
-        <div class="add">
+        <div class="add" @click="add">
             <img src="../../assets/png-tianjia.png" alt="" />
             <span>添加银行卡</span>
         </div>
@@ -10,7 +10,15 @@
 </template>
 
 <script>
-export default {};
+export default {
+    methods: {
+        add() {
+            this.checkAuth().then(() => {
+                this.$router.push('/mineBanksAdd');
+            });
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>

src/main/nine-space/src/views/user/BanksAdd.vue

@@ -5,40 +5,218 @@
             <template #sub>成功绑定应行卡后</template>
             <template #sub-prim>不能修改</template>
         </page-bar>
-        <van-form @submit="submit">
+        <van-form @submit="onSubmit" class="form">
             <van-field
-                name="用户名"
-                label="用户名"
-                placeholder="请输入用户名"
-                v-model="form"
-                :rules="[{ required: true, message: '请填写用户名' }]"
+                type="digit"
+                name="卡号"
+                label="卡号"
+                :maxlength="23"
+                placeholder="点击输入银行卡号"
+                :formatter="bankFormatter"
+                v-model="form.bankNo"
+                clearable
+                :rules="[{ required: true, message: '请填写银行卡号' }]"
             />
             <van-field
-                type="password"
-                name="密码"
-                label="密码"
-                placeholder="请输入密码"
-                v-model=""
-                :rules="[{ required: true, message: '请填写密码' }]"
+                type="tel"
+                name="银行预留手机号"
+                label="银行预留手机号"
+                placeholder="请输入银行预留手机号"
+                v-model="form.phone"
+                :rules="[
+                    { required: true, message: '请填写银行预留手机号' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
             />
-            <div style="margin: 16px;">
-                <van-button round block type="info" native-type="submit">提交</van-button>
+            <div class="sub">
+                <van-button type="primary" :disabled="!canNext" round block native-type="submit">下一步</van-button>
             </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>
+                <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>
     </div>
 </template>
 
 <script>
+import phone from '../../mixins/phone';
 export default {
-    data(){
+    mixins: [phone],
+    data() {
         return {
-            form:{}
+            form: {},
+            show: false
+        };
+    },
+    computed: {
+        canNext() {
+            return this.form.bankNo && this.form.phone;
+        },
+        phoneText() {
+            let phone = this.form.phone || '';
+            if (phone.length === 11) {
+                return phone.substr(0, 3) + '****' + phone.substr(-4, 4);
+            }
+
+            return '';
         }
     },
     methods: {
-        submit() {}
+        onSubmit() {
+            this.sendMsg(this.form.phone);
+            this.form.code = '';
+            this.show = true;
+        },
+        bind() {
+            if (!this.form.code || this.form.code.length < 4) {
+                this.$toast('请输入验证码');
+            } else {
+                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, '');
+            _val = _val.split('');
+            let vals = [];
+            _val.forEach((item, index) => {
+                vals.push(item);
+                if ((index - 2) % 4 === 0 && index !== _val.length - 1) {
+                    vals.push(' ');
+                }
+            });
+            return vals.join('');
+        }
     }
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/.form {
+    .van-cell {
+        .flex-col();
+
+        .van-field__label {
+            width: auto;
+        }
+
+        .van-field__body {
+            line-height: 48px;
+            border-radius: 8px;
+            border: 1px solid #494a4d;
+            padding: 0 16px;
+            margin-top: 6px;
+
+            .van-field__control {
+                font-size: @font1;
+            }
+        }
+
+        .van-field__error-message {
+            margin-top: 6px;
+        }
+    }
+}
+.sub {
+    margin: 60px 48px;
+}
+@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 #c8c9cc;
+    }
+
+    .cancel {
+        position: absolute;
+        font-size: @font1;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 22px;
+        padding: 21px 20px;
+        left: 0;
+        top: 0;
+    }
+
+    .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, #fdfb60 0%, #ff8f3e 100%);
+        color: #333230;
+    }
+}
+</style>