EpicSoul/pages/index/timeShopBank.vue

<template>
  <view class="page-container">
    <!-- 导航栏组件 -->
    <headerVue fixed></headerVue>

    <!-- 灵动岛组件 -->
    <DynamicIsland :page-id="'timeShopBank_page'" :style-type="'timeShop'" />

    <!-- Tab切换组件 -->
    <view class="tab-container">
      <view class="tab-wrapper">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          <text class="tab-text">{{ tab.name }}</text>
          <view v-if="currentTab === index" class="tab-indicator"></view>
        </view>
      </view>
    </view>

    <!-- 发布按钮 -->
    <view class="fab-container">
      <button class="fab-btn" @click="goToPublish">
        <text class="fab-icon">+</text>
      </button>
    </view>

    <!-- 瀑布流组件 -->
    <WaterfallLayout
      :items="waterfallItems"
      :column-count="2"
      :column-gap="16"
      :item-gap="16"
      @item-click="handleItemClick"
      style="margin-top: 20rpx"
    />

    <!-- 控制按钮 -->
    <!-- <view class="controls">
      <button @click="addRandomItem" class="control-btn primary">
        添加项目
      </button>
      <button @click="clearAllItems" class="control-btn danger">清空</button>
    </view> -->

    <!-- 底部占位区域，防止内容被TabBar遮挡 -->
    <view class="tab-bar-placeholder"></view>

    <!-- 底部TabBar组件 -->
    <CustomTabBar :currentTab="2" />
  </view>
</template>

<script>
import WaterfallLayout from "@/components/WaterfallLayout.vue";
import headerVue from "@/components/header.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import DynamicIsland from "@/components/DynamicIsland.vue";

export default {
  name: "TimeShopBank",
  components: {
    WaterfallLayout,
    headerVue,
    CustomTabBar,
    DynamicIsland,
  },
  data() {
    return {
      currentTab: 1, // 默认选中"笔记"
      tabs: [
        { name: "划线", id: "underline" },
        { name: "笔记", id: "notes" },
        { name: "关注", id: "follow" },
        { name: "推荐", id: "recommend" },
      ],
      waterfallItems: [],
      autoAddEnabled: false,
      // 图片URL数组
      images: [
        "https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=800",
        "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=800",
        "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800",
        "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800",
        "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=800",
      ],
      // 用户头像数组
      avatars: [
        "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100",
        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100",
        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100",
        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100",
        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100",
      ],
      // 用户名数组
      usernames: [
        "杨璐摄影",
        "旅行者小王",
        "风景猎人",
        "自然探索者",
        "摄影师阿明",
      ],
      // 不同长度的标题
      shortTitles: ["城市风光", "自然美景", "湖光山色", "森林小径", "日出东方"],
      mediumTitles: [
        "繁华都市的夜景与灯光",
        "壮丽的山脉与蓝天白云",
        "宁静的湖泊与秋日树木",
        "蜿蜒的小路穿过金色森林",
        "清晨第一缕阳光照亮大地",
      ],
      longTitles: [
        "现代都市天际线在黄昏时分展现出迷人的轮廓，灯火辉煌的建筑倒映在水面上",
        "雄伟的山脉在云雾缭绕中若隐若现，展现出大自然的壮丽与神秘",
        "平静如镜的湖面倒映着五彩斑斓的秋叶，构成一幅完美的自然画卷",
        "阳光透过茂密的树叶，在铺满落叶的林间小路上投下斑驳的光影",
        "清晨的太阳从地平线缓缓升起，金色的光芒洒满整个大地，带来新的一天",
      ],
      descriptions: [
        "探索城市中隐藏的美丽角落，发现不为人知的风景",
        "大自然的鬼斧神工创造了无数令人惊叹的景观",
        "水与山的完美结合，创造出宁静致远的意境",
        "漫步在森林中，感受大自然的清新与宁静",
        "日出时分的美景总能带给人们希望和力量",
      ],
      tagsList: [
        ["城市", "摄影", "旅行"],
        ["自然", "山脉", "探险"],
        ["湖泊", "秋天", "风景"],
        ["森林", "小路", "自然"],
        ["日出", "早晨", "美景"],
      ],
    };
  },
  onLoad() {
    this.initializeData();
  },

  // 页面滚动到底部时触发
  onReachBottom() {
    this.loadMoreItems();
  },

  // 页面滚动时触发 - 用于灵动岛样式切换
  onPageScroll(e) {
    // 只触发带页面ID的事件，避免不同页面间的状态冲突
    uni.$emit("pageScroll_timeShopBank_page", e.scrollTop);
  },
  methods: {
    // 获取随机数据项
    getRandomItem() {
      const titleType =
        Math.random() > 0.5
          ? Math.random() > 0.5
            ? this.longTitles
            : this.mediumTitles
          : this.shortTitles;

      return {
        id: Date.now() + Math.floor(Math.random() * 1000),
        title: titleType[Math.floor(Math.random() * titleType.length)],
        image: this.images[Math.floor(Math.random() * this.images.length)],
        // description:
        //   this.descriptions[
        //     Math.floor(Math.random() * this.descriptions.length)
        //   ],
        // tags: this.tagsList[Math.floor(Math.random() * this.tagsList.length)],
        // 新增用户信息
        user: {
          avatar: this.avatars[Math.floor(Math.random() * this.avatars.length)],
          name: this.usernames[
            Math.floor(Math.random() * this.usernames.length)
          ],
        },
        likes: Math.floor(Math.random() * 999) + 1, // 1-999的随机点赞数
      };
    },

    // 初始化数据
    initializeData() {
      const initialItems = [];
      for (let i = 0; i < 20; i++) {
        initialItems.push(this.getRandomItem());
      }
      this.waterfallItems = initialItems;
    },

    // 添加随机项目
    addRandomItem() {
      const newItem = this.getRandomItem();
      this.waterfallItems.push(newItem);
    },

    // 清空所有项目
    clearAllItems() {
      uni.showModal({
        title: "确认清空",
        content: "确定要清空所有项目吗？",
        success: (res) => {
          if (res.confirm) {
            this.waterfallItems = [];
          }
        },
      });
    },

    // 处理项目点击
    handleItemClick(item) {
      // 跳转到笔记详情页面
      uni.navigateTo({
        url: `/pages/notes/detail`,
      });
    },

    // 跳转到发布页面
    goToPublish() {
      uni.navigateTo({
        url: "/pages/notes/publish",
      });
    },

    // 处理项目添加
    handleItemAdded(item) {},

    // 处理自动添加请求
    handleAutoAddRequest() {
      this.addRandomItem();
    },

    // 加载更多项目（到达底部时调用）
    loadMoreItems() {
      const newItems = [];
      for (let i = 0; i < 10; i++) {
        newItems.push(this.getRandomItem());
      }
      this.waterfallItems.push(...newItems);
    },

    // Tab切换方法
    switchTab(index) {
      this.currentTab = index;
      // 根据不同tab加载不同内容
      this.loadTabContent(this.tabs[index].id);
    },

    // 加载tab对应的内容
    loadTabContent(tabId) {
      // 这里可以根据不同的tabId加载不同的数据
      // 重新初始化数据
      this.initializeData();
    },
  },
};
</script>
<style>
page {
  background-color: white;
}
</style>
<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: white;
  color: #333;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  justify-content: center;
  margin: 40rpx 0;
  padding: 0 20rpx;
}

.control-btn {
  padding: 24rpx 48rpx;
  border-radius: 48rpx;
  font-size: 28rpx;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  color: #333;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.control-btn.primary {
  background: #ff4757;
  color: white;
}

.control-btn.danger {
  background: #ff6b6b;
  color: white;
}

.control-btn:active {
  transform: scale(0.95);
}

.tab-bar-placeholder {
  height: 120rpx;
}

/* Tab切换样式 */
.tab-container {
  background: #ffffff;
  padding: 0 32rpx;
  margin-top: 40rpx;
}

.tab-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 88rpx;
  position: relative;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.tab-text {
  font-size: 32rpx;
  color: #999999;
  font-weight: 400;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #333333;
  font-weight: 600;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 4rpx;
  background: #33fefe;
  border-radius: 3rpx;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 80rpx;
    opacity: 1;
  }
}

/* 悬浮发布按钮 */
.fab-container {
  position: fixed;
  bottom: 200rpx;
  right: 40rpx;
  z-index: 999;
}

.fab-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: linear-gradient(135deg, #ff4757, #ff6b7a);
  color: #fff;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
  }

  .fab-icon {
    font-size: 48rpx;
    font-weight: 300;
    line-height: 1;
  }
}

/* 自定义样式已移至WaterfallLayout组件内部 */
</style>