cfc/cfc-frontend/pages/shop/consignee-edit/consignee-edit.vue

<template>
  <view class="container">
    <view class="form-wrap">
      <!-- 姓名 -->
      <view class="form-row">
        <text class="form-label">收货人姓名</text>
        <input
          v-model="form.name"
          class="form-input"
          placeholder="请输入姓名"
          maxlength="30"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-row">
        <text class="form-label">手机号</text>
        <input
          v-model="form.phone"
          class="form-input"
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        />
      </view>

      <!-- 身份证号 -->
      <view class="form-row">
        <text class="form-label">身份证号</text>
        <input
          v-model="form.idCard"
          class="form-input"
          placeholder="请输入身份证号（选填）"
          maxlength="18"
        />
      </view>

      <!-- 民族 -->
      <view class="form-row">
        <text class="form-label">民族</text>
        <input
          v-model="form.ethnicity"
          class="form-input"
          placeholder="请输入民族（选填）"
          maxlength="10"
        />
      </view>

      <!-- 血型 -->
      <view class="form-row">
        <text class="form-label">血型</text>
        <picker mode="selector" :range="bloodTypes" @change="onBloodTypeChange">
          <view class="picker-value">
            <text v-if="form.bloodType">{{ form.bloodType }}</text>
            <text v-else class="placeholder">请选择血型（选填）</text>
          </view>
        </picker>
      </view>

      <!-- 手签名 -->
      <view class="form-row form-row-signature">
        <text class="form-label">手签名</text>
        <view class="signature-cell">
          <text v-if="form.handSignature" class="signature-set">已设置手签名</text>
          <text v-else class="placeholder">请在下方手写签名（选填）</text>
        </view>
      </view>
      <view class="signature-block">
        <hand-signature
          :value="form.handSignature"
          :require-agree="true"
          agree-text="我已阅读并同意，本人确认以上信息真实、准确"
          @confirm="onHandSignatureConfirm"
          @clear="onHandSignatureClear"
          @agree-change="onHandSignatureAgreeChange"
        />
      </view>

      <!-- 设为默认 -->
      <view class="form-row form-row-switch">
        <text class="form-label">设为默认收货人</text>
        <switch :checked="form.isDefault === 1" @change="onDefaultChange" color="#667eea" />
      </view>

      <!-- Save -->
      <button
        :class="['save-btn', saving ? 'disabled' : '']"
        :disabled="saving"
        @click="handleSave"
      >
        {{ saving ? '保存中...' : '保存' }}
      </button>
    </view>
  </view>
</template>

<script>
import { consigneeDetail, consigneeSave } from '../../../utils/api.js'
import HandSignature from '@/components/hand-signature/hand-signature.vue'

export default {
  components: { HandSignature },
  data() {
    return {
      form: {
        name: '',
        phone: '',
        idCard: '',
        ethnicity: '',
        bloodType: '',
        handSignature: '',
        isDefault: 0
      },
      bloodTypes: ['A型', 'B型', 'O型', 'AB型', '其他'],
      saving: false,
      isEdit: false
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.isEdit = true
      this.loadDetail(options.id)
      uni.setNavigationBarTitle({ title: '编辑收货人' })
    }
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await consigneeDetail(id)
        if (res.code === 200 && res.data) {
          this.form = {
            id: res.data.id,
            name: res.data.name || '',
            phone: res.data.phone || '',
            idCard: res.data.idCard || '',
            ethnicity: res.data.ethnicity || '',
            bloodType: res.data.bloodType || '',
            handSignature: res.data.handSignature || '',
            isDefault: res.data.isDefault || 0
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    onBloodTypeChange(e) {
      this.form.bloodType = this.bloodTypes[e.detail.value]
    },
    onHandSignatureConfirm(dataUrl) {
      this.form.handSignature = dataUrl || ''
    },
    onHandSignatureClear() {
      this.form.handSignature = ''
    },
    onHandSignatureAgreeChange(agreed) {
      // 取消勾选同意 → 作废已确认签名
      if (!agreed) this.form.handSignature = ''
    },
    onDefaultChange(e) {
      this.form.isDefault = e.detail.value ? 1 : 0
    },
    async handleSave() {
      if (!this.form.name || !this.form.name.trim()) {
        uni.showToast({ title: '请输入收货人姓名', icon: 'none' })
        return
      }
      if (!this.form.phone || this.form.phone.length < 11) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      this.saving = true
      try {
        const res = await consigneeSave(this.form)
        if (res.code === 200) {
          uni.showToast({ title: '保存成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateBack()
          }, 1000)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.saving = false
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}
.form-wrap {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}
.form-row {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.form-row:last-child {
  border-bottom: none;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  width: 180rpx;
  flex-shrink: 0;
}
.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
  padding: 8rpx 0;
}
.picker-value {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #333;
  padding: 8rpx 0;
}
.picker-value .placeholder {
  color: #ccc;
}
.form-row-switch {
  justify-content: space-between;
}
.form-row-switch .form-label {
  width: auto;
}
.form-row-signature {
  border-bottom: none;
}
.signature-cell {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #333;
  padding: 8rpx 0;
}
.signature-set {
  color: #67c23a;
}
.signature-block {
  padding: 0 0 24rpx;
}
.save-btn {
  width: 100%;
  margin-top: 40rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx;
  line-height: 1.5;
}
.save-btn.disabled {
  opacity: 0.6;
}
</style>