index.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949
  1. <template>
  2. <div>
  3. <el-dialog
  4. title="资料填写"
  5. :visible.sync="isShow"
  6. width="1000px"
  7. :close-on-click-modal="false"
  8. :close-on-press-escape="false"
  9. :show-close="false"
  10. >
  11. <div class="info__content">
  12. <el-row :gutter="20">
  13. <el-form
  14. :model="infoForm"
  15. ref="infoForm"
  16. :rules="rules"
  17. :disabled="STATUS"
  18. >
  19. <el-col
  20. v-for="(item, index) in listData"
  21. :span="item.fieldKey == 'commitment_electr_signature' ? 24 : 12"
  22. :key="index"
  23. >
  24. <el-form-item
  25. v-if="item.inputType == 1"
  26. :label="item.fieldName"
  27. label-width="120px"
  28. :prop="item.fieldKey"
  29. >
  30. <el-input
  31. :disabled="
  32. (item.fieldKey == 'name' && nameDisabledStatus) ||
  33. (item.fieldKey == 'idcard' && idcardDisabledStatus) ||
  34. (item.fieldKey == 'telphone' && telphoneDisabledStatus)
  35. ? true
  36. : false
  37. "
  38. clearable
  39. v-model.trim="infoForm[item.fieldKey]"
  40. :placeholder="`请输入${item.fieldName}`"
  41. />
  42. </el-form-item>
  43. <el-form-item
  44. v-else-if="item.inputType == 2"
  45. :label="item.fieldName"
  46. label-width="120px"
  47. :prop="item.fieldKey"
  48. >
  49. <el-select
  50. v-model="infoForm[item.fieldKey]"
  51. :placeholder="`请选择${item.fieldName}`"
  52. clearable
  53. >
  54. <el-option
  55. v-for="(items, indexs) in options[item.fieldKey]"
  56. :key="indexs"
  57. :label="items"
  58. :value="items"
  59. :disabled="
  60. item.fieldKey == 'education'
  61. ? eduDisAbledStatus(items)
  62. : false
  63. "
  64. >
  65. </el-option>
  66. </el-select>
  67. </el-form-item>
  68. <template v-else-if="item.inputType == 3 || item.inputType == 4">
  69. <div
  70. class="cns_sq"
  71. v-if="item.fieldKey == 'commitment_electr_signature'"
  72. >
  73. <div class="left">
  74. <h3>承诺书</h3>
  75. <p>
  76. 本人自愿做出如下承诺:本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
  77. 全部内容并知晓和理解,本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定,本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求,如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
  78. </p>
  79. <p style="text-align: end;">特此承诺!</p>
  80. </div>
  81. <div class="right">
  82. <h3>
  83. <span>
  84. 签名板:<span class="texts"
  85. >(请在下方签名区进行签名)</span
  86. >
  87. </span>
  88. <span class="btn_text" @click="retDraw" v-if="!STATUS"
  89. >清空</span
  90. >
  91. </h3>
  92. <el-form-item
  93. label=""
  94. label-width="0px"
  95. :prop="item.fieldKey"
  96. >
  97. <vue-esign
  98. v-if="!infoForm[item.fieldKey]"
  99. ref="esign"
  100. :isCrop="false"
  101. :lineWidth="5"
  102. :lineColor="'#333'"
  103. :bgColor="'#fff'"
  104. :height="480"
  105. :isClearBgColor="false"
  106. />
  107. <img
  108. v-else
  109. style="width: 100%; height: 100%"
  110. :src="$tools.splitImgHost(infoForm[item.fieldKey])"
  111. />
  112. </el-form-item>
  113. </div>
  114. </div>
  115. <el-form-item
  116. v-else
  117. :label="item.fieldName"
  118. label-width="120px"
  119. :prop="item.fieldKey"
  120. >
  121. <div
  122. v-if="infoForm[item.fieldKey]"
  123. style="display: inline-block;"
  124. >
  125. <el-image
  126. fit="contain"
  127. style="width: 80px; height: 80px;border-radius: 8px;border: 2px dotted #eee;"
  128. :src="$tools.splitImgHost(infoForm[item.fieldKey])"
  129. :preview-src-list="[
  130. $tools.splitImgHost(infoForm[item.fieldKey])
  131. ]"
  132. >
  133. </el-image
  134. ><span
  135. v-if="item.fieldKey == 'commitment_seal' || !STATUS"
  136. class="btn_text"
  137. @click="infoForm[item.fieldKey] = ''"
  138. >删除</span
  139. >
  140. </div>
  141. <label v-else style="display: inline-block;">
  142. <div class="uploadBox">
  143. <i class="el-icon-plus"></i>
  144. </div>
  145. <input
  146. style="display: none;"
  147. type="file"
  148. @change="uploadImg($event, item.fieldKey)"
  149. />
  150. </label>
  151. <span
  152. v-if="item.fieldKey == 'commitment_seal'"
  153. class="btn_text"
  154. @click="downloadStamp"
  155. >下载模板</span
  156. >
  157. <span style="vertical-align: bottom;color: #a4a4a4;" v-else>{{
  158. item.fieldKey == "recent_photos"
  159. ? "竖向白底证件照 文件大小<2M"
  160. : "文件大小<2M"
  161. }}</span>
  162. </el-form-item>
  163. </template>
  164. <el-form-item
  165. v-else-if="item.inputType == 5"
  166. :label="item.fieldName"
  167. label-width="120px"
  168. :prop="item.fieldKey"
  169. ><el-date-picker
  170. type="date"
  171. v-model="infoForm[item.fieldKey]"
  172. :placeholder="`请选择${item.fieldName}`"
  173. value-format="yyyy-MM-dd"
  174. >
  175. </el-date-picker>
  176. </el-form-item>
  177. </el-col>
  178. </el-form>
  179. </el-row>
  180. </div>
  181. <span slot="footer" class="dialog-footer">
  182. <el-button @click="close">取 消</el-button>
  183. <el-button type="primary" @click="submitForm" :loading="uploading"
  184. >确 定</el-button
  185. >
  186. </span>
  187. </el-dialog>
  188. </div>
  189. </template>
  190. <script>
  191. import * as imageConversion from "image-conversion";
  192. export default {
  193. name: "",
  194. props: {},
  195. data() {
  196. return {
  197. listData: [],
  198. options: {},
  199. infoForm: {},
  200. rules: {},
  201. historyData: {}, //历史数据
  202. cacheIdCardData: {}, //身份证数据
  203. nameDisabledStatus: false,
  204. idcardDisabledStatus: false,
  205. telphoneDisabledStatus: false,
  206. uploading: false,
  207. isShow: false,
  208. activeData: {},
  209. idcard_face_photo_old: "",
  210. recent_photos_old: "",
  211. checkStatus:0,//是否审核通过才允许学习 1是0否
  212. STATUS: false //区分个人中心入口操作
  213. };
  214. },
  215. computed: {
  216. eduDisAbledStatus: function() {
  217. return function(item) {
  218. if (
  219. this.activeData.educationName == "继续教育" &&
  220. this.activeData.projectName == "施工现场专业人员" &&
  221. this.activeData.businessName == "七大员"
  222. ) {
  223. if (
  224. this.activeData.categoryName == "材料员" ||
  225. this.activeData.categoryName == "资料员" ||
  226. this.activeData.categoryName == "劳务员"
  227. ) {
  228. let list = [
  229. "职高",
  230. "高中",
  231. "专科",
  232. "本科",
  233. "硕士研究生",
  234. "博士研究生"
  235. ];
  236. return !list.includes(item);
  237. } else {
  238. let list = ["专科", "本科", "硕士研究生", "博士研究生"];
  239. return !list.includes(item);
  240. }
  241. } else {
  242. return false;
  243. }
  244. };
  245. }
  246. },
  247. methods: {
  248. async init(item, status = false) {
  249. this.STATUS = status;
  250. console.log(item, "item");
  251. this.activeData = item;
  252. //获取初始数据
  253. try {
  254. await this.getInitData();
  255. console.log("1");
  256. //获取历史数据
  257. await this.getHistoricalRecord();
  258. console.log("2");
  259. this.isShow = true;
  260. //回填数据
  261. this.backFillData();
  262. console.log("3");
  263. } catch (error) {
  264. console.log("4");
  265. console.log("抛出:", error);
  266. }
  267. },
  268. getInitData() {
  269. return new Promise((resolve, reject) => {
  270. let commitDictAry = {
  271. sex: "sys_user_sex",
  272. education: "edu_level",
  273. working_years: "working_years",
  274. apply_post: "apply_post"
  275. };
  276. this.$request.getbaseprofiletpId(this.activeData.goodsId).then(res => {
  277. if (!res.data) {
  278. //不需要填写
  279. this.isShow = false;
  280. this.$emit("callbackDataReview");
  281. return reject("不需要填写");
  282. }
  283. let Ary = [
  284. ...JSON.parse(res.data.keyValue),
  285. ...JSON.parse(res.data.keyValue2)
  286. ];
  287. let Obj = {};
  288. this.checkStatus = res.data.checkStatus || 0
  289. Ary.forEach(i => {
  290. Obj[i.fieldKey] = [
  291. {
  292. required: i.required,
  293. message: `请${
  294. i.inputType == 1
  295. ? "输入"
  296. : i.inputType == 2 || i.inputType == 5
  297. ? "选择"
  298. : "上传"
  299. }${i.fieldName}`,
  300. trigger: i.inputType == 1 ? "blur" : "change"
  301. }
  302. ];
  303. if (i.fieldKey == "unit_tel" && i.required) {
  304. Obj[i.fieldKey].push({
  305. validator: (rule, value, callback) => {
  306. var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  307. var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
  308. var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
  309. if (
  310. reg_tel.test(value) ||
  311. vartest.test(value) ||
  312. vartest1.test(value)
  313. ) {
  314. return callback();
  315. } else {
  316. return callback(new Error("单位联系电话不正确"));
  317. }
  318. },
  319. trigger: ["change", "blur"]
  320. });
  321. }
  322. if (i.inputType == 2) {
  323. this.options[i.fieldKey] = this.$store.state.dictList[
  324. commitDictAry[i.fieldKey]
  325. ];
  326. }
  327. });
  328. this.rules = Obj;
  329. this.listData = Ary;
  330. resolve();
  331. });
  332. });
  333. },
  334. //获取历史记录
  335. getHistoricalRecord() {
  336. return new Promise((resolve, reject) => {
  337. this.$request
  338. .getbaseprofiletpgetInfo({
  339. goodsId: this.activeData.goodsId,
  340. orderGoodsId: this.activeData.orderGoodsId
  341. })
  342. .then(res => {
  343. if (!res.data) {
  344. //提示填写规则
  345. this.$confirm(`请填写资料`, "温馨提示", {
  346. confirmButtonText: "确定",
  347. cancelButtonText: "取消",
  348. closeOnClickModal: false,
  349. closeOnPressEscape: false,
  350. distinguishCancelAndClose: false,
  351. showClose: false
  352. })
  353. .then(_ => {
  354. let str = this.listData.map(i => i.fieldName).join("、");
  355. this.$confirm(
  356. `
  357. 本产品(或服务)提供【${this.activeData.goodsName}】课程的在线学习功能,为使用这些功能,我们需要使用您设备上的摄像头,并收集以下个人信息:
  358. ${str}
  359. 学习详细记录。
  360. 我们会将上述信息提供至广东省建设执业注册管理中心等第三方组织使用,用于继续教育备案等。如果您拒绝,将导致这些功能无法实现,但不影响您使用本产品(或服务)的其他业务功能。
  361. `,
  362. "提示",
  363. {
  364. confirmButtonText: "确定",
  365. cancelButtonText: "返回",
  366. closeOnClickModal: false,
  367. closeOnPressEscape: false,
  368. distinguishCancelAndClose: false,
  369. showClose: false
  370. }
  371. )
  372. .then(_ => {
  373. resolve();
  374. })
  375. .catch(_ => {
  376. //停止执行-退出页面
  377. this.$router.back(-1);
  378. });
  379. })
  380. .catch(_ => {
  381. //停止执行-退出页面
  382. this.$router.back(-1);
  383. });
  384. } else if (res.data.status === 3 && res.data.changeStatus === 1) {
  385. //资料审核不通过,请前往重新填写
  386. this.$confirm(`资料审核不通过,请前往重新填写`, "提示", {
  387. confirmButtonText: "确定",
  388. cancelButtonText: "返回",
  389. closeOnClickModal: false,
  390. closeOnPressEscape: false,
  391. distinguishCancelAndClose: false,
  392. showClose: false
  393. })
  394. .then(_ => {
  395. this.historyData = Object.assign(
  396. { id: res.data.id },
  397. JSON.parse(res.data.keyValue)
  398. ); //历史数据
  399. resolve();
  400. })
  401. .catch(_ => {
  402. //停止执行-退出页面
  403. this.$router.back(-1);
  404. });
  405. } else if (this.STATUS) {
  406. this.historyData = Object.assign(
  407. { id: res.data.id },
  408. JSON.parse(res.data.keyValue)
  409. ); //历史数据
  410. resolve();
  411. }else if(this.checkStatus == 1 && res.data.status !== 1){
  412. //后台设置需要审核通过才允许学习
  413. this.$confirm(`资料正在审核中,暂无法学习,请耐心等待!如需加急审核,请联系客服人员`, "提示", {
  414. confirmButtonText: "确定",
  415. cancelButtonText: "返回",
  416. closeOnClickModal: false,
  417. closeOnPressEscape: false,
  418. distinguishCancelAndClose: false,
  419. showClose: false
  420. })
  421. .then(_ => {
  422. //停止执行-退出页面
  423. this.$router.back(-1);
  424. })
  425. .catch(_ => {
  426. //停止执行-退出页面
  427. this.$router.back(-1);
  428. });
  429. }else {
  430. this.isShow = false;
  431. //不需要填写
  432. this.$emit("callbackDataReview");
  433. return reject("不需要填写");
  434. }
  435. });
  436. });
  437. },
  438. //回填数据
  439. backFillData() {
  440. if (Object.keys(this.historyData).length > 0 || this.historyData.id) {
  441. for (let i in this.historyData) {
  442. this.$set(this.infoForm, i, this.historyData[i].value);
  443. if (i == "recent_photos") {
  444. this.recent_photos_old = this.historyData[i].value;
  445. }
  446. if (i == "idcard_face_photo") {
  447. this.idcard_face_photo_old = this.historyData[i].value;
  448. }
  449. }
  450. this.$nextTick(() => {
  451. this.$refs["infoForm"].clearValidate();
  452. });
  453. } else {
  454. if (!this.infoForm["name"]) {
  455. if (this.$store.state.userInfo.realname) {
  456. this.$set(
  457. this.infoForm,
  458. "name",
  459. this.$store.state.userInfo.realname
  460. );
  461. this.nameDisabledStatus = true;
  462. }
  463. } else {
  464. this.nameDisabledStatus = true;
  465. }
  466. if (!this.infoForm["idcard"]) {
  467. if (this.$store.state.userInfo.idCard) {
  468. this.$set(
  469. this.infoForm,
  470. "idcard",
  471. this.$store.state.userInfo.idCard
  472. );
  473. this.idcardDisabledStatus = true;
  474. }
  475. } else {
  476. this.idcardDisabledStatus = true;
  477. }
  478. if (!this.infoForm["telphone"]) {
  479. if (this.$store.state.userInfo.telphone) {
  480. this.$set(
  481. this.infoForm,
  482. "telphone",
  483. this.$store.state.userInfo.telphone
  484. );
  485. this.telphoneDisabledStatus = true;
  486. }
  487. } else {
  488. this.telphoneDisabledStatus = true;
  489. }
  490. if (
  491. !this.infoForm["work_unit"] &&
  492. this.$store.state.userInfo.companyName
  493. ) {
  494. this.$set(
  495. this.infoForm,
  496. "work_unit",
  497. this.$store.state.userInfo.companyName
  498. );
  499. }
  500. if (!this.infoForm["sex"] && this.$store.state.userInfo.sex) {
  501. this.$set(
  502. this.infoForm,
  503. "sex",
  504. this.$store.state.userInfo.sex == 1
  505. ? "男"
  506. : this.$store.state.userInfo.sex == 2
  507. ? "女"
  508. : null
  509. );
  510. }
  511. if (
  512. !this.infoForm["education"] &&
  513. this.$store.state.userInfo.eduLevel &&
  514. !(
  515. this.activeData.educationName == "继续教育" &&
  516. this.activeData.projectName == "施工现场专业人员" &&
  517. this.activeData.businessName == "七大员"
  518. )
  519. ) {
  520. this.$set(
  521. this.infoForm,
  522. "education",
  523. this.$store.state.userInfo.eduLevel
  524. );
  525. }
  526. if (
  527. !this.infoForm["recent_photos"] &&
  528. this.$store.state.userInfo.oneInchPhotos
  529. ) {
  530. this.$set(
  531. this.infoForm,
  532. "recent_photos",
  533. this.$store.state.userInfo.oneInchPhotos
  534. );
  535. this.recent_photos_old = this.$store.state.userInfo.oneInchPhotos;
  536. }
  537. if (
  538. !this.infoForm["idcard_face_photo"] &&
  539. this.$store.state.userInfo.idCardImg1
  540. ) {
  541. this.$set(
  542. this.infoForm,
  543. "idcard_face_photo",
  544. this.$store.state.userInfo.idCardImg1
  545. );
  546. this.idcard_face_photo_old = this.$store.state.userInfo.idCardImg1;
  547. }
  548. if (
  549. !this.infoForm["idcard_national_photo"] &&
  550. this.$store.state.userInfo.idCardImg2
  551. ) {
  552. this.$set(
  553. this.infoForm,
  554. "idcard_national_photo",
  555. this.$store.state.userInfo.idCardImg2
  556. );
  557. }
  558. }
  559. },
  560. //照片处理逻辑
  561. async uploadImg(e, item) {
  562. try {
  563. let A = ["idcard_face_photo", "idcard_national_photo"].indexOf(item);
  564. let file = await this.uploadRules(e.target.files[0]);
  565. if (A !== -1) {
  566. const res = await this.faceCertificationIDCardOCR(A + 1, file);
  567. if (res.code == 500) {
  568. this.$message.error(res.msg);
  569. } else {
  570. this.cacheIdCardData = res.data;
  571. //身份证姓名身份证比对
  572. await this.idCardDataComparison();
  573. this.$set(this.infoForm, item, res.data.IdImgPath);
  574. }
  575. } else {
  576. this.$set(
  577. this.infoForm,
  578. item,
  579. await this.$upload.upload(file, 0, {}, false)
  580. );
  581. }
  582. this.$refs["infoForm"].validateField(item);
  583. e.target.value = "";
  584. } catch (error) {
  585. e.target.value = "";
  586. }
  587. },
  588. //清空签名板
  589. retDraw() {
  590. this.$set(this.infoForm, "commitment_electr_signature", "");
  591. this.$nextTick(() => {
  592. this.$refs.esign[0].reset();
  593. });
  594. },
  595. //校验及压缩
  596. uploadRules(file) {
  597. return new Promise((resolve, reject) => {
  598. const fileType = file.type;
  599. const isImage = fileType.indexOf("image") != -1;
  600. const sizeToM = file.size / 1024 / 1024;
  601. if (!isImage) {
  602. this.$message.error("只能上传图片格式png、jpg、gif!");
  603. reject(false);
  604. }
  605. if (sizeToM > 2) {
  606. imageConversion
  607. .compressAccurately(file, {
  608. size: 1024 * 2,
  609. width: 1000,
  610. height: 1000
  611. })
  612. .then(res => {
  613. res = new File([res], file.name, { type: res.type });
  614. resolve(res);
  615. });
  616. } else {
  617. resolve(file);
  618. }
  619. });
  620. },
  621. //身份证校验
  622. faceCertificationIDCardOCR(cardSide, file) {
  623. return new Promise(resolve => {
  624. var reader = new FileReader();
  625. // 将文件加载进入
  626. reader.readAsDataURL(file);
  627. reader.onload = e => {
  628. // 转换完成输出该文件base64编码
  629. let base64 = e.target.result;
  630. this.$request
  631. .faceCertificationIDCardOCR({
  632. cardSide: cardSide, //1人像 2 国徽
  633. cardImageBase64: base64,
  634. gradeId: this.activeData.gradeId
  635. })
  636. .then(res => {
  637. resolve(res);
  638. })
  639. .catch(err => {
  640. resolve(err);
  641. });
  642. };
  643. });
  644. },
  645. //身份证姓名身份证比对
  646. idCardDataComparison() {
  647. return new Promise((resolve, reject) => {
  648. if (
  649. this.infoForm["name"] &&
  650. this.cacheIdCardData["IdName"] &&
  651. this.infoForm["name"] !== this.cacheIdCardData["IdName"]
  652. ) {
  653. var str = "输入的姓名和身份证人像面照片姓名不匹配,请联系客服";
  654. this.$message.warning(str);
  655. reject(str);
  656. } else if (
  657. this.infoForm["idcard"] &&
  658. this.cacheIdCardData["IdNum"] &&
  659. this.infoForm["idcard"] !== this.cacheIdCardData["IdNum"]
  660. ) {
  661. var str = "输入的身份证号和身份证人像面照片身份证号不匹配,请联系客服";
  662. this.$message.warning(str);
  663. reject(str);
  664. } else {
  665. resolve();
  666. }
  667. });
  668. },
  669. async downloadStamp() {
  670. await this.subCanvas();
  671. this.$request
  672. .baseProfileStampV2AddWord({
  673. goodsId: this.activeData.goodsId,
  674. keyValue: this.returnData()
  675. })
  676. .then(res => {
  677. let url = this.$tools.splitImgHost(res.msg);
  678. let name = res.msg.substring(res.msg.lastIndexOf("/") + 1);
  679. let image = new Image();
  680. // 解决跨域 Canvas 污染问题,
  681. image.setAttribute("crossorigin", "anonymous");
  682. image.onload = function() {
  683. var canvas = document.createElement("canvas");
  684. canvas.width = image.width;
  685. canvas.height = image.height;
  686. var context = canvas.getContext("2d");
  687. context.drawImage(image, 0, 0, image.width, image.height);
  688. var base64 = canvas.toDataURL("image/jpg"); //将图片格式转为base64
  689. var a = document.createElement("a"); // 生成一个a元素
  690. var event = new MouseEvent("click"); // 创建一个单击事件
  691. a.download = name; // 设置图片名称
  692. console.log(base64);
  693. a.href = base64; // 将生成的URL设置为a.href属性
  694. a.dispatchEvent(event); // 触发a的单击事件
  695. };
  696. image.src = url + "?time=" + Date.now(); //注意,这里是灵魂,否则依旧会产生跨域问题
  697. });
  698. },
  699. //将canvas签名生产oss地址
  700. subCanvas() {
  701. return new Promise((resolve, reject) => {
  702. const STATUS = this.listData.findIndex(
  703. i => i.fieldKey == "commitment_electr_signature"
  704. );
  705. if (!this.infoForm["commitment_electr_signature"] && STATUS !== -1) {
  706. this.$refs.esign[0]
  707. .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
  708. .then(async res => {
  709. let url = await this.$upload.upload(
  710. this.convertBase64UrlToBlob(res),
  711. 0
  712. );
  713. this.$set(this.infoForm, "commitment_electr_signature", url);
  714. this.$refs["infoForm"].validateField(
  715. "commitment_electr_signature"
  716. );
  717. resolve();
  718. })
  719. .catch(err => {
  720. console.log(err, "err");
  721. resolve();
  722. });
  723. } else {
  724. resolve();
  725. }
  726. });
  727. },
  728. //canvas转file
  729. convertBase64UrlToBlob(urlData) {
  730. var localData = urlData; //dataUrl为base64位
  731. let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码,去掉data:image/png;base64部分
  732. let length = base.length;
  733. let url = new Uint8Array(length);
  734. while (length--) {
  735. url[length] = base.charCodeAt(length);
  736. }
  737. let file = new File([url], "a.jpg", {
  738. type: "image/jpg"
  739. });
  740. //最后将file,通过ajax请求做为参数传给服务器就可以了
  741. return file;
  742. },
  743. //证件照与身份证匹配
  744. IdCardCompareFace() {
  745. return new Promise(async (resolve, reject) => {
  746. if (!(
  747. this.infoForm["idcard_face_photo"] &&
  748. this.infoForm["recent_photos"] && (this.infoForm["idcard_face_photo"] !== this.idcard_face_photo_old || this.infoForm["recent_photos"] !== this.recent_photos_old)
  749. )) {
  750. resolve();
  751. return;
  752. }
  753. this.$request
  754. .faceCertificationIdCardCompareFace({
  755. urlA: this.infoForm["idcard_face_photo"],
  756. oneInchPhotos: await this.$tools.imageToBase64(
  757. this.$tools.splitImgHost(this.infoForm["recent_photos"])
  758. )
  759. })
  760. .then(res => {
  761. if (res.data >= 70) {
  762. resolve();
  763. } else {
  764. var str = "证件照和身份证人像面照片不匹配";
  765. this.$message.warning(str);
  766. reject(str);
  767. }
  768. })
  769. .catch(err => {
  770. reject(err);
  771. });
  772. });
  773. },
  774. close() {
  775. if (this.STATUS) {
  776. this.isShow = false;
  777. } else {
  778. this.$router.back(-1);
  779. }
  780. },
  781. returnData() {
  782. let map = new Map();
  783. this.listData.forEach(i => {
  784. map.set(i.fieldKey, {
  785. fieldKey: i.fieldKey,
  786. value: this.infoForm[i.fieldKey],
  787. fieldName: i.fieldName,
  788. status: this.historyData[i.fieldKey]
  789. ? this.infoForm[i.fieldKey] == this.historyData[i.fieldKey].value
  790. ? 0
  791. : 1
  792. : 0
  793. });
  794. });
  795. return JSON.stringify(Object.fromEntries(map));
  796. },
  797. async submitForm() {
  798. //签名需在表单验证前执行完毕 否则会导致表单验证不通过
  799. await this.subCanvas();
  800. this.$refs["infoForm"].validate(async valid => {
  801. if (valid) {
  802. //独立操作上传承诺书
  803. if (this.STATUS) {
  804. this.uploading = true;
  805. if (this.infoForm["commitment_seal"]) {
  806. this.$request
  807. .baseprofiletpcommitmentupload({
  808. id: this.historyData.id,
  809. imageUrl: this.infoForm["commitment_seal"]
  810. })
  811. .then(res => {
  812. this.$message.success("提交成功");
  813. this.isShow = false;
  814. this.$emit("callbackDataReview");
  815. })
  816. .catch(err => {
  817. this.$message.error(err.msg);
  818. })
  819. .finally(() => {
  820. this.uploading = false;
  821. });
  822. } else {
  823. this.$message.error("请上传承诺书盖章");
  824. this.uploading = false;
  825. }
  826. return;
  827. }
  828. //end
  829. try {
  830. this.uploading = true;
  831. await this.idCardDataComparison();
  832. await this.IdCardCompareFace();
  833. let obj = this.returnData();
  834. if (this.historyData.id) {
  835. let data = {
  836. id: this.historyData.id,
  837. goodsId: this.activeData.goodsId,
  838. orderGoodsId: this.activeData.orderGoodsId,
  839. keyValue: obj
  840. };
  841. this.$request
  842. .editbaseprofiletp(data)
  843. .then(res => {
  844. this.$message.success("提交成功");
  845. this.isShow = false;
  846. this.$emit("callbackDataReview");
  847. })
  848. .catch(err => {
  849. this.$message.warning(err.msg);
  850. })
  851. .finally(() => {
  852. this.uploading = false;
  853. });
  854. } else {
  855. let data = {
  856. profileTpId: this.activeData.goodsId,
  857. goodsId: this.activeData.goodsId,
  858. orderGoodsId: this.activeData.orderGoodsId,
  859. keyValue: obj
  860. };
  861. this.$request
  862. .addbaseprofiletp(data)
  863. .then(res => {
  864. this.$message.success("提交成功");
  865. this.isShow = false;
  866. this.$emit("callbackDataReview");
  867. })
  868. .catch(err => {
  869. this.$message.warning(err.msg);
  870. })
  871. .finally(() => {
  872. this.uploading = false;
  873. });
  874. }
  875. } catch (error) {
  876. this.uploading = false;
  877. }
  878. } else {
  879. console.log("error submit!!");
  880. return false;
  881. }
  882. });
  883. }
  884. }
  885. };
  886. </script>
  887. <style lang="scss" scoped>
  888. /deep/ .el-dialog {
  889. margin-top: 2vh !important;
  890. border-radius: 18px;
  891. & > .el-dialog__header {
  892. border-bottom: 2px solid #eee;
  893. & > .el-dialog__title {
  894. font-size: 16px;
  895. }
  896. }
  897. }
  898. .uploadBox {
  899. border: 2px dotted rgb(190, 190, 190);
  900. display: flex;
  901. align-items: center;
  902. justify-content: center;
  903. width: 80px;
  904. height: 80px;
  905. border-radius: 8px;
  906. & > i {
  907. font-size: 30px;
  908. font-weight: bold;
  909. color: rgb(190, 190, 190);
  910. }
  911. }
  912. .cns_sq {
  913. display: flex;
  914. background-color: rgb(247, 248, 250);
  915. border-radius: 8px;
  916. height: 330px;
  917. margin-bottom: 22px;
  918. .left {
  919. flex: 1;
  920. padding: 10px 20px;
  921. p {
  922. line-height: 30px;
  923. }
  924. }
  925. .right {
  926. flex: 1;
  927. padding: 10px 20px;
  928. h3 {
  929. display: flex;
  930. align-items: center;
  931. justify-content: space-between;
  932. margin-bottom: 16px;
  933. .texts {
  934. color: #a4a4a4;
  935. }
  936. }
  937. }
  938. }
  939. .btn_text {
  940. color: #409eff;
  941. cursor: pointer;
  942. user-select: none;
  943. font-weight: 400;
  944. margin-left: 8px;
  945. }
  946. </style>