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 v-if="showLogin">
			<login :ocode="ocode" :appkey="appkey" scope="snsapi_userinfo" :visible="visible" @success="callback()"
				@cancel="callback()" @fail="callback()" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ceshi: 'code',
				huanjing: '部署环境' ,// 部署环境是key，用来获取环境
				visible: false,
				showLogin: true,
				appkey: '5AA49F3E4CACA380',
				sub_appid: '1015730314_1941301045',
				appid: 'wx2fc3f45732fae5d3', // 获取用户信息
				ocode: '1015730314', // 获取用户信息
				app_secret: '58D34C81D82B35179ED896C4362B0FC0', // 获取用户信息
				my_display: false,
				userinfo: {},
				wxcode: '',
				access_token: ''
			}
		},
		onLoad() {
			// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
			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.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)
				}
			},
			
			/**
			 * 授权回调
			 */
			callback: function({
				detail
			}) {
				// console.log(detail)
				// {wxcode: "7f7Qi9rN8zQ1nifQiysTZ3WIeIWlgcGk"}
				if (detail === undefined) {
					this.userinfo = {};
					uni.showToast({
						icon: 'success',
						title: '需要先授权'
					});
				} else {
					const {
						wxcode = ""
					} = detail
					
					if (wxcode.length == 0) {
						uni.showToast({
							title: '未获得wxcode',
							duration: 500
						})
					} else {
						// 获取wxcode
						this.wxcode = wxcode
			
						// 通过wxcode换取access_token
						this.get_access_token()
					}
				}
			},
			/**
			 * 通过wxcode换取access_token
			 */
			async get_access_token() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'wxcode': this.wxcode,
						'app_key': this.appkey,
						'app_secret': this.app_secret,
						'grant_type': 'authorization_code',
						'redirect_uri': 'mnp://wx2fc3f45732fae5d3'
					}
				})
			
				if (res.data.refresh_token == '' || typeof(res.data.refresh_token) == 'undefined') {
					uni.showToast({
						title: '未获得token'
					});
				} else {
					this.access_token = res.data.access_token;
			
					// 通过access_token换取用户信息
					this.get_user_info();
				}
			},
			/**
			 * 通过access_token换取用户信息
			 */
			async get_user_info() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth/get-user-info',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						"access_token": this.access_token
					}
				});
			
				if (res.data.errcode == 0 && res.data.errmsg == 'OK') {
					try {
						this.userinfo = res.data
						this.$store.state.userinfo = this.userinfo
						// 存储用户信息
						uni.setStorageSync('userinfo_storage_key', this.userinfo)
						// 提示授权成功
						uni.showToast({
							icon: 'success',
							title: '授权成功',
							duration: 800,
							success: (res) => {
								this.my_display = true
							}
						})
					} catch (e) {
						console.log(e)
					}
				} else {
					uni.showToast({
						title: '未获得用户信息，请领取校园卡并激活',
						duration: 3000
					});
				}
			},
			/**
			 * 检查数据库中是否有该用户信息
			 */
			async chk_user_is_in_db() {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						"access_token": this.access_token
					}
				});
				
				if (res) {
					console.log(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;
				}
			}
		}

	}
</style>