286 lines
9.4 KiB
HTML
286 lines
9.4 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/mobile/assets/index.css?{VERHASH}"/>
|
|
<style>
|
|
.editdialog .el-overlay-dialog{
|
|
padding: 16px;
|
|
}
|
|
.editdialog .el-overlay-dialog .el-dialog{
|
|
width: 100%;
|
|
}
|
|
.editdialog .el-overlay-dialog .el-dialog .el-dialog__header{
|
|
padding: 15px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.editdialog .el-overlay-dialog .el-dialog .el-dialog__body{
|
|
padding: 10px 15px;
|
|
}
|
|
.editdialog .el-overlay-dialog .el-dialog .el-dialog__footer{
|
|
padding: 5px 15px 10px;
|
|
}
|
|
</style>
|
|
<!--{template common/container/pc/header_end}-->
|
|
<div id="dzzoffice">
|
|
<el-container class="page-main">
|
|
<el-header class="page-header" height="40px" style="border: 0;background: transparent;padding: 0 10px">
|
|
<a class="h-left" href="user.php?mod=my" style="color: var(--el-text-color-regular);">
|
|
<el-icon size="large"><Arrow-Left /></el-icon>
|
|
</a>
|
|
<div class="h-center" style="justify-content: center;">
|
|
<el-text size="large">用户资料</el-text>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
|
|
<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" style="width: 100%;" @click="handleSubmit">保存更改</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</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.config.warnHandler = function(){return null};
|
|
dzzoffice.mount('#dzzoffice');
|
|
</script>
|
|
|
|
<!--{template common/container/pc/footer}-->
|