waterElectricityMinApp/pages/jiaofei/jiaofei.vue

<template>
	<view class="content">
		<view class="select-item" @tap="navigateToSelect">
			<view class="picker-item-logol">
				<image class="picker-item-logo-left" src="/static/image/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/image/right.png"></image>
			</view>
		</view>
		<view class="show-item">
			<view class="picker-item-logol">
				<image class="picker-item-logo-left" src="/static/image/elec.png"></image>
			</view>
			<view class="picker-item-label">剩余电量</view>
			<view class="picker-item-content font-txt">{{remainElec}} 度</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/image/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="{'bg-color':add_class1==1}">10元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="20" @tap="add_money">20元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="30" @tap="add_money">30元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="50" @tap="add_money">50元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="100" @tap="add_money">100元</button>
				</view>
				<view class="add-money-button">
					<button class="select-submit" :data-item="200" @tap="add_money">200元</button>
				</view>
			</view>
		</view>
		<view class="show-item">
			<input class="input-money" maxlength="4" placeholder="请输入金额(1-200)" v-model:value="inputMoney"
				placeholder-class="#B3B3B3" @input="onInput" @blur="onBlur" />
		</view>
		<view class="submit-item">
			<button class="submit" :data-rooms='room' @tap="input_money">充值</button>
		</view>
		<view class="change-show" @tap="navigateToShow">
			台账管理
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				roomSelect: '', //房间号
				remainElec: 0.00.toFixed(2), //剩余电量
				add_class: '', //增加class属性
				add_class1: '',
				inputMoney: '', //手动输入增加金额
				addMoney: 0, //选择充值金额
				userinfo: {}, //用户信息
				order_id: '', // 订单号
				card_number: '', //用户卡号
				dom: '', //房间号
				campus: '', //校区
				access_token: '',
				sub_appid: '', //商户号
				pay_info: '',
				xiaofei_items: '', // 消费记录
				test: getApp().globalData.test
			}
		},
		onLoad: function(options) {
			let item_tmp = decodeURIComponent(options.item)
			//将字符串解密转换成对象
			let item = JSON.parse(item_tmp);

			// 请求选定的月份消费记录
			// this.request_consumption_records()
			try {
				// 获取存储的用户数据
				const value = uni.getStorageSync('userinfo_storage_key')
				// console.log(item)
				if (item_tmp == '{}') { // 如果没有用户信息，返回首页
					uni.redirectTo({
						url: '../index/index'
					})
					return
				}
				// 如果是选择宿舍号返回
				if (options.o == 'index') {
					this.$store.state.building.roomSelect = '';
					this.$store.state.building.add_class = 0;
					this.$store.state.building.dom = '';

					this.userinfo = item;
					// 更新存储的用户信息
					uni.setStorageSync('userinfo_storage_key', this.userinfo)
					this.roomSelect = this.campus + this.dom
				} else if (JSON.stringify(value) !== '{}') {
					this.userinfo = value;
				}
				this.campus = this.userinfo.campus
				this.dom = this.userinfo.dorm_number
				this.sub_appid = this.userinfo.sub_appid

				this.add_class = 1
			} catch (e) {
				console.log(e)
			}

			//将缓存中的卡号进行获取
			this.card_number = this.userinfo.card_number

			if (this.$store.state.hasUserInfo == false) {
				// 获取应用有效凭证
				this.get_valid_credentials()
			}
		},
		onShow() {
			if (this.$store.state.building.roomSelect != '') {
				// 如果是选择宿舍号返回
				this.roomSelect = this.$store.state.building.roomSelect;
				this.add_class = this.$store.state.building.add_class;
				this.dom = this.$store.state.building.dom;

				if (this.roomSelect != '') {
					this.getDianLiang()
				}
			}
		},
		methods: {
			/**
			 * 取得电费额度
			 */
			async getDianLiang() {
				let res;
				if (this.test) { // 测试环境
					res = await this.$myRequest({
						host: 'ceshi',
						url: 'http://tdqdjt.natappfree.cc/HotWaters/buildoverElec.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'roomSelect': this.roomSelect
						}
					})
				} else {
					res = await this.$myRequest({
						host: 'code',
						url: '/HotWater/buildoverElec.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'roomSelect': this.roomSelect
						}
					})
				}
				console.log(res.data.amount);
				if (res.mess != '请选择房间号！') {
					setTimeout(() => {
						this.remainElec = res.data.amount.toFixed(2)
					}, 300);
				} else {
					uni.showToast({
						title: '获取电量失败！',
						duration: 2000
					})
				}
			},
			/**
			 * 获取应用有效凭证
			 */
			async get_valid_credentials() {
				const value = uni.getStorageSync('userinfo_storage_key')
				// console.log(value)
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/cgi-bin/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'app_key': value.appkey,
						'app_secret': value.app_secret,
						'grant_type': 'client_credentials',
						'scope': 'base',
						'ocode': value.ocode
					}
				});

				if (typeof(res.data.access_token) != 'undefined') {
					// 获取到应用有效凭证，保存到页面变量中
					this.access_token = res.data.access_token
				} else {
					uni.showToast({
						title: '获取凭证失败',
						duration: 2000
					})
				}

				// 查询用户信息
				this.select_user_info()
			},

			/**
			 * 查询用户信息
			 */
			async select_user_info() {
				const res = await this.$myRequest({
					host: 'code',
					url: '/HotWater/userget_stu.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						card_number: this.userinfo.card_number
					}
				});

				// console.log(res, 'select_user_info');
				if (res.data.info) {
					let cnumber = this.userinfo.card_number

					if (cnumber == null || cnumber == undefined || cnumber == '') {
						// 之前未绑定用户信息，现在去绑定用户信息
						this.send_save_user_info()
					}
				} else {
					uni.showToast({
						icon: 'success',
						title: '获取用户信息失败'
					})
				}
			},

			/**
			 * 请求选定的月份消费记录
			 */
			async request_consumption_records() {
				const userinfo = uni.getStorageInfoSync('userinfo_storage_key')
				this.card_number = userinfo.card_number

				if (this.card_number != '') {
					this.xiaofei_items = []
					const res = await this.$myRequest({
						host: 'code',
						url: '/HotWater/wxpayqueryConsume.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							card_number: this.card_number,
							begin_time: this.date
						}
					});

					// console.log(res.data.mess, 'request_consumption_records');
					if (typeof(res.data.mess) != 'undefined') {
						let items = res.data.mess
						// 按时间倒序排列
						// items.sort((a, b) => {
						// 	return a.begin_time < b.begin_time ? 1 : -1;
						// })
						for (var i = 0; i < items.length; i++) {
							// 过滤掉为0的记录，只显示消费大于0的记录
							// if (items[i].use_amount > 0.00) {
							this.xiaofei_items.push(items[i])
							// }
						}
					} else {
						uni.showToast({
							icon: 'success',
							title: '该月无消费记录'
						})
					}
				} else {
					uni.showToast({
						icon: 'success',
						title: '用户卡号为空'
					})
				}
			},

			/**
			 * 绑定用户信息
			 */
			async send_save_user_info() {
				const res = await this.$myRequest({
					host: 'code',
					url: '/HotWater/userstu_info.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						user: JSON.stringify(this.userinfo)
					}
				});

				// console.log('send_save_user_info：', res)
				let error = res.data.erro;
				if (error == '未获取到数据！') {
					uni.showToast({
						title: '绑定用户失败',
						duration: 2000
					})
				} else {
					uni.showToast({
						icon: 'success',
						title: '绑定用户成功',
						duration: 2000
					})
				}
			},

			//跳转到选择页面
			navigateToSelect() {
				uni.navigateTo({
					url: '../select/select?roomSelect=' + this.roomSelect,
				});
			},

			//跳转到台账页面
			navigateToShow(e) {
				uni.navigateTo({
					url: '../show/show?card_number=' + this.card_number,
				});
			},

			//增加固定金额
			add_money(e) {
				this.add_class1 = 0
				this.addMoney = e.currentTarget.dataset.item

				this.confirm_room('add_money')
			},

			confirm_room(op) {
				// 检查房间号
				if (this.roomSelect == '') {
					uni.showToast({
						title: '请选择房间号',
						icon: 'success'
					})
					return
				}
				// 输入金额进行充值
				if (op == 'input_money') {
					//判断输入是否为空或不是数字
					if (this.inputMoney == '' || this.inputMoney == null) {
						uni.showToast({
							title: '请输入充值金额',
							duration: 2000
						})
						return
					}

					if (isNaN(this.inputMoney)) {
						uni.showToast({
							title: '请输入数值',
							duration: 2000
						})
						return
					}

					if (!this.test) { // 非测试环境
						if (this.inputMoney > 200 || this.inputMoney < 10) {
							uni.showToast({
								title: '限额10～200元',
								duration: 2000
							})
							return
						}
					}

					this.addMoney = this.inputMoney
				}
				// 确认充值对话框
				this.confirm_dialog()
			},
			// 确认充值对话框
			confirm_dialog() {
				uni.showModal({
					// title: '确定充值'+this.inputMoney+'元',
					title: '确定充值' + this.addMoney + '元',
					success: (res) => {
						if (res.confirm) {
							this.jsapi()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//增加可变金额
			input_money(e) {
				// console.log(e)
				this.confirm_room('input_money')
			},

			//准备支付
			async jsapi() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: "/cgi-bin/pay/app/mppay",
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'access_token': this.access_token,
						'sub_appid': this.sub_appid,
						'user_id': this.card_number,
						"order_id": this.order_id = this.$getOrderId('dianfei'),
						"amount": this.addMoney * 100,
						'order_type': 1,
						'callback_url': ''
					}
				})

				if (res.data.code == 0) {
					this.pay_info = res.data.data.pay_info
					// 发起支付
					this.pay_amount()
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 3000
					})
				}
			},

			// 调起支付
			pay_amount() {
				var OpenMidas = require("@/static/openMidas.js"); // 引入小程序目录下的SDK文件

				// 设置支付配置
				wx['OpenMidasConfig'] = {
					apiCommonConf: {
						version: "weixiao"
					},
					cgiDomain: {
						test: "midas.weixiao.qq.com/api", // 私有化参数联系微卡客服进行获取
					},
					webDomain: "https://midas.weixiao.qq.com/h5", // 私有化参数联系微卡客服进行获取
					sandboxWebDomain: "https://midas.weixiao.qq.com/h5" // 私有化参数联系微卡客服进行获取
				}

				var payInfo = this.pay_info; // 请求mppay接口返回的数据
				// console.log(payInfo)
				var appMetaData = "app=test&version=1.1"; // 自定义回调数据

				OpenMidas.init("test");
				OpenMidas.pay(
					payInfo,
					function(resultCode, innerCode, resultMsg, appMetaData) {
						console.log(resultCode); // 支付响应状态码
						console.log(innerCode); // 支付响应内部错误码
						console.log(resultMsg); // 支付响应说明
						console.log(appMetaData); // 自定义回调数据

						// todo：处理业务逻辑
					},
					appMetaData
				);
			},
			/**
			 * 输入充值金额
			 */
			onInput(e) {
				if (this.test) { // 测试环境
					return
				}

				const v = e.detail.value
				this.inputMoney = 10

				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(() => {
					this.inputMoney = final.toString() || '0'
				})
			},
			/**
			 * 失去焦点时
			 */
			onBlur() {
				if (this.test) { // 测试环境
					return
				}

				if (this.inputMoney < 10) {
					this.inputMoney = 10
				}
			}
		},
	}
</script>

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