首页 模版详情查看

src/App.vue

@@ -42,7 +42,6 @@ useFontStore().loadAllFonts()
 
 <style lang="scss">
 @import url('@/assets/styles/common.css');
-@import url('//at.alicdn.com/t/c/font_635492_mmnd6nkbmf8.css');
 #app {
   height: 100%;
 }

src/assets/styles/common.css

@@ -18,6 +18,17 @@ page {
 	src: url("https://im.oytour.com/tripfont/PingFangR.ttf") format("truetype");
 	font-display: swap;
 }
+
+/* 修改滚动条滑块的样式 */
+::-webkit-scrollbar-thumb {
+	background-color: #BBBECE;
+	border-radius: 5px; /* 修改滑块圆角 */
+}
+
+/* 修改滚动条滑块悬停时的样式 */
+::-webkit-scrollbar-thumb:hover {
+	/* background-color: #BBBECE; */
+}
 .pingfangr{
 	font-family: "pingfangr" !important;
 }

src/components/footer/index.vue

+<template>
+    <div class="footer-from column flex-center">
+        <div><img :src="logo" height="31"/></div>
+        <div class="text-center fz14 PingFangSC" style="color: #9B99BC;">@2012-2024 成都微途科技有限公司 版权所有 蜀ICP备13024891号-9</div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref,provide } from 'vue';
+  import { useUserStore } from "@/store";
+  import { storeToRefs } from "pinia";
+  
+  const logo = require("@/assets/img/traveldesign.png")
+</script>
+<style scoped>
+  .footer-from{
+    width: 100%;
+    position: fixed;
+    height: 10vh;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    z-index: 1;
+    text-align: center;
+  }
+</style>
+  
\ No newline at end of file

src/plugins/icon.ts

@@ -130,6 +130,7 @@ import {
   More,
   Setting,
   Refresh,
+  Like
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -264,6 +265,7 @@ export const icons: Icons = {
   IconMore: More,
   IconSetting: Setting,
   IconRefresh: Refresh,
+  IconLike: Like
 }
 
 export default {

src/views/Editor/EditorHeader/index.vue

@@ -8,7 +8,7 @@
           <div class="menu-item" @click="goBack(0)">返回首页</div>
         </template>
         <div class="menu-item">
-          <el-icon color="#d14424"><ArrowLeftBold /></el-icon>
+          <el-icon color="#564bec"><ArrowLeftBold /></el-icon>
         </div>
         <!-- <div class="menu-item ArrowLeftBold"> </div> -->
       </Popover>

src/views/Market/Index.vue

@@ -72,7 +72,29 @@
                     <div class="column text-small">
                         <div class="row flex-between items-center marketTagTitleBox">
                             <span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
-                            <el-button color="#fff" class="opacity0">
+                            <el-dropdown v-if="colorArrOther.length>0" trigger="click">
+                                <el-button color="#EFEFEF">
+                                    <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <div class="row wrap q-pt-lg marketTagDown">
+                                        <template v-for="(x,i) in colorArrOther" :key="i">
+                                            <el-tooltip
+                                                class="box-item"
+                                                effect="dark"
+                                                :content="x.ColorName"
+                                                placement="bottom"
+                                            >
+                                                <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
+                                                    <span class="colorMark"
+                                                    :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
+                                                </div>
+                                            </el-tooltip>
+                                        </template>
+                                    </div>
+                                </template>
+                            </el-dropdown>
+                            <el-button v-else color="#FFF" class="opacity0">
                                 <span></span>
                             </el-button>
                         </div>
@@ -133,11 +155,6 @@
                                         {{x.Name}}
                                     </div>
                                 </div>
-                                <!-- <div class="row wrap q-pt-lg marketTagDown marketTagDown">
-                                    <el-check-tag :checked="queryObj.TempType==x.Id"
-                                    @change="SwitchingVersion(x)" class="text-small"
-                                    v-for="(x,i) in layouts" :key="i">{{x.Name}}</el-check-tag>
-                                </div> -->
                             </template>
                         </el-dropdown>
                         
@@ -155,15 +172,15 @@
                                         size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
                                             <Delete/>
                                         </el-icon>
-                                        <el-icon v-if="model!=1"
-                                        size="28px" class="MarketIconAbsolute cusor-pointer iconfont"
-                                        :class="[item.checked?'icon-xihuan':'icon-xihuan1']" @click="BeFondOf(item)"></el-icon>
+                                        <el-icon v-if="model!=1" size="23px" class="MarketIconAbsolute cusor-pointer"
+                                        @click="BeFondOf(item)">
+                                            <IconLike v-if="!item.checked" class="IconLike"/>
+                                            <IconLike v-else class="IconLike" :theme="item.checked?'filled':''" :fill="item.checked?'#FF674D':'#B9B9B9'" />
+                                        </el-icon>
                                     </div>
                                     <div>
                                         <div class="MarketOpa2"></div>
-                                        <!-- <el-icon size="16px" class="MarketIconAbsolute cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)">
-                                        </el-icon> -->
-                                        <el-icon size="23px" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
+                                        <el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
                                             <View></View>
                                         </el-icon>
                                     </div>
@@ -198,15 +215,18 @@
             </div>
         </div>
     </div>
+    <foote></foote>
+    <!-- 行程、广告图详情 -->
     <el-dialog v-model="datas.DetailsVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
-    :close-on-click-modal="false" style="width: 1097px;height: 915px;" class="small-padding ">
+    :close-on-click-modal="false" style="width: 1097px;height: 915px;" class="small-padding "
+    @close="CloseDetails">
         <template #header>
             <div class="text-title text-center fz16 PingFangSC">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}预览</div>
         </template>
         <!-- <div v-if="showCurrentTemplate && showCurrentTemplate.PageImageList" style="max-height: 80vh; overflow-y: auto;">
             <img v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i" style="width:100%;height:auto;margin-bottom: 10px;">
         </div> -->
-        <div class="Details-container row" v-if="showCurrentTemplate && showCurrentTemplate.PageImageList">
+        <div class="Details-container row" id="scrollId" v-if="showCurrentTemplate && showCurrentTemplate.PageImageList">
             <div class="Details-left" ref="scrollContainer">
                 <div class="Details-leftBox row">
                     <div class="column" style="width: 770px;">
@@ -251,6 +271,7 @@
             </template>
         </div>
     </el-dialog>
+    <!-- 推荐尺寸 -->
     <el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
     :close-on-click-modal="false" style="width: 373px;" class="small-padding">
         <template #header>
@@ -292,7 +313,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, inject, onMounted} from "vue";
+import { reactive, ref, inject, onMounted, watch} from "vue";
 import LineService from '@/services/LineService'
 import ConfigService from '@/services/ConfigService'
 import { useUserStore } from "@/store/user";
@@ -306,6 +327,7 @@ import { useRouter } from "vue-router";
 import UserCard from "@/components/User/UserCard.vue";
 import { Delete,View } from '@element-plus/icons-vue';
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+import foote from '@/components/footer/index.vue';
 
 const {
     userInfo
@@ -349,10 +371,10 @@ const personVisible = ref(false)
 
 const model = ref(2)
 const showCurrentTemplate = ref<any>()
+const imgList = ref<any>()
 const deleteLoading = ref<any>(null)
 const datas = reactive({
-    TemplateBoxRec: null,
-    TemplateRow: {},
+    TemplateBoxRec: null,// 推荐尺寸
     DetailsVisible: false,
     addVisible: false,
     loading: false,
@@ -364,7 +386,7 @@ const datas = reactive({
         {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
         {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
     ],
-    CustomSize:{
+    CustomSize:{ // 自定义尺寸
         width: null,
         height: null,
     },
@@ -374,7 +396,7 @@ const datas = reactive({
         require("@/assets/img/right.png"),
         require("@/assets/img/rightActive.png"),
     ],
-    currentImg: 0,
+    currentImg: 0,// 当前查看img
 })
 let TemplateType = 0
 if(router.currentRoute.value.path=='/market') model.value=1
@@ -404,17 +426,22 @@ const queryObj = reactive({
     sort: 0,//排序方式
 })
 
+// 删除监听滚动
+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 = scrollContainer.value.scrollTop-(scrollToElement.value[0].offsetHeight+30)
+            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
         }
     }
     if(text=='right'){
-        if(datas.currentImg<(showCurrentTemplate.value.PageImageList.length-1)) {
+        if(datas.currentImg<imgList.value.length-1) {
             datas.currentImg++
-            scrollContainer.value.scrollTop = datas.currentImg*(scrollToElement.value[0].offsetHeight+30)
+            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
         }
     }
     
@@ -494,7 +521,7 @@ const CloseTemplate = () => {
 // 删除模版
 const deleteTemplate = (item:any) => {
     ElMessageBox.confirm(
-        `此操作将删除该${item.TemplateType==2?'广告':'模版'}，是否确定?`,
+        `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
         '提示',
         {
         confirmButtonText: '确定',
@@ -515,14 +542,14 @@ const deleteTemplate = (item:any) => {
                 queryObj.pageIndex = 1
                 ElMessage({
                     showClose: true,
-                    message: `删除${item.TemplateType==2?'广告':'模版'}成功`,
+                    message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
                     type: 'success',
                 })
                 await queryTemplateBySearchHandler()
             }else {
                 ElMessage({
                     showClose: true,
-                    message: `删除${item.TemplateType==2?'广告':'模版'}失败`,
+                    message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
                     type: 'warning',
                 }) 
             }
@@ -532,17 +559,43 @@ const deleteTemplate = (item:any) => {
     }).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) => {
 
     if(item.PageImageList && item.PageImageList.length>0){
+        datas.currentImg = 0
         datas.DetailsVisible = true
+        imgList.value = []
+        let arrList = function(list){
+            list.forEach(x=>{
+                imgList.value.push({
+                    url: x,
+                    imgTop: 0
+                })
+            })
+        }
+        arrList(item.PageImageList)
         showCurrentTemplate.value = item
+        if(item.PageImageList.length>1){
+            setTimeout(()=>{
+                for(let i=0;i<imgList.value.length;i++){
+                    imgList.value[i].imgTop =  (scrollToElement.value[i].offsetHeight+30)*i
+                }
+                document.querySelector("#scrollId .Details-left").addEventListener("scroll", handleScroll);
+            },500)
+        }
     }else{
         ElMessage.warning({
             showClose: true,
-            message: `当前${item.TemplateType==2?'广告':'模版'}没有预览信息，请选择其他操作`,
+            message: `当前${item.TemplateType==2?'广告':'行程'}没有预览信息，请选择其他操作`,
         })
     }
 }
@@ -805,6 +858,7 @@ const scrollingHandler = () =>{
     }
     
 }
+
 getLinesHandler();
 getTemplateQuery();
 queryTemplateBySearchHandler();
@@ -822,6 +876,11 @@ onMounted(()=>{
             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%;
@@ -1050,7 +1109,7 @@ onMounted(()=>{
     }
     .Market-from{
         background: linear-gradient(0deg, #FFF, #E3ECFF);
-        height: 100vh;
+        height: 90vh;
         overflow: auto;
     }
     .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
@@ -1090,14 +1149,14 @@ onMounted(()=>{
         margin-left: 2px;
     }
     .colorMark{
-        width: 25px;
-        height: 25px;
+        width: 28px;
+        height: 28px;
         position: relative;
         display: inline-block;
         border-radius: 50%;
-        margin: 5px;
+        margin: 4px;
         background: #fff;
-        border: 5px solid #eee;
+        border: 4px solid #eee;
     }
     .aliMarketfont {
         font-family: aliMarketfont;
@@ -1154,10 +1213,10 @@ onMounted(()=>{
         opacity: 1;
     }
     .MarketIndexList-Hover div span{
-        display: inline-block;
-        background: #fff;
-        border-radius: 4px;
-        padding: 0 10px 3px 10px;
+        /* display: inline-block; */
+        /* background: #fff; */
+        /* border-radius: 4px; */
+        /* padding: 0 10px 3px 10px; */
     }
     .MarketIndexListBox:hover{
         top: -5px;
@@ -1207,9 +1266,6 @@ onMounted(()=>{
         font-size: 14px !important;
         border-radius: 6px;
     }
-    .MarketIndexButtomIcon>div .el-icon.icon-xihuan{
-        color: #FF674D !important;
-    }
     .MarketIconAbsolute{
         width: 36px;
         height: 36px;
@@ -1222,7 +1278,7 @@ onMounted(()=>{
         color: #B9B9B9;
         z-index: 2;
     }
-    .MarketIndexButtomIcon>div:hover .el-icon{
+    .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
         color: #fff;
     }
     .MarketIndexButtomIcon>div:hover .MarketOpa2{