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>
		<image src="@/static/image/white-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 80 + 'px'}"
			:show-scrollbar="false">
			<template #top>
				<page-navbar>
					<template #navLeft>
						<view style="display:flex;flex-direction: row;justify-content: center; align-items: center;">
							<image src="@/static/icon/loacltion.png" style="width: 30rpx; height: 38rpx;"></image>
							<text style="margin-left:10rpx;font-size: 28rpx;">
								杭州
							</text>
							<image src="@/static/icon/down.png" style="width: 30rpx; height: 16rpx;"></image>
						</view>
					</template>
					<template #navCenter>
						<view style="width: 520rpx;height: 50rpx;margin-left:126rpx;">
							<uv-input placeholder="“潮玩大作战” 派对季重磅开启!" border="none"
								:custom-style="{background:'#8BDB67',paddingLeft:'20rpx'}" shape="circle">
								<template #prefix>
									<image src="@/static/icon/fiery.png" style="width: 14px;height: 18px;"></image>
								</template>
								<template #suffix>
									<view style="width: 77rpx;height: 42rpx;
										background-color: #57A335;border-radius: 20rpx;
										margin-right: 5rpx;display: flex;align-items: center;justify-content: center;">
										<image src="@/static/icon/search.png" style="width: 32rpx;height: 32rpx;">
										</image>
									</view>
								</template>
							</uv-input>
						</view>
					</template>
				</page-navbar>
			</template>
			<z-paging-cell>
				<sortble :default-sorts="['uvSwiper','classModel','uvSwiperCard']">
					<template #uvSwiper>
						<uv-swiper :list="bannerList" :autoplay="true" circular :interval="5000" indicator
							indicator-mode="dot" height='380' radius='0'></uv-swiper>
					</template>
					<template #classModel>
						<view class="classModel">
							<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>
					<!-- <template #uvSwiperCard>
						<view style="background: #fff;padding: 30rpx 0;">
							<image src="/static/zhHans-text-icon/text-1.png" ref="classModel4"
								style="width: 432rpx;height: 34rpx;margin-left: 28rpx;margin-bottom: 43rpx"></image>
							<swiper-card :width="257" :height="290">
								<template v-for="(item,index) in cardList" :slot="`card-${index}`">
									<view style="position: relative;align-items: center;"
										:style="{width:`${257}rpx`,height:`${290}rpx`}">
										<image style="position: absolute;top:15px;" :src="item.img"
											:style="{width:`${257}rpx`,height:`${290}rpx`}">
										</image>
										<image style="position: absolute;" :src="item.bgimg"
											:style="{width:`${257}rpx`,height:`${290}rpx`}"></image>
									</view>
								</template>
							</swiper-card>
						</view>
					</template> -->
				</sortble>
			</z-paging-cell>
			<z-paging-cell>
				<view class="tab-nav">
					<view v-for="(tab, index) in tabs" :key="index"
						:class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
						{{ tab }}
					</view>
				</view>

				<view v-if="currentTab === 2" class="hot-topics">
					<view class="hot-topics-header">
						<text class="hot-topics-title">热搜资讯！</text>
					</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)">
									<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>
					</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>
				</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/icon/icon_add_black.png" class="float-btn-icon"></image>
		</view>

		<novice-guidance :step="step"></novice-guidance>
	</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 noviceGuidance from "@/components/novice-guidance/index.vue";
	export default {
		components: {
			sortble,
			tabbarVue,
			pageNavbar,
			wWaterfall,
			// 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: [
					'https://e.zhichao.art/AI_images/a_1112_10.png',
					'https://e.zhichao.art/AI_images/a_1112_108.png',
					'https://e.zhichao.art/AI_images/a_1112_113.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: [],
			}
		},
		computed: {
			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 += 5) {
					pages.push(this.hotTopics.slice(i, i + 5));
				}
				return pages;
			}
		},
		onLoad() {
			let that = this;
			// 不在onLoad中直接加载数据，避免与z-paging组件重复请求
			// 让z-paging组件通过queryList方法控制数据加载
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadMoreData();
		},
		// 下拉刷新数据
		methods: {
			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);
						}
					}
				});
			},
			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) {
				// 处理接口返回的数据，使其适配card组件
				return {
					id: item.id,
					allowEdit: false,
					author: item.author,
					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 || ''
				}
			},
			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'
					});
				})
			},
			goPage(page) {
				uni.$emit('check_login', () => {
					uni.navigateTo({
						url: page
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	@import 'index.scss';
</style>