|
|
@@ -0,0 +1,935 @@
|
|
|
+<template>
|
|
|
+ <div class="mine">
|
|
|
+ <!--<navbar />-->
|
|
|
+ <div class="mine-page">
|
|
|
+ <div class="left-max-box scrollbar-box">
|
|
|
+ <p class="left-title">个人中心</p>
|
|
|
+ <div class="left-user-img">
|
|
|
+ <userAvatar :user="user" />
|
|
|
+ </div>
|
|
|
+ <p class="left-name">{{user.nickName}}</p>
|
|
|
+ <p class="left-num">{{user.userType=='11'?'工号：':(user.userType=='22'?'学号：':'其他：')}}{{user.userName}}</p>
|
|
|
+ <div class="left-text-max-box">
|
|
|
+ <div class="left-text-big-box">
|
|
|
+ <div class="left-text-big-box-left">
|
|
|
+ <img v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_xl.png">
|
|
|
+ <img v-else src="@/assets/ZDimages/mine/icon_grzx_zc.png">
|
|
|
+ <p>{{user.education?user.education:'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="left-text-big-box-right">
|
|
|
+ <img class="img-two" v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_zy.png">
|
|
|
+ <img class="img-one" v-else src="@/assets/ZDimages/mine/icon_grzx_zw.png">
|
|
|
+ <p>{{user.major?user.major:'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-text-min-box">
|
|
|
+ <img src="@/assets/ZDimages/mine/icon_grzx_sjh.png">
|
|
|
+ <p>{{user.phonenumber?user.phonenumber:'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="left-text-min-box">
|
|
|
+ <img src="@/assets/ZDimages/mine/icon_grzx_yx.png">
|
|
|
+ <p>{{user.email?user.email:'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="left-text-min-box">
|
|
|
+ <img src="@/assets/ZDimages/mine/icon_grzx_bgl.png">
|
|
|
+ <p>{{user.deptName?user.deptName:'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-type-text-max-box">
|
|
|
+ <div>
|
|
|
+ <p>联系方式</p>
|
|
|
+ <p :class="user.phonenumber?'p-color-a':'p-color-b'">{{user.phonenumber?'已设置':'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>系统头像</p>
|
|
|
+ <p :class="user.avatar?'p-color-a':'p-color-b'">{{user.avatar?'已设置':'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>人脸照片</p>
|
|
|
+ <p :class="user.faceImg?'p-color-a':'p-color-b'">{{user.faceImg?'已设置':'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>电子签名</p>
|
|
|
+ <p :class="user.signature?'p-color-a':'p-color-b'">{{user.signature?'已设置':'未设置'}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-max-box scrollbar-box">
|
|
|
+ <div class="right-title-box">
|
|
|
+ <div class="title-button-min-box" @click="buttonTypeClick(1)">
|
|
|
+ <p :class="buttonType == '1'?'bottomColor':''">基本资料</p>
|
|
|
+ <p :class="buttonType == '1'?'bottomBack':''"></p>
|
|
|
+ </div>
|
|
|
+ <div class="title-button-min-box" @click="buttonTypeClick(2)">
|
|
|
+ <p :class="buttonType == '2'?'bottomColor':''">安全设置</p>
|
|
|
+ <p :class="buttonType == '2'?'bottomBack':''"></p>
|
|
|
+ </div>
|
|
|
+ <p class="right-null-p"></p>
|
|
|
+ <!--<p class="reset-button-one right-out-button" @click="outButton">返回</p>-->
|
|
|
+ </div>
|
|
|
+ <div v-if="buttonType == 1">
|
|
|
+ <el-form :model="userform" ref="userform" :rules="rules" :inline="true" >
|
|
|
+ <div>
|
|
|
+ <el-form-item class="form-item-min input-number-none-box" label="联系方式：" prop="phonenumber" label-width="120px">
|
|
|
+ <el-input-number
|
|
|
+ :max="19999999999"
|
|
|
+ v-model="userform.phonenumber"
|
|
|
+ placeholder="请输入联系方式"
|
|
|
+ clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="邮箱：" prop="email" label-width="120px">
|
|
|
+ <el-input
|
|
|
+ maxlength="40"
|
|
|
+ v-model="userform.email"
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ clearable
|
|
|
+ style="width:200px;"
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="出生年月：" prop="dateBirth" label-width="120px">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="userform.dateBirth"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ style="width:200px;"
|
|
|
+ placeholder="请选择出生日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-form-item class="form-item-min" label="人脸照片：" prop="searchValue" label-width="120px">
|
|
|
+ <div class="up-data-box" style="width:200px;">
|
|
|
+ <div class="up-data-min-box" style="display: flex;">
|
|
|
+ <div class="up-data-button" v-if="!user.faceImg" @click="upFaceOpenClick(2)">
|
|
|
+ <p>+</p>
|
|
|
+ <p>上传</p>
|
|
|
+ </div>
|
|
|
+ <img class="img-one" :src="user.faceImg" v-if="user.faceImg" @click="upFaceOpenClick(2)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="电子签名：" prop="searchValue" label-width="120px">
|
|
|
+ <div class="up-data-box">
|
|
|
+ <div class="up-data-min-box" style="display: flex;">
|
|
|
+ <el-upload
|
|
|
+ class="position-button"
|
|
|
+ :action="uploadImgUrlTwo"
|
|
|
+ :show-file-list="false"
|
|
|
+ :auto-upload="false"
|
|
|
+ :on-change="signatureChange"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <div class="up-data-button" v-if="!user.signature">
|
|
|
+ <p>+</p>
|
|
|
+ <p>上传</p>
|
|
|
+ </div>
|
|
|
+ <img class="img-two" :src="user.signature" v-if="user.signature">
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="指纹：" prop="searchValue" label-width="120px">
|
|
|
+ <div class="fingerprint_no" v-if="Quantity==0">
|
|
|
+ <p>暂未录入指纹</p>
|
|
|
+ <p>(请在小程序端操作)</p>
|
|
|
+ </div>
|
|
|
+ <div class="fingerprint_yes" v-if="Quantity!=0">
|
|
|
+ <div class="fingerprint_yes_img">
|
|
|
+ <img src="@/assets/ZDimages/icon_zw_bk.png">
|
|
|
+ <img src="@/assets/ZDimages/icon_wd_zw.png">
|
|
|
+ </div>
|
|
|
+ <p>已录入{{Quantity}}个指纹</p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <p class="type-one-max-box add-button-one-120" @click="upDataProfile">保存</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="buttonType == 2">
|
|
|
+ <el-form :model="form" ref="form" :inline="true" :rules="rules">
|
|
|
+ <div>
|
|
|
+ <el-form-item class="form-item-min" label="原始密码：" prop="oldPassword" label-width="120px">
|
|
|
+ <el-input
|
|
|
+ maxlength="16"
|
|
|
+ type="password"
|
|
|
+ v-model.trim="form.oldPassword"
|
|
|
+ placeholder="请输入原始密码"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="新密码：" prop="newPassword" label-width="120px">
|
|
|
+ <el-input
|
|
|
+ maxlength="16"
|
|
|
+ type="password"
|
|
|
+ v-model.trim="form.newPassword"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="form-item-min" label="确认密码：" prop="confirmPassword" label-width="120px">
|
|
|
+ <el-input
|
|
|
+ maxlength="16"
|
|
|
+ type="password"
|
|
|
+ v-model.trim="form.confirmPassword"
|
|
|
+ placeholder="请确认密码"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <span class="type-one-max-box add-button-one-120" style="margin-left:20px;display: inline-block;" @click="submit">保存</span>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--电子签名-->
|
|
|
+ <el-dialog class="up-img-box" title="上传电子签名" :visible.sync="upImgOpen" width="600px" append-to-body>
|
|
|
+ <p>示例</p>
|
|
|
+ <img class="img-one" src="@/assets/ZDimages/icon_scdzqm_sl.png">
|
|
|
+ <p>正楷签名</p>
|
|
|
+ <div class="cropper-box">
|
|
|
+ <vueCropper
|
|
|
+ ref="cropper"
|
|
|
+ :img="option.img"
|
|
|
+ :outputSize="option.outputSize"
|
|
|
+ :outputType="option.outputType"
|
|
|
+ :info="option.info"
|
|
|
+ :canScale="option.canScale"
|
|
|
+ :autoCrop="option.autoCrop"
|
|
|
+ :autoCropWidth="option.autoCropWidth"
|
|
|
+ :autoCropHeight="option.autoCropHeight"
|
|
|
+ :fixed="option.fixed"
|
|
|
+ :fixedNumber="option.fixedNumber"
|
|
|
+ :full="option.full"
|
|
|
+ :fixedBox="option.fixedBox"
|
|
|
+ :canMove="option.canMove"
|
|
|
+ :canMoveBox="option.canMoveBox"
|
|
|
+ :original="option.original"
|
|
|
+ :centerBox="option.centerBox"
|
|
|
+ :height="option.height"
|
|
|
+ :infoTrue="option.infoTrue"
|
|
|
+ :maxImgSize="option.maxImgSize"
|
|
|
+ :enlarge="option.enlarge"
|
|
|
+ :mode="option.mode"
|
|
|
+ @realTime="realTime"
|
|
|
+ @imgLoad="imgLoad"
|
|
|
+ ></vueCropper>
|
|
|
+ <p class="cropper-button" @click="upImgButton">保存查看</p>
|
|
|
+ <el-upload
|
|
|
+ class="position-button"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :auto-upload="false"
|
|
|
+ :on-change="signatureChange"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <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>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <p style="color:#999;">请将签名置于选择框内以便提高识别度</p>
|
|
|
+ <img class="cropper-img" v-if="signatureData" :src="signatureData">
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="upImgOpenClick(1)">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="upSignatureData">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--上传照片-->
|
|
|
+ <el-dialog class="up-img-box" title="上传照片" :visible.sync="upFaceOpen" width="600px" append-to-body>
|
|
|
+ <el-upload
|
|
|
+ ref="faceUpLoad"
|
|
|
+ class="position-button"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :auto-upload="false"
|
|
|
+ :on-change="faceChange"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res)"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <div v-if="!upFaceUrl" style="width:300px;height:300px;border: 1px dashed #E0E0E0;cursor: pointer;margin:20px 130px 0;">
|
|
|
+ <p style="text-align: center;color:#999;font-weight:500;font-size: 20px;line-height:300px;margin:0;">+</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="upFaceUrl" class="scrollbar-box" style="width:560px;margin:0 auto;max-height:700px;overflow-y: scroll">
|
|
|
+ <img :src="upFaceUrl" style="max-width:560px;border: 1px dashed #E0E0E0;cursor: pointer;margin:0 auto;">
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="faceButton(1)">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="faceButton(2)">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { Navbar } from '@/layout/components'
|
|
|
+ import userAvatar from "./userAvatar";
|
|
|
+ import { getUserProfile,updateUserPwd,changePhone,genSign,updateSignature,upDataProfile,fingerprintQuantity} from "@/api/system/user";
|
|
|
+ import { getToken } from "@/utils/auth";
|
|
|
+ export default {
|
|
|
+ name: "mine",
|
|
|
+ components: {
|
|
|
+ Navbar,
|
|
|
+ userAvatar
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ const equalToPassword = (rule, value, callback) => {
|
|
|
+ if (this.form.confirmPassword !== value) {
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const equalToPasswordTwo = (rule, value, callback) => {
|
|
|
+ if (this.form.newPassword !== value) {
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
+ let reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/
|
|
|
+ console.log("reg.test(value)",reg.test(value))
|
|
|
+ if(reg.test(value)){
|
|
|
+ callback()
|
|
|
+ }else{
|
|
|
+ return callback(new Error('密码应在8-16位包括数字和字母与特殊字符'));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return{
|
|
|
+ buttonType:'1',
|
|
|
+ uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
|
|
|
+ uploadImgUrlTwo: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
|
|
|
+ headers: {
|
|
|
+ Authorization: "Bearer " + getToken(),
|
|
|
+ },
|
|
|
+ pageType:false,
|
|
|
+ user: {},
|
|
|
+ roleGroup: {},
|
|
|
+ postGroup: {},
|
|
|
+ activeTab: "resetPwd",
|
|
|
+ form:{
|
|
|
+ oldPassword:"",
|
|
|
+ newPassword:"",
|
|
|
+ confirmPassword:""
|
|
|
+ },
|
|
|
+ userform:{},
|
|
|
+ userformData:{},
|
|
|
+ open:false,
|
|
|
+ phoneForm:{
|
|
|
+ phone:"",
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ oldPassword: [
|
|
|
+ { required: true, message: "旧密码不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ newPassword: [
|
|
|
+ { required: true, message: "新密码不能为空", trigger: "blur" },
|
|
|
+ { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
|
|
|
+ { required: true, validator: equalToPassword, trigger: "blur" },
|
|
|
+ { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ confirmPassword: [
|
|
|
+ { required: true, message: "确认密码不能为空", trigger: "blur" },
|
|
|
+ { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
|
|
|
+ { required: true, validator: equalToPasswordTwo, trigger: "blur" },
|
|
|
+ { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ // phone: [
|
|
|
+ // { required: true, message: "请输入11位手机号码", trigger: "blur" },
|
|
|
+ // { validator: this.checkPhone, trigger: 'blur' },
|
|
|
+ // { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
|
|
|
+ // { required: true, message: "请输入11位手机号码", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ // ],
|
|
|
+ // phonenumber: [
|
|
|
+ // { required: true, message: "请输入手机号码", trigger: "blur" },
|
|
|
+ // { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ // ],
|
|
|
+ // email: [
|
|
|
+ // { required: true, message: "请输入邮箱地址", trigger: "blur" },
|
|
|
+ // { required: true, message: "请输入正确的邮箱地址", type: 'email'},
|
|
|
+ // { required: true, message: "请输入邮箱地址", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ // ],
|
|
|
+ // dateBirth: [
|
|
|
+ // { required: true, message: "请选择出生日期", trigger: "blur" }
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ //上传签名开关
|
|
|
+ upImgOpen:false,
|
|
|
+ option:{
|
|
|
+ img: '', // 裁剪图片的地址
|
|
|
+ outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
|
|
|
+ outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
|
|
|
+ info: true, //图片大小信息
|
|
|
+ canScale: true, //图片是否允许滚轮缩放
|
|
|
+ autoCrop: true, //是否默认生成截图框
|
|
|
+ autoCropWidth: 240, //默认生成截图框宽度
|
|
|
+ autoCropHeight: 80, //默认生成截图框高度
|
|
|
+ fixed: true, //是否开启截图框宽高固定比例
|
|
|
+ fixedNumber: [3, 1], //截图框的宽高比例
|
|
|
+ full: false, //false按原比例裁切图片，不失真
|
|
|
+ fixedBox: true, //固定截图框大小，不允许改变
|
|
|
+ canMove: false, //上传图片是否可以移动
|
|
|
+ canMoveBox: true, //截图框能否拖动
|
|
|
+ original: false, //上传图片按照原始比例渲染
|
|
|
+ centerBox: false, //截图框是否被限制在图片里面
|
|
|
+ height: true, //是否按照设备的dpr 输出等比例图片
|
|
|
+ infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
|
|
+ maxImgSize: 3000, //限制图片最大宽度和高度
|
|
|
+ enlarge: 1, //图片根据截图框输出比例倍数
|
|
|
+ mode: '560px 400px' //图片默认渲染方式
|
|
|
+ },
|
|
|
+ previews:{},
|
|
|
+ //上传人脸
|
|
|
+ upFaceOpen:false,
|
|
|
+ upFaceUrl:"",
|
|
|
+ //临时签名数据
|
|
|
+ signatureData:"",
|
|
|
+ Quantity:0,//指纹录取数量
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getUser();
|
|
|
+ this.fingerprintQuantityFun();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //修改用户信息
|
|
|
+ upDataProfile(){
|
|
|
+ this.$refs["userform"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if(!this.userform.phonenumber&&!this.userform.email&&!this.userform.dateBirth){
|
|
|
+ this.msgError('联系方式/邮箱/出生年月,请至少填写一项进行修改')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if((this.userform.phonenumber == this.userformData.phonenumber)&&
|
|
|
+ (this.userform.email == this.userformData.email)&&
|
|
|
+ (this.userform.dateBirth == this.userformData.dateBirth)){
|
|
|
+ this.msgError('联系方式/邮箱/出生年月,请至少修改一项再进行保存操作')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // let obj = JSON.parse(JSON.stringify(this.userform));
|
|
|
+ let obj = {};
|
|
|
+ if(this.userform.phonenumber){
|
|
|
+ let regex = /^1[23456789]\d{9}$/;
|
|
|
+ if(!regex.test(this.userform.phonenumber)){
|
|
|
+ this.msgError('请输入正确的联系方式')
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ obj.phonenumber = this.userform.phonenumber;
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ obj.phonenumber = '';
|
|
|
+ }
|
|
|
+ if(this.userform.email){
|
|
|
+ let regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
|
|
|
+ if(!regex.test(this.userform.email)){
|
|
|
+ this.msgError('请输入正确的邮箱地址')
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ obj.email = this.userform.email;
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ obj.email = '';
|
|
|
+ }
|
|
|
+ if(this.userform.dateBirth){
|
|
|
+ obj.dateBirth = this.userform.dateBirth;
|
|
|
+ }else{
|
|
|
+ obj.dateBirth = '';
|
|
|
+ }
|
|
|
+ obj.userId = this.user.userId;
|
|
|
+ upDataProfile(obj).then(response => {
|
|
|
+ this.msgSuccess('操作成功');
|
|
|
+ this.getUser();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改按钮密码
|
|
|
+ submit() {
|
|
|
+ let self = this;
|
|
|
+ self.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$confirm('确定要修改吗', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ self.updateUserPwd();
|
|
|
+ }).then(() => {
|
|
|
+ }).catch(() => {});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //指纹-查询用户指纹录取数量
|
|
|
+ fingerprintQuantityFun(){
|
|
|
+ let _this=this;
|
|
|
+ fingerprintQuantity(localStorage.getItem('userId')).then(response => {
|
|
|
+ if(response.code == 200){
|
|
|
+ _this.Quantity=response.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //修改密码接口
|
|
|
+ updateUserPwd(){
|
|
|
+ updateUserPwd(this.form.oldPassword, this.form.newPassword).then(
|
|
|
+ response => {
|
|
|
+ this.form.oldPassword = "";
|
|
|
+ this.form.newPassword = "";
|
|
|
+ this.form.confirmPassword = "";
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //返回按钮
|
|
|
+ outButton(){
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ //页面按钮点击
|
|
|
+ buttonTypeClick(type){
|
|
|
+ if(this.buttonType != type){
|
|
|
+ this.buttonType = type;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取信息
|
|
|
+ getUser() {
|
|
|
+ getUserProfile().then(response => {
|
|
|
+ this.user = response.data;
|
|
|
+ this.roleGroup = response.roleGroup;
|
|
|
+ this.postGroup = response.postGroup;
|
|
|
+ let obj = {
|
|
|
+ phonenumber:response.data.phonenumber,
|
|
|
+ email:response.data.email,
|
|
|
+ dateBirth:response.data.dateBirth,
|
|
|
+ }
|
|
|
+ this.$set(this,'userform',JSON.parse(JSON.stringify(obj)));
|
|
|
+ this.$set(this,'userformData',JSON.parse(JSON.stringify(obj)));
|
|
|
+ this.pageType = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //上传签名
|
|
|
+ upSignatureData(){
|
|
|
+ if(!this.signatureData){
|
|
|
+ this.msgError('请先选择签名上传并保存查看')
|
|
|
+ }
|
|
|
+ var blob = this.dataURLtoBlob(this.signatureData);
|
|
|
+ var file = this.blobToFile(blob, 'dx.jpg');
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('file',file,"DX.jpg")
|
|
|
+ console.log("formData",formData);
|
|
|
+ updateSignature(formData).then(response => {
|
|
|
+ if(response.code == 200){
|
|
|
+ this.msgSuccess("操作成功");
|
|
|
+ this.upImgOpen = false;
|
|
|
+ this.getUser();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //照片页面开关
|
|
|
+ upFaceOpenClick(type){
|
|
|
+ if(type == 1){
|
|
|
+ this.upFaceOpen = false;
|
|
|
+ }else if (type == 2){
|
|
|
+ this.upFaceUrl = this.user.faceImg;
|
|
|
+ this.upFaceOpen = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //签名页面开关
|
|
|
+ upImgOpenClick(type){
|
|
|
+ if(type == 1){
|
|
|
+ this.upImgOpen = false;
|
|
|
+ }else if (type == 2){
|
|
|
+ this.option.img = this.user.signature;
|
|
|
+ this.signatureData = this.user.signature;
|
|
|
+ this.upImgOpen = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //确定签名
|
|
|
+ upImgButton(){
|
|
|
+ let self = this;
|
|
|
+ this.$refs.cropper.getCropBlob(async (data) => {
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('file',data,"DX.jpg")
|
|
|
+ genSign(formData).then(response => {
|
|
|
+ if(response.code == 200){
|
|
|
+ this.signatureData = 'data:image/png;base64,'+response.data;
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //照片选择
|
|
|
+ faceChange(val){
|
|
|
+ const windowURL = window.URL || window.webkitURL;
|
|
|
+ this.upFaceUrl = windowURL.createObjectURL(val.raw)
|
|
|
+ },
|
|
|
+ //签名选择
|
|
|
+ signatureChange(val){
|
|
|
+ const windowURL = window.URL || window.webkitURL;
|
|
|
+ this.option.img = windowURL.createObjectURL(val.raw)
|
|
|
+ this.signatureData = "";
|
|
|
+ this.upImgOpen = true;
|
|
|
+ },
|
|
|
+ // 照片上传按钮
|
|
|
+ faceButton(type){
|
|
|
+ if(type==1){
|
|
|
+ this.upFaceOpen = false;
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$refs.faceUpLoad.submit();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //上传
|
|
|
+ handleAvatarSuccess(res, type) {
|
|
|
+ if(res.code == 200){
|
|
|
+ this.user.faceImg = res.data.cardUrl;
|
|
|
+ this.upFaceOpen = false;
|
|
|
+ this.getUser();
|
|
|
+ this.msgSuccess(res.msg)
|
|
|
+ this.$forceUpdate()
|
|
|
+ }else{
|
|
|
+ this.msgError(res.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ let type = false;
|
|
|
+ if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
|
|
|
+ type = true;
|
|
|
+ }else{
|
|
|
+ this.$message.error('只能上传png/jpeg/gif格式图片');
|
|
|
+ type = false;
|
|
|
+ }
|
|
|
+ return type;
|
|
|
+ },
|
|
|
+ // 实时预览函数
|
|
|
+ realTime(data) {
|
|
|
+ console.log("实时预览函数",data)
|
|
|
+ this.previews = data;
|
|
|
+ },
|
|
|
+ //图片加载的回调 imgLoad 返回结果success, error
|
|
|
+ imgLoad (msg) {
|
|
|
+ console.log("图片加载的回调",msg)
|
|
|
+ // console.log('imgLoad')
|
|
|
+ // console.log(msg)
|
|
|
+ },
|
|
|
+ //将base64转换为blob
|
|
|
+ dataURLtoBlob: function(dataurl) {
|
|
|
+ var arr = dataurl.split(',')
|
|
|
+ var mime = arr[0].match(/:(.*?);/)[1]
|
|
|
+ var bstr = atob(arr[1])
|
|
|
+ var n = bstr.length
|
|
|
+ var u8arr = new Uint8Array(n)
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ return new Blob([u8arr], { type: mime });
|
|
|
+ },
|
|
|
+ //将blob转换为file
|
|
|
+ blobToFile: function(theBlob, fileName){
|
|
|
+ theBlob.lastModifiedDate = new Date();
|
|
|
+ theBlob.name = fileName;
|
|
|
+ return theBlob;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .mine{
|
|
|
+ height:100%;
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ .mine-page{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ .left-max-box{
|
|
|
+ width:300px;
|
|
|
+ /*margin:20px;*/
|
|
|
+ margin:5px 20px 20px 10px;
|
|
|
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius:10px;
|
|
|
+ .left-title{
|
|
|
+ font-size:18px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top:30px;
|
|
|
+ color:#0045af;
|
|
|
+ }
|
|
|
+ .left-user-img{
|
|
|
+ width:130px;
|
|
|
+ height:130px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius:50%;
|
|
|
+ margin:30px auto 20px;
|
|
|
+ }
|
|
|
+ .left-name{
|
|
|
+ font-size:20px;
|
|
|
+ line-height:43px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .left-num{
|
|
|
+ font-size:16px;
|
|
|
+ line-height:38px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .left-text-max-box{
|
|
|
+ border-top:1px dashed #dedede;
|
|
|
+ border-bottom:1px dashed #dedede;
|
|
|
+ margin:24px 10px 0;
|
|
|
+ padding:20px 0;
|
|
|
+ .left-text-big-box{
|
|
|
+ display: flex;
|
|
|
+ .left-text-big-box-left{
|
|
|
+ width:100px;
|
|
|
+ height:38px;
|
|
|
+ display: flex;
|
|
|
+ margin-right:10px;
|
|
|
+ img{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin:11px 10px 0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ flex:1;
|
|
|
+ font-size:14px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-text-big-box-right{
|
|
|
+ height:38px;
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ .img-one{
|
|
|
+ width:16px;
|
|
|
+ height:14px;
|
|
|
+ margin:12px 10px 0;
|
|
|
+ }
|
|
|
+ .img-two{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin:11px 10px 0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ flex:1;
|
|
|
+ font-size:14px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-text-min-box{
|
|
|
+ display: flex;
|
|
|
+ height:38px;
|
|
|
+ img{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin:11px 10px 0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ flex:1;
|
|
|
+ font-size:14px;
|
|
|
+ line-height:38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-type-text-max-box{
|
|
|
+ padding:20px 0;
|
|
|
+ div{
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ flex:1;
|
|
|
+ font-size:14px;
|
|
|
+ color:#333;
|
|
|
+ line-height:40px;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ text-align: left;
|
|
|
+ margin-left:32px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ text-align: right;
|
|
|
+ margin-right:48px;
|
|
|
+ }
|
|
|
+ .p-color-a{
|
|
|
+ color:#06B924;
|
|
|
+ }
|
|
|
+ .p-color-b{
|
|
|
+ color:#FF9735;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-max-box{
|
|
|
+ flex:1;
|
|
|
+ /*margin:20px 20px 20px 0;*/
|
|
|
+ margin:5px 20px 20px 0;
|
|
|
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius:10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .right-title-box{
|
|
|
+ display: flex;
|
|
|
+ border-bottom:1px solid #dedede;
|
|
|
+ .title-button-min-box{
|
|
|
+ height:90px;
|
|
|
+ margin:0 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:6px;
|
|
|
+ line-height:78px;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ height:6px;
|
|
|
+ border-radius:4px;
|
|
|
+ }
|
|
|
+ .bottomColor{
|
|
|
+ color:#0045AF;
|
|
|
+ }
|
|
|
+ .bottomBack{
|
|
|
+ background:#0045AF ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-null-p{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .right-out-button{
|
|
|
+ margin:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .type-one-max-box{
|
|
|
+ width:100px;
|
|
|
+ margin:40px auto;
|
|
|
+ }
|
|
|
+ .up-data-box{
|
|
|
+ display: inline-block;
|
|
|
+ width:280px;
|
|
|
+ line-height:20px;
|
|
|
+ margin-bottom:30px;
|
|
|
+ .up-data-min-box{
|
|
|
+ .up-data-title{
|
|
|
+ font-size:15px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ .up-data-button{
|
|
|
+ width:120px;
|
|
|
+ height:120px;
|
|
|
+ border: 1px dashed #E0E0E0;
|
|
|
+ cursor: pointer;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ color:#999;
|
|
|
+ font-weight:500;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size: 20px;
|
|
|
+ line-height:40px;
|
|
|
+ margin-top:20px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-one{
|
|
|
+ width:120px;
|
|
|
+ height:120px;
|
|
|
+ }
|
|
|
+ .img-two{
|
|
|
+ width: 240px;
|
|
|
+ height:80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fingerprint_no{
|
|
|
+ >p:nth-of-type(1){
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ >p:nth-of-type(2){
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fingerprint_yes{
|
|
|
+ .fingerprint_yes_img{
|
|
|
+ width: 122px;
|
|
|
+ height: 142px;
|
|
|
+ position: relative;
|
|
|
+ >img:nth-of-type(1){
|
|
|
+ width: 122px;
|
|
|
+ height: 142px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ >img:nth-of-type(2){
|
|
|
+ width: 65px;
|
|
|
+ height: 88px;
|
|
|
+ position: absolute;
|
|
|
+ left: 29px;
|
|
|
+ top: 29px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >p{
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-item-min{
|
|
|
+ margin-top:40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .up-img-box{
|
|
|
+ .el-dialog__body{
|
|
|
+ padding-top:0;
|
|
|
+ }
|
|
|
+ .img-one{
|
|
|
+ width:560px;
|
|
|
+ height:150px;
|
|
|
+ }
|
|
|
+ .cropper-img{
|
|
|
+ display: block;
|
|
|
+ border:1px solid #e0e0e0;
|
|
|
+ width:360px;
|
|
|
+ height:120px;
|
|
|
+ margin:0 auto;
|
|
|
+ }
|
|
|
+ .cropper-box{
|
|
|
+ width:560px;
|
|
|
+ height:270px;
|
|
|
+ position: relative;
|
|
|
+ .cropper-button{
|
|
|
+ position: absolute;
|
|
|
+ right:10px;top:10px;
|
|
|
+ z-index:1;
|
|
|
+ background: #0183FA;
|
|
|
+ color:#fff;
|
|
|
+ cursor: pointer;
|
|
|
+ padding:5px 10px;
|
|
|
+ margin:0;
|
|
|
+ border-radius:6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mine{
|
|
|
+ .mine-page{
|
|
|
+ .input-number-none-box{
|
|
|
+ input{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
heyang
