reservation-uniapp-250509/service-uniapp-client/pages/mine/wallet.vue

<template>
	<view class="content">
		<mNavbar title="我的钱包" :leftClick="leftClick" />
		<view class="banner" />

		<view class="b-relative center font-m">
			<image src="/static/ms/w.png" />
			<view class="title" style="position: absolute; top: 40rpx; left: 40rpx">
				<view style="line-height: 40rpx; font-size: 28rpx">账号余额</view>
				<view style="line-height: 60rpx; font-size: 40rpx">￥{{ userInfo.price }}</view>
			</view>
			<view class="font-menu flex flex-sb">
				<view @click="toRunningWater(0)">充值记录</view>
				<view @click="toRunningWater(1)">提现记录</view>
				<view @click="toRunningWater(2)">下单记录</view>
				<view @click="toRunningWater(3)">佣金记录</view>
			</view>
		</view>

		<view class="from-body">
			<view>我要充值</view>
			<view @click="selectOption(index)" class="top-label" v-for="(item,index) in rechargeList" :key="item.id">
				<view class="top-label-box">
					<view style="font-size: 14px; font-weight: 500; padding: 20rpx 0px 10rpx;">充值</view>
					<view class="top-label-box-one">
						<view style="font-size: 20px;">{{ item.money }}</view>
						<text>元</text>
						<!-- <view class="top-label-box-two">{{ item.discount == 0 ? "不享优惠" : `享${item.discount}折优惠`}}</view> -->
						<view style="font-size: 12px; color: #47D594; margin-left: 20rpx;">送{{ item.sendMoney }}.00元
						</view>
					</view>
					<view style="font-size: 10px; margin-top: 40rpx;">{{ item.remarks }}</view>
					<!-- <view class="top-label-box-tag">到期时间：{{ item.endTime }}</view> -->
					<div :class="{ activeLabel : optionIndex == index }"></div>
				</view>
			</view>

			<view class="money">
				<van-cell-group inset>
					<van-field @update:model-value="priceChange" type="number" v-model="price" label="￥"
						placeholder="请输入自定义金额" label-width="10" label-align="center "
						style="background-color: #F5F5F5; margin: 10rpx 0px; border-radius: 20px;" />
					<van-field v-model="phone" placeholder="请输入技师手机号"
						style="background-color: #F5F5F5; margin: 10rpx 0px; border-radius: 20px;" />
				</van-cell-group>
			</view>

			<view>充值说明</view>
			<view v-html="instructions" style="line-height: 40rpx; font-size: 24rpx;color: #666666; font-weight: 400;">
			</view>
		</view>

		<view class="recharge">
			<view @click="wxPay" class="btn">
				立即充值
			</view>
		</view>
	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		components: {
			mNavbar,
		},
		data() {
			return {
				rechargeList: [],
				userInfo: {},
				optionIndex: 0,
				instructions: [],
				price: '',
				phone: '',
				id: undefined,
				rechargePrice: 0
			}
		},
		onShow() {
			this.getrRechargeList()
			this.getUserInfo()
			this.getConfig()
		},
		methods: {
			getUserInfo() {
				this.$api('getUserInfo', {}, res => {
					if (res.code == 200) {
						this.userInfo = res.result;
					}
				})
			},
			//获取充值套餐
			getrRechargeList() {
				this.$api('getRechargeList', {}, res => {
					if (res.code == 200) {
						const rechargeList = res.result;
						this.rechargeList = rechargeList;
						//默认选中第一个充值方案
						this.rechargePrice = rechargeList[0].money;
						this.id = rechargeList[0].id;
					}
				})
			},
			leftClick() { //返回个人中心
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			selectOption(index) { //选择充值方案
				this.optionIndex = index;
				this.id = this.rechargeList[index].id;
				this.rechargePrice = this.rechargeList[index].money;
			},
			toRunningWater(status) { //跳转流水页面
				uni.navigateTo({
					url: `/pages/mine/runningWater?status=${status}`
				})
			},
			wxPay() { //立即充值(支付)
				if (this.phone) {
					if (!this.validatePhone(this.phone)) {
						return uni.showToast({
							title: '手机号格式不合法',
							icon: 'none'
						})
					}
				}
				let data = {
					price: this.rechargePrice ? this.rechargePrice : this.price,
					type: 0,
					phone: this.phone,
					id: this.id
				}
				this.$api('recharge', data, res => {
					if (res.code == 200) {
						this.chooseWXPay(res)
					}
				})
			},
			getConfig() { //获取配置
				this.$api('getConfig', {}, res => {
					if (res.code == 200) {
						for (let i = 0; i < res.result.length; i++) {
							if (res.result[i].keyValue == 'payValue') {
								this.instructions = res.result[i].content
							}
						}
					}
				})
			},
			priceChange(price) { //用户输入充值金额
				this.rechargePrice = undefined;
				this.optionIndex = undefined;
				this.id = undefined;
			},
			validatePhone(phone) {
				var phoneRegex = /^1(3|4[0-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9\d)\d{8}$/;
				return phoneRegex.test(phone);
			},
			chooseWXPay(res){
				window.jWeixin.config({
					debug: false, 
					appId:res.result.appId,//必填
					jsApiList: ['chooseWXPay'] 
				});
				window.jWeixin.ready(function() {
					window.jWeixin.chooseWXPay({
						appId: res.result.appId,
						timestamp: res.result
						.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
						nonceStr: res.result.nonceStr, // 支付签名随机串，不长于 32 位
						package: res.result.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: res.result.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: res.result.paySign, // 支付签名
						success: function(res) {
							this.getUserInfo()
							// 支付成功后的回调函数
							uni.navigateTo({
								url: '/pages/payment/payment-success?price=' + this.projectDetail.price
							})
						}
					});
				});
				jWeixin.error(function(res) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '支付失败',
					// });
				});
			},
		}
	}
</script>

<style scoped>
	.content {
		padding-bottom: 60px;
	}

	body {
		background-color: #fff;
	}

	.banner {
		width: 100vw;
		height: 256rpx;
		background: #cfece7;
	}

	.center {
		width: 710rpx;
		height: 316rpx;
		margin: -204rpx auto 0;
	}

	.center image {
		width: 710rpx;
		height: 316rpx;
		border-radius: 12rpx;
	}

	.font-m {
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #ffffff;
		text-shadow: 0 4rpx 6rpx 0 rgba(40, 170, 133, 0.81);
	}

	.font-menu {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
		line-height: 24rpx;
		width: 710rpx;

		position: absolute;
		left: 0;
		bottom: 25rpx;
	}

	.font-menu view {
		width: calc(100% / 4);
		border-right: 1rpx solid #fff;
	}


	.item-line input {
		width: 456rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #939393;
		padding: 0 20rpx;
	}



	.from-body {
		padding: 40rpx 20rpx;
		font-size: 28rpx;
		text-align: left;
		color: #333333;
	}


	.top-label {
		position: relative;
		width: 96%;
		margin-left: 2%;
		height: 200rpx;
		background-image: url(/static/ms/cz.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		border-radius: 10px;
		margin-top: 20rpx;
	}


	.top-label-box {
		position: relative;
		height: 100%;
		padding-left: 35rpx;
		box-sizing: border-box;
	}

	.top-label-box .activeLabel {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url('../../static/ms/select.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.top-label-box-one {
		display: flex;
		align-items: center;
	}

	.top-label-box-two {
		margin-left: 18rpx;
		font-size: 12px;
		padding: 6rpx 8rpx;
		background-color: #EBCB85;
		border-bottom-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.top-label-box-tag {
		position: absolute;
		border: 1px solid;
		font-size: 12px;
		padding: 6rpx 10rpx;
		color: #fff;
		background-color: #24CC80;
		top: -1px;
		right: 0px;
		border-bottom-left-radius: 10px;
	}

	.money {
		margin: 20rpx 0rpx;
	}

	.recharge {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background: white;
	}

	.recharge .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85%;
		height: 80rpx;
		border-radius: 40rpx;
		color: white;
		font-size: 28rpx;
		background: linear-gradient(180deg, #6FDFBE, #5AC796);
	}

	@media all and (min-width: 961px) {
		.recharge {
			left: 50% !important;
			transform: translateX(-50%);
		}
	}
</style>