jianjun
4 years ago
9 changed files with 935 additions and 906 deletions
@ -1,469 +1,493 @@ |
|||
<template> |
|||
<div class="member-container"> |
|||
<el-card class="member-box-card"> |
|||
<div class="member-info-view"> |
|||
<p class="title pl-10">个人信息</p> |
|||
<div v-if="userInfo" class="account-info-view"> |
|||
<table> |
|||
<tbody> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">用户名：</td> |
|||
<td> |
|||
{{ userInfo.name }} |
|||
<el-button type="text" @click="editNameDialogVisible=true"> |
|||
修改 |
|||
</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">账号邮箱：</td> |
|||
<td> |
|||
{{ userInfo.email }} |
|||
<el-button type="text" @click="emailDialogVisible=true">绑定</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">密码：</td> |
|||
<td> |
|||
****** |
|||
<el-button type="text" @click="pwdDialogVisible=true">修改</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">手机号：</td> |
|||
<td> |
|||
{{ userInfo.phoneNumber }} |
|||
<el-button v-if="userInfo.phoneNumber" type="text" @click="phoneDialogVisible=true"> |
|||
修改 |
|||
</el-button> |
|||
<el-button v-else type="text" @click="phoneDialogVisible=true">绑定</el-button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="account-avatar-view"> |
|||
<my-upload v-model="showUploadAvatar" |
|||
field="file" |
|||
:width="300" |
|||
:height="300" |
|||
:url="getUploadUrl()" |
|||
:headers="getUploadHeader()" |
|||
img-format="png" |
|||
@crop-upload-success="cropUploadSuccess" |
|||
/> |
|||
<el-avatar |
|||
style="width: 100px; height: 100px;" |
|||
:src="userInfo.avatar" |
|||
@click.native="showUploadAvatar=true" |
|||
/> |
|||
<div style="margin-left: 10px; margin-top: 5px;"> |
|||
<el-button @click.native="showUploadAvatar=true">更换头像</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<p class="title pl-10">第三方账号</p> |
|||
<div v-if="userInfo" class="account-info-view"> |
|||
<div style="margin-left: 30px; display: flex; flex-direction: row;"> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fab fa-weixin icon" :style="{color:userInfo.wxName?'#3F9F3F':''}" /> |
|||
<span v-if="userInfo.wxName"> |
|||
{{ userInfo.wxName }}(已绑定) |
|||
</span> |
|||
<el-button v-else type="text" @click="bindWxHandle">绑定</el-button> |
|||
<el-dialog title="微信扫描二维码绑定" |
|||
width="400px" |
|||
center |
|||
:visible.sync="bindWxDialogVisible" |
|||
> |
|||
<el-image |
|||
style="width: 150px; height: 150px; display: block; margin: 0 auto;" |
|||
:src="bindWxQrcode" |
|||
fit="fill" |
|||
/> |
|||
</el-dialog> |
|||
</div> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fa fa-qq icon" :style="{color:userInfo.qqName?'#078DF0':''}" /> |
|||
<span v-if="userInfo.qqName"> |
|||
{{ userInfo.qqName }}(已绑定) |
|||
</span> |
|||
<el-button v-else type="text" @click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-button> |
|||
</div> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fa fa-weibo icon" /> |
|||
<span v-if="userInfo.wbName"> |
|||
{{ userInfo.wbName }}(已绑定) |
|||
</span> |
|||
<el-button v-else type="text">绑定</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="member-container"> |
|||
<el-card class="member-box-card"> |
|||
<div class="member-info-view"> |
|||
<p class="title pl-10">个人信息</p> |
|||
<div v-if="userInfo" |
|||
class="account-info-view"> |
|||
<table> |
|||
<tbody> |
|||
<tr> |
|||
<td width="80" |
|||
style="text-align: right;">用户名：</td> |
|||
<td> |
|||
{{ userInfo.name }} |
|||
<el-button type="text" |
|||
@click="editNameDialogVisible=true"> |
|||
修改 |
|||
</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" |
|||
style="text-align: right;">账号邮箱：</td> |
|||
<td> |
|||
{{ userInfo.email }} |
|||
<el-button type="text" |
|||
@click="emailDialogVisible=true">绑定</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" |
|||
style="text-align: right;">密码：</td> |
|||
<td> |
|||
****** |
|||
<el-button type="text" |
|||
@click="pwdDialogVisible=true">修改</el-button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" |
|||
style="text-align: right;">手机号：</td> |
|||
<td> |
|||
{{ userInfo.phoneNumber }} |
|||
<el-button v-if="userInfo.phoneNumber" |
|||
type="text" |
|||
@click="phoneDialogVisible=true"> |
|||
修改 |
|||
</el-button> |
|||
<el-button v-else |
|||
type="text" |
|||
@click="phoneDialogVisible=true">绑定</el-button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="account-avatar-view"> |
|||
<my-upload v-model="showUploadAvatar" |
|||
field="file" |
|||
:width="300" |
|||
:height="300" |
|||
:url="getUploadUrl()" |
|||
:headers="getUploadHeader()" |
|||
img-format="png" |
|||
@crop-upload-success="cropUploadSuccess" /> |
|||
<el-avatar style="width: 100px; height: 100px;" |
|||
:src="userInfo.avatar" |
|||
@click.native="showUploadAvatar=true" /> |
|||
<div style="margin-left: 10px; margin-top: 5px;"> |
|||
<el-button @click.native="showUploadAvatar=true">更换头像</el-button> |
|||
</div> |
|||
</el-card> |
|||
<div> |
|||
<el-dialog |
|||
title="修改用户名" |
|||
:visible.sync="editNameDialogVisible" |
|||
width="450px" |
|||
center |
|||
> |
|||
<el-form ref="updateNameForm" :model="userInfoForm" :rules="userInfoRules" label-width="80px"> |
|||
<el-form-item label="新用户名" prop="name"> |
|||
<el-input v-model="userInfoForm.name" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{ |
|||
</div> |
|||
</div> |
|||
<p class="title pl-10">第三方账号</p> |
|||
<div v-if="userInfo" |
|||
class="account-info-view"> |
|||
<div style="margin-left: 30px; display: flex; flex-direction: row;"> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fab fa-weixin icon" |
|||
:style="{color:userInfo.wxName?'#3F9F3F':''}" /> |
|||
<span v-if="userInfo.wxName"> |
|||
{{ userInfo.wxName }}(已绑定) |
|||
</span> |
|||
<el-button v-else |
|||
type="text" |
|||
@click="bindWxHandle">绑定</el-button> |
|||
<el-dialog title="微信扫描二维码绑定" |
|||
width="400px" |
|||
center |
|||
:visible.sync="bindWxDialogVisible"> |
|||
<el-image style="width: 150px; height: 150px; display: block; margin: 0 auto;" |
|||
:src="bindWxQrcode" |
|||
fit="fill" /> |
|||
</el-dialog> |
|||
</div> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fa fa-qq icon" |
|||
:style="{color:userInfo.qqName?'#078DF0':''}" /> |
|||
<span v-if="userInfo.qqName"> |
|||
{{ userInfo.qqName }}(已绑定) |
|||
</span> |
|||
<el-button v-else |
|||
type="text" |
|||
@click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-button> |
|||
</div> |
|||
<div class="account-icon-view"> |
|||
<font-icon class="fa fa-weibo icon" /> |
|||
<span v-if="userInfo.wbName"> |
|||
{{ userInfo.wbName }}(已绑定) |
|||
</span> |
|||
<el-button v-else |
|||
type="text">绑定</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<div> |
|||
<el-dialog title="修改用户名" |
|||
:visible.sync="editNameDialogVisible" |
|||
width="450px" |
|||
center> |
|||
<el-form ref="updateNameForm" |
|||
:model="userInfoForm" |
|||
:rules="userInfoRules" |
|||
label-width="80px"> |
|||
<el-form-item label="新用户名" |
|||
prop="name"> |
|||
<el-input v-model="userInfoForm.name" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{ |
|||
this.$refs['updateNameForm'].validateField('name', err => { |
|||
if (!err) { |
|||
this.editNameDialogVisible = false; |
|||
this.updateUserHandle() |
|||
} |
|||
}) |
|||
}" |
|||
>保存</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="修改密码" |
|||
:visible.sync="pwdDialogVisible" |
|||
width="450px" |
|||
center |
|||
> |
|||
<el-form ref="updatePassWordForm" |
|||
style="width: 300px;" |
|||
:model="userPwdForm" :rules="userPwdRules" label-width="120px" |
|||
> |
|||
<el-form-item label="输入旧密码" prop="oldPassword"> |
|||
<el-input v-model="userPwdForm.oldPassword" placeholder="请输入旧密码" show-password /> |
|||
</el-form-item> |
|||
<el-form-item label="输入新密码" prop="password"> |
|||
<el-input v-model="userPwdForm.password" placeholder="请输入新密码" show-password /> |
|||
</el-form-item> |
|||
<el-form-item label="重复输入密码" prop="repeatPassword"> |
|||
<el-input v-model="userPwdForm.repeatPassword" placeholder="请重复输入密码" show-password /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{this.pwdDialogVisible = false;this.updateUserPwdHandle()}" |
|||
>完 成</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="修改邮箱" |
|||
:visible.sync="emailDialogVisible" |
|||
width="450px" |
|||
center |
|||
> |
|||
<el-form ref="updateEmailForm" |
|||
style="width: 80%;" |
|||
:model="userInfoForm" :rules="userInfoRules" label-width="80px" |
|||
> |
|||
<el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="userInfoForm.email" placeholder="请输入邮箱" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button v-prevent-re-click |
|||
type="primary" |
|||
@click="()=>{this.pwdDialogVisible = false;this.sendUpdateEmail()}" |
|||
>发送验证邮件</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="修改手机号" |
|||
:visible.sync="phoneDialogVisible" |
|||
width="450px" |
|||
center |
|||
> |
|||
<el-form ref="updatePhoneForm" |
|||
:model="userInfoForm" :rules="userInfoRules" label-width="120px" |
|||
> |
|||
<el-form-item label="手机号" prop="phoneNumber"> |
|||
<el-input v-model="userInfoForm.phoneNumber" placeholder="请输入手机号" /> |
|||
</el-form-item> |
|||
<el-form-item label="输入验证码" prop="code"> |
|||
<el-input v-model="userInfoForm.code" placeholder="请输入验证码" |
|||
style="display: inline-block; width: 60%;" |
|||
/> |
|||
<el-button v-prevent-re-click |
|||
style="display: inline-block; width: 40%;" |
|||
@click.native="sendUpdatePhoneNumber" |
|||
> |
|||
{{ phoneValidateCodeBtnText }} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{this.phoneDialogVisible = false;this.updateUserPhoneHandle()}" |
|||
>完 成</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
}">保存</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog title="修改密码" |
|||
:visible.sync="pwdDialogVisible" |
|||
width="450px" |
|||
center> |
|||
<el-form ref="updatePassWordForm" |
|||
style="width: 300px;" |
|||
:model="userPwdForm" |
|||
:rules="userPwdRules" |
|||
label-width="120px"> |
|||
<el-form-item label="输入旧密码" |
|||
prop="oldPassword"> |
|||
<el-input v-model="userPwdForm.oldPassword" |
|||
placeholder="请输入旧密码" |
|||
show-password /> |
|||
</el-form-item> |
|||
<el-form-item label="输入新密码" |
|||
prop="password"> |
|||
<el-input v-model="userPwdForm.password" |
|||
placeholder="请输入新密码" |
|||
show-password /> |
|||
</el-form-item> |
|||
<el-form-item label="重复输入密码" |
|||
prop="repeatPassword"> |
|||
<el-input v-model="userPwdForm.repeatPassword" |
|||
placeholder="请重复输入密码" |
|||
show-password /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" |
|||
class="dialog-footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{this.pwdDialogVisible = false;this.updateUserPwdHandle()}">完 成</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog title="修改邮箱" |
|||
:visible.sync="emailDialogVisible" |
|||
width="450px" |
|||
center> |
|||
<el-form ref="updateEmailForm" |
|||
style="width: 80%;" |
|||
:model="userInfoForm" |
|||
:rules="userInfoRules" |
|||
label-width="80px"> |
|||
<el-form-item label="邮箱" |
|||
prop="email"> |
|||
<el-input v-model="userInfoForm.email" |
|||
placeholder="请输入邮箱" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" |
|||
class="dialog-footer"> |
|||
<el-button v-prevent-re-click |
|||
type="primary" |
|||
@click="()=>{this.pwdDialogVisible = false;this.sendUpdateEmail()}">发送验证邮件</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog title="修改手机号" |
|||
:visible.sync="phoneDialogVisible" |
|||
width="450px" |
|||
center> |
|||
<el-form ref="updatePhoneForm" |
|||
:model="userInfoForm" |
|||
:rules="userInfoRules" |
|||
label-width="120px"> |
|||
<el-form-item label="手机号" |
|||
prop="phoneNumber"> |
|||
<el-input v-model="userInfoForm.phoneNumber" |
|||
placeholder="请输入手机号" /> |
|||
</el-form-item> |
|||
<el-form-item label="输入验证码" |
|||
prop="code"> |
|||
<el-input v-model="userInfoForm.code" |
|||
placeholder="请输入验证码" |
|||
style="display: inline-block; width: 60%;" /> |
|||
<el-button v-prevent-re-click |
|||
style="display: inline-block; width: 40%;" |
|||
@click.native="sendUpdatePhoneNumber"> |
|||
{{ phoneValidateCodeBtnText }} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" |
|||
class="dialog-footer"> |
|||
<el-button type="primary" |
|||
@click="()=>{this.phoneDialogVisible = false;this.updateUserPhoneHandle()}">完 成</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import myUpload from 'vue-image-crop-upload' |
|||
import constants from '@/utils/constants' |
|||
import FontIcon from '@/components/FontIcon' |
|||
import {getCurrentDomain} from '@/utils' |
|||
import { getCurrentDomain } from '@/utils' |
|||
|
|||
export default { |
|||
name: 'Member', |
|||
components: { |
|||
FontIcon, |
|||
myUpload |
|||
}, |
|||
data() { |
|||
let validateRePass = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请再次输入密码')) |
|||
} else if (value !== this.userPwdForm.repeatPassword) { |
|||
callback(new Error('两次输入密码不一致!')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
return { |
|||
memberMenuActive: '1', |
|||
phoneValidateCodeBtnText: '发送验证码', |
|||
userInfoRules: { |
|||
name: [ |
|||
{required: true, trigger: 'blur', message: '请输入昵称'} |
|||
], |
|||
email: [ |
|||
{required: true, trigger: 'blur', message: '请输入邮箱'}, |
|||
{ |
|||
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
|||
message: '请输入正确的邮箱' |
|||
} |
|||
], |
|||
phoneNumber: [ |
|||
{required: true, trigger: 'blur', message: '请输入手机号'}, |
|||
{ |
|||
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/, |
|||
message: '请输入正确的手机号' |
|||
} |
|||
], code: [ |
|||
{required: true, trigger: 'blur', message: '请输入验证码'} |
|||
] |
|||
}, |
|||
userPwdRules: { |
|||
oldPassword: [ |
|||
{required: true, trigger: 'blur', message: '请输入旧密码'}, |
|||
{ |
|||
pattern: constants.passwordReg, |
|||
message: constants.passwordRegDesc |
|||
} |
|||
], |
|||
password: [ |
|||
{required: true, trigger: 'blur', message: '请输入新密码'}, |
|||
{ |
|||
pattern: constants.passwordReg, |
|||
message: constants.passwordRegDesc |
|||
} |
|||
], |
|||
repeatPassword: [ |
|||
{required: true, trigger: 'blur', validator: validateRePass} |
|||
] |
|||
}, |
|||
bindWxDialogVisible: false, |
|||
bindWxQrcode: '', |
|||
editNameDialogVisible: false, |
|||
pwdDialogVisible: false, |
|||
phoneDialogVisible: false, |
|||
emailDialogVisible: false, |
|||
userInfo: {}, |
|||
userInfoForm: {}, |
|||
qqLoginAuthorizeUrl: '', |
|||
userPwdForm: { |
|||
oldPassword: '', |
|||
password: '', |
|||
repeatPassword: '' |
|||
}, |
|||
showUploadAvatar: false, |
|||
bindWxTimer: null |
|||
name: 'Member', |
|||
components: { |
|||
FontIcon, |
|||
myUpload |
|||
}, |
|||
data () { |
|||
let validateRePass = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请再次输入密码')) |
|||
} else if (value !== this.userPwdForm.repeatPassword) { |
|||
callback(new Error('两次输入密码不一致!')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
return { |
|||
memberMenuActive: '1', |
|||
phoneValidateCodeBtnText: '发送验证码', |
|||
userInfoRules: { |
|||
name: [ |
|||
{ required: true, trigger: 'blur', message: '请输入昵称' } |
|||
], |
|||
email: [ |
|||
{ required: true, trigger: 'blur', message: '请输入邮箱' }, |
|||
{ |
|||
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
|||
message: '请输入正确的邮箱' |
|||
} |
|||
], |
|||
phoneNumber: [ |
|||
{ required: true, trigger: 'blur', message: '请输入手机号' }, |
|||
{ |
|||
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/, |
|||
message: '请输入正确的手机号' |
|||
} |
|||
], code: [ |
|||
{ required: true, trigger: 'blur', message: '请输入验证码' } |
|||
] |
|||
}, |
|||
userPwdRules: { |
|||
oldPassword: [ |
|||
{ required: true, trigger: 'blur', message: '请输入旧密码' }, |
|||
{ |
|||
pattern: constants.passwordReg, |
|||
message: constants.passwordRegDesc |
|||
} |
|||
], |
|||
password: [ |
|||
{ required: true, trigger: 'blur', message: '请输入新密码' }, |
|||
{ |
|||
pattern: constants.passwordReg, |
|||
message: constants.passwordRegDesc |
|||
} |
|||
], |
|||
repeatPassword: [ |
|||
{ required: true, trigger: 'blur', validator: validateRePass } |
|||
] |
|||
}, |
|||
bindWxDialogVisible: false, |
|||
bindWxQrcode: '', |
|||
editNameDialogVisible: false, |
|||
pwdDialogVisible: false, |
|||
phoneDialogVisible: false, |
|||
emailDialogVisible: false, |
|||
userInfo: {}, |
|||
userInfoForm: {}, |
|||
qqLoginAuthorizeUrl: '', |
|||
userPwdForm: { |
|||
oldPassword: '', |
|||
password: '', |
|||
repeatPassword: '' |
|||
}, |
|||
showUploadAvatar: false, |
|||
bindWxTimer: null |
|||
} |
|||
}, |
|||
created () { |
|||
this.queryUserInfo() |
|||
this.getQQLoginAuthorizeUrl() |
|||
this.getBindWxQrCode() |
|||
}, |
|||
destroyed () { |
|||
clearInterval(this.bindWxTimer) |
|||
}, |
|||
methods: { |
|||
queryUserInfo () { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => { |
|||
if (res.data) { |
|||
this.userInfo = res.data |
|||
this.$store.dispatch('user/update', this.userInfo).then(() => { |
|||
|
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
created() { |
|||
this.queryUserInfo() |
|||
this.getQQLoginAuthorizeUrl() |
|||
this.getBindWxQrCode() |
|||
getUploadHeader () { |
|||
return { |
|||
'token': this.$store.getters['user/isLogin'] |
|||
} |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.bindWxTimer) |
|||
getUploadUrl () { |
|||
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload` |
|||
}, |
|||
methods: { |
|||
queryUserInfo() { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => { |
|||
if (res.data) { |
|||
this.userInfo = res.data |
|||
this.$store.dispatch('user/update', this.userInfo).then(() => { |
|||
|
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
getUploadHeader() { |
|||
return { |
|||
'token': this.$store.getters['user/isLogin'] |
|||
getBindWxQrCode () { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/bind/wx/qrcode`).then(res => { |
|||
this.bindWxQrcode = res.data |
|||
}) |
|||
}, |
|||
updateUserPwdHandle () { |
|||
this.$refs['updatePassWordForm'].validate(valid => { |
|||
if (valid) { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/password`, this.userPwdForm).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('修改成功') |
|||
this.queryUserInfo() |
|||
} |
|||
}, |
|||
getUploadUrl() { |
|||
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` |
|||
}, |
|||
getBindWxQrCode() { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/bind/wx/qrcode`).then(res => { |
|||
this.bindWxQrcode = res.data |
|||
}) |
|||
}, |
|||
updateUserPwdHandle() { |
|||
this.$refs['updatePassWordForm'].validate(valid => { |
|||
if (valid) { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/password`, this.userPwdForm).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('修改成功') |
|||
this.queryUserInfo() |
|||
} |
|||
}) |
|||
} else { |
|||
return false |
|||
} |
|||
}) |
|||
}) |
|||
} else { |
|||
return false |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
sendUpdateEmail() { |
|||
this.$refs['updateEmailForm'].validateField('email', err => { |
|||
if (!err) { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-email/msg`, {params: {email: this.userInfoForm.email}}).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('发送成功,请去您的邮箱查看') |
|||
this.emailDialogVisible = false |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
sendUpdatePhoneNumber() { |
|||
this.$refs['updatePhoneForm'].validateField('phoneNumber', err => { |
|||
if (!err) { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-phone/code?phoneNumber=${this.userInfoForm.phoneNumber}`).then(() => { |
|||
this.msgSuccess('验证码发送成功，5分钟内有效') |
|||
let count = 60 |
|||
let timer = setInterval(() => { |
|||
count-- |
|||
this.phoneValidateCodeBtnText = count + 's后重新发送' |
|||
if (count == 0) { |
|||
this.phoneValidateCodeBtnText = '发送验证码' |
|||
clearInterval(timer) |
|||
} |
|||
}, 1000) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
updateUserHandle() { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update`, this.userInfoForm).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('保存成功') |
|||
this.queryUserInfo() |
|||
}, |
|||
sendUpdateEmail () { |
|||
this.$refs['updateEmailForm'].validateField('email', err => { |
|||
if (!err) { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-email/msg`, { params: { email: this.userInfoForm.email } }).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('发送成功,请去您的邮箱查看') |
|||
this.emailDialogVisible = false |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
sendUpdatePhoneNumber () { |
|||
this.$refs['updatePhoneForm'].validateField('phoneNumber', err => { |
|||
if (!err) { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-phone/code?phoneNumber=${this.userInfoForm.phoneNumber}`).then(() => { |
|||
this.msgSuccess('验证码发送成功，5分钟内有效') |
|||
let count = 60 |
|||
let timer = setInterval(() => { |
|||
count-- |
|||
this.phoneValidateCodeBtnText = count + 's后重新发送' |
|||
if (count == 0) { |
|||
this.phoneValidateCodeBtnText = '发送验证码' |
|||
clearInterval(timer) |
|||
} |
|||
}, 1000) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
updateUserHandle () { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update`, this.userInfoForm).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('保存成功') |
|||
this.queryUserInfo() |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
// qq登录授权地址 |
|||
getQQLoginAuthorizeUrl() { |
|||
let reUrl = getCurrentDomain() + '/redirect/bindqq' |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/login/qq/authorize/url`, {params: {redirectUri: reUrl}}).then(res => { |
|||
this.qqLoginAuthorizeUrl = res.data |
|||
}) |
|||
}, |
|||
redirectUrl(url) { |
|||
window.open(url) |
|||
}, |
|||
updateUserPhoneHandle() { |
|||
this.$refs['updatePhoneForm'].validateField(['phoneNumber', 'code'], err => { |
|||
if (!err) { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/phone-number`, this.userInfoForm).then(() => { |
|||
this.msgSuccess('修改成功') |
|||
this.queryUserInfo() |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
bindWxHandle() { |
|||
this.bindWxDialogVisible = true |
|||
this.bindWxTimer = setInterval(() => { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => { |
|||
if (res.data) { |
|||
let {wxName} = res.data |
|||
if (wxName) { |
|||
this.msgSuccess('绑定成功') |
|||
clearInterval(this.bindWxTimer) |
|||
this.userInfo.wxName = wxName |
|||
this.bindWxDialogVisible = false |
|||
} |
|||
} |
|||
}) |
|||
}, 5 * 1000) |
|||
}, |
|||
cropUploadSuccess(res) { |
|||
this.userInfoForm.avatar = res.data |
|||
this.updateUserHandle() |
|||
} |
|||
}) |
|||
}, |
|||
// qq登录授权地址 |
|||
getQQLoginAuthorizeUrl () { |
|||
let reUrl = getCurrentDomain() + '/redirect/bindqq' |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/login/qq/authorize/url`, { params: { redirectUri: reUrl } }).then(res => { |
|||
this.qqLoginAuthorizeUrl = res.data |
|||
}) |
|||
}, |
|||
redirectUrl (url) { |
|||
window.open(url) |
|||
}, |
|||
updateUserPhoneHandle () { |
|||
this.$refs['updatePhoneForm'].validateField(['phoneNumber', 'code'], err => { |
|||
if (!err) { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/phone-number`, this.userInfoForm).then(() => { |
|||
this.msgSuccess('修改成功') |
|||
this.queryUserInfo() |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
bindWxHandle () { |
|||
this.bindWxDialogVisible = true |
|||
this.bindWxTimer = setInterval(() => { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => { |
|||
if (res.data) { |
|||
let { wxName } = res.data |
|||
if (wxName) { |
|||
this.msgSuccess('绑定成功') |
|||
clearInterval(this.bindWxTimer) |
|||
this.userInfo.wxName = wxName |
|||
this.bindWxDialogVisible = false |
|||
} |
|||
} |
|||
}) |
|||
}, 5 * 1000) |
|||
}, |
|||
cropUploadSuccess (res) { |
|||
this.userInfoForm.avatar = res.data |
|||
this.updateUserHandle() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.member-container { |
|||
display: flex; |
|||
align-content: center; |
|||
justify-content: center; |
|||
display: flex; |
|||
align-content: center; |
|||
justify-content: center; |
|||
} |
|||
.title { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 16px; |
|||
text-align: left; |
|||
font-weight: bolder; |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 16px; |
|||
text-align: left; |
|||
font-weight: bolder; |
|||
} |
|||
.member-box-card { |
|||
margin-top: 20px; |
|||
width: 1027px; |
|||
height: 747px; |
|||
table { |
|||
color: #101010; |
|||
font-size: 14px; |
|||
} |
|||
table tr { |
|||
line-height: 30px; |
|||
} |
|||
margin-top: 20px; |
|||
width: 1027px; |
|||
height: 747px; |
|||
table { |
|||
color: #101010; |
|||
font-size: 14px; |
|||
} |
|||
table tr { |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
.account-info-view { |
|||
padding: 10px; |
|||
padding: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.icon { |
|||
width: 27px; |
|||
height: 27px; |
|||
} |
|||
.account-icon-view { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.icon { |
|||
width: 27px; |
|||
height: 27px; |
|||
} |
|||
.account-icon-view { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-right: 20px; |
|||
} |
|||
.account-icon-view span { |
|||
font-size: 12px; |
|||
} |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-right: 20px; |
|||
} |
|||
.account-icon-view span { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
.account-avatar-view { |
|||
width: 180px; |
|||
width: 180px; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -1,517 +1,521 @@ |
|||
<template> |
|||
<div class="theme-container"> |
|||
<div class="left-container"> |
|||
<el-scrollbar class="left-scrollbar-container"> |
|||
<p class="theme-title">外观主题</p> |
|||
<el-row> |
|||
<el-col :span="3"> |
|||
<span class="theme-prompt-text">风格</span> |
|||
</el-col> |
|||
<el-col |
|||
v-for="item in styleList" |
|||
:key="item.key" :span="3" |
|||
> |
|||
<span |
|||
:class="{'style-btn-active':activeStyle==item.key}" |
|||
class="style-btn" @click="activeStyleHandle(item)" |
|||
>{{ item.label }}</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="3"> |
|||
<span class="theme-prompt-text">颜色</span> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<span |
|||
:class="{'style-btn-active':activeColor==''}" |
|||
class="style-btn" @click="activeColorHandle('')" |
|||
>全部</span> |
|||
</el-col> |
|||
<el-col |
|||
v-for="c in colorList" |
|||
:key="c" :class="{'style-btn-active':activeColor==c}" |
|||
:span="3" |
|||
:style="{backgroundColor: c}" |
|||
class="color-btn" @click.native="activeColorHandle(c)" |
|||
/> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col |
|||
v-for="t in themeList" |
|||
:key="t.id" |
|||
:span="8" class="theme-img-view" |
|||
@click.native="activeThemeHandle(t)" |
|||
> |
|||
<p :class="{'head-list-view-select':activeTheme.id==t.id}"> |
|||
<el-image |
|||
:class="{'head-list-img-active':activeTheme.id==t.id}" |
|||
:src="t.headImgUrl" |
|||
class="head-list-img" |
|||
fit="cover" |
|||
style="width: 100px; height: 100px;" |
|||
/> |
|||
</p> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</div> |
|||
<pre-view :key="projectFormKey" :project-key="projectKey" /> |
|||
<div class="right-container"> |
|||
<p class="right-title">外观设置</p> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">添加logo</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="showSettings.logoSetting" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.logoSetting" align="middle" type="flex"> |
|||
<el-col :span="6"> |
|||
<span class="option-line-sub-title">logo设置</span> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<img |
|||
v-if="userProjectTheme.logoImg" |
|||
:src="userProjectTheme.logoImg" |
|||
style="width: 30px; height: 30px;" |
|||
> |
|||
</el-col> |
|||
<el-col :offset="6" :span="8"> |
|||
<el-upload |
|||
ref="logoUpload" |
|||
:action="getUploadUrl" |
|||
:headers="getUploadHeader" |
|||
:on-success="uploadLogoHandle" |
|||
:show-file-list="false" |
|||
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|||
> |
|||
<el-button slot="trigger" size="small" type="text">上传Logo</el-button> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.logoSetting" align="middle" type="flex"> |
|||
<el-col :span="6"> |
|||
<span class="option-line-sub-title">logo位置</span> |
|||
</el-col> |
|||
<el-col :span="18"> |
|||
<el-radio-group |
|||
v-model="userProjectTheme.logoPosition" |
|||
size="mini" @change="saveUserTheme" |
|||
> |
|||
<el-radio-button label="left">左对齐</el-radio-button> |
|||
<el-radio-button label="center">居中</el-radio-button> |
|||
<el-radio-button label="right">右对齐</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">背景设置</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="showSettings.backgroundSetting" |
|||
@change="()=>{ |
|||
<div class="theme-container"> |
|||
<div class="left-container"> |
|||
<el-scrollbar class="left-scrollbar-container"> |
|||
<p class="theme-title">外观主题</p> |
|||
<el-row> |
|||
<el-col :span="3"> |
|||
<span class="theme-prompt-text">风格</span> |
|||
</el-col> |
|||
<el-col v-for="item in styleList" |
|||
:key="item.key" |
|||
:span="3"> |
|||
<span :class="{'style-btn-active':activeStyle==item.key}" |
|||
class="style-btn" |
|||
@click="activeStyleHandle(item)">{{ item.label }}</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="3"> |
|||
<span class="theme-prompt-text">颜色</span> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<span :class="{'style-btn-active':activeColor==''}" |
|||
class="style-btn" |
|||
@click="activeColorHandle('')">全部</span> |
|||
</el-col> |
|||
<el-col v-for="c in colorList" |
|||
:key="c" |
|||
:class="{'style-btn-active':activeColor==c}" |
|||
:span="3" |
|||
:style="{backgroundColor: c}" |
|||
class="color-btn" |
|||
@click.native="activeColorHandle(c)" /> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col v-for="t in themeList" |
|||
:key="t.id" |
|||
:span="8" |
|||
class="theme-img-view" |
|||
@click.native="activeThemeHandle(t)"> |
|||
<p :class="{'head-list-view-select':activeTheme.id==t.id}"> |
|||
<el-image :class="{'head-list-img-active':activeTheme.id==t.id}" |
|||
:src="t.headImgUrl" |
|||
class="head-list-img" |
|||
fit="cover" |
|||
style="width: 100px; height: 100px;" /> |
|||
</p> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</div> |
|||
<pre-view :key="projectFormKey" |
|||
:project-key="projectKey" /> |
|||
<div class="right-container"> |
|||
<p class="right-title">外观设置</p> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">添加logo</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="showSettings.logoSetting" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.logoSetting" |
|||
align="middle" |
|||
type="flex"> |
|||
<el-col :span="6"> |
|||
<span class="option-line-sub-title">logo设置</span> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<img v-if="userProjectTheme.logoImg" |
|||
:src="userProjectTheme.logoImg" |
|||
style="width: 30px; height: 30px;"> |
|||
</el-col> |
|||
<el-col :offset="6" |
|||
:span="8"> |
|||
<el-upload ref="logoUpload" |
|||
:action="getUploadUrl" |
|||
:headers="getUploadHeader" |
|||
:on-success="uploadLogoHandle" |
|||
:show-file-list="false" |
|||
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"> |
|||
<el-button slot="trigger" |
|||
size="small" |
|||
type="text">上传Logo</el-button> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.logoSetting" |
|||
align="middle" |
|||
type="flex"> |
|||
<el-col :span="6"> |
|||
<span class="option-line-sub-title">logo位置</span> |
|||
</el-col> |
|||
<el-col :span="18"> |
|||
<el-radio-group v-model="userProjectTheme.logoPosition" |
|||
size="mini" |
|||
@change="saveUserTheme"> |
|||
<el-radio-button label="left">左对齐</el-radio-button> |
|||
<el-radio-button label="center">居中</el-radio-button> |
|||
<el-radio-button label="right">右对齐</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">背景设置</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="showSettings.backgroundSetting" |
|||
@change="()=>{ |
|||
this.userProjectTheme.backgroundImg='' |
|||
this.userProjectTheme.backgroundColor='' |
|||
this.saveUserTheme() |
|||
}" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundSetting"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">背景类型</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-radio-group |
|||
v-model="showSettings.backgroundType" |
|||
size="mini" @change="()=>{ |
|||
}" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundSetting"> |
|||
<el-row align="middle" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">背景类型</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-radio-group v-model="showSettings.backgroundType" |
|||
size="mini" |
|||
@change="()=>{ |
|||
this.userProjectTheme.backgroundImg='' |
|||
this.userProjectTheme.backgroundColor='' |
|||
}" |
|||
> |
|||
<el-radio-button label="color">颜色</el-radio-button> |
|||
<el-radio-button label="img">图片</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundSetting&&showSettings.backgroundType=='color'"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">选择颜色</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-color-picker |
|||
v-model=" userProjectTheme.backgroundColor" |
|||
size="mini" |
|||
@change="saveUserTheme" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundType=='img'"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">选择图片</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-upload |
|||
ref="upload" |
|||
:action="getUploadUrl" |
|||
:headers="getUploadHeader" |
|||
:on-success="uploadBackgroundHandle" |
|||
:show-file-list="false" |
|||
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|||
class="upload-demo" |
|||
> |
|||
<el-button slot="trigger" size="small" type="text">上传背景</el-button> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">按钮设置</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="showSettings.btnSetting" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.btnSetting"> |
|||
<el-row align="middle" type="flex"> |
|||
<el-col :span="12"> |
|||
<span class="option-line-sub-title">按钮提示文字</span> |
|||
</el-col> |
|||
<el-col :spvan="10"> |
|||
<el-input v-model="userProjectTheme.submitBtnText" |
|||
placeholder="请输入内容" |
|||
size="mini" |
|||
style="width: 80%;" @change="saveUserTheme" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示标题</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="userProjectTheme.showTitle" |
|||
@change="saveUserTheme" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示描述</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="userProjectTheme.showDescribe" |
|||
@change="saveUserTheme" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" class="option-line-view" type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示序号</span> |
|||
</el-col> |
|||
<el-col :offset="8" :span="8"> |
|||
<el-switch |
|||
v-model="userProjectTheme.showNumber" |
|||
@change="saveUserTheme" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
}"> |
|||
<el-radio-button label="color">颜色</el-radio-button> |
|||
<el-radio-button label="img">图片</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundSetting&&showSettings.backgroundType=='color'"> |
|||
<el-row align="middle" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">选择颜色</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-color-picker v-model=" userProjectTheme.backgroundColor" |
|||
size="mini" |
|||
@change="saveUserTheme" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row v-if="showSettings.backgroundType=='img'"> |
|||
<el-row align="middle" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-sub-title">选择图片</span> |
|||
</el-col> |
|||
<el-col :spvan="18"> |
|||
<el-upload ref="upload" |
|||
:action="getUploadUrl" |
|||
:headers="getUploadHeader" |
|||
:on-success="uploadBackgroundHandle" |
|||
:show-file-list="false" |
|||
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|||
class="upload-demo"> |
|||
<el-button slot="trigger" |
|||
size="small" |
|||
type="text">上传背景</el-button> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">按钮设置</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="showSettings.btnSetting" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="showSettings.btnSetting"> |
|||
<el-row align="middle" |
|||
type="flex"> |
|||
<el-col :span="12"> |
|||
<span class="option-line-sub-title">按钮提示文字</span> |
|||
</el-col> |
|||
<el-col :spvan="10"> |
|||
<el-input v-model="userProjectTheme.submitBtnText" |
|||
placeholder="请输入内容" |
|||
size="mini" |
|||
style="width: 80%;" |
|||
@change="saveUserTheme" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示标题</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="userProjectTheme.showTitle" |
|||
@change="saveUserTheme" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示描述</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="userProjectTheme.showDescribe" |
|||
@change="saveUserTheme" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row align="middle" |
|||
class="option-line-view" |
|||
type="flex"> |
|||
<el-col :span="8"> |
|||
<span class="option-line-title">显示序号</span> |
|||
</el-col> |
|||
<el-col :offset="8" |
|||
:span="8"> |
|||
<el-switch v-model="userProjectTheme.showNumber" |
|||
@change="saveUserTheme" /> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import PreView from '../preview' |
|||
|
|||
export default { |
|||
name: 'Theme', |
|||
components: { |
|||
PreView |
|||
name: 'Theme', |
|||
components: { |
|||
PreView |
|||
}, |
|||
data () { |
|||
return { |
|||
// 外观设置 |
|||
showSettings: { |
|||
logoSetting: false, // 打开logo |
|||
backgroundSetting: false, |
|||
btnSetting: false, |
|||
backgroundType: 'color' |
|||
}, |
|||
// 用户主题设置 |
|||
userProjectTheme: { |
|||
projectKey: '', |
|||
themeId: '', |
|||
showTitle: true, |
|||
showDescribe: true, |
|||
showNumber: false, |
|||
backgroundColor: '', |
|||
backgroundImg: '', |
|||
logoImg: '', |
|||
logoPosition: 'left', |
|||
submitBtnText: '提交' |
|||
}, |
|||
projectFormKey: +new Date(), |
|||
projectKey: '', |
|||
styleList: [ |
|||
{ 'label': '全部', 'key': '' }, |
|||
{ 'label': '节日', 'key': 'festival' }, |
|||
{ 'label': '亲子', 'key': 'parent_child' }, |
|||
{ 'label': '风景', 'key': 'scenery' }, |
|||
{ 'label': '职业', 'key': 'occupation' }, |
|||
{ 'label': '校园', 'key': 'school' }, |
|||
{ 'label': '商务', 'key': 'commerce' }, |
|||
{ 'label': '其他', 'key': 'others' }, |
|||
{ 'label': '餐饮', 'key': 'catering' }, |
|||
{ 'label': '防疫', 'key': 'fangyi' } |
|||
], |
|||
colorList: [ |
|||
'#FF6D56', |
|||
'#F8E71C', |
|||
'#00BF6F', |
|||
'#2672FF ', |
|||
'#7464FF', |
|||
'#484848', |
|||
'#EAEAEA', |
|||
'#804000' |
|||
], |
|||
activeColor: '', |
|||
activeStyle: '', |
|||
activeTheme: '', |
|||
themeList: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
getUploadHeader () { |
|||
return { |
|||
'token': this.$store.getters['user/isLogin'] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 外观设置 |
|||
showSettings: { |
|||
logoSetting: false, // 打开logo |
|||
backgroundSetting: false, |
|||
btnSetting: false, |
|||
backgroundType: 'color' |
|||
}, |
|||
// 用户主题设置 |
|||
userProjectTheme: { |
|||
projectKey: '', |
|||
themeId: '', |
|||
showTitle: true, |
|||
showDescribe: true, |
|||
showNumber: false, |
|||
backgroundColor: '', |
|||
backgroundImg: '', |
|||
logoImg: '', |
|||
logoPosition: 'left', |
|||
submitBtnText: '提交' |
|||
}, |
|||
projectFormKey: +new Date(), |
|||
projectKey: '', |
|||
styleList: [ |
|||
{'label': '全部', 'key': ''}, |
|||
{'label': '节日', 'key': 'festival'}, |
|||
{'label': '亲子', 'key': 'parent_child'}, |
|||
{'label': '风景', 'key': 'scenery'}, |
|||
{'label': '职业', 'key': 'occupation'}, |
|||
{'label': '校园', 'key': 'school'}, |
|||
{'label': '商务', 'key': 'commerce'}, |
|||
{'label': '其他', 'key': 'others'}, |
|||
{'label': '餐饮', 'key': 'catering'}, |
|||
{'label': '防疫', 'key': 'fangyi'} |
|||
], |
|||
colorList: [ |
|||
'#FF6D56', |
|||
'#F8E71C', |
|||
'#00BF6F', |
|||
'#2672FF ', |
|||
'#7464FF', |
|||
'#484848', |
|||
'#EAEAEA', |
|||
'#804000' |
|||
], |
|||
activeColor: '', |
|||
activeStyle: '', |
|||
activeTheme: '', |
|||
themeList: [] |
|||
} |
|||
getUploadUrl () { |
|||
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload` |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.projectKey = this.$route.query.key |
|||
this.queryProjectTheme() |
|||
this.projectFormKey = +new Date() |
|||
this.queryUserProjectTheme() |
|||
}, |
|||
methods: { |
|||
uploadBackgroundHandle (response) { |
|||
this.userProjectTheme.backgroundImg = response.data |
|||
this.userProjectTheme.backgroundColor = '' |
|||
this.saveUserTheme() |
|||
}, |
|||
computed: { |
|||
getUploadHeader() { |
|||
return { |
|||
'token': this.$store.getters['user/isLogin'] |
|||
} |
|||
}, |
|||
getUploadUrl() { |
|||
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` |
|||
} |
|||
uploadLogoHandle (response) { |
|||
this.userProjectTheme.logoImg = response.data |
|||
this.saveUserTheme() |
|||
}, |
|||
mounted() { |
|||
this.projectKey = this.$route.query.key |
|||
this.queryProjectTheme() |
|||
activeStyleHandle (item) { |
|||
this.activeStyle = item.key |
|||
this.queryProjectTheme() |
|||
}, |
|||
saveUserTheme () { |
|||
this.userProjectTheme.projectKey = this.projectKey |
|||
this.userProjectTheme.themeId = this.activeTheme ? this.activeTheme.id : '' |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/save`, this.userProjectTheme).then(() => { |
|||
this.projectFormKey = +new Date() |
|||
this.queryUserProjectTheme() |
|||
}) |
|||
}, |
|||
methods: { |
|||
uploadBackgroundHandle(response) { |
|||
this.userProjectTheme.backgroundImg = response.data |
|||
this.userProjectTheme.backgroundColor = '' |
|||
this.saveUserTheme() |
|||
}, |
|||
uploadLogoHandle(response) { |
|||
this.userProjectTheme.logoImg = response.data |
|||
this.saveUserTheme() |
|||
}, |
|||
activeStyleHandle(item) { |
|||
this.activeStyle = item.key |
|||
this.queryProjectTheme() |
|||
}, |
|||
saveUserTheme() { |
|||
this.userProjectTheme.projectKey = this.projectKey |
|||
this.userProjectTheme.themeId = this.activeTheme ? this.activeTheme.id : '' |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/save`, this.userProjectTheme).then(() => { |
|||
this.projectFormKey = +new Date() |
|||
}) |
|||
}, |
|||
queryUserProjectTheme() { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/${this.projectKey}`).then(res => { |
|||
if (!res.data) { |
|||
return |
|||
} |
|||
this.userProjectTheme = res.data |
|||
let {themeId, logoImg, backgroundImg, backgroundColor, submitBtnText} = res.data |
|||
this.activeTheme = { |
|||
'id': themeId |
|||
} |
|||
this.showSettings.logoSetting = !!logoImg |
|||
this.showSettings.btnSetting = !!submitBtnText |
|||
if (backgroundImg || backgroundColor) { |
|||
this.showSettings.backgroundSetting = true |
|||
this.showSettings.backgroundType = backgroundImg ? 'img' : 'color' |
|||
} |
|||
queryUserProjectTheme () { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/${this.projectKey}`).then(res => { |
|||
if (!res.data) { |
|||
return |
|||
} |
|||
this.userProjectTheme = res.data |
|||
let { themeId, logoImg, backgroundImg, backgroundColor, submitBtnText } = res.data |
|||
this.activeTheme = { |
|||
'id': themeId |
|||
} |
|||
this.showSettings.logoSetting = !!logoImg |
|||
this.showSettings.btnSetting = !!submitBtnText |
|||
if (backgroundImg || backgroundColor) { |
|||
this.showSettings.backgroundSetting = true |
|||
this.showSettings.backgroundType = backgroundImg ? 'img' : 'color' |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
activeThemeHandle(item) { |
|||
if (item) { |
|||
this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消操作', |
|||
type: 'info' |
|||
}).then(() => { |
|||
this.activeTheme = item |
|||
this.saveUserTheme() |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
activeThemeHandle (item) { |
|||
if (item) { |
|||
this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消操作', |
|||
type: 'info' |
|||
}).then(() => { |
|||
this.activeTheme = item |
|||
this.saveUserTheme() |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
} |
|||
}, |
|||
activeColorHandle(item) { |
|||
console.log(item) |
|||
this.activeColor = item |
|||
this.queryProjectTheme() |
|||
}, |
|||
queryProjectTheme() { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/project/theme/list`, { |
|||
params: { |
|||
'color': this.activeColor, |
|||
'style': this.activeStyle |
|||
} |
|||
}).then(res => { |
|||
this.themeList = res.data |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
activeColorHandle (item) { |
|||
console.log(item) |
|||
this.activeColor = item |
|||
this.queryProjectTheme() |
|||
}, |
|||
queryProjectTheme () { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/project/theme/list`, { |
|||
params: { |
|||
'color': this.activeColor, |
|||
'style': this.activeStyle |
|||
} |
|||
}).then(res => { |
|||
this.themeList = res.data |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.theme-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #f7f7f7; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: row; |
|||
box-sizing: border-box; |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #f7f7f7; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: row; |
|||
box-sizing: border-box; |
|||
justify-content: center; |
|||
} |
|||
.left-container { |
|||
line-height: 20px; |
|||
text-align: center; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
background-color: white; |
|||
width: 20%; |
|||
height: calc(100vh - 60px); |
|||
line-height: 20px; |
|||
text-align: center; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
background-color: white; |
|||
width: 20%; |
|||
height: calc(100vh - 60px); |
|||
} |
|||
.left-scrollbar-container { |
|||
height: 100%; |
|||
margin: 20px; |
|||
height: 100%; |
|||
margin: 20px; |
|||
} |
|||
::v-deep .el-scrollbar__wrap { |
|||
overflow-x: hidden !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
.style-btn { |
|||
line-height: 30px; |
|||
border-radius: 4px; |
|||
padding: 3px; |
|||
color: #707070; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
border: 1px solid #eaeaea; |
|||
line-height: 30px; |
|||
border-radius: 4px; |
|||
padding: 3px; |
|||
color: #707070; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
border: 1px solid #eaeaea; |
|||
} |
|||
.preview-container { |
|||
width: 70%; |
|||
width: 70%; |
|||
} |
|||
.theme-title { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 24px; |
|||
text-align: left; |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 24px; |
|||
text-align: left; |
|||
} |
|||
.theme-prompt-text { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 16px; |
|||
line-height: 30px; |
|||
text-align: left; |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 16px; |
|||
line-height: 30px; |
|||
text-align: left; |
|||
} |
|||
.color-btn { |
|||
width: 40px; |
|||
height: 22px; |
|||
line-height: 20px; |
|||
border-radius: 4px; |
|||
background-color: rgba(11, 141, 213, 100); |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 14px; |
|||
text-align: center; |
|||
margin: 3px; |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
width: 40px; |
|||
height: 22px; |
|||
line-height: 20px; |
|||
border-radius: 4px; |
|||
background-color: rgba(11, 141, 213, 100); |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 14px; |
|||
text-align: center; |
|||
margin: 3px; |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
} |
|||
.color-btn:hover, |
|||
.style-btn:hover { |
|||
cursor: pointer; |
|||
border: 1px solid rgba(11, 141, 213, 100); |
|||
cursor: pointer; |
|||
border: 1px solid rgba(11, 141, 213, 100); |
|||
} |
|||
.style-btn-active { |
|||
border: 1px solid rgba(11, 141, 213, 100); |
|||
border: 1px solid rgba(11, 141, 213, 100); |
|||
} |
|||
.head-list-img { |
|||
border: 2px solid transparent; |
|||
border: 2px solid transparent; |
|||
} |
|||
.head-list-img:hover { |
|||
cursor: pointer; |
|||
border: 2px solid rgba(11, 141, 213, 100); |
|||
cursor: pointer; |
|||
border: 2px solid rgba(11, 141, 213, 100); |
|||
} |
|||
.head-list-img-active { |
|||
border: 2px solid rgba(11, 141, 213, 100); |
|||
border: 2px solid rgba(11, 141, 213, 100); |
|||
} |
|||
.theme-img-view .head-list-view-select ::after { |
|||
content: ""; |
|||
background: url('~@/assets/images/mobile_theme_active.png'); |
|||
background-size: 18px; |
|||
width: 18px; |
|||
height: 18px; |
|||
position: absolute; |
|||
top: 4px; |
|||
right: 4px; |
|||
content: ""; |
|||
background: url("~@/assets/images/mobile_theme_active.png"); |
|||
background-size: 18px; |
|||
width: 18px; |
|||
height: 18px; |
|||
position: absolute; |
|||
top: 4px; |
|||
right: 4px; |
|||
} |
|||
.right-container { |
|||
width: 310px; |
|||
height: calc(100vh - 60px); |
|||
line-height: 20px; |
|||
text-align: center; |
|||
padding: 22px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
background-color: white; |
|||
margin-right: 5px; |
|||
width: 310px; |
|||
height: calc(100vh - 60px); |
|||
line-height: 20px; |
|||
text-align: center; |
|||
padding: 22px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 100); |
|||
background-color: white; |
|||
margin-right: 5px; |
|||
} |
|||
.right-title { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 24px; |
|||
text-align: left; |
|||
margin: 0 0 30px 0; |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 24px; |
|||
text-align: left; |
|||
margin: 0 0 30px 0; |
|||
} |
|||
.right-container .option-line-view { |
|||
padding: 0; |
|||
width: 280px; |
|||
height: 42px; |
|||
line-height: 20px; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
margin-bottom: 10px; |
|||
border: 1px solid rgba(187, 187, 187, 100); |
|||
padding: 0; |
|||
width: 280px; |
|||
height: 42px; |
|||
line-height: 20px; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
margin-bottom: 10px; |
|||
border: 1px solid rgba(187, 187, 187, 100); |
|||
} |
|||
.right-container .option-line-title { |
|||
color: rgba(16, 16, 16, 100); |
|||
line-height: 40px; |
|||
font-size: 14px; |
|||
text-align: left; |
|||
color: rgba(16, 16, 16, 100); |
|||
line-height: 40px; |
|||
font-size: 14px; |
|||
text-align: left; |
|||
} |
|||
.option-line-sub-title { |
|||
color: rgb(82, 81, 81); |
|||
line-height: 40px; |
|||
font-size: 13px; |
|||
text-align: left; |
|||
color: rgb(82, 81, 81); |
|||
line-height: 40px; |
|||
font-size: 13px; |
|||
text-align: left; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue