cfc/cfc-frontend/pages/health/report-upload.vue

<template>
  <view class="upload-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">上传健康报告</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 说明提示 -->
    <view class="tip-banner">
      <text class="tip-icon">📋</text>
      <text class="tip-text">上传体检报告或肠道检测报告，AI 将为您解读并提供个性化营养方案</text>
    </view>

    <!-- PDF解析预览（提取到信息时显示） -->
    <view class="parsed-preview" v-if="parsedInfo">
      <view class="parsed-title">PDF解析结果</view>
      <view class="parsed-row" v-if="parsedInfo.personName">
        <text class="parsed-label">被检测人</text>
        <text class="parsed-value">{{ parsedInfo.personName }}</text>
      </view>
      <view class="parsed-row" v-if="parsedInfo.reportNumber">
        <text class="parsed-label">报告编号</text>
        <text class="parsed-value">{{ parsedInfo.reportNumber }}</text>
      </view>
      <view class="parsed-row" v-if="parsedInfo.reportDate">
        <text class="parsed-label">报告日期</text>
        <text class="parsed-value">{{ parsedInfo.reportDate }}</text>
      </view>
      <!-- 匹配状态 -->
      <view class="match-status" v-if="parsedInfo.needManualSelect">
        <text class="match-icon">⚠️</text>
        <text class="match-text">无法自动匹配到家庭成员，请手动选择</text>
      </view>
      <view class="match-status success" v-else-if="parsedInfo.matchedMemberName">
        <text class="match-icon">✅</text>
        <text class="match-text">已自动匹配: {{ parsedInfo.matchedMemberName }}</text>
      </view>
    </view>

    <!-- 家庭成员选择器（需要手动选择时显示） -->
    <view class="form-item member-selector" v-if="showMemberSelector">
      <text class="form-label">选择成员</text>
      <view class="member-list">
        <view
          class="member-item"
          v-for="member in familyMembers"
          :key="member.id"
          :class="{ 'member-selected': selectedMemberId === (member.userId || member.id) }"
          @click="selectMember(member)"
        >
          <text class="member-avatar">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
          <text class="member-name">{{ member.nickname || '未知' }}</text>
        </view>
      </view>
      <view class="add-member-btn" v-if="parsedInfo && parsedInfo.personName" @click="chooseRelationAndAdd">
        <text class="add-member-text">+ 将「{{ parsedInfo.personName }}」添加为新成员</text>
      </view>
    </view>

    <!-- 表单 -->
    <view class="form-section">
      <!-- 上传方式：两种独立操作单元（上下分层，视觉差异明显） -->
      <view class="upload-methods">
        <!-- 方式 1：上传文件（PDF/Word/图片，从聊天记录选择） -->
        <view class="upload-method method-file">
          <view class="method-header">
            <view class="method-tag tag-file">方式 1</view>
            <text class="method-title">上传报告文件</text>
            <text class="method-sub">体检报告、肠道检测报告等正式 PDF/Word 文档</text>
          </view>
          <view class="method-body" @click="pickFile">
            <view class="method-icon-file">📄</view>
            <view class="method-cta-file">
              <text class="method-cta-file-main">从微信聊天选择文件</text>
              <text class="method-cta-file-sub">支持 PDF / Word / 图片</text>
            </view>
            <text class="method-arrow">›</text>
          </view>
        </view>

        <!-- 分隔提示 -->
        <view class="method-divider">
          <text class="method-divider-text">或</text>
        </view>

        <!-- 方式 2：拍照上传（相机拍照，主要用于舌象） -->
        <view class="upload-method method-photo">
          <view class="method-header">
            <view class="method-tag tag-photo">方式 2</view>
            <text class="method-title">拍照上传</text>
            <text class="method-sub">拍摄舌象照片或单页纸质报告</text>
          </view>
          <view class="method-body" @click="takePhoto">
            <view class="method-icon-photo">📷</view>
            <view class="method-cta-photo">
              <text class="method-cta-photo-main">打开相机拍照</text>
              <text class="method-cta-photo-sub">舌象分析 · 即拍即传</text>
            </view>
            <text class="method-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 购买推荐 -->
      <view class="purchase-section" v-if="recommendedProducts.length > 0">
        <view class="purchase-header">
          <text class="purchase-icon">📦</text>
          <text class="purchase-title">为家人购买检测服务</text>
        </view>
        <scroll-view class="purchase-scroll" scroll-x enable-flex show-scrollbar="false">
          <view
            class="purchase-card"
            v-for="item in recommendedProducts"
            :key="item.id"
            @click="goToProduct(item.id)"
          >
            <image class="purchase-cover" :src="item.coverImage || '/static/default-product.png'" mode="aspectFill" />
            <text class="purchase-name">{{ item.name }}</text>
            <text class="purchase-price">{{ formatPriceWithSymbol(item.price) }}</text>
            <view class="purchase-btn">
              <text class="purchase-btn-text">去购买</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 已选文件 -->
      <view class="form-item" v-if="selectedFile || photoPath">
        <text class="form-label">已选文件</text>
        <view class="file-info">
          <text class="file-name">{{ selectedFile ? (selectedFile.name || '文件') : '照片' }}</text>
          <text class="file-size" v-if="selectedFile && selectedFile.size">{{ formatFileSize(selectedFile.size) }}</text>
          <text class="file-remove" @click.stop="removeFile">移除</text>
        </view>
      </view>

      <!-- 上传中/分析中 -->
      <view class="form-item" v-if="parsingPreview">
        <text class="form-label">AI分析中...</text>
        <view class="analyzing-status">
          <text class="analyzing-text">正在解析文件内容，请稍候...</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="form-item">
        <text class="form-label">备注（选填）</text>
        <textarea
          class="note-input"
          v-model="form.description"
          placeholder="请输入报告摘要或备注信息..."
          maxlength="500"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" :class="{ 'btn-disabled': !canSubmit }" @click="doSubmit">
        <text v-if="parsingPreview">解析中...</text>
        <text v-else-if="submitting">提交中...</text>
        <text v-else>提交报告</text>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import { productList, getFamilyMembers, addFamilyMember } from '../../utils/api.js'

export default {
  data() {
    return {
      childId: null,
      familyId: null,
      form: {
        reportDate: '',
        overallScore: 0,
        description: ''
      },
      submitting: false,
      selectedFile: null,
      parsingPreview: false,
      parsedInfo: null,
      showMemberSelector: false,
      selectedMemberId: null,
      familyMembers: [],
      // 拍照
      photoPath: null,
      // 购买推荐
      recommendedProducts: [],
      loadingProducts: false
    }
  },
  computed: {
    canSubmit() {
      if (this.parsingPreview) return false
      if (this.selectedFile || this.photoPath) {
        // 文件已选且解析成功（有draftId且不需要手动选成员）
        return this.parsedInfo && this.parsedInfo.draftId && !this.parsedInfo.needManualSelect
      }
      return false
    }
  },
  onLoad: function(options) {
    this.childId = options.childId ? parseInt(options.childId) : null
    this.loadRecommendProducts()
  },
  onShow: function() {
    // 每次显示时从store获取familyId和家庭成员
    this.loadFamilyInfo()
  },
  methods: {
    loadFamilyInfo() {
      var self = this
      // 从Vuex获取familyId和家庭成员
      var userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        try {
          var info = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
          this.familyId = info.familyId || null
          // 加载家庭成员列表（从本地存储或请求）
          var storedMembers = uni.getStorageSync('familyMembers')
          if (storedMembers) {
            try {
              this.familyMembers = typeof storedMembers === 'string' ? JSON.parse(storedMembers) : storedMembers
            } catch (e) {
              this.familyMembers = []
            }
          }
        } catch (e) {
          console.log('解析userInfo失败', e)
        }
      }
    },
    // ===== 拍照上传 =====
    takePhoto() {
      var self = this
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: function(res) {
          self.photoPath = res.tempFilePaths[0]
          // 拍照后直接解析
          if (self.familyId) {
            self.previewParse()
          }
        }
      })
    },
    // ===== 文件上传 =====
    pickFile() {
      var self = this
      // 重置解析状态
      this.parsedInfo = null
      this.showMemberSelector = false
      this.selectedMemberId = null
      this.form.reportDate = ''
      this.form.overallScore = 0
      this.photoPath = null

      // 从微信聊天记录中选择文件
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['pdf'],
        success: function(res) {
          var files = res.tempFiles
          if (files && files.length > 0) {
            self.selectedFile = files[0]
            if (self.familyId) {
              self.previewParse()
            }
          }
        },
        fail: function(e) {
          console.log('选择文件取消或失败', e)
        }
      })
    },
    previewParse() {
      var self = this
      if (!this.familyId) return
      var filePath = this.selectedFile ? this.selectedFile.path : this.photoPath
      if (!filePath) return
      this.parsingPreview = true

      var apiPath = getApp().globalData.baseUrl + '/api/health/report/parse-preview'
      if (self.selectedFile) {
        // PDF文件上传
        uni.uploadFile({
          url: apiPath + (self.childId ? '?memberId=' + self.childId : ''),
          filePath: filePath,
          name: 'file',
          header: {
            'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '')
          },
          success: function(uploadRes) {
            var data = JSON.parse(uploadRes.data)
            if (data.code === 200 && data.data) {
              self.handleParsedResult(data.data)
            } else {
              self.parsingPreview = false
              uni.showToast({ title: data.message || '解析失败', icon: 'none' })
            }
          },
          fail: function() {
            self.parsingPreview = false
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        })
      } else if (self.photoPath) {
        // 图片上传
        uni.uploadFile({
          url: apiPath + '?type=image' + (self.childId ? '&memberId=' + self.childId : ''),
          filePath: filePath,
          name: 'file',
          header: {
            'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '')
          },
          success: function(uploadRes) {
            var data = JSON.parse(uploadRes.data)
            if (data.code === 200 && data.data) {
              self.handleParsedResult(data.data)
            } else {
              self.parsingPreview = false
              uni.showToast({ title: data.message || '解析失败', icon: 'none' })
            }
          },
          fail: function() {
            self.parsingPreview = false
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        })
      }
    },
    handleParsedResult: function(detail) {
      this.parsingPreview = false
      this.parsedInfo = {
        draftId: detail.draftId,
        personName: detail.extractedName || '',
        extractedGender: detail.extractedGender || '',
        extractedAge: detail.extractedAge || '',
        reportNumber: detail.extractedReportNumber,
        reportDate: detail.extractedReportDate,
        needManualSelect: detail.needBind,
        payload: detail.payload || {},
        matchedMemberId: detail.matchedMemberId,
        confidence: detail.confidence,
        matchLabel: detail.matchLabel,
        candidates: detail.candidates || []
      }
      if (detail.extractedReportDate) {
        this.form.reportDate = detail.extractedReportDate
      }
      if (detail.needBind) {
        this.showMemberSelector = true
        this.loadFamilyMembers()
        if (this.parsedInfo.personName) {
          this.promptAddParsedMember()
        }
      }
    },
    loadFamilyMembers() {
      var self = this
      // 从后端获取真实家庭成员（家长 + 孩子），storage 中并无该数据
      getFamilyMembers().then(function(res) {
        var data = (res && res.data) || {}
        var parents = (data.parents || []).map(function(p) {
          return { id: p.id, nickname: p.realName || p.nickname, gender: p.gender, role: 'parent' }
        })
        var children = (data.children || []).map(function(c) {
          return { id: c.id, nickname: c.nickname, gender: c.gender, age: c.age, role: 'child' }
        })
        self.familyMembers = parents.concat(children)
      }).catch(function(e) {
        console.log('加载家庭成员失败', e)
        self.familyMembers = []
      })
    },
    selectMember(member) {
      this.selectedMemberId = member.id || member.userId
      this.parsedInfo = this.parsedInfo || {}
      // 手动选择的成员通过 matchedMemberId 传递给确认页
      this.parsedInfo.matchedMemberId = this.selectedMemberId
      this.parsedInfo.needManualSelect = false
      this.showMemberSelector = false
    },
    genderText(gender) {
      if (gender === 'male') return '男'
      if (gender === 'female') return '女'
      return ''
    },
    // 询问是否将解析到的人添加为家庭成员
    promptAddParsedMember() {
      var self = this
      if (!this.parsedInfo || !this.parsedInfo.personName) return
      var name = this.parsedInfo.personName
      var desc = name
      var extra = []
      var g = this.genderText(this.parsedInfo.extractedGender)
      if (g) extra.push(g)
      if (this.parsedInfo.extractedAge) extra.push(this.parsedInfo.extractedAge + '岁')
      if (extra.length > 0) desc = name + '（' + extra.join('，') + '）'
      uni.showModal({
        title: '未匹配到家庭成员',
        content: '是否将解析到的「' + desc + '」添加为家庭成员？',
        confirmText: '添加',
        cancelText: '手动选择',
        success: function(res) {
          if (res.confirm) {
            self.chooseRelationAndAdd()
          }
          // 取消则保留下方的手动选择列表
        }
      })
    },
    // 选择新成员与家庭的关系（后端要求辈分必填）后添加
    chooseRelationAndAdd() {
      var self = this
      var relOptions = [
        { label: '孩子', generationLevel: 'child' },
        { label: '配偶', generationLevel: 'peer', peerType: 'spouse' },
        { label: '父母', generationLevel: 'parent' },
        { label: '兄弟姐妹', generationLevel: 'peer', peerType: 'sibling' },
        { label: '祖父母', generationLevel: 'grandparent' }
      ]
      uni.showActionSheet({
        itemList: relOptions.map(function(o) { return o.label }),
        success: function(res) {
          var rel = relOptions[res.tapIndex]
          if (rel) {
            self.doAddParsedMember(rel)
          }
        }
      })
    },
    // 调用后端添加成员，并将其作为本次报告对象
    doAddParsedMember(rel) {
      var self = this
      var name = this.parsedInfo.personName
      var dto = {
        nickname: name,
        gender: this.parsedInfo.extractedGender || '',
        generationLevel: rel.generationLevel
      }
      if (rel.peerType) dto.peerType = rel.peerType
      // 由年龄推算大致出生年份（用于展示，用户后续可修改）
      var age = parseInt(this.parsedInfo.extractedAge)
      if (!isNaN(age) && age > 0 && age < 130) {
        dto.birthday = (new Date().getFullYear() - age) + '-01-01'
      }
      uni.showLoading({ title: '添加成员...' })
      addFamilyMember(dto).then(function(res) {
        uni.hideLoading()
        if (res && res.code === 200) {
          var newId = res.data && (res.data.id || res.data.userId)
          self.selectedMemberId = newId
          self.parsedInfo.matchedMemberId = newId
          self.parsedInfo.matchedMemberName = name
          self.parsedInfo.needManualSelect = false
          self.showMemberSelector = false
          self.loadFamilyMembers()
          uni.showToast({ title: '已添加并选中', icon: 'success' })
        } else {
          uni.showToast({ title: (res && res.message) || '添加失败', icon: 'none' })
        }
      }).catch(function(e) {
        uni.hideLoading()
        console.log('添加成员失败', e)
        uni.showToast({ title: '添加失败，请重试', icon: 'none' })
      })
    },
    removeFile() {
      this.selectedFile = null
      this.photoPath = null
      this.parsedInfo = null
      this.showMemberSelector = false
      this.selectedMemberId = null
      this.form.reportDate = ''
      this.form.overallScore = 0
    },
    loadRecommendProducts: function() {
      var self = this
      self.loadingProducts = true
      productList({ domain: 'body', productType: 'assessment', size: 4 }).then(function(res) {
        if (res && res.data && res.data.records) {
          self.recommendedProducts = res.data.records
        } else {
          self.recommendedProducts = []
        }
      }).catch(function() {
        self.recommendedProducts = []
      }).finally(function() {
        self.loadingProducts = false
      })
    },
    goToProduct: function(productId) {
      uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + productId })
    },
    formatPriceWithSymbol: function(cents) {
      if (cents === null || cents === undefined) return '¥0'
      return '¥' + (cents / 100).toFixed(2)
    },
    formatFileSize(bytes) {
      if (!bytes) return ''
      if (bytes < 1024) return bytes + 'B'
      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB'
      return (bytes / 1024 / 1024).toFixed(1) + 'MB'
    },
    goBack() {
      uni.navigateBack()
    },
    doSubmit() {
      if (this.submitting) return
      var self = this

      if (!self.parsedInfo || !self.parsedInfo.draftId) {
        uni.showToast({ title: '请先上传文件并等待解析完成', icon: 'none' })
        return
      }
      if (self.parsedInfo.needManualSelect && !self.selectedMemberId) {
        uni.showToast({ title: '请先选择成员', icon: 'none' })
        return
      }

      var payloadStr = encodeURIComponent(JSON.stringify(self.parsedInfo.payload || {}))
      var candidatesStr = (self.parsedInfo.candidates && self.parsedInfo.candidates.length > 0)
        ? encodeURIComponent(JSON.stringify(self.parsedInfo.candidates))
        : ''
      var params = 'draftId=' + self.parsedInfo.draftId
        + '&extractedName=' + encodeURIComponent(self.parsedInfo.personName || '')
        + '&extractedGender=' + encodeURIComponent(self.parsedInfo.extractedGender || '')
        + '&extractedAge=' + (self.parsedInfo.extractedAge || '')
        + '&payload=' + payloadStr
        + '&needBind=' + (self.parsedInfo.needManualSelect ? 'true' : 'false')
        + '&matchConfidence=' + (self.parsedInfo.confidence || '')
        + '&matchLabel=' + encodeURIComponent(self.parsedInfo.matchLabel || '')
        + '&candidates=' + candidatesStr
        + '&extractedReportDate=' + encodeURIComponent(self.parsedInfo.reportDate || '')
      if (self.parsedInfo.matchedMemberId) {
        params += '&matchedMemberId=' + self.parsedInfo.matchedMemberId
      }
      if (self.childId) {
        params += '&childId=' + self.childId
      }
      if (self.familyId) {
        params += '&familyId=' + self.familyId
      }

      uni.navigateTo({ url: '/pages/health/report-confirm?' + params })
    }
  }
}
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  background: #F5F7FA;
}

/* ===== 导航栏 ===== */
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back {
  font-size: 32rpx;
  color: #5B9BD5;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}

/* ===== 提示条 ===== */
.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E3F2FD;
  margin: 20rpx 30rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
}
.tip-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.tip-text {
  font-size: 24rpx;
  color: #1565C0;
  line-height: 1.5;
}

/* ===== 表单 ===== */
.form-section {
  margin: 0 30rpx;
}
.form-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

/* 类型选择 */
.type-selector {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}
.type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  border-radius: 16rpx;
  background: #F5F7FA;
  border: 2rpx solid transparent;
}
.type-selected {
  background: #E3F2FD;
  border-color: #5B9BD5;
}
.type-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.type-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 文件上传 */
.file-upload-area {
  border: 2rpx dashed #CBD5E1;
  border-radius: 16rpx;
  padding: 32rpx 20rpx;
  text-align: center;
  background: #FAFBFC;
  cursor: pointer;
}
.file-upload-area:active {
  background: #F1F5F9;
}
.file-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.file-upload-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}
.file-upload-text {
  font-size: 28rpx;
  color: #5B9BD5;
  font-weight: 500;
}
.file-upload-hint {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 8rpx;
}
.file-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E3F2FD;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-top: 16rpx;
}
.file-name {
  flex: 1;
  font-size: 24rpx;
  color: #1565C0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size {
  font-size: 22rpx;
  color: #64748B;
  margin: 0 16rpx;
  flex-shrink: 0;
}
.file-remove {
  font-size: 24rpx;
  color: #EF4444;
  flex-shrink: 0;
  padding: 4rpx 8rpx;
}

/* 日期 */
.date-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
}
.date-arrow {
  font-size: 32rpx;
  color: #999;
}

/* 评分滑块 */
.score-input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.score-slider {
  flex: 1;
}
.score-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #5B9BD5;
  margin-left: 16rpx;
  min-width: 80rpx;
  text-align: center;
}

/* 备注 */
.note-input {
  width: 100%;
  min-height: 160rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #333;
  box-sizing: border-box;
}

/* 提交按钮 */
.submit-btn {
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  padding: 28rpx;
  border-radius: 16rpx;
  margin-top: 10rpx;
}
.submit-btn:active {
  opacity: 0.85;
}
.btn-disabled {
  opacity: 0.5;
}

/* ===== PDF解析预览 ===== */
.parsed-preview {
  background: #E8F5E9;
  border-radius: 16rpx;
  margin: 0 30rpx 20rpx;
  padding: 20rpx 24rpx;
  border: 2rpx solid #A5D6A7;
}
.parsed-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #2E7D32;
  margin-bottom: 12rpx;
}
.parsed-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8rpx;
}
.parsed-label {
  font-size: 24rpx;
  color: #388E3C;
  width: 140rpx;
  flex-shrink: 0;
}
.parsed-value {
  font-size: 24rpx;
  color: #1B5E20;
  font-weight: 500;
}
.match-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12rpx;
  padding: 12rpx 16rpx;
  background: #FFF3E0;
  border-radius: 8rpx;
}
.match-status.success {
  background: #E8F5E9;
}
.match-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}
.match-text {
  font-size: 24rpx;
  color: #E65100;
}
.match-status.success .match-text {
  color: #2E7D32;
}

/* ===== 家庭成员选择器 ===== */
.member-selector {
  margin: 0 30rpx 20rpx;
}
.member-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
}
.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 24rpx;
  background: #F5F7FA;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  min-width: 120rpx;
}
.member-selected {
  background: #E3F2FD;
  border-color: #5B9BD5;
}
.member-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.member-name {
  font-size: 24rpx;
  color: #333;
}
.add-member-btn {
  margin-top: 16rpx;
  padding: 20rpx;
  border: 1rpx dashed #4caf50;
  border-radius: 12rpx;
  text-align: center;
  background: #f6fbf6;
}
.add-member-text {
  font-size: 26rpx;
  color: #4caf50;
}

/* ===== 舌诊拍照区 ===== */
.photo-area {
  display: flex;
  justify-content: center;
  margin-bottom: 16rpx;
}
.photo-placeholder {
  width: 400rpx;
  height: 400rpx;
  border: 4rpx dashed #CBD5E1;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.photo-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}
.photo-text {
  font-size: 28rpx;
  color: #64748B;
}
.photo-sub {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 12rpx;
  text-align: center;
  padding: 0 20rpx;
}
.photo-preview {
  width: 400rpx;
  height: 400rpx;
  border-radius: 24rpx;
}
.photo-analyzing {
  width: 400rpx;
  height: 400rpx;
  border-radius: 24rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.analyzing-text {
  font-size: 28rpx;
  color: #5B9BD5;
}
.photo-retake {
  text-align: center;
  font-size: 24rpx;
  color: #5B9BD5;
  margin-top: 8rpx;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 60rpx;
}

/* ===== 上传方式（两种方式差异化） ===== */
.upload-methods {
  margin-bottom: 20rpx;
}

.upload-method {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

/* 方式 1：文件上传（蓝色基调，大块虚线风格） */
.method-file {
  border: 2rpx dashed #93C5FD;
  background: #F0F7FF;
}
.method-file .method-body {
  background: #fff;
  margin: 0 24rpx 24rpx;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2rpx solid #DBEAFE;
}
.method-file .method-body:active {
  background: #EFF6FF;
}

.method-tag {
  display: inline-block;
  font-size: 20rpx;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
  margin-bottom: 12rpx;
  font-weight: 500;
}
.tag-file {
  background: #DBEAFE;
  color: #1D4ED8;
}
.tag-photo {
  background: #FED7AA;
  color: #C2410C;
}

.method-header {
  padding: 24rpx 24rpx 16rpx;
}
.method-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #1E3A8A;
  margin-bottom: 6rpx;
}
.method-sub {
  display: block;
  font-size: 22rpx;
  color: #64748B;
  line-height: 1.4;
}

.method-icon-file {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
  font-size: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.method-cta-file {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.method-cta-file-main {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E3A8A;
  margin-bottom: 6rpx;
}
.method-cta-file-sub {
  font-size: 22rpx;
  color: #64748B;
}

.method-arrow {
  font-size: 40rpx;
  color: #94A3B8;
  font-weight: 300;
  margin-left: 12rpx;
}

/* 分隔提示 */
.method-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 24rpx 0;
}
.method-divider-text {
  font-size: 24rpx;
  color: #94A3B8;
  background: #F5F7FA;
  padding: 6rpx 24rpx;
  border-radius: 20rpx;
  letter-spacing: 4rpx;
}

/* 方式 2：拍照上传（橙色基调，实心卡片风格） */
.method-photo {
  border: 2rpx solid #FED7AA;
  background: #FFF7ED;
}
.method-photo .method-body {
  background: linear-gradient(135deg, #FB923C, #EA580C);
  margin: 0 24rpx 24rpx;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 6rpx 16rpx rgba(234, 88, 12, 0.25);
}
.method-photo .method-body:active {
  opacity: 0.92;
}

.method-photo .method-title {
  color: #7C2D12;
}
.method-icon-photo {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  color: #EA580C;
  font-size: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.method-cta-photo {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.method-cta-photo-main {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6rpx;
}
.method-cta-photo-sub {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.85);
}

.method-photo .method-arrow {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== 购买推荐 ===== */
.purchase-section {
  background: #F0F9FF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 30rpx 20rpx;
  border: 2rpx solid #BAE6FD;
}
.purchase-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.purchase-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.purchase-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #0369A1;
}
.purchase-scroll {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}
.purchase-card {
  display: inline-flex;
  flex-direction: column;
  width: 220rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.purchase-cover {
  width: 188rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background: #F1F5F9;
  margin-bottom: 8rpx;
}
.purchase-name {
  font-size: 22rpx;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4rpx;
}
.purchase-price {
  font-size: 24rpx;
  color: #EF4444;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.purchase-btn {
  background: #3B82F6;
  border-radius: 8rpx;
  padding: 8rpx 0;
  text-align: center;
}
.purchase-btn-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}
</style>