钱包

src/components/product/ThreeMode.vue

@@ -117,8 +117,9 @@ export default {
 
                     mixer = new THREE.AnimationMixer(object);
 
-                    if (object.animations && object.animations[0]) {
-                        const action = mixer.clipAction(object.animations[0]);
+                    console.log(object.animations);
+                    for (let ani of object.animations) {
+                        const action = mixer.clipAction(ani);
                         action.play();
                     }
 

src/router/index.js

@@ -614,6 +614,12 @@ const routes = [
         name: 'balanceRecord',
         component: () => import('../views/user/BalanceRecord.vue'),
         meta: {}
+    },
+    {
+        path: '/walletAgreement',
+        name: 'walletAgreement',
+        component: () => import('../views/user/WalletAgreement.vue'),
+        meta: {}
     }
 ];
 

src/views/user/Wallet.vue

@@ -1,37 +1,36 @@
 <template>
     <div class="wallet">
-        <div class="wallet-card">
-            <div class="label">账户余额（元）</div>
-            <div class="value">{{ Number(userBalance.balance || 0).toFixed(2) }}</div>
-            <div class="btns">
-                <div class="btn btn-card" @click="$router.push({ name: 'mineBanks' })">我的银行卡</div>
-                <div class="btn btn-record" @click="$router.push({ name: 'balanceRecord' })">余额记录</div>
+        <div class="balance-card">
+            <img class="cover" src="https://cdn.raex.vip/image/2022-06-01-16-09-56vifAnxiR.png" />
+            <div class="stat" v-if="!(userInfo && userInfo.walletEnabled)">未开通</div>
+            <div
+                class="btn-open"
+                @click="$router.push({ name: 'walletAgreement' })"
+                v-if="!(userInfo && userInfo.walletEnabled)"
+            >
+                <img src="@assets/icon_arrow_left.png" class="arrow" />
+                申请开通
+                <img src="@assets/icon_arrow_left.png" class="arrow right" />
             </div>
         </div>
-        <div class="recharge-card">
-            <div class="title">选择金额</div>
-            <div class="amount">
-                <div
-                    class="item"
-                    v-for="item in amountOptions"
-                    :key="item"
-                    :class="{ active: amount === item }"
-                    @click="amount = item"
-                >
-                    {{ item }}
-                </div>
-            </div>
-            <div class="custom-amount">
-                <span class="yuan">¥</span>
-                <div class="placeholder" v-if="amount == undefined || amount === ''">请输入自定义金额</div>
-                <input type="number" v-model="amount" />
+        <div class="balance-amount" v-if="userInfo && userInfo.walletEnabled">
+            <div class="label">账户余额（元）</div>
+            <div class="value">
+                <span class="number"> {{ Number(userBalance.balance || 0).toFixed(2) }}</span>
+                <button class="btn-withdraw" @click="showWithdrawDialog = true">提现</button>
+                <button class="btn-recharge" @click="showRechargeDialog = true">充值</button>
             </div>
-            <div class="tip">
-                充值说明<br />1、本次充值仅限于平台消费，无法跨地区款站点使用<br />2、若遇到充值未到账，请联系客服
+        </div>
+        <div class="cell-group">
+            <div class="cell">
+                <img class="icon" src="@assets/icon_yinhangka.png" />
+                <span class="label">我的银行卡</span>
+                <img class="into" src="@assets/icon_inter1.png" />
             </div>
-            <div class="bottom">
-                <div class="btn-withdraw" @click="withdraw">提现</div>
-                <div class="btn-recharge" @click="recharge" v-if="enableRecharge">充值</div>
+            <div class="cell" v-if="userInfo && userInfo.walletEnabled">
+                <img class="icon" src="@assets/info_icon_jiaoyijilu.png" />
+                <span class="label">余额记录</span>
+                <img class="into" src="@assets/icon_inter1.png" />
             </div>
         </div>
         <van-action-sheet v-model:show="showRechargeDialog" :closeable="false" class="recharge-dialog">
@@ -44,7 +43,12 @@
             <div class="content">
                 <div class="amount">
                     <div class="text">充值金额(元)</div>
-                    <div class="num">{{ amount }}</div>
+                    <div class="num">单次最低充值 ¥{{ minAmount }}，最高充值 ¥{{ maxAmount }}</div>
+                </div>
+                <div class="input">
+                    <img class="yuan" src="@assets/icon_jiage.png" />
+                    <input type="number" v-model="amount" />
+                    <div class="placeholder" v-if="amount == undefined || amount === ''">请输入充值金额</div>
                 </div>
                 <div class="line"></div>
                 <div class="title-methods">充值方式</div>
@@ -53,7 +57,16 @@
                 </div>
             </div>
             <div class="btn-wrapper">
-                <div class="btn-recharge" @click="confirmRecharge">确认支付</div>
+                <van-button
+                    type="primary"
+                    :color="$colors.prim"
+                    round
+                    block
+                    class="btn-recharge"
+                    @click="confirmRecharge"
+                >
+                    确认支付
+                </van-button>
             </div>
         </van-action-sheet>
 
@@ -66,8 +79,14 @@
             </div>
             <div class="content">
                 <div class="amount">
-                    <div class="text">提现金额(元)</div>
-                    <div class="num">{{ amount }}</div>
+                    <div class="text">提现金额</div>
+                    <div class="num">全部可提现 ¥{{ Number(userBalance.balance || 0).toFixed(2) }}</div>
+                </div>
+                <div class="input">
+                    <img class="yuan" src="@assets/icon_jiage.png" />
+                    <input type="number" v-model="amount" />
+                    <div class="placeholder" v-if="amount == undefined || amount === ''">请输入提现金额</div>
+                    <button class="btn-all" @click="amount = userBalance.balance">全部</button>
                 </div>
                 <div class="line"></div>
                 <van-cell v-if="bankCard" title="提现帐户" :value="bankCard.bankName">
@@ -83,7 +102,7 @@
             <div class="btn-wrapper">
                 <van-button
                     type="primary"
-                    color="#373A60"
+                    :color="$colors.prim"
                     round
                     block
                     class="btn-recharge"
@@ -127,7 +146,7 @@ export default {
         this.getBalance();
     },
     computed: {
-        ...mapState(['bankCard'])
+        ...mapState(['bankCard', 'userInfo'])
     },
     methods: {
         getBalance() {
@@ -156,6 +175,23 @@ export default {
             this.showRechargeDialog = true;
         },
         confirmRecharge() {
+            if (!this.amount) {
+                this.$toast('请输入充值金额');
+                return;
+            }
+            const amount = Number(this.amount);
+            if (this.minAmount > -1 && amount < this.minAmount) {
+                this.$toast('充值金额不能小于' + this.minAmount + '元');
+                return;
+            }
+            if (this.maxAmount > -1 && amount > this.maxAmount) {
+                this.$toast('充值金额不能大于' + this.maxAmount + '元');
+                return;
+            }
+            if (amount > 50000) {
+                this.$toast('充值金额不能大于50000');
+                return;
+            }
             if (!this.payMethod) {
                 this.$toast('请选择支付方式');
                 return;
@@ -212,6 +248,14 @@ export default {
             this.showWithdrawDialog = true;
         },
         confirmWithdraw() {
+            if (!this.amount) {
+                this.$toast('请输入提现金额');
+                return;
+            }
+            if (Number(this.amount) > this.userBalance.balance) {
+                this.$toast('提现金额不能大于余额');
+                return;
+            }
             this.showWithdrawDialog = false;
             this.$toast.loading('申请提现');
             this.$http
@@ -228,6 +272,130 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.balance-card {
+    margin: 0 28px;
+    position: relative;
+    .cover {
+        width: 100%;
+        height: auto;
+    }
+    .stat {
+        width: 60px;
+        line-height: 24px;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 0px 9px 0px 9px;
+        font-size: 12px;
+        color: white;
+        text-align: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+    .btn-open {
+        height: 56px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        .flex();
+        justify-content: center;
+        font-size: 14px;
+        color: white;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 0px 0px 9px 9px;
+        .arrow {
+            width: 18px;
+            height: 18px;
+            margin: 0 16px;
+            &.right {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+.balance-amount {
+    border-radius: 8px;
+    margin: 16px 16px 0 16px;
+    background: white;
+    padding: 16px 12px;
+    .label {
+        line-height: 24px;
+        font-size: 14px;
+        color: @text3;
+    }
+    .value {
+        line-height: 30px;
+        color: black;
+        margin-top: 4px;
+        font-family: OSP;
+        font-size: 36px;
+        .flex();
+        .number {
+            flex-grow: 1;
+        }
+        button {
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            font-size: 14px;
+            font-weight: bold;
+            .flex();
+            justify-content: center;
+            border: none;
+            margin: 0 0 0 12px;
+            padding: 0;
+        }
+        .btn-withdraw {
+            color: @prim;
+            background: fade(@prim, 10%);
+            &:active {
+                background: fade(@prim, 20%);
+            }
+        }
+        .btn-recharge {
+            color: white;
+            background: @prim;
+            &:active {
+                background: shade(@prim, 20%);
+            }
+        }
+    }
+}
+.cell-group {
+    border-radius: 8px;
+    margin: 16px 16px 0 16px;
+    background: white;
+    .cell {
+        height: 56px;
+        padding: 0 10px 0 12px;
+        .flex();
+        position: relative;
+        .icon {
+            width: 28px;
+            height: 28px;
+        }
+        .label {
+            color: @text3;
+            font-size: 14px;
+            margin-left: 10px;
+            flex-grow: 1;
+        }
+        .into {
+            width: 28px;
+            height: 28px;
+        }
+        &::after {
+            content: '';
+            .setBottomLine();
+            left: 16px;
+            right: 16px;
+        }
+        &:last-child::after {
+            content: none;
+        }
+    }
+}
+
 .wallet {
     background: @bg3;
     padding-top: 16px;
@@ -452,20 +620,70 @@ export default {
         }
     }
     .amount {
-        background: @bg3;
-        border-radius: 4px;
-        margin: 16px;
-        padding: 17px 0 20px 0;
-        .flex-col();
-        align-items: center;
+        margin: 20px 0 0 16px;
         .text {
-            font-size: 16px;
+            line-height: 24px;
+            font-size: 14px;
             color: black;
+            font-weight: bold;
         }
         .num {
+            line-height: 22px;
+            font-size: 13px;
+            margin-top: 2px;
+            color: @text3;
+        }
+    }
+    .input {
+        margin-top: 22px;
+        .flex();
+        align-items: baseline;
+        padding: 0 16px;
+        position: relative;
+        .yuan {
+            width: 15px;
+            height: 17px;
+        }
+        input {
+            padding: 0;
+            margin: 0;
+            border: none;
+            line-height: 30px;
             font-size: 36px;
-            font-family: DIN;
-            margin-top: 10px;
+            color: black;
+            margin-left: 13px;
+            flex-grow: 1;
+            font-family: OSP;
+        }
+        .placeholder {
+            position: absolute;
+            left: 48px;
+            top: 0;
+            bottom: 0;
+            right: 16px;
+            margin: auto;
+            font-weight: 400;
+            color: @text3;
+            font-size: 14px;
+            line-height: 48px;
+        }
+        .btn-all {
+            width: 72px;
+            height: 24px;
+            background: fade(@prim, 10%);
+            border-radius: 12px;
+            color: @prim;
+            border: none;
+            font-size: 14px;
+            font-weight: bold;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            right: 16px;
+            &:active {
+                background: fade(@prim, 20%);
+            }
         }
     }
     .line {

src/views/user/WalletAgreement.vue

@@ -0,0 +1,215 @@
+<template>
+    <div style="padding: 16px 16px 82px 16px">
+        <p style="text-align: center">
+            <strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">RAEX</span></strong
+            ><strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">绿洲宇宙</span></strong>
+        </p>
+        <p style="text-align: center">
+            <strong
+                ><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">绿魔收藏家俱乐部</span></strong
+            >
+        </p>
+        <p style="text-align: center">
+            <strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">绿魔卡守则</span></strong
+            ><strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">及风险声明</span></strong>
+        </p>
+        <p style="text-align: center">
+            <strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">&nbsp;</span></strong>
+        </p>
+        <p style="text-align: left">
+            <strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 10px">风险声明：</span></strong
+            ><span style="font-family: 微软雅黑; font-size: 10px"
+                >RAEX绿洲宇宙平台发售的数字艺术品具备收藏欣赏或版权价值，RAEX绿洲宇宙发售的数字艺术品首发价格为官方指导价，RAEX绿洲宇宙对数字艺术品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">一、</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">RAEX</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">绿洲宇宙为提升各位藏家体验</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">，便于</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">藏家更便捷、更高效的支付</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">拍卖尾款，</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">特定向符合条件的藏家</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">开通</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">RAEX</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">绿洲宇宙</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">&ldquo;绿洲收藏家绿魔卡&rdquo;服务，</span
+            ><span style="font-family: 微软雅黑; font-size: 16px"
+                >各位藏家可视自身情况决定是否开通绿魔卡服务。一经申请开通</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">&ldquo;绿洲收藏家绿魔卡&rdquo;服务</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">即视为同意并遵守本守则。</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >二、&ldquo;绿魔收藏家俱乐部绿魔卡&rdquo;，以下简称&ldquo;绿魔卡&rdquo;，申请开通绿魔卡的藏家须同时符合以下条件：</span
+            >
+        </p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">1.</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">账户持有1</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">000</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">或以上的绿洲石</span>
+        </p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">2.</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">已通过绿洲宇宙平台实名制认证</span>
+        </p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">3.</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">藏家年龄已满</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">22周岁未满55周岁</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">，且具有中华人民共和国国籍。</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">三、每位藏家仅限开通一张绿魔卡，单张绿魔卡单</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">次</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">最低充值额度为</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">1</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">00</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">元，单次</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">最高充值额度为</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">5,000元，单</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">个账户充值金额不得超过</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">10,000元</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">。充值期间绿魔卡不产生利息或</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">任何性质的</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">其他收益。</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >四、绿魔卡仅可用来购买绿洲宇宙平台的数字艺术品（不含实物衍生品）。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >五、各位藏家可根据个人需求随时提现，但每日仅可提现一次，提现</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">最低提现金额为</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">100元</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">整</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">。由于监管需要，绿洲宇宙将在每个月的</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">15日、30日（遇非工作日自动顺延）强制藏家</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">全部</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">提现。</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >六、提现到账时间为提现成功后的次日（遇非工作日自动顺延），</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">提现手续费</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">为提现金额的</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">0.8%，单笔手续费不足</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">2元</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">的</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">按</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">人民币</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">2元收取；</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">七、绿魔卡与现金充值比例为1:1</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">，</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">绿洲宇宙官方从未开展或委托其他机构开展</span
+            ><span style="font-family: 微软雅黑; font-size: 16px"
+                >&ldquo;预存赠送&rdquo;&ldquo;预存享福利&rdquo;&ldquo;预存升级&rdquo;</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">等活动，请各位藏家仔细甄别，谨防受骗上当。</span>
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >八、藏家不得租借或转让绿魔卡；也不得利用绿魔卡随意替他人转账、提现非法来源或来源不明的资金及其他有价证券。一经发现，绿洲宇宙第一时间向监管部门举报并保留向藏家追究法律责任的权利。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">九、</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">RAEX</span
+            ><span style="font-family: 微软雅黑; font-size: 16px"
+                >绿洲宇宙按照监管部门要求引入第三方机构风控系统，对于价格明显异常的藏品，将有可能被系统判定为具有洗钱及其他违规风险，一经发现绿洲宇宙将立即下架。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >十、绿魔卡充值提现过于频繁，可能触发央行反洗钱系统监管，触发监管后将可能被限制绿魔卡部分或全部功能。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px"
+                >十一、针对少部分使用&ldquo;作弊外挂&rdquo;、&ldquo;盗取他人藏品&rdquo;等严重违规行为的藏家，一经发现直接封号处理。涉嫌违法犯罪的，一律移交司法机关处理。</span
+            >
+        </p>
+        <p style="text-indent: 24pt"><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <ul style="list-style-type: undefined">
+            <li>
+                <span style="font-family: 微软雅黑; font-size: 16px; font-size: 12pt">十二、</span
+                ><span style="font-family: 微软雅黑; font-size: 16px; font-size: 12pt"
+                    >RAEX绿洲宇宙平台发售的数字艺术品具备收藏欣赏或版权价值，RAEX绿洲宇宙发售的数字艺术品首发价格为官方指导价，RAEX绿洲宇宙对数字艺术品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。</span
+                >
+            </li>
+        </ul>
+        <p><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-indent: 24pt">
+            <span style="font-family: 微软雅黑; font-size: 16px">十三、</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">本守则在中国法律框架下最终解释权归</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">RAEX</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">绿洲宇宙所有。</span>
+        </p>
+        <p><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p><span style="font-family: 微软雅黑; font-size: 16px">&nbsp;</span></p>
+        <p style="text-align: right">
+            <span style="font-family: 微软雅黑; font-size: 16px">RAEX</span
+            ><span style="font-family: 微软雅黑; font-size: 16px">绿洲宇宙</span>
+        </p>
+        <p style="text-align: right"><span style="font-family: 微软雅黑; font-size: 16px">绿魔收藏家俱乐部</span></p>
+        <p style="text-align: right"><span style="font-family: 微软雅黑; font-size: 16px">2022年5月27日</span></p>
+        <div class="btn-wrapper">
+            <van-button class="btn-agree" type="primary" round block :color="$colors.prim" @click="enableWallet">
+                同意并开通
+            </van-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    },
+    methods: {
+        enableWallet() {
+            this.$toast.loading('正在开通');
+            this.$http
+                .post('/user/enableWallet')
+                .then(res => {
+                    this.$toast('开通成功');
+                    this.$store.dispatch('getUserInfo').then(() => {});
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    this.$toast(e.error || '开通失败');
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.btn-wrapper {
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    bottom: 0;
+    padding-bottom: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom));
+}
+</style>

src/views/user/WalletBak.vue

@@ -0,0 +1,522 @@
+<template>
+    <div class="wallet">
+        <div class="wallet-card">
+            <div class="label">账户余额（元）</div>
+            <div class="value">{{ Number(userBalance.balance || 0).toFixed(2) }}</div>
+            <div class="btns">
+                <div class="btn btn-card" @click="$router.push({ name: 'mineBanks' })">我的银行卡</div>
+                <div class="btn btn-record" @click="$router.push({ name: 'balanceRecord' })">余额记录</div>
+            </div>
+        </div>
+        <div class="recharge-card">
+            <div class="title">选择金额</div>
+            <div class="amount">
+                <div
+                    class="item"
+                    v-for="item in amountOptions"
+                    :key="item"
+                    :class="{ active: amount === item }"
+                    @click="amount = item"
+                >
+                    {{ item }}
+                </div>
+            </div>
+            <div class="custom-amount">
+                <span class="yuan">¥</span>
+                <div class="placeholder" v-if="amount == undefined || amount === ''">请输入自定义金额</div>
+                <input type="number" v-model="amount" />
+            </div>
+            <div class="tip">
+                充值说明<br />1、本次充值仅限于平台消费，无法跨地区款站点使用<br />2、若遇到充值未到账，请联系客服
+            </div>
+            <div class="bottom">
+                <div class="btn-withdraw" @click="withdraw">提现</div>
+                <div class="btn-recharge" @click="recharge" v-if="enableRecharge">充值</div>
+            </div>
+        </div>
+        <van-action-sheet v-model:show="showRechargeDialog" :closeable="false" class="recharge-dialog">
+            <div class="title">
+                <div class="text">充值详情</div>
+                <div class="close" @click="showRechargeDialog = false">
+                    <img src="@assets/icon_dialog_close.png" />
+                </div>
+            </div>
+            <div class="content">
+                <div class="amount">
+                    <div class="text">充值金额(元)</div>
+                    <div class="num">{{ amount }}</div>
+                </div>
+                <div class="line"></div>
+                <div class="title-methods">充值方式</div>
+                <div style="padding: 0 16px">
+                    <pay-method-pick v-model="payMethod" :showBalance="false"></pay-method-pick>
+                </div>
+            </div>
+            <div class="btn-wrapper">
+                <div class="btn-recharge" @click="confirmRecharge">确认支付</div>
+            </div>
+        </van-action-sheet>
+
+        <van-action-sheet v-model:show="showWithdrawDialog" :closeable="false" class="recharge-dialog">
+            <div class="title">
+                <div class="text">提现详情</div>
+                <div class="close" @click="showWithdrawDialog = false">
+                    <img src="@assets/icon_dialog_close.png" />
+                </div>
+            </div>
+            <div class="content">
+                <div class="amount">
+                    <div class="text">提现金额(元)</div>
+                    <div class="num">{{ amount }}</div>
+                </div>
+                <div class="line"></div>
+                <van-cell v-if="bankCard" title="提现帐户" :value="bankCard.bankName">
+                    <template #value>
+                        <span>
+                            {{ bankCard.bankName }} <br />
+                            ****{{ bankCard.bankNo.slice(-4) }}
+                        </span>
+                    </template>
+                </van-cell>
+                <van-cell v-else title="提现帐户" value="添加" is-link to="mineBanksAdd"></van-cell>
+            </div>
+            <div class="btn-wrapper">
+                <van-button
+                    type="primary"
+                    color="#373A60"
+                    round
+                    block
+                    class="btn-recharge"
+                    @click="confirmWithdraw"
+                    :disabled="!bankCard"
+                >
+                    确认提现
+                </van-button>
+            </div>
+        </van-action-sheet>
+    </div>
+</template>
+<script>
+import PayMethodPick from '@/components/PayMethodPick';
+import resolveUrl from 'resolve-url';
+import { mapState } from 'vuex';
+export default {
+    components: { PayMethodPick },
+    data() {
+        return {
+            userBalance: {
+                balance: 0
+            },
+            amountOptions: [100, 200, 500, 1000, 2000, 5000],
+            amount: null,
+            minAmount: -1,
+            maxAmount: -1,
+            showRechargeDialog: false,
+            payMethod: null,
+            showWithdrawDialog: false,
+            enableRecharge: false
+        };
+    },
+    created() {
+        this.$http.get('/sysConfig/get/min_recharge_amount,max_recharge_amount,enable_recharge').then(res => {
+            this.minAmount = Number(res['min_recharge_amount'].value);
+            this.maxAmount = Number(res['max_recharge_amount'].value);
+            this.enableRecharge = res['enable_recharge'].value === '1';
+        });
+        this.$store.dispatch('getBankCard');
+        this.getBalance();
+    },
+    computed: {
+        ...mapState(['bankCard'])
+    },
+    methods: {
+        getBalance() {
+            this.$http.get('/userBalance/my').then(res => {
+                this.userBalance = res;
+            });
+        },
+        recharge() {
+            if (!this.amount) {
+                this.$toast('请输入充值金额');
+                return;
+            }
+            const amount = Number(this.amount);
+            if (this.minAmount > -1 && amount < this.minAmount) {
+                this.$toast('充值金额不能小于' + this.minAmount + '元');
+                return;
+            }
+            if (this.maxAmount > -1 && amount > this.maxAmount) {
+                this.$toast('充值金额不能大于' + this.maxAmount + '元');
+                return;
+            }
+            if (amount > 50000) {
+                this.$toast('充值金额不能大于50000');
+                return;
+            }
+            this.showRechargeDialog = true;
+        },
+        confirmRecharge() {
+            if (!this.payMethod) {
+                this.$toast('请选择支付方式');
+                return;
+            }
+            this.showRechargeDialog = false;
+            switch (this.payMethod) {
+                case 'ALIPAY':
+                    this.$toast.loading('充值中');
+                    this.$http
+                        .post('/payOrder/v2/recharge', { amount: this.amount })
+                        .then(res => {
+                            this.openScheme(res);
+                            setTimeout(() => {
+                                this.$toast.clear();
+                            }, 1000);
+                        })
+                        .catch(e => {
+                            this.$toast(e.error || '充值失败');
+                        });
+                    break;
+                case 'UNION':
+                    window.open(
+                        resolveUrl(
+                            this.$baseUrl,
+                            '/payOrder/v2/recharge/sandQuick?userId=' +
+                                this.$store.state.userInfo.id +
+                                '&amount=' +
+                                this.amount
+                        )
+                            .replace('www.raex.vip', 'jump.raex.vip')
+                            .replace('test.raex.vip', 'jumptest.raex.vip'),
+                        '_blank'
+                    );
+                    break;
+                case 'SYXPAY':
+                    this.$router.push({
+                        name: 'bankPay',
+                        query: {
+                            type: 'recharge',
+                            amount: this.amount
+                        }
+                    });
+            }
+        },
+        withdraw() {
+            if (!this.amount) {
+                this.$toast('请输入提现金额');
+                return;
+            }
+            if (Number(this.amount) > this.userBalance.balance) {
+                this.$toast('提现金额不能大于余额');
+                return;
+            }
+            this.showWithdrawDialog = true;
+        },
+        confirmWithdraw() {
+            this.showWithdrawDialog = false;
+            this.$toast.loading('申请提现');
+            this.$http
+                .post('/withdrawApply/apply', { amount: this.amount })
+                .then(res => {
+                    this.$toast.success('申请提现成功');
+                    this.getBalance();
+                })
+                .catch(e => {
+                    this.$toast(e.error || '申请提现失败');
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.wallet {
+    background: @bg3;
+    padding-top: 16px;
+    .flex-col();
+    .wallet-card {
+        height: 138px;
+        margin: 0 16px;
+        background: #404569;
+        background-image: url(../../assets/bg_wallet.png);
+        background-size: 182px 94px;
+        background-repeat: no-repeat;
+        background-position-x: right;
+        background-position-y: top;
+        border-radius: 9px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+        .flex-col();
+        .label {
+            font-size: 14px;
+            line-height: 24px;
+            margin: 16px 0 0 16px;
+        }
+        .value {
+            font-family: OSP;
+            font-size: 36px;
+            line-height: 30px;
+            margin: 4px 0 0 16px;
+            flex-grow: 1;
+        }
+        .btns {
+            color: @text3;
+            font-size: 14px;
+            background: #292a52;
+            .flex();
+            .btn {
+                flex-basis: 0;
+                flex-grow: 1;
+                height: 44px;
+                .flex();
+                align-items: center;
+                justify-content: center;
+                transition: color 0.1s;
+                &:active {
+                    color: fade(@text3, 20%);
+                }
+            }
+            .btn-card {
+                position: relative;
+                &:after {
+                    content: '';
+                    width: 1px;
+                    height: 20px;
+                    background: @text3;
+                    border-radius: 1px;
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    right: 0;
+                    margin: auto;
+                }
+            }
+        }
+    }
+    .recharge-card {
+        margin: 16px 16px 0 16px;
+        padding-top: 16px;
+        border-radius: 16px 16px 0px 0px;
+        background: white;
+        flex-grow: 1;
+        .title {
+            font-size: 16px;
+            font-weight: bold;
+            margin-left: 16px;
+        }
+        .amount {
+            margin: 16px 16px 0 0;
+            .flex();
+            flex-wrap: wrap;
+            .item {
+                width: calc((100vw - 96px) / 3);
+                margin-left: 16px;
+                margin-bottom: 16px;
+                border-radius: 4px;
+                background: fade(#393d62, 20%);
+                font-size: 32px;
+                font-family: OSP;
+                color: white;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                &.active {
+                    background: #393d62;
+                }
+            }
+        }
+        .custom-amount {
+            background: @bg3;
+            margin: 0 16px 16px 16px;
+            height: 48px;
+            border-radius: 4px;
+            color: @text3;
+            .flex();
+            padding-left: 12px;
+            padding-right: 16px;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 48px;
+            position: relative;
+            .placeholder {
+                position: absolute;
+                left: 28px;
+                top: 0;
+                bottom: 0;
+                right: 16px;
+                text-align: center;
+                margin: auto;
+                font-weight: 400;
+                color: @text3;
+                font-size: 14px;
+                line-height: 48px;
+            }
+            input {
+                flex-grow: 1;
+                border: none;
+                background: none;
+                font-size: 24px;
+                color: black;
+                margin-left: 6px;
+                line-height: 48px;
+                padding: 0;
+                .flex();
+                font-family: OSP;
+                letter-spacing: 1px;
+                text-align: center;
+                z-index: 1;
+            }
+        }
+        .tip {
+            font-size: 12px;
+            color: @text3;
+            margin: 16px;
+        }
+    }
+    .bottom {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        .flex();
+        height: 56px;
+        padding-bottom: env(safe-area-inset-bottom);
+        padding: 0 16px;
+        background: white;
+        border-top: 1px solid @border2;
+        .btn-withdraw {
+            flex: 1 0 0;
+            border-radius: 19px;
+            height: 38px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #373a60;
+            background: fade(#393d62, 20%);
+            .flex();
+            justify-content: center;
+            &:active {
+                background: fade(#393d62, 30%);
+            }
+            & + div {
+                margin-left: 20px;
+            }
+        }
+        .btn-recharge {
+            flex: 1 0 0;
+            border-radius: 19px;
+            height: 38px;
+            font-size: 16px;
+            font-weight: bold;
+            color: white;
+            background: #373a60;
+            .flex();
+            justify-content: center;
+            &:active {
+                background: fade(#393d62, 80%);
+            }
+        }
+    }
+}
+::v-deep(.recharge-dialog .van-action-sheet__content) {
+    overflow: auto !important;
+    display: flex;
+    flex-direction: column;
+}
+.recharge-dialog {
+    overflow: auto;
+    .content {
+        flex-basis: calc(80vh - 150px);
+        flex-grow: 1;
+        overflow: auto;
+        //height: calc(100vh - 300px);
+    }
+    .title {
+        height: 50px;
+        position: relative;
+        &::after {
+            .setBottomLine();
+        }
+        .flex();
+        .text {
+            margin-left: 16px;
+            font-size: 14px;
+            color: black;
+            font-weight: bold;
+            flex-grow: 1;
+        }
+        .close {
+            padding: 10px 16px;
+            img {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+    .amount {
+        background: @bg3;
+        border-radius: 4px;
+        margin: 16px;
+        padding: 17px 0 20px 0;
+        .flex-col();
+        align-items: center;
+        .text {
+            font-size: 16px;
+            color: black;
+        }
+        .num {
+            font-size: 36px;
+            font-family: DIN;
+            margin-top: 10px;
+        }
+    }
+    .line {
+        background: @bg3;
+        height: 1px;
+        margin: 0 16px;
+    }
+    .title-methods {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: bold;
+        margin-left: 16px;
+        margin-top: 20px;
+        margin-right: 16px;
+        .bank-name {
+            font-size: 14px;
+            color: @text3;
+            font-weight: normal;
+            float: right;
+        }
+    }
+    .btn-wrapper {
+        height: 56px;
+        min-height: 56px;
+        .flex();
+        padding-bottom: env(safe-area-inset-bottom);
+        position: relative;
+        &::after {
+            .setTopLine();
+        }
+        .btn-recharge {
+            // flex-grow: 1;
+            // height: 38px;
+            // border-radius: 19px;
+            // background: #373a60;
+            // font-size: 16px;
+            // color: white;
+            // font-weight: bold;
+            // .flex();
+            // justify-content: center;
+            margin: 0 48px;
+            ::v-deep(.van-button__content) {
+                font-weight: bold;
+            }
+            // &:active {
+            //     background: shade(#373a60, 20%);
+            // }
+        }
+    }
+}
+::v-deep(.van-cell__title) {
+    font-weight: bold;
+}
+</style>