aida_front/src/component/Account/otherUsers.vue

<template>
    <div class="otherUsers">
		<div class="otherUsers_page_titleImg">
			<!-- <img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt=""> -->
		</div>
		<div class="otherUsers_userDetail">
			<div class="otherUsers_userDetail_img">
				<img :src="userContent.avatar" alt="">
			</div>
			<div class="otherUsers_userDetail_center">
				<div class="otherUsers_userDetail_center_name modal_title_text">
					<div>{{ userContent.userName }}</div>
					<div v-if="userContent?.isFollow == 0" @click.stop="setFollow(userContent)" class="userDetail_center_name_left">{{$t('newScaleImage.Follow')}}</div>
					<div v-else @click.stop="setFollow(userContent)" class="userDetail_center_name_left">{{$t('newScaleImage.Unfollow')}}</div>

				</div>
				<div class="otherUsers_userDetail_center_data">
					<!-- <div class="userDetail_center_data_item modal_title_text">
						<div>{{ userContent.homepageViewCount }}</div>
						<span class="modal_title_text_intro">访问量</span>
					</div> -->
					<div class="userDetail_center_data_item modal_title_text">
						<div>{{ userContent.portfolioCount }}</div>
						<span class="modal_title_text_intro">{{$t('account.works')}}</span>
					</div>
					<div class="userDetail_center_data_item modal_title_text">
						<div>{{ userContent.followerCount }}</div>
						<span class="modal_title_text_intro">{{$t('account.Fans')}}</span>
					</div>
					<div class="userDetail_center_data_item modal_title_text">
						<div>{{ userContent.followeeCount }}</div>
						<span class="modal_title_text_intro">{{$t('account.Follow')}}</span>
					</div>
				</div>
				<div class="otherUsers_userDetail_center_signature">
					<div class="modal_title_text">
						<!-- <div class="modal_title_text_intro">个性签名个性签名个性签名</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="otherUser_works">
			<div class="otherUser_works_title modal_title_text">
				<div>{{$t('account.hisWorks')}}</div>
			</div>
			<Works :isScroll="false" :otherUsers="true"></Works>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import Works from '@/views/HomeView/Works.vue';
export default defineComponent({
    components:{
		Works
    },
    setup() {
		const router:any = useRouter()
        const store = useStore();
		let otherUsers = reactive({
			userId:computed(()=>{
				return store.state.UserHabit.userDetail.userId
			}),
			userContent:{}
		})
		let getUserDetail = (id:any)=>{
			let data = {
				id:id
			}
			Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
				if(rv){
					otherUsers.userContent = rv
				}
			})
			
		}
		let setFollow = (item:any) =>{
			let url = Https.httpUrls.porfolioFollow
			if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
			Https.axiosGet(url, {params:{followeeId:otherUsers.userId}})
			.then((rv) => {
				if(item.isFollow == 1){
					item.isFollow = 0
				}else{
					item.isFollow = 1
				}
			})
		}
		onMounted (()=>{
			// alert()
			setTimeout(() => {
				getUserDetail(otherUsers.userId)
			}, 2000);

		})
        return{
           ...toRefs(otherUsers),
		   setFollow,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.otherUsers{
	width: 100%;
	height: 100%;
	padding: 0 6rem;
	display: flex;
    flex-direction: column;
	overflow-y: auto;
	.otherUsers_page_titleImg{
		flex-shrink: 0;
		height: 10rem;
		img{
			width: 100%;
			height: 30rem;
			object-fit: cover;
		}
	}
	.otherUsers_userDetail{
		padding: 2rem;
		display: flex;
		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
		margin-bottom: 2rem;
		.modal_title_text{
			margin-bottom: .5rem;
		}
		.otherUsers_userDetail_img{
			width: 10rem;
			height: 10rem;
			// transform: translateY(-4rem);
			margin-right: 4rem;
			flex-shrink: 0;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 50%;
			}
		}
		.otherUsers_userDetail_center{
			flex: 1;
			.otherUsers_userDetail_center_name{
				display: flex;
				justify-content: space-between;
				.userDetail_center_name_left{
					padding: .5rem 2rem;
					border-radius: 4rem;
					border: 2px solid #e9eaec;
					cursor: pointer;
				}
			}
			.otherUsers_userDetail_center_data{
				display: flex;
				.userDetail_center_data_item{
					display: flex;
					>div{
						margin-right: 1rem;
					}
				}
				.userDetail_center_data_item::after{
					content: '';
					display: block;
					width: 1px;
					height: 2rem;
					background-color: #ccc;
					margin: 0 2rem;
				}
				.userDetail_center_data_item:last-child::after{
					display: none;
				}
			}
			.otherUsers_userDetail_center_signature{
				>div{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
		
	}
	.otherUser_works{
		height: auto;
		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
		position: relative;
		padding: 0 2rem;
		.otherUser_works_title{
			padding: 2rem 0;
			position: sticky;
			top: 0;
			background: #fff;
			margin: 0;
			z-index: 2;
		}
		.otherUser_works_content{
			height: 200px;
			width: 100%;
			background: #ccc;
		}
	}
}
</style>