<template>
|
<div>
|
<div class="content-bg">
|
<div class="main-content" style="z-index: 10;">
|
<ReturnBtn></ReturnBtn>
|
|
<el-row class="mt-6">
|
<el-text class="text-title">准考证查询</el-text>
|
</el-row>
|
|
<el-card shadow="never" class="mt-6" :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">
|
<el-row class="p-4 text-primary font-medium" justify="space-between">
|
<span>共 {{ examList.length }} 个准考证</span>
|
<el-form-item class="mb-0">
|
<el-input v-model="searchKeyword" placeholder="搜索关键字">
|
<template #append>
|
<el-button>查询</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-divider class="m-0"></el-divider>
|
<el-scrollbar ref="scrollbarRef" class="p-4" :style="{ height: (contentHeight - 70) + 'px'}" always>
|
<el-card
|
v-for="(exam,index) in examList"
|
:key="`exam${index}`"
|
class="p-4 mb-4"
|
shadow="never"
|
>
|
<el-row justify="space-between" align="middle">
|
<div>
|
<el-row><el-text class="text-lg text-black font-medium">{{ exam.occupationJob }}</el-text></el-row>
|
<el-row class="mt-2">
|
<el-text>{{ exam.batch }}</el-text>
|
</el-row>
|
</div>
|
<div>
|
<el-button text style="background-color: #F0F7FF;">
|
<el-row class="mr-1">
|
<Icon icon="flowbite:eye-solid" width="20" height="20" style="color: #007AFF" />
|
</el-row>
|
<el-row class="text-primary">查看准考证</el-row>
|
</el-button>
|
<el-button text style="background-color: #F0F7FF;">
|
<el-row class="mr-1">
|
<Icon icon="material-symbols:download" width="20" height="20" style="color: #007AFF" />
|
</el-row>
|
<el-row class="text-primary">下载准考证</el-row>
|
</el-button>
|
</div>
|
</el-row>
|
</el-card>
|
<el-row justify="center" v-if="examList.length==0">
|
<el-text>暂无数据~</el-text>
|
</el-row>
|
</el-scrollbar>
|
</el-col>
|
</el-row>
|
|
</el-card>
|
</div>
|
</div>
|
<div class="main-content py-4">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
import { useLoginStore } from '@/stores/login.js'
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
export default {
|
components: {
|
|
},
|
setup() {
|
const { userInfo } = storeToRefs(useSessionStore())
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
return { userInfo, loginDialogVisible }
|
},
|
data() {
|
return {
|
tabList: [
|
{ label: '待考试', iconName: 'gravity-ui:pencil-to-line', value: 'toExam' },
|
{ label: '已考试', iconName: 'ic:round-history', value: 'alreadyExam' },
|
],
|
activeTab: 'toExam',
|
contentHeight: 530,
|
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>
|
