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="cancelPop"
			@confirm="confirmPop">
			<view class="">学号：</view>
			<input type='text' class="stu-number" maxlength="14" placeholder="请输入学号" v-model="stu_number" />
			<view class="">身份证号：</view>
			<input type='text' class="stu-number" maxlength="18" placeholder="请输入身份证号" v-model="id_card" />
		</modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appId: 'wxd6f090391d410534',
				ocode: '1015730314',
				appSecret: '58D34C81D82B35179ED896C4362B0FC0',
				code: '',
				amount: 0.00,
				showPop: false, //弹窗
				stu_number: '20210210140101',
				id_card: '88888888'
				// stu_number: '',
				// id_card: ''
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			//弹窗
			confirmPop() { //确认
				if (this.stu_number.length == 14 && this.id_card.length == 18) {
					this.showPop = false
					// 获得code
					this.getCode()
				} else {
					uni.showToast({
						title: '学号长度错误 或 身份证号 长度错误！',
						icon: 'none'
					});
				}
			},
			cancelPop() { //取消
				// this.stu_number = ''
				// this.showPop = false
			},
			// 获得code
			getCode() {
				wx.login({
					success: (res) => {
						// console.log(res);
						if (res.code) {
							this.code = res.code
							// 请求服务器，获得openid
							this.getOpenId()
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获得openid
			 */
			async getOpenId() {
				const res = await this.$myRequest({
					host: 'code',
					url: '/HotWaters/wpopenid.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: this.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 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;
				}
			}
		}

		.stu-number {
			margin-top: 20rpx;
			color: #00c200;
			text-align: center;
			font-size: 38rpx;
			font-weight: bold;
			height: 50rpx;
			line-height: 50rpx;
		}
	}
</style>