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> --		</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="queryLists" :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' }" @loadingMore="onZPagingLoadMore">
			<template #top>
				<page-navbar>
					<template #navCenter>
						<view class="top" style="display: flex">
							<!-- 手动选择城市功能隐藏 -->
							<!-- <view class="topBox" @click="lhSelectCityFun"> -->
							<view class="topBox">
								<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" style="padding-bottom: 0;">
				<sortble :default-sorts="['uvSwiper', 'classModel', 'uvSwiperCard']">
					<template #uvSwiper>
						<uv-swiper :list="bannerList" :autoplay="true" circular :interval="5000" indicator
							indicator-mode="dot" height="120" radius="0"></uv-swiper>
					</template>

					<template #classModel>
						<view class="classModel" v-if="isTheTask">
							<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>
				<swiper class="tab-content-swiper" :current="currentTab" @change="handleTabChange" :duration="300"
					:style="{ height: swiperHeight + 'px' }">
					<!-- 关注列表 -->
					<swiper-item>
						<view class="follow-list">
							<block v-if="currentTab === 0 && 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"
											@imageLoad="onImageLoaded">
										</card>
									</template>
								</w-waterfall>
							</block>
							<view class="no-data"
								v-else-if="currentTab === 0 && !isLoadingFollow && followList.length === 0">
								<text>暂无关注数据</text>
							</view>
						</view>
					</swiper-item>

					<!-- 推荐列表 -->
					<swiper-item>
						<view class="recommend-list">
							<w-waterfall v-if="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" @imageLoad="onImageLoaded">
									</card>
								</template>
							</w-waterfall>
							<view class="no-data"
								v-if="currentTab === 1 && recommendList.length === 0 && !isLoadingRecommend">
								<text>暂无推荐数据</text>
							</view>
						</view>
					</swiper-item>

					<!-- 探索列表 -->
					<swiper-item>
						<view class="explore-list">
							<view class="hot-topics" v-if="currentTab === 2">
								<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 class="news-list">
								<w-waterfall v-if="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"
											@imageLoad="onImageLoaded"></card>
									</template>
								</w-waterfall>
							</view>
							<view class="no-data" v-if="currentTab === 2 && newsList.length === 0 && !isLoadingNews">
								<text>暂无新闻数据</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</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()" />
	</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 { mapState,mapGetters } from 'vuex'
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 {
			isFirstLoad: true, // 添加标记，用于判断是否是第一次加载
			swiperHeight: 300, // 默认swiper高度
			noMoreDataTimer: null, // 用于防抖处理的定时器
			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", 
			],
			cardList: [ ],
			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,
			},
			updateHeightTimer: null,
		};
	},

	computed: {
		...mapState('switchingModule', ['isTheTask']),
		...mapState('rightsManagement', ['teenageMode','iscontentRecommendation']),
		...mapGetters( 'rightsManagement', ['isContent']),
		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";
		// 计算swiper默认高度
		const systemInfo = uni.getSystemInfoSync();
		this.swiperHeight = systemInfo.windowHeight * 0.6; // 初始设置为窗口高度的60%

		// 获取天气信息
		this.getWeather();

		// 初始化数据，确保首次加载正确
		this.$nextTick(() => {
			// 根据当前标签加载数据
			this.initialLoad();
		});
	},
	onShow() { 
		console.log('teenageMode',this.teenageMode);
		console.log('iscontentRecommendation',this.iscontentRecommendation); 
		console.log('isContent',this.isContent);
		if ( !this.isContent ) {
			this.tabs = ["关注"];
			this.currentTab = 0; 
			this.queryList();
		} else {
			this.tabs = ["关注", "推荐", "探索"];
			// this.currentTab = 1;
			// 如果数据为空，加载初始数据
			if (this.recommendList.length === 0) {
				this.initialLoad();
			}
		}
		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: {
		swipeRight() {
			let index = this.currentTab
			index--
			if (index < 0) {
				index = this.tabs.length - 1
			}
			this.switchTab(index)
			console.log('向右滑动')
		},
		swipeLeft() {
			let index = this.currentTab
			index++
			if (index > this.tabs.length - 1) {
				index = 0
			}
			this.switchTab(index)
			console.log('向左滑动')
		},
		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.data.city) { 
						this.currentCity = res.data.data.city;
						this.weather = res.data.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;
			}
		},
		queryLists() {
			// 根据当前标签刷新数据
			switch (this.currentTab) {
				case 0:
					// 重置关注列表
					this.loadFollowList();
					break;
				case 1:
					// 重置推荐列表
					this.loadRecommendList();
					break;
				case 2:
					// 重置热点新闻和新闻列表
					// 加载热点新闻和新闻列表
					this.loadHotNews();
					this.loadNewsList();
					break;
			}
			// 第一次加载完成后，将标记设置为false
			this.isFirstLoad = false;
		},

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

			// 切换标签后更新swiper高度
			// 在切换标签时，先将高度设置为一个合适的默认值
			// 然后在数据加载完成后再动态调整
			const systemInfo = uni.getSystemInfoSync();
			this.swiperHeight = systemInfo.windowHeight * 0.6;
		},
		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];

			// offset设置为当前列表长度
			this.followOffset = currentList.length;
			console.log('请求关注列表数据，当前offset =', this.followOffset);

			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) {
						// 追加新数据到列表
						this.followList = [...currentList, ...res.data.list];
						console.log('关注列表加载成功，当前列表长度:', this.followList.length);
						this.hasMoreFollow = res.data.list.length >= 20;
					} else {
						this.hasMoreFollow = false;
						this.showNoMoreDataToast("没有更多关注内容了");
					}

					// 使用 nextTick 确保数据更新后再通知组件
					this.$nextTick(() => {
						if (this.$refs.paging) {
							// 第一个参数需要是数组，将当前列表传入
							this.$refs.paging.complete(this.followList);
						}
						// 数据加载完成后更新swiper高度
						if (this.currentTab === 0) {
							// 使用setTimeout确保数据渲染完成后再更新高度
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 300);
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 650);
						}
					});
				},
				complete: () => {
					this.isLoadingFollow = false;
				},
				fail: (e) => {
					console.log("请求关注列表失败:", e);
					this.isLoadingFollow = false;
					if (this.$refs.paging) {
						// 加载失败时提供空数组
						this.$refs.paging.complete([]);
					}
				},
			});
		},
		// 修改推荐列表加载方法
		loadRecommendList() {
			if (this.isLoadingRecommend) return;
			this.isLoadingRecommend = true;

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

			// offset设置为当前列表长度
			this.recommendOffset = currentList.length;
			console.log('请求推荐列表数据，当前offset =', this.recommendOffset);

			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) {
						// 追加新数据到列表
						this.recommendList = [...currentList, ...res.data.list];
						console.log('推荐列表加载成功，当前列表长度:', this.recommendList.length);
						this.hasMoreRecommend = res.data.list.length >= 20;
					} else {
						this.hasMoreRecommend = false;
						this.showNoMoreDataToast("没有更多推荐内容了");
					}

					this.$nextTick(() => {
						if (this.$refs.paging) {
							// 第一个参数需要是数组，将当前列表传入
							this.$refs.paging.complete(this.recommendList);
						}
						// 数据加载完成后更新swiper高度
						if (this.currentTab === 1) {
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 300);
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 650);
						}
					});
				},
				complete: () => {
					this.isLoadingRecommend = false;
				},
				fail: (e) => {
					console.log("请求推荐列表失败:", e);
					this.isLoadingRecommend = false;
					if (this.$refs.paging) {
						// 加载失败时提供空数组
						this.$refs.paging.complete([]);
					}
				},
			});
		},
		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];

			// offset设置为当前列表长度
			this.newsOffset = currentList.length;
			console.log('请求新闻列表数据，当前offset =', this.newsOffset);

			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 = [...currentList, ...res.data.list];
						console.log('新闻列表加载成功，当前列表长度:', this.newsList.length);

						this.hasMoreNews = res.data.list.length >= 20;
					} else {
						this.hasMoreNews = false;
						this.showNoMoreDataToast("没有更多新闻内容了");
					}

					this.$nextTick(() => {
						if (this.$refs.paging) {
							// 第一个参数需要是数组，将当前列表传入
							this.$refs.paging.complete(this.newsList);
						}
						// 数据加载完成后更新swiper高度
						if (this.currentTab === 2) {
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 300);
							setTimeout(() => {
								this.updateSwiperHeight();
							}, 650);
						}
					});
				},
				complete: () => {
					this.isLoadingNews = false;
				},
				fail: (e) => {
					console.log("请求新闻列表失败:", e);
					this.isLoadingNews = false;
					if (this.$refs.paging) {
						// 加载失败时提供空数组
						this.$refs.paging.complete([]);
					}
				},
			});
		},
		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",
			};
		},

		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('下拉刷新恢复');
		},
		// 处理z-paging的触底加载更多事件
		onZPagingLoadMore(pageNo, pageSize) {
			console.log('触底加载更多, 页码:', pageNo, '页大小:', pageSize);
			// 根据当前标签页加载更多数据
			switch (this.currentTab) {
				case 0:
					if (this.hasMoreFollow && !this.isLoadingFollow) {
						this.loadFollowList();
					} else if (!this.hasMoreFollow && !this.isLoadingFollow && this.followList.length > 0) {
						this.showNoMoreDataToast("没有更多关注内容了");
						// 通知组件加载完毕且没有更多数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete(this.followList);
							}
						});
					} else if (this.followList.length === 0 && !this.isLoadingFollow) {
						this.showNoMoreDataToast("暂无关注内容");
						// 通知组件加载完毕且没有数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete([]);
							}
						});
					}
					break;
				case 1:
					if (this.hasMoreRecommend && !this.isLoadingRecommend) {
						this.loadRecommendList();
					} else if (!this.hasMoreRecommend && !this.isLoadingRecommend && this.recommendList.length > 0) {
						this.showNoMoreDataToast("没有更多推荐内容了");
						// 通知组件加载完毕且没有更多数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete(this.recommendList);
							}
						});
					} else if (this.recommendList.length === 0 && !this.isLoadingRecommend) {
						this.showNoMoreDataToast("暂无推荐内容");
						// 通知组件加载完毕且没有数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete([]);
							}
						});
					}
					break;
				case 2:
					if (this.hasMoreNews && !this.isLoadingNews) {
						this.loadNewsList();
					} else if (!this.hasMoreNews && !this.isLoadingNews && this.newsList.length > 0) {
						this.showNoMoreDataToast("没有更多新闻内容了");
						// 通知组件加载完毕且没有更多数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete(this.newsList);
							}
						});
					} else if (this.newsList.length === 0 && !this.isLoadingNews) {
						this.showNoMoreDataToast("暂无新闻内容");
						// 通知组件加载完毕且没有数据
						this.$nextTick(() => {
							if (this.$refs.paging) {
								this.$refs.paging.complete([]);
							}
						});
					}
					break;
			}
		},
		// 处理swiper的change事件
		handleTabChange(e) {
			const current = e.detail.current;
			this.switchTab(current);
			// 在tab切换后，延迟更新swiper高度
			// 切换标签页后，需要给一些时间让内容渲染，然后再更新高度
			setTimeout(() => {
				this.updateSwiperHeight();
			}, 300);
		},
		// 更新swiper高度方法
		updateSwiperHeight() {
			const query = uni.createSelectorQuery().in(this);

			// 根据当前选中的标签页查询内容高度
			let selector = '.follow-list';
			if (this.currentTab === 1) {
				selector = '.recommend-list';
			} else if (this.currentTab === 2) {
				selector = '.explore-list';
			}

			query.select(selector).boundingClientRect(data => {
				if (data) {
					// 设置最小高度，防止内容过少时swiper太小
					let minHeight = uni.getSystemInfoSync().windowHeight * 0.2; // 最小高度为窗口高度的40%
					this.swiperHeight = Math.max(data.height, minHeight);
					console.log('更新swiper高度:', this.swiperHeight, 'selector:', selector);
				}
			}).exec();
		},
		// 首次进入页面初始化数据
		initialLoad() {
			console.log('初始化数据加载...');
			// 根据当前标签页加载初始数据
			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;
			}
		},
		// 显示没有更多数据的提示，带防抖处理
		showNoMoreDataToast(message) {
			return
			// 如果已经有一个定时器在运行，先清除它
			if (this.noMoreDataTimer) {
				clearTimeout(this.noMoreDataTimer);
				this.noMoreDataTimer = null;
			}

			// 设置新的定时器，防抖处理，1秒内不会重复显示提示
			this.noMoreDataTimer = setTimeout(() => {
				console.log(message);
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
				this.noMoreDataTimer = null;
			}, 1000);
		},
		onImageLoaded() {
			// 图片加载完成后重新计算高度
			// 使用延迟执行，确保所有图片都有时间加载完成
			if (this.updateHeightTimer) {
				clearTimeout(this.updateHeightTimer);
			}
			this.updateHeightTimer = setTimeout(() => {
				this.updateSwiperHeight();
			}, 300);
		},
	},
};
</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;
}

// swiper样式
.tab-content-swiper {
	width: 100%;
	transition: height 0.3s;
}

/* 确保内容可以正常显示 */
.swiper-item {
	height: auto;
	overflow: visible;
}

.follow-list,
.recommend-list,
.explore-list {
	min-height: 300px;
}
</style>
<style>
@import "@/style/qweather-icons.css";
</style>