激活功能demo

src/router/student.js

@@ -17,6 +17,13 @@ const forum = [
 					title: '个人中心'
 				}
 			},
+			{
+				path: '/activate',
+				component: () => import('@/views/student/user/activate.vue'),
+				meta: {
+					title: '激活'
+				}
+			},
 			{
 				path: '/inSsiteMessage',
 				component: () => import('@/views/student/In-site-message/index.vue'),

src/views/portal/components/Header.vue

@@ -35,6 +35,7 @@
 						<a-menu-item key="4" @click="jump('/classNotice')">课程公告</a-menu-item>
 						<a-menu-item key="5" @click="jump('/learningFootprint')">学习足迹</a-menu-item>
 						<a-menu-item key="7" @click="jump('/passwordRetrieve')">密码找回</a-menu-item>
+						<a-menu-item key="7" @click="jump('/activate')">激活</a-menu-item>
 						<a-menu-item key="8" @click="outLogin()">退出登录</a-menu-item>
 					</a-menu>
 				</template>

src/views/student/user/activate.vue

@@ -0,0 +1,60 @@
+<template>
+	<a-card>
+		<a-form
+			ref="formRef"
+			:model="formData"
+			:rules="formRules"
+			v-bind="layout"
+			:label-col="{ ...layout.labelCol, offset: 0 }"
+			:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
+		>
+			<a-form-item label="学号：" name="studentNum">
+				<a-input v-model:value="formData.studentNum" :maxlength="50" placeholder="请输入学号" allow-clear />
+			</a-form-item>
+			<a-form-item label="邮箱：" name="email">
+				<a-input v-model:value="formData.email" :maxlength="200" placeholder="请输入邮箱" allow-clear />
+			</a-form-item>
+			<a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: layout.labelCol.span }">
+				<a-button type="primary" :loading="submitLoading" @click="onSubmit">激活</a-button>
+			</a-form-item>
+		</a-form>
+	</a-card>
+</template>
+
+<script setup>
+	import { required } from '@/utils/formRules'
+	import {message} from 'ant-design-vue'
+	const formRef = ref()
+	let formData = ref({})
+	const submitLoading = ref(false)
+	// 默认要校验的
+	const formRules = {
+		studentNum: [required('请输入学号')],
+		email: [required('请输入邮箱')]
+	}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				submitLoading.value = true
+				setTimeout(() => {
+					message.success('激活成功')
+					submitLoading.value = false
+				}, 1000)
+			})
+			.catch(() => {
+				submitLoading.value = false
+			})
+	}
+	const layout = {
+		labelCol: {
+			span: 3
+		},
+		wrapperCol: {
+			span: 21
+		}
+	}
+</script>
+
+<style lang="less" scoped></style>

src/views/student/user/index.vue

@@ -46,7 +46,7 @@
 						<span>{{ formData.fallDue }}</span>
 					</a-form-item>
 					<a-form-item label="姓名：" name="name">
-						<a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear />
+						<a-input v-model:value="formData.name" :maxlength="10" placeholder="请输入姓名" allow-clear />
 					</a-form-item>
 					<a-form-item label="手机：" name="phone">
 						<a-input v-model:value="formData.phone" :maxlength="11" placeholder="请输入手机" allow-clear />