TaskUploadData_lhy.vue 91 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483
  1. <template>
  2. <a-spin :spinning="uploading" size="large" tip="正在提交资料,请勿关闭当前网页...">
  3. <div>
  4. <a-page-header
  5. style="background-color: #FFFFFF;"
  6. title="特审复开资料填写"
  7. @back="goBack"
  8. ></a-page-header>
  9. <a-card :bordered="false" :title="'客户信息填写'" style="margin-top: 10px;">
  10. <a-form-model
  11. ref="form"
  12. :label-col="labelCol"
  13. :wrapper-col="wrapperCol"
  14. :model="model"
  15. :rules="rules"
  16. >
  17. <!-- 业务基本情况内容 -->
  18. <a-card :bordered="true">
  19. <div slot="title">
  20. 业务基本情况
  21. <span v-show="specialResult.basicInfoState == '1'">✅</span>
  22. <span v-show="specialResult.basicInfoState == '0'">❌</span>
  23. </div>
  24. <a-row>
  25. <a-col :span="24">
  26. <a-form-model-item label="用户选择" prop="userOpenState" v-bind="labelCol1">
  27. <a-radio-group v-model="model.userLable" button-style="solid" @change="changeUserLable()">
  28. <a-radio-button value="0">个人户</a-radio-button>
  29. <a-radio-button value="1">单位户</a-radio-button>
  30. </a-radio-group>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :span="24" v-if="!batchImproves">
  34. <a-form-model-item label="申请复开号码" prop="openingNumber" v-bind="labelCol1">
  35. <a-input :disabled="true" v-model="model.openingNumber" placeholder="申请复开号码"></a-input>
  36. </a-form-model-item>
  37. </a-col>
  38. <a-col :span="24" v-if="!batchImproves">
  39. <a-form-model-item label="客户名称(使用人)" prop="customerName" v-bind="labelCol1">
  40. <a-input :disabled="true" v-model="model.customerName" placeholder="客户名称/使用人名称"></a-input>
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col :span="24" v-if="model.userLable == '1' || !batchImproves" >
  44. <a-form-model-item label="单位名称" prop="customerName" v-bind="labelCol1">
  45. <a-input v-model="model.unitName" placeholder="单位名称"></a-input>
  46. </a-form-model-item>
  47. </a-col>
  48. <a-col :span="24" v-if="!batchImproves">
  49. <a-form-model-item label="关停时间" prop="shutdownTime" v-bind="labelCol1">
  50. <a-date-picker :disabled="true" :style="{width:'100%'}" v-model="model.shutdownTime"
  51. format="YYYY-MM-DD HH:mm:ss"
  52. showTime valueFormat="YYYY-MM-DD HH:mm:ss"/>
  53. </a-form-model-item>
  54. </a-col>
  55. <a-col :span="24" v-if="!batchImproves">
  56. <a-form-model-item label="申请复开原因" prop="reasonReopening" v-bind="labelCol1">
  57. <a-input v-model="model.reasonReopening" placeholder="申请复开原因"></a-input>
  58. </a-form-model-item>
  59. </a-col>
  60. <a-col :span="24" v-if="specialResult.basicInfoState != '1'">
  61. <a-form-model-item label="材料标签选择" prop="userOpenState" v-bind="labelCol1">
  62. <a-radio-group v-model="model.materialLabel" button-style="solid">
  63. <a-radio-button value="0">材料不全(有特审)</a-radio-button>
  64. <a-radio-button value="1">材料齐全(无特审)</a-radio-button>
  65. </a-radio-group>
  66. </a-form-model-item>
  67. </a-col>
  68. <a-col :span="24" v-if="specialResult.basicInfoState != '1'">
  69. <a-form-model-item label="关停标签选择" prop="userOpenState" v-bind="labelCol1">
  70. <a-radio-group v-model="model.shutdownLabel" button-style="solid" >
  71. <a-radio-button value="0">安防停机(高危漫游地)</a-radio-button>
  72. <a-radio-button value="1">安防关停(紫名单)</a-radio-button>
  73. <a-radio-button value="2">安防停机(专班研判)</a-radio-button>
  74. <a-radio-button value="3">安防停机(可复开)</a-radio-button>
  75. <a-radio-button value="4">沉默移动卡保护性单停</a-radio-button>
  76. <a-radio-button value="5">集团一点停复机(单停)</a-radio-button>
  77. <a-radio-button value="6">大数据保护停机单停</a-radio-button>
  78. <a-radio-button value="7">工信部断卡单停</a-radio-button>
  79. <a-radio-button value="8">实人核验未通过关停(单停)</a-radio-button>
  80. </a-radio-group>
  81. </a-form-model-item>
  82. </a-col>
  83. <a-col :span="24" v-if="specialResult.basicInfoState == '1'">
  84. <a-form-model-item label="材料标签选择" prop="userOpenState" v-bind="labelCol1">
  85. <a-radio-group v-model="model.materialLabel" button-style="solid">
  86. <a-radio-button v-if="model.materialLabel == '0'" value="0">材料不全(有特审)</a-radio-button>
  87. <a-radio-button v-if="model.materialLabel == '1'" value="1">材料齐全(无特审)</a-radio-button>
  88. </a-radio-group>
  89. </a-form-model-item>
  90. </a-col>
  91. <a-col :span="24" v-if="specialResult.basicInfoState == '1'">
  92. <a-form-model-item label="关停标签选择" prop="userOpenState" v-bind="labelCol1">
  93. <a-radio-group v-model="model.shutdownLabel" button-style="solid">
  94. <a-radio-button v-if="model.shutdownLabel == '0'" value="0">安防停机(高危漫游地)</a-radio-button>
  95. <a-radio-button v-if="model.shutdownLabel == '1'" value="1">安防关停(紫名单)</a-radio-button>
  96. <a-radio-button v-if="model.shutdownLabel == '2'" value="2">安防停机(专班研判)</a-radio-button>
  97. <a-radio-button v-if="model.shutdownLabel == '3'" value="3">安防停机(可复开)</a-radio-button>
  98. <a-radio-button v-if="model.shutdownLabel == '4'" value="4">沉默移动卡保护性单停</a-radio-button>
  99. <a-radio-button v-if="model.shutdownLabel == '5'" value="5">集团一点停复机(单停)</a-radio-button>
  100. <a-radio-button v-if="model.shutdownLabel == '6'" value="6">大数据保护停机单停</a-radio-button>
  101. <a-radio-button v-if="model.shutdownLabel == '7'" value="7">工信部断卡单停</a-radio-button>
  102. <a-radio-button v-if="model.shutdownLabel == '8'" value="8">实人核验未通过关停(单停)</a-radio-button>
  103. </a-radio-group>
  104. </a-form-model-item>
  105. </a-col>
  106. </a-row>
  107. </a-card>
  108. <!-- 系统实名制截图-->
  109. <a-card :bordered="true">
  110. <div slot="title">
  111. 系统实名制截图
  112. <span v-show="specialResult.nameFindComplianceState == '1'">✅</span>
  113. <span v-show="specialResult.nameFindComplianceState == '0'">❌</span>
  114. </div>
  115. <div class="clearfix">
  116. <div style="width: 50%;left: 25%;position: relative">
  117. <!-- swiper1 -->
  118. <swiper
  119. class="swiper gallery-top"
  120. :options="swiperOptionTop"
  121. ref="swiperTop"
  122. >
  123. <swiper-slide class="slide-1" v-for="(item, index) in nameFindCompliance" :key="item.id">
  124. <iframe
  125. v-if="item.urlBase"
  126. frameborder="1"
  127. :src="item.urlBase"
  128. ref="ifr"
  129. width="80%"
  130. height="400px"
  131. scrolling="auto">
  132. </iframe>
  133. <img style="width: 80%;height: 400px;border: 1px solid;"
  134. v-if="!item.urlBase" :src="noDataPng" border="1">
  135. <a-button v-if="item.urlBase && specialResult.nameFindComplianceState != '1'"
  136. style="display: block;margin-top: 10px;border-color: red;color: red"
  137. danger @click="removeFile(item,'nameFindCompliance')">移除
  138. </a-button>
  139. </swiper-slide>
  140. </swiper>
  141. <!-- swiper2 Thumbs -->
  142. <swiper
  143. class="swiper gallery-thumbs"
  144. :options="swiperOptionThumbs"
  145. ref="swiperThumbs"
  146. >
  147. <swiper-slide
  148. class="slide"
  149. style="width:100px;height:100px;"
  150. v-for="(item, index) in nameFindCompliance"
  151. :key="item.id"
  152. >
  153. <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  154. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
  155. </div>
  156. <img style="width: 100%;height: 96px"
  157. v-if="!item.urlBase" :src="noDataPng" border="1">
  158. </swiper-slide>
  159. <!-- 点我上传文件按钮-->
  160. <div class="clearfix">
  161. <a-upload
  162. v-if="specialResult.nameFindComplianceState != '1'"
  163. listType="picture-card"
  164. name="file"
  165. :multiple="false"
  166. :action="importMinioUploadAction"
  167. :customRequest="e => selfUploadContract(e, 'nameFindCompliance')"
  168. :headers="tokenHeader"
  169. :showUploadList="false"
  170. :beforeUpload="importBeforeUpload"
  171. @change="importHandleChange"
  172. >
  173. <div v-if="nameFindCompliance.length < 10">
  174. <a-icon type="plus"/>
  175. <div class="ant-upload-text">点我上传文件</div>
  176. </div>
  177. </a-upload>
  178. </div>
  179. <div class="swiper-button-next swiper-button-white" slot="button-next">
  180. <div>
  181. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  182. </div>
  183. </div>
  184. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  185. <div>
  186. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  187. </div>
  188. </div>
  189. </swiper>
  190. </div>
  191. <a-form-model-item style="left: 20%;width: 80%" label="实名制截图备注:" v-bind="labelCol1Plus">
  192. <a-textarea :disabled="specialResult.nameFindComplianceState == 1 ? true : false" style="height: 50px"
  193. v-model="nameFindComplianceRemark"
  194. placeholder="如没有系统实名制截图,需要说明原因"
  195. />
  196. <!-- :auto-size="{ minRows: 3, maxRows: 5 }"-->
  197. </a-form-model-item>
  198. <!-- 备注-->
  199. <li style="color: red"
  200. v-if="specialResult.nameFindComplianceState == 0 && specialResult.nameFindComplianceNote != null">
  201. 稽核结果备注:{{ specialResult.nameFindComplianceNote }}
  202. </li>
  203. </div>
  204. </a-card>
  205. <!-- 材料齐不全有特审核-->
  206. <a-card v-if="model.materialLabel == '0'" :bordered="true">
  207. <div slot="title">
  208. 特审单
  209. <span v-show="specialResult.specialReviewFormState == '1'">✅</span>
  210. <span v-show="specialResult.specialReviewFormState == '0'">❌</span>
  211. </div>
  212. <div class="clearfix">
  213. <div class="clearfix">
  214. <div style="width: 50%;left: 25%;position: relative">
  215. <!-- swiper1 -->
  216. <swiper
  217. class="swiper gallery-top"
  218. :options="swiperOptionTop"
  219. ref="swiperTop"
  220. >
  221. <swiper-slide class="slide-1" v-for="(item, index) in specialReviewForm" :key="item.id">
  222. <iframe
  223. v-if="item.urlBase"
  224. frameborder="1"
  225. :src="item.urlBase"
  226. ref="ifr"
  227. width="80%"
  228. height="400px"
  229. scrolling="auto">
  230. </iframe>
  231. <img style="width: 80%;height: 400px;border: 1px solid;"
  232. v-if="!item.urlBase" :src="noDataPng" border="1">
  233. <a-button v-if="item.urlBase && specialResult.specialReviewFormState != '1'"
  234. style="display: block;margin-top: 10px;border-color: red;color: red"
  235. danger @click="removeFile(item,'specialReviewForm')">移除
  236. </a-button>
  237. </swiper-slide>
  238. </swiper>
  239. <!-- swiper2 Thumbs -->
  240. <swiper
  241. class="swiper gallery-thumbs"
  242. :options="swiperOptionThumbs"
  243. ref="swiperThumbs"
  244. >
  245. <swiper-slide
  246. class="slide"
  247. style="width:100px;height:100px;"
  248. v-for="(item, index) in specialReviewForm"
  249. :key="item.id"
  250. >
  251. <div v-if="item.urlBase"
  252. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  253. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  254. item.fileName
  255. }}</span>
  256. </div>
  257. <img style="width: 100%;height: 96px"
  258. v-if="!item.urlBase" :src="noDataPng" border="1">
  259. </swiper-slide>
  260. <!-- 点我上传文件按钮-->
  261. <div class="clearfix">
  262. <a-upload
  263. v-if="specialResult.specialReviewFormState != '1'"
  264. listType="picture-card"
  265. name="file"
  266. :multiple="false"
  267. :action="importMinioUploadAction"
  268. :customRequest="e => selfUploadContract(e, 'specialReviewForm')"
  269. :headers="tokenHeader"
  270. :showUploadList="false"
  271. :beforeUpload="importBeforeUpload"
  272. @change="importHandleChange"
  273. >
  274. <div v-if="nameFindCompliance.length < 10">
  275. <a-icon type="plus"/>
  276. <div class="ant-upload-text">点我上传文件</div>
  277. </div>
  278. </a-upload>
  279. </div>
  280. <div class="swiper-button-next swiper-button-white" slot="button-next">
  281. <div>
  282. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  283. </div>
  284. </div>
  285. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  286. <div>
  287. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  288. </div>
  289. </div>
  290. </swiper>
  291. </div>
  292. </div>
  293. <!-- 备注-->
  294. <li style="color: red"
  295. v-if="specialResult.specialReviewFormState == 0 && specialResult.specialReviewFormNote != null">
  296. 稽核结果备注:{{ specialResult.specialReviewFormNote }}
  297. </li>
  298. </div>
  299. </a-card>
  300. <!-- 附件资料 -->
  301. <a-card :bordered="true">
  302. <div slot="title">
  303. 身份证照片/正反面
  304. <span v-show="specialResult.idCardState == '1'">✅</span>
  305. <span v-show="specialResult.idCardState == '0'">❌</span>
  306. </div>
  307. <div class="clearfix">
  308. <div style="width: 50%;left: 25%;position: relative">
  309. <!-- swiper1 -->
  310. <swiper
  311. class="swiper gallery-top"
  312. :options="swiperOptionTop"
  313. ref="swiperTop"
  314. >
  315. <swiper-slide class="slide-1" v-for="(item, index) in fileListIdCard" :key="item.id">
  316. <iframe
  317. v-if="item.urlBase"
  318. frameborder="1"
  319. :src="item.urlBase"
  320. ref="ifr"
  321. width="80%"
  322. height="400px"
  323. scrolling="auto">
  324. </iframe>
  325. <img style="width: 80%;height: 400px;border: 1px solid;"
  326. v-if="!item.urlBase" :src="noDataPng" border="1">
  327. <a-button v-if="item.urlBase && specialResult.idCardState != '1'"
  328. style="display: block;margin-top: 10px;border-color: red;color: red"
  329. danger @click="removeFile(item,'fileListIdCard')">移除
  330. </a-button>
  331. </swiper-slide>
  332. </swiper>
  333. <!-- swiper2 Thumbs -->
  334. <swiper
  335. class="swiper gallery-thumbs"
  336. :options="swiperOptionThumbs"
  337. ref="swiperThumbs"
  338. >
  339. <swiper-slide
  340. class="slide"
  341. style="width:100px;height:100px;"
  342. v-for="(item, index) in fileListIdCard"
  343. :key="item.id"
  344. >
  345. <div v-if="item.urlBase"
  346. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  347. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  348. item.fileName
  349. }}</span>
  350. </div>
  351. <img style="width: 100%;height: 96px"
  352. v-if="!item.urlBase" :src="noDataPng" border="1">
  353. </swiper-slide>
  354. <!-- 点我上传文件按钮-->
  355. <div class="clearfix">
  356. <a-upload
  357. v-if="specialResult.idCardState != '1'"
  358. listType="picture-card"
  359. name="file"
  360. :multiple="false"
  361. :action="importMinioUploadAction"
  362. :customRequest="e => selfUploadContract(e, 'fileListIdCard')"
  363. :headers="tokenHeader"
  364. :showUploadList="false"
  365. :beforeUpload="importBeforeUpload"
  366. @change="importHandleChange"
  367. >
  368. <div v-if="fileListIdCard.length < 10">
  369. <a-icon type="plus"/>
  370. <div class="ant-upload-text">点我上传文件</div>
  371. </div>
  372. </a-upload>
  373. </div>
  374. <div class="swiper-button-next swiper-button-white" slot="button-next">
  375. <div>
  376. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  377. </div>
  378. </div>
  379. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  380. <div>
  381. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  382. </div>
  383. </div>
  384. </swiper>
  385. </div>
  386. <!-- 备注-->
  387. <li style="color: red" v-if="specialResult.idCardState == 0 && specialResult.idCardNote != null">
  388. 稽核结果备注:{{ specialResult.idCardNote }}
  389. </li>
  390. </div>
  391. </a-card>
  392. <!-- 手持证件半身照片-->
  393. <a-card :bordered="true">
  394. <div slot="title">
  395. 手持证件半身照片
  396. <span v-show="specialResult.handCertificateState == '1'">✅</span>
  397. <span v-show="specialResult.handCertificateState == '0'">❌</span>
  398. </div>
  399. <div class="clearfix">
  400. <div style="width: 50%;left: 25%;position: relative">
  401. <!-- swiper1 -->
  402. <swiper
  403. class="swiper gallery-top"
  404. :options="swiperOptionTop"
  405. ref="swiperTop"
  406. >
  407. <swiper-slide class="slide-1" v-for="(item, index) in fileListHandCertificate" :key="item.id">
  408. <iframe
  409. v-if="item.urlBase"
  410. frameborder="1"
  411. :src="item.urlBase"
  412. ref="ifr"
  413. width="80%"
  414. height="400px"
  415. scrolling="auto">
  416. </iframe>
  417. <img style="width: 80%;height: 400px;border: 1px solid;"
  418. v-if="!item.urlBase" :src="noDataPng" border="1">
  419. <a-button v-if="item.urlBase && specialResult.handCertificateState != '1'"
  420. style="display: block;margin-top: 10px;border-color: red;color: red"
  421. danger @click="removeFile(item,'fileListHandCertificate')">移除
  422. </a-button>
  423. </swiper-slide>
  424. </swiper>
  425. <!-- swiper2 Thumbs -->
  426. <swiper
  427. class="swiper gallery-thumbs"
  428. :options="swiperOptionThumbs"
  429. ref="swiperThumbs"
  430. >
  431. <swiper-slide
  432. class="slide"
  433. style="width:100px;height:100px;"
  434. v-for="(item, index) in fileListHandCertificate"
  435. :key="item.id"
  436. >
  437. <div v-if="item.urlBase"
  438. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  439. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  440. item.fileName
  441. }}</span>
  442. </div>
  443. <img style="width: 100%;height: 96px"
  444. v-if="!item.urlBase" :src="noDataPng" border="1">
  445. </swiper-slide>
  446. <!-- 点我上传文件按钮-->
  447. <div class="clearfix">
  448. <a-upload
  449. v-if="specialResult.handCertificateState != '1'"
  450. listType="picture-card"
  451. name="file"
  452. :multiple="false"
  453. :action="importMinioUploadAction"
  454. :customRequest="e => selfUploadContract(e, 'fileListHandCertificate')"
  455. :headers="tokenHeader"
  456. :showUploadList="false"
  457. :beforeUpload="importBeforeUpload"
  458. @change="importHandleChange"
  459. >
  460. <div v-if="fileListHandCertificate.length < 10">
  461. <a-icon type="plus"/>
  462. <div class="ant-upload-text">点我上传文件</div>
  463. </div>
  464. </a-upload>
  465. </div>
  466. <div class="swiper-button-next swiper-button-white" slot="button-next">
  467. <div>
  468. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  469. </div>
  470. </div>
  471. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  472. <div>
  473. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  474. </div>
  475. </div>
  476. </swiper>
  477. </div>
  478. <!-- 备注-->
  479. <li style="color: red"
  480. v-if="specialResult.handCertificateState == 0 && specialResult.handCertificateNote != null">
  481. 稽核结果备注:{{ specialResult.handCertificateNote }}
  482. </li>
  483. </div>
  484. </a-card>
  485. <!-- 号卡照片-->
  486. <a-card v-if="model.userLable == '0'" :bordered="true">
  487. <div slot="title">
  488. 号卡照片
  489. <span v-show="specialResult.numberCardState == '1'">✅</span>
  490. <span v-show="specialResult.numberCardState == '0'">❌</span>
  491. </div>
  492. <div class="clearfix">
  493. <div style="width: 50%;left: 25%;position: relative">
  494. <!-- swiper1 -->
  495. <swiper
  496. class="swiper gallery-top"
  497. :options="swiperOptionTop"
  498. ref="swiperTop"
  499. >
  500. <swiper-slide class="slide-1" v-for="(item, index) in fileListNumberCard" :key="item.id">
  501. <iframe
  502. v-if="item.urlBase"
  503. frameborder="1"
  504. :src="item.urlBase"
  505. ref="ifr"
  506. width="80%"
  507. height="400px"
  508. scrolling="auto">
  509. </iframe>
  510. <img style="width: 80%;height: 400px;border: 1px solid;"
  511. v-if="!item.urlBase" :src="noDataPng" border="1">
  512. <a-button v-if="item.urlBase && specialResult.numberCardState != '1'"
  513. style="display: block;margin-top: 10px;border-color: red;color: red"
  514. danger @click="removeFile(item,'fileListNumberCard')">移除
  515. </a-button>
  516. </swiper-slide>
  517. </swiper>
  518. <!-- swiper2 Thumbs -->
  519. <swiper
  520. class="swiper gallery-thumbs"
  521. :options="swiperOptionThumbs"
  522. ref="swiperThumbs"
  523. >
  524. <swiper-slide
  525. class="slide"
  526. style="width:100px;height:100px;"
  527. v-for="(item, index) in fileListNumberCard"
  528. :key="item.id"
  529. >
  530. <div v-if="item.urlBase"
  531. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  532. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  533. item.fileName
  534. }}</span>
  535. </div>
  536. <img style="width: 100%;height: 96px"
  537. v-if="!item.urlBase" :src="noDataPng" border="1">
  538. </swiper-slide>
  539. <!-- 点我上传文件按钮-->
  540. <div class="clearfix">
  541. <a-upload
  542. v-if="specialResult.numberCardState != '1'"
  543. listType="picture-card"
  544. name="file"
  545. :multiple="false"
  546. :action="importMinioUploadAction"
  547. :customRequest="e => selfUploadContract(e, 'fileListNumberCard')"
  548. :headers="tokenHeader"
  549. :showUploadList="false"
  550. :beforeUpload="importBeforeUpload"
  551. @change="importHandleChange"
  552. >
  553. <div v-if="fileListNumberCard.length < 10">
  554. <a-icon type="plus"/>
  555. <div class="ant-upload-text">点我上传文件</div>
  556. </div>
  557. </a-upload>
  558. </div>
  559. <div class="swiper-button-next swiper-button-white" slot="button-next">
  560. <div>
  561. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  562. </div>
  563. </div>
  564. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  565. <div>
  566. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  567. </div>
  568. </div>
  569. </swiper>
  570. </div>
  571. <!-- 备注-->
  572. <li style="color: red" v-if="specialResult.numberCardState == 0 && specialResult.numberCardNote != null">
  573. 稽核结果备注:{{ specialResult.numberCardNote }}
  574. </li>
  575. </div>
  576. </a-card>
  577. <!-- 使用人证件-->
  578. <a-card v-if="model.userLable == '1'" :bordered="true">
  579. <div slot="title">
  580. 使用人证件
  581. <span v-show="specialResult.userCertificateState == '1'">✅</span>
  582. <span v-show="specialResult.userCertificateState == '0'">❌</span>
  583. </div>
  584. <div class="clearfix">
  585. <div style="width: 50%;left: 25%;position: relative"></div>
  586. <!-- swiper1 -->
  587. <swiper
  588. class="swiper gallery-top"
  589. :options="swiperOptionTop"
  590. ref="swiperTop"
  591. >
  592. <swiper-slide class="slide-1" v-for="(item, index) in fileListUserCertificate" :key="item.id">
  593. <iframe
  594. v-if="item.urlBase"
  595. frameborder="1"
  596. :src="item.urlBase"
  597. ref="ifr"
  598. width="80%"
  599. height="400px"
  600. scrolling="auto">
  601. </iframe>
  602. <img style="width: 80%;height: 400px;border: 1px solid;"
  603. v-if="!item.urlBase" :src="noDataPng" border="1">
  604. <a-button v-if="item.urlBase && specialResult.userCertificateState != '1'"
  605. style="display: block;margin-top: 10px;border-color: red;color: red"
  606. danger @click="removeFile(item,'fileListUserCertificate')">移除
  607. </a-button>
  608. </swiper-slide>
  609. </swiper>
  610. <!-- swiper2 Thumbs -->
  611. <swiper
  612. class="swiper gallery-thumbs"
  613. :options="swiperOptionThumbs"
  614. ref="swiperThumbs"
  615. >
  616. <swiper-slide
  617. class="slide"
  618. style="width:100px;height:100px;"
  619. v-for="(item, index) in fileListUserCertificate"
  620. :key="item.id"
  621. >
  622. <div v-if="item.urlBase"
  623. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  624. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  625. item.fileName
  626. }}</span>
  627. </div>
  628. <img style="width: 100%;height: 96px"
  629. v-if="!item.urlBase" :src="noDataPng" border="1">
  630. </swiper-slide>
  631. <!-- 点我上传文件按钮-->
  632. <div class="clearfix">
  633. <a-upload
  634. v-if="specialResult.userCertificateState != '1'"
  635. listType="picture-card"
  636. name="file"
  637. :multiple="false"
  638. :action="importMinioUploadAction"
  639. :customRequest="e => selfUploadContract(e, 'fileListUserCertificate')"
  640. :headers="tokenHeader"
  641. :showUploadList="false"
  642. :beforeUpload="importBeforeUpload"
  643. @change="importHandleChange"
  644. >
  645. <div v-if="fileListUserCertificate.length < 10">
  646. <a-icon type="plus"/>
  647. <div class="ant-upload-text">点我上传文件</div>
  648. </div>
  649. </a-upload>
  650. </div>
  651. <div class="swiper-button-next swiper-button-white" slot="button-next">
  652. <div>
  653. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  654. </div>
  655. </div>
  656. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  657. <div>
  658. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  659. </div>
  660. </div>
  661. </swiper>
  662. <!-- 备注-->
  663. <li style="color: red"
  664. v-if="specialResult.userCertificateState == 0 && specialResult.userCertificateNote != null">
  665. 稽核结果备注:{{ specialResult.userCertificateNote }}
  666. </li>
  667. </div>
  668. </a-card>
  669. <!-- 营业执照副本(盖公章)-->
  670. <a-card v-if="model.userLable == '1'" :bordered="true">
  671. <div slot="title">
  672. 营业执照副本(盖公章)
  673. <span v-show="specialResult.businessLicenseState == '1'">✅</span>
  674. <span v-show="specialResult.businessLicenseState == '0'">❌</span>
  675. </div>
  676. <div class="clearfix">
  677. <div style="width: 50%;left: 25%;position: relative">
  678. <!-- swiper1 -->
  679. <swiper
  680. class="swiper gallery-top"
  681. :options="swiperOptionTop"
  682. ref="swiperTop"
  683. >
  684. <swiper-slide class="slide-1" v-for="(item, index) in fileListBusiness" :key="item.id">
  685. <iframe
  686. v-if="item.urlBase"
  687. frameborder="1"
  688. :src="item.urlBase"
  689. ref="ifr"
  690. width="80%"
  691. height="400px"
  692. scrolling="auto">
  693. </iframe>
  694. <img style="width: 80%;height: 400px;border: 1px solid;"
  695. v-if="!item.urlBase" :src="noDataPng" border="1">
  696. <a-button v-if="item.urlBase && specialResult.businessLicenseState != '1'"
  697. style="display: block;margin-top: 10px;border-color: red;color: red"
  698. danger @click="removeFile(item,'fileListBusiness')">移除
  699. </a-button>
  700. </swiper-slide>
  701. </swiper>
  702. <!-- swiper2 Thumbs -->
  703. <swiper
  704. class="swiper gallery-thumbs"
  705. :options="swiperOptionThumbs"
  706. ref="swiperThumbs"
  707. >
  708. <swiper-slide
  709. class="slide"
  710. style="width:100px;height:100px;"
  711. v-for="(item, index) in fileListBusiness"
  712. :key="item.id"
  713. >
  714. <div v-if="item.urlBase"
  715. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  716. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  717. item.fileName
  718. }}</span>
  719. </div>
  720. <img style="width: 100%;height: 96px"
  721. v-if="!item.urlBase" :src="noDataPng" border="1">
  722. </swiper-slide>
  723. <!-- 点我上传文件按钮-->
  724. <div class="clearfix">
  725. <a-upload
  726. v-if="specialResult.businessLicenseState != '1'"
  727. listType="picture-card"
  728. name="file"
  729. :multiple="false"
  730. :action="importMinioUploadAction"
  731. :customRequest="e => selfUploadContract(e, 'fileListBusiness')"
  732. :headers="tokenHeader"
  733. :showUploadList="false"
  734. :beforeUpload="importBeforeUpload"
  735. @change="importHandleChange"
  736. >
  737. <div v-if="fileListBusiness.length < 10">
  738. <a-icon type="plus"/>
  739. <div class="ant-upload-text">点我上传文件</div>
  740. </div>
  741. </a-upload>
  742. </div>
  743. <div class="swiper-button-next swiper-button-white" slot="button-next">
  744. <div>
  745. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  746. </div>
  747. </div>
  748. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  749. <div>
  750. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  751. </div>
  752. </div>
  753. </swiper>
  754. </div>
  755. <!-- 备注-->
  756. <li style="color: red"
  757. v-if="specialResult.businessLicenseState == 0 && specialResult.businessLicenseNote != null">
  758. 稽核结果备注:{{ specialResult.businessLicenseNote }}
  759. </li>
  760. </div>
  761. </a-card>
  762. <!-- 介绍信-->
  763. <a-card v-if="model.userLable == '1'" :bordered="true">
  764. <div slot="title">
  765. 介绍信
  766. <span v-show="specialResult.letterIntroductionState == '1'">✅</span>
  767. <span v-show="specialResult.letterIntroductionState == '0'">❌</span>
  768. </div>
  769. <div class="clearfix">
  770. <!-- swiper1 -->
  771. <swiper
  772. class="swiper gallery-top"
  773. :options="swiperOptionTop"
  774. ref="swiperTop"
  775. >
  776. <swiper-slide class="slide-1" v-for="(item, index) in fileListIntroduction" :key="item.id">
  777. <iframe
  778. v-if="item.urlBase"
  779. frameborder="1"
  780. :src="item.urlBase"
  781. ref="ifr"
  782. width="80%"
  783. height="400px"
  784. scrolling="auto">
  785. </iframe>
  786. <img style="width: 80%;height: 400px;border: 1px solid;"
  787. v-if="!item.urlBase" :src="noDataPng" border="1">
  788. <a-button v-if="item.urlBase && specialResult.letterIntroductionState != '1'"
  789. style="display: block;margin-top: 10px;border-color: red;color: red"
  790. danger @click="removeFile(item,'fileListIntroduction')">移除
  791. </a-button>
  792. </swiper-slide>
  793. </swiper>
  794. <!-- swiper2 Thumbs -->
  795. <swiper
  796. class="swiper gallery-thumbs"
  797. :options="swiperOptionThumbs"
  798. ref="swiperThumbs"
  799. >
  800. <swiper-slide
  801. class="slide"
  802. style="width:100px;height:100px;"
  803. v-for="(item, index) in fileListIntroduction"
  804. :key="item.id"
  805. >
  806. <div v-if="item.urlBase"
  807. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  808. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  809. item.fileName
  810. }}</span>
  811. </div>
  812. <img style="width: 100%;height: 96px"
  813. v-if="!item.urlBase" :src="noDataPng" border="1">
  814. </swiper-slide>
  815. <!-- 点我上传文件按钮-->
  816. <div class="clearfix">
  817. <a-upload
  818. v-if="specialResult.letterIntroductionState != '1'"
  819. listType="picture-card"
  820. name="file"
  821. :multiple="false"
  822. :action="importMinioUploadAction"
  823. :customRequest="e => selfUploadContract(e, 'fileListIntroduction')"
  824. :headers="tokenHeader"
  825. :showUploadList="false"
  826. :beforeUpload="importBeforeUpload"
  827. @change="importHandleChange"
  828. >
  829. <div v-if="fileListIntroduction.length < 10">
  830. <a-icon type="plus"/>
  831. <div class="ant-upload-text">点我上传文件</div>
  832. </div>
  833. </a-upload>
  834. </div>
  835. <div class="swiper-button-next swiper-button-white" slot="button-next">
  836. <div>
  837. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  838. </div>
  839. </div>
  840. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  841. <div>
  842. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  843. </div>
  844. </div>
  845. </swiper>
  846. <!-- 备注-->
  847. <li style="color: red"
  848. v-if="specialResult.letterIntroductionState == 0 && specialResult.letterIntroductionNote != null">
  849. 稽核结果备注:{{ specialResult.letterIntroductionNote }}
  850. </li>
  851. </div>
  852. </a-card>
  853. <!-- 防诈骗承诺涵(使用人签署)-->
  854. <a-card :bordered="true">
  855. <div slot="title">
  856. 防诈骗承诺涵(使用人签署)
  857. <span v-show="specialResult.fraudPreventionState == '1'">✅</span>
  858. <span v-show="specialResult.fraudPreventionState == '0'">❌</span>
  859. </div>
  860. <div class="clearfix">
  861. <div style="width: 50%;left: 25%;position: relative">
  862. <!-- swiper1 -->
  863. <swiper
  864. class="swiper gallery-top"
  865. :options="swiperOptionTop"
  866. ref="swiperTop"
  867. >
  868. <swiper-slide class="slide-1" v-for="(item, index) in fileListLetter" :key="item.id">
  869. <iframe
  870. v-if="item.urlBase"
  871. frameborder="1"
  872. :src="item.urlBase"
  873. ref="ifr"
  874. width="80%"
  875. height="400px"
  876. scrolling="auto">
  877. </iframe>
  878. <img style="width: 80%;height: 400px;border: 1px solid;"
  879. v-if="!item.urlBase" :src="noDataPng" border="1">
  880. <a-button v-if="item.urlBase && specialResult.fraudPreventionState != '1'"
  881. style="display: block;margin-top: 10px;border-color: red;color: red"
  882. danger @click="removeFile(item,'fileListLetter')">移除
  883. </a-button>
  884. </swiper-slide>
  885. </swiper>
  886. <!-- swiper2 Thumbs -->
  887. <swiper
  888. class="swiper gallery-thumbs"
  889. :options="swiperOptionThumbs"
  890. ref="swiperThumbs"
  891. >
  892. <swiper-slide
  893. class="slide"
  894. style="width:100px;height:100px;"
  895. v-for="(item, index) in fileListLetter"
  896. :key="item.id"
  897. >
  898. <div v-if="item.urlBase"
  899. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  900. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  901. item.fileName
  902. }}</span>
  903. </div>
  904. <img style="width: 100%;height: 96px"
  905. v-if="!item.urlBase" :src="noDataPng" border="1">
  906. </swiper-slide>
  907. <!-- 点我上传文件按钮-->
  908. <div class="clearfix">
  909. <a-upload
  910. v-if="specialResult.fraudPreventionState != '1'"
  911. listType="picture-card"
  912. name="file"
  913. :multiple="false"
  914. :action="importMinioUploadAction"
  915. :customRequest="e => selfUploadContract(e, 'fileListLetter')"
  916. :headers="tokenHeader"
  917. :showUploadList="false"
  918. :beforeUpload="importBeforeUpload"
  919. @change="importHandleChange"
  920. >
  921. <div v-if="fileListLetter.length < 10">
  922. <a-icon type="plus"/>
  923. <div class="ant-upload-text">点我上传文件</div>
  924. </div>
  925. </a-upload>
  926. </div>
  927. <div class="swiper-button-next swiper-button-white" slot="button-next">
  928. <div>
  929. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  930. </div>
  931. </div>
  932. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  933. <div>
  934. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  935. </div>
  936. </div>
  937. </swiper>
  938. </div>
  939. <!-- 备注-->
  940. <li style="color: red"
  941. v-if="specialResult.fraudPreventionState == 0 && specialResult.fraudPreventionNote != null">
  942. 稽核结果备注:{{ specialResult.fraudPreventionNote }}
  943. </li>
  944. </div>
  945. </a-card>
  946. <!-- 消费凭证-->
  947. <a-card v-if="model.shutdownLabel == '0'" :bordered="true">
  948. <div slot="title">
  949. 消费凭证
  950. <span v-show="specialResult.consumptionVoucherState == '1'">✅</span>
  951. <span v-show="specialResult.consumptionVoucherState == '0'">❌</span>
  952. </div>
  953. <div class="clearfix">
  954. <div style="width: 50%;left: 25%;position: relative">
  955. <!-- swiper1 -->
  956. <swiper
  957. class="swiper gallery-top"
  958. :options="swiperOptionTop"
  959. ref="swiperTop"
  960. >
  961. <swiper-slide class="slide-1" v-for="(item, index) in fileListVoucher" :key="item.id">
  962. <iframe
  963. v-if="item.urlBase"
  964. frameborder="1"
  965. :src="item.urlBase"
  966. ref="ifr"
  967. width="80%"
  968. height="400px"
  969. scrolling="auto">
  970. </iframe>
  971. <img style="width: 80%;height: 400px;border: 1px solid;"
  972. v-if="!item.urlBase" :src="noDataPng" border="1">
  973. <a-button v-if="item.urlBase && specialResult.consumptionVoucherState != '1'"
  974. style="display: block;margin-top: 10px;border-color: red;color: red"
  975. danger @click="removeFile(item,'fileListVoucher')">移除
  976. </a-button>
  977. </swiper-slide>
  978. </swiper>
  979. <!-- swiper2 Thumbs -->
  980. <swiper
  981. class="swiper gallery-thumbs"
  982. :options="swiperOptionThumbs"
  983. ref="swiperThumbs"
  984. >
  985. <swiper-slide
  986. class="slide"
  987. style="width:100px;height:100px;"
  988. v-for="(item, index) in fileListVoucher"
  989. :key="item.id"
  990. >
  991. <div v-if="item.urlBase"
  992. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  993. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  994. item.fileName
  995. }}</span>
  996. </div>
  997. <img style="width: 100%;height: 96px"
  998. v-if="!item.urlBase" :src="noDataPng" border="1">
  999. </swiper-slide>
  1000. <!-- 点我上传文件按钮-->
  1001. <div class="clearfix">
  1002. <a-upload
  1003. v-if="specialResult.consumptionVoucherState != '1'"
  1004. listType="picture-card"
  1005. name="file"
  1006. :multiple="false"
  1007. :action="importMinioUploadAction"
  1008. :customRequest="e => selfUploadContract(e, 'fileListVoucher')"
  1009. :headers="tokenHeader"
  1010. :showUploadList="false"
  1011. :beforeUpload="importBeforeUpload"
  1012. @change="importHandleChange"
  1013. >
  1014. <div v-if="fileListVoucher.length < 10">
  1015. <a-icon type="plus"/>
  1016. <div class="ant-upload-text">点我上传文件</div>
  1017. </div>
  1018. </a-upload>
  1019. </div>
  1020. <div class="swiper-button-next swiper-button-white" slot="button-next">
  1021. <div>
  1022. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  1023. </div>
  1024. </div>
  1025. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  1026. <div>
  1027. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  1028. </div>
  1029. </div>
  1030. </swiper>
  1031. </div>
  1032. <!-- 备注-->
  1033. <li style="color: red"
  1034. v-if="specialResult.consumptionVoucherState == 0 && specialResult.consumptionVoucherNote != null">
  1035. 稽核结果备注:{{ specialResult.consumptionVoucherNote }}
  1036. </li>
  1037. </div>
  1038. </a-card>
  1039. <!-- 承诺视频-->
  1040. <a-card v-if="model.shutdownLabel == '5'" title="承诺视频" :bordered="true">
  1041. <div slot="title">
  1042. 承诺视频
  1043. <span v-show="specialResult.commitmentVideoState == '1'">✅</span>
  1044. <span v-show="specialResult.commitmentVideoState == '0'">❌</span>
  1045. </div>
  1046. <div class="clearfix">
  1047. <div style="width: 50%;left: 25%;position: relative">
  1048. <!-- swiper1 -->
  1049. <swiper
  1050. class="swiper gallery-top"
  1051. :options="swiperOptionTop"
  1052. ref="swiperTop"
  1053. >
  1054. <swiper-slide class="slide-1" v-for="(item, index) in fileListVideo" :key="item.id">
  1055. <iframe
  1056. v-if="item.urlBase"
  1057. frameborder="1"
  1058. :src="item.urlBase"
  1059. ref="ifr"
  1060. width="80%"
  1061. height="400px"
  1062. scrolling="auto">
  1063. </iframe>
  1064. <img style="width: 80%;height: 400px;border: 1px solid;"
  1065. v-if="!item.urlBase" :src="noDataPng" border="1">
  1066. <a-button v-if="item.urlBase && specialResult.commitmentVideoState != '1'"
  1067. style="display: block;margin-top: 10px;border-color: red;color: red"
  1068. danger @click="removeFile(item,'fileListVideo')">移除
  1069. </a-button>
  1070. </swiper-slide>
  1071. </swiper>
  1072. <!-- swiper2 Thumbs -->
  1073. <swiper
  1074. class="swiper gallery-thumbs"
  1075. :options="swiperOptionThumbs"
  1076. ref="swiperThumbs"
  1077. >
  1078. <swiper-slide
  1079. class="slide"
  1080. style="width:100px;height:100px;"
  1081. v-for="(item, index) in fileListVideo"
  1082. :key="item.id"
  1083. >
  1084. <div v-if="item.urlBase"
  1085. style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
  1086. <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{
  1087. item.fileName
  1088. }}</span>
  1089. </div>
  1090. <img style="width: 100%;height: 96px"
  1091. v-if="!item.urlBase" :src="noDataPng" border="1">
  1092. </swiper-slide>
  1093. <!-- 点我上传文件按钮-->
  1094. <div class="clearfix">
  1095. <a-upload
  1096. v-if="specialResult.commitmentVideoState != '1'"
  1097. listType="picture-card"
  1098. name="file"
  1099. :multiple="false"
  1100. :action="importMinioUploadAction"
  1101. :customRequest="e => selfUploadContract(e, 'fileListVideo')"
  1102. :headers="tokenHeader"
  1103. :showUploadList="false"
  1104. :beforeUpload="importBeforeUpload"
  1105. @change="importHandleChange"
  1106. >
  1107. <div v-if="fileListVideo.length < 10">
  1108. <a-icon type="plus"/>
  1109. <div class="ant-upload-text">点我上传文件</div>
  1110. </div>
  1111. </a-upload>
  1112. </div>
  1113. <div class="swiper-button-next swiper-button-white" slot="button-next">
  1114. <div>
  1115. <!-- <img src="../../../../assets/images/nextImg.png" alt=""/>-->
  1116. </div>
  1117. </div>
  1118. <div class="swiper-button-prev swiper-button-white" slot="button-prev">
  1119. <div>
  1120. <!-- <img src="../../../../assets/images/prevImg.png" alt=""/>-->
  1121. </div>
  1122. </div>
  1123. </swiper>
  1124. </div>
  1125. <!-- 备注-->
  1126. <li style="color: red"
  1127. v-if="specialResult.commitmentVideoState == 0 && specialResult.commitmentVideoNote != null">
  1128. 稽核结果备注:{{ specialResult.commitmentVideoNote }}
  1129. </li>
  1130. </div>
  1131. </a-card>
  1132. <!-- 提交申请 -->
  1133. <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }" style="margin-top: 10px;">
  1134. <a-space>
  1135. <a-button type="primary" @click="handleUpload">
  1136. 提交申请
  1137. </a-button>
  1138. </a-space>
  1139. </a-form-model-item>
  1140. </a-form-model>
  1141. </a-card>
  1142. </div>
  1143. </a-spin>
  1144. </template>
  1145. <script>
  1146. import {httpAction, postAction} from "@api/manage";
  1147. /*无数据图片*/
  1148. import noDataPng from '@/assets/nodata.png'
  1149. import Vue from "vue";
  1150. import {ACCESS_TOKEN, TENANT_ID} from "@/store/mutation-types";
  1151. let Base64 = require('js-base64').Base64
  1152. export default {
  1153. name: 'TaskUploadData',
  1154. inject: ['closeCurrent'],
  1155. components: {
  1156. noDataPng
  1157. },
  1158. data() {
  1159. return {
  1160. //是否批量上传
  1161. batchImproves: false,
  1162. //批量上传id
  1163. ids:[],
  1164. //缩略与大图数据源
  1165. swiperId: 0 + 1,
  1166. //轮播配置
  1167. swiperOptionTop: {
  1168. zoom: true,
  1169. loop: false,
  1170. loopedSlides: 5, // looped slides should be the same
  1171. spaceBetween: 10,
  1172. observer: true, //修改swiper自己或子元素时,自动初始化swiper
  1173. observeParents: true, //修改swiper的父元素时,自动初始化swiper
  1174. // autoplay: { //自动轮播
  1175. // delay: 2000,
  1176. // disableOnInteraction: false
  1177. // },
  1178. navigation: {
  1179. nextEl: '.swiper-button-next',
  1180. prevEl: '.swiper-button-prev'
  1181. }
  1182. },
  1183. swiperOptionThumbs: {
  1184. loop: false,
  1185. loopedSlides: 5, // looped slides should be the same
  1186. spaceBetween: 10,
  1187. centeredSlides: true,
  1188. slidesPerView: 'auto',
  1189. touchRatio: 0.2,
  1190. slideToClickedSlide: true,
  1191. navigation: {
  1192. nextEl: '.swiper-button-next',
  1193. prevEl: '.swiper-button-prev'
  1194. }
  1195. },
  1196. /**无数据图片*/
  1197. noDataPng: noDataPng,
  1198. //结果
  1199. specialResult: {},
  1200. //上级传参
  1201. query: {},
  1202. //客户信息ID
  1203. infoId: "",
  1204. //客户资料ID
  1205. dataId: "",
  1206. model: {
  1207. "shutdownLabel": "0",
  1208. "materialLabel": "0",
  1209. "userLable": "0",
  1210. "openingNumber": ""
  1211. },
  1212. //系统实名制截图
  1213. nameFindCompliance: [{}],
  1214. //系统实名制截图备注
  1215. nameFindComplianceRemark: "",
  1216. //特审单
  1217. specialReviewForm: [{}],
  1218. //身份证正反面
  1219. fileListIdCard: [{}],
  1220. //手持证件照片
  1221. fileListHandCertificate: [{}],
  1222. //号卡照片
  1223. fileListNumberCard: [{}],
  1224. //防诈骗承诺涵
  1225. fileListLetter: [{}],
  1226. //营业执照副本
  1227. fileListBusiness: [{}],
  1228. //介绍信
  1229. fileListIntroduction: [{}],
  1230. //使用人证件
  1231. fileListUserCertificate: [{}],
  1232. //消费凭证
  1233. fileListVoucher: [{}],
  1234. //承诺视频
  1235. fileListVideo: [{}],
  1236. //表单验证
  1237. rules: {
  1238. openingNumber: [
  1239. {required: true, message: '必须输入手机号'},
  1240. ],
  1241. customerName: [
  1242. {required: true, message: '必须输入客户名称'},
  1243. ],
  1244. shutdownTime: [
  1245. {required: true, message: '必须选择关停时间'},
  1246. ]
  1247. },
  1248. previewVisible: false,
  1249. previewVideo: false,
  1250. previewImage: "",
  1251. uploading: false,
  1252. formState: {},
  1253. labelCol: {span: 1},
  1254. wrapperCol: {span: 23},
  1255. // 1列
  1256. labelCol1: {
  1257. labelCol: {
  1258. xs: {span: 24},
  1259. sm: {span: 2},
  1260. },
  1261. wrapperCol: {
  1262. xs: {span: 24},
  1263. sm: {span: 21},
  1264. }
  1265. },
  1266. // 2列
  1267. labelCol2: {
  1268. labelCol: {
  1269. xs: {span: 24},
  1270. sm: {span: 4},
  1271. },
  1272. wrapperCol: {
  1273. xs: {span: 24},
  1274. sm: {span: 18},
  1275. }
  1276. },
  1277. labelCol1Plus: {
  1278. labelCol: {
  1279. xs: {span: 24},
  1280. sm: {span: 2},
  1281. },
  1282. wrapperCol: {
  1283. xs: {span: 24},
  1284. sm: {span: 15},
  1285. }
  1286. },
  1287. url: {
  1288. importExcel: window._CONFIG['domainURL'] + "/smsCheck/task/importCustomerExcel",
  1289. minioUpload: "/smsCheck/customerData/uploadMinio",
  1290. findById: "/special/examination/find/id",
  1291. findCheckState: "/special/examination/find/check/log",
  1292. editInfo: "/special/examination/edit/info",
  1293. batchEditInfo: "/special/examination/batch/edit/info"
  1294. },
  1295. videoState: false, // 视频播放状态
  1296. // 学时
  1297. studyTime: {
  1298. currentTime: 0, // 当前已学时长
  1299. duration: 0 // 总时长
  1300. },
  1301. timer: {}, // 定时器
  1302. pauseTimer: {} // 暂停定时器
  1303. }
  1304. },
  1305. computed: {
  1306. importMinioUploadAction() {
  1307. return window._CONFIG['domianURL'] + this.url.minioUpload;
  1308. },
  1309. tokenHeader() {
  1310. let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
  1311. let tenantid = Vue.ls.get(TENANT_ID)
  1312. if (tenantid) {
  1313. head['tenant-id'] = tenantid
  1314. }
  1315. return head;
  1316. }
  1317. },
  1318. props: {
  1319. taskInfo: {
  1320. type: Object,
  1321. require: true
  1322. },
  1323. poster: {
  1324. type: String,
  1325. required: false,
  1326. default: ""
  1327. },
  1328. src: {
  1329. type: String,
  1330. required: true
  1331. },
  1332. controls: {
  1333. type: Boolean,
  1334. required: false,
  1335. default: true
  1336. },
  1337. control: {
  1338. type: Boolean,
  1339. required: false,
  1340. default: false
  1341. },
  1342. videoData: {
  1343. type: Object,
  1344. required: true
  1345. }
  1346. },
  1347. watch: {
  1348. // 监听操作
  1349. videoData(val, oldVal) {
  1350. const {currentTime, duration} = val;
  1351. if (currentTime && duration && currentTime < duration) {
  1352. this.hintOperate();
  1353. }
  1354. }
  1355. },
  1356. created() {
  1357. this.batchImproves = this.$route.query.batchImproves;
  1358. if (this.batchImproves) {
  1359. //批量上传id
  1360. this.ids = this.$route.query.ids;
  1361. }else {
  1362. //客户ID
  1363. this.infoId = this.$route.query.id;
  1364. this.query.data = this.$route.query.data;
  1365. //复开号码
  1366. this.model.openingNumber = this.query.data.smsNumber
  1367. //客户名称
  1368. this.model.customerName = this.query.data.customerName
  1369. //关停时间
  1370. this.model.shutdownTime = this.query.data.shutdownLabelDate
  1371. }
  1372. if (this.$route.query.rectification) {
  1373. //整改操作获取回填信息
  1374. this.findById(this.infoId);
  1375. }
  1376. },
  1377. mounted() {
  1378. // 实现swiper双向控制
  1379. this.$nextTick(() => {
  1380. const swiperTop = this.$refs.swiperTop.swiper
  1381. const swiperThumbs = this.$refs.swiperThumbs.swiper
  1382. swiperTop.controller.control = swiperThumbs
  1383. swiperThumbs.controller.control = swiperTop
  1384. })
  1385. /**监听视频拨放*/
  1386. this.$refs.myVideo.addEventListener("play", () => {
  1387. this.openTimer();
  1388. });
  1389. /**监听视频暂停*/
  1390. this.$refs.myVideo.addEventListener("pause", () => {
  1391. this.closeTimer();
  1392. });
  1393. },
  1394. methods: {
  1395. goBack() {
  1396. this.$router.go(-1);
  1397. this.closeCurrent();
  1398. },
  1399. /**文件上传成功后回调*/
  1400. importHandleChange(info) {
  1401. },
  1402. /**文件格式限制*/
  1403. importBeforeUpload(file) {
  1404. var fileType = file.type;
  1405. if (fileType === 'image') {
  1406. if (fileType.indexOf('image') < 0) {
  1407. this.$message.warning('请上传图片');
  1408. return false;
  1409. }
  1410. } else if (fileType === 'file') {
  1411. if (fileType.indexOf('image') >= 0) {
  1412. this.$message.warning('请上传文件');
  1413. return false;
  1414. }
  1415. }
  1416. return true
  1417. },
  1418. /**移除文件*/
  1419. removeFile(fileData, fileAttribute) {
  1420. let that = this;
  1421. //处理轮播数据
  1422. let swiperImg = that[fileAttribute];
  1423. if (swiperImg) {
  1424. let number = swiperImg.indexOf(fileData);
  1425. swiperImg.splice(number, 1)
  1426. if (swiperImg.length == 0) {
  1427. swiperImg.push({})
  1428. }
  1429. that[fileAttribute] = swiperImg
  1430. }
  1431. },
  1432. /**自定义的上传文件方法*/
  1433. selfUploadContract(data, fileAttribute) {
  1434. let that = this;
  1435. if (data.file) {
  1436. let formData = new FormData();
  1437. formData.append('file', data.file)
  1438. postAction(this.url.minioUpload, formData).then((res) => {
  1439. if (res.success) {
  1440. that.swiperId = that.swiperId + 1;
  1441. //文件链接
  1442. let filePath = res.message;
  1443. let swipData = {
  1444. id: that.swiperId,
  1445. urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
  1446. + encodeURIComponent(
  1447. Base64.encode(
  1448. (filePath)
  1449. )),
  1450. url: filePath,
  1451. fileName: data.file.name
  1452. }
  1453. if (that[fileAttribute][0].urlBase) {
  1454. that[fileAttribute].push(swipData)
  1455. } else {
  1456. that[fileAttribute] = []
  1457. //数据发生变化
  1458. that[fileAttribute][0] = swipData;
  1459. }
  1460. }
  1461. })
  1462. }
  1463. },
  1464. /**获取稽核结果*/
  1465. findCheckState(id) {
  1466. let that = this;
  1467. let model = {
  1468. "dataId": id,
  1469. }
  1470. postAction(this.url.findCheckState, model)
  1471. .then((res) => {
  1472. if (res.success) {
  1473. that.specialResult = res.result;
  1474. }
  1475. })
  1476. },
  1477. /**包装轮播数据*/
  1478. packageArr(data) {
  1479. let id = 0;
  1480. let newArr = []
  1481. if (data == null) {
  1482. newArr.push({})
  1483. return newArr;
  1484. }
  1485. let splice = data.split(",");
  1486. for (var i in splice) {
  1487. id = id + 1;
  1488. let filePath = splice[i];
  1489. if (filePath == "") {
  1490. break;
  1491. }
  1492. let fileName = filePath.split("/");
  1493. fileName = fileName[fileName.length - 1];
  1494. let swipData = {
  1495. id: id,
  1496. urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
  1497. + encodeURIComponent(
  1498. Base64.encode(
  1499. (filePath)
  1500. )),
  1501. url: filePath,
  1502. fileName: fileName
  1503. }
  1504. newArr.push(swipData);
  1505. }
  1506. return newArr;
  1507. },
  1508. /**整改操作获取回填信息*/
  1509. findById(id) {
  1510. let that = this;
  1511. let model = {
  1512. "infoId": id,
  1513. }
  1514. postAction(this.url.findById, model)
  1515. .then((res) => {
  1516. if (res.success) {
  1517. this.result = res.result;
  1518. that.dataId = this.result.id;
  1519. //获取稽核结果
  1520. that.findCheckState(that.dataId)
  1521. this.model.userLable = this.result.userLable.toString();
  1522. this.model.openingNumber = this.result.openingNumber;
  1523. this.model.customerName = this.result.customerName;
  1524. this.model.unitName = this.result.unitName;
  1525. this.model.shutdownTime = this.result.shutdownTime
  1526. this.model.reasonReopening = this.result.reasonReopening
  1527. this.model.materialLabel = this.result.materialLabel.toString();
  1528. this.model.shutdownLabel = this.result.shutdownLabel.toString();
  1529. this.specialNote = this.result.specialNote;
  1530. this.model.status = this.result.status;
  1531. //身份证正反面
  1532. this.fileListIdCard = this.packageArr(this.result.idCard);
  1533. //手持证件照片
  1534. this.fileListHandCertificate = this.packageArr(this.result.handCertificate);
  1535. //号卡照片
  1536. //号卡照片
  1537. this.fileListNumberCard = this.packageArr(this.result.numberCard);
  1538. //使用人证件
  1539. this.fileListUserCertificate = this.packageArr(this.result.userCertificate);
  1540. //营业执照副本
  1541. this.fileListBusiness = this.packageArr(this.result.businessLicense);
  1542. //介绍信
  1543. this.fileListIntroduction = this.packageArr(this.result.letterIntroduction);
  1544. //防诈骗承诺涵
  1545. this.fileListLetter = this.packageArr(this.result.fraudPrevention);
  1546. //消费凭证
  1547. this.fileListVoucher = this.packageArr(this.result.consumptionVoucher);
  1548. //承诺视频
  1549. this.fileListVideo = this.packageArr(this.result.commitmentVideo);
  1550. //系统实名制截图
  1551. this.nameFindCompliance = this.packageArr(this.result.nameFindCompliance);
  1552. if (this.result.nameFindComplianceRemark != null) {
  1553. this.nameFindComplianceRemark = this.result.nameFindComplianceRemark
  1554. }
  1555. //特审单截图
  1556. this.specialReviewForm = this.packageArr(this.result.specialReviewForm);
  1557. } else {
  1558. this.$message.error("查询失败");
  1559. }
  1560. }).finally(() => {
  1561. })
  1562. },
  1563. // 开启定时器
  1564. openTimer() {
  1565. this.timer = setInterval(() => {
  1566. this.$emit("videoStudyTime", this.studyTime);
  1567. }, 5000);
  1568. },
  1569. // 关闭定时器
  1570. closeTimer() {
  1571. clearInterval(this.timer);
  1572. this.$emit("videoStudyTime", this.studyTime);
  1573. },
  1574. // 开启暂停定时器
  1575. openPauseTimer() {
  1576. this.pauseTimer = setInterval(() => {
  1577. this.hintOperate();
  1578. }, 600000);
  1579. },
  1580. // 关闭暂停定时器
  1581. closePauseTimer() {
  1582. clearInterval(this.pauseTimer);
  1583. },
  1584. // 提示操作
  1585. hintOperate() {
  1586. this.operateVideo();
  1587. this.$alert("请点击确认继续学习", "提示", {
  1588. confirmButtonText: "确定",
  1589. confirmButtonClass: "hint-btn",
  1590. showClose: false,
  1591. callback: action => {
  1592. this.$refs.myVideo.currentTime = this.videoData.currentTime;
  1593. this.operateVideo();
  1594. this.openPauseTimer();
  1595. }
  1596. });
  1597. },
  1598. // 获取当前播放位置
  1599. timeupdate(e) {
  1600. this.studyTime.currentTime = e.target.currentTime;
  1601. this.studyTime.duration = e.target.duration ? e.target.duration : 0;
  1602. },
  1603. // 操作视频播放、暂停
  1604. operateVideo() {
  1605. if (!this.src) {
  1606. this.$message({message: "暂无视频资源,请查看其他视频!"});
  1607. return false;
  1608. }
  1609. if (this.$refs.myVideo.paused) {
  1610. this.$refs.myVideo.play();
  1611. this.videoState = true;
  1612. } else {
  1613. this.$refs.myVideo.pause();
  1614. this.videoState = false;
  1615. }
  1616. },
  1617. beforeUploadNameFindCompliance(file) {
  1618. if (this.nameFindCompliance.length > 2) {//判断上传的图片数量
  1619. return false
  1620. }
  1621. this.exeBaseSpecialNameFindCompliance(file)
  1622. return false
  1623. },
  1624. beforeUploadSpecialReviewForm(file) {
  1625. if (this.specialReviewForm.length > 2) {//判断上传的图片数量
  1626. return false
  1627. }
  1628. this.exeBaseSpecialReviewForm(file)
  1629. return false
  1630. },
  1631. beforeUploadIdCard(file) {
  1632. if (this.fileListIdCard.length > 2) {//判断上传的图片数量
  1633. return false
  1634. }
  1635. this.exeBaseIdCard(file)
  1636. return false
  1637. },
  1638. beforeUploadCertificate(file) {
  1639. if (this.fileListHandCertificate.length > 1) {//判断上传的图片数量
  1640. return false
  1641. }
  1642. this.exeBaseCertificate(file)
  1643. return false
  1644. },
  1645. beforeUploadNumberCard(file) {
  1646. if (this.fileListNumberCard.length > 1) {//判断上传的图片数量
  1647. return false
  1648. }
  1649. this.exeBaseNumberCard(file)
  1650. return false
  1651. },
  1652. beforeUploadLetter(file) {
  1653. if (this.fileListLetter.length > 1) {//判断上传的图片数量
  1654. return false
  1655. }
  1656. this.exeBaseLetter(file)
  1657. return false
  1658. },
  1659. beforeUploadBusiness(file) {
  1660. if (this.fileListBusiness.length > 1) {//判断上传的图片数量
  1661. return false
  1662. }
  1663. this.exeBaseBusiness(file)
  1664. return false
  1665. },
  1666. beforeUploadIntroduction(file) {
  1667. if (this.fileListIntroduction.length > 1) {//判断上传的图片数量
  1668. return false
  1669. }
  1670. this.exeBaseIntroduction(file)
  1671. return false
  1672. },
  1673. beforeUploadUserCertificate(file) {
  1674. if (this.fileListUserCertificate.length > 1) {//判断上传的图片数量
  1675. return false
  1676. }
  1677. this.exeBaseUserCertificate(file)
  1678. return false
  1679. },
  1680. beforeUploadVoucher(file) {
  1681. if (this.fileListVoucher.length > 1) {//判断上传的图片数量
  1682. return false
  1683. }
  1684. this.exeBaseVocher(file)
  1685. return false
  1686. },
  1687. beforeUploadVideo(file) {
  1688. if (this.fileListVideo.length > 1) {//判断上传的图片数量
  1689. return false
  1690. }
  1691. this.exeBaseVideo(file)
  1692. return false
  1693. },
  1694. async exeBaseSpecialNameFindCompliance(file) {
  1695. await this.getBase64(file, (imageUrl) => {
  1696. if (this.nameFindCompliance.length < 2 && this.preventSpecialNameFindCompliance(imageUrl)) {//判断图片数量及去重
  1697. const file2 = file
  1698. file2.url = imageUrl
  1699. this.nameFindCompliance = [...this.nameFindCompliance, file]
  1700. this.loading = false
  1701. }
  1702. }).then((result) => {
  1703. console.log(result)
  1704. })
  1705. },
  1706. async exeBaseSpecialReviewForm(file) {
  1707. await this.getBase64(file, (imageUrl) => {
  1708. if (this.specialReviewForm.length < 2 && this.preventSpecialReviewForm(imageUrl)) {//判断图片数量及去重
  1709. const file2 = file
  1710. file2.url = imageUrl
  1711. this.specialReviewForm = [...this.specialReviewForm, file]
  1712. this.loading = false
  1713. }
  1714. }).then((result) => {
  1715. console.log(result)
  1716. })
  1717. },
  1718. async exeBaseIdCard(file) {
  1719. await this.getBase64(file, (imageUrl) => {
  1720. if (this.fileListIdCard.length < 2 && this.preventRepeatIdCard(imageUrl)) {//判断图片数量及去重
  1721. const file2 = file
  1722. file2.url = imageUrl
  1723. this.fileListIdCard = [...this.fileListIdCard, file]
  1724. this.loading = false
  1725. }
  1726. }).then((result) => {
  1727. console.log(result)
  1728. })
  1729. },
  1730. async exeBaseCertificate(file) {
  1731. await this.getBase64(file, (imageUrl) => {
  1732. if (this.fileListHandCertificate.length < 1 && this.preventRepeatCertificate(imageUrl)) {//判断图片数量及去重
  1733. const file2 = file
  1734. file2.url = imageUrl
  1735. this.fileListHandCertificate = [...this.fileListHandCertificate, file]
  1736. this.loading = false
  1737. }
  1738. }).then((result) => {
  1739. console.log(result)
  1740. })
  1741. },
  1742. async exeBaseNumberCard(file) {
  1743. await this.getBase64(file, (imageUrl) => {
  1744. if (this.fileListNumberCard.length < 1 && this.preventRepeatNumberCard(imageUrl)) {//判断图片数量及去重
  1745. const file2 = file
  1746. file2.url = imageUrl
  1747. this.fileListNumberCard = [...this.fileListNumberCard, file]
  1748. this.loading = false
  1749. }
  1750. }).then((result) => {
  1751. console.log(result)
  1752. })
  1753. },
  1754. async exeBaseLetter(file) {
  1755. await this.getBase64(file, (imageUrl) => {
  1756. if (this.fileListLetter.length < 1 && this.preventRepeatLetter(imageUrl)) {//判断图片数量及去重
  1757. const file2 = file
  1758. file2.url = imageUrl
  1759. this.fileListLetter = [...this.fileListLetter, file]
  1760. this.loading = false
  1761. }
  1762. }).then((result) => {
  1763. console.log(result)
  1764. })
  1765. },
  1766. async exeBaseBusiness(file) {
  1767. await this.getBase64(file, (imageUrl) => {
  1768. if (this.fileListBusiness.length < 1 && this.preventRepeatBusiness(imageUrl)) {//判断图片数量及去重
  1769. const file2 = file
  1770. file2.url = imageUrl
  1771. this.fileListBusiness = [...this.fileListBusiness, file]
  1772. this.loading = false
  1773. }
  1774. }).then((result) => {
  1775. console.log(result)
  1776. })
  1777. },
  1778. async exeBaseIntroduction(file) {
  1779. await this.getBase64(file, (imageUrl) => {
  1780. if (this.fileListIntroduction.length < 1 && this.preventRepeatIntroduction(imageUrl)) {//判断图片数量及去重
  1781. const file2 = file
  1782. file2.url = imageUrl
  1783. this.fileListIntroduction = [...this.fileListIntroduction, file]
  1784. this.loading = false
  1785. }
  1786. }).then((result) => {
  1787. console.log(result)
  1788. })
  1789. },
  1790. async exeBaseUserCertificate(file) {
  1791. await this.getBase64(file, (imageUrl) => {
  1792. if (this.fileListUserCertificate.length < 1 && this.preventRepeatUserCertificate(imageUrl)) {//判断图片数量及去重
  1793. const file2 = file
  1794. file2.url = imageUrl
  1795. this.fileListUserCertificate = [...this.fileListUserCertificate, file]
  1796. this.loading = false
  1797. }
  1798. }).then((result) => {
  1799. console.log(result)
  1800. })
  1801. },
  1802. async exeBaseVocher(file) {
  1803. await this.getBase64(file, (imageUrl) => {
  1804. if (this.fileListVoucher.length < 1 && this.preventRepeatVoucher(imageUrl)) {//判断图片数量及去重
  1805. const file2 = file
  1806. file2.url = imageUrl
  1807. this.fileListVoucher = [...this.fileListVoucher, file]
  1808. this.loading = false
  1809. }
  1810. }).then((result) => {
  1811. console.log(result)
  1812. })
  1813. },
  1814. async exeBaseVideo(file) {
  1815. await this.getBase64(file, (imageUrl) => {
  1816. if (this.fileListVideo.length < 1 && this.preventRepeatVideo(imageUrl)) {//判断图片数量及去重
  1817. const file2 = file
  1818. file2.url = imageUrl
  1819. this.fileListVideo = [...this.fileListVideo, file]
  1820. this.loading = false
  1821. }
  1822. }).then((result) => {
  1823. console.log(result)
  1824. })
  1825. },
  1826. //删除实名制截图
  1827. handleRemoveNameFindCompliance(file) {//删除图片
  1828. const index = this.nameFindCompliance.indexOf(file)
  1829. const newFileList = this.nameFindCompliance.slice()
  1830. newFileList.splice(index, 1)
  1831. this.nameFindCompliance = newFileList
  1832. },
  1833. //删除特审单
  1834. handleRemoveSpecialReviewForm(file) {//删除图片
  1835. const index = this.specialReviewForm.indexOf(file)
  1836. const newFileList = this.specialReviewForm.slice()
  1837. newFileList.splice(index, 1)
  1838. this.specialReviewForm = newFileList
  1839. },
  1840. //删除身份证
  1841. handleRemoveIdCard(file) {//删除图片
  1842. const index = this.fileListIdCard.indexOf(file)
  1843. const newFileList = this.fileListIdCard.slice()
  1844. newFileList.splice(index, 1)
  1845. this.fileListIdCard = newFileList
  1846. },
  1847. //删除手持身份证
  1848. handleRemoveCertificate(file) {//删除图片
  1849. const index = this.fileListHandCertificate.indexOf(file)
  1850. const newFileList = this.fileListHandCertificate.slice()
  1851. newFileList.splice(index, 1)
  1852. this.fileListHandCertificate = newFileList
  1853. },
  1854. //删除号卡
  1855. handleRemoveNumberCard(file) {
  1856. const index = this.fileListNumberCard.indexOf(file)
  1857. const newFileList = this.fileListNumberCard.slice()
  1858. newFileList.splice(index, 1)
  1859. this.fileListNumberCard = newFileList
  1860. },
  1861. //删除防诈骗承诺涵
  1862. handleRemoveLetter(file) {
  1863. const index = this.fileListLetter.indexOf(file)
  1864. const newFileList = this.fileListLetter.slice()
  1865. newFileList.splice(index, 1)
  1866. this.fileListLetter = newFileList
  1867. },
  1868. //删除营业执照副本
  1869. handleRemoveBusiness(file) {
  1870. const index = this.fileListBusiness.indexOf(file)
  1871. const newFileList = this.fileListBusiness.slice()
  1872. newFileList.splice(index, 1)
  1873. this.fileListBusiness = newFileList
  1874. },
  1875. //删除介绍信
  1876. handleRemoveIntroduction(file) {
  1877. const index = this.fileListIntroduction.indexOf(file)
  1878. const newFileList = this.fileListIntroduction.slice()
  1879. newFileList.splice(index, 1)
  1880. this.fileListIntroduction = newFileList
  1881. },
  1882. //删除使用人证件
  1883. handleRemoveUserCertificate(file) {
  1884. const index = this.fileListUserCertificate.indexOf(file)
  1885. const newFileList = this.fileListUserCertificate.slice()
  1886. newFileList.splice(index, 1)
  1887. this.fileListUserCertificate = newFileList
  1888. },
  1889. //消费凭证
  1890. handleRemoveVoucher(file) {
  1891. const index = this.fileListVoucher.indexOf(file)
  1892. const newFileList = this.fileListVoucher.slice()
  1893. newFileList.splice(index, 1)
  1894. this.fileListVoucher = newFileList
  1895. },
  1896. //承诺视频
  1897. handleRemoveVideo(file) {
  1898. const index = this.fileListVideo.indexOf(file)
  1899. const newFileList = this.fileListVideo.slice()
  1900. newFileList.splice(index, 1)
  1901. this.fileListVideo = newFileList
  1902. },
  1903. //排除相同图片
  1904. preventRepeatCertificate(url) {
  1905. // 排除相同图片
  1906. for (let i = 0, len = this.fileListHandCertificate.length; i < len; i++) {
  1907. if (this.fileListIdCard[i].url === url) {
  1908. return false
  1909. }
  1910. }
  1911. return true
  1912. },
  1913. //排除相同图片
  1914. preventSpecialNameFindCompliance(url) {
  1915. // 排除相同图片
  1916. for (let i = 0, len = this.nameFindCompliance.length; i < len; i++) {
  1917. if (this.nameFindCompliance[i].url === url) {
  1918. return false
  1919. }
  1920. }
  1921. return true
  1922. },
  1923. //排除相同图片
  1924. preventSpecialReviewForm(url) {
  1925. // 排除相同图片
  1926. for (let i = 0, len = this.specialReviewForm.length; i < len; i++) {
  1927. if (this.specialReviewForm[i].url === url) {
  1928. return false
  1929. }
  1930. }
  1931. return true
  1932. },
  1933. //排除相同图片
  1934. preventRepeatIdCard(url) {
  1935. // 排除相同图片
  1936. for (let i = 0, len = this.fileListIdCard.length; i < len; i++) {
  1937. if (this.fileListIdCard[i].url === url) {
  1938. return false
  1939. }
  1940. }
  1941. return true
  1942. },
  1943. //排除相同图片
  1944. preventRepeatNumberCard(url) {
  1945. // 排除相同图片
  1946. for (let i = 0, len = this.fileListNumberCard.length; i < len; i++) {
  1947. if (this.fileListNumberCard[i].url === url) {
  1948. return false
  1949. }
  1950. }
  1951. return true
  1952. },
  1953. //排除相同图片
  1954. preventRepeatLetter(url) {
  1955. // 排除相同图片
  1956. for (let i = 0, len = this.fileListLetter.length; i < len; i++) {
  1957. if (this.fileListLetter[i].url === url) {
  1958. return false
  1959. }
  1960. }
  1961. return true
  1962. },
  1963. preventRepeatBusiness(url) {
  1964. // 排除相同图片
  1965. for (let i = 0, len = this.fileListBusiness.length; i < len; i++) {
  1966. if (this.fileListBusiness[i].url === url) {
  1967. return false
  1968. }
  1969. }
  1970. return true
  1971. },
  1972. preventRepeatIntroduction(url) {
  1973. // 排除相同图片
  1974. for (let i = 0, len = this.fileListIntroduction.length; i < len; i++) {
  1975. if (this.fileListIntroduction[i].url === url) {
  1976. return false
  1977. }
  1978. }
  1979. return true
  1980. },
  1981. preventRepeatUserCertificate(url) {
  1982. // 排除相同图片
  1983. for (let i = 0, len = this.fileListUserCertificate.length; i < len; i++) {
  1984. if (this.fileListUserCertificate[i].url === url) {
  1985. return false
  1986. }
  1987. }
  1988. return true
  1989. },
  1990. preventRepeatVoucher(url) {
  1991. // 排除相同图片
  1992. for (let i = 0, len = this.fileListVoucher.length; i < len; i++) {
  1993. if (this.fileListVoucher[i].url === url) {
  1994. return false
  1995. }
  1996. }
  1997. return true
  1998. },
  1999. preventRepeatVideo(url) {
  2000. // 排除相同图片
  2001. for (let i = 0, len = this.fileListVideo.length; i < len; i++) {
  2002. if (this.fileListVideo[i].url === url) {
  2003. return false
  2004. }
  2005. }
  2006. return true
  2007. },
  2008. getBase64(file, callback) {
  2009. return new Promise((resolve) => {
  2010. let reader = new FileReader()
  2011. reader.readAsDataURL(file)
  2012. reader.onload = () => {
  2013. callback(reader.result)
  2014. resolve('成功')
  2015. }
  2016. })
  2017. },
  2018. //点击关闭图片预览
  2019. handleCancel() {//点击关闭图片预览
  2020. this.previewVisible = false;
  2021. },
  2022. handleVideoCancel() {
  2023. this.previewVideo = false;
  2024. },
  2025. //点击查看大图
  2026. async handlePreview(file) {//点击查看大图
  2027. let reader = new FileReader();
  2028. reader.readAsArrayBuffer(file);
  2029. reader.onload = (loadEvent) => {
  2030. let arrayBuffer = loadEvent.target.result;
  2031. this.previewImage = arrayBuffer
  2032. };
  2033. this.previewVisible = true;
  2034. if (!file.url && !file.preview) {
  2035. file.preview = await this.getBase64(file.originFileObj);
  2036. }
  2037. this.previewImage = file.url || file.preview;
  2038. console.log(this.previewImage)
  2039. this.previewVisible = true;
  2040. },
  2041. //点击查看视频大图
  2042. async handlePreviewVideo(file) {//点击查看大图
  2043. if (!file.url && !file.preview) {
  2044. file.preview = await this.getBase64(file.originFileObj);
  2045. }
  2046. this.previewImage = file.url || file.preview;
  2047. this.previewVideo = true;
  2048. },
  2049. //提交申请
  2050. handleUpload() {
  2051. //材料不全有特审
  2052. if (this.model.materialLabel == '0') {
  2053. if (this.specialReviewForm.length == 0 || !this.specialReviewForm[0].urlBase) {
  2054. this.$warning({
  2055. title: '提示',
  2056. content: '材料不全请上特审单',
  2057. })
  2058. return;
  2059. }
  2060. }
  2061. //系统实名制截图
  2062. if ((this.nameFindCompliance.length == 0 || !this.nameFindCompliance[0].urlBase) && this.nameFindComplianceRemark.length == 0) {
  2063. this.$warning({
  2064. title: '提示',
  2065. content: '请上传系统实名制截图,如没有截图则填写备注信息',
  2066. })
  2067. return
  2068. }
  2069. // 消费凭证:|| this.fileListVoucher.length == 0 || !this.fileListVoucher[0].urlBase
  2070. if (this.model.materialLabel == '1' && (this.fileListIdCard.length == 0 || !this.fileListIdCard[0].urlBase ||
  2071. this.fileListHandCertificate.length == 0 || !this.fileListHandCertificate[0].urlBase || this.fileListNumberCard.length == 0
  2072. || !this.fileListNumberCard[0].urlBase
  2073. || this.fileListLetter.length == 0 || !this.fileListLetter[0].urlBase)) {
  2074. this.$warning({
  2075. title: '提示',
  2076. content: '无特审,请上传全部材料',
  2077. })
  2078. return
  2079. }
  2080. if (this.batchImproves){
  2081. let formData = {
  2082. infoIds: this.ids,
  2083. idCard: this.urlBaseJoin(this.fileListIdCard, "url"),
  2084. handCertificate: this.urlBaseJoin(this.fileListHandCertificate, "url"),
  2085. numberCard: this.urlBaseJoin(this.fileListNumberCard, "url"),
  2086. fraudPrevention: this.urlBaseJoin(this.fileListLetter, "url"),
  2087. businessLicense: this.urlBaseJoin(this.fileListBusiness, "url"),
  2088. letterIntroduction: this.urlBaseJoin(this.fileListIntroduction, "url"),
  2089. userCertificate: this.urlBaseJoin(this.fileListUserCertificate, "url"),
  2090. consumptionVoucher: this.urlBaseJoin(this.fileListVoucher, "url"),
  2091. commitmentVideo: this.urlBaseJoin(this.fileListVideo, "url"),
  2092. nameFindCompliance: this.urlBaseJoin(this.nameFindCompliance, "url"),
  2093. nameFindComplianceRemark: this.nameFindComplianceRemark,
  2094. specialReviewForm: this.urlBaseJoin(this.specialReviewForm, "url"),
  2095. };
  2096. //基础信息
  2097. for (var i in this.model) {
  2098. let modelElement = this.model[i];
  2099. formData[i] = modelElement;
  2100. }
  2101. this.uploading = true;
  2102. httpAction(this.url.batchEditInfo, formData, "POST")
  2103. .then((res) => {
  2104. if (res.success) {
  2105. this.uploading = false;
  2106. this.$message.success("提交成功");
  2107. this.$router.go(-1);
  2108. this.closeCurrent();
  2109. } else {
  2110. this.uploading = false;
  2111. this.$error({
  2112. title: '提示',
  2113. content: res.message,
  2114. })
  2115. }
  2116. }).finally(() => {
  2117. this.uploading = false;
  2118. })
  2119. }else {
  2120. let formData = {
  2121. infoId: this.infoId,
  2122. idCard: this.urlBaseJoin(this.fileListIdCard, "url"),
  2123. handCertificate: this.urlBaseJoin(this.fileListHandCertificate, "url"),
  2124. numberCard: this.urlBaseJoin(this.fileListNumberCard, "url"),
  2125. fraudPrevention: this.urlBaseJoin(this.fileListLetter, "url"),
  2126. businessLicense: this.urlBaseJoin(this.fileListBusiness, "url"),
  2127. letterIntroduction: this.urlBaseJoin(this.fileListIntroduction, "url"),
  2128. userCertificate: this.urlBaseJoin(this.fileListUserCertificate, "url"),
  2129. consumptionVoucher: this.urlBaseJoin(this.fileListVoucher, "url"),
  2130. commitmentVideo: this.urlBaseJoin(this.fileListVideo, "url"),
  2131. nameFindCompliance: this.urlBaseJoin(this.nameFindCompliance, "url"),
  2132. nameFindComplianceRemark: this.nameFindComplianceRemark,
  2133. specialReviewForm: this.urlBaseJoin(this.specialReviewForm, "url"),
  2134. };
  2135. //基础信息
  2136. for (var i in this.model) {
  2137. let modelElement = this.model[i];
  2138. formData[i] = modelElement;
  2139. }
  2140. this.uploading = true;
  2141. httpAction(this.url.editInfo, formData, "POST")
  2142. .then((res) => {
  2143. if (res.success) {
  2144. this.uploading = false;
  2145. this.$message.success("提交成功");
  2146. this.$router.go(-1);
  2147. this.closeCurrent();
  2148. } else {
  2149. this.uploading = false;
  2150. this.$error({
  2151. title: '提示',
  2152. content: res.message,
  2153. })
  2154. }
  2155. }).finally(() => {
  2156. this.uploading = false;
  2157. })
  2158. }
  2159. },
  2160. urlBaseJoin(dataArray, name) {
  2161. let newDataArr = [];
  2162. for (var i in dataArray) {
  2163. let dataArrayElementElement = dataArray[i][name];
  2164. newDataArr.push(dataArrayElementElement);
  2165. }
  2166. return newDataArr.toString();
  2167. },
  2168. //用户选择点击事件
  2169. changeUserLable() {
  2170. /* //身份证正反面
  2171. this.cfileListIdCard = []
  2172. //手持证件照片
  2173. this.fileListHandCertificate= []
  2174. //号卡照片
  2175. this.fileListNumberCard = []
  2176. //防诈骗承诺涵
  2177. this.fileListLetter = []
  2178. //营业执照副本
  2179. this.fileListBusiness = []
  2180. //介绍信
  2181. this.fileListIntroduction = []
  2182. //使用人证件
  2183. this.fileListUserCertificate= []
  2184. //消费凭证
  2185. this.fileListVoucher = []
  2186. //承诺视频
  2187. this.fileListVideo = []*/
  2188. },
  2189. //提交特殊申请
  2190. applySpecial() {
  2191. }
  2192. }
  2193. }
  2194. </script>
  2195. <style lang="less">
  2196. #common-video {
  2197. position: relative;
  2198. .video-box {
  2199. box-sizing: border-box;
  2200. border: 0;
  2201. display: block;
  2202. width: 470px;
  2203. height: 500px;
  2204. outline: none !important;
  2205. }
  2206. .isShow {
  2207. //进度条
  2208. video::-webkit-media-controls-timeline {
  2209. display: none;
  2210. }
  2211. }
  2212. video::-webkit-media-controls-play-button {
  2213. visibility: hidden;
  2214. }
  2215. .operate-btn {
  2216. display: block;
  2217. width: 60px;
  2218. height: 60px;
  2219. position: absolute;
  2220. top: calc(50% - 30px);
  2221. left: calc(50% - 30px);
  2222. }
  2223. .operate-btn:hover {
  2224. opacity: 0.8;
  2225. }
  2226. .fade-out {
  2227. opacity: 0;
  2228. }
  2229. }
  2230. .thumb-example {
  2231. width: 864px;
  2232. margin-top: 20px;
  2233. // background: #000;
  2234. }
  2235. .swiper-slide {
  2236. background-size: cover;
  2237. background-position: center;
  2238. }
  2239. .gallery-top {
  2240. // height: 80% !important;
  2241. /*height: 600px;*/
  2242. width: 100%;
  2243. left: 10%;
  2244. margin-bottom: 30px
  2245. }
  2246. .gallery-thumbs {
  2247. height: 20% !important;
  2248. box-sizing: border-box;
  2249. padding: 10px 0px;
  2250. /* width: 864px;*/
  2251. margin-left: 2px;
  2252. .swiper-button-next {
  2253. right: 0px;
  2254. }
  2255. .swiper-button-prev {
  2256. left: 0px;
  2257. }
  2258. .swiper-button-next,
  2259. .swiper-button-prev {
  2260. background: #fff;
  2261. width: 45px;
  2262. text-align: center;
  2263. height: 101px;
  2264. top: 26%;
  2265. div {
  2266. margin-top: 30px;
  2267. background: rgb(207, 205, 205);
  2268. height: 45px;
  2269. border-radius: 50%;
  2270. img {
  2271. margin: 7px 0 0 2px;
  2272. width: 30px;
  2273. }
  2274. }
  2275. }
  2276. .swiper-button-next:hover div {
  2277. background: rgb(189, 186, 186);
  2278. }
  2279. .swiper-button-prev:hover div {
  2280. background: rgb(189, 186, 186);
  2281. }
  2282. }
  2283. .gallery-thumbs .swiper-slide {
  2284. width: 20%;
  2285. height: 80px;
  2286. // opacity: 0.4;
  2287. }
  2288. .gallery-thumbs .swiper-slide-active {
  2289. border: 2px solid red;
  2290. }
  2291. .markdown ul > li {
  2292. color: #000000d9;
  2293. font-size: 15px;
  2294. line-height: 3;
  2295. margin-left: 20px;
  2296. padding-left: 4px;
  2297. list-style-type: circle;
  2298. }
  2299. </style>