waterElectricityMinApp/pages/index/index.vue

<template>
	<view class="container">
		<view class="banner">
			<image src="../../static/images/banner2x.png" mode=""></image>
		</view>
		<view class="nav">
			<view class="menu">
				<navigator :url="'/pages/reshui/reshui'" open-type="navigate" class="menu_item">
					<image src="../../static/images/shower2x.png" mode=""></image>
					<text>洗 浴</text>
				</navigator>
				<navigator :url="'/pagesElectric/jiaofei/jiaofei?o=index'" open-type="navigate" class="menu_item">
					<image src="../../static/images/recharge2x.png" mode=""></image>
					<text>水电充值</text>
				</navigator>
				<navigator :url="'/pagesAir/shareAir/shareAir'" open-type="navigate" class="menu_item">
					<image src="../../static/images/air.png" mode=""></image>
					<text>共享空调</text>
				</navigator>
				<navigator :url="'/pagesBus/bus/bus'" open-type="navigate" class="menu_item">
					<image src="../../static/images/bus.png" mode=""></image>
					<text>校车预约</text>
				</navigator>
				<!-- <navigator :url="'/pagesClockIn/index/index'" open-type="navigate" class="menu_item">
					<image src="../../static/images/clockIn.png" mode=""></image>
					<text>校园打卡</text>
				</navigator> -->
				<!-- <navigator :url="'/pagesClockIn/money/money'" open-type="navigate" class="menu_item">
					<image src="../../static/images/money.png" mode=""></image>
					<text>学费缴纳</text>
				</navigator> -->
			</view>
		</view>
		<view class="qr_code" v-if="showQR_code">
			<image :src="qr_code_url" mode="aspectFit"></image>
		</view>
		<view v-if="showLogin">
			<login :ocode="ocode" :appkey="appkey" scope="snsapi_userinfo" :visible="visible"
				@success="login_success_callback()" @cancel="login_cancel_callback()" @fail="login_fail_callback()" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ceshi: 'code',
				huanjing: '部署环境', // 部署环境是key，用来获取环境
				visible: false, // 是否授权可见
				showLogin: true, // 是否启动授权
				appkey: '3183DC96A6DABA8D', // 商户appkey
				appid: 'wxd6f090391d410534', // 获取用户信息
				ocode: '1015730314', // 获取用户信息
				app_secret: '05742955578EC5BD29B7BC4CAC5AFACA', // 获取用户信息
				userinfo: '', // 用户信息
				showQR_code: false, // 显示校园卡二维码
				validation_failed: false, // 验证失败
				validation_times: 0, // 授权次数
				from: 0, // 跳转参数
				execed_onload: false,
				qr_code_url: this.$code_base_url + '/HotWaters/image/1.jpg'
			}
		},
		onLoad(options) {
			// console.log(options)
			// 测试环境
			if (typeof(options.from) != 'undefined') {
				this.from = options.from
			}
			// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
			this.isTestEnvironment()
			// 检查是否存在用户信息
			this.has_user_info()

			this.execed_onload = true
		},
		onShow() {
			if (!this.execed_onload) {
				// 检查是否存在用户信息
				this.has_user_info()
			}
		},
		methods: {
			/**
			 * 控制环境，test为true测试环境，false则是正式环境
			 */
			async isTestEnvironment() {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/conEnvi.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						name: this.huanjing
					}
				})

				// console.log(res);
				if (res.data.mess == '返回成功') {
					// value为0 测试环境, 为1 部署环境；amount限制启动金额
					this.$store.state.amount = res.data.data[0].amount
					if (res.data.data[0].value == 0) {
						// 测试模式
						this.$store.state.test = true
					} else if (res.data.data[0].value == 2) {
						// 系统正在维护...
						this.$store.state.test = 'weihuzhong'

						uni.showModal({
							title: '提示信息',
							content: '系统维护中...\r\n暂时请不要使用！\r\n避免造成不必要的损失！',
							showCancel: false
						});
					} else {
						// 正式模式
						this.$store.state.test = false
					}
				} else {
					uni.showToast({
						title: res.data.mess,
						icon: 'success'
					});
				}
			},
			/**
			 * 是否有用户信息
			 */
			has_user_info() {
				try {
					// console.log(111111);
					const value = uni.getStorageSync('userinfo_storage_key');
					// console.log(value);
					if (value == '') {
						this.showLogin = true
						this.visible = true
					} else {
						this.showLogin = false
						this.userinfo = value
						this.$store.state.userInfo = this.userinfo
					}
				} catch (e) {
					// console.log(e)
					uni.showToast({
						title: '异常：' + e,
						duration: 3000
					})
				}
			},
			/**
			 * 授权登陆取消回调
			 */
			login_cancel_callback() {
				this.reauthorization()
			},
			/**
			 * 重新授权
			 */
			reauthorization() {
				this.validation_times = this.validation_times + 1

				if (this.validation_times >= 2) {
					this.login_fail_callback()
				} else {
					try {
						uni.removeStorageSync('userinfo_storage_key');
						setTimeout(() => {
							this.showLogin = false
							this.userinfo = {}
						}, 30)

						setTimeout(() => {
							this.showLogin = true
							this.visible = true
						}, 30)
					} catch (e) {
						console.log(e)
					}
				}
			},
			/**
			 * 授权登陆取消回调
			 */
			login_fail_callback() {
				this.userinfo = {};
				// setTimeout(() => {
				// 	this.validation_failed = true
				// }, 3000);
				if (!this.validation_failed) {
					this.validation_failed = false
					uni.showModal({
						title: '提示',
						content: '授权：请先领取校园卡、并激活！',
						// cancelText: '取消',
						confirmText: '领取',
						success: (res1) => {
							if (res1.confirm) {
								uni.navigateTo({
									url: '../qr_code/qr_code'
								});
								// 出现二维码，用户扫描二维码添加校园卡、激活
								// uni.downloadFile({
								// 	url: 'https://chtech.ncjti.edu.cn/shuidian/HotWaters/image/1.jpg',
								// 	success: (res2) => {
								// 		// console.log(res2);
								// 		if (res2.statusCode == 200) {
								// 			uni.saveImageToPhotosAlbum({
								// 				filePath: res2
								// 					.tempFilePath,
								// 				success: function() {
								// 					uni.showToast({
								// 						title: "保存成功！请用微信扫码添加校园卡！",
								// 						icon: "none"
								// 					});
								// 				},
								// 				fail: function() {
								// 					uni.showToast({
								// 						title: "保存失败，请手动截图保存，再用微信扫二维码！",
								// 						icon: "none"
								// 					});
								// 				}
								// 			});
								// 		}
								// 	}
								// })
							} else if (res1.cancel) {
								// console.log('用户点击取消');
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '10秒后自动隐藏二维码，可重新授权调起！',
								// 	duration: 1000,
								// 	success: (com) => {
								// 		this.showQR_code = true
								// 		setTimeout(() => {
								// 			this.showQR_code = false
								// 		}, 10000)
								// 	}
								// });
							}
						}
					});
				}
			},
			/**
			 * 授权登陆成功回调
			 */
			login_success_callback: function({
				detail
			}) {
				const {
					wxcode = ""
				} = detail

				this.validation_failed = false

				// 屏蔽用户操作
				uni.showLoading({
					title: '获取数据中…',
					mask: true
				})

				setTimeout(() => {
					uni.hideLoading()
				}, 1000)

				// 通过wxcode换取access_token
				this.get_access_token(wxcode)
			},
			/**
			 * 通过wxcode换取access_token
			 */
			async get_access_token(param_wxcode) {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'wxcode': param_wxcode,
						'app_key': this.appkey,
						'app_secret': this.app_secret,
						'grant_type': 'authorization_code',
						'redirect_uri': 'mnp://' + this.appid
					}
				})

				if (res.data.refresh_token == '' || typeof(res.data.refresh_token) == 'undefined') {
					uni.showToast({
						title: '未获得token'
					});
				} else {
					// 通过access_token换取用户信息
					this.get_user_info(res.data.access_token);
				}
			},
			/**
			 * 通过access_token换取用户信息
			 */
			async get_user_info(param_access_token) {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth/get-user-info',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						"access_token": param_access_token
					}
				});

				// console.log(res);
				if (res.data.errcode == 0 && res.data.errmsg == 'OK') {
					try {
						this.userinfo = res.data
						this.$store.state.userInfo = this.userinfo

						// 获取code，然后去检查是否存在数据库中
						this.getCode()
					} catch (e) {
						console.log(e)
					}
				} else {
					uni.showToast({
						title: '未获得用户信息，请领取校园卡并激活',
						duration: 3000
					});
				}
			},
			/**
			 * 获得code
			 */
			getCode() {
				uni.login({
					success: (res) => {
						// console.log('reshui', res);
						if (res.code) {
							// 检查用户是否存在第三方库
							this.chk_user_is_in_db(res.code)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 检查数据库中是否有该用户信息
			 */
			async chk_user_is_in_db(param_code) {
				const res = await this.$myRequest({
					// host: 'local',
					host: this.ceshi,
					url: '/HotWaters/wpopenid.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						"userinfo": JSON.stringify(this.userinfo),
						"code": param_code
					}
				});

				// console.log(res);
				if (res.data.code == 0 || res.data.code == 100) {
					// 存储用户信息
					uni.setStorageSync('userinfo_storage_key', this.userinfo)
					// 提示授权成功
					uni.showToast({
						icon: 'success',
						title: '授权成功',
						duration: 800,
						success: (res) => {
							if (this.from != 0 || this.from != '0') {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '授权失败：' + res.data.msg,
						success: (res) => {}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		font-family: Microsoft YaHei-3970(82674968);
		color: #333333;

		.banner {
			width: 100%;
			height: 360rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			position: relative;
			width: 100%;

			.menu,
			.reset {
				margin: 25rpx auto;
				width: 640rpx;
			}

			.menu_item {
				display: inline-flex;
				flex-direction: column;
				text-align: center;
				width: 25%;
				padding: 30rpx 0 39rpx;
				border-radius: 20rpx;
				font-family: Microsoft YaHei-3970(82674968);
				color: #333333;

				image {
					width: 90rpx;
					height: 90rpx;
					margin: 0 auto;
				}

				text {
					height: 29rpx;
					line-height: 54rpx;
					font-size: 30rpx;
					color: #333333;
				}
			}

			.reset {
				position: fixed;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				right: 55rpx;
				bottom: 55rpx;
				font-family: Microsoft YaHei-3970(82674968);
				color: #333333;

				.icon-zhongzhi {
					margin: 0 auto;
					padding-top: 20rpx;
					color: $my-color-primary;
					width: 90rpx;
					height: 70rpx;
					font-size: 80rpx;
				}
			}
		}

		.qr_code {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-color: #FFFFFF;
		}
	}
</style>