轮播图、商品列表从主页传数据展示

src/views/mall/home/components/carousel.vue

@@ -1,26 +1,25 @@
 <template>
-  <div>
-    <v-carousel cycle hide-delimiter-background :show-arrows="false" style="width: 100%; max-width: 100%; height: auto;">
-        <v-carousel-item v-for="(item, i) in carouselList" :key="i">
-          <v-img :src="item.url" :lazy-src="item.url">
-            <template v-slot:placeholder>
-                <v-row align="center" class="fill-height ma-0" justify="center">
-                  <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
-                </v-row>
-            </template>
-          </v-img>
-        </v-carousel-item>
-      </v-carousel>
-  </div>
+  <v-carousel cycle hide-delimiter-background :show-arrows="false" style="width: 100%; max-width: 100%; height: auto;">
+    <v-carousel-item v-for="(item, i) in carouselList" :key="i">
+      <v-img :src="item.imgUrl" :lazy-src="item.imgUrl">
+        <template v-slot:placeholder>
+            <v-row align="center" class="fill-height ma-0" justify="center">
+              <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
+            </v-row>
+        </template>
+      </v-img>
+    </v-carousel-item>
+  </v-carousel>
 </template>
 
 <script setup>
 defineOptions({ name: 'mall-home-carousel'})
+import { ref } from 'vue'
+const props = defineProps({ templateData: Object })
 
-const carouselList = [
-  { url: 'https://wx-static.ydjdev.com/resource-1730081781870-30114.jpg?imageView2/0/w/1920' },
-  { url: 'https://wx-static.ydjdev.com/resource-1730084780292-95821.jpg?imageView2/0/w/1920' },
-]
+const carouselList = ref([])
+const Carousel = props.templateData?.home?.components.find(item => item.id === 'Carousel')
+carouselList.value = Carousel.property.items
 </script>
 
 <style scoped lang="scss">

src/views/mall/home/components/hotGoods.vue

@@ -23,22 +23,18 @@
 <script setup>
 defineOptions({ name: 'mall-home-hotGoods'})
 import { ref, computed } from 'vue'
-import { useMallStore } from '@/store/mall'
 import { getProductByIds } from '@/api/mall/index'
 import { formatSales, fen2yuan } from '@/hooks/web/useGoods'
 import { isArray } from 'lodash-es'
 import { useRouter } from 'vue-router'
 
+const props = defineProps({ templateData: Object })
 const router = useRouter()
-let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
-useMallStore().$subscribe((mutation, state) => {
-  if (state.template && Object.keys(state.template).length) template.value = state?.template
-})
 
 // 根据id获取商品列表
 const goodList = ref([])
 const getGoodsList = async () => {
-  const productCard = template.value?.home?.components.find(item => item.id === 'ProductCard')
+  const productCard = props.templateData?.home?.components.find(item => item.id === 'ProductCard')
   const ids = productCard.property.spuIds
   if (!ids.length) return
   const data = await getProductByIds(ids)

src/views/mall/home/index.vue

@@ -20,10 +20,10 @@
     </div>
 
     <!-- 轮播图 -->
-    <Carousel />
+    <Carousel :templateData="template" />
 
     <!-- 热门商品 -->
-    <HotGoods class="my-10 default-width" />
+    <HotGoods :templateData="template" class="my-10 default-width" />
   </div>
 </template>
 
@@ -37,6 +37,12 @@ import { useMallStore } from '@/store/mall'
 // 获取装修模版
 useMallStore().getMallDiyTemplate()
 
+let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
+useMallStore().$subscribe((mutation, state) => {
+  if (state.template && Object.keys(state.template).length) template.value = state?.template
+})
+
+
 const inputVal = ref('')
 const handleSearch = () => {}
 </script>