gree_leran/pages/index/index.vue

<template>
	<view class="content">
		<view class="nav">
			<view class="tit-box">
				学习平台
			</view>
			<view class="search-box" style="width: 80%;margin: 0 auto;">
				<up-search class="search" placeholder="日照香炉生紫烟" :clearabled="true" v-model="keyword"
					animation="false"></up-search>
			</view>
		</view>
		<view class="hand">
			<up-swiper height="150" :list="swipe"></up-swiper>
		</view>
		<view class="seton">
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="NavicatToBaseItems(baseListItem)">
					<!-- <up-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></up-icon> -->
					<image :src="baseListItem.src" style="width: 60rpx;" mode="widthFix"></image>
					<text class="grid-text" style="margin: 10rpx;">{{baseListItem.title}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="newlist" >
			<view class="newList-t" @click="toTop">
				<up-text margin="1em"  type="primary" text="新闻"></up-text>
			</view>
			
				<!-- <news-card :info="i" v-for="i in newsList"></news-card> -->
			<scroll-view
			      scroll-y
			      @scrolltolower="loadMore"
			      class="case-list"
			    >
				<view class="list-itme" v-for="(item, index) in caseList" :key="index">
					<CaseBox  ></CaseBox>   
				</view>
			      <view v-if="isLoading" class="loading">
			        <up-loadmore :status="status" />
			      </view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,ref
	} from 'vue';
	const swipe = reactive([
		"/static/stu.png"
	]);
	import newsCard from '@/components/newsCard.vue';
	const caseList=ref([
		{},{},{},
	])
	const isLoading=ref(false);
	const status=ref("more");
	
	// const caseList = reactive([{
	// 	title:"测试",
	// 	image:'/static/stu.png',
	// 	detile:"这是一个测试",
	// 	time:"2024-6-1"
	// }])
	// 加载更多数据
	const loadMore=async()=>{
	console.log("加载更多...");
	status.value="loading";
	  if (isLoading.value) return;
	  isLoading.value = true;
	  const newCases = await fetchCases();
	  caseList.value.push({});
	  caseList.value.push({});
	  caseList.value.push({});
	  caseList.value.push({});
	  console.log("加载更多2...");
	  isLoading.value = false;
	  status.value = "nomore";
	 console.log("加载更多2...");
	}
	const fetchCases=()=>{
		return new Promise((resolve) => {
		    setTimeout(() => {
		      const newCases = [
		        { id: 1, title: "Case 1" },
		        { id: 2, title: "Case 2" }
		      ];
		      resolve(newCases);
		    }, 1000);
		  });
	}
	const toTop=()=>{
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 300
		  });
	}
	const baseList = ref([  
	       {  
	    	        src:'/static/icon/video.png',
	    	        title: '视频'  ,
	    			url:"/pages/video/video"
	    	    },  
	    	    {  
	    	       src:'/static/icon/talk.png',
	    	        title: '讨论',
	    			url:'/pages/discuss/discuss'
	    	    },  
	    	    {  
	    	        src: '/static/icon/score.png',  
	    	        title: '积分',
	    			url:'/pages/intergral/intergral'
	    	    },  
	    		{
	    		    src: '/static/icon/me.png',  
	    		    title: '我的',
	    		},
	]);  
	   function NavicatToBaseItems(item){
			uni.navigateTo({
				url:item.url
			})
		}
</script>

<style lang="scss">
	.nav {

		// margin-top: 20rpx;
		height: 350rpx;
		display: flex;
		background-color: #a8e6cf;
		flex-direction: column;
		width: 100%;
		margin: 0 auto;
		justify-content: center;

		.tit-box {
			display: flex;
			width: 100%;
			// text-align: center;
			// position: relative;
			// top: 100rpx;
			margin-top: -60rpx;
			font-size: 34rpx;
			justify-content: center;
			font-weight: 600;
			color: #fff;
		}

		.search-box {
			position: relative;
			top: 25rpx;

			.search {


				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}

	}
	.newlist{
		// flex: 1;
		display: flex;
		flex-flow: column;
		// overflow: hidden;
	}
	.newList-t{
		position: sticky;
		top: 60rpx;
		height: 60rpx;
		background-color: #fff;
		z-index: 2;
		// background-color: #000;
	}
	.content {
		height: 100vh;
		background-color: #F7F8FA;
		.seton{
			// position: relative;
			background-color: #fff;
			width: 95%;
			margin: 0 auto;
			margin-top: 25rpx;
			border-radius: 25rpx;
			display: flex;
			// flex-direction: ;
			// height: 120rpx;
			align-items: center;
			// top: 500rpx;
		}
		.hand {
			width: 95%;
			margin: 0 auto;
			margin-top: -80rpx;
		}
		
	}
	.case-list{
		scrollbar-width: none;
		// height: 40vh;
		// overflow: auto;
		height: 100vh;
		display: flexbox;
		flex-flow: column;
		background-color: #e2e2e2;
	}
	.list-itme{
		width: 98%;
		height: 350rpx;
		margin: 10rpx auto;
		// background-color: #000;
	}
</style>