jje_uniapp/myPages/recharge/index.vue

<template>
	<view class="page">
		<!-- 钱包 -->
		<view class="recharge-me">
			<view class="bg-img">
				<!-- <image src="../../static/recharge/u1709.jpg" mode=""></image> -->
			</view>
			<view class="wallet-content">
				<view class="h-balance-wrap">
					<view class="h-balance">
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u1.png" mode=""></image>
							</view>
							<view class="name">储值余额</view>
							<view class="balance-value">￥
								<text v-if="userInfo.rechargeBalance">{{userInfo.rechargeBalance}}</text>
								<text v-else>0</text>
							</view>
						</view>
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u3.png" mode=""></image>
							</view>
							<view class="name">赠送余额</view>
							<view class="balance-value">￥
								<text v-if="userInfo.rewardBalance" class="">{{userInfo.rewardBalance}}</text>
								<text v-else>0</text>
							</view>
						</view>
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u4.png" mode=""></image>
							</view>
							<view class="name">赠送优惠券</view>
							<view class="balance-value">
								<text  v-if="userInfo.coupon" >{{userInfo.coupon}}</text>
								<text v-else>0</text>
							</view>
						</view>
					</view>
					<view class="horizontal-dashed-line"></view>
					<view class="btn">
						<view @click="gotoTransactionRecords()" class="item-btn">
							<text>交易记录</text>>
						</view>
						<view class="dashed-line" ></view>
						<view @click="gotoTransactionOrderRecords()" class="item-btn">
							<text>储值订单</text>>
						</view>
					</view>
				</view>

				<view class="skill-sequence-panel-content-wrapper">
					<!--左边虚化-->
					<!-- <view class="hide-content-box hide-content-box-left"></view> -->
					<!--右边虚化-->
					<!-- <view class="hide-content-box hide-content-box-right"></view> -->
					<scroll-view scroll-x="true" class="kite-classify-scroll">
						<view @click="selectActiveRecharge(item,index)" class="kite-classify-cell shadow" v-for="(item, index) in rechargeList" :key="index">
							<view v-if="currentTab === index" class="h-bg-img">
								<image src="../../static/transaction/u2.png" mode=""></image>
							</view>
							<view v-else class="h-bg-img">
								<image src="../../static/recharge/dianka.png" mode=""></image>
							</view>
							<view class="content">
								<view class="money">
									￥<text class="v">{{item.reachPrice}}</text>
								</view>
								<view class="desc">
									<text>{{item.name}} </text>
									<!-- <text>充￥{{item.reachPrice}}赚送￥{{item.discountsPrice}}</text> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 选择充值金额  -->
				<!-- <view class="recharge-content-wrap">
					<view v-for="(item,index) in rechargeList"
						@click="selectActiveRecharge(item,index)" class="recharge-content">
						<view v-if="currentTab === index" class="h-bg-img">
							<image src="../../static/transaction/u2.png" mode=""></image>
						</view>
						<view v-else class="h-bg-img">
							<image src="../../static/recharge/dianka.png" mode=""></image>
						</view>
						<view class="content">
							<view class="money">
								￥<text class="v">{{item.reachPrice}}</text>
							</view>
							<view class="desc">
								<text>{{item.name}} </text>
								<text>充￥{{item.reachPrice}}赚送￥{{item.discountsPrice}}</text>
							</view>
						</view>
					</view>
				</view> -->



				<!-- 自定义充值金额 -->
				<!-- <view class="h-custom">
					<view class="h-icon">
						<u-icon name="rmb" color="#333" size="22"></u-icon>
					</view>
					<view class="h-money">
						<input v-model="reqOrderParm.rechargeAmount" @click="cancelChooseMoney" placeholder="请输入金额" type="number">
					</view>
				</view> -->

				<!-- 充值按钮 -->
				<view v-if="rechargeList.length > 0" @click="submitOrder()" class="h-submit-btn">
					<text>立即充值</text>
				</view>

				<!-- 用户充值协议 -->
				<view class="recharge-agreement">
					<view  class="radio-group flex-row justify-center">
						<radio @click="toggleSelection" style="transform:scale(0.8)" color="#FFE05C" class="v-text" :checked="isSelected" >
							我已阅读并同意<text @click.stop="gotoTermOfService(8)" class="h-btn">《储值协议》</text>
						</radio>
					</view>
				</view>

				<!-- 使用说明 -->
				<view class="h-desc">
					<view class="title">
						<text>使用说明</text>
					</view>
					<view class="h-content">
						<view class="h-v-text">
							<text>1、 这上面的夜的天空，奇怪而高，我生平。</text>
						</view>
						<view class="h-v-text">
							<text>2、 这上面的夜的天空，奇怪而高，我生平。</text>
						</view>
						<view class="h-v-text">
							<text>3、 这上面的夜的天空，奇怪而高，我生平。</text>
						</view>
						<view class="h-v-text">
							<text>4、 这上面的夜的天空，奇怪而高，我生平。</text>
						</view>
						<view class="h-v-text">
							<text>5、 这上面的夜的天空，奇怪而高，我生平。</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				currentTab: '', // 当前选中的 Tab
				isSelected: true,
				userInfo: {},
				reqOrderParm: {
					auth: true,
					orderType: 3, // 订单类型;1-服务订单 2-产品订单 3-充值订单
					rechargeAmount: null, // 充值金额
					strategyId: null, // 优惠策略的ID  测试id 1694514233806888962
					remark: null
				},
				reqPayParm: {
					auth: true,
					orderNo: null,
					openid: null,
					requstForm: true
				},
				rechargeList: [],
			};
		},
		onLoad() {
		},
		onShow() {
			// 获取充值面额
			this.getRechargeList();
			// 用户信息
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {

			// 获取充值面额
			getRechargeList(){
				console.log('+++++++++666666666666666666+++++++++++++++++++')
				this.$api.getRechargeList(this.reqOrderParm).then((res)=>{
					console.log('++++++++++++++getRechargeList+++++++++++++++++',res)
					this.rechargeList = res.data.data;
				})
			},
			// 提交订单
			submitOrder(){
				const that = this;

				if(!this.isSelected){ // 是否确定协议
					uni.showToast({
						title: '请选择充值协议!'
					});
					return;
				}

				if(this.reqOrderParm.strategyId == null){
					uni.showToast({
						title: '请选择充值项目!'
					});
					return;
				}

				// 提交订单
				this.$api.commonGeneralOrder(this.reqOrderParm).then((res)=>{
					console.log('+++++++++++commonGeneralOrder++++++++++',res)
					that.reqPayParm.orderNo = res.data.data.orderNo;
					// 调用微信支付
					that.wechatPay();
				})
			},
			// 微信支付
			wechatPay(){
				const that = this;
				// 用户信息
				that.reqPayParm.requstForm = true;
				this.$api.wechatPay(that.reqPayParm).then((res)=>{
					var param = res.data.data;
					uni.requestPayment({
						appId: param.appid,
						timeStamp: param.timestamp+"",
						nonceStr: param.noncestr,
						package: "prepay_id="+param.prepayid,
						signType: "RSA",
						paySign: param.sign,
						success: res => {
							uni.showToast({
								title: '支付成功!'
							});
							// 刷新用户信息
							that.getUserInfo()
						},
						fail: res => {
							uni.showModal({
								content: '支付失败',
								showCancel: false
							});
						}
					});
				})
			},

			getUserInfo(){
				this.$api.getUserInfo().then(res=>{
					console.log('++++++++++++获取用户信息++++++++++++++++++',res)
					uni.setStorageSync('userInfo',res.data.data)
					this.userInfo = res.data.data
				})

			},
			// 取消上面选择的面值
			cancelChooseMoney(){
				this.reqOrderParm.strategyId = null;
				this.reqOrderParm.rechargeAmount = null;
				this.currentTab = '';
			},
			// 选择充值金额
			selectActiveRecharge(item,index){
				// 设置充值的金额和策略ID
				this.reqOrderParm.strategyId = item.id;
				this.reqOrderParm.rechargeAmount = item.reachPrice;
				this.currentTab = index;
			},
			toggleSelection() {
				this.isSelected = !this.isSelected;
			},
			// 交易记录
			gotoTransactionRecords(){
				uni.navigateTo({
					url: '/myPages/transactionRecord/index',
					params: {}
				})
			},
			// 充值记录
			gotoTransactionOrderRecords(){
				uni.navigateTo({
					url: '/myPages/rechargeRecord/index',
				})
			},
			// 查看储值协议
			gotoTermOfService(type){
				uni.navigateTo({
					url: '/myPages/TermsOfService/index?name='+'储值协议'+'&type=' + 8,
				})
			},

		},
	};
</script>

<style scoped lang="scss">
	.page{
		background: red;
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		// padding: 10rpx 0 10rpx 10rpx;
		margin-top: 10px;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		// height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		// height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
		position: relative;
		.h-bg-img{
			image{
				height: 80px;
			}
		}
		.content{
			position: absolute;
			bottom: 20%;
			left:12px;
			.money{
				color: #333333;
				.v{
					font-size: 18px;
					font-weight: bold;
				}
			}
			.desc{
				margin-top: 6px;
				font-size: 12px;
				color: #333333;
				line-height: 22px;
			}
		}
		.active{
			display: block;
		}
	}


	// 余额
	.recharge-me{


		position: relative;
		.bg-img{
			height: 160px;
			background: #FFE05C;
		}
		.wallet-content{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 12px;
			.h-balance-wrap{
				background: #FFFCF1 ;
				border-radius: 6px;
				text-align: center;
				padding-left: 20px;
				padding-right: 20px;
				.h-balance{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 118px;
					.recharge-balance{
						font-family: PingFangSC-Regular, PingFang SC;
						.h-nav-img {
							image{
								height: 18px;
								width: 18px;
							}
						}
						.name{
							font-size: 14px;
							font-weight: 400;
							color: #666666;
							line-height: 22px;
						}
						.balance-value{
							font-size: 18px;
							font-weight: bold;
							color: #333333;
							line-height: 26px;
						}
					}
				}
				.btn{
					display: flex;
					font-size: 14px;
					justify-content: space-between;
					height: 60px;
					align-items: center;
					color: #999999;
					.item-btn{
						width: 50%;
					}
				}
			}

		}

	}

	// 充值金额选择
	.recharge-content-wrap{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 12px;
		position: relative;
		.recharge-content{
			width: calc(50% - 6px);
			margin-bottom: 12px;
			position: relative;
			.h-bg-img{
				image{
					height: 80px;
				}
			}
			.content{
				position: absolute;
				bottom: 25%;
				left:12px;
				.money{
					color: #333333;
					.v{
						font-size: 18px;
						font-weight: bold;
					}
				}
				.desc{
					font-size: 12px;
					color: #333333;
					line-height: 22px;
				}
			}
			.choose-status{
				display: none;
				position: absolute;
				left: 0px;
				top: 0px;
				.active{
					width: 0;
					height: 0;
					border-left: 0px solid transparent;
					border-right: 30px solid transparent;
					border-top: 30px solid green;
				}
				image{
					height: 40px;
					width: 40px;
				}
			}
			.active{
				display: block;
			}
		}

	}

	.h-custom{
		background: #FFFCF1;
		display: flex;
		padding: 12px;
		border-radius: 10px;
		margin-top: 8px;
		.h-money{
			margin-left: 6px;
		}
	}

	// 协议
	.recharge-agreement{
		margin-top: 12px;
		margin-bottom: 12px;
		margin-left: 12px;
		text-align: center;
		.radio-group{
			.v-text{
				// color:green;
			}
			.h-btn{
				color:green;
			}
		}

	}

	// 提交按钮
	.h-submit-btn{
		margin-top: 12px;
		width: 343px;
		height: 42px;
		background: #FFE05C;
		border-radius: 27px;
		text-align: center;
		line-height: 42px;
	}

	// 使用说明
	.h-desc{
		font-family: PingFangSC-Regular, PingFang SC;
		.title{
			height: 24px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 24px;
		}
		.h-content{
			height: 40px;
			font-size: 12px;
			font-weight: 400;
			color: #999999;
			line-height: 20px;
		}
	}
</style>