首页 查看模版详情

src/views/Market/Index.vue

@@ -68,6 +68,27 @@
             <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">
+                                <div class="MarketIndexList-Hover">
+                                    <div class="q-mr-lg">
+                                        <el-button type="primary" v-tooltip="'详情'" 
+                                        icon="Tickets" circle style="color: #ffff;"
+                                        @click="getTemplate(item)"></el-button>
+                                    </div>
+                                    <div class="q-ml-lg">
+                                        <el-button type="primary" v-tooltip="'选择该模版'" 
+                                        icon="Pointer" circle style="color: #ffff;"
+                                        @click="goToTemplate(item)"></el-button>
+                                    </div>
+                                </div>
+                                <div class="MarketIndexList-img">
+                                    <el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" />
+                                </div>
+                                <div class="MarketIndexList-text">{{item.Title}}</div>
+                            </div>
+                        </div>
+                        <!--
                         <el-popover effect="light" trigger="hover" placement="bottom-start" width="auto" height="auto">
                             <template #default>
                                 <LayoutPool v-loading="queryObj.loading" />
@@ -78,13 +99,12 @@
                                     @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>
                             </template>
-                        </el-popover>
+                        </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>
@@ -104,7 +124,27 @@
             </div>
         </div>
     </div>
+    <el-dialog v-model="datas.DetailsVisible" :show-close="true" :close-on-press-escape="false" 
+    :close-on-click-modal="true" style="width: 650px;">
+        <template #header>
+            <div class="text-title">{{datas.TemplateRow.Title}} 模版详情</div>
+        </template>
+        <div class="MarketDetails-LayoutPool" v-loading="datas.loading">
+            <LayoutPool style="width: 100%;"/>
+        </div>
+        <div class="q-mt-lg row items-center">
+            <div class="col">
+                
+            </div>
+            <div>
+                <el-button v-if="ConfigId||model" class="q-ml-lg" 
+                @click="datas.DetailsVisible=false,datas.TemplateRow={}">关闭</el-button>
 
+                <el-button v-if="ConfigId||model" type="primary" class="q-ml-lg" 
+                @click="goToTemplate(datas.TemplateRow)">选择该模版</el-button>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -117,7 +157,7 @@
     import { storeToRefs } from "pinia";
     import { injectKeyTemplate } from '@/types/injectKey'
 
-    import LayoutPool from '../Editor/Thumbnails/LayoutPool.vue'
+    import LayoutPool from './LayoutPool.vue'
 
     const {
         userInfo
@@ -129,6 +169,11 @@
     const dataList = ref([] as Array < any > ); //模板数据列表
 
     const currentPage = ref(1 as Number);
+    const datas = reactive({
+        TemplateRow: {},
+        DetailsVisible: false,
+        loading: false,
+    })
     const queryObj = reactive({
         pageIndex: 1,
         pageSize: 20,
@@ -139,7 +184,6 @@
         ColorName: '', //颜色名称
         totalCount: 0, //总调试
         pageCount: 0, //总页数
-        loading: false,
     })
 
     const loading = ref(false as any)
@@ -156,7 +200,9 @@
 
     // 查看所有子模版
     const getTemplate = async (item) => {
-        queryObj.loading = true
+        datas.DetailsVisible = true
+        datas.TemplateRow = JSON.parse(JSON.stringify(item))
+        datas.loading = true
         layoutsStore.setLayouts([])
         try {
         let queryMsg = {
@@ -176,12 +222,12 @@
                 newSlides = SlidesData
             }
             layoutsStore.setLayouts(JSON.parse(JSON.stringify(newSlides)))
-            queryObj.loading = false
         }
-    } catch (error) {
-        console.log("GetTripTemplateSlide", error);
-        queryObj.loading = false
-    }
+            datas.loading = false
+        } catch (error) {
+            console.log("GetTripTemplateSlide", error);
+            datas.loading = false
+        }
     }
 
     /**
@@ -212,8 +258,10 @@
      */
     const goToTemplate = (item: any) => {
         if(!ConfigId.value&&!model.value) return
+        datas.DetailsVisible = false
         searchData.value.TempId = item.TempId
         marketStore.setMarket(!market)
+        datas.TemplateRow = {}
         // console.log("item", item.TempId);
     }
 
@@ -310,7 +358,7 @@
     queryTemplateBySearchHandler();
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     @import url('../../assets/styles/common.css');
 
     @font-face {
@@ -338,6 +386,36 @@
     }
     .MarketIndexList{
         width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+    .MarketIndexList-Hover{
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(23,23,23,0.7);
+        opacity: 0;
+        transition: opacity 2s ease;
+        -webkit-transition: opacity 2s ease;
+        -moz-transition: opacity 2s ease;
+        -ms-transition: opacity 2s ease;
+        -o-transition: opacity 2s ease;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: $themeHoverColor;
+    }
+    .MarketIndexList:hover .MarketIndexList-Hover{
+        opacity: 1;
+    }
+    .MarketIndexList-Hover div span{
+        display: inline-block;
+        background: #fff;
+        border-radius: 4px;
+        padding: 0 10px 3px 10px;
     }
     .MarketIndexListBox:hover{
         position: relative;
@@ -378,4 +456,7 @@
         margin-right: 30px;
         margin-top: 5px;
     }
+    .layout-item{
+        width: 180px;
+    }
 </style>
\ No newline at end of file

src/views/Market/LayoutPool.vue

+<template>
+  <div class="layout-pool">
+    <div 
+      class="layout-item q-ma-md"
+      v-for="slide in layouts" 
+      :key="slide.id"
+      @click="selectSlideTemplate(slide)"
+    >
+      <ThumbnailSlide class="thumbnail" :slide="slide" :size="180" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '@/store'
+import type { Slide } from '@/types/slides'
+
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+
+const emit = defineEmits<{
+  (event: 'select', payload: Slide): void
+}>()
+
+const { layouts } = storeToRefs(useSlidesStore())
+const selectSlideTemplate = (slide: Slide) => {
+  emit('select', slide)
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-pool {
+  width: 394px;
+  height: 500px;
+  padding: 2px;
+  /* margin-right: -12px;
+  padding-right: 12px; */
+  overflow: auto;
+
+  @include flex-grid-layout();
+}
+.layout-item {
+  /* @include flex-grid-layout-children(2, 48%); */
+  width: 180px;
+
+  &:nth-last-child(2), &:last-child {
+    margin-bottom: 0;
+  }
+
+  .thumbnail {
+    outline: 1px solid $borderColor;
+    cursor: pointer;
+
+    &:hover {
+      outline-color: $themeColor;
+    }
+  }
+}
+</style>
\ No newline at end of file