123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442 |
- <template>
- <div class="m-right-block fr">
- <div class="right-block-bd">
- <div class="m-account">
- <div class="account-tit" style="height:30px">
- <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">基础资料</a>
- <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
- <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
- <!-- <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a> -->
- <!-- <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">手机修改</a> -->
- </div>
- <div v-if="show===1" class="lwh-ul-form">
- <form name="user">
- <div class="m-img tc"></div>
- <el-row :gutter="40" class="mt20">
- <el-col :span="6" class="col-normal tc">
- <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
- <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
- </el-col>
- <el-col :span="6" class="col-normal tc">
- <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
- <do-upload @onFinish="setGraduateImg" placeholder="上传毕业证"> </do-upload>
- </el-col>
- </el-row>
- <ul class="ul-form">
- <li class="txt-r">
- <span class="l-t"></span>注:<i></i>只有头像、性别、毕业证可以修改
- </li>
- <li>
- <span class="l-t">姓名:</span>
- <input type="text" v-model="userInfo.nickname" class="ipt ng-pristine ng-valid ng-valid-required"
- required="" placeholder="请输入用户名" disabled="disabled">
- </li>
- <li class="ng-binding">
- <span class="l-t">证件号:</span>{{userInfo.cardId||'未知'}}</li>
- <li>
- <span class="l-t"><i></i>性别:</span>
- <span class="sex">
- <a href="javascript:void(0)" @click="userInfo.gender='男'" :class="{'selected':userInfo.gender=='男'}">
- <span class="p-ico2 ico-man"></span>男
- </a>
- <a href="javascript:void(0)" @click="userInfo.gender='女'" :class="{'selected':userInfo.gender=='女'}">
- <span class="p-ico2 ico-woman"></span>女
- </a>
- </span>
- </li>
- <li>
- <span class="l-t"><i></i>手机号码:</span>
- <input type="text" v-model="userInfo.phone" class="ipt" disabled placeholder="请输入手机号码">
- <span class="tips ng-scope" v-if="!isPhone()">
- <span class="p-ico2"></span>手机格式不对
- </span>
- </li>
- <li class="mt20">
- <span class="l-t"></span>
- <el-button type="primary" class="confirm" @click="doSaveBaseInfo()">保 存</el-button>
- </li>
- </ul>
- </form>
- </div>
- <div v-if="show===2" class="lwh-ul-form ng-scope">
- <form name="user" class="ng-pristine ng-valid">
- <div class="m-img tc"></div>
- <el-row :gutter="40" class="mt20">
- <el-col :span="6" class="col-normal tc">
- <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
- <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
- </el-col>
- <el-col :span="6" class="col-normal tc">
- <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
- <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
- </el-col>
- </el-row>
- <ul class="ul-form mt50 ng-scope">
- <li>
- <span class="l-t">身份证:</span>
- <input v-model="userInfo.cardId" class="ipt1" disabled></input>
- </li>
- <li>
- <span class="l-t">姓名:</span>
- <input v-model="userInfo.nickname" class="ipt1" disabled></input>
- </li>
- <li>
- <span class="l-t">手机号:</span>
- <input v-model="userInfo.phone" class="ipt1" disabled></input>
- </li>
- <li class="mt30">
- <span class="l-t"></span>
- <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
- <el-button type="text" v-else >已经完成实名认证</el-button>
- </li>
- </ul>
- </form>
- </div>
- <div v-if="show===3" >
- <el-form ref="elForm" :inline="false" class="mt50">
- <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address" >
- <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode" >
- <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years" >
- <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company" >
- <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass" >
- <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
- <el-button type="primary" class="confirm" @click="saveMoreInfo()">
- 确认修改
- </el-button>
- </el-form-item>
- </el-form>
- </div>
- <div v-if="show===4" class="ng-scope">
- <el-form ref="elForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
- <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass" >
- <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password"
- show-password auto-complete="new-password">
- </el-input>
- </el-form-item>
- <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass" >
- <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password"
- show-password auto-complete="new-password">
- </el-input>
- </el-form-item>
- <el-form-item label="确认新密码" label-width='150px' class="mt30" prop="rePass">
- <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password"
- show-password auto-complete="new-password">
- </el-input>
- </el-form-item>
- <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
- <el-button type="primary" class="confirm" @click="doSavePassword()">
- 确认修改
- </el-button>
- </el-form-item>
- </el-form>
- </div>
- <div v-if="show===5" class="ng-scope">
- <el-form ref="elFormPhone" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
- <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone" >
- <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11" show-word-limit>
- </el-input>
- </el-form-item>
- <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code" >
- <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6" show-word-limit>
- </el-input>
- <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
- <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
- <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
- </el-form-item>
- <el-form-item label="" label-width='150px' class="mt30" prop="code" >
- <span style="color: red;">注意:手机必须本人实名认证手机</span>
- </el-form-item>
- <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
- <el-button type="primary" class="confirm" @click="doSavePhone()">
- 确认修改
- </el-button>
- </el-form-item>
- </el-form>
- </div>
- </div>
- </div>
- <el-dialog
- append-to-body
- close-on-click-modal
- :visible.sync="visible"
- :width="width">
- <img :src="imgUrl" @load="onLoad" alt="" />
- </el-dialog>
- </div>
- </template>
- <script>
- import { httpServer } from "@/components/httpServer/httpServer.js";
- import UploadImage from "@/components/upload/index.vue";
- import ImgView from '@/components/upload/imgView.vue';
- import DoUpload from '@/components/upload/index.vue'
- import rules from "@/utils/rules.js";
- import { mapGetters,mapActions } from "vuex";
- export default {
- data() {
- var validatePass2 = (rule, value, callback) => {
- if (value === "") {
- callback(new Error("请再次输入密码"));
- } else if (value !== this.passForm.newPass) {
- callback(new Error("两次输入密码不一致!"));
- } else {
- callback();
- }
- };
- return {
- show: 1,
- width: "",
- visible: false,
- timer: false,
- count: 0,
- imgUrl:'',
- passForm:{
- oldPass:'',
- newPass:'',
- rePass:'',
- },
- passRules:{
- oldPass: rules.defaultFun("请输入密码"),
- newPass: rules.passwordItem,
- rePass: [
- { required: true, validator: validatePass2, trigger: "blur" },
- ],
- },
- phoneForm:{
- phone:'',
- code:''
- },
- phoneRules:{
- phone: rules.defaultFun("请输入新手机"),
- code: rules.defaultFun("请输入短信校验码")
- },
- errorImg: 'this.src="' + require('../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
- }
- },
- computed: {
- ...mapGetters("user", ["userInfo"])
- },
- components:{DoUpload,UploadImage,ImgView},
- methods: {
- ...mapActions("user", ["saveBaseInfo"]),
- isPhone( ){
- let phone = this.userInfo.phone;
- return !phone||/^1[0-9]{10}$/.test(phone)
- },
- checkPhone() {
- let phone = this.phoneForm.phone;
- if (!/^1[3456789]\d{9}$/.test(phone)) {
- this.$message.error("请填写正确的手机号");
- return false;
- }
- return true
- },
- showImg( url ){
- this.imgUrl = url;
- this.visible = true;
- },
- setHeadImg( imgUrl ){
- this.userInfo.headImg = imgUrl;
- this.saveBaseInfo(this.userInfo)
- },
- setCardImg( url ){
- httpServer("User.addCardImg", {url}).then( res=>{
- if( res.code == 200){
- this.userInfo.cardImg = res.url;
- this.userInfo.nickname = res.nickanme
- this.userInfo.address = res.address;
- this.saveBaseInfo(this.userInfo)
- }
- })
- },
- setCardBackImg( url ){
- httpServer("User.addCardBackImg", {url}).then( res=>{
- if( res.code == 200){
- this.userInfo.cardBackImg = url;
- this.saveBaseInfo(this.userInfo)
- }
- })
- },
- setGraduateImg( url ){
- httpServer("User.addGraduateImg", {url}).then( res=>{
- if( res.code == 200){
- this.userInfo.graduateImg = url;
- this.saveBaseInfo(this.userInfo);
- }
- })
- },
- identify(){
- httpServer("User.identify", {}).then( res=>{
- if( res.code == 200){
- this.userInfo.identify = 1;
- this.saveBaseInfo(this.userInfo)
- this.$message.success( "实名认证成功")
- }
- })
- },
- doSaveBaseInfo(){
- let param = {
- headImg:this.userInfo.headImg,
- gender:this.userInfo.gender,
- }
- httpServer("User.saveBaseInfo", param).then( res=>{
- if( res.code == 200){
- this.$message.success("保存成功")
- this.saveBaseInfo(this.userInfo)
- }
- })
- },
- doSavePhone(){
- let {phone, code} = this.phoneForm;
- this.$refs["elFormPhone"].validate((valid) => {
- if (!valid) return;
- let param = {
- phone: phone,
- code: code
- }
- httpServer("User.ChangePhone", param).then( res=>{
- if( res.code == 200){
- this.userInfo.phone = phone;
- this.$message.success("修改手机成功");
- this.saveBaseInfo(this.userInfo);
- this.$refs["elFormPhone"].resetFields()
- }
- })
- })
- },
- getCode() {
- if (!this.checkPhone()) return;
- let phone = this.phoneForm.phone
- this.startTimer()
- let type = "changePhone"
- httpServer("Auth.getCode", { phone, type}).then(res => {
- if (res.code == 200) {
- this.$message.successMsg("发送成功", 1)
- this.startTimer()
- }
- })
- },
- startTimer() {
- const TIME_COUNT = 60; //更改倒计时时间
- if (this.timer) clearInterval(this.timer);
- this.count = TIME_COUNT;
- this.timer = setInterval(() => {
- if (this.count > 0) {
- this.count--;
- } else {
- clearInterval(this.timer); // 清除定时器
- this.timer = null;
- this.count = 0;
- }
- }, 1000)
- },
- doSavePassword(){
- let {oldPass, newPass} = this.passForm;
- this.$refs["elForm"].validate((valid) => {
- console.log(" valid")
- if (!valid) return;
- let param = {
- oldPass:this.$md5(oldPass),
- newPass:this.$md5(newPass)
- }
- httpServer("User.ResetPass", param).then( res=>{
- if( res.code == 200){
- this.passForm = {oldPass:'', newPass:'', rePass:''};
- this.$message.success("密码修改成功")
- this.$refs["elForm"].resetField();
- }
- })
- })
- },
- onLoad(e) {
- const img = e.target;
- let width = 0;
- if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
- width = img.width + 40;
- }
- this.width = width + "px";
- console.log( this.width )
- },
- saveMoreInfo(){
- let param = {
- education:this.userInfo.education,
- address:this.userInfo.address,
- years:+this.userInfo.years,
- company: this.userInfo.company,
- address: this.userInfo.address,
- education: this.userInfo.education,
- postalCode:this.userInfo.postalCode,
- }
- httpServer("User.saveMoreInfo", param).then( res=>{
- if( res.code == 200){
- this.$message.success( "编辑成功")
- }
- })
- }
- }
- }
- </script>
- <style>
- @import url("./index.css");
- @import url("../../../assets/css/m-account.css");
- .pass-input{
- width: 296px;
- }
- .confirm{
- width: 296px;
- }
- </style>
|