merchant-establish.html 46 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>首页-商户创建-创业帮</title>
  6. <meta name="keywords" content="首页-商户创建-创业帮">
  7. <meta name="description" content="首页-商户创建-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="首页-商户创建-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/crop.css">
  16. <link rel="stylesheet" href="./static/css/main.css">
  17. </head>
  18. <body class="pt0" style="padding-top:0;">
  19. <div class="merchant_sign" id="app" ref="container" v-cloak>
  20. <van-nav-bar left-arrow title="商户创建" @click-left="gostorage" right-text="暂存" @click-right="rightclick" v-if="toptitleisshow">
  21. <template #left>
  22. <van-icon name="arrow-left"> </van-icon>
  23. </template>
  24. </van-nav-bar>
  25. <div class="merchant-creat">
  26. <div class="establishpanel bgcfff">
  27. <div class="step">
  28. <van-steps :active="active" active-color="#333">
  29. <van-step>
  30. <template #active-icon>
  31. <div class="activeicon"></div>
  32. </template>
  33. <template #finish-icon>
  34. <div class="activeicon"></div>
  35. </template>
  36. <template #inactive-icon>
  37. <div class="unactiveicon"></div>
  38. </template><span class="steptext l f12">商户创建</span>
  39. </van-step>
  40. <van-step>
  41. <template #active-icon>
  42. <div class="activeicon"></div>
  43. </template>
  44. <template #inactive-icon>
  45. <div class="unactiveicon"></div>
  46. </template>
  47. <template #finish-icon>
  48. <div class="activeicon"></div>
  49. </template><span class="steptext f12">门店信息完善 </span>
  50. </van-step>
  51. <van-step>
  52. <template #active-icon>
  53. <div class="activeicon"></div>
  54. </template>
  55. <template #inactive-icon>
  56. <div class="unactiveicon"></div>
  57. </template>
  58. <template #finish-icon>
  59. <div class="activeicon"></div>
  60. </template><span class="steptext f12">身份信息完善 </span>
  61. </van-step>
  62. <van-step>
  63. <template #active-icon>
  64. <div class="activeicon"></div>
  65. </template>
  66. <template #inactive-icon>
  67. <div class="unactiveicon"></div>
  68. </template>
  69. <template #finish-icon>
  70. <div class="activeicon"></div>
  71. </template><span class="steptext r f12">结算卡绑定 </span>
  72. </van-step>
  73. </van-steps>
  74. </div>
  75. </div>
  76. <div v-if="active === -1" v-cloak>
  77. <div class="tc f14 c333 tips">上传商户个人或企业营业执照</div>
  78. <div class="firimg" @click="getBusinessLicense(1)"><img :src="reg.LicenseCopy === '' ? './static/images/sign-photo1.png' : showHost + reg.LicenseCopy" alt=""></div>
  79. <div class="tc f12 c999 btips">图片大小限制为2M</div>
  80. <div class="changebtn bgcfff bc333">
  81. <van-button type="primary" block round :disabled="reg.LicenseCopy === ''" color="#FFD500" @click="firNextBtn">下一步</van-button>
  82. </div>
  83. </div>
  84. <div v-if="active === 0" v-cloak>
  85. <div class="fielditem">
  86. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 商户名称</span></div>
  87. <div class="field">
  88. <van-field class="mb12" v-model="reg.CertMerchantName" placeholder="请输入营业执照商户名称"></van-field>
  89. </div>
  90. </div>
  91. <div class="fielditem">
  92. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 商户信用代码</span></div>
  93. <div class="field">
  94. <van-field class="mb12" v-model="reg.LicenseNumber" placeholder="请输入营业执照商户信用代码"></van-field>
  95. </div>
  96. </div>
  97. <div class="fielditem">
  98. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 主体类型</span></div>
  99. <div class="field">
  100. <van-field class="mb12" v-model="SubjectType" readonly placeholder="请选择" @click="typeisshow(1)" right-icon="arrow-down"></van-field>
  101. </div>
  102. </div>
  103. <div class="fielditem">
  104. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 商户名称简写</span></div>
  105. <div class="field">
  106. <van-field class="mb12" v-model="reg.MerchantShortname" placeholder="请输入"></van-field>
  107. </div>
  108. </div>
  109. <div class="fielditem">
  110. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 商户电话</span></div>
  111. <div class="field">
  112. <van-field class="mb12" v-model="reg.ServicePhone" type="number" placeholder="请输入客服号码"></van-field>
  113. </div>
  114. </div>
  115. <div class="fielditem">
  116. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6 mr12"> 结算规则信息</span><span class="c999 f12">费率 0.6%,入账周期 T+1</span></div>
  117. <div class="field">
  118. <van-field class="mb12" v-model="QualificationType" readonly placeholder="请选择" @click="typeisshow(2)" right-icon="arrow-down"></van-field>
  119. </div>
  120. </div>
  121. <div class="fielditem">
  122. <div class="f14 fieldtitle"><span class="c333 mb6"> 特殊资质</span></div>
  123. <div class="field">
  124. <div class="c999 f12">注:特殊行业需要提供特殊行业资质证明(如:餐饮需提供食品经营许可证、服务许可证 )</div>
  125. <van-uploader class="mt16" readonly v-model="Qualifications" :max-count="3" v-if="isspqual === 1 ? true:false" @click-upload="uploadimg(5)"></van-uploader>
  126. </div>
  127. </div>
  128. <div class="fieldbtn df bc333">
  129. <van-button class="mr12 onbtn" type="primary" block round @click="firOnBtn">上一步</van-button>
  130. <van-button type="primary" block round color="#FFD500" @click="firNextBtn">下一步</van-button>
  131. </div>
  132. </div>
  133. <div v-if="active === 1" v-cloak>
  134. <div class="fielditem">
  135. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 门店名称</span></div>
  136. <div class="field">
  137. <van-field class="mb12" v-model="reg.BizStoreName" placeholder="请输入门店名称"></van-field>
  138. </div>
  139. </div>
  140. <div class="fielditem">
  141. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 门店所属区域</span></div>
  142. <div class="field df">
  143. <van-field v-model="reg.BizAddressCode" clickable name="area" readonly placeholder="请选择" right-icon="arrow-down" @click="showArea = true"></van-field>
  144. <van-popup v-model="showArea" position="bottom">
  145. <van-area :area-list="areaList" @confirm="areaonConfirm" @cancel="showArea = false"></van-area>
  146. </van-popup>
  147. </div>
  148. </div>
  149. <div class="fielditem">
  150. <div class="f14 fieldtitle df dfb">
  151. <div><span class="spcolor">*</span><span class="c333 mb6"> 门店地址</span></div>
  152. </div>
  153. <div class="field df">
  154. <van-field v-model="reg.BizStoreAddress" type="textarea" placeholder="请输入详细地址"></van-field>
  155. </div>
  156. </div>
  157. <div class="fielditem">
  158. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 门头照片</span><span class="f12 c999">(上传1张图片大小限制为2M)</span></div>
  159. <div class="field df">
  160. <van-uploader class="mt16" readonly v-model="StoreEntrancePic" :max-count="1" @click-upload="uploadimg(6)"></van-uploader>
  161. </div>
  162. </div>
  163. <div class="fielditem">
  164. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 环境照片</span><span class="f12 c999">(上传1张图片大小限制为2M)</span></div>
  165. <div class="field df">
  166. <van-uploader class="mt16" readonly v-model="IndoorPic" :max-count="1" @click-upload="uploadimg(7)"></van-uploader>
  167. </div>
  168. </div>
  169. <div class="fieldbtn df bc333">
  170. <van-button class="mr12 onbtn" type="primary" block round @click="firOnBtn">上一步</van-button>
  171. <van-button type="primary" block round color="#FFD500" @click="firNextBtn">下一步</van-button>
  172. </div>
  173. </div>
  174. <div v-if="active === 2" v-cloak>
  175. <div class="tc f14 c333 tips">请上传身份证人像面</div>
  176. <div class="firimg" @click="getBusinessLicense(3)"><img :src="reg.IdCardCopy === '' ? './static/images/sign-photo2.png' : showHost + reg.IdCardCopy" alt=""></div>
  177. <div class="tc f14 c333 tips">请上传身份证国徽面</div>
  178. <div class="firimg" @click="getBusinessLicense(4)"><img :src="reg.IdCardNational === '' ? './static/images/sign-photo3.png' : showHost + reg.IdCardNational" alt=""></div>
  179. <div class="fielditem">
  180. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 真实姓名</span></div>
  181. <div class="field">
  182. <van-field class="mb12" v-model="reg.CertLegalPerson" placeholder="请输入真实姓名"></van-field>
  183. </div>
  184. </div>
  185. <div class="fielditem">
  186. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 身份证号码</span></div>
  187. <div class="field">
  188. <van-field class="mb12" v-model="reg.IdCardNumber" type="number" placeholder="请输入身份证号码"></van-field>
  189. </div>
  190. </div>
  191. <div class="fielditem">
  192. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 身份证有效期</span></div>
  193. <div class="field df cm">
  194. <van-field v-model="begindate" placeholder="请选择" @click="openDatePage('start')" readonly right-icon="./static/images/sign-calendar.png"></van-field>
  195. <div class="pr6 pl6">—</div>
  196. <van-field v-model="enddate" placeholder="请选择" @click="openDatePage('end')" readonly right-icon="./static/images/sign-calendar.png"></van-field>
  197. </div>
  198. </div>
  199. <div class="fielditem">
  200. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 手机号码</span></div>
  201. <div class="field">
  202. <van-field class="mb12" v-model="reg.MobilePhone" type="number" placeholder="请输入手机号码"></van-field>
  203. </div>
  204. </div>
  205. <div class="fielditem">
  206. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 电子邮箱</span></div>
  207. <div class="field">
  208. <van-field class="mb12" v-model="reg.ContactEmail" placeholder="若无邮箱账号,请填写“手机号码@126.com”"></van-field>
  209. </div>
  210. </div>
  211. <div class="fielditem">
  212. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 支付宝账号</span></div>
  213. <div class="field">
  214. <van-field class="mb12" v-model="reg.AlipayAccount" placeholder="请输入正确支付宝账号"></van-field>
  215. </div>
  216. </div>
  217. <div class="fieldbtn df bc333">
  218. <van-button class="mr12 onbtn" type="primary" block round @click="firOnBtn">上一步</van-button>
  219. <van-button type="primary" block round color="#FFD500" @click="firNextBtn">下一步</van-button>
  220. </div>
  221. </div>
  222. <div v-if="active === 3" v-cloak>
  223. <div class="fielditem">
  224. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6 mr12"> 开户名称</span><span class="c999 f12">(个人填写法人名称、企业填写对公账户名称)</span></div>
  225. <div class="field">
  226. <van-field class="mb12" v-model="reg.AccountName" placeholder="请输入开户名称"></van-field>
  227. </div>
  228. </div>
  229. <div class="fielditem">
  230. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 账户类型</span></div>
  231. <div class="field">
  232. <van-field class="mb12" v-model="BankAccountType" placeholder="请选择" readonly @click="typeisshow(4)" right-icon="arrow-down"></van-field>
  233. </div>
  234. </div>
  235. <div class="fielditem">
  236. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 银行卡号</span></div>
  237. <div class="field">
  238. <van-field class="mb12" v-model="reg.AccountNumber" type="number" placeholder="请输入您的银行卡号"></van-field>
  239. </div>
  240. </div>
  241. <div class="fielditem">
  242. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 开户行</span></div>
  243. <div class="field">
  244. <van-field class="mb12" v-model="BankType" placeholder="请选择" readonly @click="typeisshow(5)" right-icon="arrow-down"></van-field>
  245. </div>
  246. </div>
  247. <div class="fielditem">
  248. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 开户地区</span></div>
  249. <div class="field df">
  250. <van-field v-model="reg.BankAddressCode" clickable name="area" readonly placeholder="请选择" right-icon="arrow-down" @click="AccountshowArea = true"></van-field>
  251. <van-popup v-model="AccountshowArea" position="bottom">
  252. <van-area :area-list="areaList" @confirm="AccountareaonConfirm" @cancel="AccountshowArea = false"></van-area>
  253. </van-popup>
  254. </div>
  255. </div>
  256. <div class="fielditem">
  257. <div class="f14 fieldtitle"><span class="spcolor">*</span><span class="c333 mb6"> 开户行全称</span></div>
  258. <div class="field">
  259. <van-field class="mb12" v-model="Bankdetailname" placeholder="模糊搜索"></van-field>
  260. <van-field class="mb12" v-model="reg.BankName" placeholder="请选择银行卡开户行全称" readonly right-icon="arrow-down" @click="BankNameflagfn"></van-field>
  261. <van-popup v-model="BankNameflag" position="bottom">
  262. <van-picker title="开户行全称" show-toolbar :columns="BankNamelist" @confirm="banknamefn" @cancel="BankNameflag = false"></van-picker>
  263. </van-popup>
  264. </div>
  265. </div>
  266. <div class="fieldbtn df bc333">
  267. <van-button class="mr12 onbtn" type="primary" block round @click="firOnBtn">上一步</van-button>
  268. <van-button type="primary" block round color="#FFD500" @click="submit">提交进件</van-button>
  269. </div>
  270. </div>
  271. </div>
  272. <input type="file" accept="image/*" id="upload" style="display:none;">
  273. <input type="file" accept="image/*" id="upload2" style="display:none;">
  274. <input type="file" accept="image/*" id="upload3" style="display:none;">
  275. <van-dialog style="border-radius:16px;" close-on-click-overlay width="300" v-model="storageisshow" title="是否保存此次操作为暂存?" message="可在暂存箱重新编辑操作" confirm-button-text="确认暂存" cancel-button-text="退出" show-cancel-button @confirm="surestorage" @cancel="goback"> </van-dialog>
  276. <van-calendar v-model="calendarshow" type="range" :show-confirm="false" @confirm="calendarconfirm"></van-calendar>
  277. <van-calendar v-model="IdCardcalendarshow" type="range" :min-date="mindate" :max-date="maxdate" :show-confirm="false" @confirm="IdCardcalendarconfirm"></van-calendar>
  278. <van-popup v-model="pickerisshow" position="bottom">
  279. <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="mindate" @confirm="dateConfirm" :formatter="formatter" @cancel="pickerisshow = false" :max-date="maxdate"></van-datetime-picker>
  280. </van-popup>
  281. <van-popup v-model="choseType" position="bottom">
  282. <van-picker :title="choseTypetitle" show-toolbar :columns="typecolumns" @confirm="choseTypeonConfirm" @cancel="choseType = false"></van-picker>
  283. </van-popup>
  284. </div>
  285. <script src="./static/js/clipboard.min.js"></script>
  286. <script src="./static/js/klm-vv.min.js"></script>
  287. <script src="./static/js/appfunc.min.js"></script>
  288. <script src="./static/js/klm-axios-config.js"></script>
  289. <script src="./static/js/publicfn.js"></script>
  290. <script src="./static/js/exif.js"></script>
  291. <script src="./static/js/transformation-matrix.js"></script>
  292. <script src="./static/js/prefix-umd.js"></script>
  293. <script src="./static/js/index.js"></script>
  294. <script src="./static/js/arealist.js"></script>
  295. <script>
  296. //上回后回调方法,用于调用缩放、裁切、旋转功能
  297. function AppUpload(imgpath) {
  298. setTimeout(function () {
  299. if((app.imgtype === 3) || (app.imgtype === 4) ){
  300. PublicLib.WapCropForApp(600, 380, 'upload', imgpath, 1);
  301. } else if(app.imgtype === 1){
  302. PublicLib.WapCropForApp(900, 1300, 'upload2', imgpath, 1);
  303. // 添加本地上传图片方法
  304. } else {
  305. PublicLib.WapCropForApp(500, 500, 'upload3', imgpath, 1);
  306. }
  307. }, 300);
  308. };
  309. //裁切结束后回调方法
  310. function ShowPhoto(url) {
  311. //获取最终的图片地址
  312. app.uploadheadhpotofn(url);
  313. };
  314. //初始化crop
  315. //- if (isWeb) {
  316. //- PublicLib.WapCrop(500, 500, 'upload', 1);
  317. //- PublicLib.WapCrop(500, 253, 'upload2', 1);
  318. //- };
  319. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  320. // 可以通过下面的方式手动注册
  321. Vue.use(vant.Lazyload);
  322. // 在 #app 标签下渲染一个按钮组件
  323. let app = new Vue({
  324. el: '#app',
  325. data() {
  326. return {
  327. //- 银行卡列表
  328. BankNamelist:[],
  329. BankNameflag:false,
  330. datetype:'',
  331. pickerisshow:false,
  332. begindate:'',
  333. enddate:'',
  334. currentDate:new Date(),
  335. mindate:new Date(1949,10,01),
  336. maxdate:new Date(2050,10,01),
  337. width:1000,
  338. height:506,
  339. //- 开户行地区
  340. AccountshowArea:false,
  341. //- 地区选择器
  342. showArea:false,
  343. //- 时间选择器
  344. calendarshow:false,
  345. //- 身份证有效期选择器
  346. IdCardcalendarshow:false,
  347. //- 类型选择器
  348. choseType:false,
  349. //- 类型选择器标题
  350. choseTypetitle:'',
  351. //- 暂存弹窗
  352. storageisshow:false,
  353. //- 顶部是否显示
  354. toptitleisshow:false,
  355. //- 营业期限是否为长期
  356. calendarchecked:true,
  357. active:-1,
  358. reg:{
  359. //- 支付宝账号
  360. AlipayAccount:'',
  361. //- 营业执照
  362. LicenseCopy:'',
  363. //- 商户名称
  364. CertMerchantName:'',
  365. //- 商户信用代码
  366. LicenseNumber:'',
  367. //- 商户营业期限
  368. BusinessTerm:'',
  369. //- 主体类型
  370. SubjectType:'',
  371. //- 用户名称简写
  372. MerchantShortname:'',
  373. //- 商户电话
  374. ServicePhone: '',
  375. //- 所属行业
  376. QualificationType:'',
  377. //- 特殊资质
  378. SpecialQualification:'',
  379. //- 商户授权函
  380. MerchantAuthorizationLetter:'',
  381. //- 门店名称
  382. BizStoreName:'',
  383. //- 门店区域
  384. BizAddressCode:'',
  385. //- 门店地址
  386. BizStoreAddress:'',
  387. //- 身份证正面
  388. IdCardCopy:'',
  389. //- 身份证反面
  390. IdCardNational:'',
  391. //- 真实姓名
  392. CertLegalPerson:'',
  393. //- 身份证号码
  394. IdCardNumber:'',
  395. //- 身份证有效期开始
  396. CardPeriodBegin:'',
  397. //- 身份证有效期结束
  398. CardPeriodEnd:'',
  399. //- 手机号码
  400. MobilePhone:'',
  401. //- 电子邮箱
  402. ContactEmail:'',
  403. //- 开户名称
  404. AccountName:'',
  405. //- 账户类型
  406. BankAccountType:'',
  407. //- 银行卡号
  408. AccountNumber:'',
  409. //- 开户行
  410. AccountBank:'',
  411. //- 开户行全称
  412. BankName:'',
  413. //- 开户地区
  414. BankAddressCode:'',
  415. StoreEntrancePic:'',
  416. IndoorPic:'',
  417. },
  418. SubjectType:'',
  419. QualificationType:'',
  420. //- SpecialQualification:'',
  421. BankAccountType:'',
  422. //- 时间区间
  423. IdCardvalidity:'',
  424. //- 银行类型
  425. BankType:'',
  426. //- 银行详细名字
  427. Bankdetailname:'',
  428. //- 选择器选择项(动态生成)
  429. typecolumns: [
  430. ],
  431. typeidentification:0,
  432. imgtype:0,
  433. storageId:'',
  434. areaList,
  435. isspqual:1,
  436. //- 特殊资质照片组
  437. Qualifications:[],
  438. //- 门头照片组
  439. StoreEntrancePic:[],
  440. //-环境照片组
  441. IndoorPic:[],
  442. SettlementId:'',
  443. flag:true,
  444. };
  445. },
  446. created(){
  447. this.toptitleisshow = toptitleisshow;
  448. const storageId = PublicLib.getCookieInfo('storageId');
  449. if(storageId === undefined){
  450. storageId = '';
  451. };
  452. //- 获取暂存箱中的数据
  453. if(storageId !== ''){
  454. this.getstoragedata(storageId);
  455. };
  456. //- 清除暂存ID
  457. PublicLib.putCookieInfo('storageId', '');
  458. },
  459. methods: {
  460. async BankNameflagfn(){
  461. this.BankNameflag = true;
  462. //- 发起请求
  463. res = await getRequest('api/v1/openbanktable/list?t='+Math.random(6),JSON.stringify({PageSize:50,PageNum:1,SearchKey:this.Bankdetailname}));
  464. if(res.status !== '1') return tips(user.info);
  465. //- console.log(res)
  466. let arr = [];
  467. res.data.forEach(item=>{
  468. arr.push(item.BankName);
  469. })
  470. this.BankNamelist = arr;
  471. },
  472. banknamefn(data){
  473. this.BankNameflag = false;
  474. this.reg.BankName = data;
  475. },
  476. //- 打开时间选择器
  477. openDatePage(type){
  478. this.datetype = type;
  479. this.pickerisshow = true;
  480. },
  481. //- 时间区间选择器确认按钮
  482. dateConfirm(a){
  483. if(this.datetype === 'start') {
  484. this.begindate = this.formatter('year',new Date(a).getFullYear()) + this.formatter('month',new Date(a).getMonth() + 1) + this.formatter('day',new Date(a).getDate())
  485. this.reg.CardPeriodBegin = this.formatpagedate(a);
  486. }else {
  487. this.enddate = this.formatter('year',new Date(a).getFullYear()) + this.formatter('month',new Date(a).getMonth() + 1) + this.formatter('day',new Date(a).getDate())
  488. this.reg.CardPeriodEnd = this.formatpagedate(a);
  489. }
  490. this.pickerisshow = false;
  491. },
  492. async getstoragedata(Id){
  493. this.storageId = Id;
  494. const res = await postRequest('api/v1/merchantaddinfo/detail?t='+Math.random(6),JSON.stringify({Id}));
  495. if(res.status !== '1') return tips('获取进件商户失败,请重试!');
  496. this.reg = res.data;
  497. this.BankType = res.data.AccountBank;
  498. this.reg.CertLegalPerson = res.data.ContactName;
  499. this.reg.IdCardNumber = res.data.ContactIdNumber;
  500. this.SubjectType = res.data.SubjectTypeName;
  501. this.QualificationType = res.data.QualificationTypeName;
  502. this.BankAccountType = res.data.BankAccountTypeName;
  503. if(res.data.StoreEntrancePic !== ''){
  504. this.StoreEntrancePic.push({url:showHost + res.data.StoreEntrancePic});
  505. };
  506. if(res.data.IndoorPic !== ''){
  507. this.IndoorPic.push({url:showHost + res.data.IndoorPic});
  508. };
  509. if(res.data.Qualifications !== ''){
  510. res.data.Qualifications.split(',').forEach(item=>{
  511. this.Qualifications.push({url:item});
  512. });
  513. this.isspqual = 1;
  514. }else{
  515. this.isspqual = 0;
  516. }
  517. if(!Boolean(res.data.CardPeriodBegin)) {
  518. this.begindate = this.formatter('year',new Date().getFullYear()) + this.formatter('month',new Date().getMonth() + 1) + this.formatter('day',new Date().getDate())
  519. }else{
  520. this.reg.CardPeriodBegin = this.formatpagedate(new Date(this.changedata(res.data.CardPeriodBegin)));
  521. this.begindate = this.formatter('year',new Date(this.changedata(res.data.CardPeriodBegin)).getFullYear()) + this.formatter('month',new Date(this.changedata(res.data.CardPeriodBegin)).getMonth() + 1) + this.formatter('day',new Date(this.changedata(res.data.CardPeriodBegin)).getDate())
  522. };
  523. if(!Boolean(res.data.CardPeriodEnd)) {
  524. this.enddate = this.formatter('year',new Date().getFullYear()) + this.formatter('month',new Date().getMonth() + 1) + this.formatter('day',new Date().getDate())
  525. }else{
  526. this.reg.CardPeriodEnd = this.formatpagedate(new Date(this.changedata(res.data.CardPeriodEnd)));
  527. this.enddate = this.formatter('year',new Date(this.changedata(res.data.CardPeriodEnd)).getFullYear()) + this.formatter('month',new Date(this.changedata(res.data.CardPeriodEnd)).getMonth() + 1) + this.formatter('day',new Date(this.changedata(res.data.CardPeriodEnd)).getDate())
  528. };
  529. this.reg.QualificationType = res.data.QualificationType;
  530. this.QualificationType = res.data.QualificationType;
  531. this.SettlementId = res.data.SettlementId;
  532. },
  533. //- 转换格式
  534. changedata(str){
  535. let arr = str.split('');
  536. arr.forEach((item,index)=>{
  537. if(item === '-'){
  538. arr[index] = '/'
  539. };
  540. })
  541. return arr.join('');
  542. },
  543. //- 表单校验函数
  544. formcheck(value){
  545. for(const item in value){
  546. if(value[item] === '') {
  547. return item;
  548. };
  549. }
  550. },
  551. //- 正则匹配函数
  552. //- regcheck(str){
  553. //- const reg = /^.\//
  554. //- const regend = /png$/
  555. //- return reg.test(str) && regend.test(str)
  556. //- },
  557. submit(){
  558. console.log(this.formcheck(this.reg));
  559. switch(this.formcheck(this.reg)){
  560. case 'ContactName':
  561. break;
  562. case 'ContactIdNumber':
  563. break;
  564. case 'IdCardName':
  565. break;
  566. case 'Qualifications':
  567. break;
  568. case 'SettlementId':
  569. break;
  570. case 'LicenseCopy':
  571. this.active = -1;
  572. return tips('请上传营业执照');
  573. case 'CertMerchantName':
  574. this.active = 0;
  575. return tips('请输入商户名称');
  576. case 'LicenseNumber':
  577. this.active = 0;
  578. return tips('请输入商户信用代码');
  579. //- case 'BusinessTerm':
  580. //- this.active = 0;
  581. //- return tips('请输入商户营业期限');
  582. case 'SubjectType':
  583. this.active = 0;
  584. return tips('请输入主体类型');
  585. case 'MerchantShortname':
  586. this.active = 0;
  587. return tips('请输入用户名称简写');
  588. case 'ServicePhone':
  589. this.active = 0;
  590. return tips('请输入商户电话');
  591. case 'QualificationType':
  592. this.active = 0;
  593. return tips('请输入结算规则信息');
  594. case 'BizStoreName':
  595. this.active = 1;
  596. return tips('请输入门店名称');
  597. case 'BizAddressCode':
  598. this.active = 1;
  599. return tips('请输入门店区域');
  600. case 'BizStoreAddress':
  601. this.active = 1;
  602. return tips('请输入门店地址');
  603. case 'IdCardCopy':
  604. this.active = 2;
  605. return tips('请上传身份证正面');
  606. case 'IdCardNational':
  607. this.active = 2;
  608. return tips('请上传身份证反面');
  609. case 'CertLegalPerson':
  610. this.active = 2;
  611. return tips('请输入真实姓名');
  612. case 'IdCardNumber':
  613. this.active = 2;
  614. return tips('请输入身份证号码');
  615. case 'IdCardvalidity':
  616. this.active = 2;
  617. return tips('请输入身份证有效期');
  618. case 'MobilePhone':
  619. this.active = 2;
  620. return tips('请输入手机号码');
  621. case 'ContactEmail':
  622. this.active = 2;
  623. return tips('请输入电子邮箱');
  624. case 'AlipayAccount':
  625. this.active = 2;
  626. return tips('请输入正确的支付宝账号');
  627. case 'AccountName':
  628. this.active = 3;
  629. return tips('请输入开户名称');
  630. case 'BankAccountType':
  631. this.active = 3;
  632. return tips('请输入账户类型');
  633. case 'AccountNumber':
  634. this.active = 3;
  635. return tips('请输入银行卡号');
  636. case 'AccountBank':
  637. this.active = 3;
  638. return tips('请输入开户行');
  639. case 'BankAddressCode':
  640. this.active = 3;
  641. return tips('请输入开户地区');
  642. }
  643. if(!verificationCreditCode(this.reg.LicenseNumber)){
  644. this.active = 0;
  645. return tips('社会统一信用代码格式错误')
  646. };
  647. if(!verificationphonenumber(this.reg.ServicePhone)){
  648. this.active = 0;
  649. return tips('商户电话格式错误')
  650. };
  651. if(this.StoreEntrancePic.length < 1){
  652. this.active = 1;
  653. return tips('请上传门头照片')
  654. };
  655. if(this.IndoorPic.length < 1){
  656. this.active = 1;
  657. return tips('请上传环境照片')
  658. };
  659. if(!verificationphonenumber(this.reg.MobilePhone)){
  660. this.active = 2;
  661. return tips('手机号码格式错误')
  662. };
  663. if(!verificationemail(this.reg.ContactEmail)){
  664. this.active = 2;
  665. return tips('电子邮箱格式错误')
  666. };
  667. if(!verificationName(this.reg.CertLegalPerson)){
  668. this.active = 2;
  669. return tips('姓名格式错误')
  670. };
  671. if(!verificationIdCardNumber(this.reg.IdCardNumber)){
  672. this.active = 2;
  673. return tips('身份证号码格式错误')
  674. };
  675. this.submitrequest();
  676. },
  677. //- 提交服务器
  678. async submitrequest(){
  679. //- PublicLib.ShowLoading({Message:'提交资料中'});
  680. const UserId = PublicLib.getCookieInfo('userId');
  681. const res = await postRequest('api/v1/merchantaddinfo/add?t='+Math.random(6),JSON.stringify({
  682. ...this.reg,
  683. //- StoreEntrancePic:this.StoreEntrancePic.length !== 0 ? this.StoreEntrancePic[0].url : '',
  684. //- IndoorPic:this.IndoorPic.length !== 0 ? this.IndoorPic[0].url : '',
  685. ContactName:this.reg.CertLegalPerson,
  686. ContactIdNumber:this.reg.IdCardNumber,
  687. IdCardName:this.reg.CertLegalPerson,
  688. Qualifications:this.sppicformt(this.Qualifications),
  689. Finish:1,
  690. UserId,
  691. Id:this.storageId,
  692. SettlementId:this.SettlementId
  693. }));
  694. if(res){
  695. //- PublicLib.HideLoading();
  696. if(res.status !== '1') return tips(res.info);
  697. tips('资料提交成功!');
  698. this.reg = {
  699. //- 营业执照
  700. LicenseCopy:'',
  701. //- 商户名称
  702. CertMerchantName:'',
  703. //- 商户信用代码
  704. LicenseNumber:'',
  705. //- 商户营业期限
  706. BusinessTerm:'',
  707. //- 主体类型
  708. SubjectType:'',
  709. //- 用户名称简写
  710. MerchantShortname:'',
  711. //- 商户电话
  712. ServicePhone: '',
  713. //- 所属行业
  714. QualificationType:'',
  715. //- 特殊资质
  716. SpecialQualification:'',
  717. //- 商户授权函
  718. MerchantAuthorizationLetter:'',
  719. //- 门店名称
  720. BizStoreName:'',
  721. //- 门店区域
  722. BizAddressCode:'',
  723. //- 门店地址
  724. BizStoreAddress:'',
  725. //- 身份证正面
  726. IdCardCopy:'',
  727. //- 身份证反面
  728. IdCardNational:'',
  729. //- 真实姓名
  730. CertLegalPerson:'',
  731. //- 身份证号码
  732. IdCardNumber:'',
  733. //- 身份证有效期开始
  734. CardPeriodBegin:'',
  735. //- 身份证有效期结束
  736. CardPeriodEnd:'',
  737. //- 手机号码
  738. MobilePhone:'',
  739. //- 电子邮箱
  740. ContactEmail:'',
  741. //- 开户名称
  742. AccountName:'',
  743. //- 账户类型
  744. BankAccountType:'',
  745. //- 银行卡号
  746. AccountNumber:'',
  747. //- 开户行
  748. AccountBank:'',
  749. //- 开户行全称
  750. BankName:'',
  751. //- 开户地区
  752. BankAddressCode:'',
  753. };
  754. this.active = -1;
  755. }
  756. },
  757. //- 特殊图片分隔
  758. sppicformt(arr){
  759. let str = '';
  760. arr.forEach(item=>{
  761. str += item.url + ','
  762. })
  763. return str.substring(0, str.length - 1);
  764. },
  765. //- 选择器选择
  766. choseTypeonConfirm(date){
  767. //- console.log(date)
  768. switch(this.typeidentification){
  769. case 1:
  770. this.reg.SubjectType = date.value;
  771. this.SubjectType = date.text;
  772. break;
  773. case 2:
  774. for(let i =0;i<this.typecolumns.length;i++){
  775. if(this.typecolumns[i].text === date[0]){
  776. const arr = this.typecolumns[i];
  777. for(let j =0;j<arr.children.length;j++){
  778. if(arr.children[j].text === date[1]){
  779. const checkitem = arr.children[j];
  780. this.reg.QualificationType = arr.text + ',' +checkitem.text;
  781. this.QualificationType = arr.text + ',' + checkitem.text;
  782. this.isspqual = checkitem.special;
  783. this.SettlementId = checkitem.value;
  784. break;
  785. }
  786. }
  787. break;
  788. }
  789. }
  790. break;
  791. //- case 3:
  792. //- this.reg.SpecialQualification = date.value;
  793. //- this.SpecialQualification = date.text
  794. //- break;
  795. case 4:
  796. this.reg.BankAccountType = date.value;
  797. this.BankAccountType = date.text
  798. break;
  799. case 5:
  800. this.reg.AccountBank = date.value;
  801. this.BankType = date.text
  802. break;
  803. }
  804. //- 关闭选择器
  805. this.choseType = false;
  806. },
  807. //- 区域选择
  808. areaonConfirm(area){
  809. this.reg.BizAddressCode = area[1].name + ',' + area[2].name
  810. this.showArea = false;
  811. },
  812. //- 开户地区选择
  813. AccountareaonConfirm(area){
  814. //- this.reg.BankAddressCode = area[0].name + ',' + area[1].name + ',' + area[2].name
  815. this.reg.BankAddressCode = area[1].name + ',' + area[2].name
  816. this.AccountshowArea = false;
  817. },
  818. //- 选择器选择逻辑
  819. async typeisshow(type){
  820. this.choseType = true;
  821. let res = [];
  822. switch(type){
  823. case 1:
  824. //- 主体类型列表请求
  825. this.choseTypetitle = '主体类型';
  826. res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:1}));
  827. if(res.status !== '1') return tips('主体类型请求错误,请关闭重试!');
  828. this.typecolumns = res.data;
  829. break;
  830. case 2:
  831. //- 主体类型列表请求
  832. this.choseTypetitle = '结算规则信息'; // 个体户:2 企业:21
  833. if(this.SubjectType === '企业'){
  834. res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:21}));
  835. if(res.status !== '1') return tips('结算规则信息请求错误,请关闭重试!');
  836. if(this.typecolumns.length !== 0 && this.typeidentification === type){
  837. return;
  838. };
  839. this.typecolumns = res.data;
  840. }else{
  841. res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:2}));
  842. if(res.status !== '1') return tips('结算规则信息请求错误,请关闭重试!');
  843. if(this.typecolumns.length !== 0 && this.typeidentification === type){
  844. return;
  845. };
  846. this.typecolumns = res.data;
  847. }
  848. break;
  849. //- case 3:
  850. //- //- 主体类型列表请求
  851. //- this.choseTypetitle = '特殊资质'
  852. //- // 发起请求拿到特殊资质列表
  853. //- break;
  854. case 4:
  855. //- 主体类型列表请求
  856. this.choseTypetitle = '账户类型';
  857. res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:3}));
  858. if(res.status !== '1') return tips('账户类型请求错误,请关闭重试!');
  859. this.typecolumns = res.data;
  860. break;
  861. case 5:
  862. //- 主体类型列表请求
  863. this.choseTypetitle = '开户行';
  864. res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:4}));
  865. if(res.status !== '1') return tips('开户行列表请求错误,请关闭重试!');
  866. this.typecolumns = res.data;
  867. break;
  868. }
  869. this.typeidentification = type;
  870. },
  871. //- 复选框状态改变
  872. calendarcheckedchange(){
  873. if(this.calendarchecked === true){
  874. this.reg.BusinessTerm ='';
  875. }
  876. },
  877. //- 时间选择完成
  878. calendarconfirm(data){
  879. this.reg.BusinessTerm = this.formatpagedate(data[0]) + '-' + this.formatpagedate(data[1]);
  880. //- console.log(this.reg.BusinessTerm);
  881. this.calendarshow = false;
  882. this.calendarchecked = false;
  883. },
  884. //- 身份证有效期函数
  885. IdCardcalendarconfirm(data){
  886. this.IdCardvalidity = this.formatpagedate(data[0]) + '---' + this.formatpagedate(data[1]);
  887. //- 时间需要转格式
  888. this.reg.CardPeriodBegin = this.formatpagedate(data[0]);
  889. this.reg.CardPeriodEnd = this.formatpagedate(data[1]);
  890. this.IdCardcalendarshow = false;
  891. },
  892. //- 年月日时间过滤(当前页面方法)
  893. formatpagedate(date) {
  894. const year = date.getFullYear();
  895. const month = date.getMonth() + 1;
  896. const day = date.getDate();
  897. return formatwechtDate(year,month,day)
  898. },
  899. getBusinessLicense(type){
  900. if(isWeb){
  901. this.imgsize(type);
  902. };
  903. this.imgtype = type;
  904. PublicLib.UploadPhoto({
  905. Quality:1,
  906. PhotoCount:1,
  907. Width:300,
  908. Height:300,
  909. });
  910. },
  911. imgsize(type){
  912. if((type === 3) || (type === 4) ){
  913. PublicLib.WapCrop(600, 380, 'upload', 1);
  914. } else if(type === 1){
  915. PublicLib.WapCrop( 900, 1500, 'upload2', 1);
  916. } else {
  917. PublicLib.WapCrop(500, 500, 'upload3', 1);
  918. }
  919. },
  920. uploadimg(type){
  921. this.getBusinessLicense(type);
  922. },
  923. //- 退出创建
  924. gostorage(){
  925. if(this.active === -1 && this.reg.LicenseCopy === '') {
  926. this.goback();
  927. }else{
  928. this.storageisshow = true;
  929. };
  930. },
  931. //- 退出
  932. goback(){
  933. PublicLib.GoBack({Level:1});
  934. },
  935. //- 确认暂存
  936. async surestorage(flag){
  937. const UserId = PublicLib.getCookieInfo('userId');
  938. const res = await postRequest('api/v1/merchantaddinfo/add?t='+Math.random(6),JSON.stringify({
  939. ...this.reg,
  940. //- StoreEntrancePic:this.StoreEntrancePic.length !== 0 ? this.StoreEntrancePic[0].url : '',
  941. //- IndoorPic:this.IndoorPic.length !== 0 ? this.IndoorPic[0].url : '',
  942. ContactName:this.reg.CertLegalPerson,
  943. ContactIdNumber:this.reg.IdCardNumber,
  944. IdCardName:this.reg.CertLegalPerson,
  945. Qualifications:this.sppicformt(this.Qualifications),
  946. Finish:0,
  947. UserId,
  948. Id:this.storageId,
  949. SettlementId:this.SettlementId
  950. }));
  951. if(res.status !== '1') return tips('暂存失败!')
  952. if(flag === 'stay'){
  953. tips('暂存成功')
  954. }else{
  955. this.goback();
  956. };
  957. },
  958. rightclick(){
  959. //- 暂存流程
  960. if(this.reg.LicenseCopy !== ''){
  961. if(this.flag){
  962. this.flag = false;
  963. this.surestorage('stay');
  964. }else{
  965. tips('已暂存,请勿重复暂存!');
  966. };
  967. }else{
  968. tips('暂无可暂存信息!')
  969. }
  970. //- PublicLib.Goto({Url:'merchant-temporary-storage'});
  971. },
  972. firNextBtn(){
  973. this.active++;
  974. this.flag = true;
  975. },
  976. firOnBtn(){
  977. this.active--;
  978. },
  979. //- 上传图片回调,拿到线上URL
  980. async uploadheadhpotofn(HeadPhoto){
  981. switch(this.imgtype){
  982. case 1:
  983. this.reg.LicenseCopy = HeadPhoto;
  984. break;
  985. case 2:
  986. this.reg.MerchantAuthorizationLetter = HeadPhoto;
  987. break;
  988. case 3:
  989. this.reg.IdCardCopy = HeadPhoto;
  990. break;
  991. case 4:
  992. this.reg.IdCardNational = HeadPhoto;
  993. break;
  994. case 5:
  995. this.Qualifications.push({url:showHost + HeadPhoto});
  996. break;
  997. case 6:
  998. this.StoreEntrancePic.push({url:showHost + HeadPhoto});
  999. this.reg.StoreEntrancePic = HeadPhoto;
  1000. break;
  1001. case 7:
  1002. this.IndoorPic.push({url:showHost + HeadPhoto});
  1003. this.reg.IndoorPic = HeadPhoto;
  1004. break;
  1005. }
  1006. },
  1007. formatter(type, val) {
  1008. if (type === 'year') {
  1009. return val + '年';
  1010. }
  1011. if (type === 'month') {
  1012. return val + '月';
  1013. }
  1014. if (type === 'day') {
  1015. return val + '日';
  1016. }
  1017. return val;
  1018. },
  1019. }
  1020. });
  1021. </script>
  1022. </body>
  1023. </html>