aida_front/src/views/HomeView/Works.vue

<template>
    <div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers,'positionLogin':true}">
		<!-- <div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers,'positionLogin':position=='login'}"> -->

		<!-- <div class="modal_title_text modal_search" v-if="!otherUsers && position!='login'">
			<div v-show="isScroll" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
				{{ item.name }}
			</div>
			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
		</div> -->
        <div class="page_content" ref="autoscrollDom">
			<Falls ref="fall" :key="getListDate.getLikePortfolio || getListDate.getMyPortfolio" @loadend="isShowMark = false" :itemWidth="failWidth" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
			<div class="page_loading_box" v-show="!isNoData">
				<span class="page_loading" v-show="!isShowMark"></span>
				<span v-show="isShowMark">
					<a-spin size="large" />
				</span>
			</div>
			<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
		</div>
		
		<newScaleImage ref="newScaleImage" @deletePorfolio="deletePorfolio" @uploadLikeAndLook="uploadLikeAndLook"></newScaleImage>
		<newScaleImageMobile ref="newScaleImageMobile" @deletePorfolio="deletePorfolio" @uploadLikeAndLook="uploadLikeAndLook"></newScaleImageMobile>
		<!-- <RobotAssist></RobotAssist> -->

    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,watch,onBeforeUnmount} from 'vue'
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Https } from "@/tool/https";
import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
import newScaleImageMobile from "@/component/WorksPage/newScaleImageMobile.vue";
import { useI18n } from "vue-i18n";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { useRouter,useRoute } from 'vue-router'
import Falls from "@/component/WorksPage/Falls.vue";
import { useStore } from "vuex";
export default defineComponent({
    components: {
        newScaleImage,
		newScaleImageMobile,
		Falls,
		generalMenu,
    },
	props:{
		autoscroll:{
			 type:Boolean,
			 default:false,
		 },
		isScroll:{
			 type:Boolean,
			 default:true,
		 },
		 otherUsers:{
			 type:Boolean,
			 default:false,
		 },
		 position:{
			 type:String,
			 default:'',
		 },
	},
    setup(prop) {
		const router = useRouter() as any
		const route = useRoute() as any
        const store = useStore();
		let filter:any = reactive({
			worksSelect: 'all',
			isNull:true,
			failWidth:300,
			worksType: [
				{
					name: useI18n().t('works.all'),
					value: 'all'
				},
				{
					name: useI18n().t('works.FavoriteWorks'),
					value: 'favoriteWorks'
				},
				{
					name: useI18n().t('works.MyWorks'),
					value: 'myWorks'
				},
				// {
				// 	name: useI18n().t('works.RCAworkshop_2024'),
				// 	value: 'RCAworkshop_2024'
				// },
				{
					name: useI18n().t('works.NewYear_2025'),
					value: 'NewYear_2025'
				},
			],
			worksList: [
			],
			getListDate:{
				"getLikePortfolio": 0,
				"getMyPortfolio": 0,
				page:1,
				size:10,
				tagId:'',
			},
			isShowMark:false,
			isNoData:false,//如果数据为空就不加载
			autoscrollDom:null as any,
			autoscrollTime:null as any,
		})
		let menuList:any = ref([
			{
			    label:'全部',
				value:'all',
			},{
				label:'男装',
				value:'man',
			},{
				label:'女装',
				value:'woman',
			},{
				label:'鞋子',
				value:'shoes',
			},{
				label:'包包',
				value:'bag',
			},{
				label:'配饰',
				value:'accessories',
			}
		])
		let selectMenu:any = ref({
			label:'全部',
			value:'all',
		})
		let newScaleImage:any = ref()
		let newScaleImageMobile:any = ref()
		let fall:any = ref()
		let setWorksSelect = (val:any) => {
			filter.worksSelect = val
			filter.getListDate.getLikePortfolio = 0
			filter.getListDate.getMyPortfolio = 0
			filter.getListDate.tagId = ''
			if(val == 'all'){
			}else if(val == 'favoriteWorks'){
				filter.getListDate.getLikePortfolio = 1
			}else if(val == 'myWorks'){
				filter.getListDate.getMyPortfolio = 1
			}else if(val == 'RCAworkshop_2024'){
				filter.getListDate.tagId = 1
			}else if(val == 'NewYear_2025'){
				filter.getListDate.tagId = 3
			}
			filter.getListDate.page = 0
			fall.value.clearData()
			fall.list = []
			fall.wait_list = []
			filter.isShowMark = false
			filter.isNoData = false
			// getPorfolio()
		}
		let likeFile = (item:any,type:string) => {
		}
		let getImgScale = (item:any)=>{
			let newScaleModel = null
			if(getScreenOrientation() == 'landscape'){
				newScaleModel = newScaleImage
				newScaleModel.value.scaleImageMask = true
			}else{
				newScaleModel = newScaleImageMobile
			}
			newScaleModel.value.init(item)
			
		}
		function getScreenOrientation() {
			// 优先使用标准API
			if (screen.orientation) {
				return screen.orientation.type.includes('portrait') ? 'portrait' : 'landscape';
			}
			// 回退到宽高比检测
			return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
			}

			// 监听方向变化
			function setupOrientationListener(callback:any) {
			// 标准事件
			const handleOrientationChange = () => {
				callback(getScreenOrientation());
			};

			// 优先使用标准API
			if (screen.orientation) {
				screen.orientation.addEventListener('change', handleOrientationChange);
			} 
			// 回退到resize事件
			else {
				window.addEventListener('resize', handleOrientationChange);
			}
			// 返回清除监听的方法
			return () => {
				if (screen.orientation) {
				screen.orientation.removeEventListener('change', handleOrientationChange);
				} else {
				window.removeEventListener('resize', handleOrientationChange);
				}
			};
			}
			const cleanup = setupOrientationListener((orientation:any) => {
				if (orientation === 'portrait') {
					// 竖屏逻辑
					return 'portrait'
				} else {
					// 横屏逻辑
					return 'landscape'
				}
		});
		let getPorfolio = ()=>{
			let data = {
				...filter.getListDate
			}
			if(filter.isShowMark && !filter.isNoData)return
			filter.isShowMark = true
			// if(prop.otherUsers){
			// }
			if(data.getMyPortfolio == 1 || data.getLikePortfolio == 1){
				data.accountId = store.state.UserHabit.userDetail.userId
			}			

			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                .then((rv) => {
					if(data.page == 1 && rv.content.length == 0){
						filter.isNull = true
					}else{
						filter.isNull = false
					}
					if (rv.content.length > 0) {
							filter.isNull = false
							fall.value.push(rv.content); 
					} else {
						filter.isNoData = true
					}
					// filter.worksList = rv.content
                })
                .catch((rv) => {
					filter.isShowMark = false
					if(data.page == 1){
						filter.isNull = true
					}
					filter.isNoData = true
				});

			// setTimeout(() => {
			// 	filter.isShowMark = false
			// 	fall.value.push(filter.worksList)
			// }, 1000);
		}
		let {t} = useI18n()
		let setprintModel= (data:any)=>{
			selectMenu.value = data
		}
		let setPortfolioLike = (value:any) =>{
			// let data = {id:value.id}
			// Https.axiosGet(Https.httpUrls.portfolioLike, {params:data})
			// .then((rv) => {
				
			// })
			// .catch((rv) => {
			// });
		}
		let deletePorfolio = (value:any)=>{
			fall.value.deleteItem(value); 
			
		}
		let setPorfolioDom = ()=>{
			filter.isShowMark = false
			filter.isNoData = false
			// getPorfolio()
			let worksPage:any = document.querySelector('.works_page')
			let imgParent:any = document.querySelector('.works_page .page_loading')
			new IntersectionObserver(
				(entries, observer) => {
					// 如果不是相交，则直接返回
					if (!entries[0].intersectionRatio) return;
					filter.getListDate.page += 1
					getPorfolio()
				},
				// { root:worksPage }
			).observe(imgParent);
		}
		const uploadLikeAndLook = (selectData:any)=>{
			for (let i = 0; i < fall.value.list.length; i++) {
				let item = fall.value.list[i]
				if (item.id === selectData.id) {
					item.likeNum = selectData.likeNum
					item.viewNums = selectData.viewNums
					break;
				}
			}
		}
		watch(() => route.query,
			(query, oldQuery) => {
				if(oldQuery && query?.works == oldQuery?.works)return
				let str = query.works
				if(!str)str = 'all'
				nextTick(()=>{
					setWorksSelect(str)
				})
			},
			{ immediate: true } // 立即触发一次以处理初始参数
			);
		onMounted (()=>{
			if(window.innerWidth < 1200)filter.failWidth = 240
			nextTick(()=>{
				setPorfolioDom()
			})
			//对元素设置自动滚动，每次滚动10px
			if (prop.autoscroll) {
				let isAdd = true
				filter.autoscrollTime = setInterval(() => {
					// console.log(filter.autoscrollDom.scrollHeight,filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight)
					if(filter.autoscrollDom.scrollHeight > filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight-3 && filter.autoscrollDom.scrollHeight < filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight+3){
						isAdd = false
					}
					if(filter.autoscrollDom.scrollTop < 3){
						isAdd = true	
					}
					if(isAdd){
						filter.autoscrollDom.scrollTop += 2;
					}else{
						filter.autoscrollDom.scrollTop -= 2;
					}
				}, 10);
			}
		
				
			// const start = filter.autoscrollDom.scrollTop;
			// const maxScroll = filter.autoscrollDom.scrollHeight - filter.autoscrollDom.clientHeight;
			// const duration = 3000; // 完整滚动时长（ms）
			// let startTime:any = null;

			// function animate(currentTime:any) {
			// 	if (!startTime) startTime = currentTime;
			// 	const elapsed = currentTime - startTime;
			// 	const progress = Math.min(elapsed / duration, 1); // 0~1
				
			// 	// 缓动函数（easeInOutQuad）
			// 	const easeProgress = progress < 0.5 
			// 	? 2 * progress * progress 
			// 	: 1 - Math.pow(-2 * progress + 2, 2) / 2;
				
			// 	filter.autoscrollDom.scrollTop = start + (maxScroll - start) * easeProgress;

			// 	if (progress < 1) {
			// 	filter.autoscrollTime = requestAnimationFrame(animate);
			// 	}
			// }

			// filter.autoscrollTime = requestAnimationFrame(animate);

			let data = {
				id:router.currentRoute.value.query?.workId
			}
			if(data.id){
				getImgScale(data)
			}
		})
		onBeforeUnmount(() => {
			clearInterval(filter.autoscrollTime); // 清除定时器
		})
        return {
			...toRefs(filter),
			menuList,
			selectMenu,
			newScaleImage,
			newScaleImageMobile,
			fall,
			setWorksSelect,
			likeFile,
			getImgScale,
			t,
			setprintModel,
			setPortfolioLike,
			deletePorfolio,
			uploadLikeAndLook,
        }
    },
    async mounted(){
	
    },
})
</script>
<style lang="less">
.el-icon{
	font-size: 14px;
}
.works_page {
	border-radius: 4rem;
    width: 100%;
	// overflow: hidden;
    // height: 100%;
	height: auto;
		min-height: 100%;
	padding: 0 6rem;
	// min-width: 1440px;
	position: relative;
	padding-top: 5rem;
	&.positionLogin{
		padding: 0;
		border-radius: 0;
		.page_content{
			scrollbar-width: none;
			border-radius: 0;
			min-height: 100%;
		}
	}
	.modal_title_text{
		display: flex;
		margin: 0;
		padding-bottom: 2.4rem;
		.gallery_btn{
			min-width: 12rem;
			margin-right: 2rem;
		}
		.gallery_btn:last-child{
			margin-right: 0;
		}
		.modal_search_menu{
			margin-left: auto;
			z-index: 10;
			.generalMenu_printModel{
				margin-right: 0;
			}
		}
	}
    .page_content {
        position: relative;
		min-height: 80%;
		height: auto;
		background: #f7f8fa;
		border-radius: 3rem;
		@media (max-width: 768px) {
			background: #fff;
		}
		
		>img{
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
    }
	&.active{
		display: flex;
		flex-direction: column;
		height: 100%;
		.page_content{
			overflow-y: auto;
			width: 100%;
		}
	}
	&.otherUsersActive{
		padding: 0;
	}
	.page_loading_box{
		text-align: center;
		height: 50px;
		.page_loading{
			display: block;
			width: 50px;
			height: 50px;
		}
	}
}
</style>