satisfactionQuestions.vue 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481
  1. <template>
  2. <view class="container">
  3. <scroll-view
  4. class="scroll_view"
  5. scroll-y
  6. scroll-with-animation
  7. scroll-anchoring
  8. :scroll-into-view="point"
  9. >
  10. <view class="top_bg_box">
  11. <image mode="widthFix" :src="icon.satisfaction.ques_top_bg"></image>
  12. <view class="ques_introduce displayFlexCol">
  13. <text>{{ quesList.SubjectTitle }}</text>
  14. <text>{{ quesList.Remark }}</text>
  15. </view>
  16. </view>
  17. <view class="main_box">
  18. <view class="mask_form" v-if="complete"></view>
  19. <block v-for="(item, index) in quesList.QuestionList" :key="index">
  20. <view
  21. class="ques_item_box"
  22. :id="'p' + index"
  23. v-if="!isQuestionHidden(item)"
  24. :class="item.QuestType == 'SubTitle' ? 'sub_title' : ''"
  25. >
  26. <view class="ques_title_box">
  27. <text class="mustQuest_tag" v-if="item.MustQuest">*</text>
  28. <text v-if="item.QuestType != 'SubTitle'">{{ item.Sort }}.{{ item.Question }}</text>
  29. <text v-if="item.QuestType == 'SubTitle'">{{ item.Num }}、{{ item.Question }}</text>
  30. </view>
  31. <!-- 大标题满意度 -->
  32. <view
  33. class="ques_options displayFlexCol"
  34. v-if="item.QuestType == 'SubTitle' && item.HasScaleInSubtitle"
  35. >
  36. <block
  37. v-for="(childItem, childIndex) in subtitleSatisfactionOptions"
  38. :key="`SubTitleSatisfaction-${index}-${childIndex}`"
  39. >
  40. <text
  41. class="choice_item"
  42. :class="
  43. isSubtitleSatisfactionActive(item.SubTitleIndex, childIndex) ? 'active_option' : ''
  44. "
  45. :data-subtitleindex="item.SubTitleIndex"
  46. :data-childindex="childIndex"
  47. @click="choiceSubtitleSatisfaction"
  48. >
  49. {{ childItem }}
  50. </text>
  51. </block>
  52. </view>
  53. <!-- 填空题 -->
  54. <view
  55. class="ques_options align_items_left displayFlexCol"
  56. v-if="item.QuestType == 'Input'"
  57. >
  58. <text class="input_label">{{ item.Question }}:</text>
  59. <view class="textarea_box">
  60. <textarea
  61. auto-height
  62. :data-index="index"
  63. :placeholder="'最多输入' + item.RuleInfo.MaxLength + '个字'"
  64. :maxlength="item.RuleInfo.MaxLength"
  65. :value="item.AnswerList"
  66. @blur="setVal"
  67. />
  68. </view>
  69. </view>
  70. <!-- 矩阵填空题 -->
  71. <view
  72. class="ques_options align_items_left displayFlexCol"
  73. v-if="item.QuestType == 'MatrixInput'"
  74. >
  75. <block
  76. v-for="(childItem, childIndex) in item.MatrixQuestionList"
  77. :key="`MatrixInput-${index}-${childIndex}`"
  78. >
  79. <view class="matrix_input_box margin_bottom_10 displayFlexRow">
  80. <text>{{ childItem.Question }}:</text>
  81. <view class="textarea_box matrix_textarea_box">
  82. <textarea
  83. auto-height
  84. :data-index="index"
  85. :data-childindex="childIndex"
  86. :placeholder="'最多输入' + childItem.RuleInfo.MaxLength + '个字'"
  87. :maxlength="childItem.RuleInfo.MaxLength"
  88. :value="childItem.AnswerList"
  89. @input="setVal"
  90. />
  91. </view>
  92. </view>
  93. </block>
  94. </view>
  95. <!-- 单选/多选题 -->
  96. <view
  97. class="ques_options displayFlexCol"
  98. v-if="item.QuestType == 'Radio' || item.QuestType == 'Checkbox'"
  99. >
  100. <block
  101. v-for="(childItem, childIndex) in item.QuestionItemList"
  102. :key="`Checkbox-${index}-${childIndex}`"
  103. >
  104. <text
  105. class="choice_item"
  106. :class="fn.answer(item, childItem.ItemId) ? 'active_option' : ''"
  107. :data-index="index"
  108. :data-childindex="childIndex"
  109. @click="choiceOption"
  110. >
  111. {{ childItem.ItemName }}
  112. </text>
  113. </block>
  114. </view>
  115. <!-- 选择题 -->
  116. <view class="ques_options displayFlexCol" v-if="item.QuestType == 'Select'">
  117. <picker
  118. class="picker_box"
  119. range-key="ItemName"
  120. :range="item.QuestionItemList"
  121. :data-index="index"
  122. :value="item.AnswerList"
  123. @change="bindPickerChange"
  124. >
  125. <view class="picker displayFlexRow">
  126. <text>{{ item.QuestionItemList[item.AnswerList].ItemName }}</text>
  127. <image :src="icon.satisfaction.right" mode="" />
  128. </view>
  129. </picker>
  130. </view>
  131. <!-- 矩阵单选题/矩阵多选题/矩阵量表 -->
  132. <view
  133. class="ques_options matrix_border displayFlexCol"
  134. v-if="
  135. item.QuestType == 'MatrixRadio' ||
  136. item.QuestType == 'MatrixCheckbox' ||
  137. item.QuestType == 'MatrixScale'
  138. "
  139. >
  140. <view class="matrix_options matrix_options_title displayFlexRow">
  141. <block
  142. v-for="(childItem, childIndex) in item.MatrixQuestionList[0].QuestionItemList"
  143. :key="`${item.QuestType}0-${index}-${childIndex}`"
  144. >
  145. <text
  146. :style="{
  147. width: fn.getWidth(item.MatrixQuestionList[0].QuestionItemList.length) + '%',
  148. }"
  149. >
  150. {{ childItem.ItemName }}
  151. </text>
  152. </block>
  153. </view>
  154. <block
  155. v-for="(childItem, childIndex) in item.MatrixQuestionList"
  156. :key="`${item.QuestType}-${index}-${childIndex}`"
  157. >
  158. <view class="matrix_icon_box displayFlexCol">
  159. <text
  160. :style="{
  161. width: fn.getWidth(item.MatrixQuestionList[0].QuestionItemList.length) + '%',
  162. }"
  163. >{{ childItem.Question }}</text
  164. >
  165. <view class="matrix_options displayFlexBetween">
  166. <block
  167. v-for="(sunItem, sunIndex) in childItem.QuestionItemList"
  168. :key="`${item.QuestType}-${index}-${childIndex}-${sunIndex}`"
  169. >
  170. <view
  171. class="displayFlexRow"
  172. :data-index="index"
  173. :data-childindex="childIndex"
  174. :data-sunindex="sunIndex"
  175. @click="choiceMatrixOption"
  176. >
  177. <!-- 矩阵单选/矩阵量表 -->
  178. <image
  179. :src="
  180. fn.answer(childItem, sunItem.ItemId)
  181. ? icon.satisfaction.circle_active
  182. : icon.satisfaction.circle
  183. "
  184. mode=""
  185. v-if="item.QuestType == 'MatrixRadio' || item.QuestType == 'MatrixScale'"
  186. />
  187. <!-- 矩阵多选 -->
  188. <image
  189. :src="
  190. fn.answer(childItem, sunItem.ItemId)
  191. ? icon.satisfaction.checkBox_circle_active
  192. : icon.satisfaction.checkBox_circle
  193. "
  194. mode=""
  195. v-if="item.QuestType == 'MatrixCheckbox'"
  196. />
  197. </view>
  198. </block>
  199. </view>
  200. </view>
  201. </block>
  202. </view>
  203. <!-- 上传文件题 -->
  204. <view class="ques_options displayFlexCol" v-if="item.QuestType == 'UploadImage'">
  205. <view class="img_list displayFlexRow">
  206. <image
  207. class="add_img"
  208. mode=""
  209. :src="icon.satisfaction.add"
  210. :data-index="index"
  211. @click="choiceFile"
  212. />
  213. <block
  214. v-for="(imgItem, imgIndex) in item.AnswerList"
  215. :key="`UploadImage-${index}-${imgIndex}`"
  216. >
  217. <view class="add_img">
  218. <image class="item_img" :src="imgItem" mode="" />
  219. <image
  220. class="cha_img"
  221. :src="icon.satisfaction.cha_green"
  222. mode=""
  223. :data-index="index"
  224. :data-imgitem="imgItem"
  225. @click="closeImg"
  226. />
  227. </view>
  228. </block>
  229. </view>
  230. <view class="add_img_tips p_flexStart">
  231. <text>限制:</text>
  232. <text> 仅支持图片上传、</text>
  233. <text>
  234. 大小不超过{{ item.RuleInfo.FileSize }}M数量不超过{{ item.RuleInfo.FileCount }}个
  235. </text>
  236. </view>
  237. </view>
  238. <!-- 量表题 -->
  239. <view class="ques_options displayFlexRow" v-if="item.QuestType == 'Scale'">
  240. <block
  241. v-for="(childItem, childIndex) in item.QuestionItemList"
  242. :key="`Scale-${index}-${childIndex}`"
  243. >
  244. <view
  245. class="options_item_box displayFlexCol"
  246. :data-index="index"
  247. :data-childindex="childIndex"
  248. @click="choiceOption"
  249. >
  250. <text>{{ childItem.ItemName }}</text>
  251. <image
  252. :src="
  253. fn.answer(item, childItem.ItemId)
  254. ? icon.satisfaction.circle_active
  255. : icon.satisfaction.circle
  256. "
  257. mode=""
  258. />
  259. </view>
  260. </block>
  261. </view>
  262. </view>
  263. </block>
  264. </view>
  265. </scroll-view>
  266. <!-- <view class="yjfl" @click="yjfk">
  267. <image :src="icon.satisfaction.yjfk" alt="" style="width: 140rpx; height: 140rpx" />
  268. <view class="title"> 意见反馈 </view>
  269. </view> -->
  270. <view class="footer_box displayFlexRow">
  271. <text :class="complete ? 'backgroundCustom_D9' : ''" @click="submit">提交</text>
  272. </view>
  273. <!-- 是否实名弹窗 -->
  274. <view class="modal_wrap" v-if="showModal_Anonymous">
  275. <view class="modal_box">
  276. <view class="modal_tit">是否实名填写</view>
  277. <view class="modal_con">
  278. <view class="modal_box_b1" @click="isAnonymous(1)">实名填写</view>
  279. <view class="modal_box_b1" @click="isAnonymous(2)">匿名填写</view>
  280. </view>
  281. </view>
  282. </view>
  283. <!-- 是否实名弹窗 -->
  284. <view class="modal_wrap" v-if="showModal_User">
  285. <view class="modal_box">
  286. <view class="modal_tit">请选择答卷人</view>
  287. <view class="modal_con">
  288. <view class="modal_user_item" v-if="currentUser.memberName" @click="goSelMember">
  289. <view>
  290. <view>
  291. <text class="modal_t1">{{ currentUser.memberName }}</text>
  292. <text class="modal_t2">
  293. {{ currentUser.sex == 1 ? '男' : currentUser.sex == 2 ? '女' : '未知' }} |
  294. {{ currentUser.age }}岁
  295. </text>
  296. </view>
  297. <view class="modal_t3">{{ currentUser.mobile }}</view>
  298. </view>
  299. <image class="modal_user_right_img" :src="icon.satisfaction.right"></image>
  300. </view>
  301. <view class="modal_user_item" v-else @click="goSelMember">
  302. <view>点击选择答卷人</view>
  303. <image class="modal_user_right_img" :src="icon.satisfaction.right"></image>
  304. </view>
  305. <view class="modal_btn_wrap displayFlexBetween" v-if="currentUser.memberName">
  306. <view class="modal_btn modal_btn1" @click="goBack">取消</view>
  307. <view class="modal_btn modal_btn2" @click="confirmMember">确定</view>
  308. </view>
  309. </view>
  310. </view>
  311. </view>
  312. </view>
  313. </template>
  314. <script lang="ts" setup>
  315. import { reactive, ref } from 'vue';
  316. import { useOnLoad } from '@/hook';
  317. import { useDomain } from '@kasite/uni-app-base';
  318. import { mapGetters } from '@kasite/uni-app-base/store/hook';
  319. import {
  320. QuerySubjectListToChannelTask_V3,
  321. QuerySubjectInfoById_V3,
  322. UploadZxFile,
  323. CommitAnswer_V3,
  324. QuerySample_V3,
  325. QueryMemberByCard_V3,
  326. } from '../../service';
  327. import icon from '@/utils/icon';
  328. import { common, throttle } from '@/utils';
  329. import fn from './fn';
  330. const app = getApp();
  331. let time = null;
  332. const currentUser = ref({} as any);
  333. const taskId = ref('');
  334. const objType = ref('3'); // 3门诊 4住院
  335. const quesList = ref({} as any);
  336. const imgList = ref([]);
  337. const point = ref('');
  338. const complete = ref(false);
  339. const subtitleSatisfactionOptions = ['非常满意', '比较满意', '一般', '不太满意', '很不满意'];
  340. const subtitleSatisfaction = reactive({} as Record<string, number | null>);
  341. const anonymousType = ref(0);
  342. const showModal_Anonymous = ref(false); // 是否实名填写弹窗显示
  343. const showModal_User = ref(false); // 实名用户选择弹窗显示
  344. let quesAnswers = reactive({
  345. MemberId: '',
  346. TaskId: '-1',
  347. SysAppId: 'visit',
  348. SubjectId: '',
  349. UserAgent: '',
  350. IP: '',
  351. Location: '',
  352. Mobile: '',
  353. UserName: '',
  354. Sex: '',
  355. Age: '',
  356. ThirdPartyId: '',
  357. AnswerUseTime: 0,
  358. PushDept: '',
  359. PushDeptName: '',
  360. BedNo: '',
  361. HospitalNo: '',
  362. CardNo: '',
  363. AnswerList: [],
  364. });
  365. let queryPatient = reactive({
  366. cardNo: '',
  367. cardType: ''
  368. });
  369. const { getCurrentUser } = mapGetters({
  370. getCurrentUser: 'getCurrentUser',
  371. });
  372. const main = async (options) => {
  373. currentUser.value = getCurrentUser();
  374. const params = {
  375. SubjectId: options.subjectId,
  376. TaskId: options.taskId,
  377. };
  378. const resp = await QuerySubjectListToChannelTask_V3(params);
  379. if (!common.isEmpty(resp)) {
  380. objType.value = resp[0].GroupType;
  381. //匿名有3种传参 ""(空) "true" "false" 转换字符串为布尔值
  382. let anonymous =
  383. resp[0].Anonymous === 'false'
  384. ? false
  385. : resp[0].Anonymous === 'true'
  386. ? true
  387. : resp[0].Anonymous || '';
  388. // type 1实名 2:匿名 3自行选择
  389. anonymousType.value = anonymous === '' ? 3 : anonymous === false ? 1 : 2;
  390. showModal_Anonymous.value = anonymous == 3 ? true : false;
  391. taskId.value = options.taskId;
  392. quesAnswers.SubjectId = options.subjectId;
  393. //如果不是执行选择直接调用对应填写按钮
  394. if (anonymous != 3) {
  395. isAnonymous(anonymousType.value);
  396. }
  397. await querySubjectInfoById_V3();
  398. // 查询样本和答案
  399. // await querySample_V3();
  400. // 开始计算答卷时间
  401. getSec();
  402. if(options?.type == "sms_myddc") {
  403. currentUser.value.cardNo = options.cardNo
  404. currentUser.value.cardType = options.cardType
  405. showModal_Anonymous.value = false
  406. showModal_User.value = false
  407. }
  408. } else {
  409. common.showModal('该任务已失效', () => {
  410. common.goToUrl(`/pages/business/tabbar/homePage/homePage`, { skipWay: 'reLaunch' });
  411. });
  412. return;
  413. }
  414. };
  415. /** 实名/匿名 */
  416. const isAnonymous = (type) => {
  417. //实名
  418. if (type == 1) {
  419. showModal_Anonymous.value = false;
  420. showModal_User.value = true;
  421. }
  422. //匿名
  423. else {
  424. // currentUser.value = {};
  425. showModal_Anonymous.value = false;
  426. }
  427. };
  428. /** 问卷详情 */
  429. const querySubjectInfoById_V3 = async () => {
  430. const resp = await QuerySubjectInfoById_V3({
  431. SubjectId: quesAnswers.SubjectId,
  432. });
  433. if (common.isNotEmpty(resp)) {
  434. if (resp[0].Status != 0) {
  435. common.showModal('该问卷已失效', () => {
  436. common.navigateBack(1);
  437. });
  438. return;
  439. }
  440. if (resp[0].State != 1) {
  441. common.showModal('该问卷未发布', () => {
  442. common.navigateBack(1);
  443. });
  444. return;
  445. }
  446. // 提交答案数据模版
  447. quesAnswers.PushDept = resp[0].DeptId;
  448. quesAnswers.PushDeptName = resp[0].PushDeptName;
  449. resp[0].QuestionList.forEach((item, index) => {
  450. item.AnswerList = [];
  451. item.MustQuest = item.MustQuest == 'false' ? false : true;
  452. item.RuleInfo = item.RuleInfo != '' ? JSON.parse(item.RuleInfo) : '';
  453. // 多选框
  454. if (item.QuestType == 'Select') {
  455. item.AnswerList = 0;
  456. }
  457. if (common.isNotEmpty(item.MatrixQuestionList)) {
  458. item.MatrixQuestionList.forEach((childItem) => {
  459. childItem.AnswerList = [];
  460. childItem.RuleInfo = childItem.RuleInfo != '' ? JSON.parse(childItem.RuleInfo) : '';
  461. // 答案列表模版
  462. let answerItem = {
  463. Answer: [],
  464. Blank: index,
  465. QuestId: childItem.QuestId,
  466. QuestType: item.QuestType,
  467. MustQuest: item.MustQuest,
  468. };
  469. quesAnswers.AnswerList.push(answerItem);
  470. if (common.isNotEmpty(childItem.QuestionItemList)) {
  471. childItem.QuestionItemList.forEach((sunItem) => {
  472. sunItem.Check = false;
  473. });
  474. }
  475. });
  476. } else {
  477. // 答案列表模版
  478. let answerItem = {
  479. Answer: [],
  480. Blank: index,
  481. QuestId: item.QuestId,
  482. QuestType: item.QuestType,
  483. MustQuest: item.MustQuest,
  484. };
  485. quesAnswers.AnswerList.push(answerItem);
  486. }
  487. });
  488. resp[0].QuestionList = bySort(resp[0].QuestionList);
  489. quesList.value = resp[0];
  490. }
  491. };
  492. /** 查询样本和答案 */
  493. const querySample_V3 = async () => {
  494. const resp = await QuerySample_V3({
  495. SubjectId: quesAnswers.SubjectId,
  496. IsGetAnswer: true,
  497. ThirdPartyId: currentUser.MemberId,
  498. State: 1
  499. });
  500. if (common.isNotEmpty(resp)) {
  501. quesList.value.QuestionList.forEach((item) => {
  502. resp[0].AnswerList.forEach((childItem) => {
  503. if(item.QuestId == childItem.QuestId) {
  504. if(item.QuestType == "Input") {
  505. item.AnswerList = childItem.Answer
  506. }
  507. if(item.QuestType == "UploadImage") {
  508. item.AnswerList = childItem.Answer.split(",")
  509. }
  510. if(common.isNotEmpty(item.QuestionItemList)) {
  511. if(item.QuestType == "Select"){
  512. item.QuestionItemList.forEach((sunItem,sunIndex) => {
  513. if(sunItem.ItemId == childItem.Answer) {
  514. item.AnswerList = sunIndex
  515. }
  516. })
  517. }else {
  518. item.AnswerList = childItem.Answer.split(",")
  519. }
  520. }
  521. }
  522. if(common.isNotEmpty(item.MatrixQuestionList)) {
  523. item.MatrixQuestionList.forEach((sunItem) => {
  524. if(sunItem.QuestId == childItem.QuestId) {
  525. if(sunItem.QuestType == "MatrixInput") {
  526. sunItem.AnswerList = childItem.Answer
  527. }
  528. if(sunItem.QuestType == "MatrixCheckbox" || sunItem.QuestType == "MatrixRadio" || sunItem.QuestType == "MatrixScale") {
  529. sunItem.AnswerList = childItem.Answer.split(",")
  530. }
  531. }
  532. })
  533. }
  534. })
  535. })
  536. complete.value = true;
  537. }
  538. }
  539. /** 计算答题时间 */
  540. const getSec = () => {
  541. time = setTimeout(() => {
  542. let answerUseTime = quesAnswers.AnswerUseTime;
  543. answerUseTime++;
  544. quesAnswers.AnswerUseTime = answerUseTime;
  545. getSec();
  546. }, 1000);
  547. };
  548. /** 根据子标题排序 */
  549. const bySort = (list: any[]) => {
  550. let find = 0;
  551. let sort = 0;
  552. let currentSubTitleIndex = -1;
  553. let currentSubTitleItem = null as any;
  554. let item = {} as any;
  555. for (var t = 0; t < list.length; t++) {
  556. item = list[t];
  557. //子标题
  558. if (item.QuestType == 'SubTitle') {
  559. //将子标题底下的题目从1开始排
  560. sort = 0;
  561. //判断是出现的第几个子标题
  562. //num是子标题的排序
  563. item.SubTitleIndex = find;
  564. item.HasScaleInSubtitle = false;
  565. currentSubTitleIndex = find;
  566. currentSubTitleItem = item;
  567. item.Num = toChinesNum(find + 1);
  568. find++;
  569. } else {
  570. //sort是子标题底下的排序
  571. item.SubTitleIndex = currentSubTitleIndex;
  572. item.Sort = sort + 1;
  573. sort++;
  574. if (item.QuestType == 'Scale' && currentSubTitleItem) {
  575. currentSubTitleItem.HasScaleInSubtitle = true;
  576. }
  577. }
  578. item.SortNum = t;
  579. if (common.isNotEmpty(item.QuestionItemList)) {
  580. item.QuestionItemList.forEach((childItem, childIndex) => {
  581. childItem.SortNum = childIndex;
  582. if (common.isNotEmpty(childItem.QuestionItem)) {
  583. childItem.QuestionItem.forEach((sunItem, sunIndex) => {
  584. sunItem.SortNum = sunIndex;
  585. });
  586. }
  587. });
  588. }
  589. }
  590. return list;
  591. };
  592. /** 汉字顺序 */
  593. const toChinesNum = (num) => {
  594. var changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
  595. newNum = '',
  596. arr = num.toString().split('');
  597. arr[0] = parseInt(arr[0]) - 1;
  598. if (arr[0] == -1 && arr.length == 1) {
  599. return '零';
  600. }
  601. if (arr.length > 1) {
  602. arr[1] = parseInt(arr[1]) - 1;
  603. if (!arr[0]) {
  604. newNum = !arr[0] && arr[1] == -1 ? changeNum[9] : changeNum[9] + changeNum[arr[1]];
  605. } else {
  606. newNum = changeNum[arr[0]] + changeNum[9] + (changeNum[arr[1]] ? changeNum[arr[1]] : '');
  607. }
  608. } else {
  609. newNum = changeNum[arr[0]];
  610. }
  611. return newNum;
  612. };
  613. /** 单选/多选/量表 */
  614. const isSubtitleScaleExpanded = (subtitleIndex) => {
  615. return Number(subtitleSatisfaction[subtitleIndex]) > 0;
  616. };
  617. const isSubtitleSatisfactionActive = (subtitleIndex, childIndex) => {
  618. return Number(subtitleSatisfaction[subtitleIndex]) === Number(childIndex);
  619. };
  620. const isQuestionHidden = (item) => {
  621. return item?.QuestType == 'Scale' && item.SubTitleIndex > -1 && !isSubtitleScaleExpanded(item.SubTitleIndex);
  622. };
  623. const getAnswerIndex = (answerList, questId) => {
  624. let answerIndex = -1;
  625. answerList.forEach((item, index) => {
  626. if (item.QuestId == questId) {
  627. answerIndex = index;
  628. }
  629. });
  630. return answerIndex;
  631. };
  632. const setSingleQuestionAnswer = (question, answerList, childIndex) => {
  633. if (!question?.QuestionItemList?.[childIndex]) return;
  634. const answerIndex = getAnswerIndex(answerList, question.QuestId);
  635. const answer = question.QuestionItemList[childIndex].ItemId;
  636. question.AnswerList = [answer];
  637. if (answerIndex > -1) {
  638. answerList[answerIndex].Answer = answer;
  639. }
  640. };
  641. const choiceSubtitleSatisfaction = (e) => {
  642. const subtitleIndex = Number(e.currentTarget.dataset.subtitleindex);
  643. const childIndex = Number(e.currentTarget.dataset.childindex);
  644. const questionList = quesList.value.QuestionList;
  645. const answerList = quesAnswers.AnswerList;
  646. subtitleSatisfaction[subtitleIndex] = childIndex;
  647. if (childIndex == 0) {
  648. questionList.forEach((item) => {
  649. if (item.SubTitleIndex == subtitleIndex && item.QuestType == 'Scale') {
  650. setSingleQuestionAnswer(item, answerList, 0);
  651. }
  652. });
  653. }
  654. quesList.value.QuestionList = questionList;
  655. quesAnswers.AnswerList = answerList;
  656. };
  657. const choiceOption = (e) => {
  658. let index = e.currentTarget.dataset.index;
  659. let childIndex = e.currentTarget.dataset.childindex;
  660. let answerIndex = 0;
  661. let questionList = quesList.value.QuestionList;
  662. let answerList = quesAnswers.AnswerList;
  663. answerList.forEach((itm, ind) => {
  664. if (itm.QuestId == questionList[index].QuestId) {
  665. answerIndex = ind;
  666. }
  667. });
  668. // 单选/量表
  669. if (questionList[index].QuestType == 'Radio' || questionList[index].QuestType == 'Scale') {
  670. if (
  671. questionList[index].AnswerList[0] != questionList[index].QuestionItemList[childIndex].ItemId
  672. ) {
  673. questionList[index].AnswerList = [];
  674. questionList[index].AnswerList.push(questionList[index].QuestionItemList[childIndex].ItemId);
  675. }
  676. answerList[answerIndex].Answer = questionList[index].QuestionItemList[childIndex].ItemId;
  677. }
  678. // 多选
  679. else if (questionList[index].QuestType == 'Checkbox') {
  680. let flag = false;
  681. questionList[index].AnswerList.forEach((item) => {
  682. if (item == questionList[index].QuestionItemList[childIndex].ItemId) {
  683. flag = true;
  684. }
  685. });
  686. if (flag) {
  687. questionList[index].AnswerList = questionList[index].AnswerList.filter((item) => {
  688. return item != questionList[index].QuestionItemList[childIndex].ItemId;
  689. });
  690. answerList[answerIndex].Answer = answerList[answerIndex].Answer.filter((fiItem) => {
  691. return fiItem != questionList[index].QuestionItemList[childIndex].ItemId;
  692. });
  693. } else {
  694. if (questionList[index].RuleInfo.MaxLength < questionList[index].AnswerList.length + 1) {
  695. common.showModal('最多选择' + questionList[index].RuleInfo.MaxLength + '项');
  696. return;
  697. }
  698. questionList[index].AnswerList.push(questionList[index].QuestionItemList[childIndex].ItemId);
  699. answerList[answerIndex].Answer.push(questionList[index].QuestionItemList[childIndex].ItemId);
  700. }
  701. }
  702. quesList.value.QuestionList = questionList;
  703. quesAnswers.AnswerList = answerList;
  704. };
  705. /** 选择题 */
  706. const bindPickerChange = (e) => {
  707. let index = e.currentTarget.dataset.index;
  708. let val = e.detail.value;
  709. let questionList = quesList.value.QuestionList;
  710. let answerList = quesAnswers.AnswerList;
  711. let answerIndex = 0;
  712. answerList.forEach((itm, ind) => {
  713. if (itm.QuestId == questionList[index].QuestId) {
  714. answerIndex = ind;
  715. }
  716. });
  717. questionList[index].AnswerList = val;
  718. answerList[answerIndex].Answer = questionList[index].QuestionItemList[val].ItemId;
  719. quesList.value.QuestionList = questionList;
  720. quesAnswers.AnswerList = answerList;
  721. };
  722. /** 矩阵单选 */
  723. const choiceMatrixOption = (e) => {
  724. let index = e.currentTarget.dataset.index;
  725. let childIndex = e.currentTarget.dataset.childindex;
  726. let sunIndex = e.currentTarget.dataset.sunindex;
  727. let questionList = quesList.value.QuestionList;
  728. let answerList = quesAnswers.AnswerList;
  729. let answerIndex = 0;
  730. answerList.forEach((itm, ind) => {
  731. if (itm.QuestId == questionList[index].MatrixQuestionList[childIndex].QuestId) {
  732. answerIndex = ind;
  733. }
  734. });
  735. // 矩阵单选/矩阵量表
  736. if (
  737. questionList[index].QuestType == 'MatrixRadio' ||
  738. questionList[index].QuestType == 'MatrixScale'
  739. ) {
  740. if (
  741. questionList[index].MatrixQuestionList[childIndex].AnswerList[0] !=
  742. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  743. ) {
  744. questionList[index].MatrixQuestionList[childIndex].AnswerList = [];
  745. questionList[index].MatrixQuestionList[childIndex].AnswerList.push(
  746. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  747. );
  748. }
  749. answerList[answerIndex].Answer =
  750. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId;
  751. }
  752. // 矩阵多选
  753. else if (questionList[index].QuestType == 'MatrixCheckbox') {
  754. let flag = false;
  755. questionList[index].MatrixQuestionList[childIndex].AnswerList.forEach((item) => {
  756. if (
  757. item == questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  758. ) {
  759. flag = true;
  760. }
  761. });
  762. if (flag) {
  763. questionList[index].MatrixQuestionList[childIndex].AnswerList = questionList[
  764. index
  765. ].MatrixQuestionList[childIndex].AnswerList.filter((item) => {
  766. return (
  767. item !=
  768. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  769. );
  770. });
  771. answerList[answerIndex].Answer = answerList[answerIndex].Answer.filter((fiItem) => {
  772. return (
  773. fiItem !=
  774. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  775. );
  776. });
  777. } else {
  778. questionList[index].MatrixQuestionList[childIndex].AnswerList.push(
  779. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  780. );
  781. answerList[answerIndex].Answer.push(
  782. questionList[index].MatrixQuestionList[childIndex].QuestionItemList[sunIndex].ItemId
  783. );
  784. }
  785. }
  786. quesList.value.QuestionList = questionList;
  787. quesAnswers.AnswerList = answerList;
  788. };
  789. /** 选择文件 */
  790. const choiceFile = (e) => {
  791. let index = e.currentTarget.dataset.index;
  792. let questionList = quesList.value.QuestionList;
  793. let answerList = quesAnswers.AnswerList;
  794. let answerIndex = 0;
  795. answerList.forEach((itm, ind) => {
  796. if (itm.QuestId == questionList[index].QuestId) {
  797. answerIndex = ind;
  798. }
  799. });
  800. if (answerList[answerIndex].Answer.length >= questionList[index].RuleInfo.FileCount) {
  801. common.showModal('最多上传' + questionList[index].RuleInfo.FileCount + '张图片');
  802. return;
  803. }
  804. uni.chooseImage({
  805. count: questionList[index].RuleInfo.FileCount,
  806. sourceType: ['album', 'camera'],
  807. sizeType: ['compressed'],
  808. async success(res) {
  809. uni.showLoading({
  810. title: '上传中。。。',
  811. });
  812. for (var i = 0; i < res.tempFiles.length; i++) {
  813. let m = 1024 * 1024;
  814. if (res.tempFiles[i].size < m) {
  815. let imgUrl = (await uploadFile(
  816. res.tempFilePaths[i],
  817. questionList[index].RuleInfo.FileCount,
  818. answerList[answerIndex].Answer
  819. )) as string;
  820. if (common.isNotEmpty(imgUrl)) {
  821. imgUrl =
  822. imgUrl.indexOf('http') > -1 ? imgUrl : `${useDomain()}/${imgUrl.replace(/\\/g, '/')}`;
  823. answerList[answerIndex].Answer.push(imgUrl);
  824. questionList[index].AnswerList = answerList[answerIndex].Answer;
  825. quesList.value.QuestionList = questionList;
  826. quesAnswers.AnswerList = answerList;
  827. if (res.tempFiles.length - 1 == i) {
  828. uni.hideLoading();
  829. }
  830. }
  831. } else {
  832. uni.hideLoading();
  833. common.showModal('文件不得大于' + questionList[index].RuleInfo.FileSize + 'M');
  834. return;
  835. }
  836. }
  837. },
  838. });
  839. };
  840. /** 上传文件 */
  841. const uploadFile = (imgItem, fileCount, imgList) => {
  842. return new Promise((resolve, reject) => {
  843. if (imgList.length >= fileCount) {
  844. uni.hideLoading();
  845. common.showModal('最多上传' + fileCount + '张图片');
  846. return;
  847. }
  848. // 将图片上传至服务器
  849. uni.uploadFile({
  850. url: UploadZxFile,
  851. filePath: imgItem,
  852. name: 'newsFile',
  853. formData: {
  854. user: 'test',
  855. },
  856. header: {
  857. token: uni.getStorageSync('token'),
  858. },
  859. data: {},
  860. success(res) {
  861. const data = JSON.parse(res.data);
  862. if (data.RespCode == '10000') {
  863. resolve(data.url);
  864. } else {
  865. common.showModal(data.msg);
  866. }
  867. }
  868. });
  869. });
  870. };
  871. /** 删除图片 */
  872. const closeImg = (e) => {
  873. let index = e.currentTarget.dataset.index;
  874. let imgItem = e.currentTarget.dataset.imgitem;
  875. let questionList = quesList.value.QuestionList;
  876. let answerList = quesAnswers.AnswerList;
  877. let answerIndex = 0;
  878. answerList.forEach((itm, ind) => {
  879. if (itm.QuestId == questionList[index].QuestId) {
  880. answerIndex = ind;
  881. }
  882. });
  883. answerList[answerIndex].Answer = answerList[answerIndex].Answer.filter((item) => {
  884. return item != imgItem;
  885. });
  886. questionList[index].AnswerList = answerList[answerIndex].Answer;
  887. quesList.value.QuestionList = questionList;
  888. quesAnswers.AnswerList = answerList;
  889. };
  890. /** 获取input值 */
  891. const setVal = (e) => {
  892. let index = e.currentTarget.dataset.index;
  893. let childIndex = e.currentTarget.dataset.childindex;
  894. let questionList = quesList.value.QuestionList;
  895. let answerList = quesAnswers.AnswerList;
  896. let answerIndex = 0;
  897. // 矩阵填空题
  898. if (questionList[index].QuestType == 'MatrixInput') {
  899. if (
  900. questionList[index].MatrixQuestionList[childIndex].AnswerList.length ==
  901. questionList[index].MatrixQuestionList[childIndex].RuleInfo.MaxLength
  902. ) {
  903. common.showToast(
  904. '最多输入' + questionList[index].MatrixQuestionList[childIndex].RuleInfo.MaxLength + '个字'
  905. );
  906. return;
  907. }
  908. answerList.forEach((itm, ind) => {
  909. if (itm.QuestId == questionList[index].MatrixQuestionList[childIndex].QuestId) {
  910. answerIndex = ind;
  911. }
  912. });
  913. questionList[index].MatrixQuestionList[childIndex].AnswerList = e.detail.value;
  914. }
  915. // 填空题
  916. else {
  917. if (questionList[index].RuleInfo.DataType != '无') {
  918. let dataTypeOptions = questionList[index].RuleInfo.DataTypeOptions;
  919. for (var i = 0; i < dataTypeOptions.length; i++) {
  920. if (questionList[index].RuleInfo.DataType == dataTypeOptions[i].Value) {
  921. const regRule = dataTypeOptions[i].Rule;
  922. let reg = null;
  923. if (regRule.startsWith('/') && regRule.endsWith('/')) {
  924. reg = new RegExp(regRule.slice(1, -1));
  925. } else {
  926. reg = new RegExp(regRule);
  927. }
  928. if (!reg.test(e.detail.value)) {
  929. common.showModal('请输入' + dataTypeOptions[i].Text);
  930. questionList[index].AnswerList = '';
  931. answerList[answerIndex].Answer = '';
  932. this.setData({
  933. 'quesList.QuestionList': questionList,
  934. 'quesAnswers.AnswerList': answerList,
  935. });
  936. return;
  937. }
  938. }
  939. }
  940. }
  941. if (questionList[index].AnswerList.length == questionList[index].RuleInfo.MaxLength) {
  942. common.showToast('最多输入' + questionList[index].RuleInfo.MaxLength + '个字');
  943. return;
  944. }
  945. answerList.forEach((itm, ind) => {
  946. if (itm.QuestId == questionList[index].QuestId) {
  947. answerIndex = ind;
  948. }
  949. });
  950. questionList[index].AnswerList = e.detail.value;
  951. }
  952. answerList[answerIndex].Answer = e.detail.value;
  953. quesList.value.QuestionList = questionList;
  954. quesAnswers.AnswerList = answerList;
  955. };
  956. /** 提交 */
  957. const validateSubtitleSatisfaction = () => {
  958. const questionList = quesList.value.QuestionList || [];
  959. for (var i = 0; i < questionList.length; i++) {
  960. const item = questionList[i];
  961. if (
  962. item.QuestType == 'SubTitle' &&
  963. item.HasScaleInSubtitle &&
  964. subtitleSatisfaction[item.SubTitleIndex] == null
  965. ) {
  966. common.showToast('存在未填写的问卷');
  967. point.value = 'p' + i;
  968. return false;
  969. }
  970. }
  971. return true;
  972. };
  973. const submit = () => {
  974. throttle(async () => {
  975. await common.sleep(1000);
  976. if (complete.value) return;
  977. if (!validateSubtitleSatisfaction()) return;
  978. uni.showLoading();
  979. const answers = { ...quesAnswers } as any;
  980. for (var i = 0; i < answers.AnswerList.length; i++) {
  981. let item = answers.AnswerList[i];
  982. if (item.MustQuest && common.isEmpty(item.Answer)) {
  983. common.showToast('存在未填写的问卷');
  984. point.value = 'p' + item.Blank;
  985. return;
  986. }
  987. }
  988. answers.AnswerList.forEach((item) => {
  989. if (typeof item.Answer == 'object') {
  990. item.Answer = item.Answer.join();
  991. }
  992. });
  993. const cardNo = currentUser.value?.cardNo ?? ''
  994. const cardType = currentUser.value?.cardType ?? ''
  995. let mobile = currentUser.value?.mobile ?? ''
  996. let memberName = currentUser.value?.memberName ?? ''
  997. queryPatient.cardNo = cardNo;
  998. queryPatient.cardType = cardType;
  999. let patientInfoRes = await QueryMemberByCard_V3(queryPatient);
  1000. let patientInfo = patientInfoRes.resData;
  1001. if (!patientInfo) {
  1002. uni.hideLoading();
  1003. return;
  1004. }
  1005. if (patientInfo.RespCode === '10000' && patientInfo.Data && patientInfo.Data.length > 0) {
  1006. mobile = patientInfo.Data[0].mobile;
  1007. memberName = patientInfo.Data[0].memberName;
  1008. }
  1009. answers.AnswerList = JSON.stringify(quesAnswers.AnswerList);
  1010. // 安全读取 currentUser 字段,缺失则置空
  1011. const memberId = currentUser.value?.MemberId ?? currentUser.value?.memberId ?? currentUser.value?.cardNo ?? ''
  1012. const sex = currentUser.value?.sex ?? ''
  1013. const age = currentUser.value?.age ?? ''
  1014. // quesAnswers.IP = (await getIP()).cip;
  1015. // quesAnswers.Location = (await getIP()).cname;
  1016. quesAnswers.UserAgent = app.globalData.smallPro_systemInfo;
  1017. quesAnswers.Mobile = mobile;
  1018. quesAnswers.UserName = memberName;
  1019. quesAnswers.MemberId = memberId;
  1020. quesAnswers.Sex = sex;
  1021. quesAnswers.Age = age;
  1022. quesAnswers.ThirdPartyId = memberId || uni.getStorageSync('openid');
  1023. quesAnswers.BedNo = '';
  1024. quesAnswers.HospitalNo = objType.value == '4' ? cardNo : '';
  1025. quesAnswers.CardNo = objType.value == '3' ? cardNo : '';
  1026. quesAnswers.TaskId = taskId.value;
  1027. quesAnswers.CardType = objType.value == '3' ? cardType : '';
  1028. let res = await CommitAnswer_V3(quesAnswers);
  1029. clearTimeout(time);
  1030. if (common.isNotEmpty(res)) {
  1031. common.showModal('提交成功!', () => {
  1032. common.navigateBack(1);
  1033. });
  1034. }
  1035. }, 5 * 1000);
  1036. };
  1037. /** 获取IP */
  1038. const getIP = () => {
  1039. return new Promise((resolve, reject) => {
  1040. uni.request({
  1041. url: 'https://pv.sohu.com/cityjson?ie=utf-8',
  1042. success: (res: any) => {
  1043. const result = res.data.substring(res.data.indexOf('{'), res.data.lastIndexOf('}') + 1);
  1044. const obj = JSON.parse(result);
  1045. resolve(obj);
  1046. },
  1047. });
  1048. }) as Promise<any>;
  1049. };
  1050. const goBack = () => {
  1051. uni.navigateBack({
  1052. delta: 1,
  1053. });
  1054. };
  1055. const yjfk = () => {};
  1056. const goSelMember = () => {};
  1057. const confirmMember = () => {};
  1058. useOnLoad((options) => {
  1059. main(options);
  1060. });
  1061. </script>
  1062. <style lang="scss" scoped>
  1063. .align_items_left {
  1064. align-items: flex-start;
  1065. }
  1066. .active_option {
  1067. background: #18ba89 !important;
  1068. color: white !important;
  1069. }
  1070. .mask_form {
  1071. width: 100%;
  1072. height: 100%;
  1073. position: absolute;
  1074. top: 0;
  1075. left: 0;
  1076. z-index: 100;
  1077. }
  1078. .container {
  1079. overflow: hidden;
  1080. }
  1081. .scroll_view {
  1082. height: 100%;
  1083. }
  1084. .top_bg_box {
  1085. position: relative;
  1086. image {
  1087. width: 100%;
  1088. height: 456rpx;
  1089. position: absolute;
  1090. top: 0;
  1091. left: 0;
  1092. z-index: 1;
  1093. }
  1094. .ques_introduce {
  1095. padding: 46rpx 52rpx 0 52rpx;
  1096. box-sizing: border-box;
  1097. position: absolute;
  1098. top: 0;
  1099. left: 0;
  1100. z-index: 2;
  1101. text:nth-child(1) {
  1102. font-size: 36rpx;
  1103. font-weight: bold;
  1104. color: white;
  1105. margin-bottom: 20rpx;
  1106. }
  1107. text:nth-child(2) {
  1108. line-height: 45rpx;
  1109. font-size: 28rpx;
  1110. color: white;
  1111. }
  1112. }
  1113. }
  1114. .main_box {
  1115. padding: 470rpx 30rpx 190rpx 30rpx;
  1116. box-sizing: border-box;
  1117. position: relative;
  1118. z-index: 2;
  1119. }
  1120. .ques_item_box {
  1121. padding: 30rpx;
  1122. box-sizing: border-box;
  1123. background: white;
  1124. border-radius: 20rpx;
  1125. margin-bottom: 32rpx;
  1126. > .ques_title_box > text {
  1127. line-height: 50rpx;
  1128. font-size: 36rpx;
  1129. font-weight: bold;
  1130. color: #1c1c1c;
  1131. }
  1132. .mustQuest_tag {
  1133. color: #dc2828;
  1134. }
  1135. }
  1136. .ques_options {
  1137. margin-top: 34rpx;
  1138. }
  1139. .choice_item {
  1140. width: 100%;
  1141. line-height: 80rpx;
  1142. font-size: 30rpx;
  1143. color: #686868;
  1144. text-align: center;
  1145. margin-bottom: 16rpx;
  1146. border-radius: 10rpx;
  1147. background: #f8f8fa;
  1148. &:last-child {
  1149. margin-bottom: 0;
  1150. }
  1151. }
  1152. .input_label {
  1153. line-height: 40rpx;
  1154. font-size: 32rpx;
  1155. color: #474747;
  1156. }
  1157. .textarea_box {
  1158. width: 100%;
  1159. padding: 20rpx;
  1160. box-sizing: border-box;
  1161. border-radius: 10rpx;
  1162. background: #f8f8fa;
  1163. margin-top: 22rpx;
  1164. textarea {
  1165. width: 100%;
  1166. }
  1167. }
  1168. .matrix_textarea_box {
  1169. width: 70%;
  1170. }
  1171. .picker_box {
  1172. width: 100%;
  1173. }
  1174. .picker {
  1175. width: 100%;
  1176. height: 80rpx;
  1177. padding: 22rpx;
  1178. box-sizing: border-box;
  1179. background: #f9f9f9;
  1180. border-radius: 20rpx;
  1181. justify-content: space-between;
  1182. text {
  1183. white-space: nowrap;
  1184. font-size: 28rpx;
  1185. color: #686868;
  1186. }
  1187. image {
  1188. width: 12rpx;
  1189. height: 24rpx;
  1190. }
  1191. }
  1192. .matrix_options {
  1193. width: 100%;
  1194. margin-bottom: 34rpx;
  1195. justify-content: space-between;
  1196. text {
  1197. font-size: 30rpx;
  1198. color: #1c1c1c;
  1199. text-align: center;
  1200. padding: 20rpx;
  1201. box-sizing: border-box;
  1202. word-wrap: break-word;
  1203. word-break: break-all;
  1204. }
  1205. }
  1206. .matrix_border {
  1207. border: 1px solid #f0f0f0;
  1208. }
  1209. .matrix_options_title {
  1210. background: #f5f5f5;
  1211. }
  1212. .matrix_icon_box {
  1213. width: 100%;
  1214. align-items: flex-start;
  1215. text {
  1216. font-size: 30rpx;
  1217. color: #1c1c1c;
  1218. margin-bottom: 36rpx;
  1219. padding: 0 20rpx;
  1220. box-sizing: border-box;
  1221. }
  1222. image {
  1223. width: 40rpx;
  1224. height: 40rpx;
  1225. }
  1226. }
  1227. .sub_title {
  1228. background: none;
  1229. }
  1230. .img_list {
  1231. width: 100%;
  1232. margin-bottom: 24rpx;
  1233. justify-content: flex-start;
  1234. flex-wrap: wrap;
  1235. .item_img {
  1236. width: 100%;
  1237. height: 100%;
  1238. }
  1239. }
  1240. .add_img {
  1241. width: 32%;
  1242. height: 200rpx;
  1243. margin-right: 2%;
  1244. margin-bottom: 3%;
  1245. position: relative;
  1246. &:nth-child(3n) {
  1247. margin-right: 0;
  1248. }
  1249. }
  1250. .add_img_tips {
  1251. width: 100%;
  1252. text {
  1253. font-size: 30rpx;
  1254. color: #474747;
  1255. }
  1256. }
  1257. .cha_img {
  1258. width: 50rpx;
  1259. height: 50rpx;
  1260. position: absolute;
  1261. top: -15rpx;
  1262. right: -5rpx;
  1263. }
  1264. .options_item_box {
  1265. width: 100%;
  1266. padding: 0 10rpx;
  1267. box-sizing: border-box;
  1268. margin-bottom: 20rpx;
  1269. justify-content: space-between;
  1270. text {
  1271. font-size: 28rpx;
  1272. color: #686868;
  1273. word-wrap: break-word;
  1274. word-break: break-all;
  1275. }
  1276. image {
  1277. width: 40rpx;
  1278. height: 40rpx;
  1279. margin: 20rpx 0;
  1280. }
  1281. }
  1282. .matrix_input_box {
  1283. width: 100%;
  1284. text {
  1285. width: 30%;
  1286. white-space: nowrap;
  1287. }
  1288. input {
  1289. width: 70%;
  1290. }
  1291. }
  1292. .footer_box {
  1293. width: 100%;
  1294. padding: 30rpx 30rpx 60rpx 30rpx;
  1295. box-sizing: border-box;
  1296. background: white;
  1297. position: fixed;
  1298. bottom: 0;
  1299. left: 0;
  1300. z-index: 10;
  1301. text {
  1302. width: 100%;
  1303. line-height: 88rpx;
  1304. font-size: 36rpx;
  1305. color: white;
  1306. text-align: center;
  1307. border-radius: 88rpx;
  1308. background: #18ba89;
  1309. display: block;
  1310. }
  1311. }
  1312. .modal_wrap {
  1313. width: 100%;
  1314. height: 100%;
  1315. background-color: rgba(0, 0, 0, 0.6);
  1316. position: fixed;
  1317. left: 0;
  1318. top: 0;
  1319. z-index: 99;
  1320. display: flex;
  1321. align-items: center;
  1322. justify-content: center;
  1323. }
  1324. .modal_box {
  1325. width: 600rpx;
  1326. max-height: 600rpx;
  1327. background-color: #fff;
  1328. border-radius: 5px;
  1329. padding: 40rpx 40rpx 60rpx;
  1330. }
  1331. .modal_tit {
  1332. text-align: center;
  1333. font-size: 30rpx;
  1334. }
  1335. .modal_box_b1 {
  1336. background-color: #f2f2f2;
  1337. border-radius: 5px;
  1338. line-height: 80rpx;
  1339. margin-top: 40rpx;
  1340. /* padding-left: 40rpx; */
  1341. text-align: center;
  1342. }
  1343. .modal_user_item {
  1344. background: #f2f2f2;
  1345. padding: 30rpx;
  1346. margin-top: 40rpx;
  1347. position: relative;
  1348. }
  1349. .modal_user_right_img {
  1350. width: 12rpx;
  1351. height: 21rpx;
  1352. position: absolute;
  1353. right: 30rpx;
  1354. top: 0;
  1355. bottom: 0;
  1356. margin: auto 0;
  1357. }
  1358. .modal_t1 {
  1359. font-weight: bold;
  1360. display: inline-block;
  1361. margin-right: 20rpx;
  1362. font-size: 32rpx;
  1363. }
  1364. .modal_t3 {
  1365. margin-top: 20rpx;
  1366. }
  1367. .modal_btn {
  1368. width: 46%;
  1369. line-height: 75rpx;
  1370. text-align: center;
  1371. border-radius: 50rpx;
  1372. margin-top: 40rpx;
  1373. }
  1374. .modal_btn1 {
  1375. background: #aaaaaa;
  1376. color: #fff;
  1377. }
  1378. .modal_btn2 {
  1379. background: #61c88f;
  1380. color: #fff;
  1381. }
  1382. .yjfl {
  1383. position: fixed;
  1384. bottom: 340rpx;
  1385. right: 0;
  1386. z-index: 100;
  1387. width: 160rpx;
  1388. text-align: center;
  1389. .title {
  1390. color: #fff;
  1391. position: absolute;
  1392. bottom: 10rpx;
  1393. right: 4rpx;
  1394. width: 100%;
  1395. text-align: center;
  1396. font-size: 24rpx;
  1397. }
  1398. }
  1399. </style>