Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

# Conflicts:
#	src/store/menu.ts

src/router/router.ts

@@ -250,7 +250,7 @@ const routes: RouteRecordRaw[] = [
         path: '/m',
         component: () => import('@/views/TemplateCenter/Index.vue'),
         meta:{
-          title:'字体'
+          title:'模版管理'
         }
       },
       {
@@ -268,10 +268,10 @@ const routes: RouteRecordRaw[] = [
         }
       },
       {
-        path: '/m/TemplateManagement',
-        component: () => import('@/views/TemplateCenter/TemplateManagement.vue'),
+        path: '/m/font',
+        component: () => import('@/views/TemplateCenter/font.vue'),
         meta:{
-          title:'模版管理'
+          title:'字体'
         }
       },
     ]

src/services/FontService.ts

 import Api,{ HttpResponse, Result } from './../utils/request';
 
 class FontService{
+    
+    //删除字体文件信息
+    static async RemoveTripFile(id:number):Promise<HttpResponse>{
+        return Api.Post("triptemplate_RemoveTripFile",{id})
+    }
+
     //获取字体文件信息
     static async GetAllFontsAsync():Promise<HttpResponse>{
         return Api.Post("triptemplate_GetFontList",{})

src/services/LineService.ts

@@ -2,6 +2,18 @@ import Api,{ HttpResponse, Result } from './../utils/request';
 
 
 class LineService{
+    // 根据编号删除配置
+    static async RemoveTemplateConfigData(ID : number):Promise<HttpResponse>{
+        return Api.Post("triptemplate_RemoveTemplateConfigData",{ID})
+    }
+    // 根据ke新增编辑配置
+    static async SetTemplateConfigData(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_SetTemplateConfigData",params)
+    }
+    // 获取配置项数据(颜色、国家、季节) Trip_Template_Color Trip_Template_Country Trip_Template_Season
+    static async GetTemplateConfigDataList(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTemplateConfigDataList",params)
+    }
     // 获取配置项数据(颜色、国家、季节)
     static async GetTemplateConfigData(params : any):Promise<HttpResponse>{
         return Api.Post("triptemplate_GetTemplateConfigData",params)

src/store/menu.ts

@@ -10,17 +10,18 @@ export interface Menu{
 export type MenuOwner = '*'|'F'|'V'|'A'|'E'|'M'
 export interface MenuState {
     userMenu:Menu[]
+    temMenu: Menu[]
     currentMenu: Menu|null
 }
 
 const menus:{menu:Menu,owner:MenuOwner}[] = [
-    {menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'F'},
-    {menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'F'},
-    {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'F'},
-    {menu:{name:'字体',icon:'IconAddText',url:'/m'},owner:'M'},
+    {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:'IconPageTemplate',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'},
+    {menu:{name:'字体',icon:'IconAddText',url:'/m/font'},owner:'M'},
     {menu:{name:'账号一览',icon:'IconEarth',url:'/a'},owner:'A'},
     {menu:{name:'成员管理',icon:'IconPeoples',url:'/a/u'},owner:'A'},
     {menu:{name:'数据统计',icon:'IconDashBoard',url:'/a/d'},owner:'A'},
@@ -43,6 +44,7 @@ const menus:{menu:Menu,owner:MenuOwner}[] = [
 export const useMenuStore = defineStore('menu', {
     state: (): MenuState => ({
         userMenu:[],
+        temMenu:[],
         currentMenu:null
     }),
     getters:{
@@ -72,15 +74,12 @@ export const useMenuStore = defineStore('menu', {
             return state.userMenu
         },
         getTemplateMenu:(state)=>{
-            if (!state.userMenu || state.userMenu.length==0) {
             let userPermissions:MenuOwner[] = ['M']
-                
             const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
             if(findFreeMenu){
-                    state.userMenu = findFreeMenu.map(x=>x.menu)
+                state.temMenu = findFreeMenu.map(x=>x.menu)
             }
-            }
-            return state.userMenu
+            return state.temMenu
         },
         getTeamMenu:(state)=>{
             const userStore= useUserStore()

src/views/ErrorNotFound.vue

 <template>
     <div class="full-height column flex-center items-center" style="height: 100vh;">
-        <el-empty :image-size="200" description="没有找到页面" />
+        <el-empty :image-size="200" description="没有找到页面" :image="noDataImg(1)"/>
     </div>
 </template>
+<script setup lang="ts">
+    import { noDataImg } from "@/utils/common";
+</script>
\ No newline at end of file

src/views/Market/Index.vue

@@ -788,15 +788,6 @@ onMounted(()=>{
     .marketTag+.marketTag{
         margin-left: 32px;
     }
-    .colorMark:hover .ColorNameBox {
-        display: block;
-    }
-    .ColorNameBox{
-        width: 0;
-        display: none;
-        left: 0;
-        top: -30px;
-    }
     .ColorName{
         background: black;
         color: #fff;
@@ -804,14 +795,6 @@ onMounted(()=>{
         border-radius: 3px;
         margin-left: -10px;
     }
-    .ColorNameBJ{
-        width: 0px;
-        height: 0px;
-        border: 5px solid transparent;
-        border-top-color: black;
-        display: block;
-        margin-left: 2px;
-    }
     .colorMark{
         width: 28px;
         height: 28px;

src/views/TemplateCenter/Index.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="col row flex-between">
+          <div class="row wrap">
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm shrink">关键字:</span>
+                <el-input style="width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
+                @keyup.enter="search"></el-input>
+            </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span>
+                <el-select v-model="queryObj.TemplateType" 
+                    class="ml-1 shrink"
+                    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 shrink">&nbsp;&nbsp;&nbsp;版型:</span>
+                <el-select v-model="queryObj.TempType" 
+                    class="ml-1 shrink"
+                    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 shrink">&nbsp;&nbsp;颜色:</span>
+                <el-select v-model="queryObj.ColorName" 
+                    class="ml-1 shrink"
+                    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>
+          </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,199 +62,284 @@
               @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">
-    <el-table-column label="字体名称" width="240">
-      <template #default="scope">
-        <span :style="{'font-family':scope.row.reduceName}">{{scope.row.label}}</span>
+    <el-table-column label="封面图">
+        <template #default="scope" width="110">
+          <el-image
+              style="width: 50px; height: auto"
+              :src="scope.row.CoverImg"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="[]"
+              :initial-index="4"
+              fit="contain"
+          />
         </template>
       </el-table-column>
-    <el-table-column label="font-family" width="190">
+      <el-table-column label="名称">
         <template #default="scope">
-        {{scope.row.fontFamily}}
+          <el-tooltip
+              class="box-item"
+              effect="dark"
+              :content="scope.row.Title"
+              placement="top">
+              {{scope.row.Title}}
+          </el-tooltip>
         </template>
       </el-table-column>
-    <el-table-column label="url">
+      <el-table-column label="类型" width="100">
           <template #default="scope">
-        {{scope.row.fontUrl}}
+              <el-tag class="mx-1 q-mr-md" effect="dark" 
+              v-if="scope.row.TemplateType==2" 
+              size="small">广告</el-tag>
           </template>
         </el-table-column>
-    
-    <el-table-column label="裁剪URL">
+      <el-table-column label="创建人/时间" width="150">
         <template #default="scope">
-        {{scope.row.reduceUrl}}
+          {{scope.row.CreateByName}}<br/>
+          <span class="text-info">{{scope.row.CreateTime}}</span>
         </template>
       </el-table-column>
-    <el-table-column label="操作" width="160">
+      <el-table-column label="操作" width="240">
         <template #default="scope">
-        <el-button type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
-        <el-button type="primary" :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
+          <el-button type="primary" :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
+          <el-button type="primary" :icon="View" size="small" @click="getTemplate(scope.row)">详情</el-button>
+          <el-button type="primary" :icon="Delete" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-  <!-- 编辑字体 -->
-  <el-dialog v-model="datas.addEditVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
-  :close-on-click-modal="false" style="width: 573px;" class="small-padding" @close="close">
-      <template #header>
-          <div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}字体</div>
-      </template>
-      <div class="addTemplateBox q-mb-lg fz14">
-        <div class="row flex-end q-mb-lg">
-          <el-button type="primary" size="small" style="color: #ffff;">
-            <el-upload
-              :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
-              action=""
-              :limit="1"
-              :auto-upload="false"
-              accept=".ttf, .woff, otf"
-              :show-file-list="false"
-          >
-              <template #trigger>
-                {{datas.params.id?'替换':'上传'}}字体
-              </template>
-            </el-upload>
-          </el-button>
-        </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.label"
-            placeholder="请输入字体名称" class=""></el-input>
-            <span class="q-px-md shrink">fontFamily：</span>
-            <el-input min="750" v-model="datas.params.fontFamily"
-            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=""></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=""></el-input>
-        </div>
-     </div>
-      <div class="text-center">
-        <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
-        :loading="requestLoading">
-            确认{{datas.params.id?'编辑':'新增'}}
-        </el-button>
-    </div>
-  </el-dialog>
+    <!-- 行程、广告图详情 -->
+  <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
 </template>
 
-  <script lang="ts" setup>
-  import { reactive, ref, inject, onMounted, watch} from "vue";
-  import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
-  import { useUserStore, useFontStore } from "@/store";
-  import { storeToRefs } from "pinia";
-  import { USER_DEFAULT_HEADER } from '@/configs/customer'
-  import { Edit,Delete } from '@element-plus/icons-vue';
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import { CustomerFonts } from '@/store/font'
-  import {getFonts} from '@/utils/psdParser/index'
-  import FontService from '@/services/FontService'
-  import AliyunUpload from '@/utils/upload/aliyun'
-  import { reduceFont } from '@/utils/fonts/convertFont'
-  import FileService from '@/services/FileService'
-
-  const useUser = useUserStore()
-  const { userInfo } = storeToRefs(useUser)
-
-  const { formatFonts } = storeToRefs(useFontStore())
-
-  const userTheme = useUser.getUserTheme
-  
-  const vipTheme = VIP_USER_THEME
-  const enTheme = ENT_USER_THEME
-
-  const dataList = ref([] as Array < any > );
-  const RawDataList =  ref([] as Array < any > );
-  const loading = ref(false as any)
-  const deleteLoading = ref<any>(null)
-  const queryObj = reactive({
+<script setup lang="ts">
+import { reactive, ref, inject, onMounted, watch} from "vue";
+import LineService from '@/services/LineService'
+import ConfigService from '@/services/ConfigService'
+import { useUserStore } from "@/store/user";
+import { useSellTemplateStore } from '@/store'
+import { useScreenStore } from "@/store/screen";
+import { storeToRefs } from "pinia";
+import { injectKeyTemplate } from '@/types/injectKey'
+import { createOpEditorLink, createSaleCreateLink, managerTemplateLink,DominantColour } from '@/utils/common'
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import UserCard from "@/components/User/UserCard.vue";
+import temDetails from "@/components/home/temDetails.vue";
+import { Edit,Delete,View,Search } from '@element-plus/icons-vue';
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+
+import { noDataImg } from "@/utils/common";
+
+const {
+  userInfo
+} = storeToRefs(useUserStore())
+const router = useRouter();
+const lines = ref([] as Array < any > ) //线路
+const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
+const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
+const colorArrOther = ref([] as Array < any > ); //颜色
+const colorArr = ref([] as Array < any > ); //颜色
+const seasonArr = ref([] as Array < any > ); //季节
+const typeArr = ref([] as Array < any > ); //类型
+const sortArr = ref([] as Array < any > ); //排序
+const dataList = ref([] as Array < any > ); //模板数据列表
+
+const layouts = ref([
+  {Name: '不限',Id:0},
+  {Name: '横版',Id:1},
+  {Name: '竖版',Id:2},
+])
+const marketRef = ref<any>()
+const RecommendedSizes = ref([
+  {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
+  {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
+  {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
+  {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
+])
+const scrollContainer = ref<any>()
+const scrollToElement = ref<any>()
+
+
+const loading = ref(false as any)
+const searchData = ref({} as any)
+searchData.value = inject(injectKeyTemplate)
+const marketStore = useScreenStore()
+const { market, ConfigId} = storeToRefs(useScreenStore())
+
+const SalesEditorStore = useSellTemplateStore()
+const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
+const personVisible = ref(false)
+
+const model = ref(2)
+const showCurrentTemplate = ref<any>()
+const imgList = ref<any>()
+const deleteLoading = ref<any>(null)
+const datas = reactive({
+  TemDetails: {},
+  TemplateBoxRec: null,// 推荐尺寸
+  DetailsVisible: false,
+  addVisible: false,
+  loading: false,
+  ColorValue: '',
+  scrollTop: 0,
+  moreList:[
+      {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
+      {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
+      {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
+      {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
+  ],
+  CustomSize:{ // 自定义尺寸
+      width: null,
+      height: null,
+  },
+  SwitchingDiagram: [
+      require("@/assets/img/left.png"),
+      require("@/assets/img/leftActive.png"),
+      require("@/assets/img/right.png"),
+      require("@/assets/img/rightActive.png"),
+  ],
+  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')) {
+  model.value=2
+  if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
+  else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
+}else if(router.currentRoute.value.path.includes('op')) {
+  model.value=0
+} 
+marketStore.setModel(model.value)
+const queryObj = reactive({
   pageIndex: 1,
-    pageCount: 0,
-  })
-  const dataTableRef = ref()
-  const datas = reactive({
-    requestLoading: false,
-    addEditVisible: false,
-    params: {
-      id: 0,
-      fontFamily: '',
-      label: '',
-      fontUrl: '',
-      reduceName: '',
-      reduceUrl: '',
+  pageSize: 20,
+  LineId: 0, //线路Id
+  Title: '', //模板名称
+  CountryName: '', //国家名称
+  SeasonName: '', //季节名称
+  ColorName: '', //颜色名称
+  CountryNames: [], //国家名称
+  SeasonNames: [], //季节名称
+  ColorNames:  [], //颜色名称
+  pageCount: 0, //总页数
+  TempType: 0,
+  TemplateType: TemplateType,//0 不限 1模版 2广告
+  type: 0,
+  sort: 0,//排序方式
+})
+const setTemplateType = ref(1)
+const ColorList = DominantColour()
+
+const tableScrollHandler = ()=>{
+    if(queryObj.pageCount>queryObj.pageIndex){
+        queryObj.pageIndex++
+        queryTemplateBySearchHandler()
+    }
   }
-  })
   
-  const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
-  const uploadingIndex = ref(-1)
+// 删除监听滚动
+const CloseDetails = () => {
+  document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
+}
 
-  const close = () => {
-    datas.params = {
-      id: 0,
-      fontFamily: '',
-      label: '',
-      fontUrl: '',
-      reduceName: '',
-      reduceUrl: '',
+const ToggleImg = (text: String) => {
+  if(text=='left'){
+      if(datas.currentImg>0) {
+          datas.currentImg--
+          scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
       }
   }
-  const ConfirmCreation = async () => {
-    //添加、编辑字体
-    if(!datas.params.label)return ElMessage({
-      message:'请输入名称',
-      type:'error'
-    })
-    if(!datas.params.fontFamily)return ElMessage({
-      message:'请输入fontFamily',
-      type:'error'
-    })
-    if(!datas.params.URL)return ElMessage({
-      message:'请输入URL',
-      type:'error'
+  if(text=='right'){
+      if(datas.currentImg<imgList.value.length-1) {
+          datas.currentImg++
+          scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
+      }
+  }
+  
+}
+// 版型 横版 竖版
+const SwitchingVersion = (row: Object) =>{
+  queryObj.TempType = row.Id
+  search()
+}
+const setDimension = () => {
+  datas.TemplateBoxRec = null
+}
+const Recommended = (row:Object) => {
+  datas.TemplateBoxRec = row
+  datas.CustomSize.width = null
+  datas.CustomSize.height = null
+}
+const ConfirmCreation = () => {
+  if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
+      return ElMessage.warning({
+          showClose: true,
+          message: `请选择推荐尺寸或自定义尺寸`,
       })
-    if(!datas.params.reduceUrl)return ElMessage({
-      message:'请输入裁剪URL',
-      type:'error'
+  }
+  if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
+      if(!datas.width){
+          return ElMessage.warning({
+              showClose: true,
+              message: `请输入自定义宽`,
           })
-    datas.requestLoading = true
-    const result = await useFontStore().uploadFontAsync(datas.params)
-    if(result){
-      datas.addEditVisible = false
-      datas.requestLoading = false
-      querySearchHandler()
-    }else{
-        ElMessage({
-            message:'字体上传失败,请重试',
-            type:'error'
+      }
+      if(!datas.height){
+          return ElMessage.warning({
+              showClose: true,
+              message: `请输入自定义高`,
           })
-        datas.requestLoading = false
       }
   }
-  const addFont = () => {
-    datas.addEditVisible = true
+  datas.addVisible = false
+  if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
+      VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
+      VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
+      if(datas.TemplateBoxRec.Id==3) {
+          datas.TemplateBoxRec = null
+          addTemplate(1)
+      }else {
+          datas.TemplateBoxRec = null
+          addTemplate(2)
       }
-  const editDelete = (item: Object,index: Number) => {
-    if(index>=0){
-      deleteFont(index,item)
   }else{
-      datas.params = JSON.parse(JSON.stringify(item))
-      datas.addEditVisible = true
-    }
+      VIEWPORT_SIZE.value = datas.CustomSize.width
+      VIEWPORT_VER_SIZE.value = datas.CustomSize.height
+      datas.CustomSize.width = null
+      datas.CustomSize.height = null
+      addTemplate(2)
   }
+}
+// 喜欢、不喜欢接口调用
+const BeFondOf = (row: Object) => {
+  row.checked = !row.checked
+}
+const addTemplate = (type:number) =>{
+  // searchData.value.TemplateType = type
+  // marketStore.setMarket(!market)
+  // searchData.value.TempId = 0
+  router.push({
+      path:`/create_template/${type}`
+  })
+}
 
-  const deleteFont = (index: Number, item: Object) => {
+const CloseTemplate = () => {
+  if(SalesBack.value==1){
+      marketStore.setMarket(false)
+      SalesEditorStore.setSalesEditor(SalesEditor.value)
+  }else SalesEditorStore.setSalesEditor(0)
+}
+// 删除模版
+const deleteTemplate = (item:any) => {
   ElMessageBox.confirm(
-        `此操作将删除 ${item.label} 字体，是否确定?`,
+      `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
       '提示',
       {
       confirmButtonText: '确定',
@@ -210,166 +348,760 @@
       }
   ).then(async () => {
       try {
-          dataList.value.splice(index,1)
-            // let queryMsg = {
-            //     TempId: item.TempId
-            // }
-            // deleteLoading.value = ElLoading.service({
-            //     lock:true,
-            //     text:'正在处理'
-            // })
-            // let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
-            // if (dataRes.data.resultCode == 1) {
-            //     queryObj.pageIndex = 1
-            //     ElMessage({
-            //         showClose: true,
-            //         message: `删除${item.label}成功`,
-            //         type: 'success',
-            //     })
-            //     await queryTemplateBySearchHandler()
-            // }else {
-            //     ElMessage({
-            //         showClose: true,
-            //         message: `删除${item.label}失败`,
-            //         type: 'warning',
-            //     }) 
-            // }
-            // deleteLoading.value.close()
-            // deleteLoading.value = null
+          let queryMsg = {
+              TempId: item.TempId
+          }
+          deleteLoading.value = ElLoading.service({
+              lock:true,
+              text:'正在处理'
+          })
+          let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
+          if (dataRes.data.resultCode == 1) {
+              queryObj.pageIndex = 1
+              ElMessage({
+                  showClose: true,
+                  message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
+                  type: 'success',
+              })
+              await queryTemplateBySearchHandler()
+          }else {
+              ElMessage({
+                  showClose: true,
+                  message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
+                  type: 'warning',
+              }) 
+          }
+          deleteLoading.value.close()
+          deleteLoading.value = null
       } catch (error) {}
   }).catch(() => {})
+  
+}
+// 图片滚动翻页
+const handleScroll = (e) =>{
+  let temp = document.querySelector("#scrollId .Details-left").scrollTop;
+  let PageImageList = imgList.value
+  for(let i=0;i<PageImageList.length;i++){
+      if(temp>=PageImageList[i].imgTop&&datas.currentImg!=i) datas.currentImg = i
   }
+}
+// 查看所有子模版
+const getTemplate = async (item:any) => {
+  DetailsVisible.value = true
+  datas.TemDetails = item
+}
 
-  const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
-    const ns = uploadFile.name.toLowerCase().split('.')
-    const n = ns[ns.length-1]
-    const acceptFile = ['ttf','otf','woff']
-    if(acceptFile.indexOf(n)==-1){
-        ElMessage.error({
-            message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
+/**
+* 页面跳转
+*/
+const goToTemplate = (item: any) => {
+  let url = ''
+  if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
+  else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
+  else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
+  if(url!='') {
+      router.push({
+          path:url
       })
-        return;
   }
-    // uploadingIndex.value = dataList.value?.findIndex(x=>x.fontFamily==fontName)??-1
-    try {
-        let info:any = null
+}
+
+const search = () => {
+  queryObj.pageIndex = 1
+  queryTemplateBySearchHandler()
+}
+/***
+* 获取模板市场分页列表
+*/
+const queryTemplateBySearchHandler = async () => {
+  const parmas = router.currentRoute.value.params
+  if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
+  loading.value = true
   try {
-            info = await reduceFont(uploadFile?.raw)
+      if(queryObj.pageIndex == 1) dataList.value =[]
+      let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
+      if (pageRes.data.resultCode == 1) {
+          let arrList = function(list){
+              list.forEach(x=>{
+                  x.checked = false
+              })
+          }
+          arrList(pageRes.data.data.pageData)
+          dataList.value = dataList.value.concat(pageRes.data.data.pageData);
+          queryObj.pageCount = pageRes.data.data.pageCount;
+      }
+      loading.value = false
   } catch (error) {
-            ElMessage.error({message:'字体无法识别，请更换'})
-            // uploadingIndex.value=-1
-            return
+      loading.value = false
   }
+}
 
-        const flagIndex = dataList.value.findIndex(x=>x.label==info.name)
-        if(flagIndex>0){
-            ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
-            // uploadingIndex.value=-1
-            return
+//线路切换
+const onLineChangeHandler = (lineId: number) => {
+  queryObj.LineId = lineId;
+  search()
+}
+//国家切换
+const onCountryNameChangeHandler = (row: Object) => {
+  if(row=='') {
+      queryObj.CountryName = ''
+      queryObj.CountryNames = []
+      countriesOther.value.forEach(x=>{
+          x.checked = false
+      })
+      countries.value.forEach(x=>{
+          x.checked = false
+      })
+  }else{
+      queryObj.CountryName = row.CountryName;
+      if(!row.checked) {
+          row.checked = true
+          queryObj.CountryNames.push(row.CountryName)
+      }else{
+          row.checked = false
+          let list = queryObj.CountryNames.filter(x=>{
+              if(x!=row.CountryName) return x
+          })
+          queryObj.CountryNames = list
+          if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
       }
-        let url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
-        if(url && url!=''){
+  }
+  search()
+}
 
-            if(url.indexOf('"')!=-1) url = url.replaceAll('"','')
-            let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
-            try {
-                if(info.file){
-                    label = info.name
-                    reduceName = `${fontName}_reduce`
-                    reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
+//季节切换
+const onSeasonNameChangeHandler = (row: Object) => {
+  if(row=='') {
+      queryObj.SeasonName = ''
+      queryObj.SeasonNames = []
+      seasonArr.value.forEach(x=>{
+          x.checked = false
+      })
+  }else{
+      queryObj.SeasonName = row.SeasonName;
+      if(!row.checked) {
+          row.checked = true
+          queryObj.SeasonNames.push(row.SeasonName)
+          // if(queryObj.SeasonNames.length==4) {
+          //     queryObj.SeasonName = ''
+          //     seasonArr.value.forEach(x=>{
+          //         x.checked = false
+          //     })
+          // }
+      }else{
+          row.checked = false
+          let list = queryObj.SeasonNames.filter(x=>{
+              if(x!=row.SeasonName) return x
+          })
+          queryObj.SeasonNames = list
+          if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
       }
-            } catch (error) { 
   }
-            datas.params.label = label
-            datas.params.fontFamily = fontName
-            datas.params.fontUrl = url
-            datas.params.reduceName = reduceName
-            datas.params.reduceUrl = reduceUrl
-            await ConfirmCreation()
+  search()
+}
+
+//类型切换
+const onTypeChangeHandler = (Type: string,num: Number) => {
+  if(num==1){
+      queryObj.sort = Type;
+  }else if(num==2){
+      setTemplateType.value = Type
+  } else{
+      searchData.value.MarketTemplateType = Type
+      queryObj.TemplateType = Type;
+  }
+  
+  if(num!=2) search()
+}
+
+//颜色切换
+const onColorNameChangeHandler = (row: Object) => {
+  if(row=='') {
+      queryObj.ColorName = ''
+      queryObj.ColorNames = []
+      colorArr.value.forEach(x=>{
+          x.checked = false
+      })
   }else{
-            ElMessage({
-                message:'上传失败，请重试',
-                type:'error'
+      queryObj.ColorName = row.ColorName;
+      if(!row.checked) {
+          row.checked = true
+          queryObj.ColorNames.push(row.ColorName)
+      }else{
+          row.checked = false
+          let list = queryObj.ColorNames.filter(x=>{
+              if(x!=row.ColorName) return x
           })
+          queryObj.ColorNames = list
+          if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
       }
-    } catch (error) {
   }
+  search()
 }
-  const tableScrollHandler = ()=>{
-    if(queryObj.pageCount>queryObj.pageIndex){
-        queryObj.value.pageIndex++
-        refreshHandler()
-    }
+
+/**
+* 获取线路列表
+*/
+const getLinesHandler = async () => {
+  try {
+      let response = await LineService.GetLineListAsync()
+      if (response.data.resultCode == 1) {
+          lines.value = response.data.data;
       }
-  const search = () => {
-    if(queryObj.Title) dataList.value = RawDataList.value.filter(x=> {return x.label.indexOf(queryObj.Title)!=-1})
-    else dataList.value = JSON.parse(JSON.stringify(RawDataList.value))
-    // queryObj.pageIndex = 1
-    // querySearchHandler()
+  } catch (error) {
+      
   }
+}
 
-  const querySearchHandler = async () => {
-    loading.value = true
+/**
+* 获取模板市场查询条件
+*/
+const getTemplateQuery = async () => {
   try {
-        let pageRes = await FontService.GetAllFontsAsync();
-        if (pageRes.data.resultCode == 1) {
-            // let arrList = function(list){
-            //     list.forEach(x=>{
-            //         x.checked = false
+      let res = await ConfigService.GetTemplateQueryAsync();
+      if (res.data.resultCode == 1) {
+          var tempData = res.data.data;
+          let arrList = function(list) {
+              list.forEach(x => {
+                  x.checked = false
+              });
+          }
+          //国家
+          if (tempData && tempData.CountryList) {
+              arrList(tempData.CountryList)
+              countriesOther.value = tempData.CountryList.filter((x,index)=>{ 
+                  if(model.value==1){ return index>=12 }
+                  else return index>=13
+              })
+              countries.value = tempData.CountryList.filter((x,index)=>{ 
+                  if(model.value==1) {return index<12}
+                  else return index<13
+              })
+          }
+          //颜色
+          if (tempData && tempData.ColorList) {
+              for(let i=0;i<ColorList.length;i++){
+                  colorArr.value.push({
+                      ColorName: ColorList[i].ColorName,
+                      ColorValue: ColorList[i].ColorValue,
+                      checked: false,
+                  })
+              }
+              // arrList(tempData.ColorList)
+              // colorArrOther.value = tempData.ColorList.filter((x,index)=>{ 
+              //     if(model.value==1){ return index>=15 }
+              //     else return index>=14
+              // })
+              // colorArr.value = tempData.ColorList.filter((x,index)=>{ 
+              //     if(model.value==1){ return index<14 }
+              //     else return index<14
               // })
-            // }
-            // arrList(pageRes.data.data.pageData)
-            dataList.value = pageRes.data.data //dataList.value.concat(pageRes.data.data);
-            RawDataList.value = pageRes.data.data
-            // queryObj.pageCount = pageRes.data.data.pageCount;
           }
-        loading.value = false
+          //季节
+          if (tempData && tempData.SeasonList) {
+              arrList(tempData.SeasonList)
+              seasonArr.value = tempData.SeasonList;
+          }
+          //类型
+          for(let i=0;i<3;i++){
+              let text = '不限'
+              if(i==1) text = '行程'
+              if(i==2) text = '广告'
+              typeArr.value.push({
+                  type:i,
+                  typeName:text
+              })
+          }
+          for(let i=0;i<2;i++){
+              let text = '综合排序'
+              if(i==1) text = '最新模板'
+              sortArr.value.push({
+                  type:i,
+                  typeName:text
+              })
+          }
+      }
   } catch (error) {
-        loading.value = false
+      
   }
 }
-querySearchHandler()
-  </script>
+const scrollingHandler = () =>{
+  if(marketRef.value && !loading.value){
+      let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
+      let scrollTop = marketRef.value.scrollTop
+      if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
+          queryObj.pageIndex++
+          queryTemplateBySearchHandler()
+      }
+      datas.scrollTop =  scrollTop
+  }
+  
+}
 
-  <style scoped>
-  .addTemplateInput span {
-    width: 95px;
-    text-align: right;
+getLinesHandler();
+getTemplateQuery();
+queryTemplateBySearchHandler();
+
+onMounted(()=>{
+  // marketRef.value.addEventListener("scroll", scrollingHandler);
+})
+</script>
+
+<style lang="scss">
+  @font-face {
+      font-family: "aliMarketfont";
+      font-weight: 400;
+      src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
+          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;
+          box-shadow: 0 0 0
+      }
+  }
+  .MarketRec{
+      margin-top: 23px;
+      margin-bottom: 24px;
+  }
+  .addTemplateBoxRec.active{
+      background: #FF674D;
   }
-  .user-header {
-    padding: 16px 24px;
+  .addTemplateBoxRec{
+      line-height: 36px;
+      background: #EFEFEF;
+      padding: 0 15px;
+      margin-bottom: 17px;
+  }
+  .addTemplateBox{
+      padding: 0 41px;
+  }
+  .el-button:not(.is-link),.el-menu-item,
+  .el-button:not(.is-link):hover,.el-menu-item:hover{
+      border: 0;
+  }
+  .marketTagDown .el-check-tag{
+      line-height: 22px;
+      margin-left: 13px;
+      margin-right: 0;
+  }
+  .marketTagDown {
+      width: 409px;
+  }
+  .marketTagDown.marketTagDown{
+      width: 309px;
+  }
+  .MarketButton.active.active2{
+      margin-right: 0;
+  }
+  .MarketButton.active.active2::after{
+      background: none;
+  }
+  .MarketButton{
+      width: 90px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 14px;
+      text-align: center;
+      color: #9EA2B3;
       position: relative;
+      margin-right: 13px;
+  }
+  .MarketButton.active{
+      background: #F4F7FE;
+      border-radius: 6px;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      -ms-border-radius: 6px;
+      -o-border-radius: 6px;
+      color: #1C1C1C;
+  }
+  .MarketButton.active::after{
+      content: "";
+      position: absolute;
+      left: 35.5px;
+      bottom: 0;
+      width: 19px;
+      height: 4px;
+      background: linear-gradient(134deg, #649DED, #570AD8);
+  }
+  .MarketType{
+      margin-top: 29px;
+      margin-bottom: 33px;
+      /* background: #fff; */
+  }
+  .marketTag-color{
+      margin-bottom: 13px;
+      margin-left: 15px;
+      margin-right: 31px;
+      text-align: center;
+  }
+  .marketTagTitleBox{
+      padding-right: 30px;
+  }
+  .marketTag-Title span:first-child{
+      font-weight: bold;
+      color: #1C1C1C;
+  }
+  .marketTag-Title{
+      font-family: PingFang SC;
       font-size: 14px;
-    color:#FFF;
+  }
+  .marketTag-from{
+      margin-top: 38px;
+  }
+  
+  .MarketHeader>div{
+      padding: 10px 22px; 
+      max-width:1440px; 
+      margin:0 auto;
+  }
+  .MarketHeader{
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 2;
+      background: #E3ECFF;
+      animation:myHeader 1s;
+    -webkit-animation:myHeader 1s;
+  }
+      @keyframes myHeader
+      {
+          from {top: -100px;}
+          to {top: 0px;}
+      }
+
+      @-webkit-keyframes myHeader 
+      {
+          from {top: -100px;}
+          to {top: 0px;}
+      }
+  
+ 
+  
+  
+  
+  .Market-select-line{
+      width: 1px;
+      height: 14px;
+      background: #F4F4F4;
+      right: 61px;
+  }
+  .Market-select ::v-deep(.el-input__wrapper){
+      box-shadow: 0 0 0;
+      border-radius: 8px 0 0 8px;
+      padding: 1px 23px;
+  }
+  ::v-deep(.el-input__wrapper):hover{
+      box-shadow: 0 0 0;
+  }
+  ::v-deep(.el-input__wrapper.is-focus){
+      box-shadow: 0 0 0;
+  }
+  ::v-deep(.el-input-group__append){
+      box-shadow: 0 0 0;
+      background: #fff;
+  }
+  .input-with-select{
+      height: 46px;
+  }
+  .MarketAdd{
+      width: 90px;
+      height: 36px;
+      background: linear-gradient(134deg, #649DED, #570AD8);
+      border-radius: 8px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 14px !important;
+      color: #FFFFFF;
+      line-height: 36px;
+      text-align: center;
+  }
+  .Market-fromBj{
+      height: 486px;
+      background: url('../../assets//img/homeBJ.png') no-repeat;
+      background-size: auto 100%;
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
       z-index: 1;
-    width:100%;
+  }
+  .Market-from{
+      background: linear-gradient(0deg, #FFF, #E3ECFF);
+      height: 90vh;
+      overflow: auto;
+  }
+  .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
+      padding: 0;
+  }
+  .marketTag{
+      padding: 20px 0px 0 30px;
+      width: 460px;
       overflow: hidden;
+      /* height: 245px; */
   }
-  
-  .user-header::after {
+  .marketTag+.marketTag{
+      margin-left: 32px;
+  }
+  .colorMark:hover .ColorNameBox {
+      display: block;
+  }
+  .ColorNameBox{
+      width: 0;
+      display: none;
+      left: 0;
+      top: -30px;
+  }
+  .ColorName{
+      background: black;
+      color: #fff;
+      padding: 2px 10px;
+      border-radius: 3px;
+      margin-left: -10px;
+  }
+  .ColorNameBJ{
+      width: 0px;
+      height: 0px;
+      border: 5px solid transparent;
+      border-top-color: black;
+      display: block;
+      margin-left: 2px;
+  }
+  .colorMark{
+      width: 28px;
+      height: 28px;
+      position: relative;
+      display: inline-block;
+      border-radius: 50%;
+      margin: 4px;
+      background: #fff;
+      border: 4px solid #eee;
+  }
+  .aliMarketfont {
+      font-family: aliMarketfont;
+  }
+  .el-check-tag.is-checked{
+      background: #000;
+      color: #fff;
+  }
+  .el-check-tag {
+      width: 86px;
+      height: 36px;
+      margin-right: 14px;
+      margin-bottom: 18px;
+      line-height: 36px;
+      border-radius: 6px;
+      text-align: center;
+      background: #FFF;
+      font-weight: 400 !important;
+      font-size: 14px !important;
+  }
+  .MarketIndexListBox{
+      /* width:calc(20% - 10px); */
+      /* margin: 10px 10px 0 0;  */
+      /* padding:5px; */
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
+      grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
+      max-height: 362px;
+      min-height: 173px;
+  }
+  .MarketIndexList{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+  }
+  .MarketIndexList-Hover{
+      z-index: 1;
       position: absolute;
       top: 0;
-    right: -48px;
-    bottom: -12px;
-    z-index: -1;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(23,23,23,0.5);
+      opacity: 0;
+      transition: opacity 0.5s ease;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: $themeHoverColor;
+  }
+  .MarketIndexListBox:hover .MarketIndexList-Hover{
+      opacity: 1;
+  }
+  .MarketIndexList-Hover div span{
+      /* display: inline-block; */
+      /* background: #fff; */
+      /* border-radius: 4px; */
+      /* padding: 0 10px 3px 10px; */
+  }
+  .MarketIndexListBox:hover{
+      top: -5px;
+      
+  }
+  
+  .MarketIndexList-img{
       width: 100%;
-    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
-    content: "";
-    transform: scale(2);
-    transform-origin: right center;
+      /* height: 0;
+      position: relative;
+      padding-bottom: 56.25%;
+      overflow: hidden; */
+      border-radius: 6px;
   }
-  .user-label{
-    font-size: 12px;
-    margin-bottom: 8px;
+  .MarketIndexList-img img{
+      /* position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%; */
+      width: 100%;
+      /* height: auto;
+      position: absolute; */
+      object-fit: cover;
   }
-  .user-card {
-    width: 33%;
-    min-height: 112px;
+  .MarketIndexList-text{
+      font-size: 14px;
+      padding: 10px;
+      padding-bottom: 5px;
   }
-  .user-card .title,
-  .enter-card .title{
-    font-size: 15px;
-    font-weight: bold;
-    color: #000;
+  .MarketIndexList-text span{
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+  }
+  .MarketVerticalLine{
+      width: 1px;
+      height: 80%;
+      background: #dcdfe6;
+      margin-right: 30px;
+      margin-top: 5px;
+  }
+  .MarketIndexButtom{
+      color: #ffff;
+      width: 86px;
+      height: 36px;
+      letter-spacing: 1px;
+      font-size: 14px !important;
+      border-radius: 6px;
+  }
+  .MarketIconAbsolute{
+      width: 36px;
+      height: 36px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      text-align: center;
+      line-height: 36px;
+      color: #B9B9B9;
+      z-index: 2;
+  }
+  .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
+      color: #fff;
+  }
+  .MarketIndexButtomIcon>div:hover .MarketOpa2{
+      opacity: 0.22;
+  }
+  .MarketIndexButtomIcon>div{
+      position: relative;
+      width: 36px;
+      height: 36px;
+  }
+  .MarketOpa2{
+      width: 36px;
+      height: 36px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      opacity: 0;
+  }
+  .MarketIndexButtomIcon{
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      padding: 14px 16px;
+  }
+  .MarketIndexButtomBox{
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 15px;
+      text-align: center;
+  }
+  .layout-item{
+      width: 180px;
+  }
+  .el-check-tag.el-check-tagW76{
+      width: 76px;
+      margin-left: 0;
+  }
+  .addTemplateBoxRec.addTemplateBoxRecw136{
+      width: 136px;
+  }
+  .MarketAdd.MarketAddw140{
+      width: 140px;
+      height: 42px;
+      line-height: 42px;
   }
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file

src/views/TemplateCenter/Layout.vue

@@ -32,20 +32,29 @@
 </template>
 
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
 import UserCard from "@/components/User/UserCard.vue";
-import { useMenuStore } from "@/store";
+import { useMenuStore,useScreenStore } from "@/store";
 import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useUserStore } from "@/store/user"
 
 const router = useRouter()
 const useMenu = useMenuStore();
 const menus = ref(useMenu.getTemplateMenu);
+const { model } = storeToRefs(useScreenStore())
 const activeIndex = ref(0)
 
+const userStore= useUserStore()
+const userInfo = userStore.getUser
+if(!userInfo.isTemplate) router.push('/notfound')
+
 const forwardSpace = () => router.push('/space')
 
 watch(() => router.currentRoute.value.path, (toPath) => {
-    menus.value = useMenu.getUserMenu
+    if(!userInfo.isTemplate) return router.push('/notfound')
+
+    menus.value = useMenu.getTemplateMenu
     if(!menus.value) return
     activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
 },{immediate: true,deep: true})

src/views/TemplateCenter/TemplateManagement.vue

-<template>
-    <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">
-                <img src="../../assets/img/home-search.png" width="21" height="21"
-                @click="search"/>
-            </div>
-          </template>
-        </el-input> -->
-        
-      </div>
-      <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
-      v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
-      <el-table-column label="封面图">
-          <template #default="scope" width="110">
-            <el-image
-                style="width: 50px; height: auto"
-                :src="scope.row.CoverImg"
-                :zoom-rate="1.2"
-                :max-scale="7"
-                :min-scale="0.2"
-                :preview-src-list="[]"
-                :initial-index="4"
-                fit="contain"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="名称">
-          <template #default="scope">
-            <el-tooltip
-                class="box-item"
-                effect="dark"
-                :content="scope.row.Title"
-                placement="top">
-                {{scope.row.Title}}
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column label="类型" width="100">
-            <template #default="scope">
-                <el-tag class="mx-1 q-mr-md" effect="dark" 
-                v-if="scope.row.TemplateType==2" 
-                size="small">广告</el-tag>
-            </template>
-          </el-table-column>
-        <el-table-column label="创建人/时间" width="150">
-          <template #default="scope">
-            {{scope.row.CreateByName}}<br/>
-            <span class="text-info">{{scope.row.CreateTime}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="240">
-          <template #default="scope">
-            <el-button type="primary" :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
-            <el-button type="primary" :icon="View" size="small" @click="getTemplate(scope.row)">详情</el-button>
-            <el-button type="primary" :icon="Delete" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 行程、广告图详情 -->
-    <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, inject, onMounted, watch} from "vue";
-import LineService from '@/services/LineService'
-import ConfigService from '@/services/ConfigService'
-import { useUserStore } from "@/store/user";
-import { useSellTemplateStore } from '@/store'
-import { useScreenStore } from "@/store/screen";
-import { storeToRefs } from "pinia";
-import { injectKeyTemplate } from '@/types/injectKey'
-import { createOpEditorLink, createSaleCreateLink, managerTemplateLink,DominantColour } from '@/utils/common'
-import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
-import { useRouter } from "vue-router";
-import UserCard from "@/components/User/UserCard.vue";
-import temDetails from "@/components/home/temDetails.vue";
-import { Edit,Delete,View,Search } from '@element-plus/icons-vue';
-import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
-
-import { noDataImg } from "@/utils/common";
-
-const {
-    userInfo
-} = storeToRefs(useUserStore())
-const router = useRouter();
-const lines = ref([] as Array < any > ) //线路
-const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
-const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
-const colorArrOther = ref([] as Array < any > ); //颜色
-const colorArr = ref([] as Array < any > ); //颜色
-const seasonArr = ref([] as Array < any > ); //季节
-const typeArr = ref([] as Array < any > ); //类型
-const sortArr = ref([] as Array < any > ); //排序
-const dataList = ref([] as Array < any > ); //模板数据列表
-
-const layouts = ref([
-    {Name: '不限',Id:0},
-    {Name: '横版',Id:1},
-    {Name: '竖版',Id:2},
-])
-const marketRef = ref<any>()
-const RecommendedSizes = ref([
-    {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
-    {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
-    {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
-    {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
-])
-const scrollContainer = ref<any>()
-const scrollToElement = ref<any>()
-
-
-const loading = ref(false as any)
-const searchData = ref({} as any)
-searchData.value = inject(injectKeyTemplate)
-const marketStore = useScreenStore()
-const { market, ConfigId} = storeToRefs(useScreenStore())
-
-const SalesEditorStore = useSellTemplateStore()
-const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
-const personVisible = ref(false)
-
-const model = ref(2)
-const showCurrentTemplate = ref<any>()
-const imgList = ref<any>()
-const deleteLoading = ref<any>(null)
-const datas = reactive({
-    TemDetails: {},
-    TemplateBoxRec: null,// 推荐尺寸
-    DetailsVisible: false,
-    addVisible: false,
-    loading: false,
-    ColorValue: '',
-    scrollTop: 0,
-    moreList:[
-        {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
-        {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
-        {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
-        {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
-    ],
-    CustomSize:{ // 自定义尺寸
-        width: null,
-        height: null,
-    },
-    SwitchingDiagram: [
-        require("@/assets/img/left.png"),
-        require("@/assets/img/leftActive.png"),
-        require("@/assets/img/right.png"),
-        require("@/assets/img/rightActive.png"),
-    ],
-    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')) {
-    model.value=2
-    if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
-    else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
-}else if(router.currentRoute.value.path.includes('op')) {
-    model.value=0
-} 
-marketStore.setModel(model.value)
-const queryObj = reactive({
-    pageIndex: 1,
-    pageSize: 20,
-    LineId: 0, //线路Id
-    Title: '', //模板名称
-    CountryName: '', //国家名称
-    SeasonName: '', //季节名称
-    ColorName: '', //颜色名称
-    CountryNames: [], //国家名称
-    SeasonNames: [], //季节名称
-    ColorNames:  [], //颜色名称
-    pageCount: 0, //总页数
-    TempType: 0,
-    TemplateType: TemplateType,//0 不限 1模版 2广告
-    type: 0,
-    sort: 0,//排序方式
-})
-const setTemplateType = ref(1)
-const ColorList = DominantColour()
-
-const tableScrollHandler = ()=>{
-      if(queryObj.pageCount>queryObj.pageIndex){
-          queryObj.pageIndex++
-          queryTemplateBySearchHandler()
-      }
-    }
-    
-// 删除监听滚动
-const CloseDetails = () => {
-    document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
-}
-
-const ToggleImg = (text: String) => {
-    if(text=='left'){
-        if(datas.currentImg>0) {
-            datas.currentImg--
-            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
-        }
-    }
-    if(text=='right'){
-        if(datas.currentImg<imgList.value.length-1) {
-            datas.currentImg++
-            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
-        }
-    }
-    
-}
-// 版型 横版 竖版
-const SwitchingVersion = (row: Object) =>{
-    queryObj.TempType = row.Id
-    search()
-}
-const setDimension = () => {
-    datas.TemplateBoxRec = null
-}
-const Recommended = (row:Object) => {
-    datas.TemplateBoxRec = row
-    datas.CustomSize.width = null
-    datas.CustomSize.height = null
-}
-const ConfirmCreation = () => {
-    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
-        return ElMessage.warning({
-            showClose: true,
-            message: `请选择推荐尺寸或自定义尺寸`,
-        })
-    }
-    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
-        if(!datas.width){
-            return ElMessage.warning({
-                showClose: true,
-                message: `请输入自定义宽`,
-            })
-        }
-        if(!datas.height){
-            return ElMessage.warning({
-                showClose: true,
-                message: `请输入自定义高`,
-            })
-        }
-    }
-    datas.addVisible = false
-    if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
-        VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
-        VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
-        if(datas.TemplateBoxRec.Id==3) {
-            datas.TemplateBoxRec = null
-            addTemplate(1)
-        }else {
-            datas.TemplateBoxRec = null
-            addTemplate(2)
-        }
-    }else{
-        VIEWPORT_SIZE.value = datas.CustomSize.width
-        VIEWPORT_VER_SIZE.value = datas.CustomSize.height
-        datas.CustomSize.width = null
-        datas.CustomSize.height = null
-        addTemplate(2)
-    }
-}
-// 喜欢、不喜欢接口调用
-const BeFondOf = (row: Object) => {
-    row.checked = !row.checked
-}
-const addTemplate = (type:number) =>{
-    // searchData.value.TemplateType = type
-    // marketStore.setMarket(!market)
-    // searchData.value.TempId = 0
-    router.push({
-        path:`/create_template/${type}`
-    })
-}
-
-const CloseTemplate = () => {
-    if(SalesBack.value==1){
-        marketStore.setMarket(false)
-        SalesEditorStore.setSalesEditor(SalesEditor.value)
-    }else SalesEditorStore.setSalesEditor(0)
-}
-// 删除模版
-const deleteTemplate = (item:any) => {
-    ElMessageBox.confirm(
-        `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
-        '提示',
-        {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        }
-    ).then(async () => {
-        try {
-            let queryMsg = {
-                TempId: item.TempId
-            }
-            deleteLoading.value = ElLoading.service({
-                lock:true,
-                text:'正在处理'
-            })
-            let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
-            if (dataRes.data.resultCode == 1) {
-                queryObj.pageIndex = 1
-                ElMessage({
-                    showClose: true,
-                    message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
-                    type: 'success',
-                })
-                await queryTemplateBySearchHandler()
-            }else {
-                ElMessage({
-                    showClose: true,
-                    message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
-                    type: 'warning',
-                }) 
-            }
-            deleteLoading.value.close()
-            deleteLoading.value = null
-        } catch (error) {}
-    }).catch(() => {})
-    
-}
-// 图片滚动翻页
-const handleScroll = (e) =>{
-    let temp = document.querySelector("#scrollId .Details-left").scrollTop;
-    let PageImageList = imgList.value
-    for(let i=0;i<PageImageList.length;i++){
-        if(temp>=PageImageList[i].imgTop&&datas.currentImg!=i) datas.currentImg = i
-    }
-}
-// 查看所有子模版
-const getTemplate = async (item:any) => {
-    DetailsVisible.value = true
-    datas.TemDetails = item
-}
-
-/**
- * 页面跳转
- */
-const goToTemplate = (item: any) => {
-    let url = ''
-    if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
-    else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
-    else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
-    if(url!='') {
-        router.push({
-            path:url
-        })
-    }
-}
-
-const search = () => {
-    queryObj.pageIndex = 1
-    queryTemplateBySearchHandler()
-}
-/***
- * 获取模板市场分页列表
- */
-const queryTemplateBySearchHandler = async () => {
-    const parmas = router.currentRoute.value.params
-    if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
-    loading.value = true
-    try {
-        if(queryObj.pageIndex == 1) dataList.value =[]
-        let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
-        if (pageRes.data.resultCode == 1) {
-            let arrList = function(list){
-                list.forEach(x=>{
-                    x.checked = false
-                })
-            }
-            arrList(pageRes.data.data.pageData)
-            dataList.value = dataList.value.concat(pageRes.data.data.pageData);
-            queryObj.pageCount = pageRes.data.data.pageCount;
-        }
-        loading.value = false
-    } catch (error) {
-        loading.value = false
-    }
-}
-
-//线路切换
-const onLineChangeHandler = (lineId: number) => {
-    queryObj.LineId = lineId;
-    search()
-}
-//国家切换
-const onCountryNameChangeHandler = (row: Object) => {
-    if(row=='') {
-        queryObj.CountryName = ''
-        queryObj.CountryNames = []
-        countriesOther.value.forEach(x=>{
-            x.checked = false
-        })
-        countries.value.forEach(x=>{
-            x.checked = false
-        })
-    }else{
-        queryObj.CountryName = row.CountryName;
-        if(!row.checked) {
-            row.checked = true
-            queryObj.CountryNames.push(row.CountryName)
-        }else{
-            row.checked = false
-            let list = queryObj.CountryNames.filter(x=>{
-                if(x!=row.CountryName) return x
-            })
-            queryObj.CountryNames = list
-            if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
-        }
-    }
-    search()
-}
-
-//季节切换
-const onSeasonNameChangeHandler = (row: Object) => {
-    if(row=='') {
-        queryObj.SeasonName = ''
-        queryObj.SeasonNames = []
-        seasonArr.value.forEach(x=>{
-            x.checked = false
-        })
-    }else{
-        queryObj.SeasonName = row.SeasonName;
-        if(!row.checked) {
-            row.checked = true
-            queryObj.SeasonNames.push(row.SeasonName)
-            // if(queryObj.SeasonNames.length==4) {
-            //     queryObj.SeasonName = ''
-            //     seasonArr.value.forEach(x=>{
-            //         x.checked = false
-            //     })
-            // }
-        }else{
-            row.checked = false
-            let list = queryObj.SeasonNames.filter(x=>{
-                if(x!=row.SeasonName) return x
-            })
-            queryObj.SeasonNames = list
-            if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
-        }
-    }
-    search()
-}
-
-//类型切换
-const onTypeChangeHandler = (Type: string,num: Number) => {
-    if(num==1){
-        queryObj.sort = Type;
-    }else if(num==2){
-        setTemplateType.value = Type
-    } else{
-        searchData.value.MarketTemplateType = Type
-        queryObj.TemplateType = Type;
-    }
-    
-    if(num!=2) search()
-}
-
-//颜色切换
-const onColorNameChangeHandler = (row: Object) => {
-    if(row=='') {
-        queryObj.ColorName = ''
-        queryObj.ColorNames = []
-        colorArr.value.forEach(x=>{
-            x.checked = false
-        })
-    }else{
-        queryObj.ColorName = row.ColorName;
-        if(!row.checked) {
-            row.checked = true
-            queryObj.ColorNames.push(row.ColorName)
-        }else{
-            row.checked = false
-            let list = queryObj.ColorNames.filter(x=>{
-                if(x!=row.ColorName) return x
-            })
-            queryObj.ColorNames = list
-            if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
-        }
-    }
-    search()
-}
-
-/**
- * 获取线路列表
- */
-const getLinesHandler = async () => {
-    try {
-        let response = await LineService.GetLineListAsync()
-        if (response.data.resultCode == 1) {
-            lines.value = response.data.data;
-        }
-    } catch (error) {
-        
-    }
-}
-
-/**
- * 获取模板市场查询条件
- */
-const getTemplateQuery = async () => {
-    try {
-        let res = await ConfigService.GetTemplateQueryAsync();
-        if (res.data.resultCode == 1) {
-            var tempData = res.data.data;
-            let arrList = function(list) {
-                list.forEach(x => {
-                    x.checked = false
-                });
-            }
-            //国家
-            if (tempData && tempData.CountryList) {
-                arrList(tempData.CountryList)
-                countriesOther.value = tempData.CountryList.filter((x,index)=>{ 
-                    if(model.value==1){ return index>=12 }
-                    else return index>=13
-                })
-                countries.value = tempData.CountryList.filter((x,index)=>{ 
-                    if(model.value==1) {return index<12}
-                    else return index<13
-                })
-            }
-            //颜色
-            if (tempData && tempData.ColorList) {
-                for(let i=0;i<ColorList.length;i++){
-                    colorArr.value.push({
-                        ColorName: ColorList[i].ColorName,
-                        ColorValue: ColorList[i].ColorValue,
-                        checked: false,
-                    })
-                }
-                // arrList(tempData.ColorList)
-                // colorArrOther.value = tempData.ColorList.filter((x,index)=>{ 
-                //     if(model.value==1){ return index>=15 }
-                //     else return index>=14
-                // })
-                // colorArr.value = tempData.ColorList.filter((x,index)=>{ 
-                //     if(model.value==1){ return index<14 }
-                //     else return index<14
-                // })
-            }
-            //季节
-            if (tempData && tempData.SeasonList) {
-                arrList(tempData.SeasonList)
-                seasonArr.value = tempData.SeasonList;
-            }
-            //类型
-            for(let i=0;i<3;i++){
-                let text = '不限'
-                if(i==1) text = '行程'
-                if(i==2) text = '广告'
-                typeArr.value.push({
-                    type:i,
-                    typeName:text
-                })
-            }
-            for(let i=0;i<2;i++){
-                let text = '综合排序'
-                if(i==1) text = '最新模板'
-                sortArr.value.push({
-                    type:i,
-                    typeName:text
-                })
-            }
-        }
-    } catch (error) {
-        
-    }
-}
-const scrollingHandler = () =>{
-    if(marketRef.value && !loading.value){
-        let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
-        let scrollTop = marketRef.value.scrollTop
-        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
-            queryObj.pageIndex++
-            queryTemplateBySearchHandler()
-        }
-        datas.scrollTop =  scrollTop
-    }
-    
-}
-
-getLinesHandler();
-getTemplateQuery();
-queryTemplateBySearchHandler();
-
-onMounted(()=>{
-    // marketRef.value.addEventListener("scroll", scrollingHandler);
-})
-</script>
-
-<style lang="scss">
-    @font-face {
-        font-family: "aliMarketfont";
-        font-weight: 400;
-        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
-            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;
-            box-shadow: 0 0 0
-        }
-    }
-    .MarketRec{
-        margin-top: 23px;
-        margin-bottom: 24px;
-    }
-    .addTemplateBoxRec.active{
-        background: #FF674D;
-    }
-    .addTemplateBoxRec{
-        line-height: 36px;
-        background: #EFEFEF;
-        padding: 0 15px;
-        margin-bottom: 17px;
-    }
-    .addTemplateBox{
-        padding: 0 41px;
-    }
-    .el-button:not(.is-link),.el-menu-item,
-    .el-button:not(.is-link):hover,.el-menu-item:hover{
-        border: 0;
-    }
-    .marketTagDown .el-check-tag{
-        line-height: 22px;
-        margin-left: 13px;
-        margin-right: 0;
-    }
-    .marketTagDown {
-        width: 409px;
-    }
-    .marketTagDown.marketTagDown{
-        width: 309px;
-    }
-    .MarketButton.active.active2{
-        margin-right: 0;
-    }
-    .MarketButton.active.active2::after{
-        background: none;
-    }
-    .MarketButton{
-        width: 90px;
-        height: 36px;
-        line-height: 36px;
-        font-size: 14px;
-        text-align: center;
-        color: #9EA2B3;
-        position: relative;
-        margin-right: 13px;
-    }
-    .MarketButton.active{
-        background: #F4F7FE;
-        border-radius: 6px;
-        -webkit-border-radius: 6px;
-        -moz-border-radius: 6px;
-        -ms-border-radius: 6px;
-        -o-border-radius: 6px;
-        color: #1C1C1C;
-    }
-    .MarketButton.active::after{
-        content: "";
-        position: absolute;
-        left: 35.5px;
-        bottom: 0;
-        width: 19px;
-        height: 4px;
-        background: linear-gradient(134deg, #649DED, #570AD8);
-    }
-    .MarketType{
-        margin-top: 29px;
-        margin-bottom: 33px;
-        /* background: #fff; */
-    }
-    .marketTag-color{
-        margin-bottom: 13px;
-        margin-left: 15px;
-        margin-right: 31px;
-        text-align: center;
-    }
-    .marketTagTitleBox{
-        padding-right: 30px;
-    }
-    .marketTag-Title span:first-child{
-        font-weight: bold;
-        color: #1C1C1C;
-    }
-    .marketTag-Title{
-        font-family: PingFang SC;
-        font-size: 14px;
-    }
-    .marketTag-from{
-        margin-top: 38px;
-    }
-    
-    .MarketHeader>div{
-        padding: 10px 22px; 
-        max-width:1440px; 
-        margin:0 auto;
-    }
-    .MarketHeader{
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        z-index: 2;
-        background: #E3ECFF;
-        animation:myHeader 1s;
-	    -webkit-animation:myHeader 1s;
-    }
-        @keyframes myHeader
-        {
-            from {top: -100px;}
-            to {top: 0px;}
-        }
-
-        @-webkit-keyframes myHeader 
-        {
-            from {top: -100px;}
-            to {top: 0px;}
-        }
-    
-   
-    
-    
-    
-    .Market-select-line{
-        width: 1px;
-        height: 14px;
-        background: #F4F4F4;
-        right: 61px;
-    }
-    .Market-select ::v-deep(.el-input__wrapper){
-        box-shadow: 0 0 0;
-        border-radius: 8px 0 0 8px;
-        padding: 1px 23px;
-    }
-    ::v-deep(.el-input__wrapper):hover{
-        box-shadow: 0 0 0;
-    }
-    ::v-deep(.el-input__wrapper.is-focus){
-        box-shadow: 0 0 0;
-    }
-    ::v-deep(.el-input-group__append){
-        box-shadow: 0 0 0;
-        background: #fff;
-    }
-    .input-with-select{
-        height: 46px;
-    }
-    .MarketAdd{
-        width: 90px;
-        height: 36px;
-        background: linear-gradient(134deg, #649DED, #570AD8);
-        border-radius: 8px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        font-size: 14px !important;
-        color: #FFFFFF;
-        line-height: 36px;
-        text-align: center;
-    }
-    .Market-fromBj{
-        height: 486px;
-        background: url('../../assets//img/homeBJ.png') no-repeat;
-        background-size: auto 100%;
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        z-index: 1;
-    }
-    .Market-from{
-        background: linear-gradient(0deg, #FFF, #E3ECFF);
-        height: 90vh;
-        overflow: auto;
-    }
-    .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
-        padding: 0;
-    }
-    .marketTag{
-        padding: 20px 0px 0 30px;
-        width: 460px;
-        overflow: hidden;
-        /* height: 245px; */
-    }
-    .marketTag+.marketTag{
-        margin-left: 32px;
-    }
-    .colorMark:hover .ColorNameBox {
-        display: block;
-    }
-    .ColorNameBox{
-        width: 0;
-        display: none;
-        left: 0;
-        top: -30px;
-    }
-    .ColorName{
-        background: black;
-        color: #fff;
-        padding: 2px 10px;
-        border-radius: 3px;
-        margin-left: -10px;
-    }
-    .ColorNameBJ{
-        width: 0px;
-        height: 0px;
-        border: 5px solid transparent;
-        border-top-color: black;
-        display: block;
-        margin-left: 2px;
-    }
-    .colorMark{
-        width: 28px;
-        height: 28px;
-        position: relative;
-        display: inline-block;
-        border-radius: 50%;
-        margin: 4px;
-        background: #fff;
-        border: 4px solid #eee;
-    }
-    .aliMarketfont {
-        font-family: aliMarketfont;
-    }
-    .el-check-tag.is-checked{
-        background: #000;
-        color: #fff;
-    }
-    .el-check-tag {
-        width: 86px;
-        height: 36px;
-        margin-right: 14px;
-        margin-bottom: 18px;
-        line-height: 36px;
-        border-radius: 6px;
-        text-align: center;
-        background: #FFF;
-        font-weight: 400 !important;
-        font-size: 14px !important;
-    }
-    .MarketIndexListBox{
-        /* width:calc(20% - 10px); */
-        /* margin: 10px 10px 0 0;  */
-        /* padding:5px; */
-        position: relative;
-        overflow: hidden;
-        box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
-        grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
-        max-height: 362px;
-        min-height: 173px;
-    }
-    .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.5);
-        opacity: 0;
-        transition: opacity 0.5s ease;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: $themeHoverColor;
-    }
-    .MarketIndexListBox:hover .MarketIndexList-Hover{
-        opacity: 1;
-    }
-    .MarketIndexList-Hover div span{
-        /* display: inline-block; */
-        /* background: #fff; */
-        /* border-radius: 4px; */
-        /* padding: 0 10px 3px 10px; */
-    }
-    .MarketIndexListBox:hover{
-        top: -5px;
-        
-    }
-    
-    .MarketIndexList-img{
-        width: 100%;
-        /* height: 0;
-        position: relative;
-        padding-bottom: 56.25%;
-        overflow: hidden; */
-        border-radius: 6px;
-    }
-    .MarketIndexList-img img{
-        /* position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%; */
-        width: 100%;
-        /* height: auto;
-        position: absolute; */
-        object-fit: cover;
-    }
-    .MarketIndexList-text{
-        font-size: 14px;
-        padding: 10px;
-        padding-bottom: 5px;
-    }
-    .MarketIndexList-text span{
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .MarketVerticalLine{
-        width: 1px;
-        height: 80%;
-        background: #dcdfe6;
-        margin-right: 30px;
-        margin-top: 5px;
-    }
-    .MarketIndexButtom{
-        color: #ffff;
-        width: 86px;
-        height: 36px;
-        letter-spacing: 1px;
-        font-size: 14px !important;
-        border-radius: 6px;
-    }
-    .MarketIconAbsolute{
-        width: 36px;
-        height: 36px;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        text-align: center;
-        line-height: 36px;
-        color: #B9B9B9;
-        z-index: 2;
-    }
-    .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
-        color: #fff;
-    }
-    .MarketIndexButtomIcon>div:hover .MarketOpa2{
-        opacity: 0.22;
-    }
-    .MarketIndexButtomIcon>div{
-        position: relative;
-        width: 36px;
-        height: 36px;
-    }
-    .MarketOpa2{
-        width: 36px;
-        height: 36px;
-        background: #FFFFFF;
-        border-radius: 6px;
-        opacity: 0;
-    }
-    .MarketIndexButtomIcon{
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        padding: 14px 16px;
-    }
-    .MarketIndexButtomBox{
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 15px;
-        text-align: center;
-    }
-    .layout-item{
-        width: 180px;
-    }
-    .el-check-tag.el-check-tagW76{
-        width: 76px;
-        margin-left: 0;
-    }
-    .addTemplateBoxRec.addTemplateBoxRecw136{
-        width: 136px;
-    }
-    .MarketAdd.MarketAddw140{
-        width: 140px;
-        height: 42px;
-        line-height: 42px;
-    }
-</style>
\ No newline at end of file

src/views/TemplateCenter/colour.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></div>
+      <el-input style="width:600px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33" clearable
+      @keyup.enter="search">
         <template #append>
           <div class="Market-select-line absolute"></div>
           <div class="row items-center pointer">
@@ -18,22 +19,22 @@
     v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
     <el-table-column label="主色调">
         <template #default="scope">
-          -
+          {{scope.row.ColorName?scope.row.ColorName:'不限'}}
         </template>
       </el-table-column>
       <el-table-column label="颜色名称">
         <template #default="scope">
-          {{scope.row.ColorName}}
+          {{scope.row.Name}}
         </template>
       </el-table-column>
       <el-table-column label="色值">
         <template #default="scope">
             <el-tag
-            :color="scope.row.ColorValue"
+            :color="scope.row.Content"
             effect="dark" class="q-mr-md">
             &nbsp;
             </el-tag>
-          {{scope.row.ColorValue}}
+          {{scope.row.Content}}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="160">
@@ -49,35 +50,35 @@
     :close-on-click-modal="false" style="width: 373px;" 
     class="small-padding" @close="close">
         <template #header>
-            <div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}颜色</div>
+            <div class="text-title text-center fz16 PingFangSC">{{datas.params.ID?'编辑':'新增'}}颜色</div>
         </template>
         <div class="addTemplateBox q-mb-lg fz14">
           <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
             <span class="q-pr-md shrink">主色：</span>
-            <el-select v-model="datas.params.ColorId" 
+            <el-select v-model="datas.params.Code" 
               style="width: 260px;"
               class="ml-1"
               placeholder="主颜" clearable>
                   <el-option key="" label="不限" value=""/>
                   <el-option
                       v-for="item in ColorList"
-                      :key="item.ColorName"
+                      :key="item.Id"
                       :label="`${item.ColorName}`"
-                      :value="item.ColorName"
+                      :value="item.Id"
                   />
             </el-select>
           </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.ColorName"
+              <el-input min="750" v-model="datas.params.Name"
               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"
+            <el-input min="750" v-model="datas.params.Content"
             placeholder="例子:#e5e3da" class=""></el-input>
             <div class="q-pl-sm">
-                <el-color-picker v-model="datas.params.ColorValue" />
+                <el-color-picker v-model="datas.params.Content" />
                 <!-- <el-tag
                 :color="datas.params.ColorValue" style="width: 32px;height: 32px;"
                 effect="dark">
@@ -89,7 +90,7 @@
         <div class="text-center">
           <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
           :loading="requestLoading">
-              确认{{datas.params.id?'编辑':'新增'}}
+              确认{{datas.params.ID?'编辑':'新增'}}
           </el-button>
       </div>
     </el-dialog>
@@ -127,8 +128,8 @@
     const loading = ref(false as any)
     const deleteLoading = ref<any>(null)
     const queryObj = reactive({
-      pageIndex: 1,
-      pageCount: 0,
+      DictKey: 'Trip_Template_Color',
+      Name: ''
     })
     const dataTableRef = ref()
     const datas = reactive({
@@ -136,9 +137,10 @@
       addEditVisible: false,
       params: {
         ID: 0,
-        ColorName: '',
-        ColorValue: '',
-        ColorId: ''
+        DictKey: 'Trip_Template_Color',
+        Name: '',
+        Content: '',
+        Code: '',
       }
     })
   
@@ -150,18 +152,20 @@
     const close = () => {
         datas.params = {
           ID: 0,
-            ColorName: '',
-            ColorValue: ''
+          DictKey: 'Trip_Template_Color',
+          Name: '',
+          Content: '',
+          Code: '',
         }
     }
     const ConfirmCreation = async () => {
       //添加、编辑颜色
-      if(!datas.params.params)return ElMessage({
+      if(!datas.params.Name)return ElMessage({
                 showClose: true,
                 message: '请完善颜色名称',
                 type: 'warning',
             }) 
-    if(!datas.params.ColorValue){
+    if(!datas.params.Content){
         ElMessage({
             showClose: true,
             message: '请完善颜色的16进制',
@@ -169,7 +173,7 @@
         }) 
         return
     }
-    if(datas.params.ColorValue.indexOf('#')==-1){
+    if(datas.params.Content.indexOf('#')==-1){
         ElMessage({
             showClose: true,
             message: "色号需要在最前面加 # 号",
@@ -178,7 +182,7 @@
         return
     }
       datas.requestLoading = true
-      const result = await ConfigService.SetTemplateConfigData(datas.params)
+      const result = await LineService.SetTemplateConfigData(datas.params)
       if(result){
         datas.addEditVisible = false
         datas.requestLoading = false
@@ -199,8 +203,7 @@
         deleteFont(index,item)
       }else{
         datas.params = JSON.parse(JSON.stringify(item))
-        datas.params.ColorName = item.ColorName
-        datas.params.ColorValue = item.ColorValue
+        datas.params.Code = item.Code?Number(item.Code):''
         datas.addEditVisible = true
       }
     }
@@ -253,26 +256,28 @@
       }
     }
     const search = () => {
-      if(queryObj.Title) dataList.value = RawDataList.value.filter(x=> {return x.label.indexOf(queryObj.Title)!=-1})
-      else dataList.value = JSON.parse(JSON.stringify(RawDataList.value))
-      // queryObj.pageIndex = 1
-      // querySearchHandler()
+      queryObj.pageIndex = 1
+      querySearchHandler()
     }
   
     const querySearchHandler = async () => {
       loading.value = true
       try {
-          let pageRes = await LineService.GetTemplateConfigData();
+          let pageRes = await LineService.GetTemplateConfigDataList(queryObj);
           if (pageRes.data.resultCode == 1) {
-              // let arrList = function(list){
-              //     list.forEach(x=>{
-              //         x.checked = false
-              //     })
-              // }
-              // arrList(pageRes.data.data.pageData)
-              dataList.value = pageRes.data.data.ColorList //dataList.value.concat(pageRes.data.data);
-              RawDataList.value = pageRes.data.data.ColorList
-              // queryObj.pageCount = pageRes.data.data.pageCount;
+            let arrList = function(list){
+              list.forEach(x=>{
+                x.ColorName = ''
+              })
+            }
+            arrList(pageRes.data.data)
+            dataList.value = pageRes.data.data
+            for(let i=0;i<dataList.value.length;i++){
+              let Color = ColorList.filter(x=>{return x.Id==dataList.value[i].Code })
+              if(Color.length>0) {
+                dataList.value[i].ColorName = Color[0].ColorName
+              }
+            }
           }
           loading.value = false
       } catch (error) {

src/views/TemplateCenter/font.vue

+<template>
+    <div class="row items-center flex-between q-mb-lg">
+      <div></div>
+      <el-input style="width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
+      @keyup.enter="search">
+        <template #append>
+          <div class="Market-select-line absolute"></div>
+          <div class="row items-center pointer">
+              <img src="../../assets/img/home-search.png" width="21" height="21"
+              @click="search"/>
+          </div>
+        </template>
+      </el-input>
+      <el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
+        新增字体
+      </el-button>
+    </div>
+    <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
+    v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
+      <el-table-column label="字体名称" width="240">
+        <template #default="scope">
+          <span :style="{'font-family':scope.row.reduceName}">{{scope.row.label}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="font-family" width="190">
+        <template #default="scope">
+          {{scope.row.fontFamily}}
+        </template>
+      </el-table-column>
+      <el-table-column label="url">
+        <template #default="scope">
+          {{scope.row.fontUrl}}
+        </template>
+      </el-table-column>
+      
+      <el-table-column label="裁剪URL">
+        <template #default="scope">
+          {{scope.row.reduceUrl}}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160">
+        <template #default="scope">
+          <el-button type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
+          <el-button type="primary" :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 编辑字体 -->
+    <el-dialog v-model="datas.addEditVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
+    :close-on-click-modal="false" style="width: 573px;" class="small-padding" @close="close">
+        <template #header>
+            <div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}字体</div>
+        </template>
+        <div class="addTemplateBox q-mb-lg fz14">
+          <div class="row flex-end q-mb-lg">
+            <el-button type="primary" size="small" style="color: #ffff;">
+              <el-upload
+                :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
+                action=""
+                :limit="1"
+                :auto-upload="false"
+                accept=".ttf, .woff, otf"
+                :show-file-list="false"
+            >
+                <template #trigger>
+                  {{datas.params.id?'替换':'上传'}}字体
+                </template>
+              </el-upload>
+            </el-button>
+          </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.label"
+              placeholder="请输入字体名称" class=""></el-input>
+              <span class="q-px-md shrink">fontFamily：</span>
+              <el-input min="750" v-model="datas.params.fontFamily"
+              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=""></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=""></el-input>
+          </div>
+       </div>
+        <div class="text-center">
+          <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
+          :loading="requestLoading">
+              确认{{datas.params.id?'编辑':'新增'}}
+          </el-button>
+      </div>
+    </el-dialog>
+  </template>
+    
+    <script lang="ts" setup>
+    import { reactive, ref, inject, onMounted, watch} from "vue";
+    import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
+    import { useUserStore, useFontStore } from "@/store";
+    import { storeToRefs } from "pinia";
+    import { USER_DEFAULT_HEADER } from '@/configs/customer'
+    import { Edit,Delete } from '@element-plus/icons-vue';
+    import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+    import { CustomerFonts } from '@/store/font'
+    import {getFonts} from '@/utils/psdParser/index'
+    import FontService from '@/services/FontService'
+    import AliyunUpload from '@/utils/upload/aliyun'
+    import { reduceFont } from '@/utils/fonts/convertFont'
+    import FileService from '@/services/FileService'
+  
+    const useUser = useUserStore()
+    const { userInfo } = storeToRefs(useUser)
+  
+    const { formatFonts } = storeToRefs(useFontStore())
+  
+    const userTheme = useUser.getUserTheme
+    
+    const vipTheme = VIP_USER_THEME
+    const enTheme = ENT_USER_THEME
+  
+    const dataList = ref([] as Array < any > );
+    const RawDataList =  ref([] as Array < any > );
+    const loading = ref(false as any)
+    const deleteLoading = ref<any>(null)
+    const queryObj = reactive({
+      pageIndex: 1,
+      pageCount: 0,
+      keyWords: ''
+    })
+    const dataTableRef = ref()
+    const datas = reactive({
+      requestLoading: false,
+      addEditVisible: false,
+      params: {
+        id: 0,
+        fontFamily: '',
+        label: '',
+        fontUrl: '',
+        reduceName: '',
+        reduceUrl: '',
+      }
+    })
+  
+    const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
+    const uploadingIndex = ref(-1)
+  
+    const close = () => {
+      datas.params = {
+        id: 0,
+        fontFamily: '',
+        label: '',
+        fontUrl: '',
+        reduceName: '',
+        reduceUrl: '',
+      }
+    }
+    const ConfirmCreation = async () => {
+      //添加、编辑字体
+      if(!datas.params.label)return ElMessage({
+        message:'请输入名称',
+        type:'error'
+      })
+      if(!datas.params.fontFamily)return ElMessage({
+        message:'请输入fontFamily',
+        type:'error'
+      })
+      if(!datas.params.fontUrl)return ElMessage({
+        message:'请输入URL',
+        type:'error'
+      })
+      if(!datas.params.reduceUrl)return ElMessage({
+        message:'请输入裁剪URL',
+        type:'error'
+      })
+      datas.requestLoading = true
+      const result = await useFontStore().uploadFontAsync(datas.params)
+      if(result){
+        ElMessage({
+            showClose: true,
+            message: `操作${datas.params.label}成功`,
+            type: 'success',
+        })
+        datas.addEditVisible = false
+        datas.requestLoading = false
+        querySearchHandler()
+      }else{
+          ElMessage({
+              message:'字体上传失败,请重试',
+              type:'error'
+          })
+          datas.requestLoading = false
+      }
+    }
+    const addFont = () => {
+      datas.addEditVisible = true
+    }
+    const editDelete = (item: Object,index: Number) => {
+      if(index>=0){
+        deleteFont(index,item)
+      }else{
+        datas.params = JSON.parse(JSON.stringify(item))
+        datas.addEditVisible = true
+      }
+    }
+  
+    const deleteFont = (index: Number, item: Object) => {
+      ElMessageBox.confirm(
+          `此操作将删除 ${item.label} 字体，是否确定?`,
+          '提示',
+          {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          }
+      ).then(async () => {
+          try {
+              deleteLoading.value = ElLoading.service({
+                  lock:true,
+                  text:'正在处理'
+              })
+              let dataRes = await FontService.RemoveTripFile(item.id)
+              if (dataRes.data.resultCode == 1) {
+                  ElMessage({
+                      showClose: true,
+                      message: `删除${item.label}成功`,
+                      type: 'success',
+                  })
+                  search()
+              }else {
+                  ElMessage({
+                      showClose: true,
+                      message: `删除${item.label}失败`,
+                      type: 'warning',
+                  }) 
+              }
+          } catch (error) {}
+          deleteLoading.value.close()
+          deleteLoading.value = null
+      }).catch(() => {
+        deleteLoading.value.close()
+        deleteLoading.value = null
+      })
+      
+    }
+  
+    const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
+      const ns = uploadFile.name.toLowerCase().split('.')
+      const n = ns[ns.length-1]
+      const acceptFile = ['ttf','otf','woff']
+      if(acceptFile.indexOf(n)==-1){
+          ElMessage.error({
+              message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
+          })
+          return;
+      }
+      uploadingIndex.value = dataList.value?.findIndex(x=>x.fontFamily==fontName)??-1
+      try {
+          let info:any = null
+          try {
+              info = await reduceFont(uploadFile?.raw)
+          } catch (error) {
+              ElMessage.error({message:'字体无法识别，请更换'})
+              uploadingIndex.value=-1
+              return
+          }
+  
+          const flagIndex = dataList.value.findIndex(x=>x.label==info.name)
+          if(flagIndex>0){
+              ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
+              uploadingIndex.value=-1
+              return
+          }
+          let url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
+          if(url && url!=''){
+            
+              if(url.indexOf('"')!=-1) url = url.replaceAll('"','')
+              let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
+              try {
+                  if(info.file){
+                      label = info.name
+                      reduceName = `${fontName}_reduce`
+                      reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
+                  }
+              } catch (error) { 
+              }
+              datas.params.label = label
+              datas.params.fontFamily = fontName
+              datas.params.fontUrl = url
+              datas.params.reduceName = reduceName
+              datas.params.reduceUrl = reduceUrl
+              await ConfirmCreation()
+          }else{
+              ElMessage({
+                  message:'上传失败，请重试',
+                  type:'error'
+              })
+          }
+      } catch (error) {
+      }
+  }
+    const tableScrollHandler = ()=>{
+      if(queryObj.pageCount>queryObj.pageIndex){
+          queryObj.value.pageIndex++
+          refreshHandler()
+      }
+    }
+    const search = () => {
+      queryObj.pageIndex = 1
+      querySearchHandler()
+    }
+  
+    const querySearchHandler = async () => {
+      loading.value = true
+      try {
+          let pageRes = await FontService.GetAllFontsAsync();
+          if (pageRes.data.resultCode == 1) {
+              dataList.value = pageRes.data.data
+              RawDataList.value = pageRes.data.data
+          }
+          loading.value = false
+      } catch (error) {
+          loading.value = false
+      }
+  }
+  querySearchHandler()
+    </script>
+    
+    <style scoped>
+    .addTemplateInput span {
+      width: 95px;
+      text-align: right;
+    }
+    .user-header {
+      padding: 16px 24px;
+      position: relative;
+      font-size: 14px;
+      color:#FFF;
+      z-index: 1;
+      width:100%;
+      overflow: hidden;
+    }
+    
+    .user-header::after {
+      position: absolute;
+      top: 0;
+      right: -48px;
+      bottom: -12px;
+      z-index: -1;
+      width: 100%;
+      background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
+      content: "";
+      transform: scale(2);
+      transform-origin: right center;
+    }
+    .user-label{
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+    .user-card {
+      width: 33%;
+      min-height: 112px;
+    }
+    .user-card .title,
+    .enter-card .title{
+      font-size: 15px;
+      font-weight: bold;
+      color: #000;
+    }
+    </style>
\ No newline at end of file

src/views/TemplateCenter/nation.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></div>
+      <el-input style="width:600px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
+      @keyup.enter="search">
         <template #append>
           <div class="Market-select-line absolute"></div>
           <div class="row items-center pointer">
@@ -18,7 +19,7 @@
     v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
       <el-table-column label="国家">
         <template #default="scope">
-          {{scope.row.CountryName}}
+          {{scope.row.Name}}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="160">
@@ -34,19 +35,19 @@
     :close-on-click-modal="false" style="width: 373px;" 
     class="small-padding" @close="close">
         <template #header>
-            <div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}国家</div>
+            <div class="text-title text-center fz16 PingFangSC">{{datas.params.ID?'编辑':'新增'}}国家</div>
         </template>
         <div class="addTemplateBox q-mb-lg fz14">
           <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"
+              <el-input min="750" v-model="datas.params.Name"
               placeholder="请输入国家名称" class=""></el-input>
           </div>
        </div>
         <div class="text-center">
           <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
           :loading="requestLoading">
-              确认{{datas.params.id?'编辑':'新增'}}
+              确认{{datas.params.ID?'编辑':'新增'}}
           </el-button>
       </div>
     </el-dialog>
@@ -59,7 +60,7 @@
     import { storeToRefs } from "pinia";
     import { USER_DEFAULT_HEADER } from '@/configs/customer'
     import { Edit,Delete } from '@element-plus/icons-vue';
-    import { ElMessage, ElMessageBox } from 'element-plus'
+    import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
     import { CustomerFonts } from '@/store/font'
     import {getFonts} from '@/utils/psdParser/index'
     import FontService from '@/services/FontService'
@@ -83,8 +84,8 @@
     const loading = ref(false as any)
     const deleteLoading = ref<any>(null)
     const queryObj = reactive({
-      pageIndex: 1,
-      pageCount: 0,
+      DictKey: 'Trip_Template_Country',
+      Name: ''
     })
     const dataTableRef = ref()
     const datas = reactive({
@@ -92,9 +93,11 @@
       addEditVisible: false,
       params: {
         ID: 0,
-        Code: '',
+        DictKey: 'Trip_Template_Country',
+        Name: '',
         Content: '',
-        DictKey: 'Trip_Template_Country'
+        Code: '',
+        
       }
     })
   
@@ -104,9 +107,10 @@
     const close = () => {
         datas.params = {
           ID: 0,
-            Code: '',
+          DictKey: 'Trip_Template_Country',
+          Name: '',
           Content: '',
-            DictKey: 'Trip_Template_Country'
+          Code: '',
         }
     }
     const ConfirmCreation = async () => {
@@ -117,7 +121,7 @@
                 type: 'warning',
             }) 
       datas.requestLoading = true
-      const result = await ConfigService.SetTemplateCountryData(datas.params)
+      const result = await LineService.SetTemplateConfigData(datas.params)
       if(result){
         datas.addEditVisible = false
         datas.requestLoading = false
@@ -135,18 +139,16 @@
     }
     const editDelete = (item: Object,index: Number) => {
       if(index>=0){
-        deleteFont(index,item)
+        deleteData(item)
       }else{
         datas.params = JSON.parse(JSON.stringify(item))
-        console.log(datas.params,'----')
-        datas.params.Content = item.CountryName
         datas.addEditVisible = true
       }
     }
   
-    const deleteFont = (index: Number, item: Object) => {
+    const deleteData = (item: Object) => {
       ElMessageBox.confirm(
-          `此操作将删除 ${item.label} 国家，是否确定?`,
+          `此操作将删除 ${item.Content} 国家，是否确定?`,
           '提示',
           {
           confirmButtonText: '确定',
@@ -155,34 +157,33 @@
           }
       ).then(async () => {
           try {
-            dataList.value.splice(index,1)
-              // let queryMsg = {
-              //     TempId: item.TempId
-              // }
-              // deleteLoading.value = ElLoading.service({
-              //     lock:true,
-              //     text:'正在处理'
-              // })
-              // let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
-              // if (dataRes.data.resultCode == 1) {
-              //     queryObj.pageIndex = 1
-              //     ElMessage({
-              //         showClose: true,
-              //         message: `删除${item.label}成功`,
-              //         type: 'success',
-              //     })
-              //     await queryTemplateBySearchHandler()
-              // }else {
-              //     ElMessage({
-              //         showClose: true,
-              //         message: `删除${item.label}失败`,
-              //         type: 'warning',
-              //     }) 
-              // }
-              // deleteLoading.value.close()
-              // deleteLoading.value = null
+              deleteLoading.value = ElLoading.service({
+                  lock:true,
+                  text:'正在处理'
+              })
+              let dataRes = await LineService.RemoveTemplateConfigData(item.ID)
+              if (dataRes.data.resultCode == 1) {
+                  queryObj.pageIndex = 1
+                  ElMessage({
+                      showClose: true,
+                      message: `删除${item.Content}成功`,
+                      type: 'success',
+                  })
+                  search()
+              }else {
+                  ElMessage({
+                      showClose: true,
+                      message: `删除${item.Content}失败`,
+                      type: 'warning',
+                  }) 
+              }
           } catch (error) {}
-      }).catch(() => {})
+          deleteLoading.value.close()
+          deleteLoading.value = null
+      }).catch(() => {
+        deleteLoading.value.close()
+        deleteLoading.value = null
+      })
     }
   
     const tableScrollHandler = ()=>{
@@ -192,26 +193,16 @@
       }
     }
     const search = () => {
-      if(queryObj.Title) dataList.value = RawDataList.value.filter(x=> {return x.label.indexOf(queryObj.Title)!=-1})
-      else dataList.value = JSON.parse(JSON.stringify(RawDataList.value))
-      // queryObj.pageIndex = 1
-      // querySearchHandler()
+      queryObj.pageIndex = 1
+      querySearchHandler()
     }
   
     const querySearchHandler = async () => {
       loading.value = true
       try {
-          let pageRes = await LineService.GetTemplateConfigData();
+          let pageRes = await LineService.GetTemplateConfigDataList(queryObj);
           if (pageRes.data.resultCode == 1) {
-              // let arrList = function(list){
-              //     list.forEach(x=>{
-              //         x.checked = false
-              //     })
-              // }
-              // arrList(pageRes.data.data.pageData)
-              dataList.value = pageRes.data.data.CountryList //dataList.value.concat(pageRes.data.data);
-              RawDataList.value = pageRes.data.data.CountryList
-              // queryObj.pageCount = pageRes.data.data.pageCount;
+              dataList.value = pageRes.data.data
           }
           loading.value = false
       } catch (error) {

src/views/components/element/TextElement/index.vue

@@ -8,7 +8,6 @@
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
     }"
-    style="overflow: hidden;"
   >
     <div
       class="rotate-wrapper"
@@ -57,8 +56,10 @@
         />
 
         <!-- 当字号过大且行高较小时，会出现文字高度溢出的情况，导致拖拽区域无法被选中，因此添加了以下节点避免该情况 -->
+        <template v-show="!activeGroupElementId">
           <div class="drag-handler top" @dblclick="setEditorHandler"></div>
           <div class="drag-handler bottom" @dblclick="setEditorHandler"></div>
+        </template>
       </div>
     </div>
   </div>
@@ -76,7 +77,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import ProsemirrorEditor from '@/views/components/element/ProsemirrorEditor.vue'
-import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 const props = defineProps<{
   elementInfo: PPTTextElement
@@ -86,7 +86,7 @@ const props = defineProps<{
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
-const { handleElementId, isScaling } = storeToRefs(mainStore)
+const { handleElementId, isScaling, activeGroupElementId } = storeToRefs(mainStore)
 
 const { addHistorySnapshot } = useHistorySnapshot()
 
@@ -137,12 +137,9 @@ const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
   let realHeight = contentRect.height + 20
   const realWidth = contentRect.width + 20
 
-  const documentHeight = useSlidesStore().viewportRatio>1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value
 
   if (!props.elementInfo.vertical && props.elementInfo.height !== realHeight) {
     if (!isScaling.value) {
-      const maxHeight = documentHeight - props.elementInfo.top - 10
-      realHeight = realHeight<=maxHeight?realHeight:maxHeight
       slidesStore.updateElement({
         id: props.elementInfo.id,
         props: { height: realHeight },