From 6bb401b36607620a1c15f5793c59d10f68e4738e Mon Sep 17 00:00:00 2001
From: "1054425342@qq.com" <1054425342@qq.com>
Date: Wed, 13 Aug 2025 14:40:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9D=83=E7=9B=8A=E5=8C=85=E5=85=91?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DynamicIsland.vue | 192 +++++++-------
 pages/index/iSoul.vue        |  23 +-
 pages/index/index.vue        | 473 +++++++++++++++++++----------------
 3 files changed, 367 insertions(+), 321 deletions(-)

diff --git a/components/DynamicIsland.vue b/components/DynamicIsland.vue
index 00cb435..35ae38a 100644
--- a/components/DynamicIsland.vue
+++ b/components/DynamicIsland.vue
@@ -16,82 +16,94 @@
     >
       <!-- 展开状态 -->
       <view v-if="!actualCompactState" class="expanded-content">
-		 <!-- <view style="display: flex;align-items: center;justify-content: center;color: white;" v-if="!(userInfo&&userInfo.token)">
+        <!-- <view style="display: flex;align-items: center;justify-content: center;color: white;" v-if="!(userInfo&&userInfo.token)">
 		  	去登录
 		  </view> -->
-       <template >
-		   <template v-if="styleType != 'timeShop'">
-		     <view class="top-section">
-		       <text class="welcome-text" v-if="userInfo&&userInfo.token">{{ title }}</text>
-			   <text class="welcome-text" v-else	@click="toLogin">hi  快去登录 ></text>
-		       <view class="qr-code">
-		         <image
-		           style="width: 39rpx; height: 39rpx"
-		           src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"
-		         ></image>
-		       </view>
-		     </view>
-		     <view class="bottom-section">
-		       <view class="stats-section">
-		         <view class="stat-item">
-		           <text class="stat-number">{{ getStatNumber("权益") }}</text>
-		           <text class="stat-label">权益</text>
-		         </view>
-		         <view class="stat-item">
-		           <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
-		           <text class="stat-label">时间银行</text>
-		         </view>
-		       </view>
-		       <view class="divider"></view>
-		       <view class="action-section">
-		         <text class="action-text">{{ actionText }}</text>
-		         <image
-				 @click="toWebView"
-		           class="avatar"
-		           src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
-		           mode="aspectFill"
-		         ></image>
-		       </view>
-		     </view>
-		   </template>
-		   <template v-if="styleType == 'timeShop'">
-		     <view class="bottom-section">
-		       <view class="stats-section">
-		         <view class="stat-item">
-		           <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
-		           <text class="stat-label">时间银行</text>
-		         </view>
-		       </view>
-		       <view class="divider"></view>
-		       <view class="action-section">
-		         <view class="action-text-box">
-		           <view class="action-text-box-des">
-		             在努力一点点，为更好的未来蓄力吧！
-		           </view>
-		           <view class="action-text-box-msg">
-		             <image
-		               class="action-text-box-img"
-		               :src="
-		                 showImg(
-		                   '/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png'
-		                 )
-		               "
-		             ></image>
-		             今日点赞和留言<text
-		               style="font-size: 30rpx; font-weight: bold; margin: 0 10rpx"
-		               >100</text
-		             >条
-		           </view>
-		         </view>
-		         <image
-		           class="avatar"
-		           src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
-		           mode="aspectFill"
-		         ></image>
-		       </view>
-		     </view>
-		   </template>
-	   </template>
+        <template>
+          <template v-if="styleType != 'timeShop'">
+            <view class="top-section">
+              <text class="welcome-text" v-if="userInfo && userInfo.token">{{
+                title
+              }}</text>
+              <text class="welcome-text" v-else @click="toLogin"
+                >hi 快去登录 ></text
+              >
+              <view class="qr-code">
+                <image
+                  style="width: 39rpx; height: 39rpx"
+                  src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"
+                ></image>
+              </view>
+            </view>
+            <view class="bottom-section">
+              <view class="stats-section">
+                <view class="stat-item">
+                  <text class="stat-number">{{ getStatNumber("权益") }}</text>
+                  <text class="stat-label">权益</text>
+                </view>
+                <view class="stat-item">
+                  <text class="stat-number">{{
+                    getStatNumber("时间银行")
+                  }}</text>
+                  <text class="stat-label">时间银行</text>
+                </view>
+              </view>
+              <view class="divider"></view>
+              <view class="action-section">
+                <text class="action-text">{{ actionText }}</text>
+                <image
+                  @click="toWebView"
+                  class="avatar"
+                  src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
+                  mode="aspectFill"
+                ></image>
+              </view>
+            </view>
+          </template>
+          <template v-if="styleType == 'timeShop'">
+            <view class="bottom-section">
+              <view class="stats-section">
+                <view class="stat-item">
+                  <text class="stat-number">{{
+                    getStatNumber("时间银行")
+                  }}</text>
+                  <text class="stat-label">时间银行</text>
+                </view>
+              </view>
+              <view class="divider"></view>
+              <view class="action-section">
+                <view class="action-text-box">
+                  <view class="action-text-box-des">
+                    在努力一点点，为更好的未来蓄力吧！
+                  </view>
+                  <view class="action-text-box-msg">
+                    <image
+                      class="action-text-box-img"
+                      :src="
+                        showImg(
+                          '/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png'
+                        )
+                      "
+                    ></image>
+                    今日点赞和留言<text
+                      style="
+                        font-size: 30rpx;
+                        font-weight: bold;
+                        margin: 0 10rpx;
+                      "
+                      >100</text
+                    >条
+                  </view>
+                </view>
+                <image
+                  class="avatar"
+                  src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
+                  mode="aspectFill"
+                ></image>
+              </view>
+            </view>
+          </template>
+        </template>
       </view>
 
       <!-- 紧凑状态 -->
@@ -212,11 +224,11 @@ export default {
     this.removeScrollListener();
   },
   methods: {
-	  toLogin(){
-		  uni.navigateTo({
-		           url: "/pages/login/login",
-		         });
-	  },
+    toLogin() {
+      uni.navigateTo({
+        url: "/pages/login/login",
+      });
+    },
     handleToggle() {
       if (this.isScrolled) {
         // 固定模式下切换内部状态
@@ -258,9 +270,6 @@ export default {
       if (this.isScrolled !== shouldScroll) {
         this.isScrolled = shouldScroll;
         // 添加触觉反馈
-        if (uni.vibrateShort) {
-          uni.vibrateShort();
-        }
       }
 
       // 滚动时自动收缩展开的灵动岛
@@ -306,7 +315,7 @@ export default {
             JSON.parse(uni.getStorageSync("userInfo"))) ||
           this.$store.state.user.userInfo ||
           {};
-		  console.log(this.userInfo,'this.userInfo')
+        console.log(this.userInfo, "this.userInfo");
         // 更新标题显示用户昵称
         if (this.userInfo && this.userInfo.nickname) {
           this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`;
@@ -316,11 +325,13 @@ export default {
         this.userInfo = {};
       }
     },
-	toWebView(){
-		uni.navigateTo({
-			url:'/subPackages/webPage/webPage?url='+'https://www.dayunyuanjian.cn/dist/#/chat-demo'
-		})
-	}
+    toWebView() {
+      uni.navigateTo({
+        url:
+          "/subPackages/webPage/webPage?url=" +
+          "https://www.dayunyuanjian.cn/dist/#/chat-demo",
+      });
+    },
   },
 };
 </script>
@@ -333,6 +344,7 @@ export default {
   position: relative;
   opacity: 1;
   transition: opacity 0.3s ease;
+  padding:24rpx 0
 }
 
 .dynamic-island-placeholder.visible {
@@ -346,7 +358,8 @@ export default {
 }
 
 .dynamic-island {
-  margin: 24rpx auto 24rpx;
+  // margin: 24rpx auto 24rpx;
+  margin: 0 auto;
   z-index: 100;
 
   background: rgba(0, 0, 0, 0.75);
@@ -428,7 +441,6 @@ export default {
 .qr-code {
   width: 32rpx;
   height: 32rpx;
-
 }
 
 .qr-icon {
diff --git a/pages/index/iSoul.vue b/pages/index/iSoul.vue
index f9ca73b..fabfa09 100644
--- a/pages/index/iSoul.vue
+++ b/pages/index/iSoul.vue
@@ -94,9 +94,7 @@
 		<!-- 数字资产权益 -->
 		<view class="digital-assets">
 			<view class="asset-card">
-				<image
-				 @click="handleAssetAction()"
-				 :src="
+				<image @click="handleAssetAction()" :src="
 				
             showImg('/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png')
           " mode="aspectFill" class="digital-img"></image>
@@ -197,7 +195,7 @@
 				<view class="popup-content">
 					<view class="input-section">
 						<text class="input-label">请输入兑换码</text>
-						<input class="exchange-input" v-model="exchangeCode" placeholder="请输入兑换码" maxlength="20" />
+						<input class="exchange-input" v-model="exchangeCode" placeholder="请输入兑换码" />
 					</view>
 					<view class="popup-actions">
 						<button class="cancel-btn" @click="closeExchangePopup">取消</button>
@@ -387,11 +385,11 @@
 						});
 						break;
 					default:
-					uni.navigateTo({
-						url: "/subPackages/orderQy/list",
-					});
+						uni.navigateTo({
+							url: "/subPackages/orderQy/list",
+						});
 						break;
-					
+
 				}
 			},
 			// 有感商品点击
@@ -458,9 +456,16 @@
 				).then((res) => {
 					if (res.code == 200) {
 						uni.showToast({
-							title: "兑换成功！",
+							title: "兑换成功，为您跳转订单页~",
 							icon: "none",
+
 						});
+						this.closeExchangePopup()
+						setTimeout(() => {
+							uni.navigateTo({
+								url: "/subPackages/orderQy/list"
+							})
+						}, 2000)
 
 					} else {
 						uni.showToast({
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4eb4361..1f3ffe3 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,240 +1,269 @@
 <template>
-	<view class="bg">
-		<headerVue @change="changeAddress" :address="addressInfo" fixed isLocation></headerVue>
+  <view class="bg">
+    <headerVue
+      @change="changeAddress"
+      :address="addressInfo"
+      fixed
+      isLocation
+    ></headerVue>
 
-		<!-- 灵动岛组件 -->
-		<!-- 灵动岛组件 - 自包含，无需传递参数 -->
-		<DynamicIsland ref="dynamicIsland" :page-id="'index_page'" @toggle="handleIslandToggle"
-			@action="handleIslandAction" />
+    <!-- 灵动岛组件 -->
+    <!-- 灵动岛组件 - 自包含，无需传递参数 -->
+    <DynamicIsland
+      ref="dynamicIsland"
+      :page-id="'index_page'"
+      @toggle="handleIslandToggle"
+      @action="handleIslandAction"
+    />
 
-		<view class="content" @click="handleContentClick">
-			<!-- 权益商品区域 -->
-			<ProductSection  v-if="productList.length" title="权益商品" :productList="productList"
-				moreUrl="/subPackages/equityGoods/index" detailUrlPrefix="/subPackages/equityGoods/detail"
-				@like-toggle="handleLikeToggle" />
-			<ProductSection titleBgColor="#92FF8F" aiTagTextColor="#08FB05" aiTagBorderColor="#6EAA3D" title="有感商品"
-				:productList="productListFeeling" moreUrl="/pages/index/sensoryStore"
-				detailUrlPrefix="/subPackages/techan/detail" @like-toggle="handleLikeToggle" isFeel />
-			<view class="tab-bar-placeholder"></view>
-		</view>
+    <view class="content" @click="handleContentClick">
+      <!-- 权益商品区域 -->
+      <ProductSection
+        v-show="productList.length"
+        title="权益商品"
+        :productList="productList"
+        moreUrl="/subPackages/equityGoods/index"
+        detailUrlPrefix="/subPackages/equityGoods/detail"
+        @like-toggle="handleLikeToggle"
+      />
 
-		<CustomTabBar :currentTab="0" />
-		<MusicControl />
-	</view>
+      <ProductSection
+        titleBgColor="#92FF8F"
+        aiTagTextColor="#08FB05"
+        aiTagBorderColor="#6EAA3D"
+        title="有感商品"
+        :productList="productListFeeling"
+        moreUrl="/pages/index/sensoryStore"
+        detailUrlPrefix="/subPackages/techan/detail"
+        @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: 34,
-						image: "https://epic.js-dyyj.com/uploads/20250728/22e319f3feb1b63fbb539d425c51fe70.png",
-						title: "OUT OF SPACE 东方线香",
-						price: "138.00",
-						isLiked: true,
-						isShop: true
-					},
-					{
-						id: 32,
-						image: "https://epic.js-dyyj.com/uploads/20250728/cc9907153c887a6428283a407928db9a.png",
-						title: "AI-Agent智能玩具",
-						price: "398.00",
-						isLiked: false,
-					},
-				],
-				selectedText: '',
-				addressInfo: null,
-			};
-		},
-		onLoad() {},
-		async onReady() {
-			let res = await this.$main.getLocationInfo()
-			console.log(res)
-			this.addressInfo = res
-			this.selectedText = res && res.city
-			uni.setStorageSync('SYS_ADDRESS_INFO', JSON.stringify(res))
-			this.getList();
-			this.geBenefitPackaget()
-
-		},
-		onShow() {
-			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.cityId
-					},
-					"/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)),
-				});
-			},
+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: 34,
+          image:
+            "https://epic.js-dyyj.com/uploads/20250728/22e319f3feb1b63fbb539d425c51fe70.png",
+          title: "OUT OF SPACE 东方线香",
+          price: "138.00",
+          isLiked: true,
+          isShop: true,
+        },
+        {
+          id: 32,
+          image:
+            "https://epic.js-dyyj.com/uploads/20250728/cc9907153c887a6428283a407928db9a.png",
+          title: "AI-Agent智能玩具",
+          price: "398.00",
+          isLiked: false,
+        },
+      ],
+      selectedText: "",
+      addressInfo: null,
+      isLoading: true, // 添加加载状态
+    };
+  },
+  onLoad() {},
+  async onReady() {
+    let res = await this.$main.getLocationInfo();
+    console.log(res);
+    this.addressInfo = res;
+    this.selectedText = res && res.city;
+    uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res));
+    this.getList();
+    this.geBenefitPackaget();
+  },
+  onShow() {
+    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.cityId,
+        },
+        "/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;
-			},
+    // 处理收藏状态切换
+    handleLikeToggle({ item, index }) {
+      this.productList[index] = item;
+    },
 
-			// 处理灵动岛点击切换
-			handleIslandToggle(isExpanded) {
-				console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式");
-			},
+    // 处理灵动岛点击切换
+    handleIslandToggle(isExpanded) {
+      console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式");
+    },
 
-			// 处理灵动岛操作按钮
-			handleIslandAction() {
-				uni.showToast({
-					title: "执行操作",
-					icon: "none",
-				});
-				console.log("执行操作");
-			},
+    // 处理灵动岛操作按钮
+    handleIslandAction() {
+      uni.showToast({
+        title: "执行操作",
+        icon: "none",
+      });
+      console.log("执行操作");
+    },
 
-			// 处理内容区域点击
-			handleContentClick() {
-				// 点击内容区域时收缩灵动岛
-				if (this.$refs.dynamicIsland) {
-					this.$refs.dynamicIsland.collapseIsland();
-				}
-			},
-		},
-	};
+    // 处理内容区域点击
+    handleContentClick() {
+      // 点击内容区域时收缩灵动岛
+      if (this.$refs.dynamicIsland) {
+        this.$refs.dynamicIsland.collapseIsland();
+      }
+    },
+  },
+};
 </script>
 <style>
-	page {}
+page {
+}
 </style>
 <style lang="scss" scoped>
-	.bg {
-		min-height: 100vh;
-		background: #f5f5f5;
-		display: flex;
-		flex-direction: column;
-	}
+.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: 20rpx;
-	}
+.content {
+  height: 100%;
+  width: 100%;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  margin-top: 20rpx;
+}
 
-	.tab-bar-placeholder {
-		height: 143rpx;
-		width: 100%;
-	}
-</style>
\ No newline at end of file
+.tab-bar-placeholder {
+  height: 143rpx;
+  width: 100%;
+}
+</style>