hms/apps/miniprogram-uniapp/src/pages-sub/pkg-profile/family-add/index.vue

<template>
  <scroll-view scroll-y class="page-scroll">
    <view :class="['family-add-page', elderClass]">
      <text class="page-title">{{ editId ? '编辑就诊人' : '添加就诊人' }}</text>

      <view class="form-card">
        <view class="form-item">
          <text class="form-label">姓名</text>
          <input
            class="form-input"
            placeholder="请输入姓名"
            placeholder-class="form-placeholder"
            :value="name"
            @input="name = ($event as any).detail.value"
          />
        </view>

        <view class="form-item">
          <text class="form-label">关系</text>
          <picker
            mode="selector"
            :range="RELATION_OPTIONS"
            :value="relationIdx"
            @change="onRelationChange"
          >
            <view class="form-picker">
              <text class="form-picker-text">{{ RELATION_OPTIONS[relationIdx] }}</text>
              <text class="form-picker-arrow">></text>
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="form-label">性别</text>
          <picker
            mode="selector"
            :range="GENDER_OPTIONS"
            :value="genderIdx"
            @change="onGenderChange"
          >
            <view class="form-picker">
              <text class="form-picker-text">{{ GENDER_OPTIONS[genderIdx] }}</text>
              <text class="form-picker-arrow">></text>
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="form-label">出生日期</text>
          <picker
            mode="date"
            :value="birthDate || '2000-01-01'"
            @change="onDateChange"
          >
            <view class="form-picker">
              <text :class="['form-picker-text', { placeholder: !birthDate }]">
                {{ birthDate || '请选择' }}
              </text>
              <text class="form-picker-arrow">></text>
            </view>
          </picker>
        </view>
      </view>

      <view
        :class="['submit-btn', { disabled: submitting }]"
        @tap="submitting ? undefined : handleSubmit()"
      >
        <text class="submit-text">{{ submitting ? '提交中...' : editId ? '保存修改' : '确认添加' }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { createPatient, updatePatient, Patient } from '@/services/patient'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()

const RELATION_OPTIONS = ['本人', '配偶', '父母', '子女', '其他']
const GENDER_OPTIONS = ['男', '女']

const editId = ref('')
const editData = ref<Patient | null>(null)

const name = ref('')
const relationIdx = ref(0)
const genderIdx = ref(0)
const birthDate = ref('')
const submitting = ref(false)

function onRelationChange(e: any) {
  relationIdx.value = Number(e.detail.value)
}

function onGenderChange(e: any) {
  genderIdx.value = Number(e.detail.value)
}

function onDateChange(e: any) {
  birthDate.value = e.detail.value
}

async function handleSubmit() {
  if (!name.value.trim()) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return
  }
  submitting.value = true
  try {
    const gender = GENDER_OPTIONS[genderIdx.value] === '男' ? 'male' : 'female'
    if (editId.value && editData.value) {
      await updatePatient(editId.value, {
        name: name.value.trim(),
        gender,
        birth_date: birthDate.value || undefined,
        relation: RELATION_OPTIONS[relationIdx.value],
      }, editData.value.version)
      uni.showToast({ title: '修改成功', icon: 'success' })
    } else {
      await createPatient({
        name: name.value.trim(),
        gender,
        birth_date: birthDate.value || undefined,
      })
      uni.showToast({ title: '添加成功', icon: 'success' })
    }
    setTimeout(() => uni.navigateBack(), 1000)
  } catch {
    uni.showToast({ title: editId.value ? '修改失败' : '添加失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

onLoad((query) => {
  if (query?.id) {
    editId.value = query.id
    const stored = uni.getStorageSync('edit_patient') as Patient | null
    if (stored) {
      editData.value = stored
      name.value = stored.name || ''
      relationIdx.value = stored.relation ? RELATION_OPTIONS.indexOf(stored.relation) : 0
      genderIdx.value = stored.gender === 'female' ? 1 : 0
      birthDate.value = stored.birth_date || ''
    }
  }
})

onUnload(() => {
  uni.removeStorageSync('edit_patient')
})
</script>

<style lang="scss" scoped>
.page-scroll {
  height: 100vh;
  background: $bg;
}

.family-add-page {
  padding: 32px 24px;
  padding-bottom: 160px;
}

.page-title {
  @include section-title;
  padding-left: 4px;
}

.form-card {
  background: $card;
  border-radius: $r;
  padding: 4px 28px;
  box-shadow: $shadow-sm;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 1px solid $bd-l;

  &:last-child {
    border-bottom: none;
  }
}

.form-label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-body-lg);
  color: $tx;
  flex-shrink: 0;
  width: 140px;
  font-weight: 500;
}

.form-input {
  flex: 1;
  font-size: var(--tk-font-body-lg);
  color: $tx;
  text-align: right;
  border: none;
  background: transparent;
  outline: none;
}

.form-placeholder {
  color: $tx3;
}

.form-picker {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.form-picker-text {
  font-size: var(--tk-font-body-lg);
  color: $tx;
  margin-right: 10px;

  &.placeholder {
    color: $tx3;
  }
}

.form-picker-arrow {
  font-size: var(--tk-font-h2);
  color: $tx3;
  font-family: 'Georgia', 'Times New Roman', serif;
}

.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $pri;
  padding: 28px;
  text-align: center;
  box-shadow: 0 -2px 12px rgba(196, 98, 58, 0.15);

  &.disabled {
    opacity: 0.5;
  }
}

.submit-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-num);
  color: $white;
  font-weight: bold;
  letter-spacing: 2px;
}
</style>