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