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-people.vue 29KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994
  1. <template>
  2. <navBar title="ETC开户新办申请-个人" navbgClass="nav-bgXin" fontColor='#fff' :scrollTop="scrollTop"></navBar>
  3. <navBgCar :activeNum='3'></navBgCar>
  4. <view class="content-wrap">
  5. <view class="t-card">
  6. <view v-if="state.isMyPeopple" class="content">
  7. <view class="t-con">
  8. <view class="t-select">
  9. <view @click="tabChange(true)" class="item-select l-item" :class="{active:state.isMyPeopple}">
  10. 本人车辆
  11. </view>
  12. <view @click="tabChange(false)" class="item-select r-item" v-if="state.isEnableOther"
  13. :class="{active:!state.isMyPeopple}">
  14. 他人车辆
  15. </view>
  16. </view>
  17. <view class="item-tips">
  18. <view class="title"> 上传后请核对识别信息 </view>
  19. <view class="tip"> 如有错误请及时手动修改 </view>
  20. </view>
  21. <view class="picture-wrapper" @click="takePhotoMode('1','my')">
  22. <view class="bg">
  23. <view class="">
  24. <view class="name"> 人像面 </view>
  25. <view class="value"> 上传身份证的人像面 </view>
  26. <view class="tip">
  27. <view class="tip-value"> 拍摄规范 </view>
  28. </view>
  29. </view>
  30. <image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  31. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  32. </image>
  33. <image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"
  34. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  35. </view>
  36. </view>
  37. <view class="picture-wrapper" @click="takePhotoMode('2','my')">
  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.userNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  47. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  48. </image>
  49. <image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"
  50. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="shibie-wrapper">
  55. <view class="title"> 识别内容如下 </view>
  56. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  57. <u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  58. <u-input v-model="state.form.userName" placeholder='请输入姓名' :disabled="state.isEnableOCRData"
  59. maxlength="20" @input="replaceInput" inputAlign="right"/>
  60. </u-form-item>
  61. <u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  62. <u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum"
  63. :disabled="state.isEnableOCRData" maxlength="18" inputAlign="right"/>
  64. </u-form-item>
  65. <u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  66. <u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.userAddress"
  67. :disabled="state.isEnableOCRData" maxlength="50" inputAlign="right"/>
  68. </u-form-item>
  69. <u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  70. <u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" maxlength="11" inputAlign="right"/>
  71. </u-form-item>
  72. </u-form>
  73. </view>
  74. <view class="action">
  75. <view class="btn-tip">
  76. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  77. </view>
  78. <button type="default" class="ui-btn" @click="savaHandle()">
  79. 下一步
  80. </button>
  81. </view>
  82. </view>
  83. <view v-else class="content">
  84. <view class="t-con">
  85. <view class="t-select">
  86. <view @click="tabChange(true)" class="item-select l-item" :class="{active:state.isMyPeopple}">
  87. 本人车辆
  88. </view>
  89. <view @click="tabChange(false)" class="item-select r-item" v-if="state.isEnableOther"
  90. :class="{active:!state.isMyPeopple}">
  91. 他人车辆
  92. </view>
  93. </view>
  94. <view class="title"> 车主信息 </view>
  95. <view class="item-tips">
  96. <view class="title"> 上传后请核对识别信息 </view>
  97. <view class="tip"> 如有错误请及时手动修改 </view>
  98. </view>
  99. <view class="picture-wrapper" @click="takePhotoMode('1','my')">
  100. <view class="bg">
  101. <view class="">
  102. <view class="name"> 人像面 </view>
  103. <view class="value"> 上传身份证的人像面 </view>
  104. <view class="tip">
  105. <view class="tip-value"> 拍摄规范 </view>
  106. </view>
  107. </view>
  108. <image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  109. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  110. </image>
  111. <image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"
  112. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  113. </view>
  114. </view>
  115. <view class="picture-wrapper" @click="takePhotoMode('2','my')">
  116. <view class="bg">
  117. <view class="">
  118. <view class="name"> 国徽面 </view>
  119. <view class="value"> 上传身份证的国徽面 </view>
  120. <view class="tip">
  121. <view class="tip-value"> 拍摄规范 </view>
  122. </view>
  123. </view>
  124. <image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  125. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  126. </image>
  127. <image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"
  128. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  129. </view>
  130. </view>
  131. </view>
  132. <view class="shibie-wrapper">
  133. <view class="title"> 识别内容如下 </view>
  134. <u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
  135. <u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  136. <u-input inputAlign="right" placeholder='请输入姓名' v-model="state.form.userName"
  137. :disabled="state.isEnableOCRData" maxlength="20" />
  138. </u-form-item>
  139. <u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  140. <u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.userIdNum"
  141. :disabled="state.isEnableOCRData" type="idcard" maxlength="18" />
  142. </u-form-item>
  143. <u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  144. <u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.tel" maxlength="11" type="number" />
  145. </u-form-item>
  146. <u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  147. <u-input placeholder='请输入地址' inputAlign="right" :autoHeight='true' v-model="state.form.userAddress"
  148. :disabled="state.isEnableOCRData" maxlength="50" />
  149. </u-form-item>
  150. </u-form>
  151. </view>
  152. <view class="card-box">
  153. <view class="title"> 代办人信息 </view>
  154. <view class="item-tips">
  155. <view class="title">上传后请核对识别信息</view>
  156. <view class="tip">如有错误请及时手动修改</view>
  157. </view>
  158. <view class="picture-wrapper" @click="takePhotoMode('1','other')">
  159. <view class="bg">
  160. <view class="">
  161. <view class="name"> 人像面 </view>
  162. <view class="value"> 上传身份证的人像面 </view>
  163. <view class="tip">
  164. <view class="tip-value"> 拍摄规范 </view>
  165. </view>
  166. </view>
  167. <image v-if="!state.form.agentPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  168. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  169. </image>
  170. <image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"
  171. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  172. </view>
  173. </view>
  174. <view class="picture-wrapper" @click="takePhotoMode('2','other')">
  175. <view class="bg">
  176. <view class="">
  177. <view class="name"> 国徽面 </view>
  178. <view class="value"> 上传身份证的国徽面 </view>
  179. <view class="tip">
  180. <view class="tip-value"> 拍摄规范 </view>
  181. </view>
  182. </view>
  183. <image v-if="!state.form.agentNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  184. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  185. </image>
  186. <image v-else class="icon" :src="strReplace(state.form.agentNegImgUrl)"
  187. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  188. </view>
  189. </view>
  190. <view class="picture-wrapper" @click="cardFileImageUpdate()" v-if='state.isEnableBook'>
  191. <view class="bg">
  192. <view class="">
  193. <view class="name"> 委托书 </view>
  194. <view class="value"> 上传文字清晰的委托书 </view>
  195. <view class="tip">
  196. <view class="tip-value"> 拍摄规范 </view>
  197. </view>
  198. <view class="down" @click="downAuthD">模板下载</view>
  199. </view>
  200. <image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
  201. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  202. </image>
  203. <image v-else class="icon" :src="strReplace(state.form.proxyUrl)"
  204. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  205. </view>
  206. </view>
  207. </view>
  208. <view class="shibie-wrapper">
  209. <view class="title"> 识别内容如下 </view>
  210. <u-form label-width="200" :model="state.form" ref="uForm">
  211. <u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  212. <u-input inputAlign="right" placeholder='请输入经办人姓名' v-model="state.form.agentName"
  213. :disabled="state.isEnableOCRData" maxlength="20" />
  214. </u-form-item>
  215. <u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  216. <u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.agentIdNum"
  217. :disabled="state.isEnableOCRData" maxlength="18" type="idcard" />
  218. </u-form-item>
  219. <u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  220. <u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.agentTel" type="number"
  221. maxlength="11" />
  222. </u-form-item>
  223. </u-form>
  224. </view>
  225. <view class="action">
  226. <view class="btn-tip">
  227. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  228. </view>
  229. <button type="default" class="ui-btn" @click="savaHandle()">
  230. 下一步
  231. </button>
  232. </view>
  233. </view>
  234. </view>
  235. </view>
  236. <u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
  237. </u-select>
  238. <view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
  239. <view class="choice-takePhoto">
  240. <view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
  241. <view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
  242. <view @click.stop="cancle">取消</view>
  243. </view>
  244. </view>
  245. <viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images" :showStartPhoto="state.showImg"
  246. @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
  247. </template>
  248. <script setup lang="ts">
  249. import viewfinder from "../../components/viewfinder.vue"
  250. import navBgCar from "./components/nav-bg-car1";
  251. import {
  252. reactive,
  253. ref,
  254. } from "vue";
  255. import {
  256. msg,
  257. checkStr,
  258. strReplace,
  259. uploadFile,
  260. hasLogin,
  261. compressImage,
  262. chooseImageCompress,
  263. compareDates
  264. } from "@/utils/utils";
  265. import {
  266. onLoad,
  267. onPageScroll,
  268. } from "@dcloudio/uni-app";
  269. import {
  270. getUserMsg,
  271. userUpload, idCardOcr, registerFull
  272. } from "@/utils/network/api.js";
  273. import {
  274. request, requestNew
  275. } from "@/utils/network/request.js";
  276. import {navTo } from "@/utils/utils";
  277. import {
  278. setItem,
  279. getItem,
  280. } from "@/utils/storage";
  281. import {
  282. getCodeName
  283. } from "@/datas/queryKey.js";
  284. import navBar from "@/components/nav-bar/nav-bar2.vue";
  285. const labelStyle = {
  286. color: "#004576",
  287. fontSize: "28rpx",
  288. }
  289. const leftIcon = {
  290. height: '100%',
  291. width: '8rpx',
  292. display: 'flex',
  293. 'align-items': 'center',
  294. 'margin-right': '4rpx',
  295. }
  296. const scrollTop = ref(0)
  297. const state = reactive({
  298. showImg: true,
  299. isMy: "",//自己办理 他人办理
  300. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  301. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  302. isTakePhotoModeShow: false, //选择拍照方式是否出来
  303. images: '',
  304. genderList: [{
  305. value: '男',
  306. label: '男'
  307. },
  308. {
  309. value: '女',
  310. label: '女'
  311. }
  312. ],
  313. form: {
  314. orderId: "", //订单ID
  315. userName: "", //开户人姓名
  316. userIdType: "101", //用户证件类型 101//身份证
  317. userIdNum: "", //用户证件号码
  318. userPosImgUrl: "", //身份证正面
  319. userNegImgUrl: "", //身份证反面
  320. tel: "", //开户人手机号
  321. userAddress: "", //开户人地址
  322. sceneType: "", //用户协议支撑服务场景(发行服务机构和用户签订的协议)
  323. channelId: "", //渠道id
  324. gender: "",
  325. customerIdVld: "", //用户证件有效期
  326. agentName: "",
  327. agentGender: "",
  328. agentTel: '',
  329. agentPhone: "",
  330. agentIdType: "101",
  331. agentIdNum: "",
  332. agentPosImgUrl: "",
  333. agentNegImgUrl: "",
  334. proxyUrl: "",
  335. agentAddress: "",
  336. agentIdVld: '',
  337. opId: '',
  338. orderSource: 'WECHAT',
  339. isAgent: false
  340. },
  341. genderShow: false,
  342. orderId: "",
  343. vehiclePlateColor: undefined,
  344. isMyPeopple: true,
  345. isSign: '',
  346. vanType: 1,
  347. isEnableOther: true, //小程序是否支持他人办理
  348. isEnableBook: true, //他人办理时是否上传委托书
  349. isEnableInfo: true, //小程序信息带出
  350. isEnableOCRData: true, //允许修改OCR识别出来的数据
  351. vehicleId: "",
  352. jsCode: ""
  353. });
  354. const userGenderAction = () => {
  355. state.genderShow = true;
  356. };
  357. const genderSelectConfirm = (e) => {
  358. state.form.gender = ''
  359. e.map((val, index) => {
  360. state.form.gender = val.label;
  361. })
  362. };
  363. const camera = () => {
  364. state.phoneType = 0
  365. }
  366. const savaHandle = () => {
  367. if (!state.form.userName) {
  368. msg('请输入姓名');
  369. return;
  370. }
  371. if (!state.form.userPosImgUrl) {
  372. msg('请上传身份证的人像面');
  373. return;
  374. }
  375. if (!state.form.userNegImgUrl) {
  376. msg('请上传身份证的国徽面');
  377. return;
  378. }
  379. if (!checkStr(state.form.userIdNum, 'card')) {
  380. msg('请输入正确身份证号');
  381. return;
  382. }
  383. if (!checkStr(state.form.tel, 'mobile')) {
  384. msg('请输入正确的手机号');
  385. return;
  386. }
  387. // 都要无感注册
  388. // 没登录就存token 登录了就正常走
  389. registerRequest().then((result : any) => {
  390. console.log("result==", result)
  391. if (!getItem('openId')) {
  392. setItem('token', result.accessToken)
  393. setItem('openId', result.openId)
  394. state.form.opId = getItem('openId') ? getItem('openId') : '';
  395. }
  396. console.log("正常走 ")
  397. // 已经登录
  398. let data = state.form;
  399. console.log("data==", data)
  400. const options = {
  401. type: 2,
  402. data: data,
  403. method: "POST",
  404. showLoading: true,
  405. };
  406. requestNew(userUpload, options).then((res) => {
  407. console.log(res);
  408. navTo(
  409. `/subpackage/orders/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&vanType=${state.vanType}&isSign=${state.isSign}&vehicleId=${state.vehicleId}`,
  410. );
  411. });
  412. })
  413. };
  414. const cardFileImageUpdate = () => {
  415. uni.chooseImage({
  416. count: 1, //只能选取一张照片
  417. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  418. sourceType: ["camera", "album"], //从相册选择
  419. success: function (res) {
  420. uploadFile(res.tempFilePaths[0], "", "").then((data) => {
  421. state.form.proxyUrl = data;
  422. })
  423. },
  424. });
  425. };
  426. //tab切换
  427. const tabChange = (val : any) => {
  428. state.isTakePhotoModeShow = false
  429. if (val) {
  430. state.isMyPeopple = true;
  431. state.form.isAgent = false
  432. } else {
  433. state.isMyPeopple = false;
  434. state.form.isAgent = true
  435. }
  436. state.form = {
  437. orderId: state.orderId, //订单ID
  438. userName: "", //开户人姓名
  439. userIdType: "101", //用户证件类型 101//身份证
  440. userIdNum: "", //用户证件号码
  441. userPosImgUrl: "", //身份证正面
  442. userNegImgUrl: "", //身份证反面
  443. tel: "", //开户人手机号
  444. userAddress: "", //开户人地址
  445. sceneType: "", //用户协议支撑服务场景(发行服务机构和用户签订的协议)
  446. channelId: "", //渠道id
  447. gender: "",
  448. customerIdVld: "",
  449. agentName: "",
  450. agentGender: "",
  451. agentTel: '',
  452. agentPhone: "",
  453. agentIdType: "101",
  454. agentIdNum: "",
  455. agentPosImgUrl: "",
  456. agentNegImgUrl: "",
  457. proxyUrl: "",
  458. agentAddress: "",
  459. agentIdVld: '',
  460. orderSource: 'WECHAT',
  461. isAgent: false
  462. };
  463. };
  464. onLoad((option : any) => {
  465. state.form.orderId = option.orderId;
  466. state.orderId = option.orderId;
  467. state.vehiclePlateColor = option.vehiclePlateColor;
  468. state.form.opId = getItem('openId') ? getItem('openId') : '';
  469. state.isSign = option.isSign;
  470. state.vanType = option.vanType;
  471. state.vehicleId = option.vehicleId;
  472. getGlobalParam(); //全局配置数据
  473. console.log("option", option)
  474. uni.login({
  475. provider: "weixin",
  476. success: function (e) {
  477. console.log("jsCode", e.code)
  478. state.jsCode = e.code
  479. },
  480. });
  481. });
  482. //监听页面滚动
  483. onPageScroll((e) => {
  484. scrollTop.value = e.scrollTop;
  485. });
  486. const replaceInput = (event) => {
  487. console.log("event", event)
  488. const screeningStr = /[^\u4E00-\u9FA5]/g; //想禁止什么类型,在这里替换正则就可以了
  489. if (screeningStr.test(event)) {
  490. setTimeout(() => {
  491. state.form.userName = event.replace(screeningStr, '');
  492. }, 100)
  493. } else {
  494. setTimeout(() => {
  495. state.form.userName = event;
  496. }, 100)
  497. }
  498. console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
  499. }
  500. const getGlobalParam = () => {
  501. const data = getItem('globalParam')
  502. console.log("全局配置数据", getCodeName('IS_ENABLE', data.miniSupportOther), getCodeName('IS_ENABLE', data.otherUploadProxy), getCodeName('IS_ENABLE', data.miniInfoShow), getCodeName('IS_ENABLE', data.changeOCRData))
  503. // 小程序是否支持他人办理
  504. if (getCodeName('IS_ENABLE', data.miniSupportOther) == '启用') {
  505. state.isEnableOther = true;
  506. } else {
  507. state.isEnableOther = false;
  508. }
  509. // 他人办理时是否上传委托书
  510. if (getCodeName('IS_ENABLE', data.otherUploadProxy) == '启用') {
  511. state.isEnableBook = true;
  512. } else {
  513. state.isEnableBook = false;
  514. }
  515. // 小程序信息带出 登录情况下才需要带出用户信息
  516. if (hasLogin()) {
  517. if (getCodeName('IS_ENABLE', data.miniInfoShow) == '启用') {
  518. state.isEnableInfo = true;
  519. uni.showModal({
  520. // title: '提示',
  521. content: '是否允许带出用户信息',
  522. success: function (res) {
  523. if (res.confirm) {
  524. console.log('用户点击确定');
  525. queryUserMsg() //通过opneId查询用户信息
  526. } else if (res.cancel) {
  527. console.log('用户点击取消');
  528. }
  529. }
  530. });
  531. } else {
  532. state.isEnableInfo = false;
  533. }
  534. }
  535. // 允许修改OCR识别出来的数据
  536. if (getCodeName('IS_ENABLE', data.changeOCRData) == '启用') {
  537. state.isEnableOCRData = false;
  538. } else {
  539. state.isEnableOCRData = true;
  540. }
  541. }
  542. // 通过opneId查询用户信息
  543. const queryUserMsg = () => {
  544. const options = {
  545. type: 2,
  546. data: {
  547. "openId": getItem('openId')
  548. },
  549. method: "POST",
  550. showLoading: true,
  551. };
  552. requestNew(getUserMsg, options).then((res) => {
  553. console.log("通过opneId查询用户信息", res)
  554. const data = res;
  555. state.form.userPosImgUrl = data.customerPosImgUrl;
  556. state.form.userNegImgUrl = data.customerNegImgUrl;
  557. state.form.userName = data.customerName;
  558. state.form.userIdNum = data.customerIdNum;
  559. state.form.userAddress = data.customerAddress;
  560. state.form.tel = data.customerTel;
  561. })
  562. }
  563. const takePhotoMode = (index, isMy) => {
  564. console.log("index", index, isMy)
  565. state.isTakePhotoModeShow = true
  566. state.choiceIndex = index
  567. state.isMy = isMy
  568. }
  569. const xiangce = (val) => {
  570. console.log("val", val)
  571. var imageType = val;
  572. chooseImageCompress((res) => {
  573. state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
  574. state.showImg = false
  575. state.phoneType = state.choiceIndex
  576. state.isTakePhotoModeShow = false
  577. })
  578. }
  579. const takePhoto = (val) => {
  580. state.showImg = true
  581. console.log("拍照", val)
  582. state.phoneType = val;
  583. }
  584. const confirmReturn = (val) => {
  585. console.log("图片地址val", val)
  586. state.phoneType = 0
  587. state.isTakePhotoModeShow = false
  588. var imageType = state.choiceIndex;
  589. uploadFile(val.tempImagePath, imageType, idCardOcr).then((data) => {
  590. console.log("身份证上传", data)
  591. if (state.isMy == "my") {
  592. if (state.choiceIndex == "1") {
  593. state.form.userName = data.name;
  594. state.form.gender = data.gender;
  595. state.form.userIdNum = data.idno;
  596. state.form.userPosImgUrl = data.imageUrl;
  597. state.form.userAddress = data.address;
  598. } else {
  599. state.form.customerIdVld = data.enddate;
  600. state.form.userNegImgUrl = data.imageUrl;
  601. compareDates(data.enddate)
  602. }
  603. state.isTakePhotoModeShow = false
  604. } else {
  605. if (state.choiceIndex == "1") {
  606. state.form.agentName = data.name;
  607. state.form.agentGender = data.gender;
  608. state.form.agentIdNum = data.idno;
  609. state.form.agentPosImgUrl = data.imageUrl;
  610. state.form.agentAddress = data.address;
  611. } else {
  612. console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == "1", data)
  613. state.form.agentIdVld = data.enddate;
  614. state.form.agentNegImgUrl = data.imageUrl;
  615. compareDates(data.enddate)
  616. }
  617. state.isTakePhotoModeShow = false
  618. }
  619. })
  620. }
  621. const cancle = () => {
  622. state.isTakePhotoModeShow = false
  623. }
  624. const downAuthD = () => {
  625. uni.downloadFile({
  626. url: "https://qtzl.etcjz.cn/default-bucket/20240311/个人委托书.docx",
  627. filePath: uni.env.USER_DATA_PATH + '/' + '个人委托书.docx',
  628. success(res) {
  629. const filePath = res.filePath
  630. uni.openDocument({
  631. filePath: filePath,
  632. fileType: 'docx',
  633. showMenu: true, //关键点
  634. success: function (res) {
  635. // msg("成功查看协议详情");
  636. },
  637. fail: function (err) {
  638. msg("打开文档失败");
  639. }
  640. });
  641. },
  642. fail: function (err) {
  643. msg("下载文档失败");
  644. console.log("err", err)
  645. },
  646. complete(res) {
  647. }
  648. })
  649. }
  650. // 无感注册
  651. const registerRequest = () => {
  652. let data = {
  653. userType: "PERSONAL",
  654. idNum: state.form.userIdNum,
  655. idType: state.form.userIdType,
  656. mobile: state.form.tel,
  657. userName: state.form.userName,
  658. gender: state.form.gender == '男' ? 'MALE' : 'FEMALE',
  659. certifyChannel: "BAIDUOCR",
  660. address: state.form.userAddress,
  661. agentIdNum: state.form.agentIdNum,
  662. agentIdType: state.form.agentIdType,
  663. agentName: state.form.agentName,
  664. department: "",
  665. userIdImgUrl: state.form.userPosImgUrl,
  666. userIdImgBase64: "",
  667. jsCode: state.jsCode
  668. }
  669. const options = {
  670. type: 2,
  671. data: data,
  672. method: "POST",
  673. showLoading: true,
  674. };
  675. return new Promise(async (resolve, reject) => {
  676. const res = await requestNew(registerFull, options);
  677. const data = res;
  678. resolve(data);
  679. }).catch((error) => {
  680. reject(error);
  681. });
  682. }
  683. </script>
  684. <style lang="scss" scoped>
  685. .title {
  686. font-size: 35rpx;
  687. font-family: Microsoft YaHei;
  688. font-weight: 400;
  689. color: #01243A;
  690. line-height: 35rpx;
  691. margin-bottom: 20rpx;
  692. }
  693. .content-wrap {
  694. position: absolute;
  695. top: 370rpx;
  696. width: 100%;
  697. min-height: calc(100% - 370rpx);
  698. box-sizing: border-box;
  699. padding: 0 30rpx 210rpx;
  700. .t-con {
  701. width: 100%;
  702. background-color: #fff;
  703. border-radius: 12rpx;
  704. padding: 40rpx 30rpx 30rpx;
  705. box-sizing: border-box;
  706. }
  707. .t-select {
  708. display: flex;
  709. padding-bottom: 30rpx;
  710. justify-content: center;
  711. align-items: center;
  712. .item-select {
  713. width: 200rpx;
  714. height: 68rpx;
  715. font-family: SourceHanSansSC, SourceHanSansSC;
  716. font-weight: 400;
  717. font-size: 28rpx;
  718. color: #CCB375;
  719. text-align: center;
  720. line-height: 68rpx;
  721. border: 1rpx solid #CCB375;
  722. &.l-item {
  723. border-radius: 34rpx 0 0 34rpx;
  724. }
  725. &.r-item {
  726. border-radius: 0 34rpx 34rpx 0;
  727. }
  728. &.active {
  729. color: #fff;
  730. background: #CCB375;
  731. }
  732. }
  733. }
  734. .big {
  735. font-size: 30rpx;
  736. font-family: Microsoft YaHei;
  737. font-weight: 400;
  738. color: #333333;
  739. line-height: 24rpx;
  740. }
  741. .nomal {
  742. font-size: 26rpx;
  743. font-family: Microsoft YaHei;
  744. font-weight: 400;
  745. color: #666666;
  746. line-height: 24rpx;
  747. }
  748. }
  749. .content {
  750. .action {
  751. position: absolute;
  752. bottom: 0rpx;
  753. left: 0;
  754. height: 188rpx;
  755. background-color: #fff;
  756. border-radius: 30rpx 30rpx 0 0;
  757. width: 100vw;
  758. display: flex;
  759. align-items: center;
  760. justify-content: center;
  761. flex-direction: column;
  762. .btn-tip {
  763. font-family: SourceHanSansSC, SourceHanSansSC;
  764. font-weight: 400;
  765. font-size: 24rpx;
  766. color: #CCB375;
  767. margin-bottom: 14rpx;
  768. }
  769. .button {
  770. height: 88rpx;
  771. background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
  772. border-radius: 40rpx;
  773. font-size: 32rpx;
  774. font-weight: 400;
  775. color: #ffffff;
  776. line-height: 88rpx;
  777. width: 660rpx;
  778. margin: 0 auto;
  779. }
  780. }
  781. .item-tips {
  782. .title {
  783. font-size: 30rpx;
  784. font-family: Microsoft YaHei;
  785. font-weight: 500;
  786. color: #01243A;
  787. line-height: 30rpx;
  788. }
  789. .tip {
  790. margin-top: 16rpx;
  791. font-size: 24rpx;
  792. font-family: Microsoft YaHei;
  793. font-weight: 400;
  794. color: #999999;
  795. line-height: 24rpx;
  796. }
  797. }
  798. .picture-wrapper {
  799. margin-top: 30rpx;
  800. .bg {
  801. background: #F5F9FB;
  802. border-radius: 10rpx;
  803. padding: 40rpx 30rpx;
  804. display: flex;
  805. // align-items: center;
  806. justify-content: space-between;
  807. .name {
  808. padding-top: 30rpx;
  809. font-size: 32rpx;
  810. font-family: SourceHanSansSC, SourceHanSansSC;
  811. font-weight: 500;
  812. color: #111;
  813. line-height: 34rpx;
  814. }
  815. .value {
  816. margin-top: 20rpx;
  817. font-size: 22rpx;
  818. font-family: SourceHanSansSC, SourceHanSansSC;
  819. font-weight: 400;
  820. color: #999999;
  821. line-height: 24rpx;
  822. }
  823. .tip {
  824. margin-top: 20rpx;
  825. text-align: center;
  826. width: 100rpx;
  827. height: 30rpx;
  828. // background: rgba(204, 179, 117);
  829. border-radius: 6rpx;
  830. border: 1rpx solid #CCB375;
  831. .tip-value {
  832. font-size: 20rpx;
  833. font-family: Microsoft YaHei;
  834. font-weight: 400;
  835. color: #CCB375;
  836. line-height: 30rpx;
  837. opacity: 1;
  838. }
  839. }
  840. }
  841. .icon {
  842. width: 304rpx;
  843. height: 190rpx;
  844. background-image: var(--bgimg);
  845. background-size: 100% 100%;
  846. background-repeat: no-repeat;
  847. }
  848. }
  849. .shibie-wrapper,
  850. .card-box {
  851. margin-top: 30rpx;
  852. border-radius: 12rpx;
  853. background-color: #fff;
  854. width: 100%;
  855. padding: 30rpx 30rpx 0;
  856. box-sizing: border-box;
  857. .title {
  858. font-size: 30rpx;
  859. font-family: SourceHanSansSC, SourceHanSansSC;
  860. font-weight: 500;
  861. color: #01243A;
  862. line-height: 30rpx;
  863. }
  864. }
  865. .buchong-wrapper {
  866. margin-top: 60rpx;
  867. .title {
  868. font-size: 30rpx;
  869. font-family: Microsoft YaHei;
  870. font-weight: 400;
  871. color: #000000;
  872. line-height: 30rpx;
  873. }
  874. }
  875. .green-tip {
  876. margin-top: 50rpx;
  877. font-size: 24rpx;
  878. font-family: Microsoft YaHei;
  879. font-weight: 400;
  880. color: #999;
  881. line-height: 24rpx;
  882. margin-bottom: 60rpx;
  883. }
  884. }
  885. .choice-takePhoto {
  886. position: absolute;
  887. bottom: 0;
  888. background-color: white;
  889. width: 100%;
  890. border-radius: 20rpx 20rpx 0 0;
  891. }
  892. .choice-takePhoto>view:first-child {
  893. text-align: center;
  894. height: 80rpx;
  895. line-height: 80rpx;
  896. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  897. background-color: white;
  898. }
  899. .choice-takePhoto>view:last-child {
  900. text-align: center;
  901. height: 80rpx;
  902. line-height: 80rpx;
  903. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  904. background-color: white;
  905. }
  906. .choice-takePhoto>view {
  907. text-align: center;
  908. height: 80rpx;
  909. line-height: 80rpx;
  910. background-color: white;
  911. }
  912. .choice-takePhoto-wrap {
  913. width: 100%;
  914. height: 100vh;
  915. background-color: rgba(127, 127, 127, 0.2);
  916. position: fixed;
  917. left: 0;
  918. top: 0;
  919. z-index: 11111;
  920. }
  921. .down {
  922. background: #CCB375;
  923. color: #fff;
  924. border-radius: 5rpx;
  925. font-size: 20rpx;
  926. margin-top: 10rpx;
  927. width: 100rpx;
  928. height: 30rpx;
  929. text-align: center;
  930. line-height: 30rpx;
  931. }
  932. </style>