aida_front/src/component/Events/eventsDetail.vue

<template>
    <div class="eventsDetail_page" :class="{active:isScroll}">
		<div class="modal_title_text modal_search">
			<div v-show="isScroll || systemUser.value>-1" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
				{{ item.name }}
			</div>
			<div v-show="!isScroll && systemUser.value == -1" class="modal_title_text_assistant active">All</div>
		</div>
        <div class="page_content" >
			<div class="page_content_itemBox">
				<div class="page_content_item" v-for="item in worksList" :key="item.id" @click="setWorksDetail(item)">
					<div class="page_content_item_img">
						<img :src="item.imgUrl" alt="">
					</div>
					<div class="page_content_item_time">{{ item.time }}</div>
					<div class="page_content_item_title">{{ item.title }}</div>
				</div>
			</div>
			<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>
		</div>
    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Https } from "@/tool/https";
import { useI18n } from "vue-i18n";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { useStore } from "vuex";
export default defineComponent({
    components: {
		generalMenu,
    },
	props:{
		isScroll:{
			 type:Boolean,
			 default:true,
		 },
	},
    setup() {
		// console.log(this.$route.params.id);
        const store = useStore();
		let filter:any = reactive({
			worksSelect: 'all',
			worksType: [
				{
					name: useI18n().t('works.all'),
					value: 'all'
				},
				// {
				// 	name: useI18n().t('works.FavoriteWorks'),
				// 	value: 'favoriteWorks'
				// },
				// {
				// 	name: useI18n().t('works.MyWorks'),
				// 	value: 'myWorks'
				// },
			],
			worksList: [
				{
					title:'Source Fashion 2024',
					time:'14 Jul 2024',
					id:1,
					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
				},{
					title:'Source Fashion 2024 Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW',
					time:'14 Jul 2024',
					id:1,
					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
				},{
					title:'Source Fashion 2024',
					time:'14 Jul 2024',
					id:1,
					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
				},
			],
			getListDate:{
				"getLikePortfolio": 0,
				"getMyPortfolio": 0,
				page:1,
				size:10,
			},
			isShowMark:false,
			isNoData:false,//如果数据为空就不加载
		})
		let systemUser = computed(()=>{
			return store.state.UserHabit.systemUser
		})
		let selectMenu:any = ref({
			label:'全部',
			value:'all',
		})
		let setWorksSelect = (val:any) => {
			// filter.worksSelect = val.value
			// filter.getListDate.getLikePortfolio = 0
			// filter.getListDate.getMyPortfolio = 0
			// if(val.value == 'all'){
			// }else if(val.value == 'favoriteWorks'){
			// 	filter.getListDate.getLikePortfolio = 1
			// }else if(val.value == 'myWorks'){
			// 	filter.getListDate.getMyPortfolio = 1
			// }
			// filter.getListDate.page = 0
			filter.isShowMark = false
			filter.isNoData = false
			// getPorfolio()
		}
		let likeFile = (item:any,type:string) => {
		}
		let getImgScale = (item:any)=>{
		}
		let getPorfolio = ()=>{
			let data = filter.getListDate
			if(filter.isShowMark && !filter.isNoData)return
			filter.isShowMark = true
			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                .then((rv) => {
					if (rv.content.length > 0) {

					} else {
						filter.isNoData = true
					}
					filter.isShowMark = false
                })
                .catch((rv) => {
					filter.isShowMark = false
					filter.isNoData = true
				});
		}
		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) => {
			// });
		}
		
		onMounted (()=>{
			// filter.isShowMark = false
			// filter.isNoData = false
			// getPorfolio()
			// let worksPage:any = document.querySelector('.eventsDetail_page')
			// let imgParent:any = document.querySelector('.eventsDetail_page .page_loading')
			// new IntersectionObserver(
			// 	(entries, observer) => {
			// 		// 如果不是相交，则直接返回
			// 		if (!entries[0].intersectionRatio) return;
			// 		filter.getListDate.page += 1
			// 		getPorfolio()
			// 	},
			// ).observe(imgParent);
		})
        return {
			...toRefs(filter),
			systemUser,
			selectMenu,
			setWorksSelect,
			likeFile,
			getImgScale,
			t,
			setprintModel,
			setPortfolioLike,
        }
    },
    async mounted(){
	
    },
})
</script>
<style lang="less">
.eventsDetail_page {
	
	
}
</style>