index.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942
  1. <template>
  2. <div class="mine">
  3. <!--<navbar />-->
  4. <div class="mine-page">
  5. <div class="left-max-box scrollbar-box">
  6. <p class="left-title">个人中心</p>
  7. <div class="left-user-img">
  8. <userAvatar :user="user" />
  9. </div>
  10. <p class="left-name">{{user.nickName}}</p>
  11. <p class="left-num">{{user.userType=='11'?'工号:':(user.userType=='22'?'学号:':'其他:')}}{{user.userName}}</p>
  12. <div class="left-text-max-box">
  13. <div class="left-text-big-box">
  14. <div class="left-text-big-box-left">
  15. <img v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_xl.png">
  16. <img v-else src="@/assets/ZDimages/mine/icon_grzx_zc.png">
  17. <p>{{user.education?user.education:'未设置'}}</p>
  18. </div>
  19. <div class="left-text-big-box-right">
  20. <img class="img-two" v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_zy.png">
  21. <img class="img-one" v-else src="@/assets/ZDimages/mine/icon_grzx_zw.png">
  22. <p>{{user.major?user.major:'未设置'}}</p>
  23. </div>
  24. </div>
  25. <div class="left-text-min-box">
  26. <img src="@/assets/ZDimages/mine/icon_grzx_sjh.png">
  27. <p>{{user.phonenumber?user.phonenumber:'未设置'}}</p>
  28. </div>
  29. <div class="left-text-min-box">
  30. <img src="@/assets/ZDimages/mine/icon_grzx_yx.png">
  31. <p>{{user.email?user.email:'未设置'}}</p>
  32. </div>
  33. <div class="left-text-min-box">
  34. <img src="@/assets/ZDimages/mine/icon_grzx_bgl.png">
  35. <p>{{user.deptName?user.deptName:'未设置'}}</p>
  36. </div>
  37. </div>
  38. <div class="left-type-text-max-box">
  39. <div>
  40. <p>联系方式</p>
  41. <p :class="user.phonenumber?'p-color-a':'p-color-b'">{{user.phonenumber?'已设置':'未设置'}}</p>
  42. </div>
  43. <div>
  44. <p>系统头像</p>
  45. <p :class="user.avatar?'p-color-a':'p-color-b'">{{user.avatar?'已设置':'未设置'}}</p>
  46. </div>
  47. <div>
  48. <p>人脸照片</p>
  49. <p :class="user.faceImg?'p-color-a':'p-color-b'">{{user.faceImg?'已设置':'未设置'}}</p>
  50. </div>
  51. <div>
  52. <p>电子签名</p>
  53. <p :class="user.signature?'p-color-a':'p-color-b'">{{user.signature?'已设置':'未设置'}}</p>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="right-max-box scrollbar-box">
  58. <div class="right-title-box">
  59. <div class="title-button-min-box" @click="buttonTypeClick(1)">
  60. <p :class="buttonType == '1'?'bottomColor':''">基本资料</p>
  61. <p :class="buttonType == '1'?'bottomBack':''"></p>
  62. </div>
  63. <div class="title-button-min-box" @click="buttonTypeClick(2)">
  64. <p :class="buttonType == '2'?'bottomColor':''">安全设置</p>
  65. <p :class="buttonType == '2'?'bottomBack':''"></p>
  66. </div>
  67. <p class="right-null-p"></p>
  68. <!--<p class="reset-button-one right-out-button" @click="outButton">返回</p>-->
  69. </div>
  70. <div v-if="buttonType == 1">
  71. <el-form :model="userform" ref="userform" :rules="rules" :inline="true" >
  72. <div>
  73. <el-form-item class="form-item-min input-number-none-box" label="联系方式:" prop="phonenumber" label-width="120px">
  74. <el-input-number
  75. :max="19999999999"
  76. v-model="userform.phonenumber"
  77. placeholder="请输入联系方式"
  78. clearable/>
  79. </el-form-item>
  80. <el-form-item class="form-item-min" label="邮箱:" prop="email" label-width="120px">
  81. <el-input
  82. maxlength="40"
  83. v-model="userform.email"
  84. placeholder="请输入邮箱"
  85. clearable
  86. style="width:200px;"
  87. size="small"
  88. />
  89. </el-form-item>
  90. <el-form-item class="form-item-min" label="出生年月:" prop="dateBirth" label-width="120px">
  91. <el-date-picker
  92. v-model="userform.dateBirth"
  93. value-format="yyyy-MM-dd"
  94. type="date"
  95. style="width:200px;"
  96. placeholder="请选择出生日期">
  97. </el-date-picker>
  98. </el-form-item>
  99. </div>
  100. <div>
  101. <el-form-item class="form-item-min" label="人脸照片:" prop="searchValue" label-width="120px">
  102. <div class="up-data-box" style="width:200px;">
  103. <div class="up-data-min-box" style="display: flex;">
  104. <div class="up-data-button" v-if="!user.faceImg" @click="upFaceOpenClick(2)">
  105. <p>+</p>
  106. <p>上传</p>
  107. </div>
  108. <img class="img-one" :src="user.faceImg" v-if="user.faceImg" @click="upFaceOpenClick(2)">
  109. </div>
  110. </div>
  111. </el-form-item>
  112. <el-form-item class="form-item-min" label="电子签名:" prop="searchValue" label-width="120px">
  113. <div class="up-data-box">
  114. <div class="up-data-min-box" style="display: flex;">
  115. <el-upload
  116. class="position-button"
  117. :action="uploadImgUrlTwo"
  118. :show-file-list="false"
  119. :auto-upload="false"
  120. :on-change="signatureChange"
  121. accept="image/jpeg,image/gif,image/png"
  122. :headers="headers"
  123. :before-upload="beforeAvatarUpload">
  124. <div class="up-data-button" v-if="!user.signature">
  125. <p>+</p>
  126. <p>上传</p>
  127. </div>
  128. <img class="img-two" :src="user.signature" v-if="user.signature">
  129. </el-upload>
  130. </div>
  131. </div>
  132. </el-form-item>
  133. <el-form-item class="form-item-min" label="指纹:" prop="searchValue" label-width="120px">
  134. <div class="fingerprint_no" v-if="Quantity==0">
  135. <p>暂未录入指纹</p>
  136. <p>(请在小程序端操作)</p>
  137. </div>
  138. <div class="fingerprint_yes" v-if="Quantity!=0">
  139. <div class="fingerprint_yes_img">
  140. <img src="@/assets/ZDimages/icon_zw_bk.png">
  141. <img src="@/assets/ZDimages/icon_wd_zw.png">
  142. </div>
  143. <p>已录入{{Quantity}}个指纹</p>
  144. </div>
  145. </el-form-item>
  146. </div>
  147. </el-form>
  148. <p class="type-one-max-box add-button-one-120" @click="upDataProfile">保存</p>
  149. </div>
  150. <div v-if="buttonType == 2">
  151. <el-form :model="form" ref="form" :inline="true" :rules="rules">
  152. <div>
  153. <el-form-item class="form-item-min" label="原始密码:" prop="oldPassword" label-width="120px">
  154. <el-input
  155. maxlength="16"
  156. type="password"
  157. v-model.trim="form.oldPassword"
  158. placeholder="请输入原始密码"
  159. clearable
  160. size="small"
  161. />
  162. </el-form-item>
  163. <el-form-item class="form-item-min" label="新密码:" prop="newPassword" label-width="120px">
  164. <el-input
  165. maxlength="16"
  166. type="password"
  167. v-model.trim="form.newPassword"
  168. placeholder="请输入新密码"
  169. clearable
  170. size="small"
  171. />
  172. </el-form-item>
  173. <el-form-item class="form-item-min" label="确认密码:" prop="confirmPassword" label-width="120px">
  174. <el-input
  175. maxlength="16"
  176. type="password"
  177. v-model.trim="form.confirmPassword"
  178. placeholder="请确认密码"
  179. clearable
  180. size="small"
  181. />
  182. </el-form-item>
  183. <span class="type-one-max-box add-button-one-120" style="margin-left:20px;display: inline-block;" @click="submit">保存</span>
  184. </div>
  185. </el-form>
  186. </div>
  187. </div>
  188. </div>
  189. <!--电子签名-->
  190. <el-dialog class="up-img-box" title="上传电子签名" :visible.sync="upImgOpen" width="600px" append-to-body>
  191. <p>示例</p>
  192. <img class="img-one" src="@/assets/ZDimages/icon_scdzqm_sl.png">
  193. <p>正楷签名</p>
  194. <div class="cropper-box">
  195. <vueCropper
  196. ref="cropper"
  197. :img="option.img"
  198. :outputSize="option.outputSize"
  199. :outputType="option.outputType"
  200. :info="option.info"
  201. :canScale="option.canScale"
  202. :autoCrop="option.autoCrop"
  203. :autoCropWidth="option.autoCropWidth"
  204. :autoCropHeight="option.autoCropHeight"
  205. :fixed="option.fixed"
  206. :fixedNumber="option.fixedNumber"
  207. :full="option.full"
  208. :fixedBox="option.fixedBox"
  209. :canMove="option.canMove"
  210. :canMoveBox="option.canMoveBox"
  211. :original="option.original"
  212. :centerBox="option.centerBox"
  213. :height="option.height"
  214. :infoTrue="option.infoTrue"
  215. :maxImgSize="option.maxImgSize"
  216. :enlarge="option.enlarge"
  217. :mode="option.mode"
  218. @realTime="realTime"
  219. @imgLoad="imgLoad"
  220. ></vueCropper>
  221. <p class="cropper-button" @click="upImgButton">保存查看</p>
  222. <el-upload
  223. class="position-button"
  224. :action="uploadImgUrl"
  225. :show-file-list="false"
  226. :auto-upload="false"
  227. :on-change="signatureChange"
  228. accept="image/jpeg,image/gif,image/png"
  229. :headers="headers"
  230. :before-upload="beforeAvatarUpload">
  231. <p style="position: absolute;right:100px;top:10px;z-index:1;color:#fff;background:#14AE10;cursor: pointer;padding:5px 10px;margin:0;border-radius:6px;">选择签名</p>
  232. </el-upload>
  233. </div>
  234. <p style="color:#999;">请将签名置于选择框内以便提高识别度</p>
  235. <img class="cropper-img" v-if="signatureData" :src="signatureData">
  236. <div slot="footer" class="dialog-footer">
  237. <el-button @click="upImgOpenClick(1)">取 消</el-button>
  238. <el-button type="primary" @click="upSignatureData">确 定</el-button>
  239. </div>
  240. </el-dialog>
  241. <!--上传照片-->
  242. <el-dialog class="up-img-box" title="上传照片" :visible.sync="upFaceOpen" width="600px" append-to-body>
  243. <el-upload
  244. ref="faceUpLoad"
  245. class="position-button"
  246. :action="uploadImgUrl"
  247. :show-file-list="false"
  248. :auto-upload="false"
  249. :on-change="faceChange"
  250. accept="image/jpeg,image/gif,image/png"
  251. :on-success="(res)=>handleAvatarSuccess(res)"
  252. :headers="headers"
  253. :before-upload="beforeAvatarUpload">
  254. <div v-if="!upFaceUrl" style="width:300px;height:300px;border: 1px dashed #E0E0E0;cursor: pointer;margin:20px 130px 0;">
  255. <p style="text-align: center;color:#999;font-weight:500;font-size: 20px;line-height:300px;margin:0;">+</p>
  256. </div>
  257. <div v-if="upFaceUrl" class="scrollbar-box" style="width:560px;margin:0 auto;max-height:700px;overflow-y: scroll">
  258. <img :src="upFaceUrl" style="max-width:560px;border: 1px dashed #E0E0E0;cursor: pointer;margin:0 auto;">
  259. </div>
  260. </el-upload>
  261. <div slot="footer" class="dialog-footer">
  262. <el-button @click="faceButton(1)">取 消</el-button>
  263. <el-button type="primary" @click="faceButton(2)">确 定</el-button>
  264. </div>
  265. </el-dialog>
  266. </div>
  267. </template>
  268. <script>
  269. import { Navbar } from '@/layout/components'
  270. import userAvatar from "./userAvatar";
  271. import { getUserProfile,updateUserPwd,changePhone,genSign,updateSignature,upDataProfile,fingerprintQuantity} from "@/api/system/user";
  272. import { getToken } from "@/utils/auth";
  273. export default {
  274. name: "mine",
  275. components: {
  276. Navbar,
  277. userAvatar
  278. },
  279. data(){
  280. const equalToPassword = (rule, value, callback) => {
  281. if (this.form.confirmPassword !== value) {
  282. callback(new Error("两次输入的密码不一致"));
  283. } else {
  284. callback();
  285. }
  286. };
  287. const equalToPasswordTwo = (rule, value, callback) => {
  288. if (this.form.newPassword !== value) {
  289. callback(new Error("两次输入的密码不一致"));
  290. } else {
  291. callback();
  292. }
  293. };
  294. const validatePass = (rule, value, callback) => {
  295. let reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/
  296. console.log("reg.test(value)",reg.test(value))
  297. if(reg.test(value)){
  298. callback()
  299. }else{
  300. return callback(new Error('密码应在8-16位包括数字和字母与特殊字符'));
  301. }
  302. };
  303. return{
  304. buttonType:'1',
  305. uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
  306. uploadImgUrlTwo: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
  307. headers: {
  308. Authorization: "Bearer " + getToken(),
  309. },
  310. pageType:false,
  311. user: {},
  312. roleGroup: {},
  313. postGroup: {},
  314. activeTab: "resetPwd",
  315. form:{
  316. oldPassword:"",
  317. newPassword:"",
  318. confirmPassword:""
  319. },
  320. userform:{},
  321. userformData:{},
  322. open:false,
  323. phoneForm:{
  324. phone:"",
  325. },
  326. // 表单校验
  327. rules: {
  328. oldPassword: [
  329. { required: true, message: "旧密码不能为空", trigger: "blur" },
  330. ],
  331. newPassword: [
  332. { required: true, message: "新密码不能为空", trigger: "blur" },
  333. { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
  334. { required: true, validator: equalToPassword, trigger: "blur" },
  335. { required: true, message: "请输入8-16位密码,不能输入连续性和重复性的密码,密码中需要包含:大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
  336. ],
  337. confirmPassword: [
  338. { required: true, message: "确认密码不能为空", trigger: "blur" },
  339. { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
  340. { required: true, validator: equalToPasswordTwo, trigger: "blur" },
  341. { required: true, message: "请输入8-16位密码,不能输入连续性和重复性的密码,密码中需要包含:大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
  342. ],
  343. phonenumber: [
  344. { required: true, message: "请输入11位手机号码", trigger: "blur" },
  345. { validator: this.checkPhone, trigger: 'blur' },
  346. // { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
  347. { required: true, message: "请输入11位手机号码", validator: this.spaceJudgment, trigger: "blur" }
  348. ],
  349. // phone: [
  350. // { required: true, message: "请输入手机号码", trigger: "blur" },
  351. // { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
  352. // ],
  353. // email: [
  354. // { required: true, message: "请输入邮箱地址", trigger: "blur" },
  355. // { required: true, message: "请输入正确的邮箱地址", type: 'email'},
  356. // { required: true, message: "请输入邮箱地址", validator: this.spaceJudgment, trigger: "blur" }
  357. // ],
  358. // dateBirth: [
  359. // { required: true, message: "请选择出生日期", trigger: "blur" }
  360. // ],
  361. },
  362. //上传签名开关
  363. upImgOpen:false,
  364. option:{
  365. img: '', // 裁剪图片的地址
  366. outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
  367. outputType: 'png', //裁剪生成图片的格式(jpeg || png || webp)
  368. info: true, //图片大小信息
  369. canScale: true, //图片是否允许滚轮缩放
  370. autoCrop: true, //是否默认生成截图框
  371. autoCropWidth: 240, //默认生成截图框宽度
  372. autoCropHeight: 80, //默认生成截图框高度
  373. fixed: true, //是否开启截图框宽高固定比例
  374. fixedNumber: [3, 1], //截图框的宽高比例
  375. full: false, //false按原比例裁切图片,不失真
  376. fixedBox: true, //固定截图框大小,不允许改变
  377. canMove: false, //上传图片是否可以移动
  378. canMoveBox: true, //截图框能否拖动
  379. original: false, //上传图片按照原始比例渲染
  380. centerBox: false, //截图框是否被限制在图片里面
  381. height: true, //是否按照设备的dpr 输出等比例图片
  382. infoTrue: false, //true为展示真实输出图片宽高,false展示看到的截图框宽高
  383. maxImgSize: 3000, //限制图片最大宽度和高度
  384. enlarge: 1, //图片根据截图框输出比例倍数
  385. mode: '560px 400px' //图片默认渲染方式
  386. },
  387. previews:{},
  388. //上传人脸
  389. upFaceOpen:false,
  390. upFaceUrl:"",
  391. //临时签名数据
  392. signatureData:"",
  393. Quantity:0,//指纹录取数量
  394. }
  395. },
  396. created() {
  397. this.getUser();
  398. this.fingerprintQuantityFun();
  399. },
  400. methods: {
  401. //修改用户信息
  402. upDataProfile(){
  403. this.$refs["userform"].validate(valid => {
  404. if (valid) {
  405. if(!this.userform.phonenumber&&!this.userform.email&&!this.userform.dateBirth){
  406. this.msgError('联系方式/邮箱/出生年月,请至少填写一项进行修改')
  407. return
  408. }
  409. if((this.userform.phonenumber == this.userformData.phonenumber)&&
  410. (this.userform.email == this.userformData.email)&&
  411. (this.userform.dateBirth == this.userformData.dateBirth)){
  412. this.msgError('联系方式/邮箱/出生年月,请至少修改一项再进行保存操作')
  413. return
  414. }
  415. // let obj = JSON.parse(JSON.stringify(this.userform));
  416. let obj = {};
  417. obj.phonenumber = this.userform.phonenumber;
  418. if(this.userform.email){
  419. let regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  420. if(!regex.test(this.userform.email)){
  421. this.msgError('请输入正确的邮箱地址')
  422. return
  423. }else{
  424. obj.email = this.userform.email;
  425. }
  426. }else {
  427. obj.email = '';
  428. }
  429. if(this.userform.dateBirth){
  430. obj.dateBirth = this.userform.dateBirth;
  431. }else{
  432. obj.dateBirth = '';
  433. }
  434. obj.userId = this.user.userId;
  435. upDataProfile(obj).then(response => {
  436. this.msgSuccess('操作成功');
  437. this.getUser();
  438. });
  439. }
  440. })
  441. },
  442. //手机号验证
  443. checkPhone(rule, value, callback) {
  444. if (!value) {
  445. return callback(new Error('手机号码不能为空'))
  446. } else {
  447. if(value == '19999999999'){
  448. return callback(new Error('请输入正确的手机号码'))
  449. }
  450. const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
  451. if (reg.test(value)) {
  452. callback()
  453. } else {
  454. return callback(new Error('请输入正确的手机号码'))
  455. }
  456. }
  457. },
  458. //修改按钮密码
  459. submit() {
  460. let self = this;
  461. self.$refs["form"].validate(valid => {
  462. if (valid) {
  463. this.$confirm('确定要修改吗', "警告", {
  464. confirmButtonText: "确定",
  465. cancelButtonText: "取消",
  466. type: "warning"
  467. }).then(function() {
  468. self.updateUserPwd();
  469. }).then(() => {
  470. }).catch(() => {});
  471. }
  472. });
  473. },
  474. //指纹-查询用户指纹录取数量
  475. fingerprintQuantityFun(){
  476. let _this=this;
  477. fingerprintQuantity(localStorage.getItem('userId')).then(response => {
  478. if(response.code == 200){
  479. _this.Quantity=response.data;
  480. }
  481. }
  482. );
  483. },
  484. //修改密码接口
  485. updateUserPwd(){
  486. updateUserPwd(this.form.oldPassword, this.form.newPassword).then(
  487. response => {
  488. this.form.oldPassword = "";
  489. this.form.newPassword = "";
  490. this.form.confirmPassword = "";
  491. this.msgSuccess("修改成功");
  492. }
  493. );
  494. },
  495. //返回按钮
  496. outButton(){
  497. this.$router.go(-1)
  498. },
  499. //页面按钮点击
  500. buttonTypeClick(type){
  501. if(this.buttonType != type){
  502. this.buttonType = type;
  503. }
  504. },
  505. //获取信息
  506. getUser() {
  507. getUserProfile().then(response => {
  508. this.user = response.data;
  509. this.roleGroup = response.roleGroup;
  510. this.postGroup = response.postGroup;
  511. let obj = {
  512. phonenumber:response.data.phonenumber,
  513. email:response.data.email,
  514. dateBirth:response.data.dateBirth,
  515. }
  516. this.$set(this,'userform',JSON.parse(JSON.stringify(obj)));
  517. this.$set(this,'userformData',JSON.parse(JSON.stringify(obj)));
  518. this.pageType = true;
  519. });
  520. },
  521. //上传签名
  522. upSignatureData(){
  523. if(!this.signatureData){
  524. this.msgError('请先选择签名上传并保存查看')
  525. }
  526. var blob = this.dataURLtoBlob(this.signatureData);
  527. var file = this.blobToFile(blob, 'dx.jpg');
  528. let formData = new FormData();
  529. formData.append('file',file,"DX.jpg")
  530. console.log("formData",formData);
  531. updateSignature(formData).then(response => {
  532. if(response.code == 200){
  533. this.msgSuccess("操作成功");
  534. this.upImgOpen = false;
  535. this.getUser();
  536. }
  537. });
  538. },
  539. //照片页面开关
  540. upFaceOpenClick(type){
  541. if(type == 1){
  542. this.upFaceOpen = false;
  543. }else if (type == 2){
  544. this.upFaceUrl = this.user.faceImg;
  545. this.upFaceOpen = true;
  546. }
  547. },
  548. //签名页面开关
  549. upImgOpenClick(type){
  550. if(type == 1){
  551. this.upImgOpen = false;
  552. }else if (type == 2){
  553. this.option.img = this.user.signature;
  554. this.signatureData = this.user.signature;
  555. this.upImgOpen = true;
  556. }
  557. },
  558. //确定签名
  559. upImgButton(){
  560. let self = this;
  561. this.$refs.cropper.getCropBlob(async (data) => {
  562. let formData = new FormData();
  563. formData.append('file',data,"DX.jpg")
  564. genSign(formData).then(response => {
  565. if(response.code == 200){
  566. this.signatureData = 'data:image/png;base64,'+response.data;
  567. } else {
  568. this.msgError(response.msg)
  569. }
  570. });
  571. })
  572. },
  573. //照片选择
  574. faceChange(val){
  575. const windowURL = window.URL || window.webkitURL;
  576. this.upFaceUrl = windowURL.createObjectURL(val.raw)
  577. },
  578. //签名选择
  579. signatureChange(val){
  580. const windowURL = window.URL || window.webkitURL;
  581. this.option.img = windowURL.createObjectURL(val.raw)
  582. this.signatureData = "";
  583. this.upImgOpen = true;
  584. },
  585. // 照片上传按钮
  586. faceButton(type){
  587. if(type==1){
  588. this.upFaceOpen = false;
  589. }else if(type == 2){
  590. this.$refs.faceUpLoad.submit();
  591. }
  592. },
  593. //上传
  594. handleAvatarSuccess(res, type) {
  595. if(res.code == 200){
  596. this.user.faceImg = res.data.cardUrl;
  597. this.upFaceOpen = false;
  598. this.getUser();
  599. this.msgSuccess(res.msg)
  600. this.$forceUpdate()
  601. }else{
  602. this.msgError(res.msg)
  603. }
  604. },
  605. beforeAvatarUpload(file) {
  606. let type = false;
  607. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
  608. type = true;
  609. }else{
  610. this.$message.error('只能上传png/jpeg/gif格式图片');
  611. type = false;
  612. }
  613. return type;
  614. },
  615. // 实时预览函数
  616. realTime(data) {
  617. console.log("实时预览函数",data)
  618. this.previews = data;
  619. },
  620. //图片加载的回调 imgLoad 返回结果success, error
  621. imgLoad (msg) {
  622. console.log("图片加载的回调",msg)
  623. // console.log('imgLoad')
  624. // console.log(msg)
  625. },
  626. //将base64转换为blob
  627. dataURLtoBlob: function(dataurl) {
  628. var arr = dataurl.split(',')
  629. var mime = arr[0].match(/:(.*?);/)[1]
  630. var bstr = atob(arr[1])
  631. var n = bstr.length
  632. var u8arr = new Uint8Array(n)
  633. while (n--) {
  634. u8arr[n] = bstr.charCodeAt(n);
  635. }
  636. return new Blob([u8arr], { type: mime });
  637. },
  638. //将blob转换为file
  639. blobToFile: function(theBlob, fileName){
  640. theBlob.lastModifiedDate = new Date();
  641. theBlob.name = fileName;
  642. return theBlob;
  643. },
  644. }
  645. }
  646. </script>
  647. <style scoped lang="scss">
  648. .mine{
  649. height:100%;
  650. width:100%;
  651. display: flex;
  652. flex-direction: column;
  653. overflow: hidden;
  654. *{
  655. margin:0;
  656. }
  657. .mine-page{
  658. flex:1;
  659. display: flex;
  660. overflow: hidden;
  661. .left-max-box{
  662. width:300px;
  663. /*margin:20px;*/
  664. margin:5px 20px 20px 10px;
  665. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  666. border-radius:10px;
  667. .left-title{
  668. font-size:18px;
  669. text-align: center;
  670. line-height: 30px;
  671. margin-top:30px;
  672. color:#0045af;
  673. }
  674. .left-user-img{
  675. width:130px;
  676. height:130px;
  677. overflow: hidden;
  678. border-radius:50%;
  679. margin:30px auto 20px;
  680. }
  681. .left-name{
  682. font-size:20px;
  683. line-height:43px;
  684. text-align: center;
  685. }
  686. .left-num{
  687. font-size:16px;
  688. line-height:38px;
  689. text-align: center;
  690. }
  691. .left-text-max-box{
  692. border-top:1px dashed #dedede;
  693. border-bottom:1px dashed #dedede;
  694. margin:24px 10px 0;
  695. padding:20px 0;
  696. .left-text-big-box{
  697. display: flex;
  698. .left-text-big-box-left{
  699. width:100px;
  700. height:38px;
  701. display: flex;
  702. margin-right:10px;
  703. img{
  704. width:16px;
  705. height:16px;
  706. margin:11px 10px 0;
  707. }
  708. p{
  709. flex:1;
  710. font-size:14px;
  711. line-height:38px;
  712. }
  713. }
  714. .left-text-big-box-right{
  715. height:38px;
  716. flex:1;
  717. display: flex;
  718. .img-one{
  719. width:16px;
  720. height:14px;
  721. margin:12px 10px 0;
  722. }
  723. .img-two{
  724. width:16px;
  725. height:16px;
  726. margin:11px 10px 0;
  727. }
  728. p{
  729. flex:1;
  730. font-size:14px;
  731. line-height:38px;
  732. }
  733. }
  734. }
  735. .left-text-min-box{
  736. display: flex;
  737. height:38px;
  738. img{
  739. width:16px;
  740. height:16px;
  741. margin:11px 10px 0;
  742. }
  743. p{
  744. flex:1;
  745. font-size:14px;
  746. line-height:38px;
  747. }
  748. }
  749. }
  750. .left-type-text-max-box{
  751. padding:20px 0;
  752. div{
  753. display: flex;
  754. p{
  755. flex:1;
  756. font-size:14px;
  757. color:#333;
  758. line-height:40px;
  759. }
  760. p:nth-child(1){
  761. text-align: left;
  762. margin-left:32px;
  763. }
  764. p:nth-child(2){
  765. text-align: right;
  766. margin-right:48px;
  767. }
  768. .p-color-a{
  769. color:#06B924;
  770. }
  771. .p-color-b{
  772. color:#FF9735;
  773. }
  774. }
  775. }
  776. }
  777. .right-max-box{
  778. flex:1;
  779. /*margin:20px 20px 20px 0;*/
  780. margin:5px 20px 20px 0;
  781. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  782. border-radius:10px;
  783. display: flex;
  784. flex-direction: column;
  785. .right-title-box{
  786. display: flex;
  787. border-bottom:1px solid #dedede;
  788. .title-button-min-box{
  789. height:90px;
  790. margin:0 20px;
  791. cursor: pointer;
  792. p:nth-child(1){
  793. margin-top:6px;
  794. line-height:78px;
  795. font-size:16px;
  796. }
  797. p:nth-child(2){
  798. height:6px;
  799. border-radius:4px;
  800. }
  801. .bottomColor{
  802. color:#0045AF;
  803. }
  804. .bottomBack{
  805. background:#0045AF ;
  806. }
  807. }
  808. .right-null-p{
  809. flex:1;
  810. }
  811. .right-out-button{
  812. margin:20px;
  813. }
  814. }
  815. .type-one-max-box{
  816. width:100px;
  817. margin:40px auto;
  818. }
  819. .up-data-box{
  820. display: inline-block;
  821. width:280px;
  822. line-height:20px;
  823. margin-bottom:30px;
  824. .up-data-min-box{
  825. .up-data-title{
  826. font-size:15px;
  827. color:#333;
  828. }
  829. .up-data-button{
  830. width:120px;
  831. height:120px;
  832. border: 1px dashed #E0E0E0;
  833. cursor: pointer;
  834. p{
  835. text-align: center;
  836. color:#999;
  837. font-weight:500;
  838. }
  839. p:nth-child(1){
  840. font-size: 20px;
  841. line-height:40px;
  842. margin-top:20px;
  843. }
  844. p:nth-child(2){
  845. font-size: 16px;
  846. }
  847. }
  848. .img-one{
  849. width:120px;
  850. height:120px;
  851. }
  852. .img-two{
  853. width: 240px;
  854. height:80px;
  855. }
  856. }
  857. }
  858. .fingerprint_no{
  859. >p:nth-of-type(1){
  860. color: #666666;
  861. }
  862. >p:nth-of-type(2){
  863. color: #F56C6C;
  864. }
  865. }
  866. .fingerprint_yes{
  867. .fingerprint_yes_img{
  868. width: 122px;
  869. height: 142px;
  870. position: relative;
  871. >img:nth-of-type(1){
  872. width: 122px;
  873. height: 142px;
  874. position: absolute;
  875. }
  876. >img:nth-of-type(2){
  877. width: 65px;
  878. height: 88px;
  879. position: absolute;
  880. left: 29px;
  881. top: 29px;
  882. }
  883. }
  884. >p{
  885. color: #666;
  886. text-align: center;
  887. }
  888. }
  889. .form-item-min{
  890. margin-top:40px;
  891. }
  892. }
  893. }
  894. }
  895. </style>
  896. <style lang="scss">
  897. .up-img-box{
  898. .el-dialog__body{
  899. padding-top:0;
  900. }
  901. .img-one{
  902. width:560px;
  903. height:150px;
  904. }
  905. .cropper-img{
  906. display: block;
  907. border:1px solid #e0e0e0;
  908. width:360px;
  909. height:120px;
  910. margin:0 auto;
  911. }
  912. .cropper-box{
  913. width:560px;
  914. height:270px;
  915. position: relative;
  916. .cropper-button{
  917. position: absolute;
  918. right:10px;top:10px;
  919. z-index:1;
  920. background: #0183FA;
  921. color:#fff;
  922. cursor: pointer;
  923. padding:5px 10px;
  924. margin:0;
  925. border-radius:6px;
  926. }
  927. }
  928. }
  929. .mine{
  930. .mine-page{
  931. .input-number-none-box{
  932. input{
  933. text-align: left;
  934. }
  935. }
  936. }
  937. }
  938. </style>