waterElectricityMinApp/pagesAir/accountBalance/accountBalance.vue

<template>
	<view class="container">
		<view class="line"></view>
		<view class="top">
			<view class="it">
				<view class="nv">
					<image src="../static/images/ye.png" mode=""></image>
					<view class="title">账户余额</view>
					<view class="bal">¥{{balance.toFixed(2)}}</view>
				</view>
			</view>
			<view class="it">
				<navigator class="nv" url="/pagesAir/rechargeRecord/rechargeRecord">
					<image src="../static/images/jl.png" mode=""></image>
					<view class="title">充值记录</view>
				</navigator>
			</view>
		</view>
		<view class="line"></view>
		<view class="middle-title">
			<image src="../static/images/cz.png" mode=""></image>
			<view class="txt">充值</view>
		</view>
		<view class="line"></view>
		<view class="middle-balance">
			<view class="balance" @tap="Recharge(10)" :class="{balanceborder: amount == 10}">10元</view>
			<view class="balance" @tap="Recharge(20)" :class="{balanceborder: amount == 20}">20元</view>
			<view class=" balance" @tap="Recharge(30)" :class="{balanceborder: amount == 30}">30元</view>
			<view class=" balance" @tap="Recharge(40)" :class="{balanceborder: amount == 40}">40元</view>
			<view class=" balance" @tap="Recharge(50)" :class="{balanceborder: amount == 50}">50元</view>
			<view class=" balance" @tap="Recharge(60)" :class="{balanceborder: amount == 60}">60元</view>
		</view>
		<view class=" line"></view>
		<input class="input-balance" type="text" v-model="amount" @input="onInput" @blur="onBlur" placeholder="请输入充值金额，金额大于10" placeholder-class="pc" />
		<view class="line"></view>
		<view class="btn-pay">
			<button class="btn" url="/pagesAir/rechargeRecord/rechargeRecord" @tap="btn_click">
				<text class="">立即付款</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 18.88, // 余额
				amount: '', // 充值金额
				IP: '',
				ceshi: 'code',
				test: this.$store.state.test
			}
		},
		onLoad() {
			if (this.test) {
				this.amount = 0.01
			}
		},
		methods: {
			/**
			 * 选择了充值金额
			 * @param {Object} param
			 */
			Recharge(param) {
				this.amount = param
			},
			/**
			 * 获取IP
			 */
			async getIP() {
				const res = await this.$myRequest({
					host: 'ip',
					url: '?ie=utf-8',
					method: 'POST'
				})
			
				if (res) {
					// console.log(res);
					const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
					let ip = reg.exec(res.data);
					
					// 获取code
					this.getCode(ip[0])
				}
			},
			/**
			 * 获得code
			 */
			getCode(param_ip) {
				uni.login({
					success: (res) => {
						// console.log('recharge', res);
						if (res.code) {
							// 组合地址，发起支付
							this.jsapi(param_ip, res.code)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获取支付参数，并支付
			 */
			// async jsapi(param_ip, param_code) {
			// 	if (param_code == '' || this.amount == '' || param_ip == '') {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: 'code、充值金额或IP为空'
			// 		});
			// 		return
			// 	}
				
			// 	const res = await this.$myRequest({
			// 		host: this.ceshi,
			// 		url: '/HotWaters/wpPay.action',
			// 		method: 'POST',
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded'
			// 		},
			// 		data: {
			// 			code: param_code,
			// 			num: this.amount,
			// 			ip: param_ip
			// 		}
			// 	})
				
			// 	// console.log(res);
			// 	if (res.data.pay == 'error') {
			// 		uni.showToast({
			// 			title: '未获得支付参数',
			// 			icon: 'success',
			// 			duration: 3000
			// 		});
			// 	} else {
			// 		wx.requestPayment({
			// 			timeStamp: res.data.pay.timeStamp,
			// 			nonceStr: res.data.pay.nonceStr,
			// 			package: 'prepay_id=' + res.data.pay.prepay_id,
			// 			signType: res.data.pay.signType,
			// 			paySign: res.data.pay.paySign,
			// 			success: (res) => {
			// 				if (res.errMsg == 'requestPayment:ok') {
			// 					this.$store.state.payInfo.from = 'reshui_pay'
			// 					this.$store.state.payInfo.resultMsg = '支付成功'
			// 					this.$store.state.reshui_amount = this.amount
			// 					uni.navigateBack({
			// 						delta: 1
			// 					})
			// 				}
			// 			},
			// 			fail: (res) => {
			// 				if (res.errMsg == 'requestPayment:fail cancel') {
			// 					uni.showToast({
			// 						title: '支付已取消',
			// 						icon: 'success',
			// 						duration: 2000
			// 					});
			// 				}
			// 			},
			// 			complete: (res) => {
			// 				// console.log(res);
			// 			}
			// 		});
			// 	}
			// },
			/**
			 * 输入充值金额
			 */
			onInput(e) {
				if (this.test) { // 测试环境
					return
				}
			
				const v = e.detail.value
			
				const zero = /^(0{1,})|[^0-9]/g
				let final = 0
				if (!v) {
					final = 0
				} else {
					final = v.toString().replace(zero, (v) => {
						return 0
					})
			
					if (final.split('')[0] * 1 === 0) {
						final = final.slice(1) - 0 || 0
					}
			
					if (final > 100) {
						final = 100
					}
				}
				this.$nextTick(() => {
					if (final.toString() == '0') {
						this.amount = ''
					} else {
						this.amount = final.toString() || '0'
					}
				})
			},
			/**
			 * 输入框，失去焦点时
			 */
			onBlur() {
				if (this.test) { // 测试环境
					return
				}
				if (this.amount < 10) {
					this.amount = 10
				}
			},
			/**
			 * 立即付款
			 */
			btn_click() {
				// console.log(this.amount);
				if (isNaN(this.amount)) {
					uni.showToast({
						title: '请输入正确金额',
						duration: 2000
					})
					return
				}
				// 测试环境下执行
				if (this.test) { // 测试环境
					uni.showModal({
						title: '提示',
						content: '您选择了充值：￥' + this.amount + ' 元',
						cancelText: '算了',
						confirmText: '充值',
						success: (res) => {
							if (res.confirm) {
								// 获取IP
								this.getIP()
							} else if (res.cancel) {
								return
							}
						}
					})
					return
				}
				// 生产环境
				if (this.amount < 10 || this.amount > 100) {
					uni.showToast({
						icon: 'none',
						title: '最少充值10元，最多充值100元！',
						mask: true,
						duration: 3000
					})
					return
				}
				// 确认
				uni.showModal({
					title: '提示',
					content: '您选择了充值：￥' + this.amount + ' 元',
					cancelText: '算了',
					confirmText: '充值',
					success: (res) => {
						if (res.confirm) {
							// 获取IP
							this.getIP()
						} else if (res.cancel) {
							return
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-family: "Microsoft YaHei-3970(82674968)";
		width: 730rpx;
		padding: 10rpx;

		.line {
			height: 20rpx;
		}

		.top {
			display: flex;
			justify-content: space-around;
			height: 220rpx;
			border-radius: 10rpx;
			padding-top: 30rpx;
			background-color: #EFF2F9;

			.it {
				display: flex;
				flex-direction: column;
				align-items: center;

				.nv {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 18rpx;
					border-radius: 10rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 14rpx;
				}

				.title {
					font-size: 36upx;
				}

				.bal {
					font-size: 26upx;
					color: #666666;
				}
			}
		}

		.middle-title {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			.txt {
				font-size: 32upx;
			}
		}

		.middle-balance {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			height: 280rpx;

			.balance {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				font-family: Microsoft YaHei-3970(82674968);
				font-weight: bold;
				color: #333333;
				padding: 36rpx 0;
				width: 220rpx;
				background-color: #EFF2F9;
				border-radius: 6rpx;
			}

			.balanceborder {
				border: 1px solid #3869FC;
				width: 218rpx;
				padding: 34rpx 0;
			}
		}

		.input-balance {
			font-size: 40upx;
			height: 80rpx;
			background-color: #F2F2F2;
			border-radius: 6rpx;
			margin: 0 10rpx;
			padding: 10rpx 20rpx;
		}

		.pc {
			color: #B3B3B3;
		}

		.btn-pay {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 30rpx;
				width: 280rpx;
				height: 100rpx;
				background: #3869FC;
				border-radius: 6px;

				font-size: 36upx;
				font-family: Microsoft YaHei-3970(82674968);
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>