|
@@ -11,15 +11,16 @@
|
|
|
<view style="display: flex; justify-content: flex-end">
|
|
|
<view class="view6 step7"></view>
|
|
|
</view> -->
|
|
|
- <z-paging
|
|
|
- :use-custom-refresher="false"
|
|
|
- ref="paging"
|
|
|
- v-model="dataList"
|
|
|
- :auto="false"
|
|
|
- :style="{ height: windowHeight - 80 + 'px' }"
|
|
|
- :show-scrollbar="false"
|
|
|
- :refresher-enabled="false"
|
|
|
- >
|
|
|
+ <z-paging :use-custom-refresher="false" ref="paging" v-model="dataList" :auto="false"
|
|
|
+ :style="{ height: windowHeight - 80 + 'px' }" :show-scrollbar="false" :refresher-enabled="true"
|
|
|
+ @refresherrefresh="onRefresh" @refresherrestore="onRefresherRestore" @query="queryList"
|
|
|
+ :fixed="true" :safe-area-inset-bottom="true" :loading-more-enabled="true"
|
|
|
+ :loading-more-no-more-text="'没有更多了'" :loading-more-loading-text="'加载中...'"
|
|
|
+ :loading-more-fail-text="'加载失败,点击重试'" :loading-more-default-text="'上拉加载更多'"
|
|
|
+ :loading-more-loading-style="{ color: '#999' }"
|
|
|
+ :loading-more-no-more-style="{ color: '#999' }"
|
|
|
+ :loading-more-fail-style="{ color: '#999' }"
|
|
|
+ :loading-more-default-style="{ color: '#999' }">
|
|
|
<template #top>
|
|
|
<page-navbar>
|
|
|
<template #navCenter>
|
|
@@ -27,14 +28,12 @@
|
|
|
<!-- 手动选择城市功能隐藏 -->
|
|
|
<!-- <view class="topBox" @click="lhSelectCityFun"> -->
|
|
|
<view class="topBox" @click="lhSelectCityFun">
|
|
|
- <text
|
|
|
- style="
|
|
|
+ <text style="
|
|
|
margin-left: 10rpx;
|
|
|
margin-right: 20rpx;
|
|
|
font-size: 44rpx;
|
|
|
font-weight: 600;
|
|
|
- "
|
|
|
- >
|
|
|
+ ">
|
|
|
{{ currentCity }}
|
|
|
</text>
|
|
|
<!-- <image src="@/static/home/home-bom.png"
|
|
@@ -50,24 +49,13 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="search" @click="goPage('/pages/index/Search')">
|
|
|
- <uv-input
|
|
|
- placeholder="🔥“潮玩大作战” 派对季重磅开启!"
|
|
|
- border="none"
|
|
|
- :custom-style="{ background: '#fff', paddingLeft: '25rpx' }"
|
|
|
- shape="circle"
|
|
|
- >
|
|
|
- <image
|
|
|
- class="testImg"
|
|
|
- src="@/static/home/icon-hot.png"
|
|
|
- style="width: 22rpx; height: 30rpx"
|
|
|
- ></image>
|
|
|
+ <uv-input placeholder="🔥 潮玩大作战 派对季重磅开启!" border="none"
|
|
|
+ :custom-style="{ background: '#fff', paddingLeft: '25rpx' }" shape="circle">
|
|
|
+ <image class="testImg" src="@/static/home/icon-hot.png" style="width: 22rpx; height: 30rpx"></image>
|
|
|
|
|
|
<template #suffix>
|
|
|
<view class="input-box">
|
|
|
- <image
|
|
|
- src="@/static/icon/search.png"
|
|
|
- style="width: 32rpx; height: 32rpx"
|
|
|
- >
|
|
|
+ <image src="@/static/icon/search.png" style="width: 32rpx; height: 32rpx">
|
|
|
</image>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -79,34 +67,15 @@
|
|
|
<z-paging-cell class="benner-box">
|
|
|
<sortble :default-sorts="['uvSwiper', 'classModel', 'uvSwiperCard']">
|
|
|
<template #uvSwiper>
|
|
|
- <uv-swiper
|
|
|
- :list="bannerList"
|
|
|
- :autoplay="true"
|
|
|
- circular
|
|
|
- :interval="5000"
|
|
|
- indicator
|
|
|
- indicator-mode="dot"
|
|
|
- height="200"
|
|
|
- radius="0"
|
|
|
- ></uv-swiper>
|
|
|
+ <uv-swiper :list="bannerList" :autoplay="true" circular :interval="5000" indicator indicator-mode="dot"
|
|
|
+ height="200" radius="0"></uv-swiper>
|
|
|
</template>
|
|
|
|
|
|
<template #classModel>
|
|
|
<view class="classModel">
|
|
|
- <image
|
|
|
- src="@/static/home/benner-iconBom.png"
|
|
|
- class="benner-iconBom"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <image
|
|
|
- src="@/static/home/benner-icontop.png"
|
|
|
- class="benner-icontop"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <view
|
|
|
- class="benner-box benner-left-box"
|
|
|
- @click="goPage('/pages/my/job')"
|
|
|
- >
|
|
|
+ <image src="@/static/home/benner-iconBom.png" class="benner-iconBom" mode=""></image>
|
|
|
+ <image src="@/static/home/benner-icontop.png" class="benner-icontop" mode=""></image>
|
|
|
+ <view class="benner-box benner-left-box" @click="goPage('/pages/my/job')">
|
|
|
<view class="text1"> 获取奖励 </view>
|
|
|
<view class="btn"> 立即前往 </view>
|
|
|
</view>
|
|
@@ -118,31 +87,14 @@
|
|
|
<view class="text"> 社交 </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="classModel-bg classModel-bg1" ref="classModel1"
|
|
|
- @click="goPage('/pages/my/job')">
|
|
|
- <image class="classModel-img" src="@/static/zhHans-text-icon/text-2.png" mode="">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- <view class="classModel-bg classModel-bg2" ref="classModel2">
|
|
|
- <image class="classModel-img" src="@/static/zhHans-text-icon/text-3.png" mode="">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- <view class="classModel-bg" ref="classModel3">
|
|
|
- <image class="classModel-img" src="@/static/zhHans-text-icon/text-4.png" mode="">
|
|
|
- </image>
|
|
|
- </view> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
</sortble>
|
|
|
</z-paging-cell>
|
|
|
<z-paging-cell style="background: #fff">
|
|
|
<view class="tab-nav">
|
|
|
- <view
|
|
|
- v-for="(tab, index) in tabs"
|
|
|
- :key="index"
|
|
|
- :class="['tab-item', currentTab === index ? 'active' : '']"
|
|
|
- @click="switchTab(index)"
|
|
|
- >
|
|
|
+ <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
|
|
|
+ @click="switchTab(index)">
|
|
|
{{ tab }}
|
|
|
<view class="indicator-triangle"> </view>
|
|
|
</view>
|
|
@@ -154,12 +106,8 @@
|
|
|
<block v-if="followList.length > 0">
|
|
|
<w-waterfall :data="followList">
|
|
|
<template v-slot:content="{ item, width }">
|
|
|
- <card
|
|
|
- :item="formatItem(item)"
|
|
|
- :width="width"
|
|
|
- :custom-style="{ background: '#fff' }"
|
|
|
- textColor="#000"
|
|
|
- ></card>
|
|
|
+ <card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }" textColor="#000">
|
|
|
+ </card>
|
|
|
</template>
|
|
|
</w-waterfall>
|
|
|
</block>
|
|
@@ -170,27 +118,17 @@
|
|
|
|
|
|
<!-- 推荐列表 - 瀑布流样式 -->
|
|
|
<template>
|
|
|
- <w-waterfall
|
|
|
- v-show="currentTab === 1 && recommendList.length > 0"
|
|
|
- :data="recommendList"
|
|
|
- >
|
|
|
+ <w-waterfall v-show="currentTab === 1 && recommendList.length > 0" :data="recommendList">
|
|
|
<template v-slot:content="{ item, width }">
|
|
|
- <card
|
|
|
- :item="formatItem(item)"
|
|
|
- :width="width"
|
|
|
- :custom-style="{ background: '#fff' }"
|
|
|
- textColor="#000"
|
|
|
- ></card>
|
|
|
+ <card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }" textColor="#000">
|
|
|
+ </card>
|
|
|
</template>
|
|
|
</w-waterfall>
|
|
|
- <view
|
|
|
- class="no-data"
|
|
|
- v-if="
|
|
|
- currentTab === 1 &&
|
|
|
- recommendList.length === 0 &&
|
|
|
- !isLoadingRecommend
|
|
|
- "
|
|
|
- >
|
|
|
+ <view class="no-data" v-if="
|
|
|
+ currentTab === 1 &&
|
|
|
+ recommendList.length === 0 &&
|
|
|
+ !isLoadingRecommend
|
|
|
+ ">
|
|
|
<text>暂无推荐数据</text>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -199,48 +137,20 @@
|
|
|
<template>
|
|
|
<view v-if="currentTab === 2" class="hot-topics">
|
|
|
<view class="hot-topics-header">
|
|
|
- <!-- <text class="hot-topics-title">热搜资讯!</text> -->
|
|
|
- <image
|
|
|
- class="hot-topics-title"
|
|
|
- src="@/static/home/hot-topics-title.png"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
+ <image class="hot-topics-title" src="@/static/home/hot-topics-title.png" mode=""></image>
|
|
|
</view>
|
|
|
- <swiper
|
|
|
- class="hot-topics-swiper"
|
|
|
- :current="currentTopicPage"
|
|
|
- @change="handleTopicPageChange"
|
|
|
- >
|
|
|
- <swiper-item
|
|
|
- v-for="(page, pageIndex) in topicPages"
|
|
|
- :key="pageIndex"
|
|
|
- >
|
|
|
+ <swiper class="hot-topics-swiper" :current="currentTopicPage" @change="handleTopicPageChange">
|
|
|
+ <swiper-item v-for="(page, pageIndex) in topicPages" :key="pageIndex">
|
|
|
<view class="hot-topics-list">
|
|
|
- <view
|
|
|
- v-for="(topic, index) in page"
|
|
|
- :key="index"
|
|
|
- class="topic-item"
|
|
|
- @click="goToArticleDetail(topic.id)"
|
|
|
- >
|
|
|
+ <view v-for="(topic, index) in page" :key="index" class="topic-item"
|
|
|
+ @click="goToArticleDetail(topic.id)">
|
|
|
<view class="hot-topics-left">
|
|
|
- <image
|
|
|
- v-if="pageIndex * 4 + index == 0"
|
|
|
- src="@/static/icon/icon-first.png"
|
|
|
- class="topic-index topic-index-img"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <image
|
|
|
- v-else-if="pageIndex * 4 + index == 1"
|
|
|
- src="@/static/icon/icon-second.png"
|
|
|
- class="topic-index topic-index-img"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <image
|
|
|
- v-else-if="pageIndex * 4 + index == 2"
|
|
|
- src="@/static/icon/icon-third.png"
|
|
|
- class="topic-index topic-index-img"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
+ <image v-if="pageIndex * 4 + index == 0" src="@/static/icon/icon-first.png"
|
|
|
+ class="topic-index topic-index-img" mode=""></image>
|
|
|
+ <image v-else-if="pageIndex * 4 + index == 1" src="@/static/icon/icon-second.png"
|
|
|
+ class="topic-index topic-index-img" mode=""></image>
|
|
|
+ <image v-else-if="pageIndex * 4 + index == 2" src="@/static/icon/icon-third.png"
|
|
|
+ class="topic-index topic-index-img" mode=""></image>
|
|
|
<text v-else class="topic-index">{{
|
|
|
pageIndex * 4 + index + 1
|
|
|
}}</text>
|
|
@@ -248,57 +158,32 @@
|
|
|
<view class="topic-content toe">
|
|
|
{{ topic.title }}
|
|
|
</view>
|
|
|
- <image
|
|
|
- v-if="topic.isHot"
|
|
|
- src="@/static/icon/icon-hot.png"
|
|
|
- class="hot-tag"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
+ <image v-if="topic.isHot" src="@/static/icon/icon-hot.png" class="hot-tag" mode=""></image>
|
|
|
</view>
|
|
|
- <text class="topic-participants"
|
|
|
- >{{ topic.num_like }}人正在热议</text
|
|
|
- >
|
|
|
+ <text class="topic-participants">{{ topic.num_like }}人正在热议</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<view class="indicator-dots">
|
|
|
- <view
|
|
|
- v-for="i in 2"
|
|
|
- :key="i"
|
|
|
- :class="['dot', currentTopicPage === i - 1 ? 'active' : '']"
|
|
|
- >
|
|
|
+ <view v-for="i in 2" :key="i" :class="['dot', currentTopicPage === i - 1 ? 'active' : '']">
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view
|
|
|
- v-show="currentTab === 2 && newsList.length > 0"
|
|
|
- class="news-list"
|
|
|
- >
|
|
|
- <w-waterfall
|
|
|
- v-show="currentTab === 2 && newsList.length > 0"
|
|
|
- :data="newsList"
|
|
|
- >
|
|
|
+ <view v-show="currentTab === 2 && newsList.length > 0" class="news-list">
|
|
|
+ <w-waterfall v-show="currentTab === 2 && newsList.length > 0" :data="newsList">
|
|
|
<template v-slot:content="{ item, width }">
|
|
|
- <card
|
|
|
- :item="formatItem(item)"
|
|
|
- :width="width"
|
|
|
- goLink="/pages/index/articleDetail?id="
|
|
|
- :custom-style="{ background: '#fff' }"
|
|
|
- textColor="#000"
|
|
|
- ></card>
|
|
|
+ <card :item="formatItem(item)" :width="width" goLink="/pages/index/articleDetail?id="
|
|
|
+ :custom-style="{ background: '#fff' }" textColor="#000"></card>
|
|
|
</template>
|
|
|
</w-waterfall>
|
|
|
</view>
|
|
|
|
|
|
- <view
|
|
|
- class="no-data"
|
|
|
- v-if="currentTab === 2 && newsList.length === 0 && !isLoadingNews"
|
|
|
- >
|
|
|
+ <view class="no-data" v-if="currentTab === 2 && newsList.length === 0 && !isLoadingNews">
|
|
|
<text>暂无新闻数据</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
</z-paging-cell>
|
|
|
<view class="blankHeight"></view>
|
|
|
</z-paging>
|
|
@@ -310,16 +195,8 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- <novice-guidance :step="step"></novice-guidance> -->
|
|
|
- <lhSelectCity
|
|
|
- style="height: 100vh"
|
|
|
- class="lhSelectCity"
|
|
|
- :currentCity="currentCity"
|
|
|
- :windowHeight="windowHeight"
|
|
|
- :hotCitys="hotCitys"
|
|
|
- @onSelect="City"
|
|
|
- v-if="lhSelectCityFalg"
|
|
|
- @closeLhSelectCityFun="closeLhSelectCityFun()"
|
|
|
- />
|
|
|
+ <lhSelectCity style="height: 100vh" class="lhSelectCity" :currentCity="currentCity" :windowHeight="windowHeight"
|
|
|
+ :hotCitys="hotCitys" @onSelect="City" v-if="lhSelectCityFalg" @closeLhSelectCityFun="closeLhSelectCityFun()" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -516,9 +393,27 @@ export default {
|
|
|
this.currentTab = 1;
|
|
|
}
|
|
|
},
|
|
|
- // 上拉加载更多
|
|
|
+ // 修改触底加载方法
|
|
|
onReachBottom() {
|
|
|
- this.loadMoreData();
|
|
|
+ console.log('触底加载更多');
|
|
|
+ // 根据当前标签页加载更多数据
|
|
|
+ switch (this.currentTab) {
|
|
|
+ case 0:
|
|
|
+ if (this.hasMoreFollow && !this.isLoadingFollow) {
|
|
|
+ this.loadFollowList();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ if (this.hasMoreRecommend && !this.isLoadingRecommend) {
|
|
|
+ this.loadRecommendList();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ if (this.hasMoreNews && !this.isLoadingNews) {
|
|
|
+ this.loadNewsList();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 下拉刷新数据
|
|
@@ -542,8 +437,8 @@ export default {
|
|
|
this.weather = res.data;
|
|
|
}
|
|
|
},
|
|
|
- complete: () => {},
|
|
|
- fail: (e) => {},
|
|
|
+ complete: () => { },
|
|
|
+ fail: (e) => { },
|
|
|
});
|
|
|
},
|
|
|
lhSelectCityFun() {
|
|
@@ -590,49 +485,60 @@ export default {
|
|
|
},
|
|
|
|
|
|
switchTab(index) {
|
|
|
+ if (this.currentTab === index) return;
|
|
|
this.currentTab = index;
|
|
|
|
|
|
- // Check if the target tab's list is already populated
|
|
|
- if (this.currentList.length > 0) {
|
|
|
- // If the list is already populated, do not fetch data again
|
|
|
- return;
|
|
|
+ // 重置当前标签页的数据
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.followList = [];
|
|
|
+ this.followOffset = 0;
|
|
|
+ this.hasMoreFollow = true;
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ this.recommendList = [];
|
|
|
+ this.recommendOffset = 0;
|
|
|
+ this.hasMoreRecommend = true;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.newsList = [];
|
|
|
+ this.hotTopics = [];
|
|
|
+ this.newsOffset = 0;
|
|
|
+ this.hasMoreNews = true;
|
|
|
+ break;
|
|
|
}
|
|
|
|
|
|
- // If the list is not populated, load the corresponding data
|
|
|
+ // 加载新标签页的数据
|
|
|
this.loadTabData(index);
|
|
|
},
|
|
|
loadTabData(index) {
|
|
|
switch (index) {
|
|
|
case 0:
|
|
|
- if (!this.followList.length) {
|
|
|
- this.loadFollowList();
|
|
|
- }
|
|
|
+ this.loadFollowList();
|
|
|
break;
|
|
|
case 1:
|
|
|
- if (!this.recommendList.length) {
|
|
|
- this.loadRecommendList();
|
|
|
- }
|
|
|
+ this.loadRecommendList();
|
|
|
break;
|
|
|
case 2:
|
|
|
- if (!this.hotNewsList.length) {
|
|
|
- this.loadHotNews();
|
|
|
- }
|
|
|
- if (!this.newsList.length) {
|
|
|
- this.loadNewsList();
|
|
|
- }
|
|
|
+ this.loadHotNews();
|
|
|
+ this.loadNewsList();
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
+ // 修改关注列表加载方法
|
|
|
loadFollowList() {
|
|
|
if (this.isLoadingFollow) return;
|
|
|
this.isLoadingFollow = true;
|
|
|
|
|
|
+ // 保存当前列表数据
|
|
|
+ const currentList = [...this.followList];
|
|
|
+
|
|
|
uni.request({
|
|
|
url: this.$apiHost + "/Work/getlist",
|
|
|
data: {
|
|
|
uuid: getApp().globalData.uuid,
|
|
|
skey: getApp().globalData.skey,
|
|
|
- type: "attention", // 关注列表
|
|
|
+ type: "attention",
|
|
|
offset: this.followOffset,
|
|
|
},
|
|
|
header: {
|
|
@@ -641,28 +547,26 @@ export default {
|
|
|
},
|
|
|
success: (res) => {
|
|
|
console.log("关注列表数据:", res.data);
|
|
|
- // 确保在任何情况下都完成加载
|
|
|
- if (
|
|
|
- res.data.success == "yes" &&
|
|
|
- res.data.list &&
|
|
|
- res.data.list.length > 0
|
|
|
- ) {
|
|
|
- // 只有当列表有数据时才追加
|
|
|
- this.followList = [...this.followList, ...res.data.list];
|
|
|
- this.followOffset += res.data.list.length;
|
|
|
-
|
|
|
- if (res.data.list.length < 20) {
|
|
|
- this.hasMoreFollow = false;
|
|
|
+ if (res.data.success == "yes" && res.data.list && res.data.list.length > 0) {
|
|
|
+ // 使用 Vue.set 确保响应式更新
|
|
|
+ if (this.followOffset === 0) {
|
|
|
+ this.followList = res.data.list;
|
|
|
+ } else {
|
|
|
+ // 使用 Vue.set 更新数组,避免数据闪烁
|
|
|
+ this.followList = currentList.concat(res.data.list);
|
|
|
}
|
|
|
+ this.followOffset += res.data.list.length;
|
|
|
+ this.hasMoreFollow = res.data.list.length >= 20;
|
|
|
} else {
|
|
|
- // 如果列表为空,确保标记没有更多数据
|
|
|
this.hasMoreFollow = false;
|
|
|
}
|
|
|
|
|
|
- // 无论是否有数据,都需要通知z-paging组件完成刷新
|
|
|
- if (this.$refs.paging) {
|
|
|
- this.$refs.paging.complete(this.followList);
|
|
|
- }
|
|
|
+ // 使用 nextTick 确保数据更新后再通知组件
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.paging) {
|
|
|
+ this.$refs.paging.complete(this.followList);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
complete: () => {
|
|
|
this.isLoadingFollow = false;
|
|
@@ -670,23 +574,26 @@ export default {
|
|
|
fail: (e) => {
|
|
|
console.log("请求关注列表失败:", e);
|
|
|
this.isLoadingFollow = false;
|
|
|
- // 加载失败时也要通知组件完成
|
|
|
if (this.$refs.paging) {
|
|
|
this.$refs.paging.complete(false);
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ // 修改推荐列表加载方法
|
|
|
loadRecommendList() {
|
|
|
if (this.isLoadingRecommend) return;
|
|
|
this.isLoadingRecommend = true;
|
|
|
|
|
|
+ // 保存当前列表数据
|
|
|
+ const currentList = [...this.recommendList];
|
|
|
+
|
|
|
uni.request({
|
|
|
url: this.$apiHost + "/Work/getlist",
|
|
|
data: {
|
|
|
uuid: getApp().globalData.uuid,
|
|
|
skey: getApp().globalData.skey,
|
|
|
- type: "recommend", // 推荐列表
|
|
|
+ type: "recommend",
|
|
|
offset: this.recommendOffset,
|
|
|
},
|
|
|
header: {
|
|
@@ -695,25 +602,23 @@ export default {
|
|
|
},
|
|
|
success: (res) => {
|
|
|
console.log("推荐列表数据:", res.data);
|
|
|
- if (
|
|
|
- res.data.success == "yes" &&
|
|
|
- res.data.list &&
|
|
|
- res.data.list.length > 0
|
|
|
- ) {
|
|
|
- this.recommendList = [...this.recommendList, ...res.data.list];
|
|
|
- this.recommendOffset += res.data.list.length;
|
|
|
-
|
|
|
- if (res.data.list.length < 20) {
|
|
|
- this.hasMoreRecommend = false;
|
|
|
+ if (res.data.success == "yes" && res.data.list && res.data.list.length > 0) {
|
|
|
+ if (this.recommendOffset === 0) {
|
|
|
+ this.recommendList = res.data.list;
|
|
|
+ } else {
|
|
|
+ this.recommendList = currentList.concat(res.data.list);
|
|
|
}
|
|
|
+ this.recommendOffset += res.data.list.length;
|
|
|
+ this.hasMoreRecommend = res.data.list.length >= 20;
|
|
|
} else {
|
|
|
this.hasMoreRecommend = false;
|
|
|
}
|
|
|
|
|
|
- // 无论是否有数据,都需要通知z-paging组件完成刷新
|
|
|
- if (this.$refs.paging) {
|
|
|
- this.$refs.paging.complete(this.recommendList);
|
|
|
- }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.paging) {
|
|
|
+ this.$refs.paging.complete(this.recommendList);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
complete: () => {
|
|
|
this.isLoadingRecommend = false;
|
|
@@ -721,7 +626,6 @@ export default {
|
|
|
fail: (e) => {
|
|
|
console.log("请求推荐列表失败:", e);
|
|
|
this.isLoadingRecommend = false;
|
|
|
- // 加载失败时也要通知组件完成
|
|
|
if (this.$refs.paging) {
|
|
|
this.$refs.paging.complete(false);
|
|
|
}
|
|
@@ -737,7 +641,7 @@ export default {
|
|
|
data: {
|
|
|
uuid: getApp().globalData.uuid,
|
|
|
skey: getApp().globalData.skey,
|
|
|
- type: "hot", // 热点新闻
|
|
|
+ type: "hot",
|
|
|
},
|
|
|
header: {
|
|
|
"content-type": "application/json",
|
|
@@ -745,25 +649,14 @@ export default {
|
|
|
},
|
|
|
success: (res) => {
|
|
|
console.log("热点新闻数据:", res.data);
|
|
|
- if (
|
|
|
- res.data.success == "yes" &&
|
|
|
- res.data.list &&
|
|
|
- res.data.list.length > 0
|
|
|
- ) {
|
|
|
+ if (res.data.success == "yes" && res.data.list && res.data.list.length > 0) {
|
|
|
this.hotNewsList = res.data.list;
|
|
|
-
|
|
|
- // 如果有热点新闻数据,更新热搜资讯
|
|
|
- if (this.hotNewsList.length > 0) {
|
|
|
- // 将API返回的热点新闻转换为热搜资讯格式
|
|
|
- this.hotTopics = this.hotNewsList.map((item, index) => {
|
|
|
- return {
|
|
|
- id: item.id,
|
|
|
- title: item.title || "热门话题",
|
|
|
- num_like: item.num_like || 0,
|
|
|
- isHot: index % 2 === 0, // 偶数索引的设为热点
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
+ this.hotTopics = this.hotNewsList.map((item, index) => ({
|
|
|
+ id: item.id,
|
|
|
+ title: item.title || "热门话题",
|
|
|
+ num_like: item.num_like || 0,
|
|
|
+ isHot: index % 2 === 0,
|
|
|
+ }));
|
|
|
}
|
|
|
},
|
|
|
complete: () => {
|
|
@@ -775,117 +668,57 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ // 修改新闻列表加载方法
|
|
|
loadNewsList() {
|
|
|
if (this.isLoadingNews) return;
|
|
|
this.isLoadingNews = true;
|
|
|
- // uni.request({
|
|
|
- // url: this.$apiHost + "/Article/getlist",
|
|
|
- // data: {
|
|
|
- // uuid: getApp().globalData.uuid,
|
|
|
- // skey: getApp().globalData.skey,
|
|
|
- // type: "list", // 新闻列表
|
|
|
- // offset: this.newsOffset,
|
|
|
- // },
|
|
|
- // header: {
|
|
|
- // "content-type": "application/json",
|
|
|
- // sign: getApp().globalData.headerSign,
|
|
|
- // },
|
|
|
- // success: (res) => {
|
|
|
- // console.log("新闻列表数据:", res.data);
|
|
|
- // if (
|
|
|
- // res.data.success == "yes" &&
|
|
|
- // res.data.list &&
|
|
|
- // res.data.list.length > 0
|
|
|
- // ) {
|
|
|
- // this.newsList = [...this.newsList, ...res.data.list];
|
|
|
- // this.newsOffset += res.data.list.length;
|
|
|
|
|
|
- // if (res.data.list.length < 20) {
|
|
|
- // this.hasMoreNews = false;
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // this.hasMoreNews = false;
|
|
|
- // }
|
|
|
+ // 保存当前列表数据
|
|
|
+ const currentList = [...this.newsList];
|
|
|
|
|
|
- // // 无论是否有数据,都需要通知z-paging组件完成刷新
|
|
|
- // if (this.$refs.paging) {
|
|
|
- // this.$refs.paging.complete(this.newsList);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // complete: () => {
|
|
|
- // this.isLoadingNews = false;
|
|
|
- // },
|
|
|
- // fail: (e) => {
|
|
|
- // console.log("请求新闻列表失败:", e);
|
|
|
- // this.isLoadingNews = false;
|
|
|
- // // 加载失败时也要通知组件完成
|
|
|
- // if (this.$refs.paging) {
|
|
|
- // this.$refs.paging.complete(false);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // });
|
|
|
- this.$http
|
|
|
- .get("/Article/getlist", {
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + "/Article/getlist",
|
|
|
+ data: {
|
|
|
uuid: getApp().globalData.uuid,
|
|
|
skey: getApp().globalData.skey,
|
|
|
- type: "list", // 新闻列表
|
|
|
+ type: "list",
|
|
|
offset: this.newsOffset,
|
|
|
- })
|
|
|
- .then(async (res) => {
|
|
|
- await res;
|
|
|
- console.log("新闻列表数据:", res);
|
|
|
- if (
|
|
|
- res.data.success == "yes" &&
|
|
|
- res.data.list &&
|
|
|
- res.data.list.length > 0
|
|
|
- ) {
|
|
|
- this.newsList = [...this.newsList, ...res.data.list];
|
|
|
- this.newsOffset += res.data.list.length;
|
|
|
-
|
|
|
- if (res.data.list.length < 20) {
|
|
|
- this.hasMoreNews = false;
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ "content-type": "application/json",
|
|
|
+ sign: getApp().globalData.headerSign,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log("新闻列表数据:", res.data);
|
|
|
+ if (res.data.success == "yes" && res.data.list && res.data.list.length > 0) {
|
|
|
+ if (this.newsOffset === 0) {
|
|
|
+ this.newsList = res.data.list;
|
|
|
+ } else {
|
|
|
+ this.newsList = currentList.concat(res.data.list);
|
|
|
}
|
|
|
+ this.newsOffset += res.data.list.length;
|
|
|
+ this.hasMoreNews = res.data.list.length >= 20;
|
|
|
} else {
|
|
|
this.hasMoreNews = false;
|
|
|
}
|
|
|
|
|
|
- // 无论是否有数据,都需要通知z-paging组件完成刷新
|
|
|
- if (this.$refs.paging) {
|
|
|
- this.$refs.paging.complete(this.newsList);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(async (e) => {
|
|
|
- await e;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.paging) {
|
|
|
+ this.$refs.paging.complete(this.newsList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ this.isLoadingNews = false;
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
console.log("请求新闻列表失败:", e);
|
|
|
this.isLoadingNews = false;
|
|
|
- // 加载失败时也要通知组件完成
|
|
|
if (this.$refs.paging) {
|
|
|
this.$refs.paging.complete(false);
|
|
|
}
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.isLoadingNews = false;
|
|
|
- });
|
|
|
- },
|
|
|
- loadMoreData() {
|
|
|
- // 根据当前标签加载更多数据
|
|
|
- switch (this.currentTab) {
|
|
|
- case 0:
|
|
|
- if (this.hasMoreFollow && !this.isLoadingFollow) {
|
|
|
- this.loadFollowList();
|
|
|
- }
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- if (this.hasMoreRecommend && !this.isLoadingRecommend) {
|
|
|
- this.loadRecommendList();
|
|
|
- }
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- if (this.hasMoreNews && !this.isLoadingNews) {
|
|
|
- this.loadNewsList();
|
|
|
- }
|
|
|
- break;
|
|
|
- }
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
handleTopicPageChange(e) {
|
|
|
this.currentTopicPage = e.detail.current;
|
|
@@ -894,13 +727,7 @@ export default {
|
|
|
formatItem(item) {
|
|
|
console.log("item:", item);
|
|
|
|
|
|
- this.downloadAndProcessImage(item.images)
|
|
|
- .then((color) => {
|
|
|
- console.log(`平均颜色: R=${color.r}, G=${color.g}, B=${color.b}`);
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("获取图像失败:", error);
|
|
|
- });
|
|
|
+
|
|
|
let img = "";
|
|
|
if (item.images) {
|
|
|
img = item.images.split("|")[0];
|
|
@@ -1013,12 +840,59 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 修改下拉刷新方法
|
|
|
+ onRefresh() {
|
|
|
+ console.log('下拉刷新开始');
|
|
|
+ // 重置所有数据
|
|
|
+ this.followList = [];
|
|
|
+ this.recommendList = [];
|
|
|
+ this.newsList = [];
|
|
|
+ this.hotTopics = [];
|
|
|
+
|
|
|
+ // 重置偏移量
|
|
|
+ this.followOffset = 0;
|
|
|
+ this.recommendOffset = 0;
|
|
|
+ this.newsOffset = 0;
|
|
|
+
|
|
|
+ // 重置加载状态
|
|
|
+ this.hasMoreFollow = true;
|
|
|
+ this.hasMoreRecommend = true;
|
|
|
+ this.hasMoreNews = true;
|
|
|
+
|
|
|
+ // 根据当前标签页加载数据
|
|
|
+ this.loadTabData(this.currentTab);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉刷新恢复
|
|
|
+ onRefresherRestore() {
|
|
|
+ console.log('下拉刷新恢复');
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import "index.scss";
|
|
|
+
|
|
|
+// 添加过渡效果样式
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+// 确保列表项有最小高度,避免闪烁
|
|
|
+.list-item {
|
|
|
+ min-height: 200rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
@import "@/style/qweather-icons.css";
|