jje_uniapp/myPages/recharge/index.vue

<template>
	<view class="page ">

		<!-- 钱包 -->
		<view class="recharge-me " >

			<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/me/ud4.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" :class="{kiteBackImg:currentTab === index}" v-for="(item, index) in rechargeList" :key="index">
								<view class="money">
									<text class="v">{{item.reachPrice}}</text>
								</view>

								<view class="desc">
									<text>{{item.name}} </text>
								</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>
					<rich-text v-html="aboutContent">
					</rich-text>
				</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 {
				aboutContent:'',
				show: false,
				currentTab: '', // 当前选中的 Tab
				isSelected: false,
				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(option) {
			this.AboutByType()
		},
		onShow() {
			// 获取充值面额
			this.getRechargeList();
			// 用户信息
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			AboutByType(type) {
				this.$api.AboutByType({type:9}).then(res => {
					this.aboutContent = res.data.data.aboutContent
					console.log(res,'333333333333')
				})
			},

			// 获取充值面额
			getRechargeList(){
				this.$api.getRechargeList().then((res)=>{
					this.rechargeList = res.data.data;
				})
			},
			// 提交订单
			submitOrder(){

				if (!this.userInfo.phone){
					uni.showModal({
						title:'温馨提示',
						content:'充值涉及资金安全，需绑定手机号才能进行充值，是否确认绑定手机号',
						success:res=>{
							if (res.confirm){
								uni.navigateTo({
									url: '/myPages/setting/setting-telphone',
								})
							}
						}
					})
					return
				}

        const that = this;
				if(!this.isSelected){ // 是否确定协议
					uni.showToast({
            			icon: 'none',
						title: '请同意充值协议!'
					});
					return;
				}

				if(!this.reqOrderParm.rechargeAmount){
					uni.showToast({
            icon: 'none',
						title: '请输入或选择充值金额!'
					});
					return;
				}

        if(!this.reqOrderParm.strategyId){
          if(this.reqOrderParm.rechargeAmount <1 ||this.reqOrderParm.rechargeAmount>100){
            console.log(1111111111)
            uni.showToast({
              icon: 'none',
              title: '任意充金额须在1-100之间'
            });
            return;
          }
          uni.showModal({
            title: '警告！',
            content: '您选择任意充不会获得任何优惠，是否确认充值？？',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
               that.handleCommon()
              } else if (res.cancel) {
                console.log('用户点击取消');
                return;
              }
            }
          });
        }else {
          this.handleCommon()
        }
			},
//提交充值订单
      handleCommon(){
        const that = this;
        let promotionParam = uni.getStorageSync('promotionParam')
        Object.assign(this.reqOrderParm,promotionParam)
        // 提交订单
        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">
	@import '/common/css/common.css';


	/*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 {
		background-image: url("/static/recharge/dianka.png");
		background-repeat: no-repeat;
		background-size: cover;
		display: inline-block;
		width: 328rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;

			.money{
				margin: 34rpx 0 0 40rpx;
				color: #333333;
				.v{
					font-size: 18px;
					font-weight: bold;
				}
			}
			.desc{
				margin-top: 15rpx;
				margin-left: 40rpx;
				font-size: 12px;
				color: #333333;
				line-height: 22px;
			}

	}

	.kiteBackImg{
		background-image: url("/static/transaction/u2.png");
		background-repeat: no-repeat;
		background-size: cover;
	}


	// 余额
	.recharge-me{

		.wallet-content{
			background-image: linear-gradient(#FFE05C 0, #FFE05C 160px, #F7F7F7 0, #F7F7F7);
			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;

			.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:red;
			}
		}

	}

	// 提交按钮
	.h-submit-btn{
		margin-top: 24rpx;
		height: 84rpx;
		background: #FFE05C;
		border-radius: 54rpx;
		text-align: center;
		line-height: 84rpx;
	}

	// 使用说明
	.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;
		}
	}
	.bg-img{
		height: 160px;
		background: #FFE05C;
	}
</style>