aida_front/src/component/Account/account.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.Follow')} ${t('account.Fans')}`,
					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 30rem;
	padding-top: 7rem;
	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: 7rem;
			.content_item_user_left{
				display: flex;
				.content_item_user_left_detail{
					position: relative;
					> .upload_box{
						position: absolute;
						bottom: 0;
						right: 0;
						> i{
							width: 4rem;
							height: 4rem;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							background: rgba(0,0,0,.5);
							color: #fff;
							font-size: 2rem;
						}
						> .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;
							> .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: 2.2rem;
									cursor: pointer;
									&.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: 10rem;
						height: 10rem
					}
					.content_item_user_left_detail_bottom{
						display: flex;
						font-size: 1.8rem;
						>div{
							font-weight: 900;
							width: 10rem;
							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: 24rem;
				text-align: center;
				margin-right: 10rem;
			}
			.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: 6rem;
				color: #232323;
				div{
					white-space: nowrap;
					width: 15rem;
					color: #999999;
					// text-align-last: justify;
					text-align: left;
					font-size: 2rem;
				}
				i{
					color: #cfcfcf;
					font-size: 2rem;
					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;
		margin-left: auto
	}
	.account_generalMessage_title_seach{
		display: flex;
		input{
			padding-left: 1.5rem;
			font-size: 1.4rem;
		}
		.search_icon_block{
			background: #39215b;
			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: 2rem 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: #39215b;
		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>