From f4d7e20fdbb06cfad33bb2c7d3cce9337bb050ba Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Tue, 22 Oct 2024 16:30:10 +0800
Subject: [PATCH] =?UTF-8?q?uni-app=20slot=20=E5=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar-view/index.vue         |  2 +-
 src/components/tab-view/index.vue             | 41 +++++++++-------
 src/manifest.json                             |  4 +-
 src/pages/commodity/commodity.vue             | 48 ++++++++++++++++---
 .../commodity/components/comments/index.vue   | 13 +++++
 .../{shop-title.vue => shop-title/index.vue}  |  0
 6 files changed, 82 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/commodity/components/comments/index.vue
 rename src/pages/commodity/components/{shop-title.vue => shop-title/index.vue} (100%)

diff --git a/src/components/sidebar-view/index.vue b/src/components/sidebar-view/index.vue
index 098e065..649d707 100644
--- a/src/components/sidebar-view/index.vue
+++ b/src/components/sidebar-view/index.vue
@@ -39,7 +39,7 @@ function isCurrent(index) {
         </view>
 
         <scroll-view scroll-y class="flex-grow min-h-0">
-          <slot name="default" :current="ctx.current" :data="props.categories[ctx.current]"></slot>
+          <slot name="default" :current="ctx.current" :data="props.categories[ctx.current]" ></slot>
         </scroll-view>
       </view>
 
diff --git a/src/components/tab-view/index.vue b/src/components/tab-view/index.vue
index 213d25e..5614796 100644
--- a/src/components/tab-view/index.vue
+++ b/src/components/tab-view/index.vue
@@ -3,6 +3,7 @@ import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
 import SidebarView from "@/components/sidebar-view/index.vue"
 import Item from "@/components/tab-view/components/item";
+
 const props = defineProps({
   tabs: {
     type: Array,
@@ -58,25 +59,27 @@ onLoad(() => {
         </view>
       </view>
 
-      <swiper class="flex-grow min-h-0" :current="ctx.current" @change="swiperChange">
-        <swiper-item v-for="(item, index) in props.tabs" :key="index" class="h-full">
-          <SidebarView :categories="ctx.categories">
-            <template #default="{data}">
-              <view class="bg-orange-100 h-full"> {{ item.name }}</view>
-              <view> {{data.name}} </view>
+      <swiper class="flex-grow min-h-0 x-scope-slot" :current="ctx.current" @change="swiperChange">
+        <swiper-item v-for="(item, index) in props.tabs" :key="index" class="h-full x-scope-slot">
+          <slot name="default" :index="index">
+            <SidebarView :categories="ctx.categories">
+              <template #default="{data}" class="h-full">
+                <view class="bg-orange-100 h-full"> {{ item.name }}</view>
+                <view> {{data.name}} </view>
 
-              <scroll-view scroll-y class="flex-grow min-h-0 text-left">
-                <Item v-for="i in 10" :key="i"
-                      img="https://www.httpbin.org/image/png"
-                      title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
+                <scroll-view scroll-y class="flex-grow min-h-0 text-left">
+                  <Item v-for="i in 10" :key="i"
+                        img="https://www.httpbin.org/image/png"
+                        title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
 
-                <Item v-for="i in 20" :key="i"
-                      img="https://www.httpbin.org/image/jpeg"
-                      title="测试商品" price="9999.99"
-                      oldPrice="8888.88"/>
-              </scroll-view>
-            </template>
-          </SidebarView>
+                  <Item v-for="i in 20" :key="i"
+                        img="https://www.httpbin.org/image/jpeg"
+                        title="测试商品" price="9999.99"
+                        oldPrice="8888.88"/>
+                </scroll-view>
+              </template>
+            </SidebarView>
+          </slot>
         </swiper-item>
       </swiper>
     </view>
@@ -85,5 +88,7 @@ onLoad(() => {
 </template>
 
 <style scoped>
-
+::v-deep(.x-scope-slot) > view:not([class]) {
+  height: 100%
+}
 </style>
diff --git a/src/manifest.json b/src/manifest.json
index 5493523..ced93b1 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -60,7 +60,9 @@
             "scope.userLocation": {
                 "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
             }
-        }
+        },
+        "mergeVirtualHostAttributes": true,
+        "scopedSlotsCompiler": "augmented"
     },
     "mp-alipay" : {
         "usingComponents" : true
diff --git a/src/pages/commodity/commodity.vue b/src/pages/commodity/commodity.vue
index 5fe4654..b604188 100644
--- a/src/pages/commodity/commodity.vue
+++ b/src/pages/commodity/commodity.vue
@@ -2,18 +2,38 @@
   <view class="w-full h-full flex flex-col">
     <view>
       <view class="-z-20 absolute top-0 left-0 w-full h-full">
-        <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg" class="w-full h-32"></image>
+        <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg"
+               class="w-full h-32"></image>
       </view>
 
       <view class="pt-12 bg-black bg-opacity-10">
-        <ShopTitle />
+        <ShopTitle/>
       </view>
     </view>
 
 
     <view class="text-center flex flex-col flex-grow min-h-0">
       <TabView :tabs="ctx.tabs" class="flex-grow min-h-0">
-        <view class="" v-for="item in ctx.tabs"></view>
+        <template #default="{index}" class="h-full">
+          <SidebarView :categories="ctx.categories" v-show="index === 0" class="h-full">
+            <template #default="{data}">
+              <view> {{ data.name }}</view>
+
+              <scroll-view scroll-y class="flex-grow min-h-0 text-left">
+                <Item v-for="i in 10" :key="i"
+                      img="https://www.httpbin.org/image/png"
+                      title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
+
+                <Item v-for="i in 20" :key="i"
+                      img="https://www.httpbin.org/image/jpeg"
+                      title="测试商品" price="9999.99"
+                      oldPrice="8888.88"/>
+              </scroll-view>
+            </template>
+          </SidebarView>
+
+          <Comments v-show="index===1" />
+        </template>
       </TabView>
     </view>
   </view>
@@ -22,10 +42,13 @@
 <script setup>
 import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
-import ShopTitle from "./components/shop-title.vue";
+import ShopTitle from "./components/shop-title";
 import TabView from "@/components/tab-view/index.vue";
+import SidebarView from "@/components/sidebar-view";
+import Item from "@/components/tab-view/components/item";
+import Comments from "./components/comments/index.vue";
 
-onLoad((query)=>{
+onLoad((query) => {
   console.log(query)
 })
 
@@ -39,7 +62,20 @@ const ctx = reactive({
       name: "评价",
       value: "comments"
     }
-  ]
+  ],
+  categories: [
+    {
+      name: "外卖外送",
+      value: "takeaway"
+    },
+    {
+      name: "优选",
+      value: "optimization"
+    },
+    {
+      name: "餐饮",
+      value: "catering"
+    }]
 })
 </script>
 
diff --git a/src/pages/commodity/components/comments/index.vue b/src/pages/commodity/components/comments/index.vue
new file mode 100644
index 0000000..d9d9500
--- /dev/null
+++ b/src/pages/commodity/components/comments/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="flex flex-col w-full h-full">
+    评论
+  </view>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/commodity/components/shop-title.vue b/src/pages/commodity/components/shop-title/index.vue
similarity index 100%
rename from src/pages/commodity/components/shop-title.vue
rename to src/pages/commodity/components/shop-title/index.vue