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?item=' + encodeURIComponent(JSON.stringify(this.userinfo))"
					open-type="redirect" class="menu_item">
					<image src="../../static/images/shower2x.png" mode=""></image>
					<text>洗 浴</text>
				</navigator>
				<navigator
					:url="'/pages/jiaofei/jiaofei?o=index&item=' + encodeURIComponent(JSON.stringify(this.userinfo))"
					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 {
				visible: false,
				showLogin: true,
				appkey: '5AA49F3E4CACA380',
				sub_appid: '1015730314_1941301045',
				appid: 'wxd6f090391d410534', // 获取用户信息
				ocode: '1015730314', // 获取用户信息
				app_secret: '58D34C81D82B35179ED896C4362B0FC0', // 获取用户信息
				wxcode: '',
				access_token: '',
				access_token_for_amount: '', // 获取到应用有效凭证
				my_display: false,
				userinfo: {},
				amount: 0.00
			}
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('userinfo_storage_key');
				if (value == '') {
					if (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
				}

				// 获取应用有效凭证，并查询余额
				this.get_valid_credentials()

			} catch (e) {
				// console.log(e)
				uni.showToast({
					icon: 'success',
					title: '用户获取失败',
					duration: 2000
				})
			}
		},
		methods: {
			/**
			 * 重新授权
			 */
			reauthorization() {
				try {
					uni.removeStorageSync('userinfo_storage_key');
					setTimeout(() => {
						this.showLogin = false
						this.userinfo = {}
						this.my_display = false
					}, 300)

					setTimeout(() => {
						this.showLogin = true
						this.visible = true
					}, 300)
				} 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://wxd6f090391d410534'
					}
				})

				if (res.data.access_token == '' || res.data.access_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.userinfo.amount = this.amount
						// 微校参数
						this.userinfo.appkey = this.appkey
						this.userinfo.app_secret = this.app_secret
						this.userinfo.ocode = this.ocode
						this.userinfo.sub_appid = this.sub_appid
						this.userinfo.appid = this.appid
						// 存储用户信息
						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: 1000
					});
				}
			},

			/**
			 * 获取应用有效凭证
			 */
			async get_valid_credentials() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/cgi-bin/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'app_key': this.appkey,
						'app_secret': this.app_secret,
						"grant_type": "client_credentials",
						"scope": "base",
						"ocode": this.ocode
					}
				});

				if (typeof(res.data.access_token) != 'undefined') {
					// 获取到应用有效凭证，保存到页面变量中
					this.access_token_for_amount = res.data.access_token
					// 用户充值钱包余额查询
					this.request_user_amount()

				} else {
					uni.showToast({
						title: '获取凭证失败',
						duration: 2000
					})
				}
			},

			/**
			 * 用户充值钱包余额查询
			 */
			async request_user_amount() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: "/cgi-bin/pay/app/wallet-recharge-balance?access_token=" + this
						.access_token_for_amount + "&sub_appid=" + this.sub_appid + "&user_id=" + this
						.userinfo.card_number
				});

				if (res.data.code === 0) {
					// 用户余额保存到页面变量中
					this.amount = res.data.data.amount;
				} else {
					uni.showToast({
						icon: 'none',
						title: '余额查询失败:\n' + res.data.message,
						duration: 2000
					})
				}
			}
		}
	}
</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>