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" v-show="my_display">
				<navigator :url="'/pages/reshui/reshui'" open-type="redirect" class="menu_item">
					<image src="../../static/images/shower2x.png" mode=""></image>
					<text>洗 浴</text>
				</navigator>
				<navigator :url="'/pages/jiaofei/jiaofei?o=index'" open-type="redirect" class="menu_item">
					<image src="../../static/images/recharge2x.png" mode=""></image>
					<text>电费充值</text>
				</navigator>
			</view>
			<view class="reset">
				<navigator url="" open-type="redirect" @click="reauthorization()" class="menu_item">
					<text class="iconfont icon-zhongzhi"></text>
					<text>重新授权</text>
				</navigator>
			</view>
		</view>
		<view class="qr_code" v-if="showQR_code">
			<image src="https://jtishfw.ncjti.edu.cn/jxch-smartmp/HotWaters/image/1.jpg" 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: '5AA49F3E4CACA380',
				appid: 'wx2fc3f45732fae5d3', // 获取用户信息
				ocode: '1015730314', // 获取用户信息
				app_secret: '58D34C81D82B35179ED896C4362B0FC0', // 获取用户信息
				my_display: false,
				userinfo: '',
				showQR_code: false,
				from: 0
			}
		},
		onLoad(options) {
			// console.log(options)
			if (typeof(options.from) != 'undefined') {
				this.from = options.from
			}
			// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
			this.isTestEnvironment()

			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 == '返回成功') {
					// 0 测试环境, 1 部署环境
					if (res.data.data[0].value == 0) {
						this.$store.state.test = true
					} else {
						this.$store.state.test = false
					}
				} else {
					uni.showToast({
						title: res.data.mess,
						icon: 'success'
					});
				}
			},
			/**
			 * 是否有用户信息
			 */
			has_user_info() {
				try {
					this.userinfo = this.$store.state.userInfo
					const value = uni.getStorageSync('userinfo_storage_key');
					if (value == '') {
						if (typeof(this.userinfo) == 'undefined' || JSON.stringify(this.userinfo) == '{}') {
							this.showLogin = true
							this.visible = true
						} else {
							this.showLogin = false
							this.my_display = true
						}
					} else {
						this.showLogin = false
						this.userinfo = value
						this.$store.state.userInfo = this.userinfo
						this.my_display = true
					}
				} catch (e) {
					// console.log(e)
					uni.showToast({
						title: '异常：' + e,
						duration: 3000
					})
				}
			},
			/**
			 * 重新授权
			 */
			reauthorization() {
				try {
					uni.removeStorageSync('userinfo_storage_key');
					setTimeout(() => {
						this.showLogin = false
						this.userinfo = {}
						this.my_display = false
					}, 30)

					setTimeout(() => {
						this.showLogin = true
						this.visible = true
					}, 30)
				} catch (e) {
					console.log(e)
				}
			},
			/**
			 * 授权登陆q取消回调
			 */
			login_cancel_callback() {
				this.userinfo = {};
				uni.showToast({
					icon: 'none',
					title: '请先授权，点击右下角【重新授权】按钮'
				});
			},
			/**
			 * 授权登陆q取消回调
			 */
			login_fail_callback() {
				this.userinfo = {};
				uni.showToast({
					icon: 'none',
					title: '授权失败，请先领取校园卡、再激活！',
					duration: 3000,
					success: (res) => {
						uni.showModal({
							title: '提示',
							content: '是否将校园卡二维码，保存到相册？',
							cancelText: '手动截图',
							confirmText: '自动保存',
							success: (res1) => {
								if (res1.confirm) {
									// 出现二维码，用户扫描二维码添加校园卡、激活
									uni.downloadFile({
										url: 'https://jtishfw.ncjti.edu.cn/jxch-smartmp/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('用户点击取消');
									this.showQR_code = true;
								}
							}
						});
					}
				});
			},
			/**
			 * 授权登陆成功回调
			 */
			login_success_callback: function({
				detail
			}) {
				const {
					wxcode = ""
				} = detail

				// 通过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
					}
				});

				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) => {
							this.my_display = true

							if (this.from != 0 || this.from != '0') {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: 'success',
						title: '授权失败：' + res.data.mess,
						success: (res) => {
							this.my_display = false
						}
					})
				}
			}
		}
	}
</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>