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>
		<!--弹窗-->
		<view class="banding-bg" v-if="showPop">
			<view class="banding-model">
				<view class="title-model">绑定</view>
				<view class="lineGroup-model">
					<text class="iconfont icon-shengchengmingpianicon label-icon-model"></text>
					<input type='number' class="input-model" maxlength="14" placeholder="请输入学号" v-model="stu_number" />
				</view>
				<view class="lineGroup-model">
					<text class="iconfont icon-cardid label-icon-model"></text>
					<input type='text' class="input-model" maxlength="18" placeholder="请输入身份证号码" v-model="id_card" />
				</view>
				<view class="btn-model">
					<button class="btn" @tap="confirmPop">绑定</button>
				</view>
			</view>
		</view>
	</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) {
					// 获得code
					this.getCode('confirm')
				} else {
					uni.showToast({
						title: '学号长度错误 或 身份证号 长度错误！',
						icon: 'none'
					});
				}
			},
			/**
			 * 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'
							});
							
							this.showPop = true
						}
					}
				})
			},
			/**
			 * 请求服务器，获得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'
					});
					
					this.showPop = false
				} else {
					uni.showToast({
						title: res.data.mess,
						icon: 'success'
					});
					
					this.showPop = true
				}
			},
			/**
			 * 查询用户
			 */
			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
				} else {
					this.showPop = 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;
				}
			}
		}

		.banding-bg {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			width: 750rpx;
			height: 1500rpx;
			background: rgba(0, 0, 0, 0.5);

			.banding-model {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				background-color: #FFFFFF;
				position: fixed;
				left: 25rpx;
				top: 300rpx;
				width: 650rpx;
				border-radius: 15rpx;
				padding: 30rpx;

				.title-model {
					font-size: 46rpx;
					font-weight: bold;
					padding: 20rpx 0 20rpx 30rpx;
				}

				.lineGroup-model {
					display: flex;
					flex-direction: row;
					box-shadow: none;
					border-bottom: 1px solid #c2c2c2;
					font-size: 38rpx;
					white-space: nowrap;

					.label-icon-model {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 58rpx;
						width: 88rpx;
						height: 108rpx;
						line-height: 108rpx;
						color: $my-color-primary;
						margin: 22rpx 0 0 50rpx;
					}

					.input-model {
						margin-top: 20rpx;
						color: #00c200;
						height: 108rpx;
						line-height: 108rpx;
					}
				}

				.btn-model {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 50rpx;

					.btn {
						width: 280rpx;
						height: 110rpx;
						line-height: 110rpx;
						background-color: $my-color-primary;
						border-radius: 15rpx;
						font-size: 38rpx;
						text-align: center;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>