CEES-H5-New/src/views/mainPage.vue

754 lines
24 KiB
Vue
Raw Normal View History

2025-03-19 13:15:34 +08:00
<template>
<div class="main-container">
<div class="hsd-title">
<img src="@/assets/orangeUi/logo.svg" />
</div>
<div class="head-cg">
<img src="@/assets/orangeUi/cg.svg" />
</div>
<div class="main-content">
<div class="main-text">
2025-03-19 14:27:03 +08:00
{{ userInfo.userName }}您已成功报名
<p>
感谢您参与本次
2025-03-19 13:15:34 +08:00
<em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作
</p>
</div>
</div>
<div class="main-icon">
<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="" />
<van-dialog
title="个人信息"
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
:show-confirm-button="false"
v-model:show="show0"
>
<div class="tishi">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.userName"
v-model="userInfo.userName"
name="userName"
label="姓名"
type="text"
/>
<van-field
readonly
style="height: 35px; line-height: 100%"
v-if="userInfo.identityId"
v-model="userInfo.identityId"
name="userCardId"
label="身份证号"
:type="showIdentityId ? 'text' : 'text'"
>
<template #right-icon>
<van-icon class="icon" :name="showIdentityId ? 'eye-o' : 'closed-eye'" @click="toggleIdentityId"/>
</template>
</van-field>
2025-03-19 13:15:34 +08:00
<!-- <van-field-->
<!-- style="height: 35px; line-height: 100%"-->
<!-- v-model="user.sex"-->
<!-- readonly-->
<!-- name="picker"-->
<!-- label="性别"-->
<!-- />-->
<!-- <van-field-->
<!-- style="height: 35px; line-height: 100%"-->
<!-- readonly-->
<!-- v-model="user.age"-->
<!-- name="age"-->
<!-- label="年龄"-->
<!-- type="text"-->
<!-- />-->
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.phone"
v-model="userInfo.phone"
name="phone"
label="手机号"
type="text"
>
<template #right-icon>
<van-icon class="icon" :name="showphone ? 'eye-o' : 'closed-eye'" @click="togglephone"/>
</template>
</van-field>
2025-03-19 13:15:34 +08:00
<van-field
style="height: 35px; line-height: 100%"
v-if="userInfo.jobTitle"
v-model="userInfo.jobTitle"
readonly
name="picker"
label="职称"
/>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.office"
v-model="userInfo.office"
name="office"
label="职务"
type="text"
/>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.workName"
v-model="userInfo.workName"
name="workName"
label="单位名称"
type="text"
/>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.workPhone"
v-model="userInfo.workPhone"
name="workPhoen"
label="单位电话"
type="text"
/>
<van-field
style="height: 35px; line-height: 100%"
v-if="userInfo.pyCard"
readonly
v-model="userInfo.pyCard"
name="pyCard"
label="银行卡号"
type="text"
>
<template #right-icon>
<van-icon class="icon" :name="showpyCard ? 'eye-o' : 'closed-eye'" @click="togglepyCard"/>
</template>
</van-field>
2025-03-19 13:15:34 +08:00
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.bankAddress"
v-model="userInfo.bankAddress"
name="bankAddress"
label="开户所在地"
type="text"
/>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.bankName"
v-model="userInfo.bankName"
name="bankName"
label="开户行"
type="text"
/>
<van-field
style="height: 35px; line-height: 100%"
readonly
v-if="userInfo.carStatus === 1"
v-model="userInfo.carNumber"
name="carNumber"
label="车牌号"
type="text"
height="40px"
/>
<van-field
name="dormitoryStatus"
v-if="userInfo.dormitoryStatus === 1"
:readonly="true"
style="height: 35px; line-height: 50%"
label="是否住宿"
>
<template #input>
<van-radio-group
checked-color="#8D2328"
style="height: 35px; line-height: 50%"
v-model="userInfo.dormitoryStatus"
direction="horizontal"
>
<!-- <van-radio name="1"></van-radio>-->
<!-- <van-radio name="0"></van-radio>-->
{{ userInfo.dormitoryStatus === 1 ? '是' : '否' }}
</van-radio-group>
</template>
</van-field>
<van-field
v-if="userInfo.studentId"
style="height: 35px; line-height: 100%"
readonly
v-model="userInfo.studentId"
name="studentId"
label="学号"
type="text"
height="40px"
/>
<van-field
v-if="userInfo.teacherId"
style="height: 35px; line-height: 100%"
readonly
v-model="userInfo.teacherId"
name="teacherId"
label="工号"
type="text"
height="40px"
/>
<van-field
v-if="userInfo.mealCard"
style="height: 35px; line-height: 100%"
readonly
v-model="userInfo.mealCard"
name="teacherId"
label="饭卡"
type="text"
height="40px"
/>
</van-cell-group>
</van-form>
</div>
<span class="dialog-close-content" @click="show0 = false, showIdentityId = false, showphone = false , showpyCard =false ">×</span>
2025-03-19 13:15:34 +08:00
</van-dialog>
<p>我的信息</p>
</van-col>
<van-col span="6" v-if="showIcon.show1">
<img @click="show1 = true" src="../assets/imgs/ditu.svg" alt="" />
<div class="ditu-img" v-if="show1">
<span @click="show1 = false"> 关闭&ensp; </span>
<div class="card-img">
<img src="@/assets/orangeUi/ditu.jpg" style="width: 100%; height: 100%" alt="师大地图" />
</div>
</div>
<p>师大地图</p>
</van-col>
<van-col span="6" v-if="showIcon.show2">
<img @click="show2 = true" src="@/assets/imgs/txz.svg" alt="" />
2025-04-24 19:32:41 +08:00
<div class="txz-img2" v-if="show2">
2025-03-19 13:15:34 +08:00
<span @click="show2 = false"> 关闭&ensp; </span>
<!-- <div class="card-pai">黑A·35648</div>-->
<div class="card-pai">{{ carNum() }}</div>
<div class="card-tishi">该车辆为评卷教师车辆已向学校报备请放行</div>
</div>
<p>通行证</p>
</van-col>
<van-col span="6" v-if="showIcon.show3">
<img @click="showGroup" src="@/assets/imgs/fenzu.svg" alt="" />
<van-dialog
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
:show-confirm-button="false"
:show-cancel-button="false"
v-model:show="show3"
>
<span class="dialog-close-content" @click="show3 = false">×</span>
<div class="grop-by">
分组信息
<p v-if="!group">暂时未分组</p>
<p v-else>{{ group }}</p>
</div>
</van-dialog>
<p>所属分组</p>
</van-col>
<van-col span="6" v-if="showIcon.show4">
2025-04-24 19:32:41 +08:00
<img @click="showDormitory" src="@/assets/imgs/sushi.svg" alt="" />
2025-03-19 13:15:34 +08:00
<van-dialog
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
:show-confirm-button="false"
:show-cancel-button="false"
v-model:show="show4"
>
<span class="dialog-close-content" @click="show4 = false">×</span>
<div class="grop-by">
宿舍分配
2025-04-24 19:32:41 +08:00
<p v-if="!dormitory">暂时未分配</p>
<p v-else>{{ dormitory }}</p>
2025-03-19 13:15:34 +08:00
</div>
</van-dialog>
<p>宿舍</p>
</van-col>
<van-col span="6" v-if="showIcon.show5">
<img @click="show5 = true" src="@/assets/imgs/didian.svg" alt="" />
<van-dialog
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
:show-confirm-button="false"
:show-cancel-button="false"
v-model:show="show5"
>
<div class="grop-by">
评卷地点信息
<p>暂时未发布</p>
<!-- <p v-if="!group">暂时未发布</p>-->
<!-- <p v-else>{{ group }}</p>-->
</div>
<!-- <img src="@/assets/img/dt.jpg"/>-->
<span class="dialog-close-content" @click="show5 = false">×</span>
</van-dialog>
<p>评卷地点</p>
</van-col>
<van-col span="6">
<img @click="show6 = true" src="@/assets/imgs/xysh.svg" alt="" />
<div class="xysh-img" :class="handoffValue" v-if="show6" @click="toggleShow">
<span @click="show6 = false"> 关闭&ensp; </span>
<!-- <em class="em-next"></em>-->
</div>
<p>校园生活</p>
</van-col>
<van-col span="6" v-if="showIcon.show7">
<img @click="show7 = true" src="../assets/imgs/zhixie.svg" alt="" />
<div class="zhixie-img" v-if="show7">
<span @click="show7 = false"> 关闭&ensp; </span>
<div class="card-img">
<img src="@/assets/orangeUi/zhixie.jpg" style="width: 100%; height: 100%" />
</div>
</div>
<p>致谢</p>
</van-col>
<!-- <van-col span="6" v-if="showIcon.show8">-->
<!-- <img @click="show8 = true" src="@/assets/imgs/zz.svg" alt="">-->
<!-- <van-dialog-->
<!-- style="height: 80%;"-->
<!-- :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"-->
<!-- :show-confirm-button="false"-->
<!-- cancel-button-text="长按图片保存"-->
<!-- cancel-button-color="#e34032"-->
<!-- v-model:show="show8" show-cancel-button>-->
<!-- <img src="@/assets/img/ryzs.png"/>-->
<!-- <span class="dialog-close-content" @click="show8 = false">×</span>-->
<!-- </van-dialog>-->
<!-- <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">
import { onMounted, reactive, ref } from 'vue';
import { useUserStore } from '@/store';
2025-04-24 19:32:41 +08:00
import { getUser, getGroupName, getDormitoryName } from '@/api';
2025-03-19 13:15:34 +08:00
const store = useUserStore();
const show0 = ref(false);
const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const show4 = ref(false);
const show5 = ref(false);
const show6 = ref(false);
const show7 = ref(false);
const show8 = ref(false);
const showDitu = ref(false);
const handoff = ref(false);
const handoffValue = ref('xysh-img1');
const showIdentityId = ref(false);
const showphone = ref(false);
const showpyCard = ref(false);
2025-03-19 13:15:34 +08:00
function toggleShow() {
if (handoff.value) {
handoffValue.value = 'xysh-img2';
handoff.value = false;
} else {
handoffValue.value = 'xysh-img1';
handoff.value = true;
}
}
const user = store.LoginUser;
/*
* 1. 获取用户信息
* 2. 获取用户分组信息
* 3. 获取用户宿舍信息
* 4. 获取用户评卷地点信息
* 5. 获取用户校园生活信息
* 6. 获取用户致谢信息
* 7. 获取用户证书信息
* */
const group = ref('');
2025-04-24 19:32:41 +08:00
const dormitory = ref('');
2025-03-19 13:15:34 +08:00
const showIcon = reactive({
show0: false,
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
show7: false,
show8: false,
});
let userInfo = reactive({
userName: '', // 用户名
majorId: 0, // 专业ID
phone: '', // 手机号
studentId: '', // 学号
groupId: 0, // 分组ID
teacherId: '', // 工号
jobTitle: '', // 职称
identityId: '', // 身份证号
office: '', // 职务
workName: '', // 单位名称
workPhone: '', // 单位电话
pyCard: '', // 银行卡号
bankAddress: '', // 开户所在地
bankName: '', // 开户行
carNumber: '', // 车牌号
dormitoryStatus: 0, // 是否住宿10
mealCard: '', // 饭卡
2025-04-24 19:32:41 +08:00
dormitoryId: '',
identityIdFull:'',
phoneFull:'',
pyCardFull:'',
identityIdMasked:'',
phoneMasked:'',
pyCardMasked:'',
2025-03-19 13:15:34 +08:00
});
const showGroup = () => {
show3.value = true;
getGroupName(userInfo.groupId).then(
(res) => {
group.value = res.result;
},
(err) => {
console.log(err);
},
);
};
2025-04-24 19:32:41 +08:00
const showDormitory = () => {
show4.value = true;
getDormitoryName(userInfo.dormitoryId).then(
(res) => {
dormitory.value = res.result;
},
(err) => {
console.log(err);
},
);
};
2025-03-19 13:15:34 +08:00
const carNum = () => {
let carNum = userInfo.carNumber;
if (carNum) {
var s = carNum.substring(0, 2);
var s1 = carNum.substring(2);
return s + '·' + s1;
} else {
return '暂没有车牌号';
}
};
// 页面加载时获取用户信息
onMounted(() => {
getUser(store.getUserId).then(
(res) => {
console.log('获取到的用户信息', res);
Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性
// 保存完整的用户信息
userInfo.identityIdFull = userInfo.identityId; // 完整身份证号
userInfo.phoneFull = userInfo.phone; // 完整手机号
userInfo.pyCardFull = userInfo.pyCard; // 完整银行卡号
// 隐藏敏感信息
userInfo.identityIdMasked = userInfo.identityId.substring(0, 5) + '****' + userInfo.identityId.substring(13, 18);
userInfo.phoneMasked = userInfo.phone.substring(0, 3) + '****' + userInfo.phone.substring(7, 11);
userInfo.pyCardMasked = userInfo.pyCard.substring(0, 4) + '***********' + userInfo.pyCard.substring(15, 19);
//设置初始为隐藏
userInfo.identityId = userInfo.identityIdMasked;
userInfo.phone = userInfo.phoneMasked;
userInfo.pyCard = userInfo.pyCardMasked;
console.log("userInfo.phone",userInfo.phone);
2025-03-19 13:15:34 +08:00
store.setMajorId(store.LoginUser.majorId);
Object.assign(showIcon, res.result);
},
(err) => {
console.log(err);
},
);
});
function getUserInfo(majorId: number) {
let majorName = '';
majors.forEach((item) => {
if (item.value === majorId) {
majorName = item.name;
}
});
return majorName;
}
// 切换显示和隐藏身份证号
const toggleIdentityId = () => {
showIdentityId.value = !showIdentityId.value;
if(showIdentityId.value){
userInfo.identityId = userInfo.identityIdFull; // 显示完整身份证号
}else{
userInfo.identityId = userInfo.identityIdMasked; // 显示完整身份证号
}
};
// 切换显示和隐藏身份证号
const togglephone = () => {
showphone.value = !showphone.value;
if(showphone.value){
userInfo.phone = userInfo.phoneFull; // 显示完整身份证号
}else{
userInfo.phone = userInfo.phoneMasked; // 显示完整身份证号
}
};
// 切换显示和隐藏身份证号
const togglepyCard = () => {
showpyCard.value = !showpyCard.value;
if(showpyCard.value){
userInfo.pyCard = userInfo.pyCardFull; // 显示完整身份证号
}else{
userInfo.pyCard = userInfo.pyCardMasked; // 显示完整身份证号
}
};
2025-03-19 13:15:34 +08:00
const majors = [
{
id: 1,
name: '语文',
value: 1,
},
{
id: 2,
name: '地理',
value: 4,
},
{
id: 3,
name: '历史',
value: 7,
},
{
id: 4,
name: '政治',
value: 8,
},
];
</script>
<style scoped lang="scss">
.main-container {
height: 100vh;
width: 100vw;
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
2025-03-19 14:27:03 +08:00
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
.hsd-title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px; // 调整顶部间距
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
img {
width: 65%;
margin-top: 8vh;
2025-03-19 13:15:34 +08:00
}
}
2025-03-19 14:27:03 +08:00
.head-cg {
2025-03-19 13:15:34 +08:00
width: 100%;
2025-03-19 14:27:03 +08:00
display: flex;
justify-content: center;
align-items: center;
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
img {
width: 90%;
margin-top: 5vh;
2025-03-19 13:15:34 +08:00
}
}
2025-03-19 14:27:03 +08:00
.main-content {
//margin-top: 10vh;
2025-03-19 13:15:34 +08:00
width: 100vw;
2025-03-19 14:27:03 +08:00
height: 10vh;
text-align: center;
//border: 1px solid orange;
color: black;
font-weight: 600;
}
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
.main-icon {
width: 97vw;
height: 20vh;
text-align: center;
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
//margin-top: 5vh;
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
.main-item {
img {
width: 50%;
margin-top: 15%;
}
p {
margin-top: -5px;
font-size: 0.7rem;
font-weight: 600;
}
2025-03-19 13:15:34 +08:00
}
}
2025-03-19 14:27:03 +08:00
.footer {
2025-03-19 13:15:34 +08:00
width: 100%;
2025-03-19 14:27:03 +08:00
display: flex;
justify-content: center;
align-items: center;
2025-03-19 13:15:34 +08:00
img {
2025-03-19 14:27:03 +08:00
width: 100%;
2025-03-19 13:15:34 +08:00
}
2025-03-19 14:27:03 +08:00
}
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
/* 弹窗样式 */
.dialog-close-content {
position: absolute;
right: 10px;
top: 10px;
font-size: 24px;
2025-04-24 19:32:41 +08:00
font-weight: bold;
2025-03-19 14:27:03 +08:00
color: #949494;
cursor: pointer;
2025-03-19 13:15:34 +08:00
}
2025-04-24 19:32:41 +08:00
.txz-img2 {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
//border: 5px solid red;
background-image: url('@/assets/orangeUi/txz.svg');
background-repeat: no-repeat;
background-size: cover; /* 修改这里 */
z-index: 999;
span {
width: 30vw;
//border: 1px solid red;
font-weight: 700;
color: #262626;
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
}
.card-pai {
position: absolute;
left: 8.5vw;
top: 71vh;
//font-size: 24px;
font-family: 微软雅黑;
text-align: center;
font-weight: 600;
font-size: 35px;
height: 2.5rem;
width: 80%;
opacity: 1;
//color: rgba(141, 35, 40, 0.6);
//color: rgba(255, 255, 255, 0.8);
color: white;
font-weight: 600;
border-radius: 132px;
background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
border: 4px solid rgba(255, 255, 255, 0.7);
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);
}
.card-tishi {
position: absolute;
top: 80vh;
left: 10vw;
text-align: left;
width: 80vw;
font-size: 28px;
color: white;
margin: 0 auto;
text-indent: 34px;
}
}
2025-03-19 13:15:34 +08:00
2025-03-19 14:27:03 +08:00
/* 地图、通行证等弹窗样式 */
.ditu-img,
.txz-img,
.zhixie-img,
.xysh-img {
2025-03-19 13:15:34 +08:00
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: white;
z-index: 999;
2025-03-19 14:27:03 +08:00
display: flex;
justify-content: center;
align-items: center;
2025-03-19 13:15:34 +08:00
span {
position: absolute;
2025-03-19 14:27:03 +08:00
right: 20px;
top: 20px;
font-size: 20px;
2025-03-19 13:15:34 +08:00
font-weight: 700;
color: #262626;
2025-03-19 14:27:03 +08:00
cursor: pointer;
}
img {
max-width: 90%;
max-height: 90%;
2025-03-19 13:15:34 +08:00
}
}
2025-03-19 14:27:03 +08:00
/* 校园生活弹窗样式 */
2025-03-19 13:15:34 +08:00
.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;
}
2025-03-19 13:15:34 +08:00
</style>