EpicSoul/pages/index/index.vue

<template>
  <view class="bg">
    <headerVue
      @change="changeAddress"
      :address="addressInfo"
      fixed
      isLocation
	  :isBack="false"
    ></headerVue>

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

    <view class="content" @click="handleContentClick">
		<Book></Book>
      <!-- 权益商品区域 -->
      <ProductSection
        v-show="productList.length"
        title="EPIC SOUL文旅权益商品"
        :productList="productList"
        moreUrl="/subPackages/equityGoods/list"
        detailUrlPrefix="/subPackages/equityGoods/detail"
        @like-toggle="handleLikeToggle"
        color="#D2FFDE"
		:type="1"
      />

      <ProductSection
        titleBgColor="#92FF8F"
        aiTagTextColor="#08FB05"
        aiTagBorderColor="#6EAA3D"
        title="EPIC SOUL文化有感商品"
        :productList="productListFeeling"
        moreUrl="/pages/index/sensoryStore"
        detailUrlPrefix="/subPackages/techan/detail"
        @like-toggle="handleLikeToggle"
        :type="2"
        color="#D3FCFF"
      />
	  <ProductSection
	    titleBgColor="#92FF8F"
	    aiTagTextColor="#08FB05"
	    aiTagBorderColor="#6EAA3D"
	    title="CGC-ICH 大运河非物质文化遗产"
	    @like-toggle="handleLikeToggle"
	    :type="3"
	    color="#FFEAD2"
	  />
    </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";
import Book from "@/components/Book.vue";

export default {
  components: {
    CustomTabBar,
    headerVue,
    MusicControl,
    DynamicIsland,
    ProductSection,
	Book
  },
  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: 37,
          image:
            "https://epic.js-dyyj.com/uploads/20250822/f0ade3dd98a5a5e24ed0b60a023979e4.png",
          title: "中国神仙IP系列 丝织品",
          price: "198.00",
          isLiked: true,
          isShop: true,
        },
        {
          id: 39,
          image:
            "https://epic.js-dyyj.com/uploads/20250822/19b1fb3e07fd459d347e727274af445c.png",
          title: "仙人乘槎 马克杯",
          price: "35.00",
          isLiked: false,
        },
      ],
      selectedText: "",
      addressInfo: null,
      isLoading: true, // 添加加载状态
    };
  },
  onLoad() {},
  async onReady() {
    let res = await this.$main.getLocationInfo();
    console.log(res);
    if (!res.cityId) {
      res = {
        address: "江苏省苏州市吴中区太湖东路288号",
        area: "吴中区",
        areaId: "320506",
        city: "苏州市",
        cityId: "320500",
        latitude: 31.26249,
        longitude: 120.63212,
        province: "江苏省",
        provinceId: "320000",
        street: "太湖东路",
      };
    }
    this.addressInfo = res;
    this.selectedText = res && res.city;
    uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res));
	this.getList();
  },
  onShow() {
	  this.geBenefitPackaget();
    this.browse_record({
      type: "page",
      title: "首页",
    });
    this.$nextTick(() => {
      this.$refs.dynamicIsland.getUserInfo();
    });
  },
  onPageScroll(e) {
    // 只触发带页面ID的事件，避免不同页面间的状态冲突
    uni.$emit("pageScroll_index_page", e.scrollTop);
  },
  onReachBottom() {},
  methods: {
    changeAddress(res) {
      this.addressInfo = res;
      uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res));
      this.geBenefitPackaget();
    },
    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;
        }
      });
    },
    geBenefitPackaget() {
      this.Post(
        {
          cityId: this.addressInfo&&this.addressInfo.cityId||320500,
        },
        "/framework/index/benefitPackage/list",
        "DES"
      ).then((res) => {
        if (res.data) {
          this.productList = res.data.map((item) => {
            return {
              ...item,
              image: item.mainUrl,
              id: item.benefitPackageId,
              avatar:
                "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
              aiName: "文徵明",
            };
          });
        }
      });
    },
    gotoVideo(item) {
      uni.navigateTo({
        url:
          "/subPackages/video/video?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },

    // 处理收藏状态切换
    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>
page {
}
</style>
<style lang="scss" scoped>
.bg {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 页面样式 */

.content {
  height: 100%;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

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