微信授权
This commit is contained in:
parent
81c72e5481
commit
81d933d5e1
|
|
@ -1,6 +1,66 @@
|
|||
import { http } from '@/utils/request';
|
||||
|
||||
|
||||
/**
|
||||
* 获取微信授权 URL
|
||||
* @param {string} baseUrl - 授权后跳转的 URL（需后端处理）
|
||||
* @param {string} scope - 授权作用域（如 snsapi_userinfo）
|
||||
* @returns {Promise<string>} 返回微信授权 URL
|
||||
*/
|
||||
export async function getCode(baseUrl = window.location.href, scope = 'snsapi_userinfo') {
|
||||
try {
|
||||
const response = await http.get('/h5/wechat/code', {
|
||||
params: { baseUrl, scope } // 传递参数给后端
|
||||
});
|
||||
console.log(response)
|
||||
// 处理可能的 redirect: 前缀（兼容后端直接返回 URL 或 redirect:URL）
|
||||
let authUrl = response.result;
|
||||
if (typeof authUrl === 'string' && authUrl.startsWith('redirect:')) {
|
||||
authUrl = authUrl.substring('redirect:'.length).trim();
|
||||
}
|
||||
|
||||
// 直接返回授权 URL，由前端控制跳转
|
||||
return authUrl;
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取微信授权 URL 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
export async function getUserInfo(code,state) {
|
||||
try {
|
||||
const response = await http.get('/h5/wechat/auth', {
|
||||
params: { code,state } // 传递参数给后端
|
||||
});
|
||||
console.log(response)
|
||||
// 处理可能的 redirect: 前缀（兼容后端直接返回 URL 或 redirect:URL）
|
||||
//let authUrl = response.result;
|
||||
//if (typeof authUrl === 'string' && authUrl.startsWith('redirect:')) {
|
||||
// authUrl = authUrl.substring('redirect:'.length).trim();
|
||||
//}
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('获取微信授权 URL 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
export async function AutocheckUser(openId) {
|
||||
try {
|
||||
const response = await http.post('/h5/wechat/AutocheckUser',
|
||||
{ openId }, // JSON 数据
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 明确指定 JSON 格式
|
||||
}
|
||||
}
|
||||
);
|
||||
return response.result;
|
||||
} catch (error) {
|
||||
console.error('用户检查失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取访问时间段
|
||||
export async function getAccessTime() {
|
||||
const response = await http.get('/h5/cees/ceesUser/getH5Time');
|
||||
|
|
@ -109,5 +169,6 @@ export function waiTeacherSave(data) {
|
|||
userName: data.userName,
|
||||
phone: data.phone,
|
||||
userId: data.userId,
|
||||
openId: data.openId,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 75 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -1,10 +1,9 @@
|
|||
import { createRouter, createWebHashHistory, Router } from 'vue-router';
|
||||
import {getAccessTime} from '@/api/index';
|
||||
import { createRouter, createWebHistory, Router } from 'vue-router';
|
||||
import routes from './routes';
|
||||
import {showDialog } from 'Vant';
|
||||
|
||||
|
||||
const router: Router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: routes,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,15 @@ export const routes = [
|
|||
border: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'wx',
|
||||
path: '/wx',
|
||||
component: () => import('@/views/wechatOauth/index.vue'),
|
||||
meta: {
|
||||
title: '哈尔滨师范大学评卷报名系统',
|
||||
border: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 匹配不到重定向会主页
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@ interface UserState {
|
|||
user: User | null; // 用户信息
|
||||
userId: string; // 用户 ID
|
||||
openId: string; // 微信 OpenID
|
||||
unionId:string;// 微信 unionId
|
||||
groupId: number; // 用户组 ID
|
||||
major: number; // 专业 ID
|
||||
|
||||
}
|
||||
|
||||
// 定义并导出 useUserStore
|
||||
|
|
@ -30,6 +32,7 @@ export const useUserStore = defineStore('user', {
|
|||
user: null,
|
||||
userId: '',
|
||||
openId: '',
|
||||
unionId:'',
|
||||
groupId: 0,
|
||||
major: 0,
|
||||
}),
|
||||
|
|
@ -42,6 +45,8 @@ export const useUserStore = defineStore('user', {
|
|||
LoginUser: (state) => state.user,
|
||||
// 获取 OpenID
|
||||
getOpenId: (state) => state.openId,
|
||||
// 获取 OpenID
|
||||
getunionId: (state) => state.unionId,
|
||||
// 获取用户 ID
|
||||
getUserId: (state) => state.userId,
|
||||
// 获取专业 ID
|
||||
|
|
@ -79,6 +84,13 @@ export const useUserStore = defineStore('user', {
|
|||
setOpenId(openId: string) {
|
||||
this.openId = openId;
|
||||
},
|
||||
/**
|
||||
* 设置 unionId
|
||||
* @param unionId - 微信 unionId
|
||||
*/
|
||||
setunionId(unionId: string) {
|
||||
this.unionId = unionId;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置用户 ID
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { showToast } from 'vant';
|
|||
|
||||
// 创建 axios 实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
//baseURL: 'http://62.234.217.137:10001/jeecg-boot', // 基础 URL
|
||||
baseURL: 'http://localhost:10001/jeecg-boot', // 基础 URL
|
||||
baseURL: 'http://62.234.217.137:10001/jeecg-boot', // 基础 URL
|
||||
//baseURL: 'http://localhost:10001/jeecg-boot', // 基础 URL
|
||||
withCredentials: false, // 是否携带跨域凭证
|
||||
timeout: 10000, // 请求超时时间
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,11 @@
|
|||
<template>
|
||||
<div class="main-page">
|
||||
<div class="hrbun">
|
||||
<img src="@/assets/orangeUi/hrbun.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="code">
|
||||
<img class="text1" src="@/assets/orangeUi/shouyewenzi.svg" alt="" />
|
||||
<img class="sbm" src="@/assets/orangeUi/input.svg" alt="" />
|
||||
<input class="input-code" @wheel="isNotWheel" type="number" v-model="inputCode" />
|
||||
<img class="dl" @click="login" src="@/assets/orangeUi/button.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<img src="@/assets/orangeUi/footer_cg.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<img class="text1" src="@/assets/Ui/首页/评卷管理系统.svg" alt="" />
|
||||
<div class="code">
|
||||
<img class="sbm" src="@/assets/Ui/首页/请输入身份识别码.svg" alt="" />
|
||||
<input class="input-code" @wheel="isNotWheel" type="number" v-model="inputCode" />
|
||||
<img class="dl" @click="login" src="@/assets/Ui/首页/登入.svg" alt="" />
|
||||
</div>
|
||||
<van-dialog
|
||||
v-model:show="myShowDialog"
|
||||
confirmButtonColor="#8D2328"
|
||||
|
|
@ -37,10 +28,10 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref, } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { showDialog,showNotify, showConfirmDialog } from 'vant';
|
||||
import { getAccessTime,getMajor, checkUser } from '@/api';
|
||||
import { showDialog,showNotify, showConfirmDialog,showFailToast } from 'vant';
|
||||
import { getAccessTime,getMajor, checkUser,getCode, getUserInfo,AutocheckUser } from '@/api';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
|
||||
|
|
@ -51,6 +42,19 @@
|
|||
const loading = ref(false); // 控制加载状态
|
||||
const show = ref(false); // 控制显示状态
|
||||
const myShowDialog = ref(false); // 控制提示对话框的显示
|
||||
const code = ref('');
|
||||
const state = ref('');
|
||||
const userInfo = reactive({
|
||||
city: '',
|
||||
country: '',
|
||||
headimgurl: '',
|
||||
nickname: '',
|
||||
openid: '',
|
||||
privilege: [],
|
||||
province: '',
|
||||
sex: '',
|
||||
unionid: ''
|
||||
});
|
||||
|
||||
/**
|
||||
* 阻止输入框的滚轮事件
|
||||
|
|
@ -66,6 +70,7 @@
|
|||
onMounted(() => {
|
||||
// 初始化逻辑，例如获取URL中的参数等
|
||||
myShowDialog.value = false; // 初始化时不显示提示对话框
|
||||
handleAuth();
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -79,7 +84,31 @@
|
|||
async function login() {
|
||||
loading.value = true;
|
||||
show.value = true;
|
||||
const code = inputCode.value.toString();
|
||||
// 验证顺序：先检查空值，再检查长度
|
||||
if (!code) {
|
||||
showConfirmDialog({
|
||||
allowHtml: true,
|
||||
confirmButtonColor: '#8D2328',
|
||||
message: '身份码不能为空',
|
||||
});
|
||||
//showNotify({ type: 'danger', message: '身份码不能为空' });
|
||||
//showFailToast('身份码不能为空');
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (code.length !== 8) {
|
||||
showConfirmDialog({
|
||||
title: '请输入8位身份码',
|
||||
allowHtml: true,
|
||||
confirmButtonColor: '#8D2328',
|
||||
});
|
||||
//showNotify({ type: 'danger', message: '请输入8位身份码' });
|
||||
//showToast({ type: 'fail', message: '身份码不能为空' });
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
if (!accessChecked) {
|
||||
try {
|
||||
const res = await getAccessTime();
|
||||
|
|
@ -137,30 +166,7 @@ async function login() {
|
|||
|
||||
// 验证身份码长度
|
||||
const code = inputCode.value.toString();
|
||||
// 验证顺序：先检查空值，再检查长度
|
||||
if (!code) {
|
||||
showConfirmDialog({
|
||||
allowHtml: true,
|
||||
confirmButtonColor: '#8D2328',
|
||||
message: '身份码不能为空',
|
||||
});
|
||||
//showNotify({ type: 'danger', message: '身份码不能为空' });
|
||||
//showFailToast('身份码不能为空');
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (code.length !== 8) {
|
||||
showConfirmDialog({
|
||||
title: '请输入8位身份码',
|
||||
allowHtml: true,
|
||||
confirmButtonColor: '#8D2328',
|
||||
});
|
||||
//showNotify({ type: 'danger', message: '请输入8位身份码' });
|
||||
//showToast({ type: 'fail', message: '身份码不能为空' });
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟获取学科信息
|
||||
const majors = [
|
||||
|
|
@ -321,27 +327,121 @@ async function login() {
|
|||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
//微信网页授权
|
||||
async function handleAuth(){
|
||||
try {
|
||||
// 1. 获取微信授权URL
|
||||
const response = await getCode().catch(err => {
|
||||
throw new Error(`API请求失败: ${err.message}`);
|
||||
});
|
||||
// 2. 处理可能的URL格式问题
|
||||
let authUrl = (response || '').toString().trim();
|
||||
authUrl = authUrl.replace(/\s+/g, ''); // 删除所有空格
|
||||
authUrl = authUrl.replace(/^redirect:/i, ''); // 去除redirect:前缀
|
||||
// 3. 验证URL有效性
|
||||
console.log(authUrl)
|
||||
if (!authUrl || !/^https:\/\/open\.weixin\.qq\.com/.test(authUrl)) {
|
||||
throw new Error(`无效的授权URL: ${authUrl}`);
|
||||
}
|
||||
const local = window.location.href;
|
||||
console.log("local",local)
|
||||
if(local.indexOf("?code") >= 0){
|
||||
code.value = getUrlParams(new URL(local)).code;
|
||||
state.value = getUrlParams(new URL(local)).state
|
||||
console.log(code.value)
|
||||
if (code.value) {
|
||||
getUserData(code.value,state.value);
|
||||
}
|
||||
}else {
|
||||
// 4. 执行重定向
|
||||
window.location.assign(authUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('授权流程错误:', error);
|
||||
// 5. 用户友好的错误提示
|
||||
showFailToast(error.message || '微信授权失败');
|
||||
} finally {
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
// 获取URL参数
|
||||
function getUrlParams(url) {
|
||||
const params = new URLSearchParams(url.search)
|
||||
const map = {};
|
||||
for (let param of params.entries()){
|
||||
map[param[0]] = param[1];
|
||||
}
|
||||
console.log(map)
|
||||
return map;
|
||||
};
|
||||
|
||||
// 获取用户信息
|
||||
async function getUserData(code,state) {
|
||||
try {
|
||||
// 这里调用后端接口获取用户信息
|
||||
const response = await getUserInfo(code,state);
|
||||
const userData = response.result.userInfo;
|
||||
console.log(userData,"data")
|
||||
userInfo.city = userData.city;
|
||||
userInfo.country = userData.country;
|
||||
userInfo.headimgurl = userData.headimgurl;
|
||||
userInfo.nickname = userData.nickname;
|
||||
userInfo.openid = userData.openid;
|
||||
userInfo.privilege = userData.privilege;
|
||||
userInfo.province = userData.province;
|
||||
userInfo.sex = userData.sex;
|
||||
userInfo.unionid = userData.unionid;
|
||||
console.log("userInfo",userInfo)
|
||||
store.setOpenId(userInfo.openid)
|
||||
store.setunionId(userInfo.unionid)
|
||||
console.log('store',store)
|
||||
AutocheckUser(store.getOpenId)
|
||||
.then(response => {
|
||||
// 处理成功返回的数据
|
||||
console.log('接口返回数据:', response);
|
||||
console.log('OpenId',store.getOpenId)
|
||||
if(response.message == ''){
|
||||
const data = response.result;
|
||||
console.log(data,'data')
|
||||
store.login(data.user)
|
||||
store.setUserId(data.user.userId)
|
||||
router.push(data.router)
|
||||
}else{
|
||||
router.push(response.message)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理错误
|
||||
console.error('接口请求失败:', error);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
showFailToast('获取用户信息失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-page {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
||||
background: url('@/assets/Ui/首页/背景.svg') no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; // 垂直居中
|
||||
background-position: center center; /* 图片顶部对齐 */
|
||||
}
|
||||
|
||||
.hrbun {
|
||||
width: 90%;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -354,43 +454,39 @@ async function login() {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px; // 减少组件之间的间距
|
||||
|
||||
.text1 {
|
||||
width: 90%;
|
||||
}
|
||||
margin-top: 200px;
|
||||
|
||||
.sbm {
|
||||
width: 90%;
|
||||
width: 70%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-code {
|
||||
text-align: center;
|
||||
font-size: 35px;
|
||||
height: 2.5rem;
|
||||
width: 80%;
|
||||
height: 3.5rem;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
color: rgba(237, 75, 54, 0.6);
|
||||
font-weight: 600;
|
||||
border-radius: 132px;
|
||||
background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
|
||||
//border: 4px solid rgba(141, 35, 40, 0.6);
|
||||
border: 4px solid rgba(237, 75, 54, 0.6);
|
||||
box-shadow:
|
||||
0px 0px 0px rgba(0, 0, 0, 0.1),
|
||||
0px 3px 7px rgba(0, 0, 0, 0.1),
|
||||
0px 12px 12px rgba(0, 0, 0, 0.09),
|
||||
0px 27px 16px rgba(0, 0, 0, 0.05),
|
||||
0px 47px 19px rgba(0, 0, 0, 0.01),
|
||||
0px 74px 21px rgba(0, 0, 0, 0);
|
||||
background-image: url('@/assets/Ui/首页/文本框.svg');
|
||||
background-size: 100% 120%;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dl {
|
||||
width: 50%;
|
||||
margin-top: 2vh;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.text1 {
|
||||
width: 90%;
|
||||
margin-top: 160px;
|
||||
margin-bottom: 230px;
|
||||
}
|
||||
.footer {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
|
|
@ -432,4 +528,7 @@ async function login() {
|
|||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.img{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="main-container">
|
||||
<div class="hsd-title">
|
||||
<img src="@/assets/orangeUi/logo.svg" alt="" />
|
||||
<img src="../assets/Ui/log.svg" style="height: 40px;padding-top: 30px;"/>
|
||||
</div>
|
||||
<div class="main-text">
|
||||
<div class="main-page">
|
||||
|
|
@ -32,7 +32,11 @@
|
|||
<div class="main-item">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<img @click="show1 = true" src="../assets/imgs/ditu.svg" alt="" />
|
||||
<img @click="show1 = true" src="../assets/Ui/信息界面/图标/评卷地图.svg" alt="" style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<div class="ditu-img" v-if="show1">
|
||||
<span @click="show1 = false"> 关闭 ✕ </span>
|
||||
<div class="card-img">
|
||||
|
|
@ -43,7 +47,11 @@
|
|||
</van-col>
|
||||
|
||||
<van-col span="8">
|
||||
<img @click="show6 = true" src="@/assets/imgs/xysh.svg" alt="" />
|
||||
<img @click="show6 = true" src="../assets/Ui/信息界面/图标/校园生活.svg" alt="" style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<div class="xysh-img" v-if="show6">
|
||||
<span @click="show6 = false"> 关闭 ✕ </span>
|
||||
</div>
|
||||
|
|
@ -51,11 +59,15 @@
|
|||
</van-col>
|
||||
|
||||
<van-col span="8">
|
||||
<img @click="show7 = true" src="../assets/imgs/zhixie.svg" alt="" />
|
||||
<img @click="show7 = true" src="../assets/Ui/信息界面/图标/致谢.svg" alt="" style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<div class="zhixie-img" v-if="show7">
|
||||
<span @click="show7 = false"> 关闭 ✕ </span>
|
||||
<div class="card-img">
|
||||
<img src="@/assets/orangeUi/zhixie.jpg" style="width: 100%; height: 100%" />
|
||||
<img src="@/assets/Ui/致谢.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<p>致谢</p>
|
||||
|
|
@ -63,9 +75,9 @@
|
|||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<!--<div class="footer">
|
||||
<img class="bot-img" src="@/assets/orangeUi/index_footer.svg" />
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -140,10 +152,9 @@
|
|||
.main-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
||||
background: url('@/assets/Ui/信息/个人信息/背景.svg') no-repeat;
|
||||
background-size: cover;
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
background-position: center center; /* 图片顶部对齐 */
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.hsd-title {
|
||||
|
|
@ -310,4 +321,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<template>
|
||||
<div class="father">
|
||||
<van-cell-group inset class="mar-auto15">
|
||||
<!--<van-cell-group inset class="mar-auto15">
|
||||
<van-field class="van-field__label_rectangle" label-width="400px" label="哈尔滨师范大学评卷信息填报" type="hidden" />
|
||||
</van-cell-group>
|
||||
</van-cell-group>-->
|
||||
|
||||
<van-form @submit="onSubmit">
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/个人信息/个人信息.svg" />
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-field border class="van-field__label1——circle" label-width="400px" label="个人信息" type="hidden" />
|
||||
<!--<van-field border class="van-field__label1——circle" label-width="400px" label="个人信息" type="hidden" />-->
|
||||
<van-field
|
||||
v-model="student.userName"
|
||||
name="userName"
|
||||
|
|
@ -14,7 +17,14 @@
|
|||
type="text"
|
||||
placeholder="请输入姓名"
|
||||
:rules="[{ validator: userName, message: '请正确输入姓名' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="student.studentId"
|
||||
name="studentId"
|
||||
|
|
@ -22,7 +32,14 @@
|
|||
type="text"
|
||||
placeholder="请输入学号"
|
||||
:rules="[{ validator: stuNum, message: '请输入正确学号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/工号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="student.phone"
|
||||
name="phone"
|
||||
|
|
@ -30,7 +47,14 @@
|
|||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:rules="[{ validator: phoneNum, message: '请正确输入手机号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label-width="150px" class="van-rad" name="status" label="是否第一次参加阅卷">
|
||||
<template #input>
|
||||
<van-radio-group checked-color="#8D2328" v-model="student.checked" direction="horizontal">
|
||||
|
|
@ -103,6 +127,9 @@
|
|||
.father {
|
||||
height: 100vh;
|
||||
background-color: #efefef;
|
||||
background-image: url('@/assets/Ui/信息/个人信息/背景.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 修改这里 */
|
||||
}
|
||||
|
||||
.mar-auto15 {
|
||||
|
|
@ -143,4 +170,16 @@
|
|||
background-color: #8d2328;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<div class="father">
|
||||
<van-cell-group inset class="mar-auto15">
|
||||
<!--<van-cell-group inset class="mar-auto15">
|
||||
<van-field class="van-field__label_rectangle" label-width="400px" label="哈尔滨师范大学评卷信息填报" type="hidden" />
|
||||
</van-cell-group>
|
||||
</van-cell-group>-->
|
||||
<van-form @submit="onSubmit">
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/个人信息/个人信息.svg" />
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-field class="van-field__label1——circle" label-width="400px" label="个人信息" type="hidden" />
|
||||
<!--<van-field class="van-field__label1——circle" label-width="400px" label="个人信息" type="hidden" />-->
|
||||
<van-field
|
||||
v-model="teacher.userName"
|
||||
name="userName"
|
||||
|
|
@ -13,7 +16,14 @@
|
|||
type="text"
|
||||
placeholder="请输入姓名"
|
||||
:rules="[{ validator: userName, message: '请正确输入姓名' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="teacher.teacherId"
|
||||
name="studentId"
|
||||
|
|
@ -21,7 +31,12 @@
|
|||
type="text"
|
||||
placeholder="请输入工号"
|
||||
:rules="[{ required: true, message: '请输入工号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/工号.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="teacher.phone"
|
||||
name="phone"
|
||||
|
|
@ -29,7 +44,14 @@
|
|||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:rules="[{ validator: phoneNum, message: '请正确输入手机号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label-width="150px" class="van-rad" name="status" label="是否第一次参加阅卷">
|
||||
<template #input>
|
||||
<van-radio-group checked-color="#8D2328" v-model="teacher.checked" direction="horizontal">
|
||||
|
|
@ -103,6 +125,8 @@
|
|||
.father {
|
||||
height: 100vh;
|
||||
background-color: #efefef;
|
||||
background: url('@/assets/Ui/信息/个人信息/背景.svg') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mar-auto15 {
|
||||
|
|
@ -142,4 +166,16 @@
|
|||
background-color: #8d2328;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<div class="main-container">
|
||||
<div class="hsd-title">
|
||||
<img src="@/assets/orangeUi/logo.svg" />
|
||||
<img src="../assets/Ui/log.svg" style="height: 40px;padding-top: 30px;"/>
|
||||
</div>
|
||||
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/orangeUi/cg.svg" />
|
||||
<img src="@/assets/Ui/信息界面/报名成功.svg" style="margin-top: -20px; margin-bottom: 20px;"/>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="main-text">
|
||||
{{ userInfo.userName }}，您已成功报名！
|
||||
<p>
|
||||
{{ userInfo.userName }}，您已成功报名!
|
||||
<p style="margin-top: 18px;">
|
||||
感谢您参与本次
|
||||
<em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作！
|
||||
<em style="font-style: normal; color: white; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +20,14 @@
|
|||
<div class="main-item">
|
||||
<van-row wrap>
|
||||
<van-col span="6" v-if="showIcon.show0">
|
||||
<img @click="show0 = true" src="../assets/imgs/my.svg" alt="" />
|
||||
<img @click="show0 = true" src="../assets/Ui/信息界面/图标/个人信息.svg" alt=""
|
||||
style=" height: 43px; width: 43px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */
|
||||
"/>
|
||||
<van-dialog
|
||||
title="个人信息"
|
||||
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
||||
|
|
@ -37,7 +45,12 @@
|
|||
name="userName"
|
||||
label="姓名"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
readonly
|
||||
style="height: 35px; line-height: 100%"
|
||||
|
|
@ -50,6 +63,11 @@
|
|||
<template #right-icon>
|
||||
<van-icon class="icon" :name="showIdentityId ? 'eye-o' : 'closed-eye'" @click="toggleIdentityId"/>
|
||||
</template>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/身份证号.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<!-- <van-field-->
|
||||
<!-- style="height: 35px; line-height: 100%"-->
|
||||
|
|
@ -80,6 +98,11 @@
|
|||
<template #right-icon>
|
||||
<van-icon class="icon" :name="showphone ? 'eye-o' : 'closed-eye'" @click="togglephone"/>
|
||||
</template>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
|
|
@ -88,7 +111,12 @@
|
|||
readonly
|
||||
name="picker"
|
||||
label="职称"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/职称.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -97,7 +125,12 @@
|
|||
name="office"
|
||||
label="职务"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/职务.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -106,7 +139,12 @@
|
|||
name="workName"
|
||||
label="单位名称"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/单位名称.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -115,7 +153,12 @@
|
|||
name="workPhoen"
|
||||
label="单位电话"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/单位电话.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
v-if="userInfo.pyCard"
|
||||
|
|
@ -128,6 +171,10 @@
|
|||
<template #right-icon>
|
||||
<van-icon class="icon" :name="showpyCard ? 'eye-o' : 'closed-eye'" @click="togglepyCard"/>
|
||||
</template>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/劳务信息/图标/银行卡号.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
|
|
@ -138,7 +185,12 @@
|
|||
name="bankAddress"
|
||||
label="开户所在地"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/劳务信息/图标/开户银行所在地.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -147,7 +199,12 @@
|
|||
name="bankName"
|
||||
label="开户行"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/劳务信息/图标/开户银行.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -157,7 +214,12 @@
|
|||
label="车牌号"
|
||||
type="text"
|
||||
height="40px"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/确认信息/图标/车牌.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
name="dormitoryStatus"
|
||||
v-if="userInfo.dormitoryStatus === 1"
|
||||
|
|
@ -177,6 +239,11 @@
|
|||
{{ userInfo.dormitoryStatus === 1 ? '是' : '否' }}
|
||||
</van-radio-group>
|
||||
</template>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/确认信息/图标/住宿.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-field
|
||||
v-if="userInfo.studentId"
|
||||
|
|
@ -187,7 +254,14 @@
|
|||
label="学号"
|
||||
type="text"
|
||||
height="40px"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/工号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-if="userInfo.teacherId"
|
||||
style="height: 35px; line-height: 100%"
|
||||
|
|
@ -197,7 +271,12 @@
|
|||
label="工号"
|
||||
type="text"
|
||||
height="40px"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img src= "../assets/Ui/信息/个人信息/图标/工号.svg"
|
||||
style="width: 16px; height: 16px;"/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-if="userInfo.mealCard"
|
||||
style="height: 35px; line-height: 100%"
|
||||
|
|
@ -214,33 +293,49 @@
|
|||
|
||||
<span class="dialog-close-content" @click="show0 = false, showIdentityId = false, showphone = false , showpyCard =false ">×</span>
|
||||
</van-dialog>
|
||||
<p>我的信息</p>
|
||||
<p style="color: white;">个人信息</p>
|
||||
</van-col>
|
||||
|
||||
<van-col span="6" v-if="showIcon.show1">
|
||||
<img @click="show1 = true" src="../assets/imgs/ditu.svg" alt="" />
|
||||
<img @click="show1 = true" src="../assets/Ui/信息界面/图标/师大地图.svg" alt="" style="width: 43px;height: 43px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */
|
||||
"/>
|
||||
<div class="ditu-img" v-if="show1">
|
||||
<span @click="show1 = false"> 关闭 ✕ </span>
|
||||
<div class="card-img">
|
||||
<img src="@/assets/orangeUi/ditu.jpg" style="width: 100%; height: 100%" alt="师大地图" />
|
||||
</div>
|
||||
</div>
|
||||
<p>师大地图</p>
|
||||
<p style="color: white;">师大地图</p>
|
||||
</van-col>
|
||||
|
||||
<van-col span="6" v-if="showIcon.show2">
|
||||
<img @click="show2 = true" src="@/assets/imgs/txz.svg" alt="" />
|
||||
<!-- <van-col span="6" v-if="showIcon.show2">
|
||||
<img @click="show2 = true" src="../assets/Ui/信息界面/图标/通行证.svg" alt="" style="height: 43px;width: 43px;border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */
|
||||
"/>
|
||||
<div class="txz-img2" v-if="show2">
|
||||
<span @click="show2 = false"> 关闭 ✕ </span>
|
||||
<span @click="show2 = false"> 关闭 ✕ </span> -->
|
||||
<!-- <div class="card-pai">黑A·35648</div>-->
|
||||
<div class="card-pai">{{ carNum() }}</div>
|
||||
<!-- <div class="card-pai">{{ carNum() }}</div>
|
||||
<div class="card-tishi">该车辆为评卷教师车辆，已向学校报备，请放行！</div>
|
||||
</div>
|
||||
<p>通行证</p>
|
||||
</van-col>
|
||||
<p style="color: white;">通行证</p>
|
||||
</van-col> -->
|
||||
|
||||
<van-col span="6" v-if="showIcon.show3">
|
||||
<img @click="showGroup" src="@/assets/imgs/fenzu.svg" alt="" />
|
||||
<img @click="showGroup" src="../assets/Ui/信息界面/图标/所属分组.svg" alt=""
|
||||
style=" width: 43px; height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */" />
|
||||
<van-dialog
|
||||
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
||||
:show-confirm-button="false"
|
||||
|
|
@ -254,10 +349,15 @@
|
|||
<p v-else>{{ group }}</p>
|
||||
</div>
|
||||
</van-dialog>
|
||||
<p>所属分组</p>
|
||||
<p style="color: white;">所属分组</p>
|
||||
</van-col>
|
||||
<van-col span="6" v-if="showIcon.show4">
|
||||
<img @click="showDormitory" src="@/assets/imgs/sushi.svg" alt="" />
|
||||
<img @click="showDormitory" src="../assets/Ui/信息界面/图标/宿舍.svg" alt=""
|
||||
style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<van-dialog
|
||||
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
||||
:show-confirm-button="false"
|
||||
|
|
@ -271,10 +371,15 @@
|
|||
<p v-else>{{ dormitory }}</p>
|
||||
</div>
|
||||
</van-dialog>
|
||||
<p>宿舍</p>
|
||||
<p style="color: white;">宿舍</p>
|
||||
</van-col>
|
||||
<van-col span="6" v-if="showIcon.show5">
|
||||
<img @click="show5 = true" src="@/assets/imgs/didian.svg" alt="" />
|
||||
<img @click="show5 = true" src="../assets/Ui/信息界面/图标/评卷地图.svg" alt=""
|
||||
style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<van-dialog
|
||||
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
||||
:show-confirm-button="false"
|
||||
|
|
@ -290,29 +395,41 @@
|
|||
<!-- <img src="@/assets/img/dt.jpg"/>-->
|
||||
<span class="dialog-close-content" @click="show5 = false">×</span>
|
||||
</van-dialog>
|
||||
<p>评卷地点</p>
|
||||
<p style="color: white;">评卷地点</p>
|
||||
</van-col>
|
||||
|
||||
<van-col span="6">
|
||||
<img @click="show6 = true" src="@/assets/imgs/xysh.svg" alt="" />
|
||||
<!-- <van-col span="6">
|
||||
<img @click="show6 = true" src="../assets/Ui/信息界面/图标/校园生活.svg" alt=""
|
||||
style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<div class="xysh-img" :class="handoffValue" v-if="show6" @click="toggleShow">
|
||||
<span @click="show6 = false"> 关闭 ✕ </span>
|
||||
<span @click="show6 = false"> 关闭 ✕ </span> -->
|
||||
<!-- <em class="em-next"></em>-->
|
||||
</div>
|
||||
<p>校园生活</p>
|
||||
</van-col>
|
||||
<!-- </div>
|
||||
<p style="color: white;">校园生活</p>
|
||||
</van-col> -->
|
||||
|
||||
<van-col span="6" v-if="showIcon.show7">
|
||||
<img @click="show7 = true" src="../assets/imgs/zhixie.svg" alt="" />
|
||||
<img @click="show7 = true" src="../assets/Ui/信息界面/图标/致谢.svg" alt="" style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
|
||||
border-radius: 12px; /* 圆角 */
|
||||
padding: 8px; /* 内边距 */
|
||||
background: rgba(255, 255, 255, 0.1); /* 透明背景 */
|
||||
transition: all 0.2s; /* 悬停过渡效果 */"/>
|
||||
<div class="zhixie-img" v-if="show7">
|
||||
<span @click="show7 = false"> 关闭 ✕ </span>
|
||||
<div class="card-img">
|
||||
<img src="@/assets/orangeUi/zhixie.jpg" style="width: 100%; height: 100%" />
|
||||
<img src="@/assets/Ui/致谢.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>致谢</p>
|
||||
<p style="color: white;">致谢</p>
|
||||
</van-col>
|
||||
<!-- <div class="hsd-title">
|
||||
<img src="../assets/图层 1.svg" />
|
||||
</div> -->
|
||||
|
||||
<!-- <van-col span="6" v-if="showIcon.show8">-->
|
||||
<!-- <img @click="show8 = true" src="@/assets/imgs/zz.svg" alt="">-->
|
||||
|
|
@ -329,17 +446,8 @@
|
|||
<!-- <p>证书</p>-->
|
||||
<!-- </van-col>-->
|
||||
</van-row>
|
||||
|
||||
<div class="main-bottom">
|
||||
<!-- <img src="@/assets/img/bottom.png">-->
|
||||
<!-- <img src="@/assets/img1/footer1.svg" >-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<!-- <img class="bot-img" src="@/assets/img1/footer3.svg" >-->
|
||||
<img class="bot-img" src="@/assets/orangeUi/footer_cg.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -554,30 +662,29 @@
|
|||
.main-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
||||
background: url('@/assets/Ui/信息/个人信息/背景.svg') no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-position: center center; /* 图片顶部对齐 */
|
||||
}
|
||||
|
||||
.hsd-title {
|
||||
// height: 5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20px; // 调整顶部间距
|
||||
|
||||
img {
|
||||
width: 65%;
|
||||
margin-top: 8vh;
|
||||
}
|
||||
// img {
|
||||
// width: 65%;
|
||||
// margin-top: 8vh;
|
||||
// }
|
||||
}
|
||||
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -588,21 +695,22 @@
|
|||
}
|
||||
|
||||
.main-content {
|
||||
//margin-top: 10vh;
|
||||
margin-top: 30px;
|
||||
width: 100vw;
|
||||
height: 10vh;
|
||||
text-align: center;
|
||||
//border: 1px solid orange;
|
||||
color: black;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 97vw;
|
||||
height: 20vh;
|
||||
text-align: center;
|
||||
margin-top: 120px;
|
||||
|
||||
//margin-top: 5vh;
|
||||
|
||||
.main-item {
|
||||
img {
|
||||
|
|
@ -735,20 +843,12 @@
|
|||
max-height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 校园生活弹窗样式 */
|
||||
.xysh-img1 {
|
||||
background: url('@/assets/orangeUi/xysh1.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.xysh-img2 {
|
||||
background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.icon_background{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div class="father">
|
||||
<van-cell-group inset class="mar-auto15">
|
||||
<!--<van-cell-group inset class="mar-auto15">
|
||||
<van-field class="van-field__label_rectangle" label-width="400px" label="哈尔滨师范大学评卷信息填报" type="hidden" />
|
||||
</van-cell-group>
|
||||
|
||||
</van-cell-group>-->
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field class="van-field__label1——circle" label-width="400px" label="个人信息" type="hidden" />
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/个人信息/个人信息.svg" />
|
||||
</div>
|
||||
<van-cell-group inset style="background-color: transparent;">
|
||||
<van-field
|
||||
v-model="notLocalTeacher.userName"
|
||||
name="userName"
|
||||
|
|
@ -14,7 +15,14 @@
|
|||
type="text"
|
||||
placeholder="请输入姓名"
|
||||
:rules="[{ validator: userName, message: '请正确输入姓名' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="notLocalTeacher.identityId"
|
||||
name="userCardId"
|
||||
|
|
@ -22,9 +30,34 @@
|
|||
type="text"
|
||||
placeholder="请输入身份证号"
|
||||
:rules="[{ validator: userCardId, message: '请输入身份证号' }]"
|
||||
/>
|
||||
<van-field v-model="notLocalTeacher.sex" readonly name="picker" label="性别" />
|
||||
<van-field readonly v-model="notLocalTeacher.age" name="age" label="年龄" type="text" />
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/身份证号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field v-model="notLocalTeacher.sex" readonly name="picker" label="性别">
|
||||
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/性别.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-field readonly v-model="notLocalTeacher.age" name="age" label="年龄" type="text">
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/年龄.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
|
||||
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="notLocalTeacher.identityId"-->
|
||||
|
|
@ -41,7 +74,15 @@
|
|||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:rules="[{ validator: phoneNum, message: '请输入手机号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="notLocalTeacher.jobTitle"
|
||||
|
|
@ -52,7 +93,15 @@
|
|||
placeholder="点击选择职称"
|
||||
@click="showPicker = true"
|
||||
:rules="[{ required: true, message: '请选择职称' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/职称.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-popup v-model:show="showPicker" position="bottom">
|
||||
<van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
|
||||
</van-popup>
|
||||
|
|
@ -64,10 +113,21 @@
|
|||
type="text"
|
||||
placeholder="请输入职务（如教师，教务主任）"
|
||||
:rules="[{ required: true, message: '请输入职务' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/职务.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<van-cell-group inset class="mar-auto15">
|
||||
<van-field class="van-field__label1——circle" label-width="400px" label="工作单位" type="hidden" />
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/个人信息/工作单位.svg" />
|
||||
</div>
|
||||
<van-cell-group inset class="mar-auto15" style="background-color: transparent;">
|
||||
<!--<van-field class="van-field__label1——circle" label-width="400px" label="工作单位" type="hidden" />-->
|
||||
<van-field
|
||||
v-model="notLocalTeacher.workName"
|
||||
name="workName"
|
||||
|
|
@ -75,14 +135,36 @@
|
|||
type="text"
|
||||
placeholder="请输入单位名称"
|
||||
:rules="[{ required: true, message: '请输入单位名称' }]"
|
||||
/>
|
||||
<van-field v-model="notLocalTeacher.workPhone" name="workPhoen" label="单位电话" type="text" placeholder="电话/固定电话(选填)" />
|
||||
>
|
||||
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/单位名称.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field v-model="notLocalTeacher.workPhone" name="workPhoen" label="单位电话" type="text" placeholder="电话/固定电话(选填)" >
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/个人信息/图标/单位电话.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px">
|
||||
<van-button style="background-color: #8d2328; border: none; font-weight: 600" round block type="primary" native-type="submit">
|
||||
下一步
|
||||
</van-button>
|
||||
<!--<van-button style="background-color: #8d2328; border: none; font-weight: 600" round block type="primary" native-type="submit">-->
|
||||
<!--下一步
|
||||
</van-button>-->
|
||||
<button style="background-color: transparent; width: 100%; border: none; display: flex; justify-content: flex-end;" native-type="submit">
|
||||
<img
|
||||
src="@/assets/Ui/信息/个人信息/下一页.svg"
|
||||
style="width: 35%; "
|
||||
alt="下一步">
|
||||
</button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
|
|
@ -349,14 +431,18 @@
|
|||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.father {
|
||||
height: 100vh;
|
||||
background-color: #efefef;
|
||||
padding-top: 20px;
|
||||
background-image: url('@/assets/Ui/信息/个人信息/背景.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 修改这里 */
|
||||
}
|
||||
|
||||
.mar-auto15 {
|
||||
margin: 15px 15px;
|
||||
margin: 15px 30px;
|
||||
}
|
||||
|
||||
.van-field__label_rectangle {
|
||||
|
|
@ -392,4 +478,16 @@
|
|||
background-color: #8d2328;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,12 @@
|
|||
<!-- <p class="xxxxx"></p>-->
|
||||
<!-- </div>-->
|
||||
<van-form @submit="onSubmit">
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/劳务信息/劳务信息.svg" />
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-field class="van-field__label1——circle" label-width="400px" label="劳务信息" type="hidden" />
|
||||
<!--<van-field class="van-field__label1——circle" label-width="400px" label="劳务信息" type="hidden" />-->
|
||||
<div class="title-tishi">
|
||||
<!-- <span>温馨提示</span>-->
|
||||
|
||||
<div class="wxts">
|
||||
请填写本人名下
|
||||
<em>借记卡（储蓄卡）</em>
|
||||
|
|
@ -28,7 +29,14 @@
|
|||
type="text"
|
||||
placeholder="请输入姓名"
|
||||
:rules="[{ required: true, message: '请输入学号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
readonly
|
||||
v-model="tid"
|
||||
|
|
@ -37,7 +45,15 @@
|
|||
type="text"
|
||||
placeholder="请输入身份证号"
|
||||
:rules="[{ required: true, message: '请输入身份证号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/身份证号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-field
|
||||
readonly
|
||||
v-model="tphone"
|
||||
|
|
@ -46,7 +62,14 @@
|
|||
type="text"
|
||||
placeholder="请输入手机号"
|
||||
:rules="[{ required: true, message: '请输入手机号' }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="field-container">
|
||||
<van-field
|
||||
v-model="notLocalTeacherTwo.pyCardMasked"
|
||||
|
|
@ -59,7 +82,12 @@
|
|||
@blur="onBlur"
|
||||
ref="cardInput"
|
||||
>
|
||||
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/银行卡号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<!-- 修改按钮放在输入框右侧 -->
|
||||
<van-button
|
||||
|
|
@ -90,7 +118,15 @@
|
|||
type="text"
|
||||
placeholder="请输入开户所在地(北京，哈尔滨)"
|
||||
:rules="[{ validator: bankAddr }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/开户银行所在地.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<!-- :rules="[{ required: true, message: '请输入开户所在地' }]"-->
|
||||
<van-field
|
||||
v-model="notLocalTeacherTwo.bankName"
|
||||
|
|
@ -99,12 +135,30 @@
|
|||
type="text"
|
||||
placeholder="请输入开户行名称"
|
||||
:rules="[{ validator: bankName }]"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/开户银行.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
|
||||
<!-- :rules="[{ required: true, message: '请输入开户行名称' }]"-->
|
||||
</van-cell-group>
|
||||
<div class="head-cg">
|
||||
<img src="@/assets/Ui/信息/劳务信息/入校信息.svg" />
|
||||
</div>
|
||||
<div class="border-rad">
|
||||
<van-field class="van-field__label1——circle" label-width="400px" label="入校信息" type="hidden" />
|
||||
<!--<van-field class="van-field__label1——circle" label-width="400px" label="入校信息" type="hidden" />-->
|
||||
<van-field name="carStatus" label-width="150px" label="车辆是否入校">
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/是否开车.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
<template #input>
|
||||
<van-radio-group checked-color="#8D2328" v-model="notLocalTeacherTwo.carStatus" direction="horizontal">
|
||||
<van-radio name="1">是</van-radio>
|
||||
|
|
@ -120,8 +174,21 @@
|
|||
type="text"
|
||||
placeholder="例如：黑A39233"
|
||||
:rules="[{ required: true, message: '请输入车牌号' }]"
|
||||
/>
|
||||
>
|
||||
<!--<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/是否开车.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>-->
|
||||
</van-field>
|
||||
<van-field name="dormitoryStatus" label-width="150px" label="是否住宿">
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/劳务信息/图标/是否住宿.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
<template #input>
|
||||
<van-radio-group checked-color="#8D2328" v-model="notLocalTeacherTwo.dormitoryStatus" direction="horizontal">
|
||||
<van-radio name="1">是</van-radio>
|
||||
|
|
@ -130,8 +197,8 @@
|
|||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
<div style="margin: 16px">
|
||||
<van-button
|
||||
<div style="margin: 16px; display: flex;">
|
||||
<!--<van-button
|
||||
round
|
||||
style="background-color: #8d2328; border: none; font-weight: 600"
|
||||
class="van-button--primary"
|
||||
|
|
@ -139,8 +206,14 @@
|
|||
@click="Previous"
|
||||
>
|
||||
上一步
|
||||
</van-button>
|
||||
<van-button
|
||||
</van-button>-->
|
||||
<button @click="Previous" style="background-color: transparent; width: 100%; border: none; display: flex; justify-content: flex-start;">
|
||||
<img
|
||||
src="@/assets/Ui/信息/劳务信息/上一页 按钮.svg"
|
||||
style="width: 70%; "
|
||||
alt="下一步">
|
||||
</button>
|
||||
<!--<van-button
|
||||
round
|
||||
style="background-color: #8d2328; border: none; font-weight: 600"
|
||||
class="van-button--primary"
|
||||
|
|
@ -148,13 +221,19 @@
|
|||
native-type="submit"
|
||||
>
|
||||
提交
|
||||
</van-button>
|
||||
</van-button>-->
|
||||
<button style="background-color: transparent; width: 100%; border: none; display: flex; justify-content: flex-end;">
|
||||
<img
|
||||
src="@/assets/Ui/信息/劳务信息/下一页按键.svg"
|
||||
style="width: 70%; "
|
||||
alt="下一步">
|
||||
</button>
|
||||
</div>
|
||||
</van-form>
|
||||
|
||||
<van-dialog
|
||||
v-model:show="myShowDialog"
|
||||
confirmButtonColor="#8D2328"
|
||||
confirmButtonColor="#f8cdba"
|
||||
cancelButtonColor="#939393"
|
||||
title="确认信息"
|
||||
confirm-button-text="确认"
|
||||
|
|
@ -173,15 +252,37 @@
|
|||
name="userName"
|
||||
label="姓名"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/姓名.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
readonly
|
||||
style="height: 35px; line-height: 100%"
|
||||
v-model="notLocalTeacherTwo.identityId"
|
||||
name="userCardId"
|
||||
label="身份证号"
|
||||
/>
|
||||
<van-field style="height: 35px; line-height: 100%" v-model="notLocalTeacherTwo.sex" readonly name="picker" label="性别" />
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/身份证.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field style="height: 35px; line-height: 100%" v-model="notLocalTeacherTwo.sex" readonly name="picker" label="性别" >
|
||||
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/性别.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -189,7 +290,14 @@
|
|||
name="age"
|
||||
label="年龄"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/年龄.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -197,14 +305,28 @@
|
|||
name="phone"
|
||||
label="手机号"
|
||||
type="number"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/手机号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
v-model="notLocalTeacherTwo.jobTitle"
|
||||
readonly
|
||||
name="picker"
|
||||
label="职称"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/职称.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -212,7 +334,14 @@
|
|||
name="office"
|
||||
label="职务"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/职务.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -220,7 +349,14 @@
|
|||
name="workName"
|
||||
label="单位名称"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/单位名称.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -228,7 +364,14 @@
|
|||
name="workPhoen"
|
||||
label="单位电话"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/单位电话.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -236,7 +379,14 @@
|
|||
name="pyCard"
|
||||
label="银行卡号"
|
||||
type="number"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/银行卡号.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
|
|
@ -245,7 +395,14 @@
|
|||
name="bankAddress"
|
||||
label="开户所在地"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/开户银行所在地.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -253,7 +410,15 @@
|
|||
name="bankName"
|
||||
label="开户行"
|
||||
type="text"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/开户银行.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-field>
|
||||
<van-field
|
||||
style="height: 35px; line-height: 100%"
|
||||
readonly
|
||||
|
|
@ -263,8 +428,22 @@
|
|||
label="车牌号"
|
||||
type="text"
|
||||
height="40px"
|
||||
/>
|
||||
>
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/车牌.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="dormitoryStatus" :readonly="true" style="height: 35px; line-height: 50%" label="是否住宿">
|
||||
|
||||
<template #left-icon>
|
||||
<img
|
||||
src= "@/assets/Ui/信息/确认信息/图标/住宿.svg"
|
||||
style="width: 16px; height: 16px;"
|
||||
/>
|
||||
</template>
|
||||
<template #input>
|
||||
<van-radio-group
|
||||
checked-color="#8D2328"
|
||||
|
|
@ -304,6 +483,7 @@
|
|||
bankAddress: '',
|
||||
bankName: '',
|
||||
carNumber: '',
|
||||
openId: '',
|
||||
});
|
||||
|
||||
const tname = ref('');
|
||||
|
|
@ -471,9 +651,11 @@
|
|||
// console.log('submit', {...values,...storedData});
|
||||
// alert({...values,...storedData}.toString())
|
||||
myShowDialog.value = true;
|
||||
console.log("storedData",storedData)
|
||||
myObj = { ...values, ...storedData };
|
||||
//存在加密--直接修改要提交后端的值
|
||||
myObj.pyCard = notLocalTeacherTwo.pyCard;
|
||||
console.log("myObj", myObj)
|
||||
return;
|
||||
// waiTApi.save({...values,...storedData}).then(res => {
|
||||
// console.log(res)
|
||||
|
|
@ -516,11 +698,13 @@
|
|||
</script>
|
||||
<style scoped lang="scss">
|
||||
.father {
|
||||
padding-top: 20px;
|
||||
height: 100vh;
|
||||
background-color: #efefef;
|
||||
padding-top: 20px;
|
||||
background-image: url('@/assets/Ui/信息/劳务信息/背景.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 修改这里 */
|
||||
}
|
||||
|
||||
.mar-auto15 {
|
||||
margin: 15px 15px;
|
||||
}
|
||||
|
|
@ -564,7 +748,6 @@
|
|||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
//background-color: #42b983;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -655,4 +838,16 @@
|
|||
width: 150px;
|
||||
cursor: pointer; /* 鼠标悬停时显示为手型，表示可点击 */
|
||||
}
|
||||
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 2vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<van-button
|
||||
round
|
||||
type="primary"
|
||||
block
|
||||
@click="handleAuth"
|
||||
:loading="loading"
|
||||
>
|
||||
微信授权登录
|
||||
</van-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { showFailToast } from 'vant';
|
||||
import { getCode,getUserInfo } from '@/api';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
state: '',
|
||||
loading: false,
|
||||
userInfo: {
|
||||
city:'',
|
||||
country: '',
|
||||
headimgurl: '',
|
||||
nickname: '' ,
|
||||
openid: '',
|
||||
privilege: [],
|
||||
province: '',
|
||||
sex: '',
|
||||
unionid: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleAuth();
|
||||
},
|
||||
methods: {
|
||||
|
||||
async handleAuth(){
|
||||
this.loading = true;
|
||||
try {
|
||||
// 1. 获取微信授权URL
|
||||
const response = await getCode().catch(err => {
|
||||
throw new Error(`API请求失败: ${err.message}`);
|
||||
});
|
||||
// 2. 处理可能的URL格式问题
|
||||
let authUrl = (response || '').toString().trim();
|
||||
authUrl = authUrl.replace(/\s+/g, ''); // 删除所有空格
|
||||
authUrl = authUrl.replace(/^redirect:/i, ''); // 去除redirect:前缀
|
||||
// 3. 验证URL有效性
|
||||
console.log(authUrl)
|
||||
if (!authUrl || !/^https:\/\/open\.weixin\.qq\.com/.test(authUrl)) {
|
||||
throw new Error(`无效的授权URL: ${authUrl}`);
|
||||
}
|
||||
const local = window.location.href;
|
||||
console.log("local",local)
|
||||
if(local.indexOf("?code") >= 0){
|
||||
this.code = this.getUrlParams(new URL(local)).code;
|
||||
this.state = this.getUrlParams(new URL(local)).state
|
||||
console.log(this.code)
|
||||
if (this.code) {
|
||||
this.getUserInfo(this.code,this.state);
|
||||
this.handleComplete();
|
||||
}
|
||||
}else {
|
||||
// 4. 执行重定向
|
||||
window.location.assign(authUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('授权流程错误:', error);
|
||||
// 5. 用户友好的错误提示
|
||||
showFailToast(error.message || '微信授权失败');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
},
|
||||
// 获取URL参数
|
||||
getUrlParams(url) {
|
||||
const params = new URLSearchParams(url.search)
|
||||
const map = {};
|
||||
for (let param of params.entries()){
|
||||
map[param[0]] = param[1];
|
||||
}
|
||||
console.log(map)
|
||||
return map;
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
async getUserInfo(code,state) {
|
||||
try {
|
||||
this.loading = true;
|
||||
// 这里调用后端接口获取用户信息
|
||||
const response = await getUserInfo(code,state);
|
||||
const userData = response.result.userInfo;
|
||||
//console.log(userData,"data")
|
||||
this.userInfo.city = userData.city;
|
||||
this.userInfo.country = userData.country;
|
||||
this.userInfo.headimgurl = userData.headimgurl;
|
||||
this.userInfo.nickname = userData.nickname;
|
||||
this.userInfo.openid = userData.openid;
|
||||
this.userInfo.privilege = userData.privilege;
|
||||
this.userInfo.province = userData.province;
|
||||
this.userInfo.sex = userData.sex;
|
||||
this.userInfo.unionid = userData.unionid;
|
||||
console.log("userInfo",this.userInfo)
|
||||
|
||||
} catch (error) {
|
||||
showFailToast('获取用户信息失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
// 完成登录
|
||||
handleComplete() {
|
||||
// 这里处理登录完成后的逻辑，比如跳转到首页
|
||||
showFailToast('登录成功');
|
||||
// 假设跳转到首页
|
||||
window.location.href = '/home';
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-container {
|
||||
height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.auth-tip {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
.sub-tip {
|
||||
font-size: 14px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue