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="'/pagesRepairs/index/index'" open-type="navigate" class="menu_item">
					<image src="../../static/images/money.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 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>
		<Popup :showPopup="showPopup" @close="showPopup = false">
			<view class="pupup-content">
				<text class="pupup-title">请截屏，再识别二维码领取校园卡</text>
				<image src="../../static/images/qr.jpg" mode="aspectFill" class="pupup-img"></image>
			</view>
		</Popup>
	</view>
</template>

<script>
import Popup from '@/components/Popup.vue'
export default {
	components: {
		Popup
	},
	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,
			showPopup: false
		}
	},
	onLoad(options) {
		// console.log(options)
		// 测试环境
		if (typeof options.from != 'undefined') {
			this.from = options.from
		}
		// 检查是否存在用户信息
		this.has_user_info()
		// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
		this.isTestEnvironment()

		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() {
			var _this = this
			_this.userinfo = {}
			if (!_this.validation_failed) {
				_this.validation_failed = false
				uni.showModal({
					title: '提示',
					content: '授权：请先领取校园卡、并激活！',
					// cancelText: '取消',
					confirmText: '领取',
					success: (res1) => {
						if (res1.confirm) {
							// 截屏，用户利用微信识别二维码添加校园卡、激活
							_this.showPopup = true
						} 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
			})

			// 通过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.hideLoading()
				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 = res.data

					// 获取code，然后去检查是否存在数据库中
					this.getCode()
				} catch (e) {
					uni.hideLoading()
					console.log(e)
				}
			} else {
				uni.hideLoading()
				uni.showToast({
					title: '未获得用户信息，请领取校园卡并激活',
					duration: 3000
				})
			}
		},
		/**
		 * 获得code
		 */
		getCode() {
			var _this = this
			uni.login({
				success: (res) => {
					// console.log('reshui', res);
					if (res.code) {
						// 检查用户是否存在第三方库
						_this.chk_user_is_in_db(res.code)
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.errMsg,
							icon: 'none'
						})
					}
				},
				fail() {
					uni.hideLoading()
				}
			})
		},
		/**
		 * 检查数据库中是否有该用户信息
		 */
		async chk_user_is_in_db(param_code) {
			var _this = this
			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.hideLoading()
				// 提示授权成功
				uni.showToast({
					icon: 'success',
					title: '授权成功',
					duration: 800,
					success: (res) => {
						if (_this.from != 0 || _this.from != '0') {
							// 页面跳转回去
							uni.setStorageSync('navigateBack', 1)

							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			} else {
				uni.hideLoading()
				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;
			}
		}
	}

	.pupup-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;

		.pupup-title {
			padding-bottom: 20rpx;
		}

		.pupup-img {
			height: 90%;
		}
	}
}
</style>