YY_MP_REFACTOR/src/pages-mine/personal-card/components/UserInfoCard.vue

<template>
  <view class="user-info-card">
    <view class="card-title">
      <view class="title-line" />
      <text class="title-text">基本信息</text>
    </view>

    <view class="card-content">
      <wd-form ref="formRef" :model="model" :title-width="100">
        <wd-form-item title="姓名" prop="realname">
          <wd-input v-model="model.realname" type="text" :readonly="disabled" align-right />
        </wd-form-item>

        <wd-form-item title="性别" prop="gender">
          <wd-input
            v-model="genderLabel"
            readonly
            type="text"
            align-right
            placeholder="请选择性别"
            suffix-icon="down"
            @click="showPicker('gender')"
          />
        </wd-form-item>

        <wd-form-item title="身份证号" prop="idCardNumber">
          <wd-input v-model="model.idCardNumber" type="text" align-right :readonly="disabled" />
        </wd-form-item>

        <wd-form-item title="手机号" prop="username">
          <wd-input v-model="model.username" type="text" readonly align-right />
        </wd-form-item>

        <wd-form-item title="年龄" prop="age">
          <wd-input v-model="model.age" type="text" readonly align-right />
        </wd-form-item>

        <wd-form-item title="学历" prop="degree">
          <wd-input
            v-model="degreeLabel"
            readonly
            type="text"
            align-right
            placeholder="请选择学历"
            suffix-icon="down"
            @click="showPicker('degree')"
          />
        </wd-form-item>
      </wd-form>
    </view>

    <wd-picker v-model:visible="pickerShow" :columns="pickerColumns" @confirm="pickerConfirm" />
  </view>
</template>

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

import type { DictItem } from '@/services/modules/common/type'
import type { PersonalBusinessCardResponse } from '@/services/modules/mine/personalCard/type'

type PickerType = 'gender' | 'degree'

interface PickerConfirmEvent {
  selectedItems?: DictItem | DictItem[]
  value?: string | string[]
}

const props = withDefaults(
  defineProps<{
    title?: string
    disabled: false
    genderColumns: DictItem[]
    degreeColumns: DictItem[]
  }>(),
  {
    title: '基本信息',
  }
)

const model = defineModel<PersonalBusinessCardResponse>({
  required: true,
})

const pickerType = ref<PickerType>('gender')
const pickerShow = ref(false)
const pickerColumns = ref<DictItem[]>([])

const genderLabel = computed<string>({
  get() {
    if (!model.value.gender) return ''

    const current = props.genderColumns.find((item) => item.value === model.value.gender)
    return current?.label ?? ''
  },
  set() {
    // readonly input 占位 setter，避免 v-model 绑定 readonly computed 报警告
  },
})

const degreeLabel = computed<string>({
  get() {
    if (!model.value.degree) return ''

    const current = props.degreeColumns.find((item) => item.value === model.value.degree)
    return current?.label ?? ''
  },
  set() {
    // readonly input 占位 setter，避免 v-model 绑定 readonly computed 报警告
  },
})

function showPicker(type: PickerType) {
  if (props.disabled) return
  pickerType.value = type
  pickerColumns.value = type === 'gender' ? props.genderColumns : props.degreeColumns
  pickerShow.value = true
}

function pickerConfirm(event: PickerConfirmEvent) {
  const currentValue = Array.isArray(event.value) ? event.value[0] : event.value

  if (!currentValue) return

  if (pickerType.value === 'gender') {
    model.value.gender = currentValue
    return
  }

  model.value.degree = currentValue
}
</script>

<style lang="scss" scoped>
.user-info-card {
  position: relative;
  margin-bottom: 28rpx;
  padding: 30rpx 26rpx 26rpx;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 30rpx;
  background: #ffffff;
  box-shadow: 0 18rpx 48rpx rgba(22, 38, 67, 0.1);

  // 主阴影：突出卡片层级

  // 顶部轻微高光边
  &::before {
    position: absolute;
    top: 0;
    left: 28rpx;
    right: 28rpx;
    height: 1rpx;
    content: '';
    background: rgba(255, 255, 255, 0.9);
  }

  // 右上角装饰圆
  &::after {
    position: absolute;
    top: -96rpx;
    right: -78rpx;
    width: 260rpx;
    height: 260rpx;
    content: '';
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(47, 132, 255, 0.18) 0%, rgba(47, 132, 255, 0.08) 100%);
  }
}

.card-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.title-line {
  width: 8rpx;
  height: 34rpx;
  margin-right: 14rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, #2f84ff 0%, #57a3ff 100%);
}

.title-text {
  font-size: 34rpx;
  font-weight: 700;
  line-height: 48rpx;
  color: #1f2a44;
}

.card-content {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 22rpx;

  box-shadow:
    0 18rpx 44rpx rgba(30, 64, 120, 0.12),
    0 6rpx 18rpx rgba(30, 64, 120, 0.06);
}
</style>