waterElectricityMinApp/pagesElectric/jiaofei/jiaofei.vue

<template>
	<view class="container">
		<view class="select-item" @tap="navigateToSelect">
			<view class="picker-item-logol">
				<image class="picker-item-logo-left" src="../static/images/room.png"></image>
			</view>
			<view class="picker-item-label">已选房间</view>
			<view class="picker-item-content" :class="{'font-txt':add_class==1}">{{roomSelect}}</view>
			<view class="picker-item-logor">
				<image class="picker-item-logo-right" src="../static/images/right.png"></image>
			</view>
		</view>
		<view class="show-item">
			<view class="picker-item-logol">
				<image class="picker-item-logo-left" src="../static/images/elec.png"></image>
			</view>
			<view class="picker-item-label">账户金额</view>
			<view class="picker-item-content font-txt">¥ {{remainElec}}</view>
		</view>
		<view class="show-item details">
			<view class="xiangqing" @tap="dfxq_click">
				<image class="xiangqing-icon" src="../static/images/dfxq.png"></image>
				<view>电费详情</view>
			</view>
			<view class="xiangqing" @tap="sfxq_click">
				<image class="xiangqing-icon" src="../static/images/sfxq.png"></image>
				<view>水费详情</view>
			</view>
		</view>
		<view class="show-item add-money">
			<view class="add-money-show">
				<view class="picker-item-logol money-logo">
					<image class="picker-item-logo-left" src="../static/images/money.png"></image>
				</view>
				<view class="picker-item-label money-show">请选择充值金额</view>
			</view>
			<view class="add-money-list">
				<view class="add-money-button">
					<button class="select-submit" :data-item="10" @tap="add_money"
						:class="{selStyle:amount == 10}">10元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="20" @tap="add_money"
						:class="{selStyle:amount == 20}">20元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="30" @tap="add_money"
						:class="{selStyle:amount == 30}">30元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="50" @tap="add_money"
						:class="{selStyle:amount == 50}">50元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="100" @tap="add_money"
						:class="{selStyle:amount == 100}">100元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="200" @tap="add_money"
						:class="{selStyle:amount == 200}">200元</button>
				</view>
			</view>
		</view>
		<view class="show-item jine">
			<input type="number" class="input-money" maxlength="4" placeholder="请输入金额(10-200)"
				placeholder-class="input-ph-color" v-model:value="amount" @input="onInput" @blur="onBlur" />
		</view>
		<view class="submit-item" v-if="true">
			<button class="submit" :data-rooms='room' @tap="input_money">充值</button>
		</view>
		<view class="change-show" @tap="navigateToShow">
			台账管理
		</view>
		<view v-if="img_url !== ''" class="ad">
			<image :src="img_url" mode="aspectFill" class="ad_img" @tap="ad_redirect" @error="loadImgError"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomSelect: '', //校区宿舍号
				remainElec: 0.00.toFixed(2), //剩余电量
				add_class: '', //增加class属性
				amount: '',
				sub_appid: '', //商户号
				xiaofei_items: '', // 消费记录
				dorm_number: '', //栋宿舍号
				stu_number: '',
				compus: '', //校区
				ceshi: 'code',
				test: this.$store.state.test,
				img_url: ''
			}
		},
		onLoad(options) {
			// console.log(options);
			// if (typeof(options.from) != 'undefined' && options.from == 2) {
			// 	uni.navigateTo({
			// 		url: '../../pages/index/index?from=' + options.from
			// 	})
			// 	return
			// }
			// 获取基本信息
			this.get_base_info(options, 'onLoad');
			this.get_img();
		},
		onShow() {
			// 获取基本信息
			// this.get_base_info('options', 'onShow')
			// 获取电量
			if (this.$store.state.building.roomSelect != '') {
				// 如果是选择宿舍号返回
				this.roomSelect = this.$store.state.building.roomSelect;
				this.add_class = this.$store.state.building.add_class;
				this.dorm_number = this.$store.state.building.dorm_number;

				this.add_class = 1
				if (this.roomSelect && typeof(this.roomSelect) != 'undefined') {
					this.getDianLiang()
				}

				// 初始化参数
				this.$store.state.building.add_class = 0;

				// 获取code
				this.getCode('options', 'onShow')
			}
		},
		methods: {
			/**
			 * 获取广告缩略图出错
			 */
			loadImgError(e) {
				// console.log(e);
				this.img_url = ''
			},
			/**
			 * 获取广告缩略图
			 */
			async get_img() {
				let res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/advertquery_h.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'url_name': '水电广告'
					}
				})

				// console.log(res.data)
				if (res.data.data.length == 0) {
					return
				}

				if (res.data.code == 200) {
					let tf = false;
					let tmpData = res.data.data;
					for (var i = 0; i < tmpData.length; i++) {
						if (tmpData[i].state == 1 && tmpData[i].remark.indexOf('缩略图') != -1) {
							this.img_url = tmpData[i].url;
							tf = true;
						}
					}

					if (tf == false) {
						uni.showToast({
							icon: 'none',
							title: '没有启用的缩略图',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: '加载数据异常',
						duration: 1500
					})

					return
				}
			},
			/**
			 * 电费详情页面
			 */
			dfxq_click() {
				if (this.haveSelectRoom()) {
					return
				}
				
				let _this = this;
				
				uni.navigateTo({
					url: '../dfxq/dfxq',
					success: function(res) {
						res.eventChannel.emit('params', {
							data: {
								roomSelect: _this.roomSelect,
								card_number: _this.stu_number
							}
						})
					}
				})
			},
			/**
			 * 水费详情页面
			 */
			sfxq_click() {
				if (this.haveSelectRoom()) {
					return
				}

				let _this = this;

				uni.navigateTo({
					url: '../sfxq/sfxq',
					success: function(res) {
						res.eventChannel.emit('params', {
							data: {
								roomSelect: _this.roomSelect,
								card_number: _this.stu_number
							}
						})
					}
				})
			},
			/**
			 * 跳转到ad页面
			 */
			ad_redirect() {
				uni.navigateTo({
					url: 'ad_dianfei'
				})
			},
			/**
			 * 获取基本信息
			 */
			get_base_info(options, param) {
				try {
					if (this.stu_number == '' || typeof(this.stu_number) == 'undefined') {
						// 获取学号
						this.stu_number = this.$store.state.userInfo.card_number
					}

					if (this.stu_number == '' || typeof(this.stu_number) == 'undefined') {
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo) {
							this.stu_number = userinfo.card_number
						} else {
							uni.navigateTo({
								url: '../../pages/index/index?from=' + options.from
							})

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

							return
						}
					}
				} catch (e) {
					console.log(e);
				}

				// 初始化参数
				this.$store.state.building.add_class = 0;

				// 获取code
				this.getCode(options, param)
			},
			/**
			 * 获取code
			 */
			getCode(options, param) {
				// console.log(options, param)
				uni.login({
					success: (res) => {
						if (res.code) {
							if (param == 'comfirm') {
								// 组合地址，发起支付
								this.jsapi(res.code)
							} else {
								// 请求服务器，获得openid
								this.getOpenId(options, res.code)
							}
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});

							// 跳转到首页
							uni.redirectTo({
								url: '../../pages/index/index?from=0'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获得openid
			 */
			async getOpenId(options, param_code) {
				// console.log(options, param_code)
				if (param_code != '') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/wpget_stu.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							code: param_code
						}
					})

					// console.log('获得openid', res);
					if (res.data.mess == '返回成功') {
						if (!(this.$store.state.building.roomSelect && typeof(this.$store.state.building.roomSelect) !=
								'undefined')) {
							// 栋宿舍号
							this.dorm_number = res.data.info[0].build + res.data.info[0].dom
							// 校区
							this.compus = res.data.info[0].campus
							// 填充校区宿舍号
							if (typeof(this.dorm_number.split('栋')[1]) == 'undefined') {
								this.roomSelect = this.compus + ''
							} else {
								this.roomSelect = this.compus + this.dorm_number.split('栋')[1]
							}
							// 存储选择
							this.$store.state.building.roomSelect = this.roomSelect
							// 样式
							this.add_class = 1
						}

						// 请求选定的月份消费记录
						this.getDianLiang()
					} else if (res.data.mess == '未查询到用户信息') {
						// 数据库中 未查询到用户信息，就清除本地存储
						uni.removeStorageSync('userinfo_storage_key');

						uni.showToast({
							title: '获取用户信息失败！'
						})

						// 跳转到首页
						if (options && typeof(options.from) != 'undefined' && typeof(options.from) != '') {
							uni.navigateTo({
								url: '../../pages/index/index?from=' + options.from
							})
						} else {
							uni.redirectTo({
								url: '../../pages/index/index/index?from=0'
							});
						}
					}

					if (!this.roomSelect || this.roomSelect == '' || typeof(this.roomSelect) == 'undefined') {
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo && typeof(userinfo) != 'undefined' && typeof(userinfo.campus) != 'undefined' &&
							typeof(userinfo.dorm_number) != 'undefined' && userinfo.campus != '' && userinfo
							.dorm_number != '') {
							this.roomSelect = userinfo.campus + userinfo.dorm_number
						} else {
							this.roomSelect = '请选择宿舍号'
						}
					}
				} else {
					uni.showToast({
						title: 'code为空！',
						icon: 'success'
					});
				}
			},
			/**
			 * 取得电费额度
			 */
			async getDianLiang() {
				if (this.roomSelect != '' && typeof(this.roomSelect) != 'undefined') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/buildoverElec.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'roomSelect': this.roomSelect
						}
					})

					// console.log('取得电费额度', res);
					if (res.data.mess == '0') {
						setTimeout(() => {
							this.remainElec = res.data.amount.toFixed(2)
						}, 30);
					} else {
						this.remainElec = 0.00.toFixed(2)
					}
				} else {
					uni.showToast({
						title: '请先选择宿舍号，\n再查询详情 或 充值',
						icon: 'none',
						duration: 3000
					});
				}
			},

			//跳转到选择页面
			navigateToSelect() {
				uni.navigateTo({
					url: '../select/select',
				});
			},
			// 是否选择了宿舍号
			haveSelectRoom() {
				if (this.roomSelect == '请选择宿舍号') {
					uni.showToast({
						title: '请选择宿舍号',
						icon: 'success'
					})
					return true
				}

				return false
			},

			//跳转到台账页面
			navigateToShow(e) {
				if (this.haveSelectRoom()) {
					return
				}

				uni.navigateTo({
					url: '../show/show',
				});
			},

			/**
			 * 增加固定金额
			 */
			add_money(e) {
				this.amount = e.currentTarget.dataset.item
			},
			/**
			 * 确认宿舍号
			 */
			confirm_room(op) {
				// 检查房间号
				if (this.roomSelect == '' || this.roomSelect == '请选择宿舍号') {
					uni.showToast({
						title: '请选择宿舍号',
						icon: 'success'
					})
					return
				}
				// 输入金额进行充值
				if (op == 'input_money') {
					//判断输入是否为空或不是数字
					if (this.amount == '' || this.amount == null || this.amount == 0) {
						uni.showToast({
							title: '请输入充值金额',
							duration: 2000
						})
						return
					}

					if (isNaN(this.amount)) {
						uni.showToast({
							title: '请输入正确金额',
							duration: 2000
						})
						return
					}

					if (!this.test) { // 非测试环境
						if (this.amount > 200 || this.amount < 10) {
							uni.showToast({
								title: '限额10～200元',
								duration: 2000
							})
							return
						}
					}
				}
				// 确认充值对话框
				this.confirm_dialog()
			},
			/**
			 * 确认充值对话框
			 */
			confirm_dialog() {
				uni.showModal({
					// title: '确定充值'+this.amount+'元',
					title: '确定充值' + this.amount + '元',
					success: (res) => {
						if (res.confirm) {
							// 获取code
							this.getCode('options', 'comfirm')
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			//增加可变金额
			input_money(e) {
				// console.log(this.test);
				// console.log(e)
				this.confirm_room('input_money')
			},
			/**
			 * 请求服务器，获取支付参数，并支付
			 */
			async jsapi(param_code) {
				if (param_code == '' || this.amount == '' || this.roomSelect == '') {
					uni.showToast({
						title: 'code、充值金额、宿舍号或IP为空'
					});
					return
				}
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/elpay_ns.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: param_code,
						num: this.amount,
						stu_number: this.stu_number,
						roomSelect: this.roomSelect
					}
				})

				// console.log(res);
				if (res.statusCode == 200 && res.data.sub_openid && res.data.sub_openid != '') {
					wx.requestPayment({
						appId: res.data.appId,
						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') {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								});
							}
						},
						fail: (res) => {
							if (res.errMsg == 'requestPayment:fail cancel') {
								uni.showToast({
									title: '取消支付',
									icon: 'success',
									duration: 2000
								});
							}
						},
						complete: (res) => {
							// console.log(res);
						}
					});
				} else {
					uni.showToast({
						title: '未获得支付参数',
						icon: 'success',
						duration: 3000
					});
				}
			},
			/**
			 * 输入充值金额
			 */
			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 > 200) {
						final = 200
					}
				}
				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
				}
			}
		},
	}
</script>

<style>
	@import url("jiaofei.css");
</style>