<template>
|
<div>
|
<div class="content-bg">
|
<div class="main-content" style="z-index: 10;">
|
<ReturnBtn></ReturnBtn>
|
|
<el-row>
|
<el-text class="text-title">个人中心</el-text>
|
</el-row>
|
|
<el-card shadow="never" class="mt-4" :style="{ height: contentHeight + 'px'}">
|
<el-row style="height: 100%;">
|
<el-col :span="2">
|
<el-row
|
v-for="(tab,index) in tabList"
|
:key="`tab${index}`"
|
style="height: 50%;width: 100%;border-right: 1px solid #e4e7ed;"
|
justify="center"
|
align="middle"
|
class="cursor-p"
|
@click="activeTab=tab.value"
|
:class="{ 'active-tab': tab.value==activeTab }"
|
>
|
<div>
|
<el-row justify="center">
|
<Icon :icon="tab.iconName" width="24" height="24" :style="{color: tab.value==activeTab?'#0069FF':'#333333'}" />
|
</el-row>
|
<el-row class="mt-1 font-medium">{{ tab.label }}</el-row>
|
</div>
|
</el-row>
|
</el-col>
|
<el-col :span="22">
|
<div v-if="activeTab=='toExam'" class="p-4 px-6">
|
<el-row align="middle">
|
<el-text class="font-medium">姓名：{{ form.name }}</el-text>
|
<el-button text class="ml-2">
|
<Icon icon="ix:pen-filled" width="18" height="18" style="color: black" />
|
</el-button>
|
</el-row>
|
<el-row align="middle">
|
<el-text class="font-medium">性别：{{ form.gender }}</el-text>
|
<el-button text class="ml-2">
|
<Icon icon="ix:pen-filled" width="18" height="18" style="color: black" />
|
</el-button>
|
</el-row>
|
<el-row align="middle">
|
<el-text class="font-medium">手机号：{{ form.mobilePhone }}</el-text>
|
<el-button text class="ml-2">
|
<Icon icon="ix:pen-filled" width="18" height="18" style="color: black" />
|
</el-button>
|
</el-row>
|
<el-row align="middle">
|
<el-text class="font-medium">身份证号：{{ form.idCard }}</el-text>
|
<el-button text class="ml-2">
|
<Icon icon="ix:pen-filled" width="18" height="18" style="color: black" />
|
</el-button>
|
</el-row>
|
<el-row align="middle" class="mt-2">
|
<el-text class="font-medium">身份证正反面：</el-text>
|
</el-row>
|
<el-row>
|
<UploadIdCard v-model="form.idCardFace" :accept="['jpg', 'png']" type="face"></UploadIdCard>
|
<UploadIdCard v-model="form.idCardEmblem" :accept="['jpg', 'png']" type="emblem"></UploadIdCard>
|
</el-row>
|
<el-row align="middle" class="mt-2">
|
<el-text class="font-medium">证书/准考证头像：</el-text>
|
</el-row>
|
<UploadBtn v-model="form.certificateAvatar" listType="picture-card" :accept="['jpg', 'png']" ></UploadBtn>
|
|
<el-row class="mt-5">
|
<el-text>绑定微信：暂未绑定微信</el-text>
|
<el-text tag="ins" class="ml-6 font-medium text-primary">扫码绑定</el-text>
|
</el-row>
|
</div>
|
<div v-else-if="activeTab=='alreadyExam'">
|
<mySignup></mySignup>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import UploadIdCard from '@/views/main/components/UploadIdCard.vue'
|
import { useLoginStore } from '@/stores/login.js'
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
import mySignup from '@/views/main/center/mySignup/index.vue'
|
export default {
|
components: {
|
mySignup,
|
UploadIdCard,
|
},
|
setup() {
|
const { userInfo } = storeToRefs(useSessionStore())
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
return { userInfo, loginDialogVisible }
|
},
|
data() {
|
return {
|
form: {
|
name: '黄婷婷',
|
gender: '女',
|
mobilePhone: '13000000000',
|
idCard: '441481155511116622',
|
idCardFace: [],
|
idCardEmblem: [],
|
certificateAvatar: [],
|
},
|
tabList: [
|
{ label: '个人信息', iconName: 'mdi:layers-triple', value: 'toExam' },
|
{ label: '我的报名', iconName: 'ant-design:file-search-outlined', value: 'alreadyExam' },
|
],
|
activeTab: 'toExam',
|
contentHeight: 580,
|
examList: [],
|
searchKeyword: '',
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
activeTab: {
|
handler: function() {
|
this.getExamList()
|
},
|
immediate: true
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
getExamList() {
|
if (this.activeTab == 'toExam') {
|
this.examList = [
|
|
]
|
} else if (this.activeTab == 'alreadyExam') {
|
this.examList = [
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
{ occupationJob: '职业培训师-二级', batch: '2025年12月职业培训师第一批' },
|
]
|
}
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
.content-bg {
|
height: 240px;
|
background-image: url('@/assets/images/contentBg.png');
|
background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
|
background-size: cover;
|
}
|
.active-tab {
|
background-color: #EEF5FF;
|
border: 1px solid #0069FF !important;
|
color: #0069FF !important;
|
}
|
</style>
|
