333

common/server/news.js

@@ -9,6 +9,7 @@ import HttpRequest from "../system/request";
  */
 export const getFeaturedNewsList = async (page = 1, pageSize = 10, title = "") => {
     const res = await HttpRequest.getOrCache('/get_featured_news_list', { page, limit: pageSize, title }, 300);
+    console.log("getFeaturedNewsList", res);
     return res.data;
 }
 /**

common/system/request.js

@@ -146,7 +146,7 @@ class HttpRequest {
                     console.log(requestUrl, "请求消耗时间", endDate - startDate);
                     const normalizedRes = normalizeResponseKeys(res);
 
-                    resolve(normalizedRes);
+                    resolve(normalizedRes.data);
                 },
                 fail: e => {
                     console.error('网络请求失败:', e);

components/youdas-container/no-data.vue

@@ -0,0 +1,61 @@
+<template>
+    <view class="empty-state">
+        <image class="empty-image" :src="imageSrc" mode="aspectFit"></image>
+        <text class="empty-text">{{ message }}</text>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'NoData',
+    props: {
+        // 空状态显示的图片，默认使用kong.png
+        imageSrc: {
+            type: String,
+            default: '/static/app-plus/no-data.png'
+        },
+        // 空状态显示的文本
+        message: {
+            type: String,
+            default: '暂无数据'
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.empty-state {
+    width: 100%;
+    height: 100%;
+    // border: 1px solid red;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: emptyFadeIn 0.5s ease-out;
+    // background-color: #F7F7F7;
+}
+
+.empty-image {
+    width: 200rpx;
+    height: 200rpx;
+    margin-bottom: 20rpx;
+}
+
+.empty-text {
+    font-size: 28rpx;
+    color: #999999;
+}
+
+@keyframes emptyFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20rpx);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+</style>

pages/index/index.vue

@@ -28,10 +28,7 @@ onLoad(async () => {
 	}
 
 	navigateTo('/pages/news/news');
-	// const config = await getConfig();
+
-	// console.log('config', config);
-	// const config1 = await getConfig();
-	// console.log('config1', config1);
 });
 /**
  * 检查网络状态

pages/news/news.vue

@@ -10,170 +10,174 @@
 			</view>
 		</view>
 
-		<scroll-view class="" scroll-y="true" style="width: 688.93rpx; height: 1211rpx; margin: 15rpx auto;">
+		<scroll-view class="" v-if="dataList.length > 0" scroll-y="true" @scrolltolower="loadMore"
-			<view class="view-data" v-for="(item,index) in dataList" :key="index" @click="toDetails(item.id)">
+			style="width: 688.93rpx; height: 1211rpx; margin: 15rpx auto;">
+			<view class="view-data" v-for="(item, index) in dataList" :key="index" @click="toDetails(item.id)">
 				<view class="title">
-					{{item.title}}
+					{{ item.title }}
 				</view>
 
 				<view class="time">
-					{{item.tiem}}
+					{{ item.publish_time }}
 				</view>
 
 				<view class="img">
-
+					<image :src="item.cover_image" mode="aspectFill" style="width: 225.19rpx; height: 158.4rpx;" />
 				</view>
 
 			</view>
 		</scroll-view>
+		<NoData v-else class="no-data" />
+
 
 
 	</view>
 </template>
 
-<script>
+<script setup>
-	export default {
+import { ref, onMounted } from 'vue'
-		data() {
+import NoData from '@/components/youdas-container/no-data.vue'
-			return {
+import { getFeaturedNewsList, getHotNewsList } from '@/common/server/news'
-				tabC: 1,
+
-				tabList: ["热榜", "精选", "关注"],
+// 响应式数据
-				dataList: [{
+const tabC = ref(1)
-					id: 1,
+const tabList = ref(["热榜", "精选", "关注"])
-					title: "联合国预测世界人口将达到80亿，这一数字这一数字",
+const dataList = ref([])
-					tiem: "今天 20:01",
+let pageIndex = 0;
-					imgUrl: ""
+let pageSize = 2;
-				}, {
+let isPagination = true;
-					id: 1,
+// 生命周期钩子
-					title: "联合国预测世界人口将达到80亿，这一数字……",
+onMounted(() => {
-					tiem: "今天 20:01",
+	// 原来的onLoad逻辑
-					imgUrl: ""
+	loadMore();
-				}, {
+})
-					id: 1,
+
-					title: "联合国预测世界人口将达到80亿，这一数字……",
+// 方法
-					tiem: "今天 20:01",
+const tabChange = (i) => {
-					imgUrl: ""
+	tabC.value = i
-				}, {
+}
-					id: 1,
+
-					title: "联合国预测世界人口将达到80亿，这一数字……",
+const toDetails = (i) => {
-					tiem: "今天 20:01",
+	//在起始页面跳转到test.vue页面并传递参数
-					imgUrl: ""
+	uni.navigateTo({
-				}, {
+		url: '/pages/news/news_details'
-					id: 1,
+	})
-					title: "联合国预测世界人口将达到80亿，这一数字……",
+
-					tiem: "今天 20:01",
+}
-					imgUrl: ""
+const loadMore = () => {
-				}, {
+	//判断是否还有下一页
-					id: 1,
+	if (!isPagination) return;
-					title: "联合国预测世界人口将达到80亿，这一数字……",
+	pageIndex++;
-					tiem: "今天 20:01",
+	if (tabC.value == 1) {
-					imgUrl: ""
+		console.log("第", pageIndex, "页", pageSize, "条");
-				}, ]
+		getFeaturedNewsList(pageIndex, pageSize).then(res => {
+			console.log("resresresres", res);
+			if (res.list.length < pageSize) {
+				isPagination = false;
 			}
-		},
+			if (res.last_page == pageIndex) {
-		onLoad() {
+				isPagination = false;
-
+			}
-		},
+			dataList.value = [...dataList.value, ...res.list]
-		methods: {
+		})
-			tabChange(i) {
+	} else if (tabC.value == 1) {
-				this.tabC = i
-			},
-
-			toDetails(i) {
-				//在起始页面跳转到test.vue页面并传递参数
-				uni.navigateTo({
-					url: '/pages/news/news_details'
-				})
-
-			},
-		},
 	}
+}
 </script>
 
 <style lang="scss">
-	.content {
+.content {
-		width: 100%;
+	width: 100%;
-		display: flex;
+	display: flex;
-		flex-direction: column;
+	flex-direction: column;
-		background-color: #F7F7F7;
+	background-color: #F7F7F7;
-	}
 
-	.tab {
+	.no-data {
-		width: 100%;
+		height: calc(100vh - 225.19rpx);
+		width: 100vw;
+
+	}
+}
+
+.tab {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	bottom: 20rpx;
+
+	.tab-item {
+		width: 155rpx;
+		height: 68rpx;
+		position: relative;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+
+		&.act {
+			font-size: 30.53rpx;
+			color: #000000;
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 26.72rpx;
+				height: 4rpx;
+				background: #333333;
+			}
+		}
+
+		&.unact {
+			font-size: 30.53rpx;
+			color: #4C4C4C;
+		}
+	}
+}
+
+.view-data {
+	width: 100%;
+	height: 225.19rpx;
+	background-color: white;
+	margin-bottom: 15rpx;
+	border-radius: 19.08rpx;
+	position: relative;
+
+
+	.title {
+		width: 366.41rpx;
+		height: 83.97rpx;
 		position: absolute;
-		bottom: 20rpx;
+		top: 32rpx;
-
+		left: 20rpx;
-		.tab-item {
+		-webkit-line-clamp: 2;
-			width: 155rpx;
+		-webkit-box-orient: vertical;
-			height: 68rpx;
+		display: -webkit-box;
-			position: relative;
+		overflow: hidden;
-			display: flex;
+		text-overflow: ellipsis;
-			align-items: center;
-			justify-content: center;
-
-			&.act {
-				font-size: 30.53rpx;
-				color: #000000;
-
-				&::after {
-					content: '';
-					position: absolute;
-					bottom: 0;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 26.72rpx;
-					height: 4rpx;
-					background: #333333;
-				}
-			}
-
-			&.unact {
-				font-size: 30.53rpx;
-				color: #4C4C4C;
-			}
-		}
 	}
 
-	.view-data {
+	.time {
-		width: 100%;
+		position: absolute;
-		height: 225.19rpx;
+		left: 20rpx;
-		background-color: white;
+		font-size: 22.9rpx;
-		margin-bottom: 15rpx;
+		color: #878787;
-		border-radius: 19.08rpx;
+		bottom: 24rpx;
-		position: relative;
-
-
-		.title {
-			width: 366.41rpx;
-			height: 83.97rpx;
-			position: absolute;
-			top: 32rpx;
-			left: 20rpx;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-			display: -webkit-box;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.time {
-			position: absolute;
-			left: 20rpx;
-			font-size: 22.9rpx;
-			color: #878787;
-			bottom: 24rpx;
-		}
-
-		.img {
-			position: absolute;
-			right: 20rpx;
-			top: 34rpx;
-			width: 225.19rpx;
-			height: 158.4rpx;
-			background-color: #D8D8D8;
-		}
-
 	}
+
+	.img {
+		position: absolute;
+		right: 20rpx;
+		top: 34rpx;
+		width: 225.19rpx;
+		height: 158.4rpx;
+		background-color: #D8D8D8;
+	}
+
+
+
+}
 </style>