余额支付

src/components/PayMethodPick.vue

@@ -1,7 +1,12 @@
 <template>
     <div>
         <template v-for="(item, index) in payConfig" :key="index">
-            <div class="pay-item" @click="pick(item)" v-if="item.show" :key="index">
+            <div
+                class="pay-item"
+                @click="pick(item)"
+                v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
+                :key="index"
+            >
                 <div class="img-icon">
                     <img class="icon" :src="item.icon" alt="" />
                 </div>
@@ -17,7 +22,13 @@
 </template>
 <script>
 export default {
-    props: { modelValue: {} },
+    props: {
+        modelValue: {},
+        showBalance: {
+            type: Boolean,
+            default: true
+        }
+    },
     created() {
         if (this.value) {
             this.checked = this.value;

src/router/index.js

@@ -39,14 +39,12 @@ function jsapiSign() {
                         wx.updateAppMessageShareData({
                             desc: '全球首个基于区块链的游戏资产集换中心',
                             link: location.origin + '/9th',
-                            imgUrl:
-                                'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
+                            imgUrl: 'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
                         });
                         wx.updateTimelineShareData({
                             title: '绿洲宇宙-全球首个基于区块链的游戏资产集换中心',
                             link: location.origin + '/9th',
-                            imgUrl:
-                                'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
+                            imgUrl: 'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
                         });
                     });
                 })

src/store/index.js

@@ -17,7 +17,8 @@ export default createStore({
         productId: '',
         netTime: 0,
         usedBuy: true,
-        showConsole: false
+        showConsole: false,
+        bankCard: null
     },
     mutations: {
         setFinished(state, finished) {
@@ -64,10 +65,14 @@ export default createStore({
         },
         setShowConsole(state, showConsole) {
             state.showConsole = showConsole;
+        },
+        setBankCard(state, bankCard) {
+            state.bankCard = bankCard;
         }
     },
     actions: {
         getUserInfo(context, refresh) {
+            context.dispatch('getBankCard');
             return http.http
                 .get('/user/my', { refresh })
                 .then(res => {
@@ -93,6 +98,13 @@ export default createStore({
                     context.commit('setUsedBuy', true);
                 }
             });
+        },
+        getBankCard(context, refresh) {
+            if (true === refresh || !context.state.bankCard) {
+                return http.http.get('/user/myBankCard').then(res => {
+                    context.commit('setBankCard', (res || [])[0]);
+                });
+            }
         }
     },
     modules: {}

src/views/Mine.vue

@@ -144,7 +144,12 @@
             </div>
         </div>
         <van-grid class="menus">
-            <van-grid-item text="我的银行卡" :to="{ path: '/mineBanks' }">
+            <van-grid-item v-if="enableWallet" text="我的钱包" :to="{ path: '/mineWallet' }">
+                <template #icon>
+                    <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <van-grid-item v-else text="我的银行卡" :to="{ path: '/mineBanks' }">
                 <template #icon>
                     <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
                 </template>
@@ -211,14 +216,15 @@ export default {
                 openQuota: false
             },
             shareMoney: 0,
-            refreshFlag: Number(localStorage.getItem('refreshFlag') || '0')
+            refreshFlag: Number(localStorage.getItem('refreshFlag') || '0'),
+            enableWallet: false
         };
     },
     components: { Level, Post },
     computed: {
         ...mapState(['userInfo'])
     },
-    mounted() {
+    created() {
         this.getInit();
     },
     methods: {
@@ -242,10 +248,11 @@ export default {
                     });
 
                 this.getProduct();
-                this.$http.get('/sysConfig/get/share_lvzhoushi_num').then(res => {
-                    if (res.value) {
-                        this.shareMoney = Number(res.value);
+                this.$http.get('/sysConfig/get/share_lvzhoushi_num,enable_wallet').then(res => {
+                    if (res['share_lvzhoushi_num'] && res['share_lvzhoushi_num'].value) {
+                        this.shareMoney = Number(res['share_lvzhoushi_num'].value);
                     }
+                    this.enableWallet = res['enable_wallet'].value === '1';
                 });
             }
 

src/views/Submit.vue

@@ -375,7 +375,7 @@ export default {
             }
             if (this.payType === 'SYXPAY') {
                 this.$toast.clear();
-                this.$router.replace('/bankPay?id=' + this.orderId);
+                this.$router.replace({ name: 'bankPay', query: { id: this.orderId } });
             } else if (this.payType === 'IAP') {
                 window.store.order('358');
                 this.getOrder(true);

src/views/pay/BankPay.vue

@@ -6,15 +6,21 @@
             <span>{{ price }}</span>
         </div>
 
-        <van-cell title="支付银行卡" isLink @click="chooseBanK">
-            <div class="code" v-if="bankInfo.bindCardId">{{ bankName }}</div>
+        <van-cell title="支付银行卡" isLink @click="chooseBank">
+            <div class="code" v-if="bankCard && bankCard.bindCardId">{{ bankName }}</div>
             <div class="code not" v-else>请选择</div>
         </van-cell>
 
         <div class="btn">
-            <van-button type="primary" block round :disabled="!this.bankInfo.bindCardId" @click="submit"
-                >确认支付</van-button
+            <van-button
+                type="primary"
+                block
+                round
+                :disabled="!(this.bankCard && this.bankCard.bindCardId)"
+                @click="submit"
             >
+                确认支付
+            </van-button>
         </div>
 
         <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
@@ -23,58 +29,54 @@
 
 <script>
 import phoneCode from '../../components/phoneCode.vue';
+import { mapState } from 'vuex';
 export default {
     components: { phoneCode },
     data() {
         return {
             orderId: 0,
             price: 0,
-            bankInfo: {},
             payOrder: {},
             type: 'order'
         };
     },
     computed: {
+        ...mapState(['bankCard']),
         bankName() {
-            if (this.bankInfo.bindCardId) {
-                return this.bankInfo.bankName + '(' + this.bankInfo.bankNo.slice(-4) + ')';
+            if (this.bankCard && this.bankCard.bindCardId) {
+                return this.bankCard.bankName + '(' + this.bankCard.bankNo.slice(-4) + ')';
             }
             return '';
         }
     },
     mounted() {
-        if (this.$route.query.id) {
-            this.orderId = this.$route.query.id;
-            if (this.$route.query.type) {
-                this.type = this.$route.query.type;
-            }
-            if (this.type === 'gift') {
-                this.$http.get('/giftOrder/get/' + this.orderId).then(res => {
-                    this.price = res.gasPrice;
-                });
-            } else if (this.type === 'mint') {
-                this.$http.get('/mintOrder/get/' + this.orderId).then(res => {
-                    this.price = res.gasPrice;
-                });
-            } else {
-                this.$http.get('/order/get/' + this.orderId).then(res => {
-                    this.price = res.totalPrice;
-                });
-            }
-
-            this.$http.get('/user/myBankCard').then(res => {
-                if (res.length !== 0) {
-                    this.bankInfo = res[0];
-                }
+        this.orderId = this.$route.query.id;
+        if (this.$route.query.type) {
+            this.type = this.$route.query.type;
+        }
+        if (this.type === 'gift') {
+            this.$http.get('/giftOrder/get/' + this.orderId).then(res => {
+                this.price = res.gasPrice;
+            });
+        } else if (this.type === 'mint') {
+            this.$http.get('/mintOrder/get/' + this.orderId).then(res => {
+                this.price = res.gasPrice;
+            });
+        } else if (this.type === 'recharge') {
+            this.price = this.$route.query.amount;
+        } else {
+            this.$http.get('/order/get/' + this.orderId).then(res => {
+                this.price = res.totalPrice;
             });
         }
+        this.$store.dispatch('getBankCard');
     },
     methods: {
         submit(e) {
             if (!this.checkWebDriver(e)) {
                 return;
             }
-            if (!this.bankInfo.bindCardId) {
+            if (!(this.bankCard && this.bankCard.bindCardId)) {
                 this.$toast('请选择银行卡');
                 return;
             }
@@ -84,8 +86,9 @@ export default {
             });
             if (this.type === 'gift') {
                 this.$http
-                    .post('/payOrder/v2/gift/agreement?id=' + this.orderId, {
-                        bindCardId: this.bankInfo.bindCardId
+                    .post('/payOrder/v2/gift/agreement', {
+                        id: this.orderId,
+                        bindCardId: this.bankCard.bindCardId
                     })
                     .then(res => {
                         this.payOrder = res;
@@ -98,8 +101,25 @@ export default {
                     });
             } else if (this.type === 'mint') {
                 this.$http
-                    .post('/payOrder/v2/mint/agreement?id=' + this.orderId, {
-                        bindCardId: this.bankInfo.bindCardId
+                    .post('/payOrder/v2/mint/agreement', {
+                        id: this.orderId,
+                        bindCardId: this.bankCard.bindCardId
+                    })
+                    .then(res => {
+                        this.payOrder = res;
+                        if (res.needCaptcha) {
+                            this.onSubmit(e);
+                        }
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
+            } else if (this.type === 'recharge') {
+                this.$http
+                    .post('/payOrder/v2/recharge/agreement', {
+                        userId: this.$store.state.userInfo.id,
+                        amount: this.price,
+                        bindCardId: this.bankCard.bindCardId
                     })
                     .then(res => {
                         this.payOrder = res;
@@ -112,8 +132,9 @@ export default {
                     });
             } else {
                 this.$http
-                    .post('/payOrder/v2/agreement?id=' + this.orderId, {
-                        bindCardId: this.bankInfo.bindCardId
+                    .post('/payOrder/v2/agreement', {
+                        id: this.orderId,
+                        bindCardId: this.bankCard.bindCardId
                     })
                     .then(res => {
                         this.payOrder = res;
@@ -140,18 +161,22 @@ export default {
                 forbidClick: true
             });
             this.$http
-                .post(
-                    `/payOrder/v2/confirmAgreement?requestId=${this.payOrder.requestId}&paymentOrderId=${this.payOrder.paymentOrderId}&code=${code}`
-                )
+                .post(`/payOrder/v2/confirmAgreement`, {
+                    requestId: this.payOrder.requestId,
+                    paymentOrderId: this.payOrder.paymentOrderId,
+                    code: code
+                })
                 .then(() => {
                     this.$toast.success('支付成功');
                     setTimeout(() => {
                         if (this.type == 'gift') {
                             this.$router.go(-2);
                         } else if (this.type === 'mint') {
-                            this.$router.replace('/activityOrderDetail?id=' + this.orderId);
+                            this.$router.replace({ name: 'activityOrderDetail', query: { id: this.orderId } });
+                        } else if (this.type === 'recharge') {
+                            this.$router.replace({ name: 'mineWallet' });
                         } else {
-                            this.$router.replace('/orderDetail?id=' + this.orderId);
+                            this.$router.replace({ name: 'orderDetail', query: { id: this.orderId } });
                         }
                     }, 1000);
                 })
@@ -162,8 +187,8 @@ export default {
                     }, 1000);
                 });
         },
-        chooseBanK() {
-            if (!this.bankInfo.bindCardId) {
+        chooseBank() {
+            if (!(this.bankCard && this.bankCard.bindCardId)) {
                 this.$router.push('/mineBanksAdd');
             }
         }

src/views/user/BalanceRecord.vue

@@ -41,7 +41,8 @@ export default {
                 SELL: '藏品出售',
                 RETURN: '失败退回',
                 PAY: '订单支付',
-                RECHARGE: '充值'
+                RECHARGE: '充值',
+                DENY: '审核不通过'
             }
         };
     },

src/views/user/Banks.vue

@@ -31,16 +31,22 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            colorList: ['#6b73a1', '#ea4f56', '#36a0b9', '#f79439'],
-            list: []
+            colorList: ['#6b73a1', '#ea4f56', '#36a0b9', '#f79439']
         };
     },
-    mounted() {
+    created() {
         this.getBank();
     },
+    computed: {
+        ...mapState(['bankCard']),
+        list() {
+            return this.bankCard ? [this.bankCard] : [];
+        }
+    },
     methods: {
         getColor(bank) {
             const cyrb53 = function (str, seed = 0) {
@@ -62,9 +68,7 @@ export default {
             return this.colorList[0];
         },
         getBank() {
-            this.$http.get('/user/myBankCard').then(res => {
-                this.list = res;
-            });
+            this.$store.dispatch('getBankCard', true);
         },
         add() {
             this.checkAuth().then(() => {

src/views/user/Wallet.vue

@@ -31,23 +31,77 @@
             </div>
             <div class="bottom">
                 <div class="btn-withdraw" @click="withdraw">提现</div>
-                <div class="btn-recharge" @click="recharge">充值</div>
+                <div class="btn-recharge" @click="recharge" v-if="enableRecharge">充值</div>
             </div>
         </div>
-        <van-action-sheet v-model:show="showWithdrawDialog" :closeable="false">
-            <div class="recharge-dialog">
-                <div class="title">
-                    <div class="text">充值详情</div>
-                    <div class="close">
-                        <img src="@assets/icon_dialog_close.png" />
-                    </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: {
@@ -56,18 +110,29 @@ export default {
             amountOptions: [100, 500, 1000, 2000, 5000, 10000],
             amount: null,
             minAmount: 100,
-            showWithdrawDialog: true
+            showRechargeDialog: false,
+            payMethod: null,
+            showWithdrawDialog: false,
+            enableRecharge: false
         };
     },
     created() {
-        this.$http.get('/sysConfig/get/min_recharge_amount').then(res => {
-            this.minAmount = Number(res.value);
-        });
-        this.$http.get('/userBalance/my').then(res => {
-            this.userBalance = res;
+        this.$http.get('/sysConfig/get/min_recharge_amount,enable_recharge').then(res => {
+            this.minAmount = Number(res['min_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('请输入充值金额');
@@ -82,30 +147,75 @@ export default {
                 this.$toast('充值金额不能大于50000');
                 return;
             }
-            this.$toast.loading('充值中');
+            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('/payOrder/v2/recharge', { amount: this.amount })
+                .post('/withdrawApply/apply', { amount: this.amount })
                 .then(res => {
-                    this.openScheme(res);
-                    setTimeout(() => {
-                        this.$toast.clear();
-                    }, 1000);
+                    this.$toast.success('申请提现成功');
+                    this.getBalance();
                 })
                 .catch(e => {
-                    this.$toast(e.error || '充值失败');
-                });
-        },
-        withdraw() {
-            this.$dialog
-                .confirm({
-                    message: '是否申请提现？'
-                })
-                .then(() => {
-                    this.$toast.loading('申请提现');
-                    setTimeout(() => {
-                        this.$toast.clear();
-                        this.$dialog.alert({ message: '申请提现成功，预计1个工作日后到账' });
-                    }, 1000);
+                    this.$toast(e.error || '申请提现失败');
                 });
         }
     }
@@ -270,7 +380,6 @@ export default {
         .btn-withdraw {
             flex: 1 0 0;
             border-radius: 19px;
-            margin-right: 20px;
             height: 38px;
             font-size: 16px;
             font-weight: bold;
@@ -281,6 +390,9 @@ export default {
             &:active {
                 background: fade(#393d62, 30%);
             }
+            & + div {
+                margin-left: 20px;
+            }
         }
         .btn-recharge {
             flex: 1 0 0;
@@ -298,15 +410,107 @@ export default {
         }
     }
 }
-.recharge {
+::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>