123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414 |
- <template>
- <div class="m-right-block">
- <div class="right-block-bd tc">
- <el-row style="margin: 0 auto;">
- <el-col :span="8">
- <div style="margin: 10px auto;">
- <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
- <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
- </div>
- <div style="margin: 10px auto;">
- <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
- <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
- <span style="color: red;text-align: center;margin-top: 10px;">必须本人身份证</span>
- </div>
- </el-col>
- <el-col :span="8">
- <el-form ref="elForm" :inline="false" style="width: 500px;margin: 0 auto;" label-width='160px' label-position="center">
- <el-form-item label="详细地址" class="mt30" prop="address">
- <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="邮政编码" class="mt30" prop="postalCode">
- <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="工作年限" class="mt30" prop="years">
- <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="工作单位" class="mt30" prop="company">
- <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
- </el-input>
- </el-form-item>
- <el-form-item label="最高学历" 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='0' class="mt30" prop="rePass">
- <el-button type="primary" @click="saveMoreInfo()">
- 确认修改
- </el-button>
- <el-button type="warning" @click="passwdDialog=true">修改密码</el-button>
- <el-button type="danger" @click="openPhoneDialog()">修改手机</el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row>
- <el-dialog :visible.sync="passwdDialog" title="修改密码" center :close-on-click-modal="false"
- :modal-append-to-body="false" :append-to-body="true" :show-close="false">
- <el-form ref="passForm" :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" @click="passwdDialog=false">
- 取消修改
- </el-button>
- <el-button type="warning" @click="doSavePassword()">
- 确认修改
- </el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- <el-dialog :visible.sync="phoneDialog" title="修改手机" center :close-on-click-modal="false"
- :modal-append-to-body="false" :append-to-body="true" :show-close="false">
- <el-form ref="phoneForm" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
- <el-form-item label="用户身份证" label-width='150px' class="mt30" prop="cardId">
- <el-input placeholder="输入用户身份证" v-model="phoneForm.cardId " style="width: 300px;" :maxlength="18" disabled />
- </el-form-item>
- <el-form-item label="用户的姓名" label-width='150px' class="mt30" prop="nickname">
- <el-input placeholder="输入姓名" v-model="phoneForm.nickname " style="width: 300px;" :maxlength="11">
- </el-input>
- </el-form-item>
- <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" @click="phoneDialog=false">
- 取消修改
- </el-button>
- <el-button type="warning" @click="doSavePhone()">
- 确认修改
- </el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- <el-dialog append-to-body close-on-click-modal :visible.sync="visible" :width="width">
- <img :src="imgUrl" @load="onLoad" alt="" />
- </el-dialog>
- </div>
- </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: '',
- },
- passwdDialog: false,
- phoneDialog: false,
- passRules: {
- oldPass: rules.defaultFun("请输入密码"),
- newPass: rules.passwordItem,
- rePass: [{
- required: true,
- validator: validatePass2,
- trigger: "blur"
- }, ],
- },
- phoneForm: {
- cardId:'',
- nickname:'',
- phone: '',
- code: ''
- },
- phoneRules: {
- phone: rules.defaultFun("请输入新手机"),
- code: rules.defaultFun("请输入短信校验码")
- },
- errorImg: 'this.src="' + require('../../../assets/images/no-data_hash5abcd2ef62.png') + '"'
- }
- },
- 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) {
- console.log('setHeadImg', imgUrl)
- this.userInfo.headImg = imgUrl;
- },
- setCardImg(url) {
- httpServer("User.addCardImg", {
- url
- }).then(res => {
- if (res.code == 200) {
- this.userInfo.cardImg = res.url;
- this.userInfo.nickname = res.nickname
- 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("保存成功")
- }
- })
- },
- openPhoneDialog(){
- this.phoneForm.phone = ''
- this.phoneForm.code = ''
- this.phoneForm.cardId = this.userInfo.cardId
- this.phoneForm.nickname = this.userInfo.nickname
- this.phoneDialog = true
- },
- doSavePhone() {
- let {
- phone,
- code
- } = this.phoneForm;
- this.$refs["phoneForm"].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.phoneDialog = false
- this.$message.success("修改手机成功");
- this.saveBaseInfo(this.userInfo);
- }
- })
- })
- },
- 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;
- console.log({
- oldPass,
- newPass
- })
- this.$refs["passForm"].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.passwdDialog = false
- this.$message.success("密码修改成功")
- }
- })
- })
- },
- 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>
|