<template>
<div>
<el-breadcrumb
style="margin:20px 0 0 20px"
separator-class="el-icon-arrow-right"
>
<el-breadcrumb-item>账号中心</el-breadcrumb-item>
<el-breadcrumb-item>基本信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card shadow="hover" class="card" style="margin-top:20px">
<div class="left">
<div class="pic">
<el-image :src="gerenuserInfos.headUrl"></el-image>
<div class="xiugai" @click="modify">修改</div>
</div>
</div>
<el-descriptions style="margin-left:30px">
<el-descriptions-item label="用户姓名：">{{ gerenuserInfos.userName }}</el-descriptions-item>
<el-descriptions-item label="手机号：">{{ gerenuserInfos.mobilPhone }}</el-descriptions-item>
<el-descriptions-item label="身份证：">{{ gerenuserInfos.cardNo }}</el-descriptions-item>
<el-descriptions-item label="邮箱：">
{{ gerenuserInfos.email }}
</el-descriptions-item>
</el-descriptions>
<!-- <div class="middle">
<div class="accountNumber">
用户姓名：
<div style="font-weight:bold;margin-left:26px">{{ gerenuserInfos.userName }}</div>
</div>
<div class="phone">
手机号：
<div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.mobilPhone }}</div>
</div>
<div class="accountNumber">
身份证：
<div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.cardNo }}</div>
</div>
<div class="phone">
邮箱：
<div style="font-weight:bold;margin-left:56px">{{ gerenuserInfos.email }}</div>
</div>
</div> -->
<!-- <div class="right">
<div class="accountNumber">
身份证：
<div >{{ gerenuserInfos.cardNo }}</div>
</div>
<div class="phone">
邮箱：
<div >{{ gerenuserInfos.email }}</div>
</div>
</div> -->
<el-button
type="primary"
icon="el-icon-edit"
plain
class="btn"
size="small"
@click="EditInformation"
>编辑信息</el-button
>
</el-card>
<el-dialog
title="编辑信息"
:visible.sync="dialogVisible"
width="30%"
@close="btnCancel"
>
<el-form
:model="UserInfo"
label-width="120px"
:rules="rules"
ref="ruleForm"
>
<el-form-item label="用户姓名：">
<el-input v-model="UserInfo.userName" disabled></el-input>
</el-form-item>
<el-form-item label="手机号：" prop="mobilPhone">
<el-input
v-model="UserInfo.mobilPhone"
οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
></el-input>
</el-form-item>
<el-form-item label="身份证：" prop="cardNo">
<el-input
v-model="UserInfo.cardNo"
οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
></el-input>
</el-form-item>
<el-form-item label="邮箱：" prop="email">
<el-input v-model="UserInfo.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="btnCancel">取 消</el-button>
<el-button type="primary" @click="btnOk">确 定</el-button>
</span>
</el-dialog>
<!-- 头像编辑 -->
<el-dialog title="编辑头像" :visible.sync="imgDialog">
<div style="min-width: 540px;width:600px;">
<div class="eleme">
<el-upload
class="upload-demo"
ref="upload"
action="#"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:auto-upload="true"
:show-file-list="false"
>
<!-- :on-success="SuccessFlie" -->
<el-button slot="trigger" size="small" type="primary"
>选择图片</el-button
>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload"
>上传头像</el-button
>
</el-upload>
</div>
<div></div>
<div class="cropper">
<div
class="cropper-content"
style="margin-top:30px;margin-left:30px;"
>
<div class="cropper">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
@realTime="realTime"
@imgLoad="imgLoad"
></vueCropper>
</div>
<!-- <div style="margin-left:20px;">
<div
class="show-preview"
:style="{
width: '150px',
height: '155px',
overflow: 'hidden',
margin: '5px'
}"
></div>
</div> -->
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import VueCropper from 'vue-cropper'
Vue.use(VueCropper);
import { Aside } from "element-ui";
import { queryBaseUserInfo, updateBaseUserInfo, uploadHead } from "./api.js";
export default {
data() {
// 身份证号校验
var checkIdNum = (rule, value, callback) => {
const reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
if (!value) {
return callback(new Error("证件号码不能为空"));
} else if (!reg.test(value)) {
return callback(new Error("证件号码不正确"));
} else {
callback();
}
};
// 检验邮箱
var checkEmail = (rule, value, cb) => {
const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (regEmail.test(value)) {
// 合法的邮箱
return cb();
}
cb(new Error("请输入合法的邮箱"));
};
// 校验手机号
var checkMobile = (rule, value, cb) => {
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
// 合法的手机号码
return cb();
}
cb(new Error("手机号码格式不正确"));
};
return {
gerenuserInfos: {}, // 用户个人信息
option: {
img: "",
outputSize: 1, //剪切后的图片质量（0.1-1）
full: false, //输出原图比例截图 props名full
outputType: "png",
canMove: true,
original: false,
canMoveBox: true,
autoCrop: true,
autoCropWidth: 150,
autoCropHeight: 150,
fixedBox: false
},
fileName: "",
imgUrl: "", // 图片路径
previews: {}, //实时预览图数据
attach: {
//后端附件表
id: "",
userId: "",
customaryUrl: "", //原图片路径
laterUrl: "", //裁剪后图片路径 /static/logo.png
attachType: "photo" //附件类型
},
dialogVisible: false, // 弹层信息
imgDialog: false, // 头像裁剪弹层
UserInfo: {
userName: "", // 用户姓名
operatorId: "",
mobilPhone: "", // 电话号码
cardNo: "", // 身份证号码
email: "" // 邮箱
},
fileList: {},
rules: {
mobilPhone: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{
validator: checkMobile,
trigger: "blur"
}
],
cardNo: [
{ required: true, message: "身份证不能为空", trigger: "blur" },
{
validator: checkIdNum,
trigger: "blur"
}
],
email: [
{ required: true, message: "邮箱不能为空", trigger: "blur" },
{
validator: checkEmail,
trigger: "blur"
}
]
}
};
},
created() {
},
mounted() {
this.getUserInfo();
},
methods: {
SuccessFlie(res) {
console.log(res);
},
// 获取用户基本信息
async getUserInfo() {
const res = await queryBaseUserInfo();
if (res.recode == 200) {
this.gerenuserInfos = res.redata;
console.log(res);
} else {
this.$message.warning("请求失败，请稍后重试");
}
},
submitUpload(file) {
// this.$refs.upload.submit();
this.finish("blob");
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
beforeUpload(file) {
this.fileList = file;
console.log(file);
let data = window.URL.createObjectURL(new Blob([file]));
this.fileName = file.name;
this.option.img = data;
},
//放大/缩小
changeScale(num) {
console.log("changeScale");
num = num || 1;
this.$refs.cropper.changeScale(num);
},
//坐旋转
rotateLeft() {
console.log("rotateLeft");
this.$refs.cropper.rotateLeft();
},
//右旋转
rotateRight() {
console.log("rotateRight");
this.$refs.cropper.rotateRight();
},
//上传图片（点击上传按钮）
finish(type) {
let _this = this;
let formData = new FormData();
formData.append("file", this.fileList);
// 输出
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
console.log(this.fileList);
let img = window.URL.createObjectURL(data);
this.model = true;
this.modelSrc = img;
});
console.log(formData);
uploadHead(formData).then(res => {
if (res.recode == 200) {
this.getUserInfo();
this.imgDialog = false;
this.$message.success("操作成功");
} else {
this.$message.warning("操作失败，请稍后重试");
}
console.log(res);
});
} else {
this.$refs.cropper.getCropData(data => {
this.model = true;
this.modelSrc = data;
});
}
},
// 实时预览函数
realTime(data) {
console.log("realTime");
this.previews = data;
},
imgLoad(msg) {
console.log("imgLoad");
console.log(msg);
},
modify() {
this.imgDialog = true;
},
handleClose() {
this.imgDialog = false;
},
async EditInformation() {
this.UserInfo = this.gerenuserInfos;
this.dialogVisible = true;
},
btnCancel() {
this.$refs.ruleForm.resetFields();
this.dialogVisible = false;
},
btnOk() {
this.$refs.ruleForm.validate(async isOk => {
if (isOk) {
// 修改用户基本信息
const res = await updateBaseUserInfo(this.UserInfo);
if (res.recode == 200) {
this.getUserInfo();
this.dialogVisible = false;
this.$message.success("修改成功");
} else {
this.$message.warning("操作失败，请稍后重试");
}
} else {
this.$message.warning("请检查你的信息是否填写完整");
}
});
}
}
};
</script>
<style lang="less" scoped>
/deep/.el-card {
margin: 20px 0 0 20px;
}
.cropper-content {
min-width: 540px;
display: flex;
.cropper {
width: 260px;
height: 260px;
}
.show-preview {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
.preview {
overflow: hidden;
border-radius: 50%;
border: 1px solid #cccccc;
background: #cccccc;
margin-left: 40px;
}
}
}
.cropper-content .show-preview .preview {
margin-left: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.el-dialog {
width: 700px !important;
height: auto;
}
.show-preview {
display: flex;
justify-content: center;
}
.preview {
border-radius: 50%;
overflow: hidden;
border: 1px solid #cccccc;
background: #cccccc;
width: 150px !important;
height: 150px !important;
margin-left: 50px;
margin-top: 50px;
}
.upload-img {
width: 100px;
height: 30px;
border: 1px solid #f08512;
margin-bottom: 5px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.footerBtn {
display: flex;
justify-content: center;
margin-top: 15px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/deep/.el-dialog__footer {
text-align: center;
}
.btn {
background-color: skyblue;
position: absolute;
right: 10px;
bottom: 10px;
}
.middle {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 150px;
.accountNumber {
display: flex;
margin-right: 30px;
}
.phone {
display: flex;
margin-right: 30px;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-around;
.accountNumber {
display: flex;
margin-right: 30px;
}
.phone {
display: flex;
margin-right: 30px;
}
}
/deep/.el-card__body {
display: flex;
align-items: center;
position: relative;
}
.pic {
position: relative;
margin-left: 32px;
height: 116px;
width: 116px;
position: relative;
text-align: center;
border-radius: 50%;
overflow: hidden;
.xiugai {
width: 100%;
height: 31px;
opacity: 0.75;
background: rgb(24, 24, 24);
position: absolute;
bottom: 0px;
font-size: 12px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 31px;
cursor: pointer;
}
.el-image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
</style>
扫一扫
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
