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="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 class="add-money-button">
					<button class="select-submit" :data-item="300" @tap="add_money">300元</button>
				</view>
			</view>
		</view>
		<view class="show-item">
			<input class="input-money" placeholder="请输入金额(1-1000)" v-model:value="inputMoney"
				placeholder-class="#B3B3B3" @input="onInput" />
		</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: 80.1, //剩余电量
				add_class: '', //增加class属性
				add_class1: '',
				inputMoney: '', //手动输入增加金额
				addMoney: 0, //选择充值金额
				// add_class_money: '',  
				userinfo: {}, //用户信息
				card_number: 0, //用户卡号
				dom: '', //房间号
				campus: '', //校区
				access_token: '',
				sub_appid: '', //商户号
				order_id: '', //订单号
				pay_info: '',
				item: {},
				// storage: {},
			}
		},

		onPullDownRefresh: function() {
			uni.navigateTo({
				url: '../jiaofei/jiaofei',
			});
			// console.log('触发了下拉刷新')
		},

		onLoad: function(options) {
			// console.log('item:' + options.item);
			// console.log(options.item.card_number)
			try {
				// 获取存储的用户数据
				const value = uni.getStorageSync('userinfo_storage_key');
				//将字符串解密转换成对象
				let item = JSON.parse(decodeURIComponent(options.item));
				// console.log(item)
				if (JSON.stringify(item) === '{}') { // 如果没有用户信息，返回首页
					uni.redirectTo({
						url: '../index/index'
					});
					return;
				}

				//判断item是否存在
				if (JSON.stringify(item) != '') {
					//判断是哪个页面传入
					if (typeof(item.roomSelect) != 'undefined') {
						// this.item = item;
						this.roomSelect = item.roomSelect;
						this.add_class = 1;
						this.dom = item.dom;
						console.log(this.roomSelect)
					} else {
						// 处理JSON字符串
						// this.userinfo = options.item.replace(/"/g, "'");
						this.userinfo = item;
						// 更新存储的用户信息
						uni.setStorageSync('userinfo_storage_key', this.userinfo)
						// console.log(this.userinfo)
						this.card_number = this.userinfo.card_number
						this.campus = this.userinfo.campus
						this.dom = this.userinfo.dorm_number
						this.roomSelect = this.campus + this.dom
						this.add_class = 1;
						this.order_id = get_order_id();
						this.sub_appid = this.userinfo.sub_appid;
					}
				} else if (value != '') {
					// 处理JSON字符串
					// this.userinfo = value.replace(/"/g, "'");
					this.userinfo = value;
				}
				// console.log(this.dom)
				// console.log(this.campus)
			} catch (e) {
				console.log(e)
			}
			
			//将缓存中的卡号进行获取
			this.card_number = this.userinfo.card_number

			// 查询用户信息
			this.get_valid_credentials()

			// console.log('房间号' + this.dom)

			//将缓存中的token码进行获取
			// this.access_token = uni.getStorageSync('userinfo_storage_key').access_token
		},

		methods: {
			//修改房间号
			// changeSelect1(e) {
			// 	console.log(e);
			// this.index = e.detail.value;
			// this.arr1 = this.array1;
			// },

			/**
			 * 获取应用有效凭证
			 */
			async get_valid_credentials() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/cgi-bin/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'app_key': this.userinfo.appkey,
						'app_secret': this.userinfo.app_secret,
						'grant_type': 'client_credentials',
						'scope': 'base',
						'ocode': this.userinfo.ocode
					}
				});

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

			//跳转到显示页面
			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
				uni.showModal({
					// title: '确定充值'+this.inputMoney+'元',
					title: '确定充值' + this.addMoney + '元',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							// console.log(this.addMoney);
							this.pay_money_start()
							// console.log(this.access_token)
							// console.log('卡号' + this.card_number)
							// console.log(this.sub_appid)
							// console.log(this.order_id)
							// console.log(this.addMoney)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				// this.pay_money_start()
			},

			//增加可变金额
			input_money(e) {

				// console.log(e)
				//判断输入是否为空或不是数字
				if (this.inputMoney == '' || this.inputMoney == null) {
					uni.showToast({
						title: '请输入',
						duration: 2000
					});
				} else if (isNaN(this.inputMoney)) {
					uni.showToast({
						title: '输入错误',
						duration: 2000
					});
				} else if (this.inputMoney > 1000 || this.inputMoney < 0) {
					uni.showToast({
						title: '超出范围',
						duration: 2000
					});
				} else {
					this.addMoney = this.inputMoney
					uni.showModal({
						// title: '确定充值'+this.inputMoney+'元',
						title: '确定充值' + this.addMoney + '元',
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								// console.log(this.addMoney)
								this.pay_money_start()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				}

			},

			//准备支付
			async pay_money_start() {
				const res = await this.$myRequest({
					// ip: 'https://open.wecard.qq.com',
					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,
						"amount": this.addMoney * 100,
					}
				});
				console.log(this.access_token)
				console.log(this.sub_appid)
				console.log(this.card_number)
				console.log(this.order_id)
				console.log(this.addMoney)
				console.log(res.data)
				if (res.data.code == 0) {
					this.pay_info = res.data.data.pay_info
					// 发起支付
					this.add_money_pay()
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 3000
					})
				}
			},

			//调起支付
			add_money_pay() {
				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) {
				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 > 1000) {
						final = 1000
					}
				}
				this.$nextTick(() => {
					this.inputMoney = final.toString() || '0'
				})
			}
		},
	}

	function get_order_id() {
		const date = new Date()

		let year = date.getFullYear()
		let month = date.getMonth() + 1
		let day = date.getDate()
		let hour = date.getHours()
		let minute = date.getMinutes()
		let second = date.getSeconds()
		let millisecond = date.getMilliseconds()

		month = month > 9 ? month : '0' + month
		day = day > 9 ? day : '0' + day
		second = second > 9 ? second : '0' + second
		// 小于4位数，前补0
		millisecond = millisecond.length < 3 ? '0' + millisecond : millisecond

		return `${year}${month}${day}${hour}${minute}${second}${millisecond}`
	}
</script>

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