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

<template>
  <scroll-view class="container" scroll-y>
    <!-- 上传区域 -->
    <view class="upload-section" v-if="!isEdit && !parsedResult">
      <view class="upload-card" @click="chooseFile">
        <text class="upload-icon">📄</text>
        <text class="upload-title">上传保单PDF</text>
        <text class="upload-desc">选择保单文件，AI 自动识别条款内容</text>
      </view>
      <view v-if="uploading" class="upload-status">
        <text class="upload-status-text">正在解析保单...</text>
        <view class="spinner"></view>
      </view>
    </view>

    <!-- 解析结果预览（编辑模式不显示上传区） -->
    <view v-if="parsedResult && !isEdit" class="parsed-result">
      <view class="result-header">
        <text class="result-title">AI 识别结果</text>
        <text class="result-hint">请确认或修改下方信息</text>
      </view>
      <view class="result-summary">
        <text class="summary-label">保险公司：</text>
        <text class="summary-value">{{ parsedResult.extracted.insuranceCompany || '未识别' }}</text>
      </view>
      <view class="result-summary">
        <text class="summary-label">保单类型：</text>
        <text class="summary-value">{{ parsedResult.extracted.policyType || '未识别' }}</text>
      </view>
      <view class="result-summary">
        <text class="summary-label">保额：</text>
        <text class="summary-value orange">{{ parsedResult.extracted.sumInsured || '未识别' }}</text>
      </view>
      <view class="result-summary">
        <text class="summary-label">保费：</text>
        <text class="summary-value orange">{{ parsedResult.extracted.premium || '未识别' }}</text>
      </view>
      <view class="result-summary" v-if="parsedResult.extracted.summary">
        <text class="summary-label">摘要：</text>
        <text class="summary-value">{{ parsedResult.extracted.summary }}</text>
      </view>
      <view class="confirm-btn" @click="confirmParsed">
        <text>确认并使用此结果</text>
      </view>
    </view>

    <!-- 保单条款原文展示 -->
    <view v-if="parsedResult && parsedResult.rawText" class="terms-section">
      <view class="terms-header">
        <text class="terms-title">保单条款原文</text>
        <text class="terms-toggle" @click="showTerms = !showTerms">{{ showTerms ? '收起' : '展开' }}</text>
      </view>
      <scroll-view v-if="showTerms" class="terms-content" scroll-y>
        <text class="terms-text">{{ parsedResult.rawText }}</text>
      </scroll-view>
    </view>

    <!-- 表单 -->
    <view class="form-card" :class="{ 'form-hidden': parsedResult && !isEdit && !showForm }">
      <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, uploadPolicy } from '../../utils/api'

export default {
  data() {
    return {
      isEdit: false,
      submitting: false,
      uploading: false,
      showTerms: false,
      showForm: true,
      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: ''
      },
      parsedResult: null
    }
  },

  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
    },

    chooseFile() {
      var self = this
      uni.showActionSheet({
        itemList: ['从聊天选取PDF', '拍照上传'],
        success: function(res) {
          if (res.tapIndex === 0) {
            self.chooseChatFile()
          } else if (res.tapIndex === 1) {
            self.takePhoto()
          }
        },
        fail: function() {}
      })
    },

    chooseChatFile() {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        success: function(res) {
          var files = res.tempFiles
          if (files && files.length > 0) {
            self.uploadAndParse(files[0].path, files[0].name || '保单文件')
          }
        },
        fail: function() {}
      })
    },

    takePhoto() {
      var self = this
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: function(res) {
          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            self.uploadAndParse(res.tempFilePaths[0], '照片')
          }
        }
      })
    },

    async uploadAndParse(filePath, fileName) {
      var self = this
      self.uploading = true
      uni.showLoading({ title: '正在解析...' })
      try {
        var res = await uploadPolicy(filePath)
        if (res && res.code === 200 && res.data) {
          self.parsedResult = res.data
          // 尝试回填表单字段
          var ext = res.data.extracted || {}
          if (ext.insuranceCompany) self.form.insuranceCompany = ext.insuranceCompany
          if (ext.policyType) self.form.policyType = ext.policyType
          if (ext.insuredPerson) self.form.insuredPerson = ext.insuredPerson
          if (ext.policyNo) self.form.policyNo = ext.policyNo
          if (ext.premium) self.form.premium = ext.premium
          if (ext.sumInsured) self.form.sumInsured = ext.sumInsured
          if (ext.policyName) self.form.policyName = ext.policyName
          // 转换保费/保额为数字
          if (ext.premium) {
            var p = parseFloat(ext.premium)
            if (!isNaN(p)) self.form.premium = String(p)
          }
          if (ext.sumInsured) {
            var s = parseFloat(ext.sumInsured)
            if (!isNaN(s)) self.form.sumInsured = String(s)
          }
          // 设置保单类型索引
          if (ext.policyType) {
            var idx = self.policyTypeValues.indexOf(ext.policyType)
            if (idx >= 0) self.policyTypeIndex = idx
          }
          uni.hideLoading()
        } else {
          uni.hideLoading()
          uni.showToast({ title: (res && res.message) || '解析失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        console.error('上传解析失败', e)
        uni.showToast({ title: '上传解析失败，请重试', icon: 'none' })
      } finally {
        self.uploading = false
      }
    },

    confirmParsed() {
      this.showForm = true
    },

    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
        }

        // 如果有解析结果，保存原始条款
        if (this.parsedResult && this.parsedResult.rawText) {
          payload.policyTerms = this.parsedResult.rawText
        }

        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;
  }

  /* 上传区域 */
  .upload-section {
    margin-bottom: 24rpx;
  }

  .upload-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2rpx dashed #F97316;
  }

  .upload-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }

  .upload-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }

  .upload-desc {
    font-size: 24rpx;
    color: #999;
  }

  .upload-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
  }

  .upload-status-text {
    font-size: 28rpx;
    color: #F97316;
    margin-bottom: 16rpx;
  }

  .spinner {
    width: 48rpx;
    height: 48rpx;
    border: 4rpx solid #FED7AA;
    border-top-color: #F97316;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* 解析结果预览 */
  .parsed-result {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    border: 2rpx solid #DCFCE7;
  }

  .result-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .result-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #16A34A;
  }

  .result-hint {
    font-size: 24rpx;
    color: #999;
  }

  .result-summary {
    display: flex;
    flex-direction: row;
    padding: 12rpx 0;
    font-size: 26rpx;
  }

  .summary-label {
    color: #666;
    width: 160rpx;
    flex-shrink: 0;
  }

  .summary-value {
    color: #333;
    flex: 1;
  }

  .summary-value.orange {
    color: #F97316;
    font-weight: 600;
  }

  .confirm-btn {
    margin-top: 24rpx;
    padding: 16rpx 0;
    text-align: center;
    background: #F0F9FF;
    border-radius: 12rpx;
    color: #0284C7;
    font-size: 28rpx;
    font-weight: 500;
  }

  /* 条款原文 */
  .terms-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    border: 2rpx solid #FEF3C7;
  }

  .terms-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .terms-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #92400E;
  }

  .terms-toggle {
    font-size: 24rpx;
    color: #F59E0B;
  }

  .terms-content {
    max-height: 400rpx;
  }

  .terms-text {
    font-size: 24rpx;
    color: #555;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-all;
  }

  /* 表单 */
  .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>