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"
			maxlength="4" />
		<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 {
				ceshi: 'air',
				id_card: '',
				appkey: '3183DC96A6DABA8D', // 商户appkey
				ocode: '1015730314', // 获取用户信息
				app_secret: '05742955578EC5BD29B7BC4CAC5AFACA', // 获取用户信息
				balance: 0.00, // 余额
				amount: '', // 充值金额
				IP: '',
				test: this.$store.state.test
			}
		},
		onLoad(options) {
			// 系统正在维护...
			if (this.test == 'weihuzhong') {
				uni.redirectTo({
					url: '../../pages/index/index'
				})

				return;
			}
			// 测试环境
			if (this.test) {
				this.amount = 0.01
			}
			// 获取身份证号
			this.get_base_info(options)
		},
		methods: {
			/**
			 * 打开页面时提示
			 */
			tip() {
				uni.showModal({
					title: '提示',
					content: '目前只针对墨轩湖校区【公共区域】进行充值，不包含宿舍区域！请知晓！',
					showCancel: false,
					confirmText: '我已知晓',
					confirmColor: '#F00',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
						}
					}
				});
			},
			/**
			 * 获取身份证号
			 */
			get_base_info(options) {
				try {
					if (this.id_card == '' || typeof(this.id_card) == 'undefined') {
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo) {
							this.id_card = userinfo.id_card
						} else {
							uni.navigateTo({
								url: '../../pages/index/index?from=' + options.from
							})

							uni.showToast({
								icon: 'none',
								title: '身份证号为空，请进行授权',
								duration: 3000
							});

							return
						}
					}
				} catch (e) {
					console.log('获取基本信息：' + e.message);
				}

				// 请求服务器，获得余额
				this.getBalance();
				
				this.tip();
			},
			/**
			 * 请求服务器，获得余额
			 */
			async getBalance() {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/usersqueryYu.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						// sfzh: '3602123654'
						sfzh: this.id_card
					}
				})

				// console.log(res.data);
				let data = res.data
				if (data.code === 200) {
					if (typeof data.data != 'undefined' && data.data != '' && JSON.stringify(data.data) != '{}') {
						this.balance = data.data.balance
					} else {
						uni.showToast({
							title: '未查询到余额!',
							icon: 'success'
						});
					}
				} else {
					uni.showToast({
						title: data.data.message
					})
				}
			},
			/**
			 * 选择了充值金额
			 * @param {Object} param
			 */
			Recharge(param) {
				this.amount = param
			},
			/**
			 * 获得code
			 */
			getCode() {
				uni.login({
					success: (res) => {
						// console.log('recharge', res);
						if (res.code) {
							// 发起支付
							this.jsapi(res.code)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获取支付参数，并支付
			 */
			async jsapi(param_code) {
				if (param_code == '' || this.amount == '' || this.id_card == '') {
					uni.showToast({
						icon: 'none',
						title: 'code、充值金额 或 身份证号为空',
						duration: 3000
					});
					return
				}

				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/rechargepay_ns.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						sfzh: this.id_card,
						code: param_code,
						num: this.amount
					}
				})

				// console.log(res);
				if (res.statusCode !== 200) {
					uni.showToast({
						title: '未获得支付参数',
						icon: 'success',
						duration: 3000
					});
				} else {
					if (res.data.code === 205) {
						uni.showToast({
							title: '服务器返回：' + res.data.message,
							icon: 'none',
							duration: 3000
						});

						return
					}
					// 调起微信支付
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (res) => {
							if (res.errMsg == 'requestPayment:ok') {
								let _this = this;
								// 提示用户支付成功
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 2000,
									success() {
										// 请求服务器，获得余额
										_this.getBalance()
									}
								});
							}
						},
						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) {
								// 获取code
								this.getCode()
							} 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) {
							// 获取code
							this.getCode()
						} 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>