381 lines
8.3 KiB
Vue
381 lines
8.3 KiB
Vue
<!-- 会员充值 -->
|
||
<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>
|
||
|
||
<style lang="scss">
|
||
.member {
|
||
padding: 40rpx 0 300rpx 0;
|
||
|
||
.card {
|
||
background: linear-gradient(to right, #F7EED7, #E7DAAF);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
height: 272rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 2rpx solid #EFCC6E;
|
||
background: #FEF8E7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6rpx;
|
||
height: 70%;
|
||
border-radius: 4rpx;
|
||
background: #FF8056;
|
||
}
|
||
}
|
||
|
||
.attention-tips {
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
.member-btn {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
</style> |