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 ref="paging"  v-model="dataList" @query="queryList" :style="{ height: windowHeight - 80 + 'px' }"
			:show-scrollbar="false">
			<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">
							<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 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)">
						{{ tab }}
						<view class="indicator-triangle">
						</view>
					</view>
				</view>

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

					</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>
									<!-- <text class="topic-index">{{ pageIndex * 5 + index + 1 }}</text>
									<view class="topic-content">
										<view class="topic-title-row">
											<text class="topic-title">{{ topic.title }}</text>
											<text v-if="topic.isHot" class="hot-tag">HOT</text>
										</view>
										<text class="topic-participants">{{ topic.num_like }}人正在热议</text>
									</view> -->
								</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>

				<!-- 根据当前标签显示不同样式的列表 -->
				<!-- 关注列表 - 类似my.vue -->
				<view v-show="currentTab === 0" class="follow-list">
					<block v-if="followList.length > 0">
						<!-- 		<view class="works-list">
							<view class="work-item" v-for="(item, index) in followList" :key="index"
								@click="goWork(item)">
								<image class="work-image" :src="item.images || item.img_url" mode="aspectFill"></image>
								<view class="work-title">{{
                  item.title || "作品" + index
                }}</view>
							</view>
						</view> -->
						<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>

				<!-- 推荐列表 - 瀑布流样式 -->
				<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 v-show="currentTab === 2 && newsList.length > 0" class="news-list">
					<!-- <view class="news-grid">
						<view class="news-item" v-for="(item, index) in newsList" :key="index"
							@click="goToArticleDetail(item.id)">
							<image class="news-image" :src="item.img_url || item.images" mode="aspectFill"></image>
							<view class="news-title">{{ item.title || "新闻标题" }}</view>
							<view class="news-footer">
								<view class="news-author">{{ item.author || "作者" }}</view>
								<view class="news-views">
									<image src="/static/icon/icon-4.png" class="view-icon"></image>
									<text>{{ item.num_view || "0" }}</text>
								</view>
							</view>
						</view>
					</view> -->
					<w-waterfall v-show="currentTab === 2 && newsList.length > 0" :data="newsList">
						<template v-slot:content="{ item, width }">
							<card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }"
								textColor="#000"></card>
						</template>
					</w-waterfall>
				</view>

				<view class="no-data" v-if="currentTab === 1 && recommendList.length === 0 && !isLoadingRecommend">
					<text>暂无推荐数据</text>
				</view>

				<view class="no-data" v-if="currentTab === 2 && newsList.length === 0 && !isLoadingNews">
					<text>暂无新闻数据</text>
				</view>
			</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 { getStorage, setStorage, removeStorage } from '@/common/util.js'
// import noviceGuidance from "@/components/novice-guidance/index.vue";
export default {
	components: {
		sortble,
		tabbarVue,
		pageNavbar,
		wWaterfall,
		lhSelectCity,
		// 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()

	},
	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
		}

	},
	// 上拉加载更多
	onReachBottom() {
		this.loadMoreData();
	},
	// 下拉刷新数据
	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;
			}
		},
		async init() {
			const {
				data
			} = await this.getData();
			this.list.push.apply(this.list, data);
		},
		// 模拟的后端数据
		getData() {
			return new Promise((resolve) => {
				const imgs = [{
					url: "https://e.zhichao.art/AI_images/a_1112_10.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1112_108.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1112_113.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1112_13.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1112_137.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1112_141.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__562.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__568.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__569.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__570.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__571.png",
				},
				{
					url: "https://e.zhichao.art/AI_images/a_1114__575.png",
				},
				];
				let list = [];
				const doFn = (i) => {
					const randomIndex = Math.floor(Math.random() * 10);
					return {
						allowEdit: i == 0,
						image: imgs[randomIndex].url,
						w: imgs[randomIndex].width,
						h: imgs[randomIndex].height,
						title: i % 2 == 0 ? `玛丽` : `凌音`,
						desc: i % 2 == 0 ?
							`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`,
					};
				};
				// 模拟异步
				setTimeout(() => {
					for (let i = 0; i < 20; i++) {
						list.push(doFn(i));
					}
					resolve({
						data: list,
					});
				}, 200);
			});
		},
		switchTab(index) {
			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;
			}

			// 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();
					}
					break;
				case 1:
					if (!this.recommendList.length) {
						this.loadRecommendList();
					}
					break;
				case 2:
					if (!this.hotNewsList.length) {
						this.loadHotNews();
					}
					if (!this.newsList.length) {
						this.loadNewsList();
					}
					break;
			}
		},
		loadFollowList() {
			if (this.isLoadingFollow) return;
			this.isLoadingFollow = true;

			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 = [...this.followList, ...res.data.list];
						this.followOffset += res.data.list.length;

						if (res.data.list.length < 20) {
							this.hasMoreFollow = false;
						}
					} else {
						// 如果列表为空，确保标记没有更多数据
						this.hasMoreFollow = false;
					}

					// 无论是否有数据，都需要通知z-paging组件完成刷新
					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;

			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 = [...this.recommendList, ...res.data.list];
						this.recommendOffset += res.data.list.length;

						if (res.data.list.length < 20) {
							this.hasMoreRecommend = false;
						}
					} else {
						this.hasMoreRecommend = false;
					}

					// 无论是否有数据，都需要通知z-paging组件完成刷新
					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;

						// 如果有热点新闻数据，更新热搜资讯
						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, // 偶数索引的设为热点
								};
							});
						}
					}
				},
				complete: () => {
					this.isLoadingExplore = false;
				},
				fail: (e) => {
					console.log("请求热点新闻失败:", e);
					this.isLoadingExplore = false;
				},
			});
		},
		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;
			// 		}

			// 		// 无论是否有数据，都需要通知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', {
				uuid: getApp().globalData.uuid,
				skey: getApp().globalData.skey,
				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;
						}
					} else {
						this.hasMoreNews = false;
					}

					// 无论是否有数据，都需要通知z-paging组件完成刷新
					if (this.$refs.paging) {
						this.$refs.paging.complete(this.newsList);
					}
				}).catch(
					async e => {
						await 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;
		},

		formatItem(item) {

			this.downloadAndProcessImage(item.images)
				.then((color) => {
					console.log(`平均颜色: R=${color.r}, G=${color.g}, B=${color.b}`);
				})
				.catch((error) => {
					console.error("获取图像失败:", error);
				});
			// 处理接口返回的数据，使其适配card组件
			return {
				id: item.id,
				allowEdit: false,
				nickname: item.nickname,
				avator: item.avator,
				num_like: item.num_like,
				num_view: item.num_view,
				image: item.images || item.img_url || item.image, // 优先使用images字段
				w: item.width,
				h: item.height,
				title: item.title || "",
				desc: item.desc || "",
				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,
				});
			});
		},
	},
};
</script>

<style lang="scss">
@import "index.scss";
</style>
<style>
@import "@/style/qweather-icons.css";
</style>