You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

opening-account-unit.vue 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <template>
  2. <navBar title="ETC开户新办申请-单位" :scrollTop="scrollTop"></navBar>
  3. <navBgCar></navBgCar>
  4. <view class="content-wrap">
  5. <view class="item-tips">
  6. <view class="title"> 上传后请核对识别信息 </view>
  7. <view class="tip"> 如有错误请及时手动修改 </view>
  8. </view>
  9. <view class="picture-wrapper" @click="cardImageOcrYY()">
  10. <view class="bg">
  11. <view class="">
  12. <view class="name"> 营业执照 </view>
  13. <view class="value"> 上传企业的营业执照 </view>
  14. <view class="tip">
  15. <view class="tip-value"> 拍摄规范 </view>
  16. </view>
  17. </view>
  18. <image v-if="!state.form.posImgUrl" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`">
  19. </image>
  20. <image v-else class="icon" :src="strReplace(state.form.posImgUrl)"></image>
  21. </view>
  22. </view>
  23. <view class="picture-wrapper" @click="cardImageOcr('1')">
  24. <view class="bg">
  25. <view class="">
  26. <view class="name"> 人像面 </view>
  27. <view class="value"> 上传身份证的人像面 </view>
  28. <view class="tip">
  29. <view class="tip-value"> 拍摄规范 </view>
  30. </view>
  31. </view>
  32. <image v-if="!state.form.agentPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
  33. </image>
  34. <image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"></image>
  35. </view>
  36. </view>
  37. <view class="picture-wrapper" @click="cardImageOcr('2')">
  38. <view class="bg">
  39. <view class="">
  40. <view class="name"> 国徽面 </view>
  41. <view class="value"> 上传身份证的国徽面 </view>
  42. <view class="tip">
  43. <view class="tip-value"> 拍摄规范 </view>
  44. </view>
  45. </view>
  46. <image v-if="!state.form.agentNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
  47. </image>
  48. <image v-else class="icon" :src="strReplace(state.form.agentNegImgUrl)"></image>
  49. </view>
  50. </view>
  51. <view class="picture-wrapper" @click="cardFileImageUpdate()">
  52. <view class="bg">
  53. <view class="">
  54. <view class="name"> 委托书 </view>
  55. <view class="value"> 上传文字清晰的委托书 </view>
  56. <view class="tip">
  57. <view class="tip-value"> 拍摄规范 </view>
  58. </view>
  59. </view>
  60. <image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
  61. </image>
  62. <image v-else class="icon" :src="strReplace(state.form.proxyUrl)"></image>
  63. </view>
  64. </view>
  65. <view class="shibie-wrapper">
  66. <view class="title"> 识别内容如下 </view>
  67. <u-form label-width="200" :model="state.form" ref="uForm">
  68. <u-form-item label="公司名称">
  69. <u-input inputAlign="right" class="clearBg" placeholder='请输入公司名称' v-model="state.form.userName" />
  70. </u-form-item>
  71. <u-form-item label="部门名称">
  72. <u-input inputAlign="right" class="clearBg" placeholder='请输入部门名称' v-model="state.form.department" />
  73. </u-form-item>
  74. <u-form-item label="社会信用代码">
  75. <u-input inputAlign="right" class="clearBg" placeholder='请输入社会信用代码'
  76. v-model="state.form.userIdNum" />
  77. </u-form-item>
  78. <u-form-item label="经办人姓名">
  79. <u-input inputAlign="right" class="clearBg" placeholder='请输入经办人姓名' v-model="state.form.agentName" />
  80. </u-form-item>
  81. <u-form-item label="经办人身份证号">
  82. <u-input inputAlign="right" class="clearBg" placeholder='请输入经办人身份证号'
  83. v-model="state.form.agentIdNum" />
  84. </u-form-item>
  85. <u-form-item label="经办人联系方式">
  86. <u-input inputAlign="right" class="clearBg" placeholder='请输入经办人联系方式' v-model="state.form.tel" />
  87. </u-form-item>
  88. </u-form>
  89. </view>
  90. <view class="green-tip">
  91. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  92. </view>
  93. <view class="action">
  94. <button type="default" class="button" @click="savaHandle()">
  95. 下一步
  96. </button>
  97. </view>
  98. </view>
  99. </template>
  100. <script setup lang="ts">
  101. import {
  102. reactive, ref
  103. } from "vue";
  104. import navBgCar from "./components/nav-bg-car3";
  105. import navBar from "@/components/nav-bar/nav-bar2.vue";
  106. import {
  107. pathToBase64
  108. } from "@/utils/image-tools/index.js";
  109. import {
  110. ocrAllQuery,
  111. fileUpload,
  112. envs,
  113. etcOcrCard,
  114. etcCompanyCardInfoSubmit,
  115. register,
  116. } from "@/utils/network/api.js";
  117. import {
  118. request
  119. } from "@/utils/network/request.js";
  120. import {
  121. stringToJson
  122. } from "@/utils/network/encryption";
  123. import {
  124. onLoad,
  125. onPageScroll,
  126. } from "@dcloudio/uni-app";
  127. import {
  128. setItem,
  129. getItem,
  130. } from "@/utils/storage";
  131. import {
  132. msg,
  133. checkStr
  134. } from "@/utils/utils";
  135. const scrollTop = ref(0);//滚动距离
  136. const state = reactive({
  137. form: {
  138. orderId: "", //订单ID
  139. //营业执照信息
  140. userName: "", //开户名称/账户名称
  141. userIdType: "203", //用户证件类型 203//营业执照
  142. userIdNum: "", //营业执照号码
  143. posImgUrl: "", //营业执照证明
  144. department: '本部', //不超过50个字符,若单位仅开一个账户,填写“本部”
  145. address: "", //单位地址
  146. //经办人信息
  147. agentName: "",
  148. agentIdType: "101",
  149. agentIdNum: "",
  150. agentAddress: "",
  151. agentPhone: "",
  152. agentIdVld: '',
  153. tel: '',
  154. agentGender: '',
  155. agentPosImgUrl: "",
  156. agentNegImgUrl: "",
  157. proxyUrl: "",
  158. sceneType: "", //用户协议支撑服务场景(发行服务机构和用户签订的协议)
  159. channelId: "", //渠道id
  160. opId: '',
  161. orderSource: 'WECHAT',
  162. },
  163. orderId: "",
  164. vehiclePlateColor: '',
  165. isSign: ''
  166. });
  167. const savaHandle = () => {
  168. if (state.form.agentGender === '男') {
  169. state.form.agentGender = 'MAN'
  170. } else {
  171. state.form.agentGender = 'WOMAN'
  172. }
  173. if (!state.form.posImgUrl) {
  174. msg('请上传营业执照');
  175. return;
  176. }
  177. if (!state.form.agentPosImgUrl) {
  178. msg('上传身份证的人像面');
  179. return;
  180. }
  181. if (!state.form.agentNegImgUrl) {
  182. msg('上传身份证的国徽面');
  183. return;
  184. }
  185. if (!state.form.proxyUrl) {
  186. msg('上传身份证的委托书');
  187. return;
  188. }
  189. if (!state.form.userName) {
  190. msg('请输入公司名称');
  191. return;
  192. }
  193. if (!state.form.department) {
  194. msg('请输入社会信用代码');
  195. return;
  196. }
  197. if (!state.form.agentName) {
  198. msg('请输入经办人姓名');
  199. return;
  200. }
  201. if (!checkStr(state.form.agentIdNum, 'card')) {
  202. msg('请输入正确的经办人身份证号');
  203. return;
  204. }
  205. if (!checkStr(state.form.tel, 'mobile')) {
  206. msg('请输入正确的经办人联系方式');
  207. return;
  208. }
  209. //如果未登录||新用户
  210. // if (!getItem('openId')) {
  211. let data = {
  212. userType: "ENTERPRISE",
  213. idNum: state.form.userIdNum,
  214. idType: state.form.userIdType,
  215. mobile: state.form.tel,
  216. userName: state.form.userName,
  217. gender: 'UNKOWN',
  218. certifyChannel: "BAIDUOCR",
  219. address: state.form.address,
  220. agentIdNum: state.form.agentIdNum,
  221. agentIdType: state.form.agentIdType,
  222. agentName: state.form.agentName,
  223. department: state.form.department,
  224. userIdImgUrl: state.form.posImgUrl,
  225. userIdImgBase64: "",
  226. }
  227. const options = {
  228. type: 2,
  229. data: data,
  230. method: "POST",
  231. showLoading: true,
  232. };
  233. request(register, options).then((res) => {
  234. let result = stringToJson(res.bizContent);
  235. if (result.accessToken && result.openId) {
  236. setItem('token', result.accessToken)
  237. setItem('openId', result.openId)
  238. state.form.opId = result.openId;
  239. let data = state.form;
  240. const options = {
  241. type: 2,
  242. data: data,
  243. method: "POST",
  244. showLoading: true,
  245. };
  246. request(etcCompanyCardInfoSubmit, options).then((res) => {
  247. // let result = stringToJson(res.bizContent);
  248. console.log(res);
  249. uni.redirectTo({
  250. url: `/subpackage/orders/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&type=1&isSign=${state.isSign}`,
  251. });
  252. });
  253. }
  254. })
  255. // }else{
  256. // var data = state.form;
  257. // const options = {
  258. // type: 2,
  259. // data: data,
  260. // method: "POST",
  261. // showLoading: true,
  262. // };
  263. // request(etcCompanyCardInfoSubmit, options).then((res) => {
  264. // const data = stringToJson(res.bizContent);
  265. // uni.redirectTo({
  266. // url: `/subpackage/orders/car-release?orderId=${state.orderId}&&vehiclePlateColor=${state.vehiclePlateColor}&isSign=${state.isSign}`,
  267. // });
  268. // });
  269. // }
  270. };
  271. onLoad((option : any) => {
  272. state.form.orderId = option.orderId;
  273. state.orderId = option.orderId;
  274. state.vehiclePlateColor = option.vehiclePlateColor;
  275. state.form.opId = getItem('openId') ? getItem('openId') : '';
  276. state.isSign = option.isSign;
  277. });
  278. //监听页面滚动
  279. onPageScroll((e) => {
  280. scrollTop.value = e.scrollTop;
  281. });
  282. //营业执照Orc接口调用
  283. const cardImageOcrYY = () => {
  284. uni.chooseImage({
  285. count: 1, //只能选取一张照片
  286. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  287. sourceType: ["camera", "album"], //从相册选择
  288. success: function (res) {
  289. pathToBase64(res.tempFilePaths[0])
  290. .then((path) => {
  291. var data = {
  292. type: 'business_license',
  293. base64: path,
  294. };
  295. const options = {
  296. type: 2,
  297. data: data,
  298. method: "POST",
  299. showLoading: true,
  300. };
  301. request(ocrAllQuery, options).then((res) => {
  302. const data = stringToJson(res.bizContent);
  303. if (data.result) {
  304. state.form.userName = stringToJson(data.result
  305. .businessLicense)[
  306. '名称'];
  307. state.form.userIdNum = stringToJson(data.result
  308. .businessLicense)[
  309. '统一社会信用代码'];
  310. cardFileImageUpdateyy(path)
  311. }
  312. });
  313. })
  314. .catch((error) => { });
  315. },
  316. });
  317. };
  318. const cardImageOcr = (val : any) => {
  319. var imageType = val;
  320. uni.chooseImage({
  321. count: 1, //只能选取一张照片
  322. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  323. sourceType: ["camera", "album"], //从相册选择
  324. success: function (res) {
  325. pathToBase64(res.tempFilePaths[0])
  326. .then((path) => {
  327. var data = {
  328. source: "WECHAT",
  329. agencyId: "52010106004",
  330. imageType: imageType,
  331. fileName: res.tempFilePaths[0],
  332. imageBase64: path,
  333. };
  334. const options = {
  335. type: 2,
  336. data: data,
  337. method: "POST",
  338. showLoading: true,
  339. };
  340. request(etcOcrCard, options).then((res) => {
  341. const data = stringToJson(res.bizContent);
  342. if (val === "1") {
  343. state.form.agentName = data.name;
  344. state.form.agentIdNum = data.idno;
  345. state.form.agentPosImgUrl = data.imageUrl;
  346. state.form.address = data.address;
  347. state.form.agentGender = data.gender;
  348. } else {
  349. state.form.agentIdVld = data.enddate;
  350. state.form.agentNegImgUrl = data.imageUrl;
  351. }
  352. });
  353. })
  354. .catch((error) => { });
  355. },
  356. });
  357. };
  358. //委托书获取图片给后端
  359. const cardFileImageUpdateyy = (val : any) => {
  360. var data = {
  361. fileBase64: val,
  362. };
  363. const options = {
  364. type: 2,
  365. data: data,
  366. method: "POST",
  367. showLoading: true,
  368. };
  369. request(fileUpload, options).then((res) => {
  370. const data = stringToJson(res.bizContent);
  371. state.form.posImgUrl = data.data.url;
  372. });
  373. };
  374. const cardFileImageUpdate = () => {
  375. uni.chooseImage({
  376. count: 1, //只能选取一张照片
  377. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  378. sourceType: ["camera", "album"], //从相册选择
  379. success: function (res) {
  380. pathToBase64(res.tempFilePaths[0])
  381. .then((path) => {
  382. var data = {
  383. fileBase64: path,
  384. };
  385. const options = {
  386. type: 2,
  387. data: data,
  388. method: "POST",
  389. showLoading: true,
  390. };
  391. request(fileUpload, options).then((res) => {
  392. const data = stringToJson(res.bizContent);
  393. state.form.proxyUrl = data.data.url;
  394. });
  395. })
  396. .catch((error) => { });
  397. },
  398. });
  399. };
  400. //替换图片地址
  401. const strReplace = (str : string) => {
  402. let imgUrl = str.replace("http://192.168.101.145:9000", envs[process.env.NODE_ENV].baseUrl);
  403. imgUrl = imgUrl.replace("http://100.64.2.113:9000", envs[process.env.NODE_ENV].baseUrl);
  404. return imgUrl;
  405. }
  406. </script>
  407. <style lang="scss" scoped>
  408. .content-wrap {
  409. position: relative;
  410. margin-top: -50rpx;
  411. padding: 0rpx 30rpx;
  412. position: relative;
  413. .action {
  414. padding-left: 20rpx;
  415. padding-right: 20rpx;
  416. padding-bottom: 30rpx;
  417. .button {
  418. height: 80rpx;
  419. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  420. border-radius: 40rpx;
  421. font-size: 32rpx;
  422. font-weight: 400;
  423. color: #ffffff;
  424. line-height: 80rpx;
  425. }
  426. }
  427. .item-tips {
  428. .title {
  429. font-size: 30rpx;
  430. font-family: Microsoft YaHei;
  431. font-weight: 400;
  432. color: #000000;
  433. line-height: 24rpx;
  434. }
  435. .tip {
  436. margin-top: 16rpx;
  437. font-size: 24rpx;
  438. font-family: Microsoft YaHei;
  439. font-weight: 400;
  440. color: #999999;
  441. line-height: 24rpx;
  442. }
  443. }
  444. .picture-wrapper {
  445. margin-top: 40rpx;
  446. .bg {
  447. background: #ffffff;
  448. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  449. border-radius: 20rpx;
  450. padding: 40rpx;
  451. display: flex;
  452. // align-items: center;
  453. justify-content: space-between;
  454. .name {
  455. font-size: 34rpx;
  456. font-family: Microsoft YaHei;
  457. font-weight: 400;
  458. color: #000000;
  459. line-height: 34rpx;
  460. }
  461. .value {
  462. margin-top: 20rpx;
  463. font-size: 24rpx;
  464. font-family: Microsoft YaHei;
  465. font-weight: 400;
  466. color: #999999;
  467. line-height: 24rpx;
  468. }
  469. .tip {
  470. margin-top: 20rpx;
  471. text-align: center;
  472. width: 110rpx;
  473. height: 40rpx;
  474. background: rgba(33, 190, 177, 0.2);
  475. border-radius: 6rpx;
  476. .tip-value {
  477. font-size: 20rpx;
  478. font-family: Microsoft YaHei;
  479. font-weight: 400;
  480. color: #0a8f8a;
  481. line-height: 40rpx;
  482. opacity: 1;
  483. }
  484. }
  485. }
  486. .icon {
  487. width: 294rpx;
  488. height: 188rpx;
  489. }
  490. }
  491. .shibie-wrapper {
  492. margin-top: 60rpx;
  493. .title {
  494. font-size: 30rpx;
  495. font-family: Microsoft YaHei;
  496. font-weight: 400;
  497. color: #000000;
  498. line-height: 30rpx;
  499. }
  500. }
  501. .buchong-wrapper {
  502. margin-top: 60rpx;
  503. .title {
  504. font-size: 30rpx;
  505. font-family: Microsoft YaHei;
  506. font-weight: 400;
  507. color: #000000;
  508. line-height: 30rpx;
  509. }
  510. }
  511. .green-tip {
  512. margin-top: 50rpx;
  513. font-size: 24rpx;
  514. font-family: Microsoft YaHei;
  515. font-weight: 400;
  516. color: #00b38b;
  517. line-height: 24rpx;
  518. margin-bottom: 60rpx;
  519. }
  520. }
  521. ::v-deep .u-input__input {
  522. background: transparent;
  523. }
  524. ::v-deep .u-form-item--left .u-form-item--left__content {
  525. padding-right: 0px;
  526. }
  527. </style>