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">
        <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>
        <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 { 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",
        "../../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,
      updateHeightTimer: null,
    };
  },

  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";
    // 计算swiper默认高度
    const systemInfo = uni.getSystemInfoSync();
    this.swiperHeight = systemInfo.windowHeight * 0.6; // 初始设置为窗口高度的60%

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

    // 初始化数据，确保首次加载正确
    this.$nextTick(() => {
      // 根据当前标签加载数据
      this.initialLoad();
    });
  },
  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;
      // 如果数据为空，加载初始数据
      if (this.recommendList.length === 0) {
        this.initialLoad();
      }
    }
  },
  // 修改触底加载方法
  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.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;
      }
    },
    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>