menduner/src/views/recruit/personal/PersonalCenter/dynamic/left.vue

<template>
  <div>
    <div class="left-top">
      <v-badge 
        bordered 
        offset-x="10" 
        offset-y="50" 
        :color="baseInfo?.sex ? (baseInfo?.sex === '1' ? '#1867c0' : 'error') : 'error'" 
        :icon="baseInfo?.sex ? (baseInfo?.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
        <v-avatar size="x-large" :image="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-avatar>
      </v-badge>
      <div class="ml-5 content">
        <div class="username">
          <span class="mr-2">{{ baseInfo?.name || userInfo.phone }}</span>
        </div>
        <div class="userInfo">
          {{ baseInfo?.expTypeText || $t('common.currentlyUnavailable') }}<span class="septal-line"></span>{{ baseInfo?.eduTypeText || $t('common.currentlyUnavailable') }}
        </div>
        <div class="mt-3">
          <v-select 
            v-model="selectVal" 
            :items="items" 
            density="compact" 
            variant="outlined" 
            item-title="label" 
            item-value="value" 
            hide-details 
            color="primary"
            @update:model-value="handleChangeJobStatus"
          ></v-select>
        </div>
      </div>
      <div class="otherInfo">
        <div>
          <span>{{ $t('resume.phoneNumber') }}：{{ baseInfo?.phone || $t('common.currentlyUnavailable') }}</span>
        </div>
        <div class="my-3">
          <span>{{ $t('resume.userEmail') }}：{{ baseInfo?.email || $t('common.currentlyUnavailable') }}</span>
        </div>
        <div>
          <span>{{ $t('resume.dateOfBirth') }}：{{ baseInfo?.birthdayText || $t('common.currentlyUnavailable') }}</span>
        </div>
        <div class="mt-3">{{ $t('resume.currentAddress') }}： {{ baseInfo?.areaName || $t('common.currentlyUnavailable') }}</div>
      </div>
      <div class="slider-btn">
        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right" to="/recruit/personal/resume">{{ $t('resume.onlineResume') }}</v-btn>
      </div>
    </div>

    <div class="left-tabs mt-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff">
        <v-tab v-for="(val, i) in list" :key="i" :value="i">{{ val.title }}</v-tab>
      </v-tabs>
    </div>
    <div :class="['left-bottom', {'mt-3': list[tab].path !== interview && list[tab].path !== interested}]">
      <component :is="list[tab].path"></component>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-center-left'})
import { getDict } from '@/hooks/web/useDictionaries'
import { ref, watch } from 'vue'
import { useUserStore } from '@/store/user'
import { updateJobStatus } from '@/api/recruit/personal/resume'
import { useI18n } from '@/hooks/web/useI18n'
import Snackbar from '@/plugins/snackbar'
// import communication from '../components/communication.vue'
import delivery from '../components/delivery.vue'
import interview from '../components/interview/index.vue'
import interested from '../components/interested.vue'
import seenMe from '../components/seenMe.vue'
import { getUserAvatar } from '@/utils/avatar'

const { t } = useI18n()
const list = [
  // { title: t('position.throughCommunication'), path: communication },
  { title: t('position.delivered'), path: delivery },
  { title: t('position.interview'), path: interview },
  { title: t('position.interested'), path: interested },
  { title: t('position.haveSeenMe'), path: seenMe }
]

const tab = ref(0)

import { useRoute } from 'vue-router'; const route = useRoute()
import { useRouter } from 'vue-router'; const router = useRouter()
watch(() => route.query, (newQuery) => { // newQuery, oldQuery
  if (newQuery?.showInterviewScheduleMore) { // 去掉面试日程参数
    tab.value = 2
    const query = { ...route.query }
    delete query.showInterviewScheduleMore
    const path = route.path
    router.replace({ path, query })
  }
}, { deep: true, immediate: true })

const selectVal = ref('0')
const items = ref([])
const userStore = useUserStore()

// 求职类型字典
getDict('menduner_job_status').then(({ data }) => {
  data = data?.length && data || []
  items.value = data
})

let baseInfo = ref({})
let userInfo = ref({})
const getBasicInfo = () => {
  baseInfo.value = JSON.parse(localStorage.getItem('baseInfo')) // 人才信息
  userInfo.value = JSON.parse(localStorage.getItem('userInfo')) // 人才信息
  selectVal.value = baseInfo?.value?.jobStatus || '0'
}
getBasicInfo()

// 求职类型更换
const handleChangeJobStatus = async () => {
  await updateJobStatus(selectVal.value)
  Snackbar.success('更新成功')
  await userStore.getUserBaseInfos(baseInfo.value.userId)
  getBasicInfo()
}
</script>

<style scoped lang="scss">
.left-top {
  display: flex;
  align-items: center;
  padding: 12px 0 12px 12px;
  height: 144px;
  border-radius: 12px;
  background-color: #fff;
  .content {
    height: 100%;
    .username {
      font-weight: 500;
      font-size: 20px;
      color: var(--color-222);
      height: 24px;
      line-height: 24px;
    }
    .userInfo {
      height: 21px;
      margin-top: 8px;
      color: var(--color-666);
      font-size: 14px;
    }
  }
  .otherInfo {
    flex: 1;
    height: 100%;
    margin-left: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-333);
    text-align: left;
    .salary {
      font-size: 16px;
      font-family: 'kanzhun-Regular';
      font-weight: 500;
      color: var(--v-error-base);
      margin: -1px 0 0 16px;
    }
    .edu-time {
      color: var(--color-999);
      font-weight: 400;
      margin-left: 20px;
    }
    .edu {
      margin: 12px 0;
    }
  }
  .slider-btn {
    position: relative;
    min-width: 188px;
    height: 100%;
    overflow: hidden;
    .slider-btn-item {
      position: absolute;
      top: 4px;
      right: -15px;
    }
  }
}
</style>