EpicSoul/pages/index/index.vue

<template>
  <view class="bg">
    <headerVue fixed></headerVue>

    <!-- 灵动岛组件 -->
    <!-- 灵动岛组件 - 自包含，无需传递参数 -->
    <DynamicIsland
      ref="dynamicIsland"
      @toggle="handleIslandToggle"
      @action="handleIslandAction"
    />

    <view class="content" @click="handleContentClick">
      <!-- 权益商品区域 -->
      <ProductSection
        title="权益商品"
        :productList="productList"
        moreUrl="/pages/index/sensoryStore"
        detailUrlPrefix="/subPackages/techan/detail"
        @more-click="goToMore"
        @product-click="goToDetail"
        @like-toggle="handleLikeToggle"
      />
      <ProductSection
	  titleBgColor="#92FF8F"
	  aiTagTextColor="#08FB05"
	  
	  aiTagBorderColor="#6EAA3D"
        title="有感商品"
        :productList="productListFeeling"
        moreUrl="/pages/index/sensoryStore"
        detailUrlPrefix="/subPackages/techan/detail"
        @more-click="goToMore"
        @product-click="goToDetail"
        @like-toggle="handleLikeToggle"
		isFeel
      />
      <view class="tab-bar-placeholder"></view>
    </view>

    <CustomTabBar :currentTab="0" />
    <MusicControl />
  </view>
</template>

<script>
import MusicControl from "@/components/MusicControl.vue";
import headerVue from "@/components/header.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import DynamicIsland from "@/components/DynamicIsland.vue";
import ProductSection from "@/components/ProductSection.vue";
export default {
  components: {
    CustomTabBar,
    headerVue,
    MusicControl,
    DynamicIsland,
    ProductSection,
  },
  computed: {
    // 其他计算属性可以在这里添加
  },
  data() {
    return {
      topBanner: [],
      productList: [
        {
          id: 1,
          image:
            "https://epic.js-dyyj.com/uploads/20250728/58aed304917c9d60761f833c4f8dceb8.png",
          avatar:
            "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
          aiName: "文徵明",
          title: "世界花园 | 研学之旅",
          price: "588.00",
          isLiked: true,
        },
        {
          id: 2,
          image:
            "https://epic.js-dyyj.com/uploads/20250728/00e8704b23a0c9fd57023527146211b9.png",
          avatar:
            "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
          aiName: "苏青壳",
          title: "生命的扶持 | 风景之旅",
          price: "398.00",
          isLiked: false,
        },
      ],
	  productListFeeling: [
	    {
	      id: 1,
	      image:
	        "https://epic.js-dyyj.com/uploads/20250728/58aed304917c9d60761f833c4f8dceb8.png",
	      avatar:
	        "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
	      aiName: "文徵明",
	      title: "OUT OF SPACE 东方线香",
	      price: "588.00",
	      isLiked: true,
		  isShop:true
	    },
	    {
	      id: 2,
	      image:
	        "https://epic.js-dyyj.com/uploads/20250728/00e8704b23a0c9fd57023527146211b9.png",
	      avatar:
	        "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
	      aiName: "苏青壳",
	      title: "AI-Agent智能玩具",
	      price: "398.00",
	      isLiked: false,
	    },
	  ],
    };
  },
  onLoad() {},
  onReady() {
    this.getList();
  },
  onShow() {
    this.browse_record({ type: "page", title: "首页" });
  },
  onPageScroll(e) {
    // 通过全局事件通知灵动岛组件
    uni.$emit("pageScroll", e.scrollTop);
  },
  onReachBottom() {},
  methods: {
    gotoUrlNew(item, index) {
      if (index == 0) {
        uni.switchTab({
          url: "/pages/index/readingBody",
        });
      } else if (index == 1) {
        uni.switchTab({
          url: "/pages/index/intelligentAgent",
        });
      }
    },
    viewDetail(item) {
      if (item.url) {
        uni.navigateTo({
          url:
            "/subPackages/webPage/webPage?url=" + encodeURIComponent(item.url),
        });
        return;
      }
      uni.navigateTo({
        url: "/subPackages/letter/detail?id=" + item.id,
      });
    },
    getList() {
      // 大轮播
      this.Post(
        {
          type_id: 3,
          position: 17,
        },
        "/api/adv/getAdv"
      ).then((res) => {
        if (res.data) {
          this.topBanner = res.data;
        }
      });
    },
    gotoVideo(item) {
      uni.navigateTo({
        url:
          "/subPackages/video/video?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
    // 跳转到更多页面
    goToMore() {
      uni.navigateTo({
        url: "/pages/index/sensoryStore",
      });
    },
    // 跳转到商品详情
    goToDetail(item) {
      uni.navigateTo({
        url: "/subPackages/techan/detail?id=" + item.id,
      });
    },
    // 处理收藏状态切换
    handleLikeToggle({ item, index }) {
      this.productList[index] = item;
    },

    // 处理灵动岛点击切换
    handleIslandToggle(isExpanded) {
      console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式");
    },

    // 处理灵动岛操作按钮
    handleIslandAction() {
      uni.showToast({
        title: "执行操作",
        icon: "none",
      });
      console.log("执行操作");
    },

    // 处理内容区域点击
    handleContentClick() {
      // 点击内容区域时收缩灵动岛
      if (this.$refs.dynamicIsland) {
        this.$refs.dynamicIsland.collapseIsland();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}
/* 页面样式 */

.content {
  height: calc(100vh - 123rpx);
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
}

.tab-bar-placeholder {
  height: 143rpx;
  width: 100%;
}
</style>