首页按钮优化

pages/index/index.vue

@@ -11,7 +11,7 @@
 				</navigator>
 				<navigator :url="'/pagesElectric/jiaofei/jiaofei?o=index'" open-type="navigate" class="menu_item">
 					<image src="../../static/images/recharge2x.png" mode=""></image>
-					<text>水电充值</text>
+					<text>墨轩湖水电充值</text>
 				</navigator>
 				<navigator :url="'/pagesAir/shareAir/shareAir'" open-type="navigate" class="menu_item">
 					<image src="../../static/images/air.png" mode=""></image>
@@ -33,18 +33,17 @@
 					<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"
-			/>
+			<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">
@@ -56,430 +55,419 @@
 </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) {
+	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()
-		}
-	},
-	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
-				}
-			})
+			// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
+			this.isTestEnvironment()
 
-			// 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'
-				})
-			}
+			this.execed_onload = true
 		},
-		/**
-		 * 是否有用户信息
-		 */
-		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
-				})
+		onShow() {
+			if (!this.execed_onload) {
+				// 检查是否存在用户信息
+				this.has_user_info()
 			}
 		},
-		/**
-		 * 授权登陆取消回调
-		 */
-		login_cancel_callback() {
-			this.reauthorization()
-		},
-		/**
-		 * 重新授权
-		 */
-		reauthorization() {
-			this.validation_times = this.validation_times + 1
+		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
+					}
+				})
 
-			if (this.validation_times >= 2) {
-				this.login_fail_callback()
-			} else {
-				try {
-					// uni.removeStorageSync('userinfo_storage_key')
-					setTimeout(() => {
-						this.showLogin = false
-						this.userinfo = {}
-					}, 30)
+				// 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'
 
-					setTimeout(() => {
+						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
-					}, 30)
+					} else {
+						this.showLogin = false
+						this.userinfo = value
+						this.$store.state.userInfo = this.userinfo
+					}
 				} catch (e) {
-					console.log(e)
+					// console.log(e)
+					uni.showToast({
+						title: '异常：' + e,
+						duration: 3000
+					})
 				}
-			}
-		},
-		/**
-		 * 授权登陆取消回调
-		 */
-		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
+			},
+			/**
+			 * 授权登陆取消回调
+			 */
+			login_cancel_callback() {
+				this.reauthorization()
+			},
+			/**
+			 * 重新授权
+			 */
+			reauthorization() {
+				this.validation_times = this.validation_times + 1
 
-			this.validation_failed = false
-
-			// 屏蔽用户操作
-			uni.showLoading({
-				title: '获取数据中…',
-				mask: true
-			})
+				if (this.validation_times >= 2) {
+					this.login_fail_callback()
+				} else {
+					try {
+						// uni.removeStorageSync('userinfo_storage_key')
+						setTimeout(() => {
+							this.showLogin = false
+							this.userinfo = {}
+						}, 30)
 
-			// 通过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
+						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
 
-			if (res.data.refresh_token == '' || typeof res.data.refresh_token == 'undefined') {
-				uni.hideLoading()
-				uni.showToast({
-					title: '未获得token'
+				// 屏蔽用户操作
+				uni.showLoading({
+					title: '获取数据中…',
+					mask: true
 				})
-			} 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
+				// 通过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
+					}
+				})
 
-					// 获取code，然后去检查是否存在数据库中
-					this.getCode()
-				} catch (e) {
+				if (res.data.refresh_token == '' || typeof res.data.refresh_token == 'undefined') {
 					uni.hideLoading()
-					console.log(e)
+					uni.showToast({
+						title: '未获得token'
+					})
+				} else {
+					// 通过access_token换取用户信息
+					this.get_user_info(res.data.access_token)
 				}
-			} else {
-				uni.hideLoading()
-				uni.showToast({
-					title: '未获得用户信息，请领取校园卡并激活',
-					duration: 3000
+			},
+			/**
+			 * 通过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
+					}
 				})
-			}
-		},
-		/**
-		 * 获得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 {
+
+				// 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()
-						uni.showToast({
-							title: res.errMsg,
-							icon: 'none'
-						})
+						console.log(e)
 					}
-				},
-				fail() {
+				} else {
 					uni.hideLoading()
+					uni.showToast({
+						title: '未获得用户信息，请领取校园卡并激活',
+						duration: 3000
+					})
 				}
-			})
-		},
-		/**
-		 * 检查数据库中是否有该用户信息
-		 */
-		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,
+			},
+			/**
+			 * 获得code
+			 */
+			getCode() {
+				var _this = this
+				uni.login({
 					success: (res) => {
-						if (_this.from != 0 || _this.from != '0') {
-							// 页面跳转回去
-							uni.setStorageSync('navigateBack', 1)
-
-							uni.navigateBack({
-								delta: 1
+						// 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()
 					}
 				})
-			} else {
-				uni.hideLoading()
-				uni.showToast({
-					icon: 'none',
-					title: '授权失败：' + res.data.msg,
-					success: (res) => {}
+			},
+			/**
+			 * 检查数据库中是否有该用户信息
+			 */
+			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;
+	.container {
+		display: flex;
+		flex-direction: column;
+		width: 750rpx;
+		font-family: Microsoft YaHei-3970(82674968);
+		color: #333333;
 
-		image {
+		.banner {
 			width: 100%;
-			height: 100%;
+			height: 360rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
 		}
-	}
 
-	.nav {
-		position: relative;
-		width: 100%;
+		.nav {
+			position: relative;
+			width: 100%;
+			background-color: #eee;
+			box-sizing: border-box;
 
-		.menu,
-		.reset {
-			margin: 25rpx auto;
-			width: 640rpx;
-		}
+			.menu {
+				display: flex;
+				flex-wrap: wrap;
+				width: 750rpx;
+				box-sizing: border-box;
 
-		.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;
+				.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;
-			}
+					image {
+						width: 90rpx;
+						height: 90rpx;
+						margin: 0 auto;
+					}
 
-			text {
-				height: 29rpx;
-				line-height: 54rpx;
-				font-size: 30rpx;
-				color: #333333;
+					text {
+						margin-top: 18rpx;
+						height: 29rpx;
+						line-height: 29rpx;
+						font-size: 30rpx;
+						color: #333333;
+					}
+				}
 			}
 		}
 
-		.reset {
-			position: fixed;
+		.pupup-content {
 			display: flex;
 			flex-direction: column;
-			align-items: flex-end;
-			right: 55rpx;
-			bottom: 55rpx;
-			font-family: Microsoft YaHei-3970(82674968);
-			color: #333333;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
 
-			.icon-zhongzhi {
-				margin: 0 auto;
-				padding-top: 20rpx;
-				color: $my-color-primary;
-				width: 90rpx;
-				height: 70rpx;
-				font-size: 80rpx;
+			.pupup-title {
+				padding-bottom: 20rpx;
 			}
-		}
-	}
 
-	.pupup-content {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-
-		.pupup-title {
-			padding-bottom: 20rpx;
-		}
-
-		.pupup-img {
-			height: 90%;
+			.pupup-img {
+				height: 90%;
+			}
 		}
 	}
-}
-</style>
+</style>