report-upload.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  1. <template>
  2. <view class="upload-container">
  3. <!-- 说明提示 -->
  4. <view class="tip-banner">
  5. <text class="tip-icon">📋</text>
  6. <text class="tip-text">{{ tipText }}</text>
  7. </view>
  8. <!-- 表单 -->
  9. <view class="form-section">
  10. <!-- 步骤1:报告大类 -->
  11. <view class="form-item category-box">
  12. <text class="form-label">选择报告类型</text>
  13. <view class="category-row">
  14. <view
  15. :class="['category-card', reportKind === 'health' ? 'category-active' : '']"
  16. @click="selectReportKind('health')">
  17. <text class="category-icon">🏥</text>
  18. <text class="category-title">健康报告</text>
  19. <text class="category-desc">体检 / 菌群 / 舌诊 / 体脂</text>
  20. </view>
  21. <view
  22. :class="['category-card', reportKind === 'dan' ? 'category-active category-dan' : '']"
  23. @click="selectReportKind('dan')">
  24. <text class="category-icon">🧠</text>
  25. <text class="category-title">DAN测评</text>
  26. <text class="category-desc">A2 / B4 等成长测评</text>
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 步骤2:DAN 维度(仅 DAN) -->
  31. <view class="form-item" v-if="reportKind === 'dan'">
  32. <text class="form-label">选择 DAN 测评维度</text>
  33. <view class="dim-grid">
  34. <view
  35. v-for="item in danDimensions"
  36. :key="item.code"
  37. :class="['dim-chip', danDimension === item.code ? 'dim-active' : '']"
  38. @click="selectDanDimension(item.code)">
  39. <text class="dim-chip-text">{{ item.label }}</text>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 上传方式 -->
  44. <view class="upload-methods" v-if="reportKind">
  45. <view class="upload-card card-file" @click="pickFile">
  46. <view class="upload-card-icon">📄</view>
  47. <text class="upload-card-title">从聊天选择文件</text>
  48. <text class="upload-card-desc" v-if="reportKind === 'health'">PDF / 图片<br/>体检、菌群等健康报告</text>
  49. <text class="upload-card-desc" v-else>PDF<br/>DAN 测评报告(推荐)</text>
  50. </view>
  51. <view class="upload-card card-photo" @click="takePhoto" v-if="reportKind === 'health'">
  52. <view class="upload-card-icon">📷</view>
  53. <text class="upload-card-title">拍照上传</text>
  54. <text class="upload-card-desc">拍摄舌象照片<br/>或单页纸质报告</text>
  55. </view>
  56. <view class="upload-card card-photo" @click="goBodyFatScale" v-if="reportKind === 'health'">
  57. <view class="upload-card-icon">⚖️</view>
  58. <text class="upload-card-title">体脂秤</text>
  59. <text class="upload-card-desc">拍摄体脂秤<br/>显示屏照片</text>
  60. </view>
  61. </view>
  62. <view class="kind-hint" v-if="!reportKind">
  63. <text class="kind-hint-text">请先选择「健康报告」或「DAN测评」,再上传文件</text>
  64. </view>
  65. <!-- 责任声明 -->
  66. <view class="form-item disclaimer-box">
  67. <view class="disclaimer-check" @click="toggleAgree">
  68. <view class="disclaimer-checkbox" :class="{ 'disclaimer-checked': agreedToTerms }">
  69. <text class="disclaimer-checkmark" v-if="agreedToTerms">✓</text>
  70. </view>
  71. <text class="disclaimer-label">我已阅读并同意以下声明</text>
  72. </view>
  73. <view class="disclaimer-content">
  74. <text class="disclaimer-text">我同意平台使用本报告数据进行分析,为我提供个性化健康解决方案;未经我授权,平台不会以任何形式将我的报告内容提供给其他任何个人或机构。</text>
  75. </view>
  76. </view>
  77. <!-- 上传中 -->
  78. <view class="form-item" v-if="uploading">
  79. <text class="form-label">上传中...</text>
  80. <view class="analyzing-status">
  81. <text class="analyzing-text">{{ uploadingText }}</text>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 上传说明:随类型切换 -->
  86. <view class="guide-section">
  87. <view class="guide-header">
  88. <text class="guide-header-icon">📖</text>
  89. <text class="guide-header-title">{{ reportKind === 'dan' ? 'DAN 测评说明' : '健康报告说明' }}</text>
  90. </view>
  91. <view class="guide-list" v-if="reportKind !== 'dan'">
  92. <view class="guide-item">
  93. <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📄</text></view>
  94. <view class="guide-info">
  95. <text class="guide-name">体检报告</text>
  96. <text class="guide-desc">血常规、尿常规、生化检验等,支持 PDF 或清晰照片</text>
  97. </view>
  98. </view>
  99. <view class="guide-item">
  100. <view class="guide-icon-box guide-icon-green"><text class="guide-icon">🦠</text></view>
  101. <view class="guide-info">
  102. <text class="guide-name">肠道菌群检测报告</text>
  103. <text class="guide-desc">支持 PDF 或清晰照片,AI 自动解读菌群健康</text>
  104. </view>
  105. </view>
  106. <view class="guide-item">
  107. <view class="guide-icon-box guide-icon-orange"><text class="guide-icon">👅</text></view>
  108. <view class="guide-info">
  109. <text class="guide-name">舌象照片</text>
  110. <text class="guide-desc">拍摄舌象照片,AI 辅助舌诊分析</text>
  111. </view>
  112. </view>
  113. <view class="guide-item">
  114. <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">⚖️</text></view>
  115. <view class="guide-info">
  116. <text class="guide-name">体脂秤报告</text>
  117. <text class="guide-desc">拍摄体脂秤显示屏,自动提取体重、BMI、体脂率等</text>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="guide-list" v-else>
  122. <view class="guide-item">
  123. <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">💖</text></view>
  124. <view class="guide-info">
  125. <text class="guide-name">心维度 A2</text>
  126. <text class="guide-desc">人格、情绪、自我概念与自驱力等心理测评报告</text>
  127. </view>
  128. </view>
  129. <view class="guide-item">
  130. <view class="guide-icon-box guide-icon-purple"><text class="guide-icon">🧠</text></view>
  131. <view class="guide-info">
  132. <text class="guide-name">智维度 B4</text>
  133. <text class="guide-desc">认知能力、学习力等双培强基 DAN 智维度报告</text>
  134. </view>
  135. </view>
  136. <view class="guide-item">
  137. <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📚</text></view>
  138. <view class="guide-info">
  139. <text class="guide-name">其他 DAN 维度</text>
  140. <text class="guide-desc">认知 / 学习 / 行为 / 生涯 / 校园 / 青春期等专项报告</text>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="guide-tips">
  145. <text class="guide-tips-title">温馨提示</text>
  146. <text class="guide-tips-item">· 请先选择报告类型,再选择文件上传</text>
  147. <text class="guide-tips-item">· 健康报告走菌群/体检解析;DAN 走测评维度解析</text>
  148. <text class="guide-tips-item">· 确认入库后将自动生成成长方案,可再分解为每日任务</text>
  149. </view>
  150. </view>
  151. <!-- 点击上传后的类型选择弹层(未预选时兜底) -->
  152. <view class="sheet-mask" v-if="showKindSheet" @click="closeKindSheet">
  153. <view class="sheet-panel" @click.stop>
  154. <text class="sheet-title">请选择要上传的报告</text>
  155. <view class="sheet-item" @click="onKindSheetPick('health')">
  156. <text class="sheet-item-title">健康报告</text>
  157. <text class="sheet-item-desc">体检、肠道菌群、舌诊、体脂等</text>
  158. </view>
  159. <view class="sheet-item" @click="onKindSheetPick('dan')">
  160. <text class="sheet-item-title">DAN测评</text>
  161. <text class="sheet-item-desc">A2 / B4 等成长测评 PDF</text>
  162. </view>
  163. <view class="sheet-cancel" @click="closeKindSheet">
  164. <text class="sheet-cancel-text">取消</text>
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  169. </template>
  170. <script>
  171. import { uploadReportOnly, danParsePreview, getReportCollectStatus } from '../../utils/api.js'
  172. import config from '@/config.js'
  173. var DAN_DIMENSIONS = [
  174. { code: 'mind', label: '心 A2' },
  175. { code: 'wisdom', label: '智 B4' },
  176. { code: 'cognition', label: '认知' },
  177. { code: 'learning', label: '学习' },
  178. { code: 'behavior', label: '行为' },
  179. { code: 'career', label: '生涯' },
  180. { code: 'campus', label: '校园' },
  181. { code: 'adolescent', label: '青春期' }
  182. ]
  183. export default {
  184. data() {
  185. return {
  186. memberId: null,
  187. uploading: false,
  188. selectedFile: null,
  189. photoPath: null,
  190. agreedToTerms: false,
  191. currentMemberId: null,
  192. extractedMetrics: [],
  193. reportKind: '',
  194. danDimension: 'mind',
  195. danDimensions: DAN_DIMENSIONS,
  196. showKindSheet: false,
  197. pendingIsPhoto: false,
  198. collectDraftId: null,
  199. collectTimer: null
  200. }
  201. },
  202. computed: {
  203. tipText: function() {
  204. if (this.reportKind === 'dan') {
  205. return '上传 DAN 测评 PDF(A2/B4 等),解析确认后生成个性化成长方案'
  206. }
  207. if (this.reportKind === 'health') {
  208. return '上传体检/菌群/舌诊等健康报告,解析确认后生成个性化健康方案'
  209. }
  210. return '请先选择「健康报告」或「DAN测评」,再上传文件生成方案'
  211. },
  212. uploadingText: function() {
  213. return this.reportKind === 'dan'
  214. ? '正在解析 DAN 测评报告...'
  215. : '正在上传文件,即将进入分析页面...'
  216. }
  217. },
  218. onLoad: function(options) {
  219. this.memberId = options.memberId ? parseInt(options.memberId) : null
  220. if (options.reportKind === 'health' || options.reportKind === 'dan') {
  221. this.reportKind = options.reportKind
  222. }
  223. if (options.dimension) {
  224. var codes = DAN_DIMENSIONS.map(function(d) { return d.code })
  225. if (codes.indexOf(options.dimension) >= 0) {
  226. this.danDimension = options.dimension
  227. this.reportKind = 'dan'
  228. }
  229. }
  230. if (options.bodyFatMetrics) {
  231. try {
  232. this.extractedMetrics = JSON.parse(decodeURIComponent(options.bodyFatMetrics))
  233. } catch (e) {}
  234. }
  235. },
  236. onUnload: function() {
  237. if (this.collectTimer) {
  238. clearInterval(this.collectTimer)
  239. this.collectTimer = null
  240. }
  241. },
  242. methods: {
  243. selectReportKind: function(kind) {
  244. this.reportKind = kind
  245. if (kind === 'dan' && !this.danDimension) {
  246. this.danDimension = 'mind'
  247. }
  248. },
  249. selectDanDimension: function(code) {
  250. this.danDimension = code
  251. },
  252. toggleAgree: function() {
  253. this.agreedToTerms = !this.agreedToTerms
  254. },
  255. ensureAgreed: function(callback) {
  256. if (this.agreedToTerms) {
  257. callback()
  258. return
  259. }
  260. var self = this
  261. uni.showModal({
  262. title: '数据使用声明',
  263. content: '上传报告即代表您同意平台使用本报告数据进行分析,为您提供个性化健康解决方案;未经您授权,平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
  264. confirmText: '同意继续',
  265. cancelText: '暂不',
  266. success: function(res) {
  267. if (res.confirm) {
  268. self.agreedToTerms = true
  269. callback()
  270. }
  271. }
  272. })
  273. },
  274. // 点击上传:未选类型时弹层;已选则直接走对应链路
  275. pickFile: function() {
  276. var self = this
  277. this.ensureAgreed(function() {
  278. self.beginUpload(false)
  279. })
  280. },
  281. takePhoto: function() {
  282. var self = this
  283. this.ensureAgreed(function() {
  284. self.beginUpload(true)
  285. })
  286. },
  287. beginUpload: function(isPhoto) {
  288. if (!this.reportKind) {
  289. this.pendingIsPhoto = isPhoto
  290. this.showKindSheet = true
  291. return
  292. }
  293. if (this.reportKind === 'dan') {
  294. if (!this.danDimension) {
  295. uni.showToast({ title: '请选择 DAN 测评维度', icon: 'none' })
  296. return
  297. }
  298. this.startPickDan()
  299. return
  300. }
  301. this.startPickHealth(isPhoto)
  302. },
  303. closeKindSheet: function() {
  304. this.showKindSheet = false
  305. },
  306. onKindSheetPick: function(kind) {
  307. this.reportKind = kind
  308. this.showKindSheet = false
  309. var isPhoto = this.pendingIsPhoto
  310. this.pendingIsPhoto = false
  311. if (kind === 'dan') {
  312. if (isPhoto) {
  313. uni.showToast({ title: 'DAN 请上传 PDF 文件', icon: 'none' })
  314. }
  315. this.startPickDan()
  316. return
  317. }
  318. this.startPickHealth(isPhoto)
  319. },
  320. startPickHealth: function(isPhoto) {
  321. var self = this
  322. if (isPhoto) {
  323. uni.chooseImage({
  324. count: 1,
  325. sourceType: ['camera', 'album'],
  326. success: function(res) {
  327. self.photoPath = res.tempFilePaths[0]
  328. self.uploadHealthAndGoConfirm(self.photoPath, 'image')
  329. }
  330. })
  331. } else {
  332. uni.chooseMessageFile({
  333. count: 1,
  334. type: 'file',
  335. extension: ['pdf'],
  336. success: function(res) {
  337. var files = res.tempFiles
  338. if (files && files.length > 0) {
  339. self.selectedFile = files[0]
  340. self.uploadHealthAndGoConfirm(files[0].path, '')
  341. }
  342. },
  343. fail: function(e) {
  344. console.log('选择文件取消或失败', e)
  345. }
  346. })
  347. }
  348. },
  349. startPickDan: function() {
  350. var self = this
  351. uni.chooseMessageFile({
  352. count: 1,
  353. type: 'file',
  354. extension: ['pdf'],
  355. success: function(res) {
  356. var files = res.tempFiles
  357. if (files && files.length > 0) {
  358. self.selectedFile = files[0]
  359. self.uploadDanAndGoPreview(files[0].path)
  360. }
  361. },
  362. fail: function() {
  363. uni.chooseImage({
  364. count: 1,
  365. success: function(res) {
  366. if (res.tempFiles && res.tempFiles.length > 0) {
  367. self.selectedFile = res.tempFiles[0]
  368. var path = res.tempFiles[0].path || (res.tempFilePaths && res.tempFilePaths[0])
  369. self.uploadDanAndGoPreview(path)
  370. }
  371. }
  372. })
  373. }
  374. })
  375. },
  376. // 健康报告:upload-only → 后台异步采集(指纹判定→脚本/opencode),完成后自动入库
  377. uploadHealthAndGoConfirm: function(filePath, type) {
  378. if (!filePath) return
  379. var self = this
  380. self.uploading = true
  381. uni.showLoading({ title: '上传中...' })
  382. uploadReportOnly(filePath, type).then(function(res) {
  383. uni.hideLoading()
  384. self.uploading = false
  385. var draftId = res.data && res.data.draftId
  386. if (!draftId) {
  387. uni.showToast({ title: (res && res.message) || '上传失败', icon: 'none' })
  388. return
  389. }
  390. self.collectDraftId = draftId
  391. uni.showToast({ title: '数据采集中,完成后可在报告列表查看', icon: 'none', duration: 3000 })
  392. self.startCollectPolling(draftId)
  393. }).catch(function(err) {
  394. uni.hideLoading()
  395. self.uploading = false
  396. var msg = (err && err.message) || '上传失败,请重试'
  397. uni.showToast({ title: msg, icon: 'none' })
  398. })
  399. },
  400. // 轮询采集状态,完成后仅提示,用户可前往报告列表查看
  401. startCollectPolling: function(draftId) {
  402. var self = this
  403. if (self.collectTimer) {
  404. clearInterval(self.collectTimer)
  405. }
  406. self.collectTimer = setInterval(function() {
  407. getReportCollectStatus(draftId).then(function(res) {
  408. var data = res.data || {}
  409. var status = data.parseStatus
  410. if (status === 'completed' || status === 'failed') {
  411. clearInterval(self.collectTimer)
  412. self.collectTimer = null
  413. if (status === 'completed') {
  414. uni.showToast({ title: '报告已采集完成', icon: 'success', duration: 2000 })
  415. } else {
  416. uni.showToast({ title: (data.parseError || '报告采集失败,请重试'), icon: 'none', duration: 3000 })
  417. }
  418. }
  419. }).catch(function() {
  420. // 轮询失败静默,下次继续
  421. })
  422. }, 4000)
  423. },
  424. // DAN测评:parse-preview → 预览确认页
  425. uploadDanAndGoPreview: function(filePath) {
  426. if (!filePath) return
  427. var self = this
  428. var memberId = self.memberId
  429. || (self.$store.state && self.$store.state.currentChildId)
  430. || uni.getStorageSync('currentChildId')
  431. || uni.getStorageSync('currentMemberId')
  432. if (!memberId) {
  433. uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
  434. return
  435. }
  436. self.uploading = true
  437. uni.showLoading({ title: '解析中...' })
  438. danParsePreview(filePath, self.danDimension, memberId).then(function(res) {
  439. uni.hideLoading()
  440. self.uploading = false
  441. if (!res || res.code !== 200 || !res.data) {
  442. uni.showToast({ title: (res && res.message) || '解析失败', icon: 'none' })
  443. return
  444. }
  445. try {
  446. uni.setStorageSync('danUploadPreview', {
  447. draftId: res.data.draftId || res.data.uploadId,
  448. previewData: res.data,
  449. dimension: self.danDimension,
  450. memberId: memberId
  451. })
  452. } catch (e) {}
  453. uni.redirectTo({
  454. url: '/pages/dan-assessment/report-upload?resume=1&dimension=' + self.danDimension
  455. })
  456. }).catch(function(err) {
  457. uni.hideLoading()
  458. self.uploading = false
  459. uni.showToast({ title: (err && err.message) || '上传失败', icon: 'none' })
  460. })
  461. },
  462. goBodyFatScale: function() {
  463. var self = this
  464. this.ensureAgreed(function() {
  465. self.reportKind = 'health'
  466. self.startBodyFatUpload()
  467. })
  468. },
  469. startBodyFatUpload: function() {
  470. var self = this
  471. uni.chooseImage({
  472. count: 1,
  473. sourceType: ['camera', 'album'],
  474. success: function(res) {
  475. self.photoPath = res.tempFilePaths[0]
  476. self.uploadBodyFat(self.photoPath)
  477. }
  478. })
  479. },
  480. uploadBodyFat: function(filePath) {
  481. var self = this
  482. self.uploading = true
  483. uni.showLoading({ title: 'AI 识别中...' })
  484. var token = uni.getStorageSync('token')
  485. uni.uploadFile({
  486. url: config.API_BASE_URL + '/api/health/report/bodyfat-upload',
  487. filePath: filePath,
  488. name: 'file',
  489. header: { 'Authorization': 'Bearer ' + token },
  490. success: function(uploadRes) {
  491. var data
  492. try { data = JSON.parse(uploadRes.data) } catch (e) { data = uploadRes.data }
  493. self.uploading = false
  494. uni.hideLoading()
  495. if (data && data.code === 200) {
  496. self.currentMemberId = data.data && data.data.memberId
  497. self.extractedMetrics = data.data && data.data.metrics || []
  498. uni.navigateTo({ url: '/pages/health/bodyfat-confirm' })
  499. } else {
  500. uni.showToast({ title: (data && data.message) || '上传失败', icon: 'none' })
  501. }
  502. },
  503. fail: function() {
  504. self.uploading = false
  505. uni.hideLoading()
  506. uni.showToast({ title: '网络错误', icon: 'none' })
  507. }
  508. })
  509. }
  510. }
  511. }
  512. </script>
  513. <style scoped>
  514. .upload-container {
  515. min-height: 100vh;
  516. background: #F5F7FA;
  517. }
  518. .tip-banner {
  519. display: flex;
  520. flex-direction: row;
  521. align-items: center;
  522. background: #E3F2FD;
  523. margin: 20rpx 30rpx;
  524. padding: 20rpx 24rpx;
  525. border-radius: 16rpx;
  526. }
  527. .tip-icon {
  528. font-size: 32rpx;
  529. margin-right: 16rpx;
  530. flex-shrink: 0;
  531. }
  532. .tip-text {
  533. font-size: 24rpx;
  534. color: #1565C0;
  535. line-height: 1.5;
  536. }
  537. .form-section {
  538. margin: 0 30rpx;
  539. }
  540. .form-item {
  541. background: #fff;
  542. border-radius: 16rpx;
  543. padding: 24rpx;
  544. margin-bottom: 20rpx;
  545. }
  546. .form-label {
  547. font-size: 26rpx;
  548. font-weight: bold;
  549. color: #333;
  550. display: block;
  551. margin-bottom: 16rpx;
  552. }
  553. .category-row {
  554. display: flex;
  555. flex-direction: row;
  556. gap: 16rpx;
  557. }
  558. .category-card {
  559. flex: 1;
  560. display: flex;
  561. flex-direction: column;
  562. align-items: center;
  563. padding: 28rpx 16rpx;
  564. border-radius: 16rpx;
  565. background: #F8FAFC;
  566. border: 2rpx solid #E2E8F0;
  567. }
  568. .category-active {
  569. background: #EFF6FF;
  570. border-color: #3B82F6;
  571. }
  572. .category-dan.category-active {
  573. background: #F5F3FF;
  574. border-color: #8B5CF6;
  575. }
  576. .category-icon {
  577. font-size: 40rpx;
  578. margin-bottom: 10rpx;
  579. }
  580. .category-title {
  581. font-size: 28rpx;
  582. font-weight: 600;
  583. color: #1E293B;
  584. margin-bottom: 6rpx;
  585. }
  586. .category-desc {
  587. font-size: 20rpx;
  588. color: #94A3B8;
  589. text-align: center;
  590. }
  591. .dim-grid {
  592. display: flex;
  593. flex-direction: row;
  594. flex-wrap: wrap;
  595. }
  596. .dim-chip {
  597. width: 23%;
  598. margin-right: 2%;
  599. margin-bottom: 12rpx;
  600. padding: 16rpx 0;
  601. text-align: center;
  602. border-radius: 12rpx;
  603. background: #F1F5F9;
  604. border: 2rpx solid transparent;
  605. box-sizing: border-box;
  606. }
  607. .dim-active {
  608. background: #EDE9FE;
  609. border-color: #8B5CF6;
  610. }
  611. .dim-chip-text {
  612. font-size: 22rpx;
  613. color: #334155;
  614. }
  615. .kind-hint {
  616. background: #FFFBEB;
  617. border-radius: 12rpx;
  618. padding: 20rpx;
  619. margin-bottom: 20rpx;
  620. border: 2rpx dashed #FCD34D;
  621. }
  622. .kind-hint-text {
  623. font-size: 24rpx;
  624. color: #92400E;
  625. }
  626. .analyzing-status {
  627. display: flex;
  628. flex-direction: row;
  629. align-items: center;
  630. }
  631. .analyzing-text {
  632. font-size: 26rpx;
  633. color: #5B9BD5;
  634. }
  635. .disclaimer-box {
  636. background: #FFF8F0;
  637. border: 2rpx solid #FDE68A;
  638. }
  639. .disclaimer-check {
  640. display: flex;
  641. flex-direction: row;
  642. align-items: center;
  643. margin-bottom: 12rpx;
  644. }
  645. .disclaimer-checkbox {
  646. width: 36rpx;
  647. height: 36rpx;
  648. border-radius: 6rpx;
  649. border: 2rpx solid #CBD5E1;
  650. background: #fff;
  651. display: flex;
  652. align-items: center;
  653. justify-content: center;
  654. flex-shrink: 0;
  655. margin-right: 12rpx;
  656. }
  657. .disclaimer-checked {
  658. background: #5B9BD5;
  659. border-color: #5B9BD5;
  660. }
  661. .disclaimer-checkmark {
  662. font-size: 24rpx;
  663. color: #fff;
  664. font-weight: bold;
  665. }
  666. .disclaimer-label {
  667. font-size: 24rpx;
  668. color: #333;
  669. font-weight: 500;
  670. }
  671. .disclaimer-content {
  672. background: #FFFDF5;
  673. border-radius: 10rpx;
  674. padding: 16rpx;
  675. margin-left: 48rpx;
  676. }
  677. .disclaimer-text {
  678. font-size: 22rpx;
  679. color: #92400E;
  680. line-height: 1.6;
  681. }
  682. .upload-methods {
  683. display: flex;
  684. flex-direction: row;
  685. gap: 16rpx;
  686. margin-bottom: 20rpx;
  687. }
  688. .upload-card {
  689. flex: 1;
  690. display: flex;
  691. flex-direction: column;
  692. align-items: center;
  693. justify-content: center;
  694. padding: 32rpx 12rpx;
  695. border-radius: 20rpx;
  696. text-align: center;
  697. min-height: 220rpx;
  698. }
  699. .upload-card:active {
  700. opacity: 0.85;
  701. }
  702. .upload-card-icon {
  703. width: 80rpx;
  704. height: 80rpx;
  705. border-radius: 20rpx;
  706. font-size: 40rpx;
  707. display: flex;
  708. align-items: center;
  709. justify-content: center;
  710. margin-bottom: 16rpx;
  711. }
  712. .upload-card-title {
  713. font-size: 26rpx;
  714. font-weight: 600;
  715. color: #333;
  716. margin-bottom: 8rpx;
  717. }
  718. .upload-card-desc {
  719. font-size: 20rpx;
  720. color: #94A3B8;
  721. line-height: 1.5;
  722. }
  723. .card-file {
  724. background: #F0F7FF;
  725. border: 2rpx dashed #93C5FD;
  726. }
  727. .card-file .upload-card-icon {
  728. background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  729. color: #fff;
  730. }
  731. .card-photo {
  732. background: #FFF7ED;
  733. border: 2rpx solid #FED7AA;
  734. }
  735. .card-photo .upload-card-icon {
  736. background: linear-gradient(135deg, #FB923C, #EA580C);
  737. color: #fff;
  738. }
  739. .guide-section {
  740. margin: 0 30rpx 30rpx;
  741. background: #fff;
  742. border-radius: 20rpx;
  743. padding: 28rpx 24rpx;
  744. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  745. }
  746. .guide-header {
  747. display: flex;
  748. flex-direction: row;
  749. align-items: center;
  750. margin-bottom: 20rpx;
  751. }
  752. .guide-header-icon {
  753. font-size: 32rpx;
  754. margin-right: 12rpx;
  755. }
  756. .guide-header-title {
  757. font-size: 28rpx;
  758. font-weight: 600;
  759. color: #1E293B;
  760. }
  761. .guide-item {
  762. display: flex;
  763. flex-direction: row;
  764. align-items: flex-start;
  765. margin-bottom: 20rpx;
  766. }
  767. .guide-icon-box {
  768. width: 64rpx;
  769. height: 64rpx;
  770. border-radius: 16rpx;
  771. display: flex;
  772. align-items: center;
  773. justify-content: center;
  774. margin-right: 16rpx;
  775. flex-shrink: 0;
  776. }
  777. .guide-icon {
  778. font-size: 32rpx;
  779. }
  780. .guide-icon-blue { background: #DBEAFE; }
  781. .guide-icon-green { background: #DCFCE7; }
  782. .guide-icon-orange { background: #FFEDD5; }
  783. .guide-icon-purple { background: #EDE9FE; }
  784. .guide-icon-teal { background: #CCFBF1; }
  785. .guide-info {
  786. flex: 1;
  787. }
  788. .guide-name {
  789. font-size: 26rpx;
  790. font-weight: 600;
  791. color: #334155;
  792. display: block;
  793. margin-bottom: 4rpx;
  794. }
  795. .guide-desc {
  796. font-size: 22rpx;
  797. color: #94A3B8;
  798. line-height: 1.5;
  799. }
  800. .guide-tips {
  801. margin-top: 8rpx;
  802. padding-top: 16rpx;
  803. border-top: 1rpx solid #F1F5F9;
  804. }
  805. .guide-tips-title {
  806. font-size: 24rpx;
  807. font-weight: 600;
  808. color: #64748B;
  809. display: block;
  810. margin-bottom: 8rpx;
  811. }
  812. .guide-tips-item {
  813. font-size: 22rpx;
  814. color: #94A3B8;
  815. display: block;
  816. line-height: 1.7;
  817. }
  818. .sheet-mask {
  819. position: fixed;
  820. left: 0;
  821. right: 0;
  822. top: 0;
  823. bottom: 0;
  824. background: rgba(15, 23, 42, 0.45);
  825. z-index: 1000;
  826. display: flex;
  827. flex-direction: column;
  828. justify-content: flex-end;
  829. }
  830. .sheet-panel {
  831. background: #fff;
  832. border-radius: 24rpx 24rpx 0 0;
  833. padding: 32rpx 28rpx calc(32rpx + env(safe-area-inset-bottom));
  834. }
  835. .sheet-title {
  836. font-size: 30rpx;
  837. font-weight: 600;
  838. color: #0F172A;
  839. display: block;
  840. text-align: center;
  841. margin-bottom: 24rpx;
  842. }
  843. .sheet-item {
  844. background: #F8FAFC;
  845. border-radius: 16rpx;
  846. padding: 28rpx 24rpx;
  847. margin-bottom: 16rpx;
  848. }
  849. .sheet-item:active {
  850. background: #EFF6FF;
  851. }
  852. .sheet-item-title {
  853. font-size: 28rpx;
  854. font-weight: 600;
  855. color: #1E293B;
  856. display: block;
  857. margin-bottom: 6rpx;
  858. }
  859. .sheet-item-desc {
  860. font-size: 22rpx;
  861. color: #94A3B8;
  862. }
  863. .sheet-cancel {
  864. margin-top: 8rpx;
  865. padding: 24rpx;
  866. text-align: center;
  867. }
  868. .sheet-cancel-text {
  869. font-size: 28rpx;
  870. color: #64748B;
  871. }
  872. </style>