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

<template>
  <div>
    <div class="left-top">
      <v-badge 
        bordered 
        offset-x="10" 
        offset-y="50" 
        :color="baseInfo?.sex ? (baseInfo?.sex === '0' ? '#1867c0' : 'error') : 'error'" 
        :icon="baseInfo?.sex ? (baseInfo?.sex === '0' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
        <v-avatar size="x-large" :image="baseInfo.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
      </v-badge>
      <div class="ml-5 content">
        <div class="username">
          <span class="mr-2">{{ baseInfo?.name ?? $t('sys.tourist') }}</span>
          <v-icon class="cursor-pointer" style="width: 80px; height: 22px;">
            <v-img width="80" height="22" src="https://minio.citupro.com/dev/menduner/upgrade.png"></v-img>
          </v-icon>
        </div>
        <div class="userInfo">
          {{ baseInfo?.expTypeText || '暂无' }}<span class="vline"></span>{{ baseInfo?.eduTypeText || '暂无' }}
        </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"></v-select>
        </div>
      </div>
      <div class="otherInfo">
        <div>
          <span>手机号：{{ baseInfo?.phone || '暂无' }}</span>
        </div>
        <div class="my-3">
          <span>用户邮箱：{{ baseInfo?.email || '暂无' }}</span>
        </div>
        <div>
          <span>出生日期：{{ baseInfo?.birthdayText || '暂无' }}</span>
        </div>
        <div class="mt-3">现居地址： {{ baseInfo?.areaText || '暂无' }}</div>
      </div>
      <div class="slider-btn">
        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right" to="/resume">在线简历</v-btn>
      </div>
    </div>

    <div class="left-tabs my-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
        <v-tab :value="1">{{ $t('position.throughCommunication') }}</v-tab>
        <v-tab :value="2">{{ $t('position.delivered') }}</v-tab>
        <v-tab :value="3">{{ $t('position.interview') }}</v-tab>
        <v-tab :value="4">{{ $t('position.interested') }}</v-tab>
        <v-tab :value="5">{{ $t('position.interestedInMe') }}</v-tab>
        <v-tab :value="6">{{ $t('position.haveSeenMe') }}</v-tab>
      </v-tabs>
      <v-divider></v-divider>
      <v-tabs v-if="tab === 4" v-model="secondTab" align-tabs="start" color="primary" bg-color="#fff">
        <v-tab :value="7">职位收藏</v-tab>
        <v-tab :value="8">公司收藏</v-tab>
      </v-tabs>
    </div>
    <div class="left-bottom">
      <PositionItem :tab="tab"></PositionItem>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-center-left'})
import { ref } from 'vue'
import PositionItem from '../components/posiitonItem.vue'

const tab = ref(1)
const secondTab = ref(7)
const selectVal = ref('0')
const items = [
  { label: '离职-随时到岗', value: '0' },
  { label: '在职-暂不考虑', value: '1' },
  { label: '在职-考虑机会', value: '2' },
  { label: '在职-月内到岗', value: '3' }
]

let baseInfo = ref({})
const getBasicInfo = () => {
  baseInfo.value = JSON.parse(localStorage.getItem('baseInfo')) // 人才信息
}
getBasicInfo()

const getPositionList = () => {}
</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: #222;
      height: 24px;
      line-height: 24px;
    }
    .userInfo {
      height: 21px;
      margin-top: 8px;
      color: #666;
      font-size: 14px;
    }
  }
  .otherInfo {
    flex: 1;
    height: 100%;
    margin-left: 50px;
    font-size: 14px;
    font-weight: 500;
    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: #999;
      font-weight: 400;
      margin-left: 20px;
    }
    .edu {
      margin: 12px 0;
    }
  }
  .slider-btn {
    position: relative;
    width: 146px;
    height: 100%;
    overflow: hidden;
    .slider-btn-item {
      position: absolute;
      top: 4px;
      right: -15px;
    }
  }
}
</style>