EpicSoul/pages/index/timeShopBank.vue

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

    <!-- 瀑布流组件 -->
    <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";

export default {
  name: "TimeShopBank",
  components: {
    WaterfallLayout,
    headerVue,
    CustomTabBar,
  },
  data() {
    return {
      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-1494790108755-2616b612b786?auto=format&fit=crop&w=100",
        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?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();
  },
  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.showToast({
        title: `点击了: ${item.title}`,
        icon: "none",
        duration: 2000,
      });
    },

    // 处理项目添加
    handleItemAdded(item) {
      console.log("项目已添加:", item.title);
    },

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

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

      uni.showToast({
        title: "已加载10篇新文章",
        icon: "success",
        duration: 1500,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f8f8f8;
  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;
}

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