2024-06-05 18:45:30 +08:00
|
|
|
|
<!-- 会员充值 -->
|
2024-06-06 17:50:25 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="member">
|
|
|
|
|
|
<view class="card" :style="{'background-image':'url(../../static/icon/charge_bg.webp)'}">
|
|
|
|
|
|
<view class="card-info">
|
|
|
|
|
|
<u-image width="100rpx" height="100rpx" :src="userInfo.avatar" />
|
|
|
|
|
|
<view class="card-info-right">
|
|
|
|
|
|
<view class="phone">{{userInfo.mobile}}</view>
|
|
|
|
|
|
<view class="level">初级会员 享受{{userInfo.discount}}折优惠</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="charge">
|
|
|
|
|
|
<view class="charge-left">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<text>当前已充值{{userInfo.total_recharge_amount}}，升级还需{{userInfo.next_limit}}</text>
|
|
|
|
|
|
<text>{{userInfo.next_level}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<up-line-progress :percentage="30" activeColor="#A26341" inactiveColor="#fff"
|
|
|
|
|
|
height="8rpx"></up-line-progress>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="charge-right">升级会员</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 充值规格 -->
|
|
|
|
|
|
<view class="rules">
|
|
|
|
|
|
<view class="rules-title">
|
|
|
|
|
|
<view class="rules-title-main">充值规格</view>
|
|
|
|
|
|
<view class="rules-title-record" @click="onPageToRecord">
|
|
|
|
|
|
充值记录
|
|
|
|
|
|
<up-icon name="arrow-right"></up-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="rules-con">
|
|
|
|
|
|
<block v-for="item in chargeRulesList" :key="item.id">
|
|
|
|
|
|
<view class="rules-con-item" :class="{'active':isChooseMoney==item.id?true:false}"
|
|
|
|
|
|
@click="isChooseMoney = item.id">
|
|
|
|
|
|
<view class="rules-con-item-main">{{item.name}}</view>
|
|
|
|
|
|
<view class="rules-con-item-sub">{{item.remark?item.remark:'永久'}}</view>
|
|
|
|
|
|
<view class="rules-con-item-amount">
|
|
|
|
|
|
<text class="symbol">￥</text>
|
|
|
|
|
|
<text>{{item.value}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="rules-con-item" :class="{'active':isChooseMoney=='input'?true:false}"
|
|
|
|
|
|
@click="isChooseMoney = 'input'">
|
|
|
|
|
|
<view class="rules-con-item-main">自定义金额</view>
|
|
|
|
|
|
<view class="rules-con-item-sub">永久</view>
|
|
|
|
|
|
<view class="rules-con-item-amount">
|
|
|
|
|
|
<up-input v-model="chargeMoney" placeholder="点击输入金额" border="none" type="number" color="#333"
|
|
|
|
|
|
fontSize="28rpx" inputAlign="center"
|
|
|
|
|
|
placeholderStyle="color:'#989898';'font-size':'24rpx';text-align:center;"></up-input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 注意事项 -->
|
|
|
|
|
|
<view class="attention">
|
|
|
|
|
|
<view class="attention-title"><text>注意事项：</text></view>
|
|
|
|
|
|
<view class="attention-tips">1、充值后帐户的金额不能提现，可用于消费使用</view>
|
|
|
|
|
|
<view class="attention-tips">2、账户充值出现问题可联系平台客服，也可拨打平台客服咨询热线4008888888</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="member-btn" @click="onConfirmCharge">
|
|
|
|
|
|
<view class="btn-wrap">
|
|
|
|
|
|
确认充值
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import {
|
|
|
|
|
|
rechargeApi,
|
|
|
|
|
|
rechargeAmountApi
|
|
|
|
|
|
} from "@/api/user.js";
|
|
|
|
|
|
import {
|
|
|
|
|
|
onLoad
|
|
|
|
|
|
} from "@dcloudio/uni-app";
|
|
|
|
|
|
import {
|
|
|
|
|
|
ref
|
|
|
|
|
|
} from "vue";
|
|
|
|
|
|
import useUserStore from "@/store/user";
|
|
|
|
|
|
|
|
|
|
|
|
//用户信息
|
|
|
|
|
|
const userInfo = useUserStore().userInfo;
|
|
|
|
|
|
const isChooseMoney = ref('');
|
|
|
|
|
|
const chargeMoney = ref('');
|
|
|
|
|
|
|
|
|
|
|
|
// 充值规则
|
|
|
|
|
|
const chargeRulesList = ref([]);
|
|
|
|
|
|
const getChargeRules = () => {
|
|
|
|
|
|
rechargeAmountApi().then(rs => {
|
|
|
|
|
|
chargeRulesList.value = rs.data;
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 充值记录产看
|
|
|
|
|
|
const onPageToRecord = () => {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/charge/charge_record',
|
|
|
|
|
|
fail(err) {
|
|
|
|
|
|
console.log(err);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 确认充值
|
|
|
|
|
|
const onConfirmCharge = () => {
|
|
|
|
|
|
if (!isChooseMoney.value) return uni.$u.toast('充值金额不能为空');
|
|
|
|
|
|
let money = 0;
|
|
|
|
|
|
if (isChooseMoney.value == 'input') {
|
|
|
|
|
|
money = chargeMoney.value;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const rule = chargeRulesList.value.find(i => i.id == isChooseMoney.value);
|
|
|
|
|
|
if (rule != undefined) {
|
|
|
|
|
|
money = rule.value;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
rechargeApi({
|
|
|
|
|
|
price: money
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
|
|
|
|
|
|
uni.requestPayment({
|
|
|
|
|
|
provider: 'wxpay',
|
|
|
|
|
|
timeStamp: res.data.timeStamp,
|
|
|
|
|
|
nonceStr: res.data.nonceStr,
|
|
|
|
|
|
package: res.data.package,
|
|
|
|
|
|
signType: res.data.signType,
|
|
|
|
|
|
paySign: res.data.paySign,
|
|
|
|
|
|
success: (e) => {
|
|
|
|
|
|
if (e.errMsg == 'requestPayment:ok') {
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '充值成功',
|
|
|
|
|
|
confirmText: '查看记录',
|
|
|
|
|
|
cancelText: '继续充值',
|
|
|
|
|
|
success: (e) => {
|
|
|
|
|
|
chargeMoney.value = '';
|
|
|
|
|
|
isChooseMoney.value = '';
|
|
|
|
|
|
if (e.confirm) {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/charge/charge_record'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
fail(err) {
|
|
|
|
|
|
console.log(err);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else uni.$u.toast('支付失败')
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: (e) => {
|
|
|
|
|
|
uni.$u.toast('用户取消支付');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
|
getChargeRules();
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2024-06-05 18:45:30 +08:00
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.member {
|
|
|
|
|
|
padding: 40rpx 0 300rpx 0;
|
|
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
|
background: linear-gradient(to right, #F7EED7, #E7DAAF);
|
2024-06-06 17:50:25 +08:00
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
height: 272rpx;
|
2024-06-05 18:45:30 +08:00
|
|
|
|
margin: 0 30rpx 30rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
padding: 20rpx 0 0 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.card-info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.card-info-right {
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.phone {
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #444444;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.level {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #7B5232;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.charge {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-right: 38rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.charge-left {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
margin-right: 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&>view {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
color: #A26341;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.charge-right {
|
|
|
|
|
|
width: 148rpx;
|
|
|
|
|
|
height: 52rpx;
|
|
|
|
|
|
line-height: 52rpx;
|
|
|
|
|
|
background: #7B5232;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules {
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
|
margin: 0 30rpx 30rpx;
|
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.rules-title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 34rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.rules-title-main {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #444444;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules-title-record {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #444444;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules-con {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
|
|
.rules-con-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 188rpx;
|
|
|
|
|
|
height: 220rpx;
|
|
|
|
|
|
border: 2rpx solid #F1F1F1;
|
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
|
margin-bottom: 28rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&:not(:nth-child(3n)) {
|
|
|
|
|
|
margin-right: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules-con-item-main {
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules-con-item-sub {
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #777777;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rules-con-item-amount {
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.symbol {
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-06-06 17:50:25 +08:00
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
|
border: 2rpx solid #EFCC6E;
|
|
|
|
|
|
background: #FEF8E7;
|
|
|
|
|
|
}
|
2024-06-05 18:45:30 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.attention {
|
|
|
|
|
|
margin: 0 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.attention-title {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #262626;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
margin-left: 14rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
2024-06-06 17:50:25 +08:00
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
2024-06-05 18:45:30 +08:00
|
|
|
|
width: 6rpx;
|
2024-06-06 17:50:25 +08:00
|
|
|
|
height: 70%;
|
2024-06-05 18:45:30 +08:00
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
background: #FF8056;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.attention-tips {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #7A7A7A;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.member-btn {
|
|
|
|
|
|
position: fixed;
|
2024-06-06 17:50:25 +08:00
|
|
|
|
bottom: 0rpx;
|
2024-06-05 18:45:30 +08:00
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
2024-06-06 17:50:25 +08:00
|
|
|
|
height: 110rpx;
|
|
|
|
|
|
background-color: #F6F6F6;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
|
|
|
|
/* 兼容 iOS < 11.2 */
|
|
|
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
|
|
/* 兼容 iOS >= 11.2 */
|
|
|
|
|
|
|
|
|
|
|
|
.btn-wrap {
|
|
|
|
|
|
width: 670rpx;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background: #EFCC6E;
|
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
2024-06-05 18:45:30 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-06-06 17:50:25 +08:00
|
|
|
|
</style>
|
