模版详情，新增模版 组件

src/components/home/temDesign.vue

@@ -6,7 +6,7 @@
             <div class="text-title text-center fz16 PingFangSC">创建设计</div>
         </template>
         <div class="addTemplateBox fz14">
-            <div class="color0 q-mb-lg">推荐尺寸</div>
+            <div class="color0 q-mb-lg text-left">推荐尺寸</div>
             <div class="q-mt-xs">
                 <div v-for="(item,index) in RecommendedSizes">
                     <div class="row addTemplateBoxRec rounded6 cursor-pointer"
@@ -22,7 +22,7 @@
             </div>
         </div>
         <div class="addTemplateBox fz14">
-            <div class="color0">自义定尺寸</div>
+            <div class="color0 text-left">自义定尺寸</div>
             <div class="q-mt-xs q-mb-lg row">
                 <template v-for="(item,index) in typeArr">
                     <div class="MarketButton cursor-pointer" 
@@ -73,7 +73,7 @@ const {
     userInfo
 } = storeToRefs(useUserStore())
 const router = useRouter();
-
+const typeArr = ref([] as Array < any > ); //类型
 const layouts = ref([
     {Name: '不限',Id:0},
     {Name: '横版',Id:1},
@@ -157,7 +157,16 @@ const queryObj = reactive({
     sort: 0,//排序方式
 })
 const setTemplateType = ref(1)
-const ColorList = DominantColour()
+//类型
+for(let i=0;i<3;i++){
+    let text = '所有模版'
+    if(i==1) text = '行程'
+    if(i==2) text = '广告'
+    typeArr.value.push({
+        type:i,
+        typeName:text
+    })
+}
 const props = defineProps({
     addTem:{
         type: Boolean,
@@ -227,7 +236,10 @@ const addTemplate = (type:number) =>{
         path:`/create_template/${type}`
     })
 }
-
+//类型切换
+const onTypeChangeHandler = (Type: string) => {
+    setTemplateType.value = Type
+}
 
 
 </script>
@@ -240,63 +252,6 @@ const addTemplate = (type:number) =>{
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
-    ::-webkit-scrollbar {
-        width: 9px;
-        background-color: #E9E9E9;
-        border-radius: 5px;
-    }
-    .MarketDetaSwR div:hover{
-        background: url('../../assets//img/rightActive.png') no-repeat;
-        background-size: 100% 100%;
-    }
-    .MarketDetaSwR div{
-        background: url('../../assets//img/right.png') no-repeat;
-        background-size: 100% 100%;
-    }
-    .MarketDetaSwR{
-        right: -177px;
-    }
-    .MarketDetaSwL div:hover{
-        background: url('../../assets//img/leftActive.png') no-repeat;
-        background-size: 100% 100%;
-    }
-    .MarketDetaSwL div{
-        background: url('../../assets//img/left.png') no-repeat;
-        background-size: 100% 100%;
-    }
-    .MarketDetaSwL{
-        left: -177px;
-    }
-    .MarketDetaSw div{
-        width: 104px;
-        height: 104px;
-    }
-    .MarketDetaSw{
-        position: absolute;
-        top: 393px;
-    }
-    .Details-right{
-        width: 256px;
-        padding: 0 33px;
-    }
-    .Details-leftBox img{
-        width:100%;
-        height:auto;
-        margin-bottom: 30px;
-    }
-    .Details-leftBox{
-        width: 100%;
-        height: 806px;
-    }
-    .Details-left{
-        overflow: auto;
-    }
-    .Details-container{
-        height: 806px;
-        width: 1097px;
-        padding: 0 19px 0 19px;
-        position: relative;
-    }
     .addTemplateInput {
         ::v-deep(.el-input__wrapper){
             background-color: #EFEFEF;
@@ -319,16 +274,6 @@ const addTemplate = (type:number) =>{
     .addTemplateBox{
         padding: 0 41px;
     }
-    .el-button:not(.is-link),.el-menu-item,
-    .el-button:not(.is-link):hover,.el-menu-item:hover{
-        border: 0;
-    }
-    .MarketButton.active.active2{
-        margin-right: 0;
-    }
-    .MarketButton.active.active2::after{
-        background: none;
-    }
     .MarketButton{
         width: 90px;
         height: 36px;

src/router/router.ts

@@ -213,28 +213,28 @@ const routes: RouteRecordRaw[] = [
         path: '/m',
         component: () => import('@/views/TemplateCenter/Index.vue'),
         meta:{
-          title:'字体管理'
+          title:'字体'
         }
       },
       {
         path: '/m/nation',
         component: () => import('@/views/TemplateCenter/nation.vue'),
         meta:{
-          title:'国家管理'
+          title:'国家'
         }
       },
       {
         path: '/m/colour',
         component: () => import('@/views/TemplateCenter/colour.vue'),
         meta:{
-          title:'颜色管理'
+          title:'颜色'
         }
       },
       {
         path: '/m/TemplateManagement',
         component: () => import('@/views/TemplateCenter/TemplateManagement.vue'),
         meta:{
-          title:'颜色管理'
+          title:'模版管理'
         }
       },
     ]

src/store/menu.ts

@@ -21,9 +21,9 @@ const menus:{menu:Menu,owner:MenuOwner}[] = [
     {menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'*'},
     {menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'*'},
     {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'},
-    {menu:{name:'字体设置',icon:'IconAddText',url:'/m'},owner:'M'},
-    {menu:{name:'国家设置',icon:'IconWorld',url:'/m/nation'},owner:'M'},
-    {menu:{name:'颜色设置',icon:'IconPlatte',url:'/m/colour'},owner:'M'},
+    {menu:{name:'字体',icon:'IconAddText',url:'/m'},owner:'M'},
+    {menu:{name:'国家',icon:'IconWorld',url:'/m/nation'},owner:'M'},
+    {menu:{name:'颜色',icon:'IconPlatte',url:'/m/colour'},owner:'M'},
     {menu:{name:'模版管理',icon:'IconPageTemplate',url:'/m/TemplateManagement'},owner:'M'},
 ]
 

src/views/Editor/EditorHeader/index.vue

@@ -241,15 +241,18 @@ const goBack = (type:any) =>{
     setNewDatas(type,0)
     let path ='/'
     const t = useSlidesStore().viewportRatio<0?1:2
-    if(type!=0){
-      if(model.value==2) path = `/market/create/${searchData.value.TemplateType==1?'trip':'ad'}`
-      else if(model.value==0) path = `/market/op/${ConfigId.value}/${t}`
-      else if(model.value==1) path = `/market`
-    }
-    console.log(path)
-    router.push({path})
+    // if(type!=0){
+    //   if(model.value==2) path = `/market/create/${searchData.value.TemplateType==1?'trip':'ad'}`
+    //   else if(model.value==0) path = `/market/op/${ConfigId.value}/$-{t}`
+    //   else if(model.value==1) path = `/market`
+    // }
+    // console.log(path)
+    // router.push({path})
+
+    if(model.value==0) path = `/market/op/${ConfigId.value}/$-{t}`
+    else window.history.back()
+    
   }).catch(() => {})
-  
 }
 // 返回是否清空数据
 const setNewDatas = (type,i) => {

src/views/TemplateCenter/Index.vue

@@ -70,20 +70,20 @@
         <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
             <span class="q-pr-md shrink">名称：</span>
             <el-input min="750" v-model="datas.params.label"
-            placeholder="请输入字体名称" class="input-with-select"></el-input>
+            placeholder="请输入字体名称" class=""></el-input>
             <span class="q-px-md shrink">fontFamily：</span>
             <el-input min="750" v-model="datas.params.fontFamily"
-            placeholder="请输入fontFamily" class="input-with-select"></el-input>
+            placeholder="请输入fontFamily" class=""></el-input>
         </div>
         <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
           <span class="q-pr-md shrink">URL：</span>
           <el-input min="750" type="textarea" v-model="datas.params.fontUrl"
-          placeholder="请输入URL" class="input-with-select"></el-input>
+          placeholder="请输入URL" class=""></el-input>
         </div>
         <div class="addTemplateInput q-mt-xs row items-center">
           <span class="q-pr-md shrink">裁剪URL：</span>
           <el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
-          placeholder="请输入裁剪字体URL" class="input-with-select"></el-input>
+          placeholder="请输入裁剪字体URL" class=""></el-input>
         </div>
      </div>
       <div class="text-center">

src/views/TemplateCenter/TemplateManagement.vue

 <template>
-    <div class="row items-center flex-between q-mb-lg">
-        <div style="width: 224px;"></div>
-        <el-input style="width:600px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33">
+    <div class="row items-center justify-content">
+        <div class="row wrap">
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm">关键字:</span>
+                <el-input style="width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable></el-input>
+            </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm">&nbsp;&nbsp;模版:</span>
+                <el-select v-model="queryObj.TempType" 
+                    class="ml-1"
+                    placeholder="模版类型" clearable>
+                        <el-option
+                            v-for="item in typeArr"
+                            :key="item.type"
+                            :label="`${item.typeName}`"
+                            :value="item.type"
+                        />
+                </el-select>
+            </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm">&nbsp;&nbsp;&nbsp;版型:</span>
+                <el-select v-model="queryObj.TemplateType" 
+                    class="ml-1"
+                    placeholder="版型" clearable>
+                        <el-option
+                            v-for="item in layouts"
+                            :key="item.Id"
+                            :label="`${item.Name}`"
+                            :value="item.Id"
+                        />
+                </el-select>
+            </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm">&nbsp;&nbsp;颜色:</span>
+                <el-select v-model="queryObj.ColorName" 
+                    class="ml-1"
+                    placeholder="颜色" clearable>
+                        <el-option key="" label="不限" value=""/>
+                        <el-option
+                            v-for="item in ColorList"
+                            :key="item.ColorName"
+                            :label="`${item.ColorName}`"
+                            :value="item.ColorName"
+                        />
+                </el-select>
+            </div>
+            <el-button class="q-ml-lg q-mb-lg" type="primary" size="default" style="color: #ffff;" @click="search">
+                <el-icon size="18px">
+                    <Search/>
+                </el-icon>
+            </el-button>
+        </div>
+        <!-- <el-input style="width:100px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33">
           <template #append>
             <div class="Market-select-line absolute"></div>
             <div class="row items-center pointer">
@@ -9,10 +59,8 @@
                 @click="search"/>
             </div>
           </template>
-        </el-input>
-        <el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
-          新增模版
-        </el-button>
+        </el-input> -->
+        
       </div>
       <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
       v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
@@ -54,15 +102,16 @@
             <span class="text-info">{{scope.row.CreateTime}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="190">
           <template #default="scope">
             <el-button type="primary" :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
+            <el-button type="primary" :icon="Edit" size="small" @click="getTemplate(scope.row)">详情</el-button>
             <el-button type="primary" :icon="Edit" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
-            <br/>
-            <el-button class="q-mt-sm" type="primary" :icon="Edit" size="small" @click="getTemplate(scope.row)">详情</el-button>
           </template>
         </el-table-column>
       </el-table>
+      <!-- 行程、广告图详情 -->
+    <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
 </template>
 
 <script setup lang="ts">
@@ -78,7 +127,8 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink,DominantC
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from "vue-router";
 import UserCard from "@/components/User/UserCard.vue";
-import { Delete,View } from '@element-plus/icons-vue';
+import temDetails from "@/components/home/temDetails.vue";
+import { Delete,View,Search } from '@element-plus/icons-vue';
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 import { noDataImg } from "@/utils/common";
@@ -128,6 +178,7 @@ const showCurrentTemplate = ref<any>()
 const imgList = ref<any>()
 const deleteLoading = ref<any>(null)
 const datas = reactive({
+    TemDetails: {},
     TemplateBoxRec: null,// 推荐尺寸
     DetailsVisible: false,
     addVisible: false,
@@ -152,6 +203,7 @@ const datas = reactive({
     ],
     currentImg: 0,// 当前查看img
 })
+const DetailsVisible = ref(false)
 let TemplateType = 0
 if(router.currentRoute.value.path=='/market') model.value=1
 if(router.currentRoute.value.path.includes('create')) {
@@ -332,35 +384,8 @@ const handleScroll = (e) =>{
 }
 // 查看所有子模版
 const getTemplate = async (item:any) => {
-
-    if(item.PageImageList && item.PageImageList.length>0){
-        datas.currentImg = 0
-        datas.DetailsVisible = true
-        imgList.value = []
-        let arrList = function(list){
-            list.forEach(x=>{
-                imgList.value.push({
-                    url: x,
-                    imgTop: 0
-                })
-            })
-        }
-        arrList(item.PageImageList)
-        showCurrentTemplate.value = item
-        if(item.PageImageList.length>1){
-            setTimeout(()=>{
-                for(let i=0;i<imgList.value.length;i++){
-                    imgList.value[i].imgTop =  (scrollToElement.value[i].offsetHeight+30)*i
-                }
-                document.querySelector("#scrollId .Details-left").addEventListener("scroll", handleScroll);
-            },500)
-        }
-    }else{
-        ElMessage.warning({
-            showClose: true,
-            message: `当前${item.TemplateType==2?'广告':'行程'}没有预览信息，请选择其他操作`,
-        })
-    }
+    DetailsVisible.value = true
+    datas.TemDetails = item
 }
 
 /**
@@ -576,7 +601,7 @@ const getTemplateQuery = async () => {
             }
             //类型
             for(let i=0;i<3;i++){
-                let text = '所有模版'
+                let text = '不限'
                 if(i==1) text = '行程'
                 if(i==2) text = '广告'
                 typeArr.value.push({

src/views/TemplateCenter/colour.vue

@@ -55,12 +55,12 @@
           <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
               <span class="q-pr-md shrink">名称：</span>
               <el-input min="750" v-model="datas.params.ColorName"
-              placeholder="请输入颜色名称" class="input-with-select"></el-input>
+              placeholder="请输入颜色名称" class=""></el-input>
           </div>
           <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
             <span class="q-pr-md shrink">色值：</span>
             <el-input min="750" v-model="datas.params.ColorValue"
-            placeholder="例子:#e5e3da" class="input-with-select"></el-input>
+            placeholder="例子:#e5e3da" class=""></el-input>
             <div class="q-pl-sm">
                 <el-color-picker v-model="datas.params.ColorValue" />
                 <!-- <el-tag

src/views/TemplateCenter/nation.vue

@@ -40,7 +40,7 @@
           <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
               <span class="q-pr-md shrink">名称：</span>
               <el-input min="750" v-model="datas.params.Content"
-              placeholder="请输入国家名称" class="input-with-select"></el-input>
+              placeholder="请输入国家名称" class=""></el-input>
           </div>
        </div>
         <div class="text-center">