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="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>
		<!--弹窗-->
		<modal v-if="showPop" title="用户绑定" confirm-text="确定" cancel-text="重置" @cancel="resetPop" @confirm="confirmPop">
			<view class="lineGroup">
				<text class="iconfont icon-shengchengmingpianicon label-icon"></text>
				<input type='text' class="stu-number" maxlength="14" placeholder="请输入学号" v-model="stu_number" />
			</view>
			<view class="lineGroup">
				<text class="iconfont icon-cardid label-icon"></text>
				<input type='text' class="stu-number" maxlength="18" placeholder="请输入身份证号码" v-model="id_card" />
			</view>
		</modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				showPop: false, //弹窗
				stu_number: '',
				id_card: '',
				ceshi: 'code',
				huanjing: '部署环境' // 部署环境是key，用来获取环境
			}
		},
		onLoad() {
			// 是否是测试环境，查询数据接口中参数的值决定，方便以后测试
			this.isTestEnvironment()
		},
		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'
					});
				}

				// 获取code
				this.getCode()
			},
			/**
			 * 弹窗
			 */
			confirmPop() { // 确认
				if (this.stu_number.length == 14 && this.id_card.length == 18) {
					this.showPop = false
					// 获得code
					this.getCode('confirm')
				} else {
					uni.showToast({
						title: '学号长度错误 或 身份证号 长度错误！',
						icon: 'none'
					});
				}
			},
			resetPop() { // 重置
				this.stu_number = ''
				this.id_card = ''
			},
			/**
			 * param获得code
			 */
			getCode(param) {
				uni.login({
					success: (res) => {
						// console.log('index', res);
						if (res.code) {
							if (param == 'confirm')
								// 请求服务器，获得openid
								this.getOpenId(res.code)
							else
								this.selectUser(res.code)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获得openid
			 */
			async getOpenId(code) {
				if (this.stu_number == '' || this.id_card == '') {
					uni.showToast({
						title: '学号或身份证号为空'
					});
					return
				}
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/wpopenid.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: code,
						stu_number: this.stu_number,
						id_card: this.id_card
					}
				})

				// console.log(res.data.mess);
				if (res.data.mess == '绑定成功') {
					uni.showToast({
						title: '用户绑定成功！',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.data.mess,
						icon: 'success'
					});
				}
			},
			/**
			 * 查询用户
			 */
			async selectUser(code) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/wpget_stu.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: code
					}
				})

				// console.log(res);
				if (res.data.mess == '未查询到用户信息') {
					this.showPop = true
				}
			}
		}
	}
</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;
				}
			}
		}

		.lineGroup {
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #c2c2c2;
			font-size: 38rpx;
			white-space: nowrap;
			
			.label-icon {
				display: flex;
				flex-direction: row;
				justify-items: right;
				align-items: center;
				font-size: 58rpx;
				width: 88rpx;
				height: 88rpx;
				line-height: 88rpx;
				color: $my-color-primary;
				margin: 22rpx 0 0 50rpx;
			}

			.stu-number {
				margin-top: 20rpx;
				color: #00c200;
				height: 88rpx;
				line-height: 88rpx;
			}
		}
	}
</style>