yxy/uniapp/pages/student/index.vue

<template>
	<view class="box" v-if="stuts">
		<view class="box_title">
			生成学生借用二维码
		</view>
		<view class="">
			<uni-forms ref="form" :modelValue="formData"  :rules="rules">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="班级" name="class">
					<uni-easyinput type="text" v-model="formData.class" placeholder="例:遥感20-1班" />
				</uni-forms-item>
			</uni-forms>
			<button style="background-color:#2d8cf0 ; color: #fff; margin-bottom: 20rpx;" @click="submit">生成二维码</button>
		</view>
	</view>
	<view class="box" v-else>
		<view class="box_stuent">
			<view class="" style="position: absolute;" @click="fanhui">
				<uni-icons type="left" size="28"></uni-icons>
			</view>
			<view class="box_title">
				学生仪器借用码
			</view>
			<view class="box_bane">
				姓名：{{studentData1.student_name}}
			</view>
			<view class="box_bane">
				班级：{{studentData1.student_class}}
			</view>
		</view>
		<view class="erweima">
			<uv-qrcode ref="qrcode" :value="qrCodeValue" :options="qrCodeOptions"></uv-qrcode>
		</view>
		<view class="box_tixing">
			建议截图保存，以免退出重新获取
		</view>
	</view>
</template>


<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	// onShow是uni-app中的一个全局生命周期函数，当页面从后台进入前台显示时会被触发。
	import {
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import {requestApi } from '@/api/request.js'
	const formData = ref({
		name: '',
		class: '',
		phone: '',
	})
	const formData1 = ref({
		student_name: '',
		student_class: '',
		student_phone: '',
	})
	let studentData = wx.getStorageSync('studentData')
	// console.log(userInfo)
	formData.value.phone = studentData.phone_info.phoneNumber
	// console.log(formData.value.phone)
	let stuts = ref(true)
	let studentData1=ref(null)
	studentData1.value = wx.getStorageSync('studentData1')
	onShow(async () => {
		if(studentData1.value.student_phone==null){
			stuts.value = true;
		}else{
			stuts.value = false;
		}
	})
	function fanhui(){
		stuts.value = true;
	}
console.log(stuts)
	// 定义表单验证规则
	const rules = reactive({
		name: {
					rules: [{
							required: true,
							errorMessage: '请输入姓名',
						},
						{
							minLength: 2,
							maxLength: 5,
							errorMessage: '姓名不符',
						},
						{
						        validator: (rule, value) => /^[\u4e00-\u9fa5]+$/.test(value),
						        errorMessage: '姓名只能为中文',
						}
					]
				},
		class: {
					rules: [{
							required: true,
							errorMessage: '请输入班级',
						},
						{
							minLength: 3,
							maxLength: 10,
							errorMessage: '班级长度至少{minLength} 个字符',
						}
					]
				},
	});
	// 提交表单
	const form = ref(null);
	
	async function submit(){
		form.value.validate().then(res => {
			console.log('表单数据信息：', res)
			formData.value.class=res.class
			formData.value.name=res.name
			formData1.value.student_name=res.name
			formData1.value.student_class=res.class
			formData1.value.student_phone=formData.value.phone
			console.log('w',formData1.value)
			
			wx.setStorageSync('studentData1',formData1.value)
			// const studata = requestApi('api/Student/Register?server=1')
			const studata= requestApi(
			'api/Student/RegisterEdit?server=1',
			{
				student_name:res.name,
				student_class:res.class,
				student_phone:formData.value.phone
			},
			'POST'
			)
			console.log(studata)
			studentData1.value = wx.getStorageSync('studentData1')
			stuts.value = false;
		}).catch(err => {
			console.log('表单错误信息：', err);
		});
	};
	// 二维码
	const qrCodeValue = ref(formData.value.phone);
			const qrCodeOptions = ref({
				data: qrCodeValue,
				size: 300,
				useDynamicSize: false,
				errorCorrectLevel: 'Q',
				margin: 10,
				// areaColor: "#2d8cf0",
				backgroundColor: "#fff",
				foregroundImageSrc: '/static/img/logo2.png'
			});
</script>

<style lang="less">
	page {
		background-color: aliceblue;
	}

	.box {
		width: 85%;
		// height: 480rpx;
		background-color: #fff;
		margin: 30rpx auto;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.box_title {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
	}

	.box_title {
		margin-bottom: 40rpx;
		margin-top: 10rpx;
	}

	.box_stuent {
		font-size: 33rpx;
		font-weight: bold;
	}

	.box_bane {
		line-height: 60rpx;
	}

	.erweima {
		text-align: center;
		width: 200px;
		margin: 0 auto;
	}

	.box_tixing {
		text-align: center;
		color: #808695;
	}
</style>