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.0).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) {
			wx.navigateTo({
				url: '../../pages/index/index?from=' + options.from
			})
			return
		}
		// 系统正在维护...
		if (this.test == 'weihuzhong') {
			wx.redirectTo({
				url: '../../pages/index/index'
			})
			return
		}
		// 测试环境
		if (this.test) {
			this.amount = 0.01
		}
		// 获取基本信息
		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() {
			var _this = this
			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 (typeof res.data.data == 'undefined' || 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
			}

			if (this.roomSelect == '' || typeof this.roomSelect == 'undefined') {
				uni.showToast({
					title: '请再次选择宿舍',
					icon: 'success'
				})
			} else {
				uni.navigateTo({
					url: '../dfxq/dfxq?rooSelect=' + this.roomSelect + '&card_number=' + this.stu_number,
					success: function (res) {}
				})
			}
		},
		/**
		 * 水费详情页面
		 */
		sfxq_click() {
			if (this.haveSelectRoom()) {
				return
			}

			if (this.roomSelect == '' || typeof this.roomSelect == 'undefined') {
				uni.showToast({
					title: '请再次选择宿舍',
					icon: 'success'
				})
			} else {
				uni.navigateTo({
					url: '../sfxq/sfxq?rooSelect=' + this.roomSelect + '&card_number=' + this.stu_number,
					success: function (res) {}
				})
			}
		},
		/**
		 * 跳转到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)
			var _this = this
			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)
			var _this = this
			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 == '' || typeof this.roomSelect == 'undefined' || !this.roomSelect) {
					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() {
			var _this = this
			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.0).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
			}

			uni.setStorageSync('roomSelect', this.roomSelect)
			uni.setStorageSync('stu_number', this.stu_number)

			return false
		},

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

			if (this.roomSelect == '' || typeof this.roomSelect == 'undefined') {
				uni.showToast({
					title: '请再次选择宿舍号',
					icon: 'success'
				})
			} else {
				uni.navigateTo({
					url: '../show/show?rooSelect=' + this.roomSelect + '&card_number=' + this.stu_number,
					success: function (res) {}
				})
			}
		},

		/**
		 * 增加固定金额
		 */
		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() {
			var _this = this
			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
			}
			var _this = this
			// console.log(_this.roomSelect);
			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.data.code == 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: res.data.message,
					icon: 'none',
					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>