gree_leran/components/CaseList/CaseList.vue

<template>
		<scroll-view
		      scroll-y
		      @scrolltolower="loadMore"
		      class="case-list"
		    >
			<!-- <CaseBox v-bind="{}"  @clickLike="handleClickLike" @clickCollection="clickCollection"></CaseBox> -->
			<view class="list-itme" v-for="(item, index) in caseList" :key="index">
				<CaseBox v-bind="item"  @ClickLike="ClickLike" @ClickCollection="ClickCollection"></CaseBox>   
			</view>
		     <!-- <view v-if="isLoading" class="loading">
		        <up-loadmore :status="status" />
		      </view> -->
		</scroll-view>
</template>

<script setup>
	import {
		onMounted,
		reactive,ref
	} from 'vue';
	const app=getApp();
	const userUtils=ref(app.globalData.utils);
	const caseList= ref([])
	
	/**
	 * 获取列表
	 */
	import { getCaseList } from '@/apis/cast.js';
	/**
	 * 数据转换
	 */
	import {dataToList} from './ut/dataTo.js'
	//点赞列表
	import {getLikesList,addLike} from '@/apis/likes.js'
	//收藏列表
	import {getCollectionsList,addCollections} from "@/apis/collections.js"
	import { onShow } from "@dcloudio/uni-app"
	const isLoading=ref(false);
	const props=defineProps({
		isLik:{
			typeof:Boolean,
			default:false
		},
		isCollection:{
			typeof:Boolean,
			default:false
		}
	})
	const httpStaus=ref(false);
	const status=ref("nomore");
	const getCaseLists=async()=>{
		if(httpStaus.value){
			return ;
		}
		httpStaus.value=true;
		try{
			let res;
			if(!props.isLik&&!props.isCollection)
				res= await getCaseList();
			else
				res={
					code:200,
					data:[]
				}
			let likre=await getLikesList();
			let cols=await getCollectionsList();
			if(res.code==200){
				res=res.data;
				likre=likre.code==200?likre.data.casesLikesList:null;
				cols=cols.code==200?cols.data.caseCollectionsList:null
				if(props.isCollection)
					res=cols;
				if(props.isLik)
					res=likre
				console.log("点赞列表",likre,cols);
				let a=dataToList(res,likre,cols);
				// Object.apply()
				caseList.value=null;
				caseList.value=a.slice().reverse();
				console.log("数据数据",caseList.value)
			}
		} catch(err){
			console.log("报错");
		}finally{
			httpStaus.value=false;
		}
		httpStaus.value=false;
		// console.log("列表",caseList.value);
	}	
	const loadMore=async()=>{
		status.value="loading";
		if (isLoading.value) return;
		isLoading.value = true;
		const newCases = await fetchCases();
		console.log("加载更多2...");
		isLoading.value = false;
		status.value = "nomore";
		console.log("加载更多2...");
	}
	const ClickLike=(info)=>{
		console.log("点赞",info)
		let bo="0";
		if(info.is){
			bo="1"
		}
		addLike({
			contentType:0,
			contentId:info.id,
			extField1:bo,
		})
	}
	const updateList=()=>{
		getCaseLists();
	}
	const ClickCollection=(info)=>{
		console.log("收藏")
		let bo="0";
		if(info.is){
			bo="1";
		}
		addCollections({
			contentType:0,
			contentId:info.id,
			extField1:bo,
		})
	}
	const fetchCases=()=>{
		return new Promise((resolve) => {
		    setTimeout(() => {
		    }, 1000);
		  });
	}
	onMounted(()=>{
		getCaseLists();
	})
	defineExpose({
	  updateList
	});
	onShow(()=>{
		getCaseLists();
	})
</script>
<style lang="scss">
.case-list{
		scrollbar-width: none;
		// height: 40vh;
		// overflow: auto;
		height: 100%;
		display: flexbox;
		flex-flow: column;
		background-color: #F7F8FA;
	}
	.list-itme{
		width: 98%;
		height: 350rpx;
		margin: 10rpx auto;
		// background-color: #000;
	}
</style>