Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/nine-space/.env.development

@@ -1 +1 @@
-VUE_APP_BASE_URL=https://nfttest.9space.vip
+VUE_APP_BASE_URL=http://localhost:8080

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="bar">
+        <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>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.bar {
+    padding: 10px 16px;
+    background-color: @bg;
+    .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/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/creator/Detail.vue

@@ -193,7 +193,8 @@ export default {
                             type: this.type,
                             salable: this.salable,
                             minterId: this.info.id,
-                            del: false
+                            del: false,
+                            source: 'OFFICIAL,USER'
                         },
                         sort: this.sort
                     },

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

@@ -0,0 +1,94 @@
+<template>
+    <div class="page">
+        <page-bar>我的银行卡</page-bar>
+
+        <div class="add" @click="add" v-if="list.length === 0">
+            <img src="../../assets/png-tianjia.png" alt="" />
+            <span>添加银行卡</span>
+        </div>
+
+        <div class="list">
+            <div class="bank-info" v-for="(item, index) in list" :key="index">
+                <div class="info1">
+                    <div class="text1">{{ item.bankName }}</div>
+                    <div class="text2">{{ getNum(item.bankNo) }}</div>
+                </div>
+                <div class="info2">{{ item.cardType }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            list: []
+        };
+    },
+    mounted() {
+        this.$http.get('/user/myBankCard').then(res => {
+            this.list = res;
+        });
+    },
+    methods: {
+        add() {
+            this.checkAuth().then(() => {
+                this.$router.push('/mineBanksAdd');
+            });
+        },
+        getNum(No) {
+            return '**** ' + No.substr(-4, 4);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.page {
+    background-color: @bg3;
+}
+.add {
+    .flex-col();
+    padding: 60px 0;
+    align-items: center;
+
+    img {
+        width: 54px;
+        height: 54px;
+    }
+
+    span {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+        margin-top: 17px;
+    }
+}
+@colorList: #37b074, #ea4f56, #36a0b9, #f79439;
+.bank-info {
+    each(@colorList,{
+        &:nth-child( 4n + @{index} ){
+            background:  linear-gradient(90deg, @value, lighten(@value , 20%) 100%);
+        }
+    
+    });
+
+    height: 75px;
+    .flex-col();
+    border-radius: 8px;
+    margin: 20px 16px;
+    justify-content: center;
+    padding: 0 10px;
+
+    .info1 {
+        .flex();
+        justify-content: space-between;
+        font-size: @font2;
+        line-height: 24px;
+    }
+    .info2 {
+        font-size: @font1;
+    }
+}
+</style>

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

@@ -0,0 +1,226 @@
+<template>
+    <div class="page">
+        <page-bar>
+            添加银行卡
+            <template #sub>成功绑定应行卡后</template>
+            <template #sub-prim>不能修改</template>
+        </page-bar>
+        <van-form @submit="onSubmit" class="form">
+            <van-field
+                type="digit"
+                name="卡号"
+                label="卡号"
+                :maxlength="23"
+                placeholder="点击输入银行卡号"
+                :formatter="bankFormatter"
+                v-model="form.bankNo"
+                clearable
+                :rules="[{ required: true, message: '请填写银行卡号' }]"
+            />
+            <van-field
+                type="tel"
+                name="银行预留手机号"
+                label="银行预留手机号"
+                placeholder="请输入银行预留手机号"
+                v-model="form.phone"
+                :rules="[
+                    { required: true, message: '请填写银行预留手机号' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            />
+            <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 {
+    mixins: [phone],
+    data() {
+        return {
+            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: {
+        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 {
+                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=${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>
+/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>