555 lines
14 KiB
Vue
555 lines
14 KiB
Vue
<template>
|
||
<div class="account_page">
|
||
<!-- <div class="account_page_titleImg">
|
||
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
|
||
</div> -->
|
||
<div class="account_page_content_box">
|
||
<div class="content_item_user">
|
||
<div class="content_item_user_left">
|
||
<div class="content_item_user_left_detail">
|
||
<img :src="uploadUrl?uploadUrl:userDetail.avatar" alt="">
|
||
<div class="upload_box">
|
||
<i class="fi fi-rr-camera"></i>
|
||
<a-upload
|
||
class="upload"
|
||
:capture="null"
|
||
list-type="picture-card"
|
||
:before-upload="beforeUpload"
|
||
v-model:file-list="fileList"
|
||
:customRequest="function(){}"
|
||
:maxCount="1"
|
||
accept=".jpg,.png,.jpeg,.bmp"
|
||
@change="fileUploadChange"
|
||
>
|
||
<div
|
||
class="upload_tip_block"
|
||
>
|
||
<!-- <i class="fi fi-br-upload"></i> -->
|
||
<!-- <img :src="uploadUrl?uploadUrl:userDetail.avatar" alt=""> -->
|
||
</div>
|
||
</a-upload>
|
||
</div>
|
||
</div>
|
||
<div class="content_item_user_left_detail">
|
||
<div class="modal_title_text">
|
||
<div class="label">
|
||
<div class="content">
|
||
<div v-if="!isEditUserName">{{ userDetail.userName }}</div>
|
||
<input v-else type="text" v-model="editUserName">
|
||
</div>
|
||
<div class="icon">
|
||
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
|
||
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
|
||
</div>
|
||
<span class="Modifiable" v-if="userDetail.usernameModify > 0 && isEditUserName">{{ $t('account.remainingModifications') }}{{ userDetail.usernameModify }}/5</span>
|
||
<span class="Modifiable notModifiable" v-else-if="isEditUserName">{{ $t('account.notModifiable') }} {{ userDetail.usernameModify }}/5</span>
|
||
</div>
|
||
<div class="label">
|
||
<span>{{$t('account.email')}}: </span>
|
||
<div class="content">
|
||
<div v-if="!isEditEmail">{{ userDetail.email }}</div>
|
||
<input v-else type="text" :value="editEmail">
|
||
</div>
|
||
<!-- <div class="icon">
|
||
<i v-if="!isEditEmail" class="fi fi-rr-edit" @click="openEdit('email')"></i>
|
||
<i v-else class="fi fi-br-check" @click="editChek('email')"></i>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="content_item_user_left_detail_bottom">
|
||
<div>
|
||
<span>{{$t('account.Follow')}}：</span>{{ userDetail.followeeCount }}
|
||
</div>
|
||
<div>
|
||
<span>{{$t('account.Fans')}}：</span>{{ userDetail.followerCount }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="account_page_content">
|
||
<div class="account_page_content_left">
|
||
<!-- {{ router.path }} -->
|
||
<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
|
||
<i class="fi" :class="item.icon"></i>
|
||
<div>
|
||
{{item.name}}
|
||
</div>
|
||
</router-link>
|
||
<!-- <div class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}">
|
||
<i class="fi" :class="item.icon"></i>
|
||
<router-link :to="item.route">
|
||
{{item.name}}
|
||
</router-link>
|
||
</div> -->
|
||
</div>
|
||
<div class="account_page_content_right">
|
||
<router-view></router-view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<bindEmail ref="bindEmail"></bindEmail>
|
||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
|
||
import { Https } from "@/tool/https";
|
||
import { Modal,message } from 'ant-design-vue';
|
||
import { useRouter,useRoute } from 'vue-router'
|
||
import { useStore } from "vuex";
|
||
import { useI18n } from 'vue-i18n'
|
||
import bindEmail from "@/component/HomePage/bindEmail.vue";
|
||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||
export default defineComponent({
|
||
components:{
|
||
bindEmail,Cropper
|
||
},
|
||
setup() {
|
||
|
||
const {t} = useI18n()
|
||
const store = useStore();
|
||
let userDetail= computed(()=>{
|
||
return store.state.UserHabit.userDetail
|
||
})
|
||
let accountHomeData = reactive({
|
||
isEditUserName:false,
|
||
editUserName:'',
|
||
isEditEmail:false,
|
||
editEmail:'',
|
||
bindEmail:null as any,
|
||
Cropper:null as any,
|
||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||
uploadUrl:'',
|
||
uploadFile:undefined,
|
||
token:'',
|
||
fileList:[] as any,
|
||
rootSubmenuKeys:[
|
||
{
|
||
name:t('account.frontPage'),
|
||
route:'/home/account/frontPage',
|
||
icon:'fi-rr-user'
|
||
},{
|
||
name:t('account.Messages'),
|
||
route:'/home/account/accountMessage',
|
||
icon:'fi-rr-envelope'
|
||
},{
|
||
name:`${t('account.FollowFans')}`,
|
||
route:'/home/account/accountFollowFans',
|
||
icon:'fi-rr-users-alt'
|
||
},
|
||
]
|
||
})
|
||
const router = useRouter()
|
||
// provide('exhibitionList',exhibitionList)
|
||
let handleClick = (event:any) => {
|
||
// state.selectedKeys = [Number(event.key)]
|
||
// state.nowPageName = event.item.name
|
||
router.push({path:event.item.route})
|
||
}
|
||
const editUserName = async ()=>{
|
||
if(!accountHomeData.editUserName)return message.warning(t('LibraryPage.jsContent7'))
|
||
if(accountHomeData.editUserName == userDetail.value.userName)return
|
||
await new Promise<void>((resolve, reject) => {
|
||
Https.axiosGet(Https.httpUrls.editUserName,{params:{newUserName:accountHomeData.editUserName}}).
|
||
then((rv:any)=>{
|
||
let value = {
|
||
userName:accountHomeData.editUserName,
|
||
usernameModify:userDetail.value.usernameModify-=1
|
||
}
|
||
store.commit('upUserDetail',value)
|
||
resolve()
|
||
}).catch((err:any)=>{
|
||
resolve()
|
||
})
|
||
})
|
||
|
||
}
|
||
const editEmail = ()=>{
|
||
if(!accountHomeData.editEmail)return message.warning(t('LibraryPage.jsContent7'))
|
||
}
|
||
const editChek = async (str:string)=>{
|
||
if(str == 'userName'){
|
||
await editUserName()
|
||
}else{
|
||
// await editEmail()
|
||
}
|
||
accountHomeData.isEditUserName = false
|
||
accountHomeData.isEditEmail = false
|
||
accountHomeData.editUserName = ''
|
||
accountHomeData.editEmail = ''
|
||
}
|
||
const openEdit = (str:string)=>{
|
||
if(str == 'userName'){
|
||
// if(userDetail.value.usernameModify.remainingTimes == 0)return
|
||
accountHomeData.isEditUserName = true
|
||
accountHomeData.isEditEmail = false
|
||
accountHomeData.editUserName = userDetail.value.userName
|
||
}else{
|
||
accountHomeData.bindEmail.init('Modify')
|
||
// accountHomeData.isEditEmail = true
|
||
accountHomeData.isEditUserName = false
|
||
// accountHomeData.editEmail = userDetail.value.email
|
||
}
|
||
}
|
||
|
||
let beforeUpload=(file:any,fileList:any)=>{
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||
if (!isJpgOrPng) {
|
||
message.info(useI18n().t('PrintboardUpload.jsContent1'));
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||
if (!isLt2M) {
|
||
message.info(useI18n().t('PrintboardUpload.jsContent2'));
|
||
}
|
||
}
|
||
let fileUploadChange = (data:any)=>{
|
||
let file = data.file
|
||
// file.id = res.data.id?res.data.id:""
|
||
var reader = new FileReader();
|
||
reader.onload = (e:any) => {
|
||
let data_new;
|
||
if (typeof e.target.result === 'object') {
|
||
// 把Array Buffer转化为blob 如果是base64不需要
|
||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||
} else {
|
||
data_new = e.target.result;
|
||
}
|
||
accountHomeData.Cropper.getOptionImg(data_new)
|
||
};
|
||
reader.readAsArrayBuffer(file.originFileObj);
|
||
accountHomeData.Cropper.changeShowModal(true)
|
||
}
|
||
let handleCropperSuccess = (event:any)=>{
|
||
let {file, fileData,base64} =event
|
||
accountHomeData.fileList[0].status = 'done'
|
||
accountHomeData.uploadUrl = base64
|
||
accountHomeData.uploadFile = file
|
||
accountHomeData.Cropper.closeCropper()
|
||
if(!accountHomeData.uploadFile)return
|
||
let param = new FormData();
|
||
param.append('file',accountHomeData.uploadFile);
|
||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||
Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
|
||
.then((rv)=>{
|
||
let data = {
|
||
avatar : rv
|
||
}
|
||
store.commit("upUserDetail", data)
|
||
message.success('提交成功')
|
||
})
|
||
}
|
||
let deletUploadFile = () => {
|
||
accountHomeData.fileList = []
|
||
}
|
||
return{
|
||
userDetail,
|
||
...toRefs(accountHomeData),
|
||
router,
|
||
handleClick,
|
||
editChek,
|
||
openEdit,
|
||
beforeUpload,
|
||
fileUploadChange,
|
||
handleCropperSuccess,
|
||
deletUploadFile,
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.account_page{
|
||
height: 100%;
|
||
// overflow-y: auto;
|
||
// padding: 0 26rem;
|
||
// padding: 0 7rem;
|
||
padding-top: 4rem;
|
||
max-width: 100rem;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
overflow: hidden;
|
||
.account_page_titleImg{
|
||
img{
|
||
width: 100%;
|
||
height: 30rem;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.account_page_content_box{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
.content_item_user{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 4rem;
|
||
.content_item_user_left{
|
||
display: flex;
|
||
.content_item_user_left_detail{
|
||
position: relative;
|
||
> .modal_title_text{
|
||
font-size: var(--aida-fsize1-6);
|
||
}
|
||
> .upload_box{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
> i{
|
||
width: 3rem;
|
||
height: 3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: rgba(0,0,0,.5);
|
||
color: #fff;
|
||
font-size: 1.6rem;
|
||
}
|
||
> .upload{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
> .modal_title_text{
|
||
margin: 0;
|
||
> .label{
|
||
display: flex;
|
||
margin: 0;
|
||
align-items: center;
|
||
> .content{
|
||
> input{
|
||
min-width: 20rem;
|
||
height: 3.6rem;
|
||
border-radius: 4rem;
|
||
border: 1px solid;
|
||
padding-left: 1.5rem;
|
||
}
|
||
}
|
||
> .Modifiable{
|
||
font-size: 1.6rem;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
display: flex;
|
||
align-items: center;
|
||
&.notModifiable{
|
||
color: #FF0000;
|
||
}
|
||
}
|
||
> .icon{
|
||
margin: 0 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
> i{
|
||
font-weight: 600;
|
||
font-size: 1.6rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
&.fi-br-check{
|
||
width: 3rem;
|
||
height: 3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #000;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
> div{
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
img{
|
||
border-radius: 50%;
|
||
width: 8rem;
|
||
height: 8rem;
|
||
}
|
||
.content_item_user_left_detail_bottom{
|
||
display: flex;
|
||
font-size: 1.8rem;
|
||
>div{
|
||
display: flex;
|
||
font-weight: 900;
|
||
width: 10rem;
|
||
margin-right: 2rem;
|
||
span{
|
||
font-weight: 600;
|
||
color: rgba(0,0,0,.45);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content_item_user_left_detail:last-child{
|
||
margin-left: 3rem;
|
||
}
|
||
}
|
||
}
|
||
.account_page_content{
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
.account_page_content_left{
|
||
width: 18rem;
|
||
text-align: center;
|
||
margin-right: 2rem;
|
||
padding: 12px 0;
|
||
> a{
|
||
border-radius: 1rem;
|
||
}
|
||
}
|
||
.account_page_content_right{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
.account_message{
|
||
height: 100%;
|
||
:deep(.account_message_body){
|
||
height: 100%;
|
||
.ant-tabs-content-holder{
|
||
flex: 1;
|
||
|
||
}
|
||
.ant-tabs-content{
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content_left_item{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 5rem;
|
||
color: #232323;
|
||
div{
|
||
white-space: nowrap;
|
||
width: 15rem;
|
||
color: #999999;
|
||
// text-align-last: justify;
|
||
text-align: left;
|
||
font-size: 1.6rem;
|
||
}
|
||
i{
|
||
color: #cfcfcf;
|
||
font-size: 1.6rem;
|
||
display: flex;
|
||
margin: 0 2rem;
|
||
}
|
||
&.active{
|
||
color: #fff;
|
||
background: #000;
|
||
div{
|
||
color: #fff;
|
||
font-weight: 900;
|
||
}
|
||
i{
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.account_generalMessage_title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 5px;
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
margin-right: 5rem;
|
||
margin-left: 5rem;
|
||
&.modal_title_text{
|
||
z-index: 2;
|
||
}
|
||
.account_generalMessage_title_setting{
|
||
cursor: pointer;
|
||
font-size: var(--aida-fsize1-6);
|
||
margin-left: auto
|
||
}
|
||
.account_generalMessage_title_seach{
|
||
display: flex;
|
||
input{
|
||
padding-left: 1.5rem;
|
||
font-size: 1.4rem;
|
||
}
|
||
.search_icon_block{
|
||
background: #000;
|
||
color: #fff;
|
||
padding: .5rem 2rem;
|
||
font-size: 1.8rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.account_generalMessage_center{
|
||
// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||
// border: 1px solid #e9eaec;
|
||
border-radius: 5px;
|
||
.account_generalMessage_item{
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
display: flex;
|
||
border-radius: 0px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1.5rem 5rem;
|
||
border: none;
|
||
border-bottom: 1px solid #e9eaec;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
.account_generalMessage_item{
|
||
border-radius: 5px;
|
||
padding: 5rem 5rem;
|
||
margin-right: 5rem;
|
||
margin-left: 5rem;
|
||
position: relative;
|
||
cursor: pointer;
|
||
.ant-badge{
|
||
position: absolute;
|
||
transform: translate(-100%, 100%);
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.account_generalMessage_item_link{
|
||
color: #000;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
}
|
||
.account_generalMessage_item_link:hover{
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
.account_generalMessage_item:hover{
|
||
background: #efefef;
|
||
}
|
||
.page_loading_box{
|
||
text-align: center;
|
||
height: 50px;
|
||
.page_loading{
|
||
display: block;
|
||
width: 50px;
|
||
height: 50px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
</style> |