856 lines
30 KiB
Vue
856 lines
30 KiB
Vue
<template>
|
||
<div class="main-container">
|
||
<div class="hsd-title">
|
||
<img src="../assets/Ui/log.svg" style="height: 40px;padding-top: 30px;"/>
|
||
</div>
|
||
|
||
<div class="head-cg">
|
||
<img src="@/assets/Ui/信息界面/报名成功.svg" style="margin-top: -20px; margin-bottom: 20px;"/>
|
||
</div>
|
||
<div class="main-content">
|
||
<div class="main-text">
|
||
{{ userInfo.userName }}，您已成功报名!
|
||
<p style="margin-top: 18px;">
|
||
感谢您参与本次
|
||
<em style="font-style: normal; color: white; 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/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)' }"
|
||
: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"
|
||
>
|
||
<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-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>
|
||
<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="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>
|
||
<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.jobTitle"
|
||
v-model="userInfo.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
|
||
v-if="userInfo.office"
|
||
v-model="userInfo.office"
|
||
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
|
||
v-if="userInfo.workName"
|
||
v-model="userInfo.workName"
|
||
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
|
||
v-if="userInfo.workPhone"
|
||
v-model="userInfo.workPhone"
|
||
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"
|
||
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>
|
||
<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
|
||
v-if="userInfo.bankAddress"
|
||
v-model="userInfo.bankAddress"
|
||
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
|
||
v-if="userInfo.bankName"
|
||
v-model="userInfo.bankName"
|
||
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
|
||
v-if="userInfo.carStatus === 1"
|
||
v-model="userInfo.carNumber"
|
||
name="carNumber"
|
||
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"
|
||
: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>
|
||
<template #left-icon>
|
||
<img src= "../assets/Ui/信息/确认信息/图标/住宿.svg"
|
||
style="width: 16px; height: 16px;"/>
|
||
</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"
|
||
>
|
||
<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%"
|
||
readonly
|
||
v-model="userInfo.teacherId"
|
||
name="teacherId"
|
||
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%"
|
||
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>
|
||
</van-dialog>
|
||
<p style="color: white;">个人信息</p>
|
||
</van-col>
|
||
|
||
<van-col span="6" v-if="showIcon.show1">
|
||
<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/Ui/地图.png" style="width: 100%; height: 100%" alt="师大地图" />
|
||
</div>
|
||
</div>
|
||
<p style="color: white;">师大地图</p>
|
||
</van-col>
|
||
|
||
<!-- <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> -->
|
||
<!-- <div class="card-pai">黑A·35648</div>-->
|
||
<!-- <div class="card-pai">{{ carNum() }}</div>
|
||
<div class="card-tishi">该车辆为评卷教师车辆，已向学校报备，请放行！</div>
|
||
</div>
|
||
<p style="color: white;">通行证</p>
|
||
</van-col> -->
|
||
|
||
<van-col span="6" v-if="showIcon.show3">
|
||
<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"
|
||
:show-cancel-button="false"
|
||
v-model:show="show3"
|
||
:style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
|
||
>
|
||
<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 style="color: white;">所属分组</p>
|
||
</van-col>
|
||
<van-col span="6" v-if="showIcon.show4">
|
||
<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"
|
||
:show-cancel-button="false"
|
||
v-model:show="show4"
|
||
:style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
|
||
>
|
||
<span class="dialog-close-content" @click="show4 = false">×</span>
|
||
<div class="grop-by">
|
||
宿舍分配
|
||
<p v-if="!dormitory">暂时未分配</p>
|
||
<p v-else>{{ dormitory }}</p>
|
||
</div>
|
||
</van-dialog>
|
||
<p style="color: white;">宿舍</p>
|
||
</van-col>
|
||
<van-col span="6" v-if="showIcon.show5">
|
||
<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"
|
||
:show-cancel-button="false"
|
||
v-model:show="show5"
|
||
:style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
|
||
>
|
||
<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 style="color: white;">评卷地点</p>
|
||
</van-col>
|
||
|
||
<!-- <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> -->
|
||
<!-- <em class="em-next"></em>-->
|
||
<!-- </div>
|
||
<p style="color: white;">校园生活</p>
|
||
</van-col> -->
|
||
|
||
<van-col span="6" v-if="showIcon.show7">
|
||
<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/Ui/致谢.png" style="width: 100%; height: 100%" />
|
||
</div>
|
||
</div>
|
||
|
||
<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="">-->
|
||
<!-- <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>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import { useUserStore } from '@/store';
|
||
import { getUser, getGroupName, getDormitoryName } 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');
|
||
const showIdentityId = ref(false);
|
||
const showphone = ref(false);
|
||
const showpyCard = ref(false);
|
||
|
||
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 dormitory = 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: '', // 饭卡
|
||
dormitoryId: '',
|
||
identityIdFull:'',
|
||
phoneFull:'',
|
||
pyCardFull:'',
|
||
identityIdMasked:'',
|
||
phoneMasked:'',
|
||
pyCardMasked:'',
|
||
|
||
});
|
||
|
||
const showGroup = () => {
|
||
show3.value = true;
|
||
getGroupName(userInfo.groupId).then(
|
||
(res) => {
|
||
group.value = res.result;
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
},
|
||
);
|
||
};
|
||
const showDormitory = () => {
|
||
show4.value = true;
|
||
getDormitoryName(userInfo.dormitoryId).then(
|
||
(res) => {
|
||
dormitory.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 更新属性
|
||
|
||
// 保存完整的用户信息
|
||
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.phone = userInfo.phoneMasked;
|
||
if(userInfo.identityIdFull != '' && userInfo.pyCardFull != ''){
|
||
userInfo.identityId = userInfo.identityIdMasked;
|
||
userInfo.pyCard = userInfo.pyCardMasked;
|
||
}
|
||
console.log("userInfo.phone",userInfo.phone);
|
||
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; // 显示完整身份证号
|
||
}
|
||
};
|
||
|
||
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/Ui/信息/个人信息/背景.svg') no-repeat;
|
||
background-size: cover;
|
||
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;
|
||
// }
|
||
}
|
||
|
||
.head-cg {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 100px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 90%;
|
||
margin-top: 5vh;
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
margin-top: 30px;
|
||
width: 100vw;
|
||
height: 10vh;
|
||
text-align: center;
|
||
//border: 1px solid orange;
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 40px;
|
||
}
|
||
|
||
.main-icon {
|
||
width: 97vw;
|
||
height: 20vh;
|
||
text-align: center;
|
||
margin-top: 120px;
|
||
|
||
|
||
.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: bold;
|
||
color: #949494;
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
/* 地图、通行证等弹窗样式 */
|
||
.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%;
|
||
}
|
||
}
|
||
.icon {
|
||
font-size: 24px;
|
||
color: #666;
|
||
margin-right: -20px;
|
||
}
|
||
|
||
</style>
|