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 class="menu_item">
					<text></text>
				</view>
				<view class="menu_item">
					<text></text>
				</view>
			</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%;
			background-color: #eee;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-wrap: wrap;
				width: 750rpx;
				box-sizing: border-box;

				.menu_item {
					display: flex;
					flex-direction: column;
					flex: 1 0 30%;
					text-align: center;
					padding: 30rpx 0 39rpx;
					font-family: Microsoft YaHei-3970(82674968);
					color: #333333;
					background-color: #fff;
					margin: 1rpx;

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

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

		.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>