cfc/cfc-frontend/pages/wealth-sub/insurance-add.vue

<template>
  <scroll-view class="container" scroll-y>
    <view class="form-card">
      <view class="form-group">
        <text class="form-label">保单名称 <text class="required">*</text></text>
        <input class="form-input" v-model="form.policyName" placeholder="请输入保单名称" />
      </view>

      <view class="form-group">
        <text class="form-label">保险公司</text>
        <input class="form-input" v-model="form.insuranceCompany" placeholder="请输入保险公司名称" />
      </view>

      <view class="form-group">
        <text class="form-label">保单类型</text>
        <picker class="form-picker" :value="policyTypeIndex" :range="policyTypes" @change="onTypeChange">
          <view class="picker-value">{{ policyTypes[policyTypeIndex] || '请选择保单类型' }}</view>
        </picker>
      </view>

      <view class="form-group">
        <text class="form-label">被保人 <text class="required">*</text></text>
        <input class="form-input" v-model="form.insuredPerson" placeholder="请输入被保人姓名" />
      </view>

      <view class="form-row">
        <view class="form-group half">
          <text class="form-label">保费</text>
          <input class="form-input" v-model="form.premium" placeholder="0.00" type="digit" />
        </view>
        <view class="form-group half">
          <text class="form-label">保额</text>
          <input class="form-input" v-model="form.sumInsured" placeholder="0.00" type="digit" />
        </view>
      </view>

      <view class="form-row">
        <view class="form-group half">
          <text class="form-label">生效日期</text>
          <picker class="form-picker" mode="date" :value="form.startDate" @change="onStartDateChange">
            <view class="picker-value">{{ form.startDate || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-group half">
          <text class="form-label">到期日期</text>
          <picker class="form-picker" mode="date" :value="form.endDate" @change="onEndDateChange">
            <view class="picker-value">{{ form.endDate || '请选择' }}</view>
          </picker>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">续费类型</text>
        <picker class="form-picker" :value="renewalTypeIndex" :range="renewalTypes" @change="onRenewalChange">
          <view class="picker-value">{{ renewalTypes[renewalTypeIndex] || '请选择续费类型' }}</view>
        </picker>
      </view>

      <view class="form-group">
        <text class="form-label">保单号</text>
        <input class="form-input" v-model="form.policyNo" placeholder="请输入保单号" />
      </view>

      <view class="form-group">
        <text class="form-label">备注</text>
        <textarea class="form-textarea" v-model="form.remark" placeholder="备注信息" />
      </view>
    </view>

    <view class="submit-btn-wrap">
      <button class="submit-btn" :loading="submitting" @click="submitForm">
        {{ isEdit ? '更新保单' : '提交保存' }}
      </button>
    </view>
  </scroll-view>
</template>

<script>
import { getInsuranceDetail, createInsurance, updateInsurance } from '../../utils/api'

export default {
  data() {
    return {
      isEdit: false,
      submitting: false,
      policyTypes: ['医疗险', '重疾险', '意外险', '教育金', '养老险'],
      policyTypeValues: ['medical', 'life', 'accident', 'education', 'endowment'],
      policyTypeIndex: -1,
      renewalTypes: ['年缴', '月缴', '趸交'],
      renewalTypeValues: ['annual', 'monthly', 'single'],
      renewalTypeIndex: -1,
      form: {
        policyName: '',
        insuranceCompany: '',
        policyType: '',
        insuredPerson: '',
        premium: '',
        sumInsured: '',
        startDate: '',
        endDate: '',
        renewalType: 'annual',
        policyNo: '',
        remark: ''
      }
    }
  },

  onLoad(options) {
    if (options && options.id) {
      this.isEdit = true
      this.loadDetail(options.id)
    }
  },

  methods: {
    async loadDetail(id) {
      try {
        const res = await getInsuranceDetail(id)
        if (res && res.code === 200 && res.data) {
          const data = res.data
          this.form.policyName = data.policyName || ''
          this.form.insuranceCompany = data.insuranceCompany || ''
          this.form.policyType = data.policyType || ''
          this.form.insuredPerson = data.insuredPerson || ''
          this.form.premium = data.premium ? String(data.premium) : ''
          this.form.sumInsured = data.sumInsured ? String(data.sumInsured) : ''
          this.form.startDate = data.startDate ? data.startDate.substring(0, 10) : ''
          this.form.endDate = data.endDate ? data.endDate.substring(0, 10) : ''
          this.form.renewalType = data.renewalType || 'annual'
          this.form.policyNo = data.policyNo || ''
          this.form.remark = data.remark || ''

          this.policyTypeIndex = this.policyTypeValues.indexOf(data.policyType)
          this.renewalTypeIndex = this.renewalTypeValues.indexOf(data.renewalType)

          uni.setNavigationBarTitle({ title: '保单详情' })
        }
      } catch (e) {
        console.error('加载保单详情失败', e)
      }
    },

    onTypeChange(e) {
      this.policyTypeIndex = parseInt(e.detail.value)
      this.form.policyType = this.policyTypeValues[this.policyTypeIndex]
    },

    onRenewalChange(e) {
      this.renewalTypeIndex = parseInt(e.detail.value)
      this.form.renewalType = this.renewalTypeValues[this.renewalTypeIndex]
    },

    onStartDateChange(e) {
      this.form.startDate = e.detail.value
    },

    onEndDateChange(e) {
      this.form.endDate = e.detail.value
    },

    async submitForm() {
      if (!this.form.policyName) {
        uni.showToast({ title: '请输入保单名称', icon: 'none' })
        return
      }
      if (!this.form.insuredPerson) {
        uni.showToast({ title: '请输入被保人姓名', icon: 'none' })
        return
      }

      this.submitting = true
      try {
        var payload = {
          policyName: this.form.policyName,
          insuranceCompany: this.form.insuranceCompany,
          policyType: this.form.policyType,
          insuredPerson: this.form.insuredPerson,
          premium: this.form.premium ? parseFloat(this.form.premium) : null,
          sumInsured: this.form.sumInsured ? parseFloat(this.form.sumInsured) : null,
          startDate: this.form.startDate || null,
          endDate: this.form.endDate || null,
          renewalType: this.form.renewalType,
          policyNo: this.form.policyNo,
          remark: this.form.remark
        }

        var res
        if (this.isEdit) {
          payload.id = this.$mp.query && this.$mp.query.id
          res = await updateInsurance(payload)
        } else {
          res = await createInsurance(payload)
        }

        if (res && res.code === 200) {
          uni.showToast({ title: this.isEdit ? '更新成功' : '创建成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({ title: res && res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style>
  .container {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20rpx 30rpx 120rpx;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
}

.form-group {
  margin-bottom: 28rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.required {
  color: #DC2626;
}

.form-input {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.picker-value {
  font-size: 28rpx;
  color: #333;
  line-height: 80rpx;
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.form-group.half {
  width: 48%;
}

.submit-btn-wrap {
  padding: 20rpx 0 40rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #F97316;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 44rpx;
  border: none;
}

.submit-btn::after {
  border: none;
}
</style>