addPay.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <template>
  2. <view class="">
  3. <view class="step">
  4. <uni-steps active-color="#FF6A69" :options="[
  5. {title: '注册账号',url:'./getShop'},
  6. {title: '扫码授权',url:'./qrCode'},
  7. {title: '提交支付资质',url:'./addPay'},
  8. {title: '基础信息',url:'./basics'} ]" :active="2"></uni-steps>
  9. </view>
  10. <view style="height: 130rpx;"></view>
  11. <form @submit="onSubmit">
  12. <view class="content">
  13. <!-- <view class="item flex flex-y-center">
  14. <view class="title-block required">
  15. <text>小程序APPID</text>
  16. </view>
  17. <view class="desc">
  18. <text>{{obj.appid}}</text>
  19. </view>
  20. </view> -->
  21. <view class="item flex flex-y-center">
  22. <view class="title-block required">
  23. <text>主体类型</text>
  24. </view>
  25. <view class="desc ft30 flex-grow-1 box-pack-between" @click="onPrinterStatusChange">
  26. <text></text>
  27. <view class="flex-y-center">
  28. {{codeStatus}}
  29. <text class="iconfont icongengduo"></text>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(1)">
  34. <view class="header-img ft28">
  35. 营业执照照片
  36. <view class="ft22">
  37. (最大1M,暂不限制宽高)
  38. </view>
  39. </view>
  40. <view class="home-img">
  41. <image :src="URL+business_license_photo.src" class="home-img-icon"></image>
  42. </view>
  43. </view>
  44. <view class="item flex flex-y-center">
  45. <view class="title-block required">
  46. <text>注册号/统一社会信用代码</text>
  47. </view>
  48. <view class="desc">
  49. <input type="text" :value="info.license_number" name="license_number" class="input-box"
  50. placeholder="注册号/统一社会信用代码" placeholder-class="desc-placeholder">
  51. </view>
  52. </view>
  53. <view class="item flex flex-y-center">
  54. <view class="title-block required">
  55. <text>商户名称</text>
  56. </view>
  57. <view class="desc">
  58. <input type="text" :value="info.merchant_name" name="merchant_name" class="input-box"
  59. placeholder="请输入商户名称" placeholder-class="desc-placeholder">
  60. </view>
  61. </view>
  62. <view class="item flex flex-y-center">
  63. <view class="title-block required">
  64. <text>商户简称</text>
  65. </view>
  66. <view class="desc">
  67. <input type="text" :value="info.merchant_shortname" name="merchant_shortname" class="input-box"
  68. placeholder="请输入商户简称" placeholder-class="desc-placeholder">
  69. </view>
  70. </view>
  71. <view class="item flex flex-y-center">
  72. <view class="title-block required">
  73. <text>个体户经营者/法人姓名</text>
  74. </view>
  75. <view class="desc">
  76. <input type="text" :value="info.legal_person" name="legal_person" class="input-box"
  77. placeholder="请输入个体户经营者/法人姓名" placeholder-class="desc-placeholder">
  78. </view>
  79. </view>
  80. <view class="item flex flex-y-center">
  81. <view class="title-block required">
  82. <text>法人手机</text>
  83. </view>
  84. <view class="desc">
  85. <input type="text" :value="info.contact_phone" name="contact_phone" class="input-box"
  86. placeholder="请输入法人手机" placeholder-class="desc-placeholder">
  87. </view>
  88. </view>
  89. <view class="item flex flex-y-center">
  90. <view class="title-block required">
  91. <text>法人邮箱</text>
  92. </view>
  93. <view class="desc">
  94. <input type="text" :value="info.contact_email" name="contact_email" class="input-box"
  95. placeholder="请输入法人邮箱" placeholder-class="desc-placeholder">
  96. </view>
  97. </view>
  98. <view class="item flex flex-y-center">
  99. <view class="title-block required">
  100. <text>证件类型</text>
  101. </view>
  102. <view class="desc">
  103. 中国大陆居民-身份证
  104. </view>
  105. </view>
  106. <view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(2)">
  107. <view class="header-img ft28">
  108. 身份证正面(人像)
  109. <view class="ft22">
  110. (最大1M,暂不限制宽高)
  111. </view>
  112. </view>
  113. <view class="home-img">
  114. <image :src="URL+id_card_photo1.src" class="home-img-icon"></image>
  115. </view>
  116. </view>
  117. <view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(3)">
  118. <view class="header-img ft28">
  119. 身份证反面(国徽)
  120. <view class="ft22">
  121. (最大1M,暂不限制宽高)
  122. </view>
  123. </view>
  124. <view class="home-img">
  125. <image :src="URL+id_card_photo2.src" class="home-img-icon"></image>
  126. </view>
  127. </view>
  128. <view class="item flex flex-y-center">
  129. <view class="title-block required">
  130. <text>身份证姓名</text>
  131. </view>
  132. <view class="desc">
  133. <input type="text" :value="info.id_card_name" name="id_card_name" class="input-box"
  134. placeholder="请输入身份证姓名" placeholder-class="desc-placeholder">
  135. </view>
  136. </view>
  137. <view class="item flex flex-y-center">
  138. <view class="title-block required">
  139. <text>身份证号码</text>
  140. </view>
  141. <view class="desc">
  142. <input type="text" :value="info.id_card_number" name="id_card_number" class="input-box"
  143. placeholder="请输入身份证号码" placeholder-class="desc-placeholder">
  144. </view>
  145. </view>
  146. <view class="item flex flex-y-center">
  147. <view class="title-block required">
  148. <text>身份证有效期开始时间</text>
  149. </view>
  150. <view class="desc">
  151. <input type="text" :value="info.card_period_begin" name="card_period_begin" class="input-box"
  152. placeholder="请输入身份证有效期开始时间" placeholder-class="desc-placeholder">
  153. </view>
  154. </view>
  155. <view class="item flex flex-y-center">
  156. <view class="title-block required">
  157. <text>身份证有效期结束时间</text>
  158. </view>
  159. <view class="desc">
  160. <input type="text" :value="info.card_period_end" name="card_period_end" class="input-box"
  161. placeholder="请输入身份证有效期结束时间" placeholder-class="desc-placeholder">
  162. </view>
  163. </view>
  164. <view class="box-pack-between border-b header-version flex-y-center item" @click="uploadFile(4)">
  165. <view class="header-img ft28">
  166. 特殊资质
  167. <view class="ft22">
  168. (最大1M,暂不限制宽高)
  169. </view>
  170. </view>
  171. <view class="home-img">
  172. <image :src="URL+qualifications_photo.src" class="home-img-icon"></image>
  173. </view>
  174. </view>
  175. </view>
  176. <button class="sub-btn" hover-class="none" form-type="submit">
  177. 立即提交
  178. </button>
  179. </form>
  180. </view>
  181. </template>
  182. <script>
  183. export default {
  184. data() {
  185. return {
  186. URL: getApp().globalData.URL,
  187. codeStatus: '个体工商户(营业执照上的主体类型一般为个体户、个体工商户、个体经营)',
  188. // obj: {},
  189. business_license_photo:{},
  190. id_card_photo1:{},
  191. id_card_photo2:{},
  192. qualifications_photo:{},
  193. info:{},
  194. }
  195. },
  196. onLoad(e) {
  197. this.wechat_store();
  198. },
  199. methods: {
  200. uploadFile(type) {
  201. var url = "Wechatstore/upload";
  202. uni.chooseImage({
  203. success: (res) => {
  204. res.tempFilePaths.forEach((v, i) => {
  205. console.log(v)
  206. this.Upload({
  207. url: url,
  208. data: {
  209. url: v,
  210. admin_id: uni.getStorageSync("admin_id"),
  211. }
  212. }).then(r => {
  213. console.log(r, "res")
  214. let res={
  215. pay_media_id:r.pay_media_id,
  216. src:r.src,
  217. url:r.url,
  218. }
  219. type == 1 ? (this.business_license_photo = res) :
  220. type == 2 ? (this.id_card_photo1 = res) :
  221. type == 3 ? (this.id_card_photo2 = res) : (this.qualifications_photo = res);
  222. }).catch({});
  223. })
  224. }
  225. });
  226. },
  227. onPrinterStatusChange() {
  228. let statusArr = ['个体工商户(营业执照上的主体类型一般为个体户、个体工商户、个体经营)',
  229. '企业(营业执照上的主体类型一般为有限公司、有限责任公司)'
  230. ]
  231. uni.showActionSheet({
  232. itemList: statusArr,
  233. success: (r) => {
  234. console.log(r.tapIndex)
  235. this.code_type = r.tapIndex==1?2:4;
  236. this.codeStatus = statusArr[r.tapIndex];
  237. }
  238. })
  239. },
  240. wechat_store() {
  241. this.request({
  242. url: 'Wechatstore/wechat_store',
  243. data: {
  244. admin_id: uni.getStorageSync("admin_id"),
  245. }
  246. }).then(res => {
  247. this.info = res.data;
  248. this.codeStatus = res.data.subject_type == 2 ? '企业(营业执照上的主体类型一般为有限公司、有限责任公司)' : res.data.subject_type == 4 ? '个体工商户(营业执照上的主体类型一般为个体户、个体工商户、个体经营)' :
  249. '';
  250. this.code_type = res.data.subject_type;
  251. this.business_license_photo=res.data.business_license_photo;
  252. this.id_card_photo1=res.data.id_card_photo1;
  253. this.id_card_photo2=res.data.id_card_photo2;
  254. this.qualifications_photo=res.data.qualifications_photo;
  255. })
  256. },
  257. onSubmit(e){
  258. let data=e.detail.value;
  259. data.subject_type=this.code_type;
  260. data.admin_id=uni.getStorageSync("admin_id");
  261. data.business_license_photo=this.business_license_photo;
  262. data.id_card_photo1=this.id_card_photo1;
  263. data.id_card_photo2=this.id_card_photo2;
  264. data.qualifications_photo=this.qualifications_photo;
  265. data.id_doc_type='IDENTIFICATION_TYPE_IDCARD';
  266. console.log(data,"data")
  267. // return
  268. this.request({
  269. url: "Wechatstore/wechat_store_submit",
  270. data: data,
  271. }).then(res => {
  272. if (res.code == 200) {
  273. uni.showToast({
  274. title: res.message,
  275. icon: 'none'
  276. })
  277. setTimeout(() => {
  278. uni.redirectTo({
  279. url:'./basics'
  280. })
  281. }, 2000)
  282. }
  283. }).catch((res) => {
  284. uni.showToast({
  285. title: res.message,
  286. icon: 'none'
  287. })
  288. })
  289. },
  290. },
  291. }
  292. </script>
  293. <style>
  294. page {
  295. background-color: #F4F5F7;
  296. }
  297. .item {
  298. background-color: #FFF;
  299. padding: 0 25rpx;
  300. }
  301. .title-block {
  302. margin-right: 20rpx;
  303. max-width: 220rpx;
  304. }
  305. .title-block text{
  306. font-size: 28rpx;
  307. }
  308. .desc {
  309. text-align: right;
  310. flex: 1;
  311. padding: 25rpx 0;
  312. border-bottom: 1rpx solid #F1F1F1;
  313. }
  314. .rund {
  315. width: 40rpx;
  316. height: 40rpx;
  317. }
  318. .red {
  319. color: red;
  320. padding: 10rpx 25rpx;
  321. font-size: 26rpx;
  322. }
  323. .sub-btn {
  324. width: 690rpx;
  325. height: 100rpx;
  326. background: linear-gradient(315deg, #FF6A69 2%, #FF6A69 99%);
  327. border-radius: 8rpx;
  328. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  329. text-align: center;
  330. line-height: 100rpx;
  331. color: #fff;
  332. font-size: 36rpx;
  333. font-weight: bold;
  334. margin: 0 auto;
  335. margin-top: 30px;
  336. }
  337. .home-upload {
  338. border: 1rpx solid #e3e4e5;
  339. height: 80rpx;
  340. border-radius: 6rpx;
  341. padding: 0 32rpx;
  342. min-width: 180rpx;
  343. font-size: 28rpx;
  344. letter-spacing: 0;
  345. background: #f6f7f8;
  346. }
  347. .home-img-icon {
  348. border: 1rpx solid #ccc;
  349. width: 200rpx;
  350. height: 200rpx;
  351. }
  352. .header-img {
  353. max-width: 300rpx;
  354. }
  355. .header-version {
  356. padding: 20rpx 25rpx;
  357. }
  358. </style>