edit.vue 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
  1. <template>
  2. <view class="container">
  3. <view class="container-body">
  4. <!-- 问卷 -->
  5. <view class="listbox multiplebox" v-for="(item,index) in list" :key="index">
  6. <view class="listbox-titlebox">
  7. <text>{{index + 1}}.</text>
  8. <view class="listbox-titletag" v-if="item.type == 2">多选</view>
  9. <text class="listbox-title">{{item.name}}</text>
  10. </view>
  11. <!-- 多选 -->
  12. <view class="listbox-option" v-if="item.type == 2">
  13. <view v-for="(option,i) in item.question" :key="i" class="listbox-option-flex">
  14. <view
  15. @click="handleMultiple(item,index,option)"
  16. :class="item.value.indexOf(option.name) === -1 ? 'listbox-option-item' : 'listbox-option-item option-active'">
  17. {{option.name}}
  18. </view>
  19. <view class="otherinput" v-if="option.isWrite == 1 && item.value.indexOf(option.name) !== -1" @click="handleEdit(index,i)">
  20. {{option.writeVal || '请输入相关描述'}}
  21. </view>
  22. </view>
  23. </view>
  24. <!-- 单选 -->
  25. <view style="margin-top: 20rpx;" v-if="item.type == 1">
  26. <view class="listbox-choose" v-for="(option,i) in item.question" :key="i" @click="handleChoose(item,option)" >
  27. <image class="choose-icon" v-if="item.value == option.name"
  28. :src="baseUrl+'/images/healthRecords/choose_icon.png'" mode="aspectFill"></image>
  29. <image class="choose-icon" v-if="item.value != option.name"
  30. :src="baseUrl+'/images/healthRecords/choose_no_icon.png'" mode="aspectFill"></image>
  31. <text style="flex-shrink: 0;">{{option.name}}</text>
  32. <view class="choose-input" v-if="option.isWrite == 1 && item.value == option.name" @click.stop="handleEdit(index,i)">
  33. {{option.writeVal || '请输入相关描述'}}
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 饮食调查 -->
  38. <view class="dietary-survey" v-if="item.type == 3">
  39. <view class="dietary-survey-item" v-for="(option,i) in item.question" :key="i"
  40. @click="handleChoose(item,option)">
  41. <view class="dietary-survey-iteml" v-if="option.name !== '每周多少次'">
  42. <view :class="item.value == option.name ? 'dietary-survey-active':''">{{i+1}}</view>
  43. <text>{{option.name}}</text>
  44. </view>
  45. <view class="dietary-survey-input" v-if="item.name == '平时应酬' && option.name === '每周多少次' && option.writeVal">
  46. 每周{{option.writeVal || '--'}}次
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <u-popup :show="show" @close="close" >
  53. <view class="popbox">
  54. <view class="popbox-title" v-if="list&&list.length>0">{{chooseIndex+1}}.{{list[chooseIndex].name}}</view>
  55. <view class="popbox-desc" v-if="list&&list.length>0">选项:{{list[chooseIndex].question[chooseItemIdx].name}}</view>
  56. <view class="uni-textarea-wrapper">
  57. <textarea class="textarea" placeholder-style="font-size: 28rpx;" :focus="focus" placeholder="请输入相关描述" :value="writeVal" @input="handleinput"/>
  58. <view class="popbox-confirm-btn" v-if="this.formType!='dietList' && this.formType!='sleepList'&&this.formType!='sportList'" @click="popSubmit">确认</view>
  59. </view>
  60. </view>
  61. </u-popup>
  62. <!-- footer -->
  63. <view class="footer" v-if="this.formType!='dietList' && this.formType!='sleepList'&&this.formType!='sportList'">
  64. <button class="footer-btn" :loading="btnLoading" :disabled="btnLoading" @click="handelSubmit">确认</button>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import {getUserInfo} from '@/api/user';
  70. import {
  71. HealthData,
  72. healthHistoryTempList,
  73. editRecord,
  74. myRecord,
  75. HealthLife
  76. } from "@/api/healthRecords.js"
  77. export default {
  78. data() {
  79. return {
  80. baseUrl:uni.getStorageSync('requestPath'),
  81. show:false,
  82. focus: false,
  83. chooseIndex: 0,
  84. chooseItemIdx: 0,
  85. writeVal: "",
  86. btnLoading: false,
  87. id: undefined,
  88. formType: "",
  89. title: "",
  90. user: {},
  91. list: [],
  92. // 饮食调查
  93. dietList: [
  94. {
  95. name: "三餐规律",
  96. type: 3,
  97. value: "",
  98. question: [
  99. {
  100. name: "非常规律",
  101. value: 1,
  102. isWrite: 0,
  103. writeVal: ""
  104. },{
  105. name: "比较规律",
  106. value: 2,
  107. isWrite: 0,
  108. writeVal: ""
  109. },{
  110. name: "没有规律",
  111. value: 3,
  112. isWrite: 0,
  113. writeVal: ""
  114. }
  115. ],
  116. },{
  117. name: "就餐习惯",
  118. type: 3,
  119. value: "",
  120. question: [
  121. {
  122. name: "暴饮暴食",
  123. value: 1,
  124. isWrite: 0,
  125. writeVal: ""
  126. },{
  127. name: "压力大经常进食",
  128. value: 2,
  129. isWrite: 0,
  130. writeVal: ""
  131. },{
  132. name: "就外就餐多",
  133. value: 3,
  134. isWrite: 0,
  135. writeVal: ""
  136. },{
  137. name: "夜宵",
  138. value: 4,
  139. isWrite: 0,
  140. writeVal: ""
  141. },{
  142. name: "不吃早餐",
  143. value: 5,
  144. isWrite: 0,
  145. writeVal: ""
  146. }
  147. ],
  148. },{
  149. name: "进食速度",
  150. type: 3,
  151. value: "",
  152. question: [
  153. {
  154. name: "大约20-30分钟",
  155. value: 1,
  156. isWrite: 0,
  157. writeVal: ""
  158. },{
  159. name: "大约10-20分钟",
  160. value: 2,
  161. isWrite: 0,
  162. writeVal: ""
  163. },{
  164. name: "大约5-10分钟",
  165. value: 3,
  166. isWrite: 0,
  167. writeVal: ""
  168. }
  169. ],
  170. },{
  171. name: "酒类",
  172. type: 3,
  173. value: "",
  174. question: [
  175. {
  176. name: "从不喝酒",
  177. value: 1,
  178. isWrite: 0,
  179. writeVal: ""
  180. },{
  181. name: "每天",
  182. value: 2,
  183. isWrite: 0,
  184. writeVal: ""
  185. },{
  186. name: "大于3次/周",
  187. value: 3,
  188. isWrite: 0,
  189. writeVal: ""
  190. },{
  191. name: "小于3次/周",
  192. value: 4,
  193. isWrite: 0,
  194. writeVal: ""
  195. }
  196. ],
  197. },{
  198. name: "平时应酬",
  199. type: 3,
  200. value: "",
  201. question: [
  202. {
  203. name: "多",
  204. value: 1,
  205. isWrite: 0,
  206. writeVal: ""
  207. },{
  208. name: "一般",
  209. value: 2,
  210. isWrite: 0,
  211. writeVal: ""
  212. },{
  213. name: "少",
  214. value: 3,
  215. isWrite: 0,
  216. writeVal: ""
  217. },{
  218. name: "每周多少次",
  219. value: 3,
  220. isWrite: 1,
  221. writeVal: ""
  222. }
  223. ],
  224. },{
  225. name: "喝水量",
  226. type: 3,
  227. value: "",
  228. question: [
  229. {
  230. name: "低于1000ml",
  231. value: 1,
  232. isWrite: 0,
  233. writeVal: ""
  234. },{
  235. name: "1000ml-1500ml",
  236. value: 2,
  237. isWrite: 0,
  238. writeVal: ""
  239. },{
  240. name: "1500ml-1700ml",
  241. value: 3,
  242. isWrite: 0,
  243. writeVal: ""
  244. },{
  245. name: "1700ml以上",
  246. value: 4,
  247. isWrite: 0,
  248. writeVal: ""
  249. }
  250. ],
  251. },{
  252. name: "您每天吃的食物种类多吗?",
  253. type: 3,
  254. value: "",
  255. question: [
  256. {
  257. name: "种类非常多,12种以上",
  258. value: 1,
  259. isWrite: 0,
  260. writeVal: ""
  261. },{
  262. name: "一般6-10种",
  263. value: 2,
  264. isWrite: 0,
  265. writeVal: ""
  266. },{
  267. name: "种类较少3-5种",
  268. value: 3,
  269. isWrite: 0,
  270. writeVal: ""
  271. },{
  272. name: "种类比较固定",
  273. value: 4,
  274. isWrite: 0,
  275. writeVal: ""
  276. }
  277. ],
  278. },{
  279. name: "您是否有抽烟习惯?",
  280. type: 3,
  281. value: "",
  282. question: [
  283. {
  284. name: "是",
  285. value: 1,
  286. isWrite: 0,
  287. writeVal: ""
  288. },{
  289. name: "无",
  290. value: 2,
  291. isWrite: 0,
  292. writeVal: ""
  293. }
  294. ],
  295. },
  296. ],
  297. sleepList: [
  298. {
  299. name: "睡眠状况",
  300. type: 3,
  301. value: "",
  302. question: [
  303. {
  304. name: "很差",
  305. value: 1,
  306. isWrite: 0,
  307. writeVal: ""
  308. },{
  309. name: "差",
  310. value: 2,
  311. isWrite: 0,
  312. writeVal: ""
  313. },{
  314. name: "一般",
  315. value: 3,
  316. isWrite: 0,
  317. writeVal: ""
  318. },{
  319. name: "良好",
  320. value: 4,
  321. isWrite: 0,
  322. writeVal: ""
  323. }
  324. ],
  325. },{
  326. name: "睡眠时间",
  327. type: 3,
  328. value: "",
  329. question: [
  330. {
  331. name: "<6小时",
  332. value: 1,
  333. isWrite: 0,
  334. writeVal: ""
  335. },{
  336. name: "6-8小时",
  337. value: 2,
  338. isWrite: 0,
  339. writeVal: ""
  340. },{
  341. name: "9-10小时",
  342. value: 3,
  343. isWrite: 0,
  344. writeVal: ""
  345. },{
  346. name: ">10小时",
  347. value: 4,
  348. isWrite: 0,
  349. writeVal: ""
  350. }
  351. ],
  352. },{
  353. name: "经常熬夜吗?",
  354. type: 3,
  355. value: "",
  356. question: [
  357. {
  358. name: "经常",
  359. value: 1,
  360. isWrite: 0,
  361. writeVal: ""
  362. },{
  363. name: "偶尔",
  364. value: 2,
  365. isWrite: 0,
  366. writeVal: ""
  367. },{
  368. name: "很少",
  369. value: 3,
  370. isWrite: 0,
  371. writeVal: ""
  372. },{
  373. name: "无",
  374. value: 4,
  375. isWrite: 0,
  376. writeVal: ""
  377. }
  378. ],
  379. },
  380. ],
  381. sportList: [
  382. {
  383. name: "日常运动量",
  384. type: 3,
  385. value: "",
  386. question: [
  387. {
  388. name: "久坐不动",
  389. value: 1,
  390. isWrite: 0,
  391. writeVal: ""
  392. },{
  393. name: "轻度运动(3000-6000步)",
  394. value: 2,
  395. isWrite: 0,
  396. writeVal: ""
  397. },{
  398. name: "中度运动(6000-10000步)",
  399. value: 3,
  400. isWrite: 0,
  401. writeVal: ""
  402. },{
  403. name: "大量运动(一万步以上)",
  404. value: 4,
  405. isWrite: 0,
  406. writeVal: ""
  407. }
  408. ],
  409. },{
  410. name: "日常是否有运动?",
  411. type: 2,
  412. value: "",
  413. question: [
  414. {
  415. name: "无",
  416. value: 1,
  417. isWrite: 0,
  418. writeVal: ""
  419. },{
  420. name: "散步",
  421. value: 2,
  422. isWrite: 0,
  423. writeVal: ""
  424. },{
  425. name: "跑步",
  426. value: 3,
  427. isWrite: 0,
  428. writeVal: ""
  429. },{
  430. name: "自行车",
  431. value: 4,
  432. isWrite: 0,
  433. writeVal: ""
  434. },{
  435. name: "舞蹈或太极拳",
  436. value: 5,
  437. isWrite: 0,
  438. writeVal: ""
  439. },{
  440. name: "上下楼梯",
  441. value: 6,
  442. isWrite: 0,
  443. writeVal: ""
  444. },{
  445. name: "球类",
  446. value: 7,
  447. isWrite: 0,
  448. writeVal: ""
  449. },{
  450. name: "游泳",
  451. value: 8,
  452. isWrite: 0,
  453. writeVal: ""
  454. },{
  455. name: "其他",
  456. value: 9,
  457. isWrite: 1,
  458. writeVal: ""
  459. }
  460. ],
  461. },{
  462. name: "您平均每周锻炼次数?",
  463. type: 3,
  464. value: "",
  465. question: [
  466. {
  467. name: "≤2次",
  468. value: 1,
  469. isWrite: 0,
  470. writeVal: ""
  471. },{
  472. name: "3-5次",
  473. value: 2,
  474. isWrite: 0,
  475. writeVal: ""
  476. },{
  477. name: "≥5次",
  478. value: 3,
  479. isWrite: 0,
  480. writeVal: ""
  481. }
  482. ],
  483. },{
  484. name: "平均每次锻炼时间是多少分钟?",
  485. type: 3,
  486. value: "",
  487. question: [
  488. {
  489. name: "≤20",
  490. value: 1,
  491. isWrite: 0,
  492. writeVal: ""
  493. },{
  494. name: "20-40",
  495. value: 2,
  496. isWrite: 0,
  497. writeVal: ""
  498. },{
  499. name: "41-60",
  500. value: 3,
  501. isWrite: 0,
  502. writeVal: ""
  503. },{
  504. name: ">60",
  505. value: 3,
  506. isWrite: 0,
  507. writeVal: ""
  508. }
  509. ],
  510. }
  511. ]
  512. }
  513. },
  514. onLoad(option) {
  515. this.id = option.id
  516. this.formType = option.formType
  517. const formTypeOption = {
  518. "healthHistory": "填写疾病史",
  519. "symptomHistory": "填写症状史",
  520. "familyHistory": "填写家族史",
  521. "drugHistory": "填写用药史",
  522. "allergyHistory": "填写过敏史",
  523. "dietList": "饮食",
  524. "sleepList": "睡眠情况",
  525. "sportList": "运动",
  526. }
  527. this.title = formTypeOption[this.formType] || ""
  528. uni.setNavigationBarTitle({
  529. title: this.title || "",
  530. });
  531. },
  532. onShow() {
  533. this.user = {}
  534. this.$isLogin().then(
  535. res => {
  536. if(res){
  537. this.getUserInfo();
  538. }
  539. },
  540. rej => {}
  541. );
  542. },
  543. methods: {
  544. getUserInfo(){
  545. getUserInfo().then(
  546. res => {
  547. if(res.code==200){
  548. if(res.user!=null){
  549. this.user=res.user;
  550. if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") {
  551. this.getHealthLife()
  552. } else {
  553. this.getMyRecord()
  554. }
  555. }
  556. }else{
  557. uni.showToast({
  558. icon:'none',
  559. title: "请求失败",
  560. });
  561. }
  562. },
  563. rej => {}
  564. );
  565. },
  566. handleEdit(index,i) {
  567. this.chooseIndex = index
  568. this.chooseItemIdx = i
  569. this.focus = true
  570. this.writeVal = this.list[index].question[i].writeVal
  571. this.show=true;
  572. },
  573. close() {
  574. this.focus = false
  575. this.show=false;
  576. },
  577. // 输入
  578. handleinput(e) {
  579. this.writeVal = e.detail.value
  580. },
  581. popSubmit() {
  582. this.list[this.chooseIndex].question[this.chooseItemIdx].writeVal = this.writeVal
  583. this.close()
  584. },
  585. // 健康生活回显
  586. getHealthLife() {
  587. const param = {
  588. type: this.formType=="dietList" ? 1 : this.formType=="sleepList" ? 2 :this.formType=="sportList" ? 3 : undefined,
  589. userId: this.user.userId
  590. }
  591. HealthLife(param).then(res => {
  592. if (res.code == 200 && res.data) {
  593. this.list = JSON.parse(res.data.formJson)
  594. }
  595. },
  596. rej => {}
  597. )
  598. },
  599. // 健康档案回显
  600. getMyRecord() {
  601. myRecord().then(res => {
  602. if (res.code == 200 && res.data) {
  603. if(this.formType) {
  604. this.list = res.data[this.formType] ? JSON.parse(res.data[this.formType]) : []
  605. }
  606. }
  607. },
  608. rej => {}
  609. )
  610. },
  611. // 单选
  612. handleChoose(item,option) {
  613. if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") return
  614. if(item.name == '平时应酬' && option.name === '每周多少次') return
  615. item.value = option.name
  616. },
  617. // 多选
  618. handleMultiple(item, index, option) {
  619. if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") return
  620. const arry = item.value ? item.value.split(',') : []
  621. if (arry.indexOf(option.name) === -1) {
  622. arry.push(option.name)
  623. item.value = arry.join(',')
  624. } else {
  625. arry.splice(arry.indexOf(option.name), 1)
  626. item.value = arry.join(',')
  627. }
  628. },
  629. // 提交健康档案
  630. handelSubmit() {
  631. for (let i = 0; i < this.list.length; i++) {
  632. // 检查当前项的字段是否有值
  633. if (!this.list[i].value) {
  634. uni.showToast({
  635. title: "请检查健康档案是否填写完整",
  636. icon: "none"
  637. })
  638. return
  639. }
  640. }
  641. const arry = this.list.map((item, index) => ({
  642. id: index + 1,
  643. name: item.name,
  644. sort: item.sort,
  645. type: item.type,
  646. value: item.value,
  647. questionType: item.questionType,
  648. question: item.question.map(it=>({
  649. ...it,
  650. writeVal: item.value.indexOf(it.name) == -1 ? '' : it.writeVal // 清空没有选中的选项输入的文字
  651. }))
  652. }));
  653. if(this.formType!="dietList" && this.formType!="sleepList" && this.formType!="sportList") {
  654. this.editHealthForm(arry)
  655. }
  656. },
  657. // 修改健康史
  658. editHealthForm(arry) {
  659. const filterByQuestionType = (questionType) => arry.filter(item => item.questionType && item
  660. .questionType === questionType);
  661. const symptomHistory = filterByQuestionType("symptomHistory");
  662. const drugHistory = filterByQuestionType("drugHistory");
  663. const allergyHistory = filterByQuestionType("allergyHistory");
  664. const familyHistory = filterByQuestionType("familyHistory");
  665. const healthHistory = arry.filter(item => !item.questionType);
  666. const param = {
  667. id: Number(this.id || 0),
  668. symptomHistory: this.formType == "symptomHistory" ? JSON.stringify(symptomHistory) : undefined, // 症状史
  669. healthHistory: this.formType == "healthHistory" ? JSON.stringify(healthHistory) : undefined, // 健康史
  670. drugHistory: this.formType == "drugHistory" ? JSON.stringify(drugHistory) : undefined, // 用药史
  671. allergyHistory: this.formType == "allergyHistory" ? JSON.stringify(allergyHistory) : undefined, // 过敏史
  672. familyHistory: this.formType == "familyHistory" ? JSON.stringify(familyHistory) : undefined // 家族史
  673. };
  674. this.btnLoading = true
  675. editRecord(param).then(res => {
  676. this.btnLoading = false
  677. if (res.code == 200) {
  678. uni.showToast({
  679. title: "修改成功",
  680. icon: 'none',
  681. duration: 1000,
  682. });
  683. var timer = setTimeout(function() {
  684. uni.redirectTo({
  685. url: "/pages_user/healthRecords/index"
  686. });
  687. clearTimeout('timer')
  688. }, 1000)
  689. } else {
  690. uni.showToast({
  691. title: res.msg,
  692. icon: "none"
  693. })
  694. }
  695. },
  696. rej => {
  697. this.btnLoading = false
  698. }
  699. ).catch(()=>{
  700. this.btnLoading = false
  701. });
  702. }
  703. }
  704. }
  705. </script>
  706. <style scoped lang="scss">
  707. .container {
  708. position: relative;
  709. font-family: PingFang SC, PingFang SC;
  710. &-body {
  711. position: relative;
  712. padding: 32rpx 24rpx;
  713. padding-bottom: calc(var(--window-bottom) + 152rpx);
  714. }
  715. }
  716. .userbox {
  717. padding: 32rpx;
  718. margin-bottom: 20rpx;
  719. background: #FFFFFF;
  720. border-radius: 16rpx 16rpx 16rpx 16rpx;
  721. display: flex;
  722. flex-direction: row;
  723. align-items: center;
  724. justify-content:space-between;
  725. overflow: hidden;
  726. .userbind {
  727. width: 100%;
  728. padding: 8rpx 0;
  729. font-weight: 400;
  730. font-size: 34rpx;
  731. color: #FF5C03;
  732. display: flex;
  733. flex-direction: row;
  734. align-items: center;
  735. justify-content:center;
  736. image {
  737. width: 48rpx;
  738. height: 48rpx;
  739. margin-right: 16rpx;
  740. }
  741. }
  742. &-headimg {
  743. flex-shrink: 0;
  744. width: 140rpx;
  745. height: 140rpx;
  746. }
  747. &-left {
  748. flex-shrink: 0;
  749. flex: 1;
  750. display: flex;
  751. flex-direction: row;
  752. align-items: center;
  753. justify-content:flex-start;
  754. }
  755. &-name {
  756. display: flex;
  757. flex-direction: row;
  758. align-items: center;
  759. justify-content:flex-start;
  760. flex-wrap: wrap;
  761. gap: 0 30rpx;
  762. }
  763. &-idcard {
  764. font-weight: 500;
  765. font-size: 28rpx;
  766. }
  767. &-info {
  768. margin-left: 24rpx;
  769. font-weight: 600;
  770. font-size: 32rpx;
  771. color: #222222;
  772. &-tag {
  773. margin-top: 30rpx;
  774. font-weight: 400;
  775. font-size: 22rpx;
  776. color: #FF5C03;
  777. display: flex;
  778. flex-direction: row;
  779. align-items: center;
  780. justify-content:flex-start;
  781. view {
  782. min-width: 62rpx;
  783. height: 42rpx;
  784. padding: 0 20rpx;
  785. box-sizing: border-box;
  786. background: #FCF0E7;
  787. border-radius: 24rpx 24rpx 24rpx 24rpx;
  788. text-align: center;
  789. line-height: 42rpx;
  790. margin-right: 14rpx;
  791. }
  792. }
  793. }
  794. }
  795. .listbox {
  796. padding: 32rpx 24rpx;
  797. margin-bottom: 20rpx;
  798. background: #FFFFFF;
  799. border-radius: 16rpx 16rpx 16rpx 16rpx;
  800. font-family: PingFang SC, PingFang SC;
  801. font-weight: 400;
  802. font-size: 28rpx;
  803. color: #222222;
  804. &-titlebox {
  805. font-weight: 600;
  806. font-size: 34rpx;
  807. white-space: normal;
  808. }
  809. &-titletag {
  810. min-width: 80rpx;
  811. height: 40rpx;
  812. padding: 0 16rpx;
  813. margin: 0 12rpx;
  814. flex-shrink: 0;
  815. box-sizing: border-box;
  816. line-height: 40rpx;
  817. text-align: center;
  818. background: #FF5C03;
  819. border-radius: 8rpx 8rpx 8rpx 8rpx;
  820. font-weight: 400;
  821. font-size: 24rpx;
  822. color: #FFFFFF;
  823. display: inline-block;
  824. }
  825. &-option {
  826. margin-top: 34rpx;
  827. display: flex;
  828. flex-direction: row;
  829. align-items: center;
  830. justify-content:flex-start;
  831. flex-wrap: wrap;
  832. gap: 18rpx;
  833. &-flex {
  834. display: flex;
  835. flex-direction: row;
  836. align-items: center;
  837. justify-content:flex-start;
  838. gap: 18rpx;
  839. }
  840. &-item {
  841. display: inline-flex;
  842. min-width: 206rpx;
  843. min-height: 72rpx;
  844. padding: 16rpx;
  845. box-sizing: border-box;
  846. border-radius: 16rpx 16rpx 16rpx 16rpx;
  847. border: 2rpx solid #ECECEC;
  848. align-items: center;
  849. justify-content: center;
  850. }
  851. }
  852. .otherinput {
  853. width: 430rpx;
  854. height: 72rpx;
  855. overflow: hidden;
  856. padding: 16rpx 24rpx;
  857. box-sizing: border-box;
  858. background: #F5F7FA;
  859. border-radius: 16rpx 16rpx 16rpx 16rpx;
  860. font-weight: 400;
  861. font-size: 28rpx;
  862. color: #999999;
  863. justify-content: flex-start;
  864. overflow: hidden;
  865. white-space: nowrap;
  866. text-overflow: ellipsis;
  867. }
  868. .option-active {
  869. font-weight: 400;
  870. font-size: 28rpx;
  871. color: #FF5C03;
  872. background: #FCF0E7;
  873. border: 2rpx solid #FF5C03;
  874. }
  875. &-choose {
  876. display: flex;
  877. flex-direction: row;
  878. align-items: center;
  879. justify-content:flex-start;
  880. min-height: 86rpx;
  881. image {
  882. flex-shrink: 0;
  883. width: 36rpx;
  884. height: 36rpx;
  885. margin-right: 18rpx;
  886. }
  887. }
  888. .choose-input {
  889. width: 430rpx;
  890. height: 72rpx;
  891. padding: 16rpx 24rpx;
  892. box-sizing: border-box;
  893. margin-left: 42rpx;
  894. background: #FFFFFF;
  895. border-radius: 16rpx 16rpx 16rpx 16rpx;
  896. border: 2rpx solid #ECECEC;
  897. display: inline-flex;
  898. align-items: center;
  899. justify-content: flex-start;
  900. font-weight: 400;
  901. font-size: 28rpx;
  902. color: #999999;
  903. overflow: hidden;
  904. white-space: nowrap;
  905. text-overflow: ellipsis;
  906. }
  907. .dietary-survey {
  908. display: flex;
  909. flex-direction: row;
  910. align-items: center;
  911. justify-content:flex-start;
  912. flex-wrap: wrap;
  913. gap: 18rpx;
  914. margin-top: 36rpx;
  915. }
  916. .dietary-survey-iteml {
  917. width: 206rpx;
  918. display: inline-flex;
  919. flex-direction: column;
  920. align-items: center;
  921. font-weight: 400;
  922. font-size: 32rpx;
  923. view {
  924. width: 206rpx;
  925. height: 90rpx;
  926. background: #F5F7FA;
  927. border-radius: 8rpx 8rpx 8rpx 8rpx;
  928. border: 2rpx solid #ECECEC;
  929. box-sizing: border-box;
  930. margin-bottom: 20rpx;
  931. text-align: center;
  932. line-height: 90rpx;
  933. }
  934. text {
  935. font-size: 24rpx;
  936. color: #757575;
  937. }
  938. }
  939. .dietary-survey-item {
  940. display: inline-flex;
  941. }
  942. .dietary-survey-input {
  943. width: 206rpx;
  944. height: 90rpx;
  945. }
  946. .dietary-survey-active {
  947. color: #fff !important;
  948. background: #FF5C03 !important;
  949. border: 2rpx solid #FF5C03 !important;
  950. }
  951. }
  952. .footer {
  953. width: 100%;
  954. height: 152rpx;
  955. padding: 20rpx 24rpx;
  956. box-sizing: border-box;
  957. background: #FFFFFF;
  958. box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(114, 114, 114, 0.1);
  959. position: fixed;
  960. bottom: var(--window-bottom);
  961. left: 0;
  962. &-btn {
  963. height: 112rpx;
  964. background: #FF5C03;
  965. border-radius: 16rpx 16rpx 16rpx 16rpx;
  966. font-weight: 600;
  967. font-size: 34rpx;
  968. color: #FFFFFF;
  969. line-height: 112rpx;
  970. text-align: center;
  971. &::after {
  972. border: none;
  973. }
  974. }
  975. }
  976. .popbox {
  977. background: #fff;
  978. padding: 20rpx;
  979. font-family: PingFang SC, PingFang SC;
  980. color: #222222;
  981. font-weight: 400;
  982. font-size: 28rpx;
  983. &-title {
  984. font-weight: 600;
  985. font-size: 34rpx;
  986. }
  987. &-desc {
  988. margin: 20rpx 0;
  989. }
  990. .uni-textarea-wrapper {
  991. display: flex;
  992. flex-direction: row;
  993. align-items: flex-end;
  994. justify-content:space-between;
  995. }
  996. .textarea {
  997. flex: 1;
  998. max-height: 146rpx;
  999. padding: 15rpx 24rpx;
  1000. box-sizing: border-box;
  1001. background: #FFFFFF;
  1002. border-radius: 16rpx 16rpx 16rpx 16rpx;
  1003. line-height: 36rpx;
  1004. border: 2rpx solid #ECECEC;
  1005. color: #222222;
  1006. font-weight: 400;
  1007. font-size: 28rpx;
  1008. }
  1009. .popbox-confirm-btn {
  1010. flex-shrink: 0;
  1011. width: 140rpx;
  1012. height: 70rpx;
  1013. margin-left: 10rpx;
  1014. background: #FF5C03;
  1015. border-radius: 16rpx;
  1016. color: #fff;
  1017. text-align: center;
  1018. line-height: 70rpx;
  1019. }
  1020. }
  1021. </style>