授权界面进行调整

snowy-admin-web/src/router/systemRouter.js

@@ -17,7 +17,7 @@ import Login from '@/views/auth/login/login.vue'
 import Findpwd from '@/views/auth/findPwd/index.vue'
 import Callback from '@/views/auth/login/callback.vue'
 
-import Wx from '@/views/wx/index.vue'
+import authorizeWx from '@/views/wx/index.vue'
 import Success from '@/views/success/index.vue'
 
 // 系统路由
@@ -51,8 +51,8 @@ const routes = [
 		}
 	},
 	{
-		path: '/wx',
-		component: Wx,
+		path: '/authorizeWx',
+		component: authorizeWx,
 		meta: {
 			title: '授权'
 		}

snowy-admin-web/src/router/whiteList.js

@@ -16,8 +16,8 @@ const constRouters = [
 		path: '/callback'
 	},
 	{
-		path: '/wx',
-		name: 'wx',
+		path: '/authorizeWx',
+		name: 'authorizeWx',
 		component: () => import('@/views/wx/index.vue'),
 		meta: {
 			title: '授权'

snowy-admin-web/src/views/success/index.vue

@@ -17,8 +17,11 @@
 
 <style lang="less" scoped>
 	.wx {
-		height: 400px;
+		height: 100vh;
 		text-align: center;
-		padding-top: 45%;
+		padding: 0 30px;
+		background-image: url('/src/assets/images/login/logo_background.png'); /* 背景图 */
+		background-size: cover;
+		background-position: center;
 	}
 </style>

snowy-admin-web/src/views/wx/index.vue

@@ -1,19 +1,32 @@
 <template>
 	<div class="wx">
-		<div class="title">请选择您要绑定的组织</div>
+		<div class="head">
+			<img class="logo" src="/src/assets/images/login/logo.png" />
+			<span class="title">冷链驿站</span>
+		</div>
+
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<a-form-item label="请输入您的真实姓名" name="name">
+				<a-input v-model:value="formData.name" placeholder="请输入真实姓名" allow-clear />
+			</a-form-item>
 
-		<a-select
-			ref="select"
-			v-model:value="orgId"
-			:options="options"
-			allowClear
-			style="width: 200px"
-			placeholder="请选择您要绑定的组织"
-			:field-names="{ label: 'name', value: 'id' }"
-		/>
+			<a-form-item label="请选择您要绑定的组织" name="orgId">
+				<a-select
+					ref="select"
+					v-model:value="formData.orgId"
+					:options="options"
+					allowClear
+					style="width: 100%"
+					placeholder="请选择您要绑定的组织"
+					:field-names="{ label: 'name', value: 'id' }"
+				/>
+			</a-form-item>
+		</a-form>
 
 		<div class="btn">
-			<a-button type="primary" @click="onSubmit" :disabled="!orgId" :loading="loading">确定</a-button>
+			<a-button type="primary" @click="onSubmit" :disabled="!formData.orgId || !formData.name" :loading="loading"
+				>确定</a-button
+			>
 		</div>
 	</div>
 </template>
@@ -22,14 +35,24 @@
 	import { useRoute } from 'vue-router'
 	import router from '@/router'
 	import { message } from 'ant-design-vue'
+	import { required } from '@/utils/formRules'
 	import orgApi from '@/api/sys/orgApi.js'
 	import alarmUserApi from '@/api/coldchain/alarmUserApi'
 
+	const formData = ref({}) // 表单数据
+	const formRef = ref()
+	const Route = useRoute()
+
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入您的真实姓名')],
+		orgId: [required('请选择您要绑定的组织')]
+	}
+
 	const orgId = ref() //选中的机构
 	const options = ref([]) //机构数据
 	const loading = ref(false) //按钮加载
 	const queryObj = ref({}) //携带的参数
-	const Route = useRoute()
 
 	onMounted(() => {
 		getOrg()
@@ -73,18 +96,34 @@
 
 <style lang="less" scoped>
 	.wx {
-		height: 400px;
-		text-align: center;
-		padding-top: 45%;
+		height: 100vh;
+		padding: 0 30px;
+		background-image: url('/src/assets/images/login/logo_background.png'); /* 背景图 */
+		background-size: cover;
+		background-position: center;
 
-		.title {
-			font-size: 13px;
-			margin: 20px 0;
-			color: #303133;
+		.head {
+			padding-top: 35%;
+			padding-bottom: 30px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.logo {
+				width: 35px;
+				height: 30px;
+			}
+			.title {
+				font-size: 28px;
+				font-weight: bold;
+				padding: 30px 10px;
+				letter-spacing: 10px;
+				color: #303133;
+			}
 		}
 
 		.btn {
-			margin: 20px 0;
+			margin: 35px 0;
+			text-align: center;
 		}
 	}
 </style>