menduner/src/views/recruit/personal/PersonalCenter/resume/online/components/basicInfo.vue

<template>
  <div class="resume-box mb-3 elevation-2" id="basicInfo">
    <div class="resume-header">
      <div class="resume-title">{{ $t('resume.basicInfo') }}</div>
      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ $t('common.edit') }}</v-btn>
    </div>
    <div class="d-flex align-start mt-5">
      <!-- 头像 -->
      <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
        <v-badge
          v-if="baseInfo?.sex === '1' || baseInfo?.sex === '2'"
          bordered 
          :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-img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" width="130" height="130" style="border-radius: 6px;"></v-img>
          <div v-show="showIcon" @click="openFileInput" class="mdi mdi-camera-outline camera">
            <input
              type="file"
              ref="fileInput"
              accept="image/png, image/jpg, image/jpeg"
              style="display: none;"
              @change="handleUploadFile"
            />
          </div>
        </v-badge>
        <div v-else style="width: 130px; height: 130px;">
          <v-img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" width="130" height="130" style="border-radius: 6px;"></v-img>
          <div v-show="showIcon" @click="openFileInput" class="mdi mdi-camera-outline camera">
            <input
              type="file"
              ref="fileInput"
              accept="image/png, image/jpg, image/jpeg"
              style="display: none;"
              @change="handleUploadFile"
            />
          </div>
        </div>
      </div>
      <!-- 基础信息 -->
      <div style="flex: 1;" class="mr-8">
        <!-- 编辑 -->
        <div v-if="isEdit" class="ml-5">
          <CtForm ref="CtFormRef" :items="items" style="width: 100%;">
            <template v-slot:phone>
              <v-btn variant="text" class="ml-2" color="primary">{{ $t('common.change') }}</v-btn>
            </template>
          </CtForm>
          <div class="text-end">
            <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
            <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
          </div>
        </div>
        <!-- 展示 -->
        <div v-else>
          <span class="ml-50" style="font-size: 20px; font-weight: 600;color: var(--color-666);">
            {{ baseInfo?.name || userInfo?.phone }}
            <!-- <span v-if="baseInfo?.foreignName">（英文名：{{ baseInfo?.foreignName }}）</span> -->
          </span>
          <div class="mt-3 d-flex">
            <div class="listBox ml-50">
              <div>
                <span class="mdi mdi-map-marker-outline"></span>
                <span>{{ baseInfo?.areaName || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-phone-outline"></span>
                <span>{{ baseInfo?.phone || userInfo?.phone || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-email-outline"></span>
                <span>{{ baseInfo?.email || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-calendar-blank-outline"></span>
                <span>{{ baseInfo?.expTypeText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-school-outline"></span>
                <span>{{ baseInfo?.eduTypeText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-tag-outline"></span>
                <span>{{ baseInfo?.jobStatusText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-cake-variant-outline"></span>
                <span>{{ baseInfo?.birthdayText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-home-map-marker"></span>
                <span>{{ baseInfo?.regName || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-account-heart"></span>
                <span>{{ baseInfo?.maritalText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span>{{ $t('resume.firstWorkTime') }}：</span>
                <span>{{ baseInfo?.firstWorkTimeText || $t('common.currentlyUnavailable') }}</span>
              </div>
            </div>
          </div>
          <!-- 个人画像 -->
          <div class="mt-4 ml-50">
            <portrait></portrait>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <Loading :visible="overlay"></Loading>
  <!-- 图片裁剪 -->
  <ImgCropper :visible="isShowCopper" :image="selectPic" :cropBoxResizable="true" @submit="handleHideCopper" :aspectRatio="1 / 1" @close="isShowCopper = false, selectPic = ''"></ImgCropper>
</template>

<script setup>
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import { getDict } from '@/hooks/web/useDictionaries'
import { updatePersonAvatar, saveResumeBasicInfo } from '@/api/recruit/personal/resume'
import { useUserStore } from '@/store/user'
import { uploadFile } from '@/api/common'
import { getUserAvatar } from '@/utils/avatar'
import { useI18n } from '@/hooks/web/useI18n'
import portrait from './portrait.vue'
import { checkEmail } from '@/utils/validate'
import { ref } from 'vue'
defineOptions({name: 'resume-components-basicInfo'})
const emit = defineEmits(['complete'])

const { t } = useI18n()
const userStore = useUserStore()
const CtFormRef = ref()
const isEdit = ref(false)
const showIcon = ref(false)
let completeStatus = false
const overlay = ref(false) // 加载中
let baseInfo = ref({})
let userInfo = ref({})
const getBasicInfo = () => {
  const key = localStorage.getItem('baseInfo')
  if (!key || !Object.keys(key).length) return
  baseInfo.value = JSON.parse(key) // 人才信息
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  if (baseInfo.value && Object.keys(baseInfo.value).length) {
    completeStatus = true
    emit('complete', { status: completeStatus, id: 'basicInfo' })
  }
}
getBasicInfo()

// 选择文件
const fileInput = ref()
const clicked = ref(false)
const openFileInput = () => {
  if (clicked.value) return
  clicked.value = true
  fileInput.value.click()
  clicked.value = false
}

// 上传头像
const selectPic = ref('')
const isShowCopper = ref(false)
const accept = ['jpg', 'png', 'jpeg']
const handleUploadFile = async (e) => {
  const file = e.target.files[0]
  const fileType = file.name.split('.')[1]
  if (!accept.includes(fileType)) return Snackbar.warning('请上传图片格式')
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    selectPic.value = String(reader.result)
    isShowCopper.value = true
  }
}

// 图片裁剪
const handleHideCopper = (data) => {
  isShowCopper.value = false
  if (data) {
    const { file } = data
    if (!file) return
    const formData = new FormData()
    formData.append('file', file)
    formData.append('path', 'img')
    overlay.value = true
    uploadFile(formData).then(async ({data}) => {
      if (!data) return
      await updatePersonAvatar(data)
      setTimeout(async () => {
        await userStore.getUserBaseInfos(baseInfo.value.userId)
        getBasicInfo()
        overlay.value = false
        Snackbar.success(t('common.uploadSucMsg'))
      }, 1000)
    }).catch(err => {
      overlay.value = false
    })
  }
}

const items = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: null,
      default: null,
      label: '中文名 *',
      col: 6,
      outlined: true,
      rules: [
        value => {
          if (value) return true
          return '请输入您的中文名'
        },
        value => {
          var regex = /^[\u4e00-\u9fa5]+$/
          if (regex.test(value)) return true
          return '请输入正确的中文名'
        }
      ]
    },
    // {
    //   type: 'text',
    //   key: 'foreignName',
    //   value: null,
    //   label: '英文名',
    //   col: 6,
    //   outlined: true,
    //   clearable: true,
    //   rules: [
    //     value => {
    //       if (!value) return true
    //       var regex = /^[A-Za-z]+(?:\s[A-Za-z]+)?$/
    //       if (regex.test(value)) return true
    //       return '请输入正确的英文名'
    //     }
    //   ]
    // },
    {
      type: 'ifRadio',
      key: 'sex',
      value: '1', // '1' ? '男' : '女'
      default: 0,
      label: '性别 *',
      col: 6,
      width: 70,
      dictTypeName: 'menduner_sex',
      items: [],
    },
    {
      type: 'phoneNumber',
      key: 'phone',
      value: userInfo?.value?.phone || '',
      default: null,
      label: '电话号码 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请填写联系手机号']
    },
    {
      type: 'datePicker',
      mode: 'date',
      labelWidth: 110,
      key: 'birthday',
      value: '2000-01-01',
      defaultValue: new Date(2000, 1, 1),
      label: '出生日期 *',
      disabledFutureDates: true,
      col: 6,
      format: 'YYYY/MM/DD',
      flexStyle: 'mb-7',
      outlined: true,
      rules: [v => !!v || '请选择出生日期']
    },
    {
      type: 'datePicker',
      mode: 'month',
      key: 'firstWorkTime',
      value: '2000-01',
      disabledFutureDates: true,
      defaultValue: new Date(2000, 1),
      format: 'YYYY/MM',
      labelWidth: 110,
      flexStyle: 'mb-7',
      label: '首次工作时间',
      col: 6,
      outlined: true
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '常用邮箱 *',
      col: 6,
      outlined: true,
      rules: [
        value => {
          if (value) return true
          return '请输入联系邮箱'
        },
        value => {
          if (value && !checkEmail(value)) return '请输入正确的电子邮箱'
          return true
        }
      ]
    },
    {
      type: 'autocomplete',
      key: 'expType',
      value: null,
      default: null,
      label: '工作年限 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_exp_type',
      rules: [v => !!v || '请选择工作年限'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'eduType',
      value: null,
      default: null,
      label: '最高学历 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_education_type',
      rules: [v => !!v || '请选择最高学历'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'jobType',
      value: null,
      default: null,
      label: '求职类型 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_job_type',
      rules: [v => !!v || '请选择求职类型'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'jobStatus',
      value: null,
      default: null,
      label: '求职状态 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_job_seek_status',
      rules: [v => !!v || '请选择求职状态'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'maritalStatus',
      value: null,
      default: null,
      label: '婚姻状况',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_marital_status',
      items: []
    },
    {
      type: 'cascade',
      key: 'areaId',
      value: null,
      default: null,
      label: '所在城市',
      itemText: 'name',
      itemValue: 'id',
      required: true,
      checkStrictly: true,
      clearable: false,
      col: 6,
      items: [],
    },
    {
      type: 'cascade',
      key: 'regId',
      value: null,
      default: null,
      label: '户籍地',
      itemText: 'name',
      itemValue: 'id',
      checkStrictly: true,
      required: false,
      clearable: true,
      col: 6,
      items: [],
    },
    
  ]
})

// 保存-基础信息
const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  items.value.options.forEach(e => {
    obj[e.key] = e.value
  })
  if (!obj.sex) return Snackbar.warning('请先选择您的性别')
  if (!obj.birthday) return Snackbar.warning('请选择您的出生日期')
  await saveResumeBasicInfo(obj)
  Snackbar.success(t('common.saveMsg'))
  isEdit.value = false
  await userStore.getUserBaseInfos(baseInfo.value.userId || null)
  getBasicInfo()
}

items.value.options.forEach(async (e, index) => {
  if ((index + 2) % 2 === 0) e.flexStyle = 'mr-3'
  if (e.dictTypeName) {
    const { data } = await getDict(e.dictTypeName)
    e.items = data
  }
  const infoExist = baseInfo.value && Object.keys(baseInfo.value).length
  if (infoExist && baseInfo.value[e.key]) e.value = baseInfo.value[e.key]
  if (e.value === undefined || e.value === null || e.value === '') completeStatus = false
})
getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
  data = data?.length && data || []
  if (!data?.length) return console.error('areaTreeData获取失败！')
  const chinaTreeData = data
  if (!chinaTreeData?.length) return console.error('chinaTreeData获取失败！')
  const workAreaProvince = items.value.options.find(e => e.key === 'areaId')
  const regAreaProvince = items.value.options.find(e => e.key === 'regId')
  if (workAreaProvince?.items) workAreaProvince.items = chinaTreeData
  if (regAreaProvince?.items) regAreaProvince.items = chinaTreeData
})
</script>

<style lang="scss" scoped>
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.ml-50 {
  margin-left: 50px;
}
.avatarsBox {
  height: 150px;
  width: 120px;
  position: relative;
  cursor: pointer;
  margin: 0 32px;
  .camera {
    color: #fff;
    font-size: 42px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.listBox {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置容器宽度 */
  overflow: hidden;
  color: var(--color-666);
  div {
    width: 50%;
    margin-bottom: 10px;
    span {
      height: 32px;
      line-height: 32px;
    }
    .mdi {
      font-size: 22px;
      margin-right: 8px;
    }
  }
}
</style>