179crm_user_app/pages_user/recharge/index.vue

<template>
	<view class="top-cont">
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar title="充值" titleStyle="font-weight: 500;" @rightClick="rightClick" :autoBack="true" leftIcon="arrow-left"
			:bg-color="bgColor">
		</u-navbar>
		<view class="top-bg">
			<image class="bg" src="https://user.test.ylrztop.com/images/cz_bg.png" mode="widthFix"></image>
			<view class="balance">
				<view class="align-center justify-between">
					<view class="text">我的账户余额</view>
					<view v-if="eTime!==null" class="right">距离结束还剩：{{eTime}}</view>
				</view>
				<view class="num">{{user.money||0}}</view>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="recharge">
					<view v-for="(item,index) in dataList" :key="index" @click="choosePackage(item)"
						:class="aIndex==item.id?'item active':'item'">
						<view class="align-center">
							<view class="title">储值￥{{item.rechargeAmount}}</view>
							<view v-if="item.tag!==''" class="align-center">
								<image class="w40 h40 hot" src="../../static/images/user/hot_list_icon20.png" mode="">
								</image>
								<view class="hot-box">
									<view class="count">{{item.tag}}</view>
								</view>
							</view>
						</view>
						<view class="align-center justify-between">
							<view class="text">{{item.shortDesc}}</view>
							<view class="align-center" @click.stop="showDetail(item)">
								<view class="detail">权益详情</view>
								<image class="w48 h48" src="../../static/images/user/my_right_arrow_right_icon24.png"
									mode=""></image>
							</view>

						</view>
					</view>
				</view>
				<!-- <view class="pay">
					<view class="title">
						<text class="name">付款给 壹柒玖康养集团</text>
						<text class="desc">微信收款</text>
					</view>
					<view class="pay-money">
					 	<view class="pay-money-title">支付金额</view>
					 	<view class="money">
					 		<text class="fh">¥</text>
					 		<input v-model="money"  class="uni-input"  @input="testMoney" type="digit" focus   />
					 	</view>
						<textarea class="desc" placeholder="请填写备注说明" maxlength="20" v-model="desc" />
					</view>
				</view> -->

				<view class="btn-box">
					<view class="align-center mb20">
						<checkbox :checked="isAgreement" @click.stop="handleAgreement()" />
						<view class="text">我已阅读并同意</view>
						<view class="text color">《会员储值协议》</view>
					</view>
					<view class="btn" @click="toPay()">立即储存</view>
				</view>
			</view>
			<!-- <view class="ad">
			<ad unit-id="adunit-a018415a6deb69e8"></ad>
		</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getPayment,
		toPayment,
		getTemplates
	} from '@/api/payment'
	import {
		getUserInfo
	} from '@/api/user'
	export default {
		data() {
			return {
				dataList: [
					// {id:1,price:66,text:'限时赠送6元现金券',count:'赠10元'},
					// {id:2,price:100,text:'限时赠送10元现金券',count:'赠10元'},
					// {id:3,price:200,text:'限时赠送20元现金券'},
				],
				user: null,
				eTime: null,
				aIndex: 0,
				isAgreement: false,
				statusBarHeight: '',
				top: 0,
				companyUserId: null,
				companyId: null,
				desc: "",
				money: null,
				wxPay: true,
				templateId: 0
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad: function(options) {
			let currentTime = new Date();
			this.getUserInfo();
			this.getList()
			//   if (options.hasOwnProperty('q') && options.q) {
			//   	// 通过下面这步解码，可以拿到url的值
			//   	const url = decodeURIComponent(options.q)
			//   	this.url=url;
			//   	// // 对url中携带的参数提取处理
			//   	const obj = this.utils.urlToObj(url)
			// console.log(obj)
			//   	this.companyId=obj.companyId;
			// this.companyUserId=obj.companyUserId;
			//   }
			this.companyId = options.companyId;
			this.companyUserId = options.companyUserId;
		},
		onShareAppMessage(res) {
			return {
				title: '云联融智-收款',
				path: `/pages_user/user/pay?companyId=` + this.companyId + "&companyUserId=" + this.companyUserId
			}
		},
		methods: {
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			},
			choosePackage(item) {
				this.aIndex = item.id
				this.templateId = item.id
				// let time=this.utils.parseTime(item.endTime)
				this.eTime = this.utils.setTime(item.endTime)
			},
			getUserInfo() {
				getUserInfo().then(
					res => {
						if (res.code == 200) {
							if (res.user != null) {
								this.user = res.user;
							} else {
								this.utils.loginOut();
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			testMoney(e) {
				let that = this;
				let price = e.detail.value
				if (price.indexOf(".") == 0) {
					//'首位小数点情况'
					price = price.replace(/[^$#$]/g, "0.");
					price = price.replace(/\.{2,}/g, ".");
				}
				price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				//重新赋值给input
				this.$nextTick(() => {
					this.money = price;
				});

			},
			getList() {
				getTemplates().then(
					res => {
						if (res.code == 200) {
							this.dataList = res.data
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			showDetail(item) {
				if (item) {
					uni.navigateTo({
						url: '/pages_user/recharge/detail?id=' + item.id
					})
				}
			},
			pay() {
				if (this.money == null) {
					uni.showToast({
						icon: 'none',
						title: "请输入支付金额"
					});
					return;
				}
				uni.login({
					success: res => {
						console.log(res)
						this.payment(res.code);
					}
				});
			},
			//充值余额
			toPay() {
				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: "请先同意协议后再储存",
					});
					return false;
				}
				if (this.templateId == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择储值套餐"
					});
					return;
				}
				var data = {
					userId: this.user.userId,
					templateId: this.templateId
				}
				var that = this;
				uni.showLoading();
				toPayment(data).then(
					res => {
						if (res.code == 200) {
							console.log(res);
							var payData = JSON.parse(res.data.pay_info)
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payData.timeStamp,
								nonceStr: payData.nonceStr,
								package: payData.package,
								signType: payData.signType,
								paySign: payData.paySign,
								success: function(res) {
									uni.hideLoading();
									uni.showToast({
										icon: 'success',
										title: "支付成功",
									});
									uni.navigateBack({
										delta: 1
									})
									// uni.navigateTo({
									// 	url: '/pages/user/index'
									// })
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.hideLoading();
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			payment(code) {
				var data = {
					payMoney: this.money,
					remark: this.desc,
					code: code,
					companyId: this.companyId,
					companyUserId: this.companyUserId
				};
				var that = this;
				uni.showLoading();
				payment(data).then(
					res => {
						if (res.code == 200) {
							console.log(res);
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.result.timeStamp,
								nonceStr: res.result.nonceStr,
								// package: res.result.packageValue,
								package: res.result.packageStr,
								signType: res.result.signType,
								paySign: res.result.paySign,
								success: function(res) {
									uni.hideLoading();
									uni.showToast({
										icon: 'success',
										title: "支付成功",
									});
									uni.navigateTo({
										url: './success'
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.hideLoading();
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F5F7FA;
	}

	.top-bg {
		position: relative;

		.bg {
			width: 100%;
			position: relative;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.balance {
			width: calc(100% - 40rpx);
			// height: 206rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			border: 4rpx solid #FFFFFF;
			padding: 30rpx;
			margin: 0 20rpx;
			position: absolute;
			bottom: 0;
			box-sizing: border-box;
			// margin-top: -214rpx;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222426;
				text-align: left;
			}

			.right {
				padding: 0 24rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: left;
				background: linear-gradient(90deg, #E73823 0%, #FD7620 100%);
				border-radius: 28rpx 0rpx 0rpx 28rpx;
				margin-right: -30rpx;
			}

			.num {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 64rpx;
				color: #222426;

			}
		}
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;

		// padding-top: calc(var(--status-bar-height) + 40rpx) !important;
		// margin: 20upx 0upx;
		// padding:20upx;
		.top {
			flex: 1;
			padding: 20rpx;

			.recharge {
				.item {
					padding: 30rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #EFF3F7;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&.active {
						border: 2rpx solid #F3CDA7;
						background: #FFF6EA;

						.title {
							color: #AF6020;
						}

						.text {
							color: #AF6020;
						}
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 48rpx;
						color: #222426;
						line-height: 64rpx;
						text-align: left;
						margin-right: 20rpx;
					}

					.hot {
						margin-right: -20rpx;
						z-index: 9;
					}

					.hot-box {
						width: 124rpx;
						height: 32rpx;
						line-height: 32rpx;
						background: linear-gradient(90deg, #E73823 0%, #FD7620 100%);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						transform: skew(-10deg);
						padding-left: 30rpx;
						box-sizing: border-box;

						.count {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FEF5EA;
							transform: skew(10deg);
						}
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #898E91;
						line-height: 48rpx;
						text-align: left;
					}

					.detail {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #AF6020;
						text-align: right;
					}
				}
			}

			.inner {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.pay {
					width: 100%;
					box-shadow: 1px 1px 5px #e6e6e6;
					background: #FFFFFF;
					border-radius: 5upx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.title {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						width: 100%;
						background-color: #f7f7f7;
						padding: 30rpx 0rpx;

						.name {
							padding: 15rpx 30rpx;
							font-size: 32rpx;
						}

						.desc {
							color: #989898;
							padding: 15rpx 30rpx;
							font-size: 25rpx;
						}
					}

					.pay-money {
						padding: 30rpx 0rpx;
						width: 100%;
						background: #FFFFFF;
						border-radius: 5upx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.pay-money-title {
							padding: 15rpx 30rpx;
							font-size: 32rpx;
						}

						.money {
							font-size: 42rpx;
							padding: 15rpx 30rpx;
							display: flex;
							flex-direction: row;
							align-items: flex-start;

							input {
								margin-left: 15rpx;
							}
						}

						.desc {
							width: 100%;
							padding: 30rpx 30rpx;
							border-top: 1rpx solid #e6e6e6;
						}

						textarea {
							height: 50rpx;
							line-height: 50rpx;
						}
					}
				}


			}

			.btn-box {
				padding: 30rpx;
				// height: 121upx;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				background: #FFFFFF;
				position: fixed;
				z-index: 999;
				width: 100%;
				bottom: 0;
				left: 0;
				text-align: center;
				box-sizing: border-box;

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #626468;
					line-height: 56rpx;

					&.color {
						color: #209DD8;
					}
				}

				.btn {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					background: #008FD3;
					border-radius: 44upx;
				}
			}
		}

		.ad {
			margin: 0rpx 0rpx 60rpx;
		}
	}
</style>