607 lines
19 KiB
Vue
607 lines
19 KiB
Vue
<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">
|
||
{{ userInfo.userName }}，您已成功报名！
|
||
<p>
|
||
感谢您参与本次
|
||
<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="身份证号"
|
||
/>
|
||
<!-- <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="number"
|
||
/>
|
||
<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="number"
|
||
/>
|
||
|
||
<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">×</span>
|
||
</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"> 关闭 ✕ </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="" />
|
||
<div class="txz-img" v-if="show2">
|
||
<span @click="show2 = false"> 关闭 ✕ </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">
|
||
<img @click="show4 = true" src="@/assets/imgs/sushi.svg" alt="" />
|
||
<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">
|
||
宿舍分配
|
||
<p v-if="!store.LoginUser.dormitory">暂时未分配</p>
|
||
<p v-else>{{ store.LoginUser.dormitory }}</p>
|
||
</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"> 关闭 ✕ </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"> 关闭 ✕ </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';
|
||
import { getUser, getGroupName } from '@/api';
|
||
|
||
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');
|
||
|
||
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('');
|
||
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, // 是否住宿（1：是，0：否）
|
||
mealCard: '', // 饭卡
|
||
});
|
||
|
||
const showGroup = () => {
|
||
show3.value = true;
|
||
getGroupName(userInfo.groupId).then(
|
||
(res) => {
|
||
group.value = res.result;
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
},
|
||
);
|
||
};
|
||
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 更新属性
|
||
// console.log( store.LoginUser.majorId)
|
||
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 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;
|
||
background-size: cover;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.hsd-title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 20px; // 调整顶部间距
|
||
|
||
img {
|
||
width: 65%;
|
||
margin-top: 8vh;
|
||
}
|
||
}
|
||
|
||
.head-cg {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 90%;
|
||
margin-top: 5vh;
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
//margin-top: 10vh;
|
||
width: 100vw;
|
||
height: 10vh;
|
||
text-align: center;
|
||
//border: 1px solid orange;
|
||
color: black;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.main-icon {
|
||
width: 97vw;
|
||
height: 20vh;
|
||
text-align: center;
|
||
|
||
//margin-top: 5vh;
|
||
|
||
.main-item {
|
||
img {
|
||
width: 50%;
|
||
margin-top: 15%;
|
||
}
|
||
|
||
p {
|
||
margin-top: -5px;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.dialog-close-content {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #949494;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 地图、通行证等弹窗样式 */
|
||
.ditu-img,
|
||
.txz-img,
|
||
.zhixie-img,
|
||
.xysh-img {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: white;
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
span {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #262626;
|
||
cursor: pointer;
|
||
}
|
||
|
||
img {
|
||
max-width: 90%;
|
||
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;
|
||
}
|
||
</style>
|