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: 80.1, //剩余电量
				add_class: '', //增加class属性
				add_class1: '',
				inputMoney: '', //手动输入增加金额
				addMoney: 0, //选择充值金额
				userinfo: {}, //用户信息
				order_id: '', // 订单号
				card_number: '', //用户卡号
				dom: '', //房间号
				campus: '', //校区
				access_token: '',
				sub_appid: '', //商户号
				pay_info: '',
				test: getApp().globalData.test
			}
		},
		onLoad: function(options) {
			let item_tmp = decodeURIComponent(options.item)
			//将字符串解密转换成对象
			let item = JSON.parse(item_tmp);
			// console.log(options.o, item)
			// 如果是选择宿舍号返回
			if (options.o == 'select') {
				this.roomSelect = item.roomSelect;
				this.add_class = 1;
				this.dom = item.dom;
			}
			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.userinfo = item;
					// 更新存储的用户信息
					uni.setStorageSync('userinfo_storage_key', this.userinfo)
					this.roomSelect = this.campus + this.dom
				} else if (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

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

		methods: {
			/**
			 * 获取应用有效凭证
			 */
			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
					})
				}
			},

			//跳转到选择页面
			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 = get_order_id('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
				}
			}
		},
	}

	function get_order_id(head) {
		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()
		let len_mill = millisecond.toString().length
	
		month = month > 9 ? month : '0' + month
		day = day > 9 ? day : '0' + day
		second = second > 9 ? second : '0' + second
		if (len_mill == 1) {
			millisecond = (Math.floor(Math.random () * 9000) + 10000).toString() + millisecond
		} else if (len_mill == 2) {
			millisecond = (Math.floor(Math.random () * 900) + 1000).toString() + millisecond
		} else if (len_mill == 3) {
			millisecond = (Math.floor(Math.random () * 900) + 100).toString() + millisecond
		}
	
		return `${head}${year}${month}${day}${hour}${minute}${second}${millisecond}`
	}
</script>

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