286 lines
9.8 KiB
HTML
286 lines
9.8 KiB
HTML
<!--{template common/container/pc/header_start}-->
|
|
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
|
|
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/pc/assets/index.css?{VERHASH}"/>
|
|
<style type="text/css">
|
|
.tipTxt{
|
|
margin-left: 6px;
|
|
display: inline-block;
|
|
}
|
|
.page-content .Topcarousel{
|
|
line-height: 148px;
|
|
}
|
|
</style>
|
|
<!--{template common/container/pc/header_end}-->
|
|
<div id="dzzoffice">
|
|
<el-container class="page-main">
|
|
<!--{template common/container/pc/header_default}-->
|
|
<el-main style="padding: 0px;overflow: hidden;position: relative;">
|
|
|
|
<el-scrollbar>
|
|
<div class="page-content">
|
|
<el-scrollbar class="page-component__scroll container" style="padding: 0 10px;">
|
|
<div class="breadcrumb-wrapper" style="margin:25px 0">
|
|
<el-breadcrumb separator-icon="ArrowRight">
|
|
<el-breadcrumb-item><el-link href="user.php?mod=my">用户中心</el-link></el-breadcrumb-item>
|
|
<el-breadcrumb-item>用户资料修改</el-breadcrumb-item>
|
|
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="content" v-loading="btnloading">
|
|
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" style="padding: 20px 20px 16px; background: var(--el-bg-color); border: var(--el-border); border-radius: 12px;">
|
|
<el-form-item label="头像：">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="user.php?mod=my&op=profile&do=uploadimg"
|
|
name="file"
|
|
accept="image/png,image/jpg,image/jpeg,image/gif"
|
|
:on-success="handleLogoSuccess"
|
|
:on-progress="handleLogoProgress"
|
|
:before-upload="beforeLogoUpload"
|
|
:show-file-list="false">
|
|
<el-progress v-show="ispercentage" type="circle" :width="148" :percentage="percentage"></el-progress>
|
|
<template v-if="ruleForm.imgpath||avatarstatus=='1'">
|
|
<template v-if="ruleForm.imgpath">
|
|
<el-image class="avatarimg" fit="contain" :src="ruleForm.imgpath" style="max-width:120px;max-height:120px;"></el-image>
|
|
</template>
|
|
<template v-else>
|
|
<div class="avatarstatus">
|
|
<img :src="'avatar.php?uid=$_G['uid']&random='+Math.ceil(Math.random()*100)" title="admin" class=" special_avatar_class" style="max-width:100%;max-height:100%;vertical-align: middle;">
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱：" prop="email">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.email"></el-input>
|
|
<el-text type="info" class="tipTxt" size="small">用于登录</el-text>
|
|
</el-form-item>
|
|
<el-form-item label="用户名：" prop="nickname">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.nickname"></el-input>
|
|
<el-text type="info" class="tipTxt" size="small">用于登录，站点中不显示</el-text>
|
|
</el-form-item>
|
|
<el-form-item label="姓名：" prop="username">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.username"></el-input>
|
|
<el-text type="info" class="tipTxt" size="small">用户界面中显示，不能用于登录</el-text>
|
|
</el-form-item>
|
|
<el-form-item label="手机号：" prop="phone">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.phone"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="微信号：" prop="weixinid">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.weixinid"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="原密码：" prop="password0">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.password0"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="新密码：" prop="password">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.password"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="确认新密码：" prop="password2">
|
|
<el-input class="maxWidth" v-model.trim="ruleForm.password2"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSubmit">保存更改</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
|
|
const dzzoffice = createApp({
|
|
data() {
|
|
var self = this;
|
|
var inputpassword = function(rule, value, callback){
|
|
if (value) {
|
|
if (self.ruleForm.password2 !== '') {
|
|
self.$refs.ruleForm.validateField('password2');
|
|
}
|
|
callback();
|
|
}else{
|
|
callback();
|
|
}
|
|
};
|
|
var inputpassword2 = function(rule, value, callback){
|
|
if (value !== self.ruleForm.password) {
|
|
callback(new Error('两次输入密码不一致!'));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
DocumentThemeColor:'',
|
|
percentage:0,
|
|
ispercentage:false,
|
|
btnloading:false,
|
|
avatarstatus:'$userdata[avatarstatus]',
|
|
ruleForm: {
|
|
imgpath:'',
|
|
email:'$userdata[email]',
|
|
nickname:'$userdata[nickname]',
|
|
username:'$userdata[username]',
|
|
phone:'$userdata[phone]',
|
|
weixinid:'$userdata[weixinid]',
|
|
password0:'',
|
|
password:'',
|
|
password2:'',
|
|
},
|
|
rules: {
|
|
email: [
|
|
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
|
],
|
|
nickname: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: ['blur', 'change'] }
|
|
],
|
|
username: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
|
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: ['blur', 'change'] }
|
|
],
|
|
phone: [
|
|
{ required: false, message: '请输入手机号'}
|
|
],
|
|
weixinid: [
|
|
{ required: false, message: '请输入微信' },
|
|
],
|
|
password: [
|
|
{ validator: inputpassword, trigger: ['blur', 'change'] }
|
|
],
|
|
password2: [
|
|
{ validator: inputpassword2, trigger: ['blur', 'change'] }
|
|
]
|
|
},
|
|
}
|
|
},
|
|
watch:{
|
|
DocumentThemeColor:{
|
|
handler(newval){
|
|
document.querySelector('html').className = newval
|
|
},
|
|
deep:true,
|
|
// immediate:true
|
|
}
|
|
},
|
|
created() {
|
|
//主题颜色
|
|
let theme = localStorage.getItem('theme');
|
|
if(theme){
|
|
this.DocumentThemeColor=theme;
|
|
}else{
|
|
this.DocumentThemeColor = 'light'
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
DocumentThemeChange(){
|
|
if(this.DocumentThemeColor=='light'){
|
|
this.DocumentThemeColor='dark';
|
|
localStorage.setItem('theme','dark');
|
|
}else{
|
|
this.DocumentThemeColor='light';
|
|
localStorage.setItem('theme','light');
|
|
}
|
|
|
|
},
|
|
headerMenuSelect(val){
|
|
if(val == 'library'){
|
|
window.location.href = DZZSCRIPT+'?mod=pichome&op=library';
|
|
}else if(val == 'banner'){
|
|
window.location.href = DZZSCRIPT+'?mod='+val+'&op=admin';
|
|
}else{
|
|
window.location.href = DZZSCRIPT+'?mod='+val;
|
|
}
|
|
},
|
|
beforeLogoUpload(file){
|
|
var self = this;
|
|
var isJPG = ['image/png','image/jpeg','image/jpg','image/gif'];
|
|
var isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (isJPG.indexOf(file.type)<0) {
|
|
self.$message.error('图片格式错误');
|
|
}
|
|
if (!isLt2M) {
|
|
self.$message.error('图片大小不能超过 2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
|
|
self.ispercentage = true;
|
|
},
|
|
handleLogoSuccess(res, file){
|
|
if(res.error){
|
|
var self = this;
|
|
self.$message.error(res.error);
|
|
}else{
|
|
this.ruleForm.imgpath = res.path;
|
|
}
|
|
},
|
|
handleLogoProgress(event, file, fileList) {
|
|
var percent = parseInt(event.percent);
|
|
this.percentage = percent;
|
|
if(percent == 100){
|
|
this.ispercentage = false;
|
|
this.percentage = 0
|
|
}
|
|
},
|
|
handleSubmit(){
|
|
var self = this;
|
|
self.$refs.ruleForm.validate(async function(valid){
|
|
if (valid) {
|
|
var params = {
|
|
'accountedit':true,
|
|
'formhash':'{FORMHASH}',
|
|
'uid':'$uid',
|
|
'email':self.ruleForm.email,
|
|
'nickname':self.ruleForm.nickname,
|
|
'username':self.ruleForm.username,
|
|
'phone':self.ruleForm.phone,
|
|
'weixinid':self.ruleForm.weixinid,
|
|
'password0':self.ruleForm.password0,
|
|
'password':self.ruleForm.password,
|
|
'password2':self.ruleForm.password2,
|
|
};
|
|
if(self.ruleForm.imgpath){
|
|
params['imgpath'] = self.ruleForm.imgpath;
|
|
}
|
|
self.btnloading = true;
|
|
const {data: res} = await axios.post('user.php?mod=my&op=profile&do=personal',params);
|
|
if(res.success){
|
|
// self.$message({
|
|
// message: '保存成功',
|
|
// type: 'success'
|
|
// });
|
|
window.location.reload();
|
|
}else{
|
|
self.btnloading = false;
|
|
self.$message.error(res.msg || '提交失败');
|
|
}
|
|
|
|
} else {
|
|
self.$message.error('验证失败');
|
|
self.btnloading = false;
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted() {}
|
|
});
|
|
dzzoffice.use(ElementPlus, {
|
|
locale: ElementPlusLocaleZhCn,
|
|
});
|
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
dzzoffice.component(key, component)
|
|
}
|
|
dzzoffice.component('comavatar', comavatar)
|
|
// 屏蔽警告信息
|
|
dzzoffice.config.warnHandler = function(){return null};
|
|
dzzoffice.mount('#dzzoffice');
|
|
</script>
|
|
|
|
<!--{template common/container/pc/footer}-->
|