satisfactionQuestions.vue 34 KB

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