MoeNovaClient/pages/index/index.vue

<template>
	<view :style="{ height: windowHeight + 'px' }">
		<!-- <view style="display: flex; justify-content: flex-end">
			<view class="view0 step1"></view>
		</view>
		<view class="view1 step2"></view>
		<view class="view2 step3"></view>
		<view class="view3 step4"></view>
		<view class="view4 step5"></view>
		<view class="view5 step6"></view>
		<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="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>
						<view class="top" style="display: flex">
							<!-- 手动选择城市功能隐藏 -->
							<!-- <view class="topBox" @click="lhSelectCityFun"> -->
							<view class="topBox" @click="lhSelectCityFun">
								<text style="
                    margin-left: 10rpx;
                    margin-right: 20rpx;
                    font-size: 44rpx;
                    font-weight: 600;
                  ">
									{{ currentCity }}
								</text>
								<!-- <image src="@/static/home/home-bom.png"
									style="width: 36rpx; height: 36rpx;margin-left: 15rpx;margin-right: 30rpx;"></image> -->
							</view>
							<view class="weather">
								<p>
									{{ weather.weather }}<i :class="'qi-' + weather.icon"></i>️{{
                    weather.temp
                  }}
								</p>
								<p>{{ getDayOfWeek }}</p>
							</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>

								<template #suffix>
									<view class="input-box">
										<image src="@/static/icon/search.png" style="width: 32rpx; height: 32rpx">
										</image>
									</view>
								</template>
							</uv-input>
						</view>
					</template>
				</page-navbar>
			</template>
			<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>
					</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')">
								<view class="text1"> 获取奖励 </view>
								<view class="btn"> 立即前往 </view>
							</view>
							<view class="benner-box benner-right-box" ref="classModel1">
								<view class="guard">
									<view class="text"> 潮玩IP </view>
								</view>
								<view class="match">
									<view class="text"> 社交 </view>
								</view>
							</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)">
						{{ tab }}
						<view class="indicator-triangle"> </view>
					</view>
				</view>

				<!-- 根据当前标签显示不同样式的列表 -->
				<!-- 关注列表 - 类似my.vue -->
				<view v-show="currentTab === 0" class="follow-list">
					<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>
							</template>
						</w-waterfall>
					</block>
					<view class="no-data" v-else-if="!isLoadingFollow">
						<text>暂无关注数据</text>
					</view>
				</view>

				<!-- 推荐列表 - 瀑布流样式 -->
				<template>
					<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>
						</template>
					</w-waterfall>
					<view class="no-data"
						v-if=" currentTab === 1 && recommendList.length === 0 &&  !isLoadingRecommend ">
						<text>暂无推荐数据</text>
					</view>
				</template>

				<!-- 探索列表 - 热点新闻已经有现成的热搜资讯组件，只需添加新闻列表 -->
				<template>
					<view v-if="currentTab === 2" class="hot-topics">
						<view class="hot-topics-header">
							<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">
								<view class="hot-topics-list">
									<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>
											<text v-else class="topic-index">{{
                        pageIndex * 4 + index + 1
                      }}</text>

											<view class="topic-content toe">
												{{ topic.title }}
											</view>
											<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>
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view class="indicator-dots">
							<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">
							<template v-slot:content="{ item, width }">
								<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">
						<text>暂无新闻数据</text>
					</view>
				</template>

			</z-paging-cell>
			<view class="blankHeight"></view>
		</z-paging>
		<tabbar-vue :tabbars="tabbars" :currentIndex="0" ref="tabbar"></tabbar-vue>

		<!-- 添加浮动按钮 -->
		<view v-if="currentTab === 2" class="float-btn" @click="goToMake">
			<image src="/static/home/release-btn.png" class="float-btn-icon"></image>
		</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()" />


		<wu-app-update></wu-app-update>
	</view>
</template>

<script>
	import sortble from "@/components/sortble/sortble.vue";
	import tabbarVue from "@/components/tabbar/tabbar.vue";
	import pageNavbar from "@/components/page-navbar/page-navbar.vue";
	import wWaterfall from "@/components/w-waterfall/w-waterfall.vue";
	import tabbar from "@/mixins/tabbar";
	import card from "@/components/card/card.vue";
	import lhSelectCity from "@/components/lh-select-city/index.vue";
	import {
		getStorage,
		setStorage,
		removeStorage
	} from "@/common/util.js";
	// import noviceGuidance from "@/components/novice-guidance/index.vue";
	export default {
		components: {
			sortble,
			tabbarVue,
			pageNavbar,
			wWaterfall,
			lhSelectCity,
			card,
			// noviceGuidance
		},
		mixins: [tabbar],
		data() {
			return {
				step: {
					name: "workbenchSet5",
					guideList: [{
							el: ".step1",
							tips: "这里是第一步的介绍~",
							next: "下一步",
						},
						{
							el: ".step2",
							tips: "这里是第二步的介绍~",
							next: "下一步",
						},
						{
							el: ".step3",
							tips: "这里是第三步的介绍~",
							next: "下一步",
						},
						{
							el: ".step4",
							tips: "这里是第四步的介绍~",
							next: "下一步",
						},
						{
							el: ".step5",
							tips: "这里是第五步的介绍~",
							next: "下一步",
						},
						{
							el: ".step6",
							tips: "这里是第六步的介绍~",
							next: "下一步",
						},
						{
							el: ".step7",
							tips: "最后一步啦~",
							next: "完成",
						},
					],
				},
				windowHeight: uni.getWindowInfo().windowHeight,
				bannerList: [
					"../../static/dome/home-swper.png",
					"../../static/dome/home-swper.png",
					"../../static/dome/home-swper.png",
				],
				cardList: [{
						img: "/static/img/img-1.png",
						bgimg: "/static/image/bg-2.png",
					},
					{
						img: "/static/img/img-3.png",
						bgimg: "/static/image/bg-3.png",
					},
					{
						img: "/static/img/img-2.png",
						bgimg: "/static/image/bg-1.png",
					},
				],
				list: [], // 瀑布流全部数据
				dataList: [],
				tabs: ["关注", "推荐", "探索"],
				currentTab: 1,
				currentTopicPage: 0,
				followList: [], // 关注列表数据
				recommendList: [], // 推荐列表数据
				exploreList: [], // 探索列表数据
				hotNewsList: [], // 热点新闻数据
				newsList: [], // 新闻列表数据
				followOffset: 0, // 关注列表偏移量
				recommendOffset: 0, // 推荐列表偏移量
				exploreOffset: 0, // 探索列表偏移量
				newsOffset: 0, // 新闻列表偏移量
				hasMoreFollow: true, // 是否有更多关注列表数据
				hasMoreRecommend: true, // 是否有更多推荐列表数据
				hasMoreExplore: true, // 是否有更多探索列表数据
				hasMoreNews: true, // 是否有更多新闻列表数据
				isLoadingFollow: false, // 是否正在加载关注列表
				isLoadingRecommend: false, // 是否正在加载推荐列表
				isLoadingExplore: false, // 是否正在加载探索列表
				isLoadingNews: false, // 是否正在加载新闻列表
				hotTopics: [],
				lhSelectCityFalg: false,
				hotCitys: [
					"杭州",
					"天津",
					"北京",
					"上海",
					"深圳",
					"广州",
					"成都",
					"重庆",
					"厦门",
				],
				currentCity: "北京",
				windowHeight: "",
				weather: {
					city: "",
					weather: "",
					temp: "0℃",
					icon: 101,
				},
				isContentRecommendation: true,
			};
		},

		computed: {
			getDayOfWeek() {
				const days = [
					"星期日",
					"星期一",
					"星期二",
					"星期三",
					"星期四",
					"星期五",
					"星期六",
				];
				const today = new Date();
				const dayOfWeek = days[today.getDay()];
				return dayOfWeek;
			},
			currentList() {
				switch (this.currentTab) {
					case 0:
						return this.followList;
					case 1:
						return this.recommendList; // 使用专门的推荐列表
					case 2:
						return this.exploreList;
					default:
						return [];
				}
			},
			topicPages() {
				const pages = [];
				for (let i = 0; i < this.hotTopics.length; i += 4) {
					pages.push(this.hotTopics.slice(i, i + 4));
				}
				return pages;
			},
		},
		onLoad() {
			let that = this;
			// 计算出可用高度
			this.windowHeight = uni.getSystemInfoSync().windowHeight + "px";
			// 不在onLoad中直接加载数据，避免与z-paging组件重复请求
			// 让z-paging组件通过queryList方法控制数据加载
			this.getWeather();
			this.queryList();
		},
		onShow() {
			var isContentRecommendation = getStorage("isContentRecommendation");
			console.log(isContentRecommendation, "isContentRecommendation");
			if (isContentRecommendation != "false") {
				isContentRecommendation = true;
			} else {
				isContentRecommendation = false;
			}
			this.isContentRecommendation = isContentRecommendation;

			if (isContentRecommendation == false) {
				this.tabs = ["关注"];
				this.currentTab = 0;
				this.queryList();
			} else {
				this.tabs = ["关注", "推荐", "探索"];
				this.currentTab = 1;
			}

			uni.$emit('check_update');
		},
		// 修改触底加载方法
		onReachBottom() {
			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;
			}
		},

		// 下拉刷新数据
		methods: {
			getWeather(city) {
				uni.request({
					url: this.$apiHost + "/Index/getAreaInfo",
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						city: city || (this.currentCity == "北京" ? "" : this.currentCity),
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log(this.weather, "天气数据", res.data);
						if (res.data.city) {
							this.currentCity = res.data.city;
							this.weather = res.data;
						}
					},
					complete: () => {},
					fail: (e) => {},
				});
			},
			lhSelectCityFun() {
				this.lhSelectCityFalg = true;
			},
			// 选中事件
			City(city) {
				this.currentCity = city;
				setTimeout(() => {
					this.lhSelectCityFalg = false;
				}, 300);
			},
			closeLhSelectCityFun() {
				this.lhSelectCityFalg = false;
			},
			queryList() {
				// 根据当前标签刷新数据
				switch (this.currentTab) {
					case 0:
						// 重置关注列表
						this.followList = [];
						this.followOffset = 0;
						this.hasMoreFollow = true;
						this.loadFollowList();
						break;
					case 1:
						// 重置推荐列表
						this.recommendList = [];
						this.recommendOffset = 0;
						this.hasMoreRecommend = true;
						this.loadRecommendList();
						break;
					case 2:
						// 重置热点新闻和新闻列表
						this.hotNewsList = [];
						this.newsList = [];
						this.newsOffset = 0;
						this.hasMoreNews = true;
						// 加载热点新闻和新闻列表
						this.loadHotNews();
						this.loadNewsList();
						break;
				}
			},

			switchTab(index) {
				if (this.currentTab === index) return;
				this.currentTab = index;

				// 重置当前标签页的数据
				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;
				}

				// 加载新标签页的数据
				this.loadTabData(index);
			},
			loadTabData(index) {
				switch (index) {
					case 0:
						this.loadFollowList();
						break;
					case 1:
						this.loadRecommendList();
						break;
					case 2:
						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",
						offset: this.followOffset,
					},
					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) {
							// 使用 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;
						}

						// 使用 nextTick 确保数据更新后再通知组件
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete(this.followList);
							}
						});
					},
					complete: () => {
						this.isLoadingFollow = false;
					},
					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",
						offset: this.recommendOffset,
					},
					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.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;
						}

						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete(this.recommendList);
							}
						});
					},
					complete: () => {
						this.isLoadingRecommend = false;
					},
					fail: (e) => {
						console.log("请求推荐列表失败:", e);
						this.isLoadingRecommend = false;
						if (this.$refs.paging) {
							this.$refs.paging.complete(false);
						}
					},
				});
			},
			loadHotNews() {
				if (this.isLoadingExplore) return;
				this.isLoadingExplore = true;

				uni.request({
					url: this.$apiHost + "/Article/getlist",
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						type: "hot",
					},
					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.hotNewsList = res.data.list;
							this.hotTopics = this.hotNewsList.map((item, index) => ({
								id: item.id,
								title: item.title || "热门话题",
								num_like: item.num_like || 0,
								isHot: index % 2 === 0,
							}));
						}
					},
					complete: () => {
						this.isLoadingExplore = false;
					},
					fail: (e) => {
						console.log("请求热点新闻失败:", e);
						this.isLoadingExplore = false;
					},
				});
			},
			// 修改新闻列表加载方法
			loadNewsList() {
				if (this.isLoadingNews) return;
				this.isLoadingNews = true;

				// 保存当前列表数据
				const currentList = [...this.newsList];

				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) {
							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;
						}

						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);
						}
					},
				});
			},
			handleTopicPageChange(e) {
				this.currentTopicPage = e.detail.current;
			},

			formatItem(item) {
				console.log("item:", item);


				let img = "";
				if (item.images) {
					img = item.images.split("|")[0];
				}

				// 处理接口返回的数据，使其适配card组件
				return {
					id: item.id,
					allowEdit: false,
					nickname: item.nickname,
					avator: item.avator,
					num_like: item.num_like,
					num_view: item.num_view,
					image: img || item.img_url || item.image, // 优先使用images字段
					w: item.width,
					h: item.height,
					title: item.title || "",
					desc: item.desc || "",
					userID: item.userID || 0,
					backgroundColor: "#f6f6f6",
				};
			},
			downloadAndProcessImage(imageUrl, width = 10, height = 10) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: imageUrl,
						success: (downloadResult) => {
							if (downloadResult.statusCode === 200) {
								const tempFilePath = downloadResult.tempFilePath;
								const ctx = uni.createCanvasContext("myCanvas", this);
								ctx.drawImage(tempFilePath, 0, 0, width, height);
								ctx.draw(false, () => {
									uni.canvasGetImageData({
										canvasId: "myCanvas",
										x: 0,
										y: 0,
										width: width,
										height: height,
										success: (res) => {
											const data = res.data;
											let r = 0,
												g = 0,
												b = 0;
											for (let i = 0; i < data.length; i +=
												4) {
												r += data[i];
												g += data[i + 1];
												b += data[i + 2];
											}
											const count = width * height;
											r = Math.floor(r / count);
											g = Math.floor(g / count);
											b = Math.floor(b / count);
											resolve({
												r,
												g,
												b,
											});
										},
										fail: (err) => {
											reject(err);
										},
									});
								});
							} else {
								reject(new Error("下载图像失败"));
							}
						},
						fail: (err) => {
							reject(err);
						},
					});
				});
			},
			goToArticleDetail(id) {
				if (!id) {
					uni.showToast({
						title: "文章ID不存在",
						icon: "none",
					});
					return;
				}
				// uni.$emit("check_login", () => {
				uni.navigateTo({
					url: "/pages/index/articleDetail?id=" + id,
				});
				// });
			},
			goWork(item) {
				console.log("skeylogin", "xxx");
				uni.$emit("check_login", () => {
					uni.navigateTo({
						url: "/pages/index/workDetail?id=" + item.id,
					});
				});
			},
			goToMake() {
				console.log("skeylogin", "xxx2");
				uni.$emit("check_login", () => {
					uni.navigateTo({
						// 生成个人形象
						// url: "/pages/make/make",
						url: "/pages/make/fabuArticle?id=-1",
					});
				});
			},
			goPage(page) {
				uni.$emit("check_login", () => {
					uni.navigateTo({
						url: page,
					});
				});
			},
			// 修改下拉刷新方法
			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";
</style>