YY_MP_REFACTOR/src/pages-mine/personal-card/index.vue

<template>
  <view class="personal-card-page">
    <UserInfoCard
      v-if="personalBusinessCardInfo"
      v-model="personalBusinessCardInfo"
      :disabled="disabled"
      :gender-columns="genderColumns"
      :degree-columns="degreeColumns"
    />

    <PlatformExperienceCard v-if="personalBusinessCardInfo" :data="personalBusinessCardInfo" />

    <ProfessionalSkillCard
      v-if="personalBusinessCardInfo"
      v-model="personalBusinessCardInfo"
      :upload-api="uploadCertificate"
    />

    <view v-if="personalBusinessCardInfo" class="save-section">
      <button class="save-btn" :disabled="saving" @click="handleSave">
        {{ saving ? '保存中...' : '保存' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { onLoad } from '@dcloudio/uni-app'

import { getDictTypeApi } from '@/services/modules/common'
import type { DictItem } from '@/services/modules/common/type'
import {
  getPersonalBusinessCardApi,
  savePersonalBusinessCardApi,
} from '@/services/modules/mine/personalCard/index'
import type {
  PersonalBusinessCardResponse,
  SavePersonalBusinessCardRequest,
} from '@/services/modules/mine/personalCard/type'

import { useUserStore } from '@/stores/modules/user'

import PlatformExperienceCard from './components/PlatformExperienceCard.vue'
import ProfessionalSkillCard from './components/ProfessionalSkillCard.vue'
import UserInfoCard from './components/UserInfoCard.vue'

const userStore = useUserStore()

const currentUserInfo = computed(() => userStore.currentUserInfo)

const personalBusinessCardInfo = ref<PersonalBusinessCardResponse>()

const genderColumns = ref<DictItem[]>([])
const degreeColumns = ref<DictItem[]>([])

onLoad(() => {
  initPage()
})

const disabled = ref(false)

async function initPage() {
  disabled.value = currentUserInfo.value?.faceAuthStatus ?? false
  await Promise.all([getDict(), getPersonalBusinessCardInfo()])
}

async function getPersonalBusinessCardInfo() {
  const userId = currentUserInfo.value?.userId

  if (!userId) return

  const res = await getPersonalBusinessCardApi(userId)
  personalBusinessCardInfo.value = res.data
}

async function getDict() {
  const [genderRes, degreeRes] = await Promise.all([
    getDictTypeApi('gender'),
    getDictTypeApi('user_degree'),
  ])

  genderColumns.value = genderRes?.data ?? []
  degreeColumns.value = degreeRes?.data ?? []
}

async function uploadCertificate(filePath: string): Promise<string> {
  return filePath
}

const saving = ref(false)

function buildSavePayload(): SavePersonalBusinessCardRequest | null {
  const info = personalBusinessCardInfo.value

  if (!info) return null

  return {
    degree: info.degree ?? null,
    gender: info.gender ?? null,
    idCardNumber: info.idCardNumber ?? null,
    qualificationRecordNumber: info.qualificationRecordNumber ?? null,
    qualificationsUrl: Array.isArray(info.qualificationsUrl) ? info.qualificationsUrl : [],
    realname: info.realname ?? null,
    userId: info.userId,
  }
}

const handleSave = async () => {
  if (saving.value) return
  const payload = buildSavePayload()
  if (!payload) {
    uni.showToast({
      title: '数据异常，请重新进入页面',
      icon: 'none',
    })
    return
  }
  try {
    saving.value = true
    const res = await savePersonalBusinessCardApi(payload)
    if (res.code !== 0) {
      uni.showToast({
        title: res.msg || '提交失败',
        icon: 'none',
      })
      return
    }
    uni.showToast({
      title: '提交成功',
      icon: 'success',
    })
  } catch (error) {
    console.error('[PersonalBusinessCard] save failed:', error)

    uni.showToast({
      title: '提交失败，请稍后重试',
      icon: 'none',
    })
  } finally {
    saving.value = false
  }
}
</script>

<style lang="scss" scoped>
.personal-card-page {
  min-height: 100vh;
  padding: 24rpx 24rpx 64rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f1f6ff 0%, #f6f7fb 48%, #f7f8fa 100%);
}

.save-section {
  margin-top: 8rpx;
  padding: 8rpx 6rpx 32rpx;
  box-sizing: border-box;
}

.save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 92rpx;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #2f84ff 0%, #4ba0ff 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 92rpx;
  letter-spacing: 2rpx;
  box-shadow:
    0 14rpx 30rpx rgba(47, 132, 255, 0.26),
    0 4rpx 10rpx rgba(47, 132, 255, 0.14);

  &::after {
    border: none;
  }

  &[disabled] {
    opacity: 0.68;
    color: #ffffff;
    background: linear-gradient(90deg, #8bbdff 0%, #9dccff 100%);
    box-shadow: 0 8rpx 20rpx rgba(47, 132, 255, 0.14);
  }
}
</style>