首页 查看所有子模版

src/views/Market/Index.vue

@@ -67,15 +67,23 @@
             <div style="margin-top: 20px;" v-loading="loading">
                 <div v-if="dataList.length>0" class="q-mt-lg row wrap bg-white rounded" style="padding: 30px 10px 0 10px;">
                     <template v-for="(item,index) in dataList">
-                        <div class="MarketIndexListBox">
-                            <div class="MarketIndexList bg-white rounded" @click="goToTemplate(item)">
-                                <div class="MarketIndexList-img">
-                                    <el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" />
-                                    <!-- <img :src="item.CoverImg" style="height:100%"/> -->
+                        <el-popover effect="light" trigger="hover" placement="bottom-start" width="auto" height="auto">
+                            <template #default>
+                                <LayoutPool v-loading="queryObj.loading" />
+                            </template>
+                            <template #reference>
+                                <div class="MarketIndexListBox">
+                                    <div class="MarketIndexList bg-white rounded" @click="goToTemplate(item)"
+                                    @mouseover="getTemplate(item)">
+                                        <div class="MarketIndexList-img">
+                                            <el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" />
+                                            <!-- <img :src="item.CoverImg" style="height:100%"/> -->
+                                        </div>
+                                        <div class="MarketIndexList-text">{{item.Title}}</div>
+                                    </div>
                                 </div>
-                                <div class="MarketIndexList-text">{{item.Title}}</div>
-                            </div>
-                        </div>
+                            </template>
+                        </el-popover>
                     </template>
                 </div>
                 <div v-else class="q-mt-lg bg-white rounded" style="padding: 30px 10px 30px 10px;text-align: center;color: #909399;">暂无数据</div>
@@ -103,10 +111,13 @@
     import LineService from '@/services/LineService'
     import ConfigService from '@/services/ConfigService'
     import { userStore } from "@/store/user";
+    import { useSlidesStore } from '@/store'
     import { useScreenStore } from "@/store/screen";
     import { storeToRefs } from "pinia";
     import { injectKeyTemplate } from '@/types/injectKey'
 
+    import LayoutPool from '../Editor/Thumbnails/LayoutPool.vue'
+
     const {
         userInfo
     } = storeToRefs(userStore())
@@ -127,6 +138,7 @@
         ColorName: '', //颜色名称
         totalCount: 0, //总调试
         pageCount: 0, //总页数
+        loading: false,
     })
 
     const loading = ref(false as any)
@@ -134,10 +146,37 @@
     searchData.value = inject(injectKeyTemplate)
     const marketStore = useScreenStore()
     const isModelStore = useScreenStore()
+    const layoutsStore = useSlidesStore()
     const { screening, market, model, isModel, ConfigId} = storeToRefs(useScreenStore())
     
-    const addTemplate = () => {
-        marketStore.setMarket(!market)
+    // 查看所有子模版
+    const getTemplate = async (item) => {
+        queryObj.loading = true
+        layoutsStore.setLayouts([])
+        try {
+        let queryMsg = {
+            TempId: item.TempId
+        }
+        let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg);
+        if (dataRes.data.resultCode == 1) {
+            let SlidesData = JSON.parse(dataRes.data.data.TempData)
+            let newSlides = []
+            if(typeof SlidesData=='object'&&!SlidesData.length){
+                let obj = {
+                    pageType: 1,
+                    ...SlidesData
+                }
+                newSlides.push(obj)          
+            }else if(SlidesData.length>0){
+                newSlides = SlidesData
+            }
+            layoutsStore.setLayouts(JSON.parse(JSON.stringify(newSlides)))
+            queryObj.loading = false
+        }
+    } catch (error) {
+        console.log("GetTripTemplateSlide", error);
+        queryObj.loading = false
+    }
     }
 
     /**