333
This commit is contained in:
zpc
parent
c0a7d6768c
commit
f7e694d59f
|
|
@ -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;
|
||||
}
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
61
components/youdas-container/no-data.vue
Normal file
61
components/youdas-container/no-data.vue
Normal file
|
|
@ -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>
|
||||
0
components/youdas-container/page-container.vue
Normal file
0
components/youdas-container/page-container.vue
Normal file
|
|
@ -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);
|
||||
|
||||
});
|
||||
/**
|
||||
* 检查网络状态
|
||||
|
|
|
|||
|
|
@ -10,170 +10,174 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="" scroll-y="true" 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)">
|
||||
<scroll-view class="" v-if="dataList.length > 0" scroll-y="true" @scrolltolower="loadMore"
|
||||
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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabC: 1,
|
||||
tabList: ["热榜", "精选", "关注"],
|
||||
dataList: [{
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字这一数字",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, {
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字……",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, {
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字……",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, {
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字……",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, {
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字……",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, {
|
||||
id: 1,
|
||||
title: "联合国预测世界人口将达到80亿，这一数字……",
|
||||
tiem: "今天 20:01",
|
||||
imgUrl: ""
|
||||
}, ]
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import NoData from '@/components/youdas-container/no-data.vue'
|
||||
import { getFeaturedNewsList, getHotNewsList } from '@/common/server/news'
|
||||
|
||||
// 响应式数据
|
||||
const tabC = ref(1)
|
||||
const tabList = ref(["热榜", "精选", "关注"])
|
||||
const dataList = ref([])
|
||||
let pageIndex = 0;
|
||||
let pageSize = 2;
|
||||
let isPagination = true;
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// 原来的onLoad逻辑
|
||||
loadMore();
|
||||
})
|
||||
|
||||
// 方法
|
||||
const tabChange = (i) => {
|
||||
tabC.value = i
|
||||
}
|
||||
|
||||
const toDetails = (i) => {
|
||||
//在起始页面跳转到test.vue页面并传递参数
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/news_details'
|
||||
})
|
||||
|
||||
}
|
||||
const loadMore = () => {
|
||||
//判断是否还有下一页
|
||||
if (!isPagination) return;
|
||||
pageIndex++;
|
||||
if (tabC.value == 1) {
|
||||
console.log("第", pageIndex, "页", pageSize, "条");
|
||||
getFeaturedNewsList(pageIndex, pageSize).then(res => {
|
||||
console.log("resresresres", res);
|
||||
if (res.list.length < pageSize) {
|
||||
isPagination = false;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
tabChange(i) {
|
||||
this.tabC = i
|
||||
},
|
||||
|
||||
toDetails(i) {
|
||||
//在起始页面跳转到test.vue页面并传递参数
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/news_details'
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
if (res.last_page == pageIndex) {
|
||||
isPagination = false;
|
||||
}
|
||||
dataList.value = [...dataList.value, ...res.list]
|
||||
})
|
||||
} else if (tabC.value == 1) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F7F7F7;
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
.no-data {
|
||||
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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
top: 32rpx;
|
||||
left: 20rpx;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 6.2 KiB |
Loading…
Reference in New Issue
Block a user