userCenterAuthenticationPersonal.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. <template>
  2. <div
  3. style="width: 100%; background: #fff; min-height: 700px"
  4. class="userCenterAuthenticationPersonal"
  5. >
  6. <div
  7. style="
  8. height: 80px;
  9. line-height: 80px;
  10. margin-top: 20px;
  11. margin: 0 20px;
  12. color: #666;
  13. font-size: 15px;
  14. border-bottom: 1px solid #bcbcbc;
  15. "
  16. >
  17. {{ $t("common.realAuthentication") }}({{
  18. this.realnameStatus[this.realnameAuthenticationPersonal]
  19. }})
  20. <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
  21. </div>
  22. <div style="width: 600px" v-if="realnameAuthenticationPersonal == '0'">
  23. <el-form
  24. ref="form"
  25. :rules="formRules"
  26. :model="form"
  27. label-width="160px"
  28. class="demo-ruleForm"
  29. style="margin-left: 100px; margin-top: 20px; width: 700px"
  30. >
  31. <el-form-item :label="$t('common.realName')" prop="name">
  32. <el-input
  33. :placeholder="$t('common.namePlaceholder')"
  34. v-model="form.name"
  35. style="width: 70%"
  36. maxlength="10"
  37. show-word-limit
  38. ></el-input>
  39. </el-form-item>
  40. <el-form-item :label="$t('common.nationality')" prop="nationalityDict">
  41. <el-select
  42. :placeholder="$t('common.nationalityPlaceholder')"
  43. v-model="form.nationalityDict"
  44. style="width: 70%"
  45. >
  46. <el-option
  47. v-for="item in nationalityDicts"
  48. :label="item.label"
  49. :value="item.value"
  50. ></el-option>
  51. </el-select>
  52. </el-form-item>
  53. <el-form-item :label="$t('common.idType')" prop="idTypeDict">
  54. <el-select
  55. :placeholder="$t('common.idTypePlaceholder')"
  56. v-model="form.idTypeDict"
  57. style="width: 70%"
  58. :no-data-text="$i18n.locale == 'zh' ? '无数据' : 'no data'"
  59. >
  60. <el-option
  61. v-for="item in userIdCardTypes"
  62. :label="item.label"
  63. :value="item.value"
  64. ></el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item
  68. v-if="form.idTypeDict == 0 && form.idTypeDict != ''"
  69. :label="$t('common.idNumber')"
  70. prop="idNumber"
  71. key="formIdNumber1"
  72. >
  73. <el-input
  74. :placeholder="$t('common.idNumberPlaceholder')"
  75. v-model="form.idNumber"
  76. style="width: 70%"
  77. maxlength="18"
  78. show-word-limit
  79. ></el-input>
  80. </el-form-item>
  81. <el-form-item v-else :label="$t('common.idNumber')" key="formIdNumber2">
  82. <el-input
  83. :placeholder="$t('common.idNumberPlaceholder')"
  84. v-model="form.idNumber"
  85. style="width: 70%"
  86. maxlength="18"
  87. show-word-limit
  88. ></el-input>
  89. </el-form-item>
  90. <el-form-item :label="$t('common.gender')">
  91. <el-radio
  92. v-model="form.genderDict"
  93. v-for="item in genderDicts"
  94. :label="item.value"
  95. >{{ item.label }}</el-radio
  96. >
  97. <!-- <el-radio v-model="form.gender" label="F">女</el-radio>-->
  98. </el-form-item>
  99. <el-form-item
  100. :label="$t('common.idNumberFrontPhoto')"
  101. style="position: relative"
  102. prop="idNumberFrontPhoto"
  103. >
  104. <el-upload
  105. class="avatar-uploader"
  106. action="/api/file/upload/img?module=authenticationPersonal"
  107. :show-file-list="false"
  108. :on-success="frontHandleAvatarSuccess"
  109. :headers="myHeaders"
  110. :before-upload="beforeAvatarUpload1"
  111. >
  112. <img
  113. v-if="form.idNumberFrontPhoto"
  114. :src="'/api/file/pub/' + form.idNumberFrontPhoto"
  115. class="avatar"
  116. />
  117. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  118. </el-upload>
  119. <div
  120. style="
  121. position: absolute;
  122. left: 230px;
  123. top: 0;
  124. font-size: 12px;
  125. color: #666;
  126. line-height: 22px;
  127. "
  128. >
  129. {{ $t("common.frontPhotoRemark1")
  130. }}<span style="color: #ff8400">{{
  131. $t("common.frontPhotoRemark2")
  132. }}</span>
  133. {{ $t("common.frontPhotoRemark3") }}
  134. </div>
  135. </el-form-item>
  136. <el-form-item
  137. :label="$t('common.idNumberReversePhoto')"
  138. style="position: relative"
  139. prop="idNumberReversePhoto"
  140. >
  141. <el-upload
  142. class="avatar-uploader"
  143. action="/api/file/upload/img?module=authenticationPersonal"
  144. :show-file-list="false"
  145. :headers="myHeaders"
  146. :on-success="reverseHandleAvatarSuccess"
  147. :before-upload="beforeAvatarUpload2"
  148. >
  149. <img
  150. v-if="form.idNumberReversePhoto"
  151. :src="'/api/file/pub/' + form.idNumberReversePhoto"
  152. class="avatar"
  153. />
  154. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  155. </el-upload>
  156. <!-- <div style="position: absolute;left: 230px;top: 0;font-size: 12px;color: #666;line-height: 22px;">{{$t('common.reversePhotoRemark')}}</div>-->
  157. </el-form-item>
  158. <el-form-item :label="$t('common.idNumberEndTime')">
  159. <el-date-picker
  160. v-model="form.idNumberEndTime"
  161. type="date"
  162. style="width: 70%"
  163. :placeholder="$t('common.idNumberEndTimePlaceholder')"
  164. >
  165. </el-date-picker>
  166. <el-radio
  167. v-model="form.idNumberTerm"
  168. label="1"
  169. style="margin-left: 30px"
  170. >{{ $t("common.idNumberTerm") }}</el-radio
  171. >
  172. </el-form-item>
  173. </el-form>
  174. </div>
  175. <div
  176. v-if="realnameAuthenticationPersonal == '1'"
  177. style="margin-top: 122px; margin-left: 273px; height: 200px"
  178. >
  179. <img
  180. src="@/assets/img/userCenter/u55899.png"
  181. alt=""
  182. style="vertical-align: top; float: left"
  183. />
  184. <span
  185. style="float: left; margin-top: 40px; line-height: 30px; color: #666"
  186. >
  187. <div style="font-size: 18px; font-weight: 700">
  188. {{ $t("common.authenticationYes") }}
  189. </div>
  190. <div>{{ $t("common.realName") }} {{ this.username }}</div>
  191. <div>{{ $t("common.idNumber") }} {{ this.number }}</div>
  192. </span>
  193. </div>
  194. <div
  195. v-if="realnameAuthenticationPersonal == '2'"
  196. style="margin-top: 122px; margin-left: 273px; height: 200px"
  197. >
  198. <img
  199. src="@/assets/img/userCenter/u55899.png"
  200. alt=""
  201. style="vertical-align: top; float: left"
  202. />
  203. <span
  204. style="float: left; margin-top: 40px; line-height: 30px; color: #666"
  205. >
  206. <div style="font-size: 18px; font-weight: 700">
  207. {{ $t("common.underReview") }}
  208. </div>
  209. </span>
  210. </div>
  211. <div
  212. v-if="realnameAuthenticationPersonal == '3'"
  213. style="margin-top: 122px; margin-left: 273px; height: 200px"
  214. >
  215. <img
  216. src="@/assets/img/userCenter/u55899.png"
  217. alt=""
  218. style="vertical-align: top; float: left"
  219. />
  220. <span
  221. style="float: left; margin-top: 40px; line-height: 30px; color: #666"
  222. >
  223. <div style="font-size: 18px; font-weight: 700">
  224. {{ $t("common.auditFailed") }}:{{
  225. this.form.realnameValidatedProposal
  226. }}
  227. </div>
  228. </span>
  229. </div>
  230. <div style="height: 200px">
  231. <div style="margin-top: 100px">
  232. <el-button
  233. type="warning"
  234. style="margin-left: 300px"
  235. @click="goAithentication"
  236. v-if="realnameAuthenticationPersonal == '0'"
  237. >{{ $t("common.back") }}</el-button
  238. >
  239. <el-button
  240. type="warning"
  241. style="margin-left: 300px"
  242. @click="goAithentication2"
  243. v-if="realnameAuthenticationPersonal == '3'"
  244. >{{ $t("common.modifyAuthentication") }}</el-button
  245. >
  246. <el-button
  247. type="primary"
  248. style="margin-left: 30px"
  249. @click="submitAithentication"
  250. v-if="realnameAuthenticationPersonal == '0'"
  251. >{{ $t("common.submitAuthentication") }}</el-button
  252. >
  253. </div>
  254. </div>
  255. </div>
  256. </template>
  257. <script>
  258. import {
  259. submitAuthenticationPersonal,
  260. getAuthenticationStatus,
  261. } from "@/api/userCenter/authenticationPersonal.js";
  262. import { getToken } from "@/utils/auth";
  263. import { formatDate } from "@/utils/formatUtils";
  264. import { getDicts } from "@/api/dict";
  265. import Base from "@/views/base/Base";
  266. import { addIntegral } from "@/utils/toCompleteTask";
  267. export default {
  268. name: "userCenterAuthenticationPersonal",
  269. extends: Base,
  270. data() {
  271. return {
  272. informationsClass: "1",
  273. dialogVisible: false,
  274. realnameAuthenticationPersonal: "",
  275. ifDiaslog: "",
  276. title: "",
  277. personnelAuthenticationInfo: "",
  278. myHeaders: { Authorization: "Bearer " + getToken() },
  279. number: "",
  280. username: "",
  281. personnelId: "",
  282. form: {
  283. name: "",
  284. idTypeDict: "",
  285. idNumber: "",
  286. genderDict: "M",
  287. nationalityDict: "",
  288. idNumberEndTime: "",
  289. idNumberTerm: "",
  290. idNumberFrontPhoto: "",
  291. idNumberReversePhoto: "",
  292. realnameValidatedProposal: "",
  293. },
  294. personnelAuthenticationInfo: {},
  295. genderDicts: [],
  296. nationalityDicts: [],
  297. nationDicts: [],
  298. userIdCardTypes: [],
  299. realnameStatus: {
  300. 0: this.$t("common.NotCertified"),
  301. 1: this.$t("common.Certified"),
  302. 2: this.$t("common.UnderReview"),
  303. 3: this.$t("common.Failed"),
  304. },
  305. user: {
  306. umsUser: {},
  307. },
  308. };
  309. },
  310. watch: {
  311. "$i18n.locale"() {
  312. this.initData();
  313. this.realnameStatus = {
  314. 0: this.$t("common.NotCertified"),
  315. 1: this.$t("common.Certified"),
  316. 2: this.$t("common.UnderReview"),
  317. 3: this.$t("common.Failed"),
  318. };
  319. },
  320. },
  321. mounted() {
  322. this.initData();
  323. },
  324. computed: {
  325. userIdCardTypesMap: function () {
  326. return this.userIdCardTypes.array2Obj("value", "label");
  327. },
  328. genderMap: function () {
  329. return this.genderDicts.array2Obj("value", "label");
  330. },
  331. nationalityMap: function () {
  332. return this.nationalityDicts.array2Obj("value", "label");
  333. },
  334. formRules() {
  335. return {
  336. name: [
  337. {
  338. required: true,
  339. message: this.$t("common.namePlaceholder"),
  340. trigger: "blur",
  341. },
  342. ],
  343. nationalityDict: [
  344. {
  345. required: true,
  346. message: this.$t("common.nationalityPlaceholder"),
  347. trigger: "blur",
  348. },
  349. ],
  350. idTypeDict: [
  351. {
  352. required: true,
  353. message: this.$t("common.idTypePlaceholder"),
  354. trigger: "blur",
  355. },
  356. ],
  357. idNumber: [
  358. {
  359. required: true,
  360. message: this.$t("common.idNumberPlaceholder"),
  361. trigger: "blur",
  362. },
  363. {
  364. pattern:
  365. /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
  366. message: this.$t("common.PleaseEnterYourLegalIDNumber"),
  367. trigger: "blur",
  368. },
  369. ],
  370. idNumberFrontPhoto: [
  371. {
  372. required: true,
  373. message: this.$t("common.frontPhotoPlaceholder"),
  374. trigger: "blur",
  375. },
  376. ],
  377. idNumberReversePhoto: [
  378. {
  379. required: true,
  380. message: this.$t("common.reversePhotoPlaceholder"),
  381. trigger: "blur",
  382. },
  383. ],
  384. };
  385. },
  386. },
  387. methods: {
  388. initData() {
  389. this.user = JSON.parse(window.localStorage.getItem("user"));
  390. //查询用户是否认证
  391. var user = localStorage.getItem("user");
  392. var userInfo = JSON.parse(user);
  393. this.personnelId = userInfo.umsUser.personnelId;
  394. getAuthenticationStatus(this.personnelId)
  395. .then((result) => {
  396. var data = result.data;
  397. console.log(data);
  398. if (data == "" || data == undefined) {
  399. this.realnameAuthenticationPersonal = "0";
  400. return;
  401. }
  402. if (data.realnameValidatedStatusDict == "04") {
  403. this.realnameAuthenticationPersonal = "1";
  404. this.number =
  405. data.idNumber.substr(0, 2) + "****" + data.idNumber.substr(14);
  406. this.username =
  407. data.name.substr(0, 1) + "***" + data.name.substr(3);
  408. } else if (data.realnameValidatedStatusDict == "02") {
  409. this.realnameAuthenticationPersonal = "2";
  410. } else if (data.realnameValidatedStatusDict == "03") {
  411. //认证不通过
  412. this.realnameAuthenticationPersonal = "3";
  413. this.form.realnameValidatedProposal =
  414. data.realnameValidatedProposal;
  415. this.personnelAuthenticationInfo = data;
  416. } else {
  417. this.realnameAuthenticationPersonal = "0";
  418. }
  419. // 认证通过
  420. window.localStorage.setItem(
  421. "realNameVerifyPassed",
  422. data.realnameValidatedStatusDict
  423. );
  424. })
  425. .catch((error) => {
  426. this.$message({
  427. message: error.msg,
  428. type: " error",
  429. });
  430. this.realnameAuthenticationPersonal = "0";
  431. });
  432. // getDicts('GENDER_DICT,NATIONALITY_DICT,NATION_DICT,USER_ID_CARD_TYPE').then(result => {
  433. getDicts(
  434. this.$i18n.locale.toUpperCase() == "ZH"
  435. ? "GENDER_DICT,UNIT_COUNTRY_DICT,NATION_DICT,USER_ID_CARD_TYPE"
  436. : "GENDER_DICT_EN,UNIT_COUNTRY_DICT_EN,NATION_DICT_EN,USER_ID_CARD_TYPE_EN"
  437. ).then((result) => {
  438. var data = result.data;
  439. if (data) {
  440. this.genderDicts = result.data["0"] || [];
  441. this.nationalityDicts = result.data["1"] || [];
  442. this.nationDicts = result.data["2"] || [];
  443. this.userIdCardTypes = result.data["3"] || [];
  444. }
  445. });
  446. //realnameAuthenticationPersonal
  447. },
  448. goAithentication(num) {
  449. this.$emit("aithentication", 1);
  450. },
  451. goAithentication2(num) {
  452. this.realnameAuthenticationPersonal = "0";
  453. this.form = this.personnelAuthenticationInfo;
  454. },
  455. frontHandleAvatarSuccess(res, file) {
  456. // this.frontImageUrl = URL.createObjectURL(res.data);
  457. this.form.idNumberFrontPhoto = res.data;
  458. },
  459. reverseHandleAvatarSuccess(res, file) {
  460. // this.from.idNumberReversePhoto = URL.createObjectURL(res.data);
  461. this.form.idNumberReversePhoto = res.data;
  462. },
  463. beforeAvatarUpload1(file) {
  464. const isJPG = file.type === "image/jpeg";
  465. const isLt2M = file.size / 1024 / 1024 < 2;
  466. /* if (!isJPG) {
  467. this.$message.error('上传头像图片只能是 JPG 格式!');
  468. return;
  469. }*/
  470. if (!isLt2M) {
  471. this.$message.error(this.$t("common.uploadInfo"));
  472. return;
  473. }
  474. // return isJPG && isLt2M;
  475. },
  476. beforeAvatarUpload2(file) {
  477. const isJPG = file.type === "image/jpeg";
  478. const isLt2M = file.size / 1024 / 1024 < 2;
  479. /* if (!isJPG) {
  480. this.$message.error('上传头像图片只能是 JPG 格式!');
  481. return;
  482. }*/
  483. if (!isLt2M) {
  484. this.$message.error(this.$t("common.uploadInfo"));
  485. return;
  486. }
  487. // return isJPG && isLt2M;
  488. },
  489. formRules() {
  490. return {
  491. /*unitName: [
  492. {
  493. required: true,
  494. message: this.$t('common.PleaseEnter') + ' ' + this.$t('common.fullName'),
  495. trigger: 'blur'
  496. }
  497. ]*/
  498. };
  499. },
  500. submitAithentication() {
  501. this.$refs["form"].validate((valid) => {
  502. if (valid) {
  503. this.print();
  504. if (this.user.umsUser.userUsertypeDict !== "2") {
  505. addIntegral("point_task_verified_name", "50");
  506. }
  507. } else {
  508. this.$notify.error({
  509. title: this.$t("common.errorInfo"),
  510. message: this.$t("common.Supplementary2"),
  511. });
  512. return false;
  513. }
  514. });
  515. },
  516. print() {
  517. this.submitHandler((token) => {
  518. //使用的审核字典 audit_status_dict 02待审核 04审核通过 03审核驳回
  519. this.personnelAuthenticationInfo = this.form;
  520. this.personnelAuthenticationInfo.idNumberEndTime = this.form
  521. .idNumberEndTime
  522. ? formatDate(this.form.idNumberEndTime, "YYYY-MM-DD HH:mm:ss")
  523. : "";
  524. this.personnelAuthenticationInfo.idType =
  525. this.userIdCardTypesMap[this.personnelAuthenticationInfo.idTypeDict];
  526. this.personnelAuthenticationInfo.nationality =
  527. this.nationalityMap[this.personnelAuthenticationInfo.nationalityDict];
  528. this.personnelAuthenticationInfo.gender =
  529. this.genderMap[this.personnelAuthenticationInfo.genderDict];
  530. this.personnelAuthenticationInfo.personnelId = this.personnelId;
  531. //待审核
  532. this.personnelAuthenticationInfo.realnameValidatedStatusDict = "02";
  533. this.personnelAuthenticationInfo.realnameValidatedStatus = "待审核";
  534. this.personnelAuthenticationInfo.language = this.$i18n.locale;
  535. submitAuthenticationPersonal(
  536. JSON.stringify(this.personnelAuthenticationInfo)
  537. )
  538. .then((result) => {
  539. if (result.status == 200 && result.data.length != 0) {
  540. this.$message({
  541. message: this.$t("common.successInfo"),
  542. type: "success",
  543. });
  544. // personnelAuthenticationInfo.id=result.data;
  545. //待审核
  546. this.realnameAuthenticationPersonal = "2";
  547. }
  548. })
  549. .catch((error) => {
  550. this.$message({
  551. message: error.msg,
  552. type: "error",
  553. });
  554. });
  555. });
  556. },
  557. /* submitAithentication(){
  558. //使用的审核字典 audit_status_dict 0未审核 1审核通过 2审核驳回
  559. this.personnelAuthenticationInfo = this.form;
  560. /!* this.personnelAuthenticationInfo.idNumberEndTime = this.form.idNumberEndTime
  561. ? formatDate(this.form.idNumberEndTime, "YYYY-MM-DD HH:mm:ss")
  562. : "";*!/
  563. this.personnelAuthenticationInfo.idType=this.userIdCardTypesMap[this.personnelAuthenticationInfo.idTypeDict];
  564. this.personnelAuthenticationInfo.nationality=this.nationalityMap[this.personnelAuthenticationInfo.nationalityDict];
  565. this.personnelAuthenticationInfo.gender=this.genderMap[this.personnelAuthenticationInfo.genderDict];
  566. this.personnelAuthenticationInfo.personnelId = this.personnelId;
  567. //待审核
  568. this.personnelAuthenticationInfo.realnameValidatedStatusDict ="0";
  569. this.personnelAuthenticationInfo.realnameValidatedStatus="待审核";
  570. submitAuthenticationPersonal(JSON.stringify(this.personnelAuthenticationInfo)).then((result) => {
  571. if(result.status == 200 && result.data.length != 0){
  572. this.$message({
  573. message: "提交成功,请等待审核通过!",
  574. type: 'success'
  575. });
  576. // personnelAuthenticationInfo.id=result.data;
  577. //待审核
  578. this.realnameAuthenticationPersonal = "2";
  579. }
  580. }).catch((error) => {
  581. this.$message({
  582. message: error.msg,
  583. type: 'error'
  584. });
  585. })
  586. },*/
  587. },
  588. };
  589. </script>
  590. <style scoped>
  591. .el-button {
  592. width: 200px;
  593. height: 45px;
  594. }
  595. .authenticationBox1 {
  596. margin-left: 35px;
  597. margin-right: 150px;
  598. height: 100px;
  599. border: 1px solid rgba(153, 153, 153, 1);
  600. border-radius: 10px;
  601. margin-top: 50px;
  602. position: relative;
  603. }
  604. .authenticationBox2 {
  605. margin: 50px 150px 0 35px;
  606. height: 100px;
  607. border: 1px solid rgba(153, 153, 153, 1);
  608. border-radius: 10px;
  609. position: relative;
  610. }
  611. .authenticationBox1:hover,
  612. .authenticationBox2:hover {
  613. border: 1px solid #ff8400;
  614. }
  615. .avatar-uploader .el-upload {
  616. border: 1px dashed #d9d9d9;
  617. border-radius: 6px;
  618. cursor: pointer;
  619. position: relative;
  620. overflow: hidden;
  621. }
  622. .avatar-uploader .el-upload:hover {
  623. border-color: #409eff;
  624. }
  625. .userCenterAuthenticationPersonal >>> .el-upload {
  626. border: 1px solid rgba(204, 204, 204, 1);
  627. }
  628. .avatar-uploader-icon {
  629. font-size: 28px;
  630. color: #8c939d;
  631. width: 178px;
  632. height: 178px;
  633. line-height: 178px;
  634. text-align: center;
  635. }
  636. .avatar {
  637. width: 178px;
  638. height: 178px;
  639. display: block;
  640. }
  641. </style>