企业管理员实名认证页面

src/locales/zh-CN.js

@@ -175,7 +175,7 @@ export default {
       welfareLabel: '福利标签',
       businessInformation: '工商信息',
       enterpriseVideo: '企业视频',
-      recruitmentQRCode: '招聘二维码',
+      recruitmentQRCode: '招聘二维码'
     },
     account: {
       myAccount: '我的账户',

src/views/recruit/enterprise/informationManagement/informationSettings.vue

@@ -2,40 +2,14 @@
 <template>
   <div>
     <v-card class="card-box pa-5" style="min-height: 500px">
-      <div>
-        <v-tabs v-model="tab" @update:model-value="handleTabClick" align-tabs="start" color="primary" bg-color="#fff">
-          <v-tab :value="1">{{ $t('enterprise.infoSetting.basicInfo') }}</v-tab>
-          <v-tab :value="2">{{ $t('enterprise.infoSetting.enterpriseLogo') }}</v-tab>
-          <v-tab :value="3">{{ $t('enterprise.infoSetting.enterpriseAlbum') }}</v-tab>
-          <v-tab :value="4">{{ $t('enterprise.infoSetting.welfareLabel') }}</v-tab>
-          <v-tab :value="5">{{ $t('enterprise.infoSetting.businessInformation') }}</v-tab>
-          <!-- <v-tab :value="5">{{ $t('enterprise.infoSetting.enterpriseVideo') }}</v-tab>
-          <v-tab :value="6">{{ $t('enterprise.infoSetting.recruitmentQRCode') }}</v-tab> -->
-        </v-tabs>
-        <v-window v-model="tab" class="mt-3">
-          <v-window-item :value="1">
-            <basicInfo></basicInfo>
-          </v-window-item>
-          <v-window-item :value="2">
-            <enterpriseLogo></enterpriseLogo>
-          </v-window-item>
-          <v-window-item :value="3">
-            <enterpriseAlbum></enterpriseAlbum>
-          </v-window-item>
-          <v-window-item :value="4">
-            <welfareLabel></welfareLabel>
-          </v-window-item>
-          <v-window-item :value="5">
-            <businessInformation></businessInformation>
-          </v-window-item>
-          <!-- <v-window-item :value="5">
-            <enterpriseVideo></enterpriseVideo>
-          </v-window-item>
-          <v-window-item :value="6">
-            <recruitmentQRCode></recruitmentQRCode>
-          </v-window-item> -->
-        </v-window>
-      </div>
+      <v-tabs v-model="tab" @update:model-value="handleTabClick" align-tabs="start" color="primary" bg-color="#fff">
+        <v-tab v-for="val in tabList" :key="val.value" :value="val.value">{{ val.label }}</v-tab>
+      </v-tabs>
+      <v-window v-model="tab" class="mt-3">
+        <v-window-item :value="val.value" v-for="val in tabList" :key="val.value">
+          <component :is="val.path"></component>
+        </v-window-item>
+      </v-window>
     </v-card>
   </div>
 </template>
@@ -47,14 +21,26 @@ import enterpriseLogo from './informationSettingsComponents/enterpriseLogo.vue'
 import enterpriseAlbum from './informationSettingsComponents/enterpriseAlbum.vue'
 import welfareLabel from './informationSettingsComponents/welfareLabel.vue'
 import businessInformation from './informationSettingsComponents/businessInformation.vue'
-// import enterpriseVideo from './informationSettingsComponents/enterpriseVideo.vue'
-// import recruitmentQRCode from './informationSettingsComponents/recruitmentQRCode.vue'
+import authentication from './informationSettingsComponents/authentication.vue'
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/web/useI18n'
 
-const route = useRoute(); const router = useRouter()
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
 // tab
 const tab = ref(1)
+const tabList = [
+  { label: t('enterprise.infoSetting.basicInfo'), value: 1, path: basicInfo },
+  { label: t('enterprise.infoSetting.enterpriseLogo'), value: 2, path: enterpriseLogo },
+  { label: t('enterprise.infoSetting.enterpriseAlbum'), value: 3, path: enterpriseAlbum },
+  { label: t('enterprise.infoSetting.welfareLabel'), value: 4, path: welfareLabel },
+  { label: t('enterprise.infoSetting.businessInformation'), value: 5, path: businessInformation },
+  { label: t('setting.realNameAuthentication'), value: 6, path: authentication },
+]
+
+
 watch(() => route?.query?.tabKey, (newVal) => { if (newVal) tab.value = newVal - 0 })
 const handleTabClick = () => {
   router.push(`${route.path}?tabKey=${tab.value.toString()}`)

src/views/recruit/enterprise/informationManagement/informationSettingsComponents/authentication.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="authentication" class="ml-3">
+    <div>
+      <v-icon color="primary">mdi-check-circle</v-icon>
+      已通过实名认证
+    </div>
+    <div class="box mt-5">
+      <div>姓名：史迪奇</div>
+      <div class="mt-5">身份证号：4******************8</div>
+    </div>
+    <v-btn color="primary" class="half-button mt-5" @click="authentication = !authentication">解绑</v-btn>
+  </div>
+  <div v-else>
+    <div class="topTip">为了您在平台有更好的操作体验，请进行实名认证</div>
+    <div class="d-flex align-center justify-center flex-column">
+      <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;"></CtForm>
+      <v-btn class="buttons" color="primary" @click="authentication = !authentication">{{ $t('common.submit') }}</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'authentication-page'})
+import { ref } from 'vue'
+
+// 是否已实名
+const authentication = ref(true)
+const CtFormRef = ref()
+
+const formItems = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'name',
+      value: '',
+      label: '真实姓名 *',
+      rules: [v => !!v || '请输入您的真实姓名']
+    },
+    {
+      type: 'text',
+      key: 'idCardNo',
+      value: '',
+      label: '身份证号码 *',
+      rules: [v => !!v || '请输入您的身份证号码']
+    }
+  ]
+})
+</script>
+
+<style scoped lang="scss">
+.topTip {
+  background-color: #fff6ec;
+  color: var(--v-error-base);
+  padding: 12px 20px;
+  margin: 10px 0 40px;
+  font-size: 14px;
+}
+.box {
+  background-color: #f7f8fa;
+  border-radius: 6px;
+  color: var(--color-666);
+  font-size: 14px;
+  padding: 25px;
+}
+</style>

src/views/recruit/enterprise/informationManagement/informationSettingsComponents/basicInfo.vue

@@ -197,6 +197,7 @@ const handleSave = async () => {
   getBaseInfo()
 }
 </script>
+
 <style lang="scss" scoped>
 .topTip {
   background-color: #f7f8fa;