questionBankContinue.vue 73 KB

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