MoeNovaClient/pages/crowdFunding/crowdFunding.vue

<template>
  <view class="crowd-funding-page">
    <!-- 头部导航 -->
    <view class="navbar" ref="header">
      <view style="display: flex; align-items: center">
        <view
          class="nav-left"
          @click="goBack"
        >
          <text class="fa fa-angle-left back-icon"></text>
        </view>
        <view class="nav-title">众筹</view>
      </view>

      <!-- 搜索框 -->
      <view
        class="search-bar-container"
        @click="goPages('/pages/crowdFunding/Search')"
      >
        <view class="search-input-wrapper">
          <image
            src="/static/crowdFunding/search.png"
            class="search-icon"
          ></image>
          <input
            type="text"
            placeholder="搜索你感兴趣的内容"
            class="search-input"
            disabled
          />
        </view>
      </view>

      <view class="nav-right" @click="goPages('/pages/crowdFunding/favorites')">
        <image
          src="/static/crowdFunding/collect-active1.png"
          class="action-icon"
        ></image>
      </view>
    </view>

    <!-- Tab导航 -->
    <view class="tab-box" ref="tabbar">
      <scroll-view
        scroll-x
        class="tabs-scroll-view"
        :show-scrollbar="false"
        :scroll-into-view="'tab-' + (currentTab - 1)"
        scroll-with-animation
      >
        <view class="tabs-wrapper">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :id="'tab-' + index"
            :class="['tab-item', currentTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            <text>{{ tab.name }}</text>
          </view>
          <!-- 右侧占位空白 -->
          <view class="tab-placeholder"></view>
        </view>
      </scroll-view>
      <view class="mask"></view>
    </view>
    <!-- 内容区域：swiper实现左右滑动切换tab，每个tab一个scroll-view，支持下拉刷新 -->
    <swiper
      class="tab-swiper"
      :current="currentTab"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px', width: '100vw' }"
    >
      <swiper-item
        v-for="(tab, tabIndex) in tabs"
        :key="tabIndex"
      >
        <scroll-view
          scroll-y
          class="content-scroll"
          :style="{ height: swiperHeight + 'px' }"
          :refresher-enabled="true"
          :refresher-triggered="isRefreshing[tabIndex]"
          refresher-background="#f2f6f2"
          @refresherrefresh="onRefresh(tabIndex)"
          @scroll="(e) => onScroll(e, tabIndex)"
          :scroll-top="shouldRestoreScroll[tabIndex] ? (scrollTop[tabIndex] || 0) : undefined"
          @scrolltolower="onScrollToLower(tabIndex)"
        >
          <view class="items-grid">
            <CrowdFundingItem
              v-for="item in tabData[tabIndex]"
              :key="item.id"
              :item="item"
              @click="goToDetail(item.id)"
            />
          </view>
          <view v-if="loadingMore[tabIndex]" class="loading-more">加载中...</view>
          <view v-else-if="!hasMore[tabIndex]" class="no-more">没有更多了</view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import CrowdFundingItem from "./components/CrowdFundingItem/CrowdFundingItem.vue";
export default {
  components: { CrowdFundingItem },
  data() {
    return {
      tabs: [
        { name: "全部", icon: "" },
        { name: "🌟创意", icon: "/static/icon/creative-star.png" },
        { name: "🧸潮玩", icon: "/static/icon/toy-bear.png" },
        { name: "📖出版", icon: "" },
        { name: "🃏桌游", icon: "" },
        { name: "🃏桌游", icon: "" },
      ],
      currentTab: 0,
      tabData: [[], [], [], [], [], []],
      isRefreshing: [false, false, false, false, false, false],
      scrollTop: {},
      shouldRestoreScroll: [true, true, true, true, true, true],
      swiperHeight: 600,
      page: [1, 1, 1, 1, 1, 1],
      hasMore: [true, true, true, true, true, true],
      loadingMore: [false, false, false, false, false, false],
    };
  },
  mounted() {
    // 动态获取头部和tab栏高度
    const sys = uni.getSystemInfoSync();
    const windowHeight = sys.windowHeight;
    this.$nextTick(() => {
      uni.createSelectorQuery()
        .in(this)
        .select('.navbar')
        .boundingClientRect(rect1 => {
          uni.createSelectorQuery()
            .in(this)
            .select('.tab-box')
            .boundingClientRect(rect2 => {
              const headerHeight = rect1 ? rect1.height : 0;
              const tabbarHeight = rect2 ? rect2.height : 0;
              this.swiperHeight = windowHeight - headerHeight - tabbarHeight;
            })
            .exec();
        })
        .exec();
    });
    // 初始化加载第一个tab数据
    this.fetchData(0);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goPages(url) {
      uni.navigateTo({
        url,
      });
    },
    switchTab(index) {
      this.currentTab = index;
      this.$set(this.shouldRestoreScroll, index, true);
      if (!this.tabData[index] || this.tabData[index].length === 0) {
        this.fetchData(index);
      }
    },
    onSwiperChange(e) {
      this.switchTab(e.detail.current);
    },
    async onRefresh(tabIndex) {
      this.$set(this.isRefreshing, tabIndex, true);
      await this.fetchData(tabIndex, true);
      this.$set(this.isRefreshing, tabIndex, false);
    },
    onScroll(e, tabIndex) {
      this.$set(this.scrollTop, tabIndex, e.detail.scrollTop);
      if (this.shouldRestoreScroll[tabIndex]) {
        this.$set(this.shouldRestoreScroll, tabIndex, false);
      }
    },
    async onScrollToLower(tabIndex) {
      if (!this.hasMore[tabIndex] || this.loadingMore[tabIndex]) return;
      this.$set(this.loadingMore, tabIndex, true);
      await this.fetchData(tabIndex, false, true);
      this.$set(this.loadingMore, tabIndex, false);
    },
    async fetchData(tabIndex, isRefresh = false, isLoadMore = false) {
      if (isRefresh) {
        this.page[tabIndex] = 1;
        this.hasMore[tabIndex] = true;
      }
      if (isLoadMore) {
        this.page[tabIndex]++;
      } else {
        this.page[tabIndex] = 1;
      }
      return new Promise((resolve) => {
        setTimeout(() => {
          const now = Date.now();
          const page = this.page[tabIndex];
          let demo = [];
          if (page <= 3) {
            for (let i = 0; i < 4; i++) {
              demo.push({
                id: now + page * 100 + i,
                imageUrl: `/static/crowdFunding/top-img.png`,
                title: `糖指数100%12分BJD可动人偶盲盒_${page}_${i}`,
                raisedAmount: (769.8 + Math.floor(Math.random() * 100)).toString(),
                supporters: 3788 + Math.floor(Math.random() * 100),
              });
            }
          }
          if (isLoadMore) {
            if (demo.length) {
              this.$set(this.tabData, tabIndex, [...this.tabData[tabIndex], ...demo]);
            }
          } else {
            this.$set(this.tabData, tabIndex, demo);
          }
          this.$set(this.hasMore, tabIndex, page < 3);
          resolve();
        }, 1000);
      });
    },
    goToDetail(id) {
      // 跳转详情页
      uni.navigateTo({ url: '/pages/crowdFunding/crowdfundingDetails?id=' + id });
    },
  }, 
};
</script>

<style lang="scss" scoped>
.crowd-funding-page {
  display: flex;
  flex-direction: column;
  background: #f2f6f2;
  height: 100vh; // 移除，避免撑死内容
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  //   height: 96rpx;
  background: #fff; 
  padding: 46rpx 20rpx 26rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 46rpx);
  box-sizing: content-box;
  .nav-left {
    width: 36rpx;
    display: flex;
    align-items: center;
    .back-icon {
      font-size: 50rpx;
    }
  }
  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #222;
    letter-spacing: 2rpx;
  }

  .search-bar-container {
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    width: 450rpx;
    height: 64rpx;
    background: #f2f6f2;
    border-radius: 36rpx;
    ::v-deep.input-placeholder {
      color: #999;
    }
    .search-input-wrapper {
      display: flex;
      align-items: center;
      width: 100%;

      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .search-input {
        font-size: 28rpx;
        color: #999;
        line-height: 64rpx;
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
      }
    }
  }
  .nav-right {
    .action-icon {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }
  }
}
.tab-box {
  width: 100vw;
  height: auto;
  position: relative;
  left: 0;
  top: 0;
  border-bottom: solid 5rpx #F2F6F2;
  .mask {
    position: absolute;
    right: 0;
    top: 0;
    width: 200rpx;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    pointer-events: none;
  }
}
.tabs-scroll-view {
  width: 100%;
  background: #fff;
  padding-bottom: 22rpx;

  .tabs-wrapper {
    display: flex;
    align-items: center;
    padding-left: 12rpx;
    padding-right: 200rpx;
    box-sizing: content-box;
  }
}
.tab-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  padding: 8rpx 28rpx;
  margin-right: 8rpx;
  border-radius: 32rpx;
  font-weight: 500;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  text {
    white-space: nowrap;
  }
  text-wrap: nowrap;
  .tab-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
  &.active {
    font-weight: bold;
    color: #fff;
    background: #222;
    box-shadow: 0 2rpx 8rpx rgba(34, 34, 34, 0.08);
    .tab-icon {
      filter: brightness(1.5) saturate(2);
    }
  }
}

.tab-swiper {
  width: 100vw;
  background: #f2f6f2;
}
.swiper-item {
  background: #f2f6f2;
}
.content-scroll {
  overflow-y: auto;
  padding-bottom: 24rpx;
  background: #f2f6f2;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx 12rpx;
  padding: 16rpx 12rpx 0 12rpx;
  background: #f2f6f2;
}

.tab-placeholder {
  width: 200rpx;
  flex-shrink: 0;
  height: 1px; // 不影响高度
}

.loading-more { text-align: center; color: #999; font-size: 26rpx; padding: 24rpx 0; }
.no-more { text-align: center; color: #ccc; font-size: 24rpx; padding: 20rpx 0; }
</style>