questionBankContinue.vue 73 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479
  1. <template>
  2. <view class="questionBank">
  3. <uni-nav-bar
  4. @clickLeft="clickLeft"
  5. left-icon="back"
  6. :statusBar="true"
  7. :title="examData.examName"
  8. ></uni-nav-bar>
  9. <swiper
  10. class="swiper"
  11. :current="current"
  12. @change="swiperChange"
  13. :interval="interval"
  14. >
  15. <swiper-item v-for="(bank, bankIndex) in questionList" :key="bankIndex">
  16. <view class="pageContent">
  17. <view class="pad_8 titBox">
  18. <view class="firstLetter">
  19. <view class="leftLetters">
  20. <view class="btnType">
  21. <text v-if="bank.type == 1">单选</text>
  22. <text v-if="bank.type == 2">多选</text>
  23. <text v-if="bank.type == 3">判断</text>
  24. <text v-if="bank.type == 4">案例</text>
  25. <text v-if="bank.type == 5">简答</text>
  26. </view>
  27. <text>{{ bankIndex + 1 }}/{{ questionList.length }}</text>
  28. </view>
  29. <view style="color: #666; font-size: 28rpx"></view>
  30. <view class="leftLetters"></view>
  31. </view>
  32. <view class="titles" @click="showPhoto(bank.content)">
  33. <rich-text :nodes="bank.content"></rich-text>
  34. </view>
  35. </view>
  36. <template v-if="bank.type == 1">
  37. <view class="pad_8 titBox no-margin">
  38. <view v-if="!bank.ques">
  39. <view
  40. v-for="(item, index) in bank.jsonStr"
  41. :key="index"
  42. class="lisSty"
  43. @click="radioSelect(item.optionsId, bankIndex)"
  44. >
  45. <view class="activeTI">{{ ast[index] }}</view>
  46. <view class="flex_auto">
  47. {{ item.content }}
  48. <view v-if="item.imgUrl">
  49. <image
  50. style="width: 600rpx"
  51. mode="widthFix"
  52. :src="$method.splitImgHost(item.imgUrl)"
  53. ></image>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view v-if="bank.ques">
  59. <view
  60. v-for="(item, index) in bank.jsonStr"
  61. :key="index"
  62. class="lisSty"
  63. >
  64. <text
  65. :class="{
  66. right:
  67. item.optionsId == bank.ques ||
  68. item.optionsId == bank.ans,
  69. wrong:
  70. item.optionsId == bank.ques && bank.ques != bank.ans,
  71. }"
  72. class="activeTI"
  73. >{{ ast[index] }}</text
  74. >
  75. <view class="flex_auto">
  76. {{ item.content }}
  77. <view v-if="item.imgUrl">
  78. <image
  79. style="width: 600rpx"
  80. mode="widthFix"
  81. :src="$method.splitImgHost(item.imgUrl)"
  82. ></image>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view v-if="bank.ques">
  89. <view class="pad_8 answer">
  90. <view>正确答案:{{ ast[bank.ans - 1] }}</view>
  91. <view>我的答案:{{ ast[bank.ques - 1] || "" }}</view>
  92. </view>
  93. <view class="pad_8 answerInfos">
  94. <view class="answerTitle">答案解析</view>
  95. <view class="answerContent">
  96. <rich-text :nodes="bank.analysisContent"></rich-text>
  97. </view>
  98. </view>
  99. </view>
  100. </template>
  101. <template v-if="bank.type == 2">
  102. <view class="pad_8 titBox no-margin">
  103. <view v-if="!bank.ques">
  104. <view
  105. v-for="(item, index) in bank.jsonStr"
  106. :key="index"
  107. class="lisSty"
  108. @click="checkboxSelect(item.optionsId, bankIndex, index)"
  109. >
  110. <view :class="{ checked: item.checked }" class="activeTI">{{
  111. ast[index]
  112. }}</view>
  113. <view class="flex_auto">
  114. {{ item.content }}
  115. <view v-if="item.imgUrl">
  116. <image
  117. style="width: 600rpx"
  118. mode="widthFix"
  119. :src="$method.splitImgHost(item.imgUrl)"
  120. ></image>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. <view
  126. v-if="!bank.ques"
  127. class="submit_checkbox"
  128. :class="{ disabled: !isCheckboxChecked(bank.jsonStr) }"
  129. @click="checkboxSubmit(bankIndex)"
  130. >
  131. 确认答案
  132. </view>
  133. <view v-if="bank.ques">
  134. <view
  135. v-for="(item, index) in bank.jsonStr"
  136. :key="index"
  137. class="lisSty"
  138. >
  139. <text
  140. :class="{
  141. right:
  142. bank.ques.indexOf(item.optionsId) != -1 ||
  143. bank.ans.indexOf(item.optionsId) != -1,
  144. wrong:
  145. bank.ques.indexOf(item.optionsId) != -1 &&
  146. bank.ans.indexOf(item.optionsId) == -1,
  147. }"
  148. class="activeTI"
  149. >{{ ast[index] }}</text
  150. >
  151. <view class="flex_auto">
  152. {{ item.content }}
  153. <view v-if="item.imgUrl">
  154. <image
  155. style="width: 600rpx"
  156. mode="widthFix"
  157. :src="$method.splitImgHost(item.imgUrl)"
  158. ></image>
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. </view>
  164. <view v-if="bank.ques">
  165. <view class="pad_8 answer">
  166. <view
  167. >正确答案:
  168. <text
  169. :key="ansItemIndex"
  170. v-for="(ansItem, ansItemIndex) in bank.ans"
  171. >{{ ast[ansItem - 1] }}</text
  172. >
  173. </view>
  174. <view
  175. >我的答案:
  176. <text
  177. :key="quesItemIndex"
  178. v-for="(quesItem, quesItemIndex) in bank.ques"
  179. >{{ ast[quesItem - 1] }}</text
  180. >
  181. </view>
  182. </view>
  183. <view class="pad_8 answerInfos">
  184. <view class="answerTitle">答案解析</view>
  185. <view class="answerContent">
  186. <rich-text :nodes="bank.analysisContent"></rich-text>
  187. </view>
  188. </view>
  189. </view>
  190. </template>
  191. <template v-if="bank.type == 3">
  192. <view class="pad_8 titBox no-margin">
  193. <view v-if="!bank.ques">
  194. <view
  195. v-for="(item, index) in judge"
  196. :key="index"
  197. class="lisSty"
  198. @click="judgeSelect(index, bankIndex)"
  199. >
  200. <view class="activeTI">{{ ast[index] }}</view>
  201. <view class="flex_auto">
  202. {{ item }}
  203. <view v-if="item.imgUrl">
  204. <image
  205. style="width: 600rpx"
  206. mode="widthFix"
  207. :src="$method.splitImgHost(item.imgUrl)"
  208. ></image>
  209. </view>
  210. </view>
  211. </view>
  212. </view>
  213. <view v-if="bank.ques">
  214. <view
  215. v-for="(item, index) in judge"
  216. :key="index"
  217. class="lisSty"
  218. >
  219. <!-- right: index == bank.ques || index == bank.ans,
  220. wrong: index == bank.ques && bank.ques != bank.ans, -->
  221. <text
  222. :class="{
  223. right: (index + 1) == bank.ques || (index + 1) == bank.ans,
  224. wrong: (index - 1) == bank.ques && bank.ques == bank.ans,
  225. }"
  226. class="activeTI"
  227. >{{ ast[index] }}</text
  228. >
  229. {{ item }}
  230. <view v-if="item.imgUrl">
  231. <image
  232. style="width: 600rpx"
  233. mode="widthFix"
  234. :src="$method.splitImgHost(item.imgUrl)"
  235. ></image>
  236. </view>
  237. </view>
  238. </view>
  239. </view>
  240. <view v-if="bank.ques">
  241. <view class="pad_8 answer">
  242. <view>正确答案:{{ ast[bank.ans] }}</view>
  243. <view>我的答案:{{ ast[bank.ques == 1 ? 0 : 1] || "" }}</view>
  244. </view>
  245. <view class="pad_8 answerInfos">
  246. <view class="answerTitle">答案解析</view>
  247. <view class="answerContent">
  248. <rich-text :nodes="bank.analysisContent"></rich-text>
  249. </view>
  250. </view>
  251. </view>
  252. </template>
  253. <!-- 简答题 -->
  254. <template v-if="bank.type == 5">
  255. <view class="pad_8 titBox">
  256. <view class="ans">
  257. <view
  258. class="ans_input"
  259. v-if="
  260. !bank.ques ||
  261. (!bank.ques.text && !bank.ques.imageList.length)
  262. "
  263. >
  264. <view class="top flex">
  265. <image
  266. :data-index="bankIndex"
  267. class="icon"
  268. @click="chooseImg(bankIndex)"
  269. src="/static/camera.png"
  270. mode=""
  271. ></image>
  272. <view class="progress"
  273. >{{ bank.ansText.imageList.length || "0" }}/4</view
  274. >
  275. <view
  276. class="submit"
  277. :class="{ disabled: !bank.ansText.text && hasImgs(bank) }"
  278. @click="submitAns(bankIndex)"
  279. >确认答案</view
  280. >
  281. </view>
  282. <view class="textarea">
  283. <textarea
  284. v-model="bank.ansText.text"
  285. placeholder="在此输入答案"
  286. ></textarea>
  287. </view>
  288. <view class="imgs">
  289. <view
  290. class="img"
  291. v-for="(img, imgIndex) in bank.ansText.imageList"
  292. :key="imgIndex"
  293. >
  294. <text @click="deleteImg(imgIndex, bankIndex)">x</text>
  295. <image :src="$method.splitImgHost(img, true)"></image>
  296. </view>
  297. </view>
  298. </view>
  299. <view
  300. class="ans_submit answerInfos"
  301. v-if="
  302. bank.ques && (bank.ques.text || bank.ques.imageList.length)
  303. "
  304. >
  305. <view class="answerTitle">我的答案:</view>
  306. {{ bank.ques.text || "" }}
  307. <view class="imgs">
  308. <image
  309. class="img"
  310. v-for="(ques, quesIndex) in bank.ques.imageList"
  311. :key="quesIndex"
  312. :src="$method.splitImgHost(ques, true)"
  313. ></image>
  314. </view>
  315. </view>
  316. </view>
  317. </view>
  318. <view v-if="bank.ques.text || bank.ques.imageList.length">
  319. <view class="pad_8 answerInfos">
  320. <view class="answerTitle">答案解析:</view>
  321. <view class="answerContent">
  322. <rich-text :nodes="bank.analysisContent"></rich-text>
  323. </view>
  324. </view>
  325. </view>
  326. </template>
  327. <!-- 案例题 -->
  328. <template v-if="bank.type == 4">
  329. <view class="tabs">
  330. <view
  331. class="tab"
  332. :class="{ current: tabIndex == bank.current }"
  333. :key="tabIndex"
  334. v-for="(tab, tabIndex) in bank.jsonStr"
  335. @click="tabSelect(tabIndex, bankIndex)"
  336. >
  337. 问题{{ tabIndex + 1 }}
  338. </view>
  339. </view>
  340. <view
  341. v-for="(ansItem, ansIndex) in bank.jsonStr"
  342. v-if="bank.current == ansIndex"
  343. :key="ansIndex"
  344. >
  345. <template v-if="ansItem.type == 1">
  346. <view class="pad_8 titBox">
  347. <view class="leftLetters">
  348. <view class="btnType">
  349. <text>单选</text>
  350. </view>
  351. </view>
  352. <view class="titles">
  353. <rich-text :nodes="ansItem.content"></rich-text>
  354. </view>
  355. <view v-if="!bank.ques[ansIndex]">
  356. <view
  357. v-for="(option, childIndex) in ansItem.optionsList"
  358. :key="childIndex"
  359. class="lisSty"
  360. @click="
  361. radioSelectChild(option.optionsId, ansIndex, bankIndex)
  362. "
  363. >
  364. <view class="activeTI">{{ ast[childIndex] }}</view>
  365. <view class="flex_auto">
  366. <rich-text
  367. class="textChild"
  368. :nodes="option.content"
  369. ></rich-text>
  370. <view v-if="option.imgUrl">
  371. <image
  372. style="width: 600rpx"
  373. mode="widthFix"
  374. :src="$method.splitImgHost(option.imgUrl)"
  375. ></image>
  376. </view>
  377. </view>
  378. </view>
  379. </view>
  380. <view v-if="bank.ques[ansIndex]">
  381. <view
  382. v-for="(option, childIndex) in ansItem.optionsList"
  383. :key="childIndex"
  384. class="lisSty"
  385. >
  386. <text
  387. :class="{
  388. right:
  389. option.optionsId == bank.ques[ansIndex] ||
  390. option.optionsId == bank.ans[ansIndex],
  391. wrong:
  392. option.optionsId == bank.ques[ansIndex] &&
  393. bank.ques[ansIndex] != bank.ans[ansIndex],
  394. }"
  395. class="activeTI"
  396. >{{ ast[childIndex] }}</text
  397. >
  398. <view class="flex_auto">
  399. <rich-text :nodes="option.content"></rich-text>
  400. <view v-if="option.imgUrl">
  401. <image
  402. style="width: 600rpx"
  403. mode="widthFix"
  404. :src="$method.splitImgHost(option.imgUrl)"
  405. ></image>
  406. </view>
  407. </view>
  408. </view>
  409. </view>
  410. </view>
  411. <view v-if="bank.ques[ansIndex]">
  412. <view class="pad_8 answer">
  413. <view>正确答案:{{ ast[bank.ans[ansIndex] - 1] }}</view>
  414. <view
  415. >我的答案:{{ ast[bank.ques[ansIndex] - 1] || "" }}</view
  416. >
  417. </view>
  418. <view class="pad_8 answerInfos">
  419. <view class="answerTitle">答案解析</view>
  420. <view class="answerContent">
  421. <rich-text :nodes="option.analysisContent"></rich-text>
  422. </view>
  423. </view>
  424. </view>
  425. </template>
  426. <template v-if="ansItem.type == 2">
  427. <view class="pad_8 titBox">
  428. <view class="leftLetters">
  429. <view class="btnType">
  430. <text>多选</text>
  431. </view>
  432. </view>
  433. <view class="titles">
  434. <rich-text :nodes="ansItem.content"></rich-text>
  435. </view>
  436. <view v-if="!bank.ques[ansIndex]">
  437. <view
  438. v-for="(option, childindex) in ansItem.optionsList"
  439. :key="childindex"
  440. class="lisSty"
  441. @click="
  442. checkboxSelectChild(bankIndex, ansIndex, childindex)
  443. "
  444. >
  445. <view
  446. :class="{ checked: option.checked }"
  447. class="activeTI"
  448. >{{ ast[childindex] }}</view
  449. >
  450. <view class="flex_auto">
  451. <rich-text :nodes="option.content"></rich-text>
  452. <view v-if="option.imgUrl">
  453. <image
  454. style="width: 600rpx"
  455. mode="widthFix"
  456. :src="$method.splitImgHost(option.imgUrl)"
  457. ></image>
  458. </view>
  459. </view>
  460. </view>
  461. </view>
  462. <view
  463. v-if="!bank.ques[ansIndex]"
  464. class="submit_checkbox"
  465. :class="{
  466. disabled: !isCheckboxChecked(ansItem.optionsList),
  467. }"
  468. @click="checkboxSubmitChild(bankIndex, ansIndex)"
  469. >
  470. 确认答案
  471. </view>
  472. <view v-if="bank.ques && bank.ques[ansIndex]">
  473. <view
  474. v-for="(option, childindex) in ansItem.optionsList"
  475. :key="childindex"
  476. class="lisSty"
  477. >
  478. <text
  479. :class="{
  480. right: right(bankIndex, ansIndex, option),
  481. wrong: wrong(bankIndex, ansIndex, option),
  482. }"
  483. class="activeTI"
  484. >{{ ast[childindex] }}</text
  485. >
  486. <view class="flex_auto">
  487. <rich-text :nodes="option.content"></rich-text>
  488. <view v-if="option.imgUrl">
  489. <image
  490. style="width: 600rpx"
  491. mode="widthFix"
  492. :src="$method.splitImgHost(option.imgUrl)"
  493. ></image>
  494. </view>
  495. </view>
  496. </view>
  497. </view>
  498. </view>
  499. <view v-if="bank.ques[ansIndex]">
  500. <view class="pad_8 answer">
  501. <view
  502. >正确答案:
  503. <text
  504. :key="ansItemIndex1"
  505. v-for="(ansItem1, ansItemIndex1) in bank.ans[ansIndex]"
  506. >{{ ast[ansItem1 - 1] }}</text
  507. >
  508. </view>
  509. <view
  510. >我的答案:
  511. <text
  512. :key="quesItemIndex"
  513. v-for="(quesItem, quesItemIndex) in bank.ques[ansIndex]"
  514. >{{ ast[quesItem - 1] }}</text
  515. >
  516. </view>
  517. </view>
  518. <view class="pad_8 answerInfos">
  519. <view class="answerTitle">答案解析</view>
  520. <view class="answerContent">
  521. <rich-text :nodes="ansItem.analysisContent"></rich-text>
  522. </view>
  523. </view>
  524. </view>
  525. </template>
  526. <template v-if="ansItem.type == 3">
  527. <view class="pad_8 titBox">
  528. <view class="leftLetters">
  529. <view class="btnType">
  530. <text>判断</text>
  531. </view>
  532. </view>
  533. <view class="titles">
  534. <rich-text :nodes="ansItem.content"></rich-text>
  535. </view>
  536. <view v-if="!bank.ques[ansIndex]">
  537. <view
  538. v-for="(option, childindex) in judge"
  539. :key="childindex"
  540. class="lisSty"
  541. @click="judgeSelectChild(ansIndex, childindex, bankIndex)"
  542. >
  543. <view class="activeTI">{{ ast[childindex] }}</view>
  544. <view class="flex_auto">
  545. {{ option }}
  546. <view v-if="option.imgUrl">
  547. <image
  548. style="width: 600rpx"
  549. mode="widthFix"
  550. :src="$method.splitImgHost(option.imgUrl)"
  551. ></image>
  552. </view>
  553. </view>
  554. </view>
  555. </view>
  556. <view v-if="bank.ques[ansIndex]">
  557. <view
  558. v-for="(option, childindex) in judge"
  559. :key="childindex"
  560. class="lisSty"
  561. >
  562. <!-- right:
  563. childindex == bank.ques[ansIndex] ||
  564. childindex == bank.ans[ansIndex],
  565. wrong:
  566. childindex == bank.ques[ansIndex] &&
  567. bank.ques[ansIndex] != bank.ans[ansIndex], -->
  568. <text
  569. :class="{
  570. right:
  571. (childindex + 1) == bank.ques[ansIndex] ||
  572. (childindex + 1) == bank.ans[ansIndex],
  573. wrong:
  574. (childindex - 1) == bank.ques[ansIndex] &&
  575. bank.ques[ansIndex] == bank.ans[ansIndex],
  576. }"
  577. class="activeTI"
  578. >{{ ast[childindex] }}</text
  579. >
  580. <view class="flex_auto">
  581. {{ option }}
  582. <view v-if="option.imgUrl">
  583. <image
  584. style="width: 600rpx"
  585. mode="widthFix"
  586. :src="$method.splitImgHost(option.imgUrl)"
  587. ></image>
  588. </view>
  589. </view>
  590. </view>
  591. </view>
  592. </view>
  593. <view v-if="bank.ques[ansIndex]">
  594. <view class="pad_8 answer">
  595. <view>正确答案:{{ ast[bank.ans[ansIndex]] }}</view>
  596. <view>我的答案:{{ ast[bank.ques[ansIndex] == 1 ? 0 : 1] || "" }}</view>
  597. </view>
  598. <view class="pad_8 answerInfos">
  599. <view class="answerTitle">答案解析</view>
  600. <view class="answerContent">
  601. <rich-text :nodes="ansItem.analysisContent"></rich-text>
  602. </view>
  603. </view>
  604. </view>
  605. </template>
  606. <!-- 简答题 -->
  607. <template v-if="ansItem.type == 5">
  608. <view class="pad_8 titBox_title">
  609. <view class="leftLetters">
  610. <view class="btnType">
  611. <text>简答</text>
  612. </view>
  613. </view>
  614. <view class="titles">
  615. <rich-text :nodes="ansItem.content"></rich-text>
  616. </view>
  617. </view>
  618. <view class="pad_8 titBox_title">
  619. <view class="ans">
  620. <view
  621. class="ans_input"
  622. v-if="
  623. !bank.ques[ansIndex] ||
  624. (!bank.ques[ansIndex].text &&
  625. !bank.ques[ansIndex].imageList.length)
  626. "
  627. >
  628. <view class="top flex">
  629. <image
  630. class="icon"
  631. @click="chooseImgChild(bankIndex, ansIndex)"
  632. src="/static/08-10_032.jpg"
  633. mode=""
  634. ></image>
  635. <view class="progress"
  636. >{{ ansItem.ansText.imageList.length || "0" }}/4</view
  637. >
  638. <view
  639. class="submit"
  640. :class="{
  641. disabled: !ansItem.ansText.text && hasImgs(ansItem),
  642. }"
  643. @click="submitAnsChild(bankIndex, ansIndex)"
  644. >确认答案</view
  645. >
  646. </view>
  647. <view class="textarea">
  648. <textarea
  649. v-model="ansItem.ansText.text"
  650. placeholder="在此输入答案"
  651. ></textarea>
  652. </view>
  653. <view class="imgs">
  654. <view
  655. class="img"
  656. v-for="(img, imgIndex) in ansItem.ansText.imageList"
  657. :key="imgIndex"
  658. >
  659. <text
  660. @click="
  661. deleteImgChild(imgIndex, bankIndex, ansIndex)
  662. "
  663. >x</text
  664. >
  665. <image :src="$method.splitImgHost(img, true)"></image>
  666. </view>
  667. </view>
  668. </view>
  669. <view
  670. class="ans_submit answerInfos"
  671. v-if="
  672. bank.ques[ansIndex] &&
  673. (bank.ques[ansIndex].text ||
  674. bank.ques[ansIndex].imageList.length)
  675. "
  676. >
  677. <view class="answerTitle">我的答案</view>
  678. {{ bank.ques[ansIndex].text || "" }}
  679. <view
  680. class="imgs"
  681. v-if="
  682. bank.ques[ansIndex] &&
  683. bank.ques[ansIndex].imageList.length
  684. "
  685. >
  686. <image
  687. class="img"
  688. :key="quesIndex"
  689. v-for="(ques, quesIndex) in bank.ques[ansIndex]
  690. .imageList"
  691. :src="$method.splitImgHost(ques, true)"
  692. ></image>
  693. </view>
  694. </view>
  695. </view>
  696. </view>
  697. <view v-if="bank.ques[ansIndex]">
  698. <view class="pad_8 answerInfos">
  699. <view class="answerTitle">答案解析</view>
  700. <view class="answerContent">
  701. <rich-text :nodes="ansItem.analysisContent"></rich-text>
  702. </view>
  703. </view>
  704. </view>
  705. </template>
  706. </view>
  707. </template>
  708. <view class="footer_btn">
  709. <view
  710. class="collect show"
  711. @click="collect(collectList[bankIndex], bankIndex)"
  712. >
  713. <view v-if="collectList[bankIndex]">
  714. <image src="/static/icon/collected.png" mode=""></image>
  715. <view>取消收藏</view>
  716. </view>
  717. <view v-if="!collectList[bankIndex]">
  718. <image src="/static/icon/collect.png" mode=""></image>
  719. <view>收藏</view>
  720. </view>
  721. </view>
  722. <view class="flex_center" @click="openFooterTab">
  723. <view class="up-icon">
  724. <image src="/static/up.png"></image>
  725. </view>
  726. 答题卡
  727. </view>
  728. <view class="collect show" @click="pdsubmit">
  729. <view>
  730. <image src="/static/jj.png" mode=""></image>
  731. <view>交卷</view>
  732. </view>
  733. </view>
  734. </view>
  735. </view>
  736. </swiper-item>
  737. </swiper>
  738. <u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
  739. <view class="popupView">
  740. <view class="popupTops">
  741. <view class="topIcon"></view>
  742. 点击编号即可跳转至对应题目
  743. </view>
  744. <view class="popupContent">
  745. <scroll-view scroll-y="true" style="height: 506rpx">
  746. <view class="boxSty">
  747. <view
  748. v-for="(item, index) in questionList"
  749. :key="index"
  750. @click="changeIndex(index)"
  751. :class="{
  752. isRight: isRight(item, index),
  753. isWrong: isWrong(item, index),
  754. isOver: isOver(item, index),
  755. isPart: isPart(item, index),
  756. }"
  757. class="liListSty"
  758. >{{ index + 1 }}</view
  759. >
  760. </view>
  761. </scroll-view>
  762. </view>
  763. </view>
  764. </u-popup>
  765. <view class="dialog" v-if="showDialog">
  766. <view class="text">左右滑动切换上下题</view>
  767. <view class="btn" @click="hideDialog">我知道了</view>
  768. </view>
  769. <u-popup
  770. v-model="showpopups"
  771. mode="center"
  772. border-radius="24"
  773. height="439rpx"
  774. width="640rpx"
  775. :mask-close-able="false"
  776. >
  777. <view class="popboxs">
  778. <view class="classTops">温馨提示</view>
  779. <view class="textStys">
  780. {{
  781. cgType === 7
  782. ? "您还未交卷,确定结束做题吗?"
  783. : cgType === 8
  784. ? `您还有${lastCount}道题未作答, 现在继续作答,还是下次继续?`
  785. : cgType === 6
  786. ? `您还有${lastCount}道题未作答, 您确定要交卷吗?`
  787. : cgType == 9
  788. ? `您已完成所有题目,快去交卷吧!`
  789. : ""
  790. }}
  791. </view>
  792. <view class="classFootsty" v-if="cgType === 6">
  793. <view class="btnsty btns1" @click="submit">立即交卷</view>
  794. <view class="btnsty btns2" @click="showpopups = false">继续做题</view>
  795. </view>
  796. <view class="classFootsty" v-if="cgType === 7">
  797. <view class="btnsty btns1" @click="backPages">下次继续</view>
  798. <view class="btnsty btns2" @click="submit">结束做题</view>
  799. </view>
  800. <view class="classFootsty" v-if="cgType === 8">
  801. <view class="btnsty btns1" @click="backPages()">下次继续</view>
  802. <view class="btnsty btns2" @click="showpopups = false">继续作答</view>
  803. </view>
  804. <view class="classFootsty" v-if="cgType === 9">
  805. <view class="btnsty btns1" @click="showpopups = false">暂不交卷</view>
  806. <view class="btnsty btns2" @click="submit">立即交卷</view>
  807. </view>
  808. </view>
  809. </u-popup>
  810. </view>
  811. </template>
  812. <script>
  813. export default {
  814. data() {
  815. return {
  816. id: "",
  817. current: 0,
  818. showpopups: false,
  819. questionList: [],
  820. ast: ["A", "B", "C", "D", "E", "F", "G"],
  821. judge: ["正确", "错误"],
  822. show: false,
  823. showDialog: false,
  824. bankList: [],
  825. collectList: [],
  826. goodsId: "",
  827. recordId: "",
  828. isLastCount: false, //是否有未答题目
  829. lastCount: 0, //剩余没有回答的题目数
  830. chapterId: "",
  831. moduleId: "",
  832. isSubmit: false,
  833. examData: {},
  834. orderGoodsId: "",
  835. cgType: 0, //对应设计稿弹窗编码
  836. };
  837. },
  838. onLoad(option) {
  839. this.orderGoodsId = option.orderGoodsId || "";
  840. this.id = option.id || "";
  841. this.goodsId = option.goodsid || "";
  842. this.chapterId = option.chapterId || "";
  843. this.moduleId = option.moduleId || "";
  844. this.recordId = option.recordId || "";
  845. let showDialog = uni.getStorageSync("showDialog");
  846. if (showDialog) {
  847. this.showDialog = false;
  848. } else {
  849. this.showDialog = true;
  850. uni.setStorageSync("showDialog", "1");
  851. }
  852. this.goodsQuestionList();
  853. },
  854. onUnload() {
  855. if (this.isSubmit) {
  856. return;
  857. }
  858. this.examRecordEdit();
  859. },
  860. methods: {
  861. /**
  862. * 是否有上传图片
  863. */
  864. hasImgs(bank) {
  865. return bank.ansText.imageList.length == 0;
  866. },
  867. /**
  868. * @param {Object} state
  869. * @param {Object} index
  870. * 收藏
  871. */
  872. collect(state, index) {
  873. if (!state) {
  874. this.$api
  875. .collectQuestion({
  876. examId: this.id,
  877. questionId: this.questionList[index].questionId,
  878. goodsId: this.goodsId || "",
  879. orderGoodsId: this.orderGoodsId,
  880. })
  881. .then((res) => {
  882. if (res.data.code == 200) {
  883. this.$set(this.collectList, index, true);
  884. uni.showToast({
  885. title: "收藏成功",
  886. duration: 2000,
  887. icon: "none",
  888. });
  889. this.getCollectInfo(index);
  890. }
  891. });
  892. } else {
  893. this.$api
  894. .deleteCollectQuestion(this.collectList[index].collectQuestionId)
  895. .then((res) => {
  896. if (res.data.code == 200) {
  897. this.$set(this.collectList, index, false);
  898. uni.showToast({
  899. title: "取消收藏成功",
  900. duration: 2000,
  901. icon: "none",
  902. });
  903. }
  904. });
  905. }
  906. return;
  907. },
  908. /**
  909. * 点击后退按钮
  910. */
  911. clickLeft() {
  912. let ansCount = this.questionOverNum(true); //已答题数
  913. this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
  914. //所有题目答完
  915. if (this.lastCount == 0) {
  916. // this.testOver = true;
  917. this.cgType = 7;
  918. //未答完
  919. } else {
  920. this.cgType = 8;
  921. // this.isLastCount = true;
  922. }
  923. this.showpopups = true;
  924. },
  925. /**
  926. * 获取已经回答的题目数
  927. * hasSpecail (是否包含简答和案例)
  928. */
  929. questionOverNum(hasSpecail) {
  930. let count = 0;
  931. this.questionList.forEach((item) => {
  932. if (item.type == 1 || item.type == 2 || item.type == 3) {
  933. if (item.ques) {
  934. count++;
  935. }
  936. } else if (item.type == 4) {
  937. //案例题
  938. if (hasSpecail) {
  939. let isOver = item.jsonStr.every((jsonItem, indexs) => {
  940. if (
  941. jsonItem.type == 1 ||
  942. jsonItem.type == 2 ||
  943. jsonItem.type == 3
  944. ) {
  945. if (item.ques[indexs]) {
  946. return true;
  947. } else {
  948. return false;
  949. }
  950. } else if (jsonItem.type == 5) {
  951. if (
  952. item.ques[indexs] &&
  953. (item.ques[indexs].text.length ||
  954. item.ques[indexs].imageList.length)
  955. ) {
  956. return true;
  957. } else {
  958. return false;
  959. }
  960. }
  961. });
  962. if (isOver) {
  963. count++;
  964. console.log(item, 444);
  965. }
  966. }
  967. } else if (item.type == 5) {
  968. //简答题
  969. if (hasSpecail) {
  970. if (item.ques && (item.ques.text || item.ques.imageList.length)) {
  971. count++;
  972. }
  973. }
  974. }
  975. });
  976. return count;
  977. },
  978. /**
  979. * 返回上一页
  980. */
  981. backPages() {
  982. uni.navigateBack({
  983. delta: 1,
  984. });
  985. },
  986. /**
  987. * 是否做完所有题目
  988. */
  989. isDoOver() {
  990. let questionOverNum = this.questionOverNum(true); //获取已经回答的题目数(包括简答和案例)
  991. if (this.questionList.length == questionOverNum) {
  992. //全部做完弹窗
  993. this.cgType = 9;
  994. this.showpopups = true;
  995. }
  996. },
  997. pdsubmit() {
  998. // if (this.bankType == 1) {
  999. let ansCount = this.questionOverNum(true); //已答题数
  1000. this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
  1001. //没有答完
  1002. if (this.lastCount !== 0) {
  1003. this.cgType = 6;
  1004. this.showpopups = true;
  1005. return;
  1006. }
  1007. // }
  1008. this.submit();
  1009. },
  1010. goodsQuestionList() {
  1011. //继续答题
  1012. console.log("继续做题");
  1013. this.$api.examReport(this.recordId).then((res) => {
  1014. let json = JSON.parse(res.data.data.historyExamJson);
  1015. this.examData = res.data.data;
  1016. this.questionList = json;
  1017. });
  1018. },
  1019. /**
  1020. * @param {Object} current
  1021. * 获取收藏信息
  1022. */
  1023. getCollectInfo(current) {
  1024. this.$api
  1025. .getCollectInfo({
  1026. examId: this.id,
  1027. questionId: this.questionList[current].questionId,
  1028. goodsId: this.goodsId,
  1029. orderGoodsId: this.orderGoodsId,
  1030. })
  1031. .then((res) => {
  1032. if (res.data.code == 500) {
  1033. this.$set(this.collectList, current, false);
  1034. } else if (res.data.code == 200) {
  1035. this.$set(this.collectList, current, res.data.data);
  1036. }
  1037. });
  1038. },
  1039. /**
  1040. * @param {Object} e单选点击
  1041. */
  1042. radioSelect(optionsId, bindex) {
  1043. if (this.questionList[bindex].ques) return;
  1044. this.$set(this.questionList[bindex], "ques", optionsId);
  1045. this.isDoOver();
  1046. },
  1047. examRecordEdit() {
  1048. if (!this.isSubmit) {
  1049. let number = 0;
  1050. let score = 0;
  1051. let doQuestionNum = 0;
  1052. let doQuestionIds = []; //做过的题目id
  1053. this.questionList.length &&
  1054. this.questionList.forEach((item, index) => {
  1055. if (item.type == 1) {
  1056. if (item.ques == item.ans) {
  1057. score += item.score;
  1058. number++;
  1059. }
  1060. if (item.ques) {
  1061. doQuestionNum++;
  1062. doQuestionIds.push(item.questionId);
  1063. }
  1064. } else if (item.type == 2) {
  1065. let isRight =
  1066. item.ques &&
  1067. item.ques.every((quesItem, quesIndex) => {
  1068. return item.ques[quesIndex] == item.ans[quesIndex];
  1069. });
  1070. if (isRight) {
  1071. score += item.score;
  1072. number++;
  1073. }
  1074. if (item.ques && item.ques.length) {
  1075. doQuestionNum++;
  1076. doQuestionIds.push(item.questionId);
  1077. }
  1078. } else if (item.type == 3) {
  1079. if (item.ques == item.ans) {
  1080. score += item.score;
  1081. number++;
  1082. }
  1083. if (item.ques) {
  1084. doQuestionNum++;
  1085. doQuestionIds.push(item.questionId);
  1086. }
  1087. } else if (item == 4) {
  1088. if (item.ques.length) {
  1089. doQuestionNum++;
  1090. doQuestionIds.push(item.questionId);
  1091. }
  1092. } else if (item.type == 5) {
  1093. if (item.ques && (item.ques.imageList.length || item.ques.text)) {
  1094. doQuestionNum++;
  1095. doQuestionIds.push(item.questionId);
  1096. }
  1097. }
  1098. });
  1099. this.$api
  1100. .examRecordEdit({
  1101. moduleExamId: this.moduleId || 0,
  1102. chapterExamId: this.chapterId || 0,
  1103. examId: this.id,
  1104. doQuestionIds: doQuestionIds.join(""),
  1105. goodsId: this.goodsId,
  1106. orderGoodsId: this.orderGoodsId,
  1107. recordId: this.recordId,
  1108. rightQuestionNum: number,
  1109. status: 0,
  1110. doQuestionNum: doQuestionNum,
  1111. historyExamJson: JSON.stringify(this.questionList),
  1112. })
  1113. .then((res) => {});
  1114. }
  1115. },
  1116. /**
  1117. * @param {Object} e单选点击
  1118. */
  1119. radioSelectChild(optionsId, ansIndex, bindex) {
  1120. if (this.questionList[bindex].ques[ansIndex]) return;
  1121. this.$set(this.questionList[bindex].ques, ansIndex, optionsId);
  1122. this.isDoOver();
  1123. },
  1124. /**
  1125. * @param {Object} 多选点击
  1126. */
  1127. checkboxSelect(optionsId, bindex, index) {
  1128. this.$set(
  1129. this.questionList[bindex].jsonStr[index],
  1130. "checked",
  1131. !this.questionList[bindex].jsonStr[index].checked
  1132. );
  1133. },
  1134. /**
  1135. * @param {Object} 多选点击
  1136. */
  1137. checkboxSelectChild(bindex, ansIndex, childIndex) {
  1138. this.$set(
  1139. this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex],
  1140. "checked",
  1141. !this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex]
  1142. .checked
  1143. );
  1144. },
  1145. /**
  1146. * 提交数据
  1147. */
  1148. submit() {
  1149. let score = 0; //计算总分
  1150. let reportStatus = 0;
  1151. let number = 0;
  1152. let allScore = 0;
  1153. let passScore = 0;
  1154. let doQuestionNum = 0;
  1155. let doWrongQuestionIds = []; //错题和未做题id(客观题)
  1156. let doQuestionIds = []; //做过的题目id
  1157. let rightQuestionIds = []; //做对的题目id
  1158. let lessQuestionNum = 0;
  1159. this.questionList.forEach((item, index) => {
  1160. passScore = item.passScore;
  1161. if (item.type == 1) {
  1162. if (item.ques == item.ans) {
  1163. score += item.score;
  1164. number++;
  1165. rightQuestionIds.push(item.questionId);
  1166. } else {
  1167. //错误
  1168. doWrongQuestionIds.push(item.questionId);
  1169. }
  1170. allScore += item.score;
  1171. if (item.ques) {
  1172. doQuestionNum++;
  1173. doQuestionIds.push(item.questionId);
  1174. }
  1175. } else if (item.type == 2) {
  1176. let isRight =
  1177. item.ans &&
  1178. item.ans.every((quesItem, quesIndex) => {
  1179. if (item.ques) {
  1180. return item.ques[quesIndex] == item.ans[quesIndex];
  1181. } else {
  1182. return false;
  1183. }
  1184. });
  1185. if (isRight) {
  1186. score += item.score;
  1187. number++;
  1188. rightQuestionIds.push(item.questionId);
  1189. } else {
  1190. let hasPart = false;
  1191. let checkboxScore = 1; //获取单题总分数
  1192. item.ques &&
  1193. item.ques.forEach((ques, quesIndex) => {
  1194. //选错一个全扣
  1195. if (item.ques) {
  1196. if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
  1197. checkboxScore = 0;
  1198. }
  1199. } else {
  1200. checkboxScore = 0;
  1201. }
  1202. });
  1203. console.log(checkboxScore);
  1204. //没选错
  1205. if (checkboxScore) {
  1206. checkboxScore = 0;
  1207. item.ans.forEach((ans, quesIndex) => {
  1208. //漏选扣一部分,对n题给n X partScore 分
  1209. if (item.ques) {
  1210. if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
  1211. checkboxScore += item.partScore;
  1212. hasPart = true;
  1213. }
  1214. } else {
  1215. checkboxScore = 0;
  1216. }
  1217. });
  1218. }
  1219. if (!hasPart) {
  1220. //0分
  1221. item.scoreResult = 0;
  1222. doWrongQuestionIds.push(item.questionId);
  1223. } else {
  1224. //部分分
  1225. // number++;
  1226. // doWrongQuestionIds.push(item.questionId)
  1227. lessQuestionNum++;
  1228. item.scoreResult = checkboxScore;
  1229. score += checkboxScore;
  1230. // rightQuestionIds.push(item.questionId)
  1231. }
  1232. }
  1233. allScore += item.score;
  1234. if (item.ques && item.ques.length) {
  1235. doQuestionNum++;
  1236. doQuestionIds.push(item.questionId);
  1237. }
  1238. } else if (item.type == 3) {
  1239. if (item.ques == item.ans) {
  1240. score += item.score;
  1241. number++;
  1242. rightQuestionIds.push(item.questionId);
  1243. } else {
  1244. doWrongQuestionIds.push(item.questionId);
  1245. }
  1246. allScore += item.score;
  1247. if (item.ques) {
  1248. doQuestionNum++;
  1249. doQuestionIds.push(item.questionId);
  1250. }
  1251. } else if (item.type == 4) {
  1252. allScore += item.score;
  1253. if (item.ques && item.ques.length) {
  1254. doQuestionNum++;
  1255. doQuestionIds.push(item.questionId);
  1256. }
  1257. } else if (item.type == 5) {
  1258. allScore += item.score;
  1259. if (item.ques && (item.ques.imageList.length || item.ques.text)) {
  1260. doQuestionNum++;
  1261. doQuestionIds.push(item.questionId);
  1262. }
  1263. }
  1264. });
  1265. //大于及格
  1266. if (score >= passScore) {
  1267. reportStatus = 1;
  1268. } else {
  1269. reportStatus = 0;
  1270. }
  1271. this.$api
  1272. .examRecordEdit({
  1273. examId: this.id,
  1274. goodsId: this.goodsId,
  1275. orderGoodsId: this.orderGoodsId,
  1276. reportStatus: reportStatus,
  1277. totalScore: allScore,
  1278. recordId: this.recordId,
  1279. rightQuestionNum: number,
  1280. lessQuestionNum: lessQuestionNum,
  1281. status: 1,
  1282. moduleExamId: this.moduleId || 0,
  1283. chapterExamId: this.chapterId || 0,
  1284. doQuestionIds: doQuestionIds.join(","),
  1285. rightQuestionIds: rightQuestionIds.join(","),
  1286. doQuestionNum: doQuestionNum,
  1287. performance: score,
  1288. historyExamJson: JSON.stringify(this.questionList),
  1289. })
  1290. .then((res) => {
  1291. this.isSubmit = true;
  1292. if (res.data.code == 200) {
  1293. uni.showToast({
  1294. title: "交卷成功",
  1295. duration: 2000,
  1296. icon: "none",
  1297. });
  1298. setTimeout(() => {
  1299. uni.redirectTo({
  1300. url:
  1301. "/pages2/bank/question_report?orderGoodsId=" +
  1302. this.orderGoodsId +
  1303. "&id=" +
  1304. this.recordId +
  1305. "&examId=" +
  1306. this.id,
  1307. });
  1308. }, 2000);
  1309. }
  1310. });
  1311. //错题集id提交(客观题)
  1312. this.$api
  1313. .examWrongRecord({
  1314. examId: this.id,
  1315. goodsId: this.goodsId,
  1316. questionIds: doWrongQuestionIds,
  1317. recordId: this.recordId,
  1318. orderGoodsId: this.orderGoodsId,
  1319. })
  1320. .then((res) => {});
  1321. },
  1322. isCheckboxChecked(arr) {
  1323. return arr.some((item) => {
  1324. if (item.checked) {
  1325. return true;
  1326. }
  1327. });
  1328. },
  1329. /**
  1330. * @param {Object} 多选确认
  1331. */
  1332. checkboxSubmit(bindex) {
  1333. if (this.questionList[bindex].ques) return;
  1334. let arr = [];
  1335. this.questionList[bindex].jsonStr.forEach((item) => {
  1336. if (item.checked) {
  1337. arr.push(item.optionsId);
  1338. }
  1339. });
  1340. if (!arr.length) {
  1341. uni.showToast({
  1342. title: "请选择答案",
  1343. icon: "none",
  1344. });
  1345. return;
  1346. }
  1347. this.$set(this.questionList[bindex], "ques", arr);
  1348. this.isDoOver();
  1349. },
  1350. /**
  1351. * @param {Object} 多选确认
  1352. */
  1353. checkboxSubmitChild(bindex, ansIndex) {
  1354. if (this.questionList[bindex].ques[ansIndex]) return;
  1355. let arr = [];
  1356. this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(
  1357. (item) => {
  1358. if (item.checked) {
  1359. arr.push(item.optionsId);
  1360. }
  1361. }
  1362. );
  1363. if (!arr.length) {
  1364. uni.showToast({
  1365. title: "请选择答案",
  1366. icon: "none",
  1367. });
  1368. return;
  1369. }
  1370. this.$set(this.questionList[bindex].ques, ansIndex, arr);
  1371. this.isDoOver();
  1372. },
  1373. judgeSelect(index, bindex) {
  1374. if (this.questionList[bindex].ques) return;
  1375. this.$set(this.questionList[bindex], "ques", index == 0 ? '1' : '0');
  1376. console.log('this.questionList[bindex]', this.questionList[bindex].ques, this.questionList[bindex])
  1377. this.isDoOver();
  1378. },
  1379. judgeSelectChild(ansindex, childindex, bindex) {
  1380. if (this.questionList[bindex].ques[ansindex]) return;
  1381. this.$set(this.questionList[bindex].ques, ansindex, childindex == 0 ? '1' : '0');
  1382. this.isDoOver();
  1383. },
  1384. /**
  1385. * 立即离开并交卷
  1386. */
  1387. leaveNow() {
  1388. this.needBack = false;
  1389. this.isSubmit = true;
  1390. uni.navigateBack({
  1391. delta: 1,
  1392. });
  1393. let score = 0; //计算总分
  1394. let reportStatus = 0;
  1395. let number = 0; //做对的题目数量
  1396. let doQuestionNum = 0; //做过的题目数量
  1397. let allScore = 0; //总分
  1398. let passScore = 0;
  1399. let doWrongQuestionIds = []; //错题和未做题id(客观题)
  1400. let doQuestionIds = []; //做过的题目id
  1401. let rightQuestionIds = []; //做对的题目id
  1402. let lessQuestionNum = 0;
  1403. this.questionList.forEach((item, index) => {
  1404. // passScore = item.passScore
  1405. if (item.type == 1) {
  1406. //正确
  1407. if (item.ques == item.ans) {
  1408. item.scoreResult = item.score;
  1409. score += item.score;
  1410. number++;
  1411. rightQuestionIds.push(item.questionId);
  1412. } else {
  1413. //错误
  1414. item.scoreResult = 0;
  1415. if (item.ques) {
  1416. doWrongQuestionIds.push(item.questionId);
  1417. }
  1418. }
  1419. allScore += item.score;
  1420. if (item.ques) {
  1421. doQuestionNum++;
  1422. doQuestionIds.push(item.questionId);
  1423. }
  1424. } else if (item.type == 2) {
  1425. let isRight =
  1426. item.ans &&
  1427. item.ans.every((quesItem, quesIndex) => {
  1428. if (item.ques) {
  1429. return item.ques[quesIndex] == item.ans[quesIndex];
  1430. } else {
  1431. return false;
  1432. }
  1433. });
  1434. if (isRight) {
  1435. score += item.score;
  1436. number++;
  1437. item.scoreResult = item.score;
  1438. rightQuestionIds.push(item.questionId);
  1439. } else {
  1440. let hasPart = false;
  1441. let checkboxScore = 1; //获取单题总分数
  1442. item.ques &&
  1443. item.ques.forEach((ques, quesIndex) => {
  1444. //选错一个全扣
  1445. if (item.ques) {
  1446. if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
  1447. checkboxScore = 0;
  1448. }
  1449. } else {
  1450. checkboxScore = 0;
  1451. }
  1452. });
  1453. console.log(checkboxScore);
  1454. //没选错
  1455. if (checkboxScore) {
  1456. checkboxScore = 0;
  1457. item.ans.forEach((ans, quesIndex) => {
  1458. //漏选扣一部分,对n题给n X partScore 分
  1459. if (item.ques) {
  1460. if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
  1461. checkboxScore += item.partScore;
  1462. hasPart = true;
  1463. }
  1464. } else {
  1465. checkboxScore = 0;
  1466. }
  1467. });
  1468. }
  1469. if (!hasPart) {
  1470. //0分
  1471. item.scoreResult = 0;
  1472. if (item.ques) {
  1473. doWrongQuestionIds.push(item.questionId);
  1474. }
  1475. } else {
  1476. //部分分
  1477. // number++;
  1478. lessQuestionNum++;
  1479. // doWrongQuestionIds.push(item.questionId)
  1480. item.scoreResult = checkboxScore;
  1481. score += checkboxScore;
  1482. // rightQuestionIds.push(item.questionId)
  1483. }
  1484. }
  1485. allScore += item.score;
  1486. if (item.ques && item.ques.length) {
  1487. doQuestionNum++;
  1488. doQuestionIds.push(item.questionId);
  1489. }
  1490. } else if (item.type == 3) {
  1491. if (item.ques == item.ans) {
  1492. item.scoreResult = item.score;
  1493. score += item.score;
  1494. number++;
  1495. rightQuestionIds.push(item.questionId);
  1496. } else {
  1497. item.scoreResult = 0;
  1498. if (item.ques) {
  1499. doWrongQuestionIds.push(item.questionId);
  1500. }
  1501. }
  1502. allScore += item.score;
  1503. if (item.ques) {
  1504. doQuestionNum++;
  1505. doQuestionIds.push(item.questionId);
  1506. }
  1507. } else if (item.type == 4) {
  1508. if (item.ques && item.ques.length) {
  1509. doQuestionNum++;
  1510. doQuestionIds.push(item.questionId);
  1511. }
  1512. } else if (item.type == 5) {
  1513. if (item.ques && (item.ques.imageList || item.ques.text)) {
  1514. doQuestionNum++;
  1515. doQuestionIds.push(item.questionId);
  1516. }
  1517. }
  1518. });
  1519. //大于60分及格
  1520. if (score >= 60) {
  1521. reportStatus = 1;
  1522. } else {
  1523. reportStatus = 0;
  1524. }
  1525. //交卷
  1526. this.$api
  1527. .examRecordEdit({
  1528. examId: this.id,
  1529. goodsId: this.goodsId,
  1530. orderGoodsId: this.orderGoodsId,
  1531. reportStatus: reportStatus,
  1532. recordId: this.recordId,
  1533. rightQuestionNum: number,
  1534. lessQuestionNum: lessQuestionNum,
  1535. status: 1,
  1536. moduleExamId: this.moduleId || 0,
  1537. chapterExamId: this.chapterId || 0,
  1538. doQuestionIds: doQuestionIds.join(","),
  1539. rightQuestionIds: rightQuestionIds.join(","),
  1540. doQuestionNum: doQuestionNum,
  1541. performance: score,
  1542. totalScore: allScore,
  1543. examTime: parseInt(this.allTimes),
  1544. doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
  1545. historyExamJson: JSON.stringify(this.questionList),
  1546. })
  1547. .then((res) => {
  1548. this.isSubmit = true;
  1549. if (res.data.code == 200) {
  1550. }
  1551. });
  1552. //错题集id提交(客观题)
  1553. this.$api
  1554. .examWrongRecord({
  1555. moduleExamId: this.moduleId || 0,
  1556. chapterExamId: this.chapterId || 0,
  1557. examId: this.id,
  1558. goodsId: this.goodsId,
  1559. orderGoodsId: this.orderGoodsId,
  1560. questionIds: doWrongQuestionIds,
  1561. recordId: this.recordId,
  1562. })
  1563. .then((res) => {});
  1564. },
  1565. openFooterTab() {
  1566. this.show = true;
  1567. },
  1568. hideDialog() {
  1569. this.showDialog = false;
  1570. },
  1571. changeIndex(index) {
  1572. this.current = index;
  1573. },
  1574. swiperChange(e) {
  1575. this.current = e.detail.current;
  1576. },
  1577. deleteImg(imgIndex, bankIndex) {
  1578. this.questionList[bankIndex].ansText.imageList.splice(imgIndex, 1);
  1579. },
  1580. deleteImgChild(imgIndex, bankIndex, ansIndex) {
  1581. this.questionList[bankIndex].jsonStr[ansIndex].ansText.imageList.splice(
  1582. imgIndex,
  1583. 1
  1584. );
  1585. },
  1586. chooseImg(bankindex) {
  1587. uni.chooseImage({
  1588. count: 1, //默认9
  1589. sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都有
  1590. sourceType: ["album", "camera"], //从相册选择
  1591. success: (res) => {
  1592. let self = this;
  1593. // console.log(JSON.stringify(res.tempFilePaths));
  1594. let img = res.tempFilePaths[0];
  1595. uni.getImageInfo({
  1596. src: img,
  1597. success: async (res) => {
  1598. let canvasWidth = res.width; //图片原始长宽
  1599. let canvasHeight = res.height;
  1600. if (canvasWidth > 1000 || canvasHeight > 1000) {
  1601. uni.compressImage({
  1602. src: img,
  1603. quality: 75,
  1604. width: "50%",
  1605. height: "50%",
  1606. success: async (rest) => {
  1607. const dir = await self.uploadFile(rest.tempFilePath, 0);
  1608. this.questionList[bankindex].ansText.imageList.push(dir);
  1609. },
  1610. });
  1611. } else {
  1612. const dir = await self.uploadFile(img, 0);
  1613. this.questionList[bankindex].ansText.imageList.push(dir);
  1614. }
  1615. },
  1616. });
  1617. },
  1618. });
  1619. },
  1620. chooseImgChild(bankindex, ansindex) {
  1621. uni.chooseImage({
  1622. count: 1, //默认9
  1623. sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都有
  1624. sourceType: ["album", "camera"], //从相册选择
  1625. success: (res) => {
  1626. let self = this;
  1627. // console.log(JSON.stringify(res.tempFilePaths));
  1628. let img = res.tempFilePaths[0];
  1629. uni.getImageInfo({
  1630. src: img,
  1631. success: async (res) => {
  1632. let canvasWidth = res.width; //图片原始长宽
  1633. let canvasHeight = res.height;
  1634. if (canvasWidth > 1000 || canvasHeight > 1000) {
  1635. uni.compressImage({
  1636. src: img,
  1637. quality: 75,
  1638. width: "50%",
  1639. height: "50%",
  1640. success: async (rest) => {
  1641. const dir = await self.uploadFile(rest.tempFilePath, 0);
  1642. this.questionList[bankindex].jsonStr[
  1643. ansindex
  1644. ].ansText.imageList.push(dir);
  1645. },
  1646. });
  1647. } else {
  1648. const dir = await self.uploadFile(img, 0);
  1649. this.questionList[bankindex].jsonStr[
  1650. ansindex
  1651. ].ansText.imageList.push(dir);
  1652. }
  1653. },
  1654. });
  1655. },
  1656. });
  1657. },
  1658. uploadFile(options, int) {
  1659. var self = this;
  1660. return new Promise((resolve, reject) => {
  1661. var data = {
  1662. orderGoodsId: this.orderGoodsId,
  1663. imageStatus: int,
  1664. };
  1665. self.$api.aliyunpolicy(data).then((res) => {
  1666. console.log(res.data, 6);
  1667. if (res.data.code != 200) {
  1668. self.$method.showToast("签名错误" + JSON.stringify(res.data));
  1669. return;
  1670. }
  1671. var ossToken = res.data.data.resultContent;
  1672. if (ossToken.host == null || ossToken.host == undefined) {
  1673. self.$method.showToast("上传路径报错" + JSON.stringify(res.data));
  1674. return;
  1675. }
  1676. uni.uploadFile({
  1677. url: ossToken.host,
  1678. name: "file",
  1679. filePath: options,
  1680. fileType: "image",
  1681. header: {
  1682. AuthorizationToken: "WX " + uni.getStorageSync("token"),
  1683. },
  1684. formData: {
  1685. key: ossToken.dir,
  1686. OSSAccessKeyId: ossToken.accessid,
  1687. policy: ossToken.policy,
  1688. Signature: ossToken.signature,
  1689. callback: ossToken.callback,
  1690. success_action_status: 200,
  1691. },
  1692. success: (result) => {
  1693. // if (result.statusCode === 200) {
  1694. resolve(ossToken.dir);
  1695. // } else {
  1696. // uni.showToast({
  1697. // title: "上传失败",
  1698. // icon: "none",
  1699. // });
  1700. // return;
  1701. // }
  1702. },
  1703. fail: (error) => {
  1704. uni.showToast({
  1705. title: "上传接口报错" + error,
  1706. icon: "none",
  1707. });
  1708. return;
  1709. },
  1710. });
  1711. });
  1712. });
  1713. },
  1714. submitAns(bankindex) {
  1715. console.log(this.questionList[bankindex]);
  1716. if (
  1717. !this.questionList[bankindex].ansText.text &&
  1718. !this.questionList[bankindex].ansText.imageList.length
  1719. ) {
  1720. uni.showToast({
  1721. title: "请输入内容或上传图片",
  1722. duration: 2000,
  1723. icon: "none",
  1724. });
  1725. return;
  1726. }
  1727. this.$set(this.questionList[bankindex], "ques", {
  1728. imageList: this.questionList[bankindex].ansText.imageList,
  1729. text: this.questionList[bankindex].ansText.text,
  1730. });
  1731. this.isDoOver();
  1732. },
  1733. submitAnsChild(bankindex, ansindex) {
  1734. if (
  1735. !this.questionList[bankindex].jsonStr[ansindex].ansText.text &&
  1736. !this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.length
  1737. ) {
  1738. uni.showToast({
  1739. title: "请输入内容或上传图片",
  1740. duration: 2000,
  1741. icon: "none",
  1742. });
  1743. return;
  1744. }
  1745. this.$set(this.questionList[bankindex].ques, ansindex, {
  1746. imageList:
  1747. this.questionList[bankindex].jsonStr[ansindex].ansText.imageList,
  1748. text: this.questionList[bankindex].jsonStr[ansindex].ansText.text,
  1749. });
  1750. this.isDoOver();
  1751. },
  1752. isRight(item, index) {
  1753. //单选
  1754. if (this.questionList[index].ques) {
  1755. if (item.type == 1) {
  1756. return this.questionList[index].ques == this.questionList[index].ans;
  1757. //多选
  1758. } else if (item.type == 2) {
  1759. //每一项都相等
  1760. return this.questionList[index].ans.every((item, i) => {
  1761. return item == this.questionList[index].ques[i];
  1762. });
  1763. //判断
  1764. } else if (item.type == 3) {
  1765. return this.questionList[index].ques == this.questionList[index].ans;
  1766. } else {
  1767. return false;
  1768. }
  1769. } else {
  1770. return false;
  1771. }
  1772. },
  1773. right(bankIndex, ansIndex, option) {
  1774. if (
  1775. this.questionList[bankIndex].ques[ansIndex] &&
  1776. this.questionList[bankIndex].ans[ansIndex]
  1777. ) {
  1778. if (
  1779. this.questionList[bankIndex].ques[ansIndex].indexOf(
  1780. option.optionsId
  1781. ) != -1 ||
  1782. this.questionList[bankIndex].ans[ansIndex].indexOf(
  1783. option.optionsId
  1784. ) != -1
  1785. ) {
  1786. return true;
  1787. } else {
  1788. return false;
  1789. }
  1790. } else {
  1791. return false;
  1792. }
  1793. },
  1794. wrong(bankIndex, ansIndex, option) {
  1795. if (
  1796. this.questionList[bankIndex].ques[ansIndex] &&
  1797. this.questionList[bankIndex].ans[ansIndex]
  1798. ) {
  1799. if (
  1800. this.questionList[bankIndex].ques[ansIndex].indexOf(
  1801. option.optionsId
  1802. ) != -1 &&
  1803. this.questionList[bankIndex].ans[ansIndex].indexOf(
  1804. option.optionsId
  1805. ) == -1
  1806. ) {
  1807. return true;
  1808. } else {
  1809. return false;
  1810. }
  1811. } else {
  1812. return false;
  1813. }
  1814. },
  1815. isWrong(item, index) {
  1816. if (this.questionList[index].ques) {
  1817. //单选
  1818. if (item.type == 1) {
  1819. return this.questionList[index].ques != this.questionList[index].ans;
  1820. //多选
  1821. } else if (item.type == 2) {
  1822. //每一项都相等
  1823. return this.questionList[index].ques.some((item, i) => {
  1824. return this.questionList[index].ans.indexOf(item) == -1;
  1825. });
  1826. //判断
  1827. } else if (item.type == 3) {
  1828. return this.questionList[index].ques != this.questionList[index].ans;
  1829. } else {
  1830. return false;
  1831. }
  1832. } else {
  1833. return false;
  1834. }
  1835. },
  1836. isPart(item, index) {
  1837. if (this.questionList[index].ques) {
  1838. if (item.type == 2) {
  1839. let isWrong = this.questionList[index].ques.some((item, i) => {
  1840. return this.questionList[index].ans.indexOf(item) == -1;
  1841. });
  1842. let isRight = this.questionList[index].ans.every((item, i) => {
  1843. return item == this.questionList[index].ques[i];
  1844. });
  1845. if (!isRight && !isWrong) {
  1846. return true;
  1847. }
  1848. }
  1849. } else {
  1850. return false;
  1851. }
  1852. },
  1853. isOver(item, index) {
  1854. if (this.questionList[index].ques) {
  1855. if (item.type == 4) {
  1856. //案例题
  1857. let isOver = item.jsonStr.every((jsonItem, indexs) => {
  1858. if (
  1859. jsonItem.type == 1 ||
  1860. jsonItem.type == 2 ||
  1861. jsonItem.type == 3
  1862. ) {
  1863. if (item.ques[indexs]) {
  1864. return true;
  1865. } else {
  1866. return false;
  1867. }
  1868. } else if (jsonItem.type == 5) {
  1869. if (
  1870. item.ques[indexs] &&
  1871. (item.ques[indexs].text || item.ques[indexs].imageList.length)
  1872. ) {
  1873. console.log("chil");
  1874. return true;
  1875. } else {
  1876. return false;
  1877. }
  1878. }
  1879. });
  1880. if (isOver) {
  1881. return true;
  1882. } else {
  1883. return false;
  1884. }
  1885. } else if (item.type == 5) {
  1886. //简答题
  1887. //每一项都相等
  1888. if (item.ques && (item.ques.imageList.length || item.ques.text)) {
  1889. return true;
  1890. }
  1891. //判断
  1892. } else {
  1893. return false;
  1894. }
  1895. } else {
  1896. return false;
  1897. }
  1898. },
  1899. tabSelect(index, bankindex) {
  1900. this.$set(this.questionList[bankindex], "current", index);
  1901. },
  1902. showPhoto(contentStr) {
  1903. if (contentStr && typeof contentStr == "string") {
  1904. let reg = /<img[^>]*src[=\'\"\s]+([^\'\"]*)[\'\"]?[^>]*>/gi;
  1905. let strArr = contentStr.match(reg);
  1906. strArr.forEach((str, index) => {
  1907. strArr[index] = str.replace(reg, "$1");
  1908. });
  1909. // 预览图片
  1910. uni.previewImage({
  1911. urls: strArr,
  1912. longPressActions: {
  1913. itemList: ["发送给朋友", "保存图片", "收藏"],
  1914. success: function (data) {
  1915. console.log(
  1916. "选中了第" +
  1917. (data.tapIndex + 1) +
  1918. "个按钮,第" +
  1919. (data.index + 1) +
  1920. "张图片"
  1921. );
  1922. },
  1923. fail: function (err) {
  1924. console.log(err.errMsg);
  1925. },
  1926. },
  1927. });
  1928. }
  1929. },
  1930. },
  1931. };
  1932. </script>
  1933. <style lang="scss" scoped>
  1934. .questionBank {
  1935. width: 100%;
  1936. height: 100vh;
  1937. display: flex;
  1938. flex-direction: column;
  1939. }
  1940. .swiper {
  1941. width: 100%;
  1942. flex: 1;
  1943. }
  1944. .lisSty {
  1945. margin-bottom: 16rpx;
  1946. display: flex;
  1947. align-items: center;
  1948. .flex_auto {
  1949. flex: 1;
  1950. }
  1951. }
  1952. .activeTI {
  1953. vertical-align: middle;
  1954. display: inline-block;
  1955. border: 1rpx solid #eee;
  1956. border-radius: 50rpx;
  1957. height: 48rpx;
  1958. line-height: 46rpx;
  1959. text-align: center;
  1960. width: 48rpx;
  1961. margin-right: 15rpx;
  1962. color: #666;
  1963. font-size: 30rpx;
  1964. &.right {
  1965. color: #fff;
  1966. background: #36c75a;
  1967. }
  1968. &.wrong {
  1969. color: #fff;
  1970. background: #ff3b30;
  1971. }
  1972. &.checked {
  1973. color: #fff;
  1974. background: #007aff;
  1975. }
  1976. }
  1977. .submit_checkbox {
  1978. position: fixed;
  1979. left: 0;
  1980. right: 0;
  1981. bottom: 120rpx;
  1982. margin: 20rpx auto;
  1983. left: 0;
  1984. right: 0;
  1985. bottom: 120rpx;
  1986. margin: 20rpx auto;
  1987. width: 526rpx;
  1988. height: 80rpx;
  1989. background: rgba(0, 122, 255, 1);
  1990. color: #fff;
  1991. text-align: center;
  1992. line-height: 80rpx;
  1993. font-size: 30rpx;
  1994. border-radius: 40rpx;
  1995. &.disabled {
  1996. opacity: 0.6;
  1997. }
  1998. }
  1999. .titles {
  2000. overflow: hidden;
  2001. margin-bottom: 24rpx;
  2002. }
  2003. .titBox {
  2004. padding: 41rpx 25rpx 24rpx 25rpx;
  2005. }
  2006. .titBox_title {
  2007. padding: 21rpx;
  2008. }
  2009. .tabs {
  2010. margin: 10rpx;
  2011. display: flex;
  2012. .tab {
  2013. margin: 0 4rpx;
  2014. padding: 10rpx 13rpx;
  2015. text-align: center;
  2016. color: #007aff;
  2017. font-size: 28rpx;
  2018. border-radius: 16rpx;
  2019. background: #fff;
  2020. &.current {
  2021. color: #fff;
  2022. background: #007aff;
  2023. }
  2024. }
  2025. }
  2026. .ans {
  2027. margin: 8rpx 8rpx 8rpx;
  2028. .ans_input {
  2029. border-radius: 16rpx;
  2030. background: #fff;
  2031. .top {
  2032. border-bottom: 1rpx solid #eeeeee;
  2033. padding: 16rpx;
  2034. display: flex;
  2035. align-items: center;
  2036. .icon {
  2037. margin-right: 20rpx;
  2038. width: 40rpx;
  2039. height: 38rpx;
  2040. }
  2041. .progress {
  2042. flex: 1;
  2043. }
  2044. .submit {
  2045. width: 168rpx;
  2046. height: 48rpx;
  2047. line-height: 48rpx;
  2048. text-align: center;
  2049. color: #fff;
  2050. font-size: 30rpx;
  2051. background: #007aff;
  2052. border-radius: 24rpx;
  2053. &.disabled {
  2054. opacity: 0.6;
  2055. }
  2056. }
  2057. }
  2058. .textarea {
  2059. textarea {
  2060. width: 100%;
  2061. height: 287rpx;
  2062. padding: 10rpx;
  2063. }
  2064. }
  2065. .imgs {
  2066. overflow: hidden;
  2067. display: flex;
  2068. width: 100%;
  2069. .img {
  2070. width: 104rpx;
  2071. height: 104rpx;
  2072. border-radius: 8rpx;
  2073. position: relative;
  2074. margin: 20rpx;
  2075. text {
  2076. position: absolute;
  2077. right: -15rpx;
  2078. top: -15rpx;
  2079. width: 30rpx;
  2080. height: 30rpx;
  2081. text-align: center;
  2082. line-height: 30rpx;
  2083. color: #fff;
  2084. background: #ff3b30;
  2085. border-radius: 50%;
  2086. }
  2087. image {
  2088. width: 100%;
  2089. height: 100%;
  2090. }
  2091. }
  2092. }
  2093. }
  2094. .ans_submit {
  2095. padding: 16rpx;
  2096. border-radius: 16rpx;
  2097. background: #fff;
  2098. .imgs {
  2099. overflow: hidden;
  2100. display: flex;
  2101. width: 100%;
  2102. .img {
  2103. width: 104rpx;
  2104. height: 104rpx;
  2105. border-radius: 8rpx;
  2106. position: relative;
  2107. margin: 20rpx;
  2108. image {
  2109. width: 100%;
  2110. height: 100%;
  2111. }
  2112. }
  2113. }
  2114. }
  2115. }
  2116. .leftLetters {
  2117. display: flex;
  2118. align-items: center;
  2119. width: 220rpx;
  2120. .btnType {
  2121. padding: 5rpx 10rpx;
  2122. border: 1rpx solid #007aff;
  2123. border-radius: 10rpx;
  2124. background-color: rgba(0, 122, 255, 0.1);
  2125. font-size: 28rpx;
  2126. color: #007aff;
  2127. margin-right: 15rpx;
  2128. }
  2129. }
  2130. .firstLetter {
  2131. display: flex;
  2132. justify-content: space-between;
  2133. align-items: center;
  2134. margin-bottom: 30rpx;
  2135. }
  2136. .popupView {
  2137. height: 100%;
  2138. padding-bottom: 100rpx;
  2139. .popupTops {
  2140. height: 77rpx;
  2141. border-bottom: 1rpx solid #eee;
  2142. text-align: center;
  2143. line-height: 77rpx;
  2144. font-size: 24rpx;
  2145. color: #999;
  2146. position: relative;
  2147. .topIcon {
  2148. position: absolute;
  2149. top: 10rpx;
  2150. left: 50%;
  2151. transform: translateX(-50%);
  2152. width: 80rpx;
  2153. height: 8rpx;
  2154. background-color: #999;
  2155. border-radius: 4rpx;
  2156. }
  2157. }
  2158. .popupContent {
  2159. }
  2160. }
  2161. .pageContent {
  2162. position: relative;
  2163. background-color: #eaeef1;
  2164. height: 100%;
  2165. overflow-y: scroll;
  2166. padding-top: 8rpx;
  2167. padding-bottom: 100rpx;
  2168. }
  2169. .pad_8 {
  2170. background-color: #fff;
  2171. margin: 0rpx 8rpx 8rpx;
  2172. border-radius: 16rpx;
  2173. &.no-margin {
  2174. margin-top: -16rpx;
  2175. border-radius: 0 0 16rpx 16rpx;
  2176. }
  2177. }
  2178. .answer {
  2179. height: 80rpx;
  2180. line-height: 80rpx;
  2181. padding: 0rpx 24rpx;
  2182. display: flex;
  2183. align-items: center;
  2184. justify-content: space-between;
  2185. color: #666;
  2186. font-size: 30rpx;
  2187. }
  2188. .footer_btn {
  2189. background-color: #fff;
  2190. z-index: 10078;
  2191. position: fixed;
  2192. bottom: 0rpx;
  2193. display: flex;
  2194. align-items: center;
  2195. justify-content: space-between;
  2196. width: 100%;
  2197. height: 98rpx;
  2198. padding: 0rpx 38rpx;
  2199. border-top: 1rpx solid #eee;
  2200. .flex_center {
  2201. flex: 1;
  2202. display: flex;
  2203. justify-content: center;
  2204. align-items: center;
  2205. flex-direction: column;
  2206. margin: 0 200rpx;
  2207. font-size: 24rpx;
  2208. color: #999999;
  2209. .up-icon {
  2210. margin-bottom: 18rpx;
  2211. width: 100%;
  2212. display: flex;
  2213. justify-content: center;
  2214. image {
  2215. width: 58rpx;
  2216. height: 21rpx;
  2217. }
  2218. }
  2219. }
  2220. .collect {
  2221. visibility: hidden;
  2222. width: 100rpx;
  2223. &.show {
  2224. visibility: visible;
  2225. }
  2226. > view {
  2227. display: flex;
  2228. flex-direction: column;
  2229. align-items: center;
  2230. justify-content: center;
  2231. image {
  2232. width: 32rpx;
  2233. height: 32rpx;
  2234. margin-bottom: 6rpx;
  2235. }
  2236. view {
  2237. font-size: 24rpx;
  2238. color: #999999;
  2239. }
  2240. }
  2241. }
  2242. }
  2243. .boxSty {
  2244. padding: 44rpx 41rpx 0rpx;
  2245. }
  2246. .liListSty {
  2247. border: 1rpx solid #eeeeee;
  2248. width: 88rpx;
  2249. height: 88rpx;
  2250. border-radius: 32rpx;
  2251. text-align: center;
  2252. line-height: 88rpx;
  2253. color: #333;
  2254. font-size: 32rpx;
  2255. float: left;
  2256. margin: 20rpx 23rpx;
  2257. &.isRight {
  2258. border: 1rpx solid #eeeeee;
  2259. color: #fff;
  2260. background: #36c75a;
  2261. }
  2262. &.isPart {
  2263. border: 1rpx solid #eeeeee;
  2264. color: #fff;
  2265. background: #ffc53d;
  2266. }
  2267. &.isWrong {
  2268. border: 1rpx solid #eeeeee;
  2269. color: #fff;
  2270. background: #ff3b30;
  2271. }
  2272. &.isOver {
  2273. border: 1rpx solid #eeeeee;
  2274. color: #fff;
  2275. background: blue;
  2276. }
  2277. }
  2278. .answerInfos {
  2279. padding: 25rpx 25rpx 25rpx 23rpx;
  2280. }
  2281. .answerTitle {
  2282. margin-bottom: 28rpx;
  2283. color: #666;
  2284. font-size: 30rpx;
  2285. }
  2286. .answerContent {
  2287. font-size: 30rpx;
  2288. color: #666;
  2289. }
  2290. .textChild {
  2291. display: inline-block;
  2292. vertical-align: middle;
  2293. }
  2294. .dialog {
  2295. position: fixed;
  2296. left: 0;
  2297. top: 0;
  2298. width: 100%;
  2299. height: 100%;
  2300. background-color: rgba(0, 0, 0, 0.8);
  2301. display: flex;
  2302. flex-direction: column;
  2303. align-items: center;
  2304. justify-content: center;
  2305. z-index: 20000;
  2306. .pointer {
  2307. width: 338rpx;
  2308. height: 240rpx;
  2309. }
  2310. .text {
  2311. font-size: 32rpx;
  2312. color: #ffffff;
  2313. text-align: center;
  2314. }
  2315. .btn {
  2316. width: 242rpx;
  2317. height: 82rpx;
  2318. border: 2rpx solid #ffffff;
  2319. border-radius: 16rpx;
  2320. text-align: center;
  2321. line-height: 82rpx;
  2322. margin: 41rpx auto;
  2323. color: #fff;
  2324. font-size: 32rpx;
  2325. }
  2326. }
  2327. .popboxs {
  2328. width: 100%;
  2329. height: 100%;
  2330. display: flex;
  2331. flex-direction: column;
  2332. align-items: center;
  2333. }
  2334. .classTops {
  2335. flex-shrink: 0;
  2336. padding: 39rpx 0rpx 4rpx;
  2337. font-weight: bold;
  2338. color: #333;
  2339. font-size: 30rpx;
  2340. }
  2341. .textStys {
  2342. width: 100%;
  2343. flex: 1;
  2344. padding: 36rpx;
  2345. }
  2346. .classFootsty {
  2347. flex-shrink: 0;
  2348. display: flex;
  2349. align-items: center;
  2350. justify-content: center;
  2351. padding: 10rpx 0rpx 40rpx;
  2352. .btnsty {
  2353. width: 200rpx;
  2354. height: 80rpx;
  2355. border-radius: 40rpx;
  2356. font-weight: bold;
  2357. font-size: 30rpx;
  2358. text-align: center;
  2359. line-height: 80rpx;
  2360. }
  2361. .btns1 {
  2362. background-color: #f5f5f5;
  2363. color: #007aff;
  2364. }
  2365. .btns2 {
  2366. margin-left: 40rpx;
  2367. background-color: #007aff;
  2368. color: #ffffff;
  2369. }
  2370. }
  2371. </style>