Commit c8d50ae3 authored by zhengke's avatar zhengke

首页 模版详情查看

parent b6d2df11
...@@ -42,7 +42,6 @@ useFontStore().loadAllFonts() ...@@ -42,7 +42,6 @@ useFontStore().loadAllFonts()
<style lang="scss"> <style lang="scss">
@import url('@/assets/styles/common.css'); @import url('@/assets/styles/common.css');
@import url('//at.alicdn.com/t/c/font_635492_mmnd6nkbmf8.css');
#app { #app {
height: 100%; height: 100%;
} }
......
...@@ -18,6 +18,17 @@ page { ...@@ -18,6 +18,17 @@ page {
src: url("https://im.oytour.com/tripfont/PingFangR.ttf") format("truetype"); src: url("https://im.oytour.com/tripfont/PingFangR.ttf") format("truetype");
font-display: swap; font-display: swap;
} }
/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
background-color: #BBBECE;
border-radius: 5px; /* 修改滑块圆角 */
}
/* 修改滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
/* background-color: #BBBECE; */
}
.pingfangr{ .pingfangr{
font-family: "pingfangr" !important; font-family: "pingfangr" !important;
} }
......
<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
...@@ -130,6 +130,7 @@ import { ...@@ -130,6 +130,7 @@ import {
More, More,
Setting, Setting,
Refresh, Refresh,
Like
} from '@icon-park/vue-next' } from '@icon-park/vue-next'
export interface Icons { export interface Icons {
...@@ -264,6 +265,7 @@ export const icons: Icons = { ...@@ -264,6 +265,7 @@ export const icons: Icons = {
IconMore: More, IconMore: More,
IconSetting: Setting, IconSetting: Setting,
IconRefresh: Refresh, IconRefresh: Refresh,
IconLike: Like
} }
export default { export default {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="menu-item" @click="goBack(0)">返回首页</div> <div class="menu-item" @click="goBack(0)">返回首页</div>
</template> </template>
<div class="menu-item"> <div class="menu-item">
<el-icon color="#d14424"><ArrowLeftBold /></el-icon> <el-icon color="#564bec"><ArrowLeftBold /></el-icon>
</div> </div>
<!-- <div class="menu-item ArrowLeftBold"> </div> --> <!-- <div class="menu-item ArrowLeftBold"> </div> -->
</Popover> </Popover>
......
...@@ -72,7 +72,29 @@ ...@@ -72,7 +72,29 @@
<div class="column text-small"> <div class="column text-small">
<div class="row flex-between items-center marketTagTitleBox"> <div class="row flex-between items-center marketTagTitleBox">
<span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span> <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> <span></span>
</el-button> </el-button>
</div> </div>
...@@ -133,11 +155,6 @@ ...@@ -133,11 +155,6 @@
{{x.Name}} {{x.Name}}
</div> </div>
</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> </template>
</el-dropdown> </el-dropdown>
...@@ -155,15 +172,15 @@ ...@@ -155,15 +172,15 @@
size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)"> size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
<Delete/> <Delete/>
</el-icon> </el-icon>
<el-icon v-if="model!=1" <el-icon v-if="model!=1" size="23px" class="MarketIconAbsolute cusor-pointer"
size="28px" class="MarketIconAbsolute cusor-pointer iconfont" @click="BeFondOf(item)">
:class="[item.checked?'icon-xihuan':'icon-xihuan1']" @click="BeFondOf(item)"></el-icon> <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> <div>
<div class="MarketOpa2"></div> <div class="MarketOpa2"></div>
<!-- <el-icon size="16px" class="MarketIconAbsolute cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)"> <el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
</el-icon> -->
<el-icon size="23px" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
<View></View> <View></View>
</el-icon> </el-icon>
</div> </div>
...@@ -198,15 +215,18 @@ ...@@ -198,15 +215,18 @@
</div> </div>
</div> </div>
</div> </div>
<foote></foote>
<!-- 行程、广告图详情 -->
<el-dialog v-model="datas.DetailsVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" <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> <template #header>
<div class="text-title text-center fz16 PingFangSC">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}预览</div> <div class="text-title text-center fz16 PingFangSC">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}预览</div>
</template> </template>
<!-- <div v-if="showCurrentTemplate && showCurrentTemplate.PageImageList" style="max-height: 80vh; overflow-y: auto;"> <!-- <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;"> <img v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i" style="width:100%;height:auto;margin-bottom: 10px;">
</div> --> </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-left" ref="scrollContainer">
<div class="Details-leftBox row"> <div class="Details-leftBox row">
<div class="column" style="width: 770px;"> <div class="column" style="width: 770px;">
...@@ -251,6 +271,7 @@ ...@@ -251,6 +271,7 @@
</template> </template>
</div> </div>
</el-dialog> </el-dialog>
<!-- 推荐尺寸 -->
<el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" <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"> :close-on-click-modal="false" style="width: 373px;" class="small-padding">
<template #header> <template #header>
...@@ -292,7 +313,7 @@ ...@@ -292,7 +313,7 @@
</template> </template>
<script setup lang="ts"> <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 LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService' import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user"; import { useUserStore } from "@/store/user";
...@@ -306,6 +327,7 @@ import { useRouter } from "vue-router"; ...@@ -306,6 +327,7 @@ import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue"; import UserCard from "@/components/User/UserCard.vue";
import { Delete,View } from '@element-plus/icons-vue'; import { Delete,View } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue';
const { const {
userInfo userInfo
...@@ -349,10 +371,10 @@ const personVisible = ref(false) ...@@ -349,10 +371,10 @@ const personVisible = ref(false)
const model = ref(2) const model = ref(2)
const showCurrentTemplate = ref<any>() const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const deleteLoading = ref<any>(null) const deleteLoading = ref<any>(null)
const datas = reactive({ const datas = reactive({
TemplateBoxRec: null, TemplateBoxRec: null,// 推荐尺寸
TemplateRow: {},
DetailsVisible: false, DetailsVisible: false,
addVisible: false, addVisible: false,
loading: false, loading: false,
...@@ -364,7 +386,7 @@ const datas = reactive({ ...@@ -364,7 +386,7 @@ const datas = reactive({
{icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'}, {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
{icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'}, {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
], ],
CustomSize:{ CustomSize:{ // 自定义尺寸
width: null, width: null,
height: null, height: null,
}, },
...@@ -374,7 +396,7 @@ const datas = reactive({ ...@@ -374,7 +396,7 @@ const datas = reactive({
require("@/assets/img/right.png"), require("@/assets/img/right.png"),
require("@/assets/img/rightActive.png"), require("@/assets/img/rightActive.png"),
], ],
currentImg: 0, currentImg: 0,// 当前查看img
}) })
let TemplateType = 0 let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1 if(router.currentRoute.value.path=='/market') model.value=1
...@@ -404,17 +426,22 @@ const queryObj = reactive({ ...@@ -404,17 +426,22 @@ const queryObj = reactive({
sort: 0,//排序方式 sort: 0,//排序方式
}) })
// 删除监听滚动
const CloseDetails = () => {
document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
}
const ToggleImg = (text: String) => { const ToggleImg = (text: String) => {
if(text=='left'){ if(text=='left'){
if(datas.currentImg>0) { if(datas.currentImg>0) {
datas.currentImg-- 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(text=='right'){
if(datas.currentImg<(showCurrentTemplate.value.PageImageList.length-1)) { if(datas.currentImg<imgList.value.length-1) {
datas.currentImg++ 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 = () => { ...@@ -494,7 +521,7 @@ const CloseTemplate = () => {
// 删除模版 // 删除模版
const deleteTemplate = (item:any) => { const deleteTemplate = (item:any) => {
ElMessageBox.confirm( ElMessageBox.confirm(
`此操作将删除该${item.TemplateType==2?'广告':'模版'},是否确定?`, `此操作将删除该${item.TemplateType==2?'广告':'行程'},是否确定?`,
'提示', '提示',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -515,14 +542,14 @@ const deleteTemplate = (item:any) => { ...@@ -515,14 +542,14 @@ const deleteTemplate = (item:any) => {
queryObj.pageIndex = 1 queryObj.pageIndex = 1
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `删除${item.TemplateType==2?'广告':'模版'}成功`, message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
type: 'success', type: 'success',
}) })
await queryTemplateBySearchHandler() await queryTemplateBySearchHandler()
}else { }else {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `删除${item.TemplateType==2?'广告':'模版'}失败`, message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
type: 'warning', type: 'warning',
}) })
} }
...@@ -532,17 +559,43 @@ const deleteTemplate = (item:any) => { ...@@ -532,17 +559,43 @@ const deleteTemplate = (item:any) => {
}).catch(() => {}) }).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) => { const getTemplate = async (item:any) => {
if(item.PageImageList && item.PageImageList.length>0){ if(item.PageImageList && item.PageImageList.length>0){
datas.currentImg = 0
datas.DetailsVisible = true 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 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{ }else{
ElMessage.warning({ ElMessage.warning({
showClose: true, showClose: true,
message: `当前${item.TemplateType==2?'广告':'模版'}没有预览信息,请选择其他操作`, message: `当前${item.TemplateType==2?'广告':'行程'}没有预览信息,请选择其他操作`,
}) })
} }
} }
...@@ -805,6 +858,7 @@ const scrollingHandler = () =>{ ...@@ -805,6 +858,7 @@ const scrollingHandler = () =>{
} }
} }
getLinesHandler(); getLinesHandler();
getTemplateQuery(); getTemplateQuery();
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
...@@ -822,6 +876,11 @@ onMounted(()=>{ ...@@ -822,6 +876,11 @@ onMounted(()=>{
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff"); url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
font-display: swap; font-display: swap;
} }
::-webkit-scrollbar {
width: 9px;
background-color: #E9E9E9;
border-radius: 5px;
}
.MarketDetaSwR div:hover{ .MarketDetaSwR div:hover{
background: url('../../assets//img/rightActive.png') no-repeat; background: url('../../assets//img/rightActive.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -1050,7 +1109,7 @@ onMounted(()=>{ ...@@ -1050,7 +1109,7 @@ onMounted(()=>{
} }
.Market-from{ .Market-from{
background: linear-gradient(0deg, #FFF, #E3ECFF); background: linear-gradient(0deg, #FFF, #E3ECFF);
height: 100vh; height: 90vh;
overflow: auto; overflow: auto;
} }
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{ .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
...@@ -1090,14 +1149,14 @@ onMounted(()=>{ ...@@ -1090,14 +1149,14 @@ onMounted(()=>{
margin-left: 2px; margin-left: 2px;
} }
.colorMark{ .colorMark{
width: 25px; width: 28px;
height: 25px; height: 28px;
position: relative; position: relative;
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
margin: 5px; margin: 4px;
background: #fff; background: #fff;
border: 5px solid #eee; border: 4px solid #eee;
} }
.aliMarketfont { .aliMarketfont {
font-family: aliMarketfont; font-family: aliMarketfont;
...@@ -1154,10 +1213,10 @@ onMounted(()=>{ ...@@ -1154,10 +1213,10 @@ onMounted(()=>{
opacity: 1; opacity: 1;
} }
.MarketIndexList-Hover div span{ .MarketIndexList-Hover div span{
display: inline-block; /* display: inline-block; */
background: #fff; /* background: #fff; */
border-radius: 4px; /* border-radius: 4px; */
padding: 0 10px 3px 10px; /* padding: 0 10px 3px 10px; */
} }
.MarketIndexListBox:hover{ .MarketIndexListBox:hover{
top: -5px; top: -5px;
...@@ -1207,9 +1266,6 @@ onMounted(()=>{ ...@@ -1207,9 +1266,6 @@ onMounted(()=>{
font-size: 14px !important; font-size: 14px !important;
border-radius: 6px; border-radius: 6px;
} }
.MarketIndexButtomIcon>div .el-icon.icon-xihuan{
color: #FF674D !important;
}
.MarketIconAbsolute{ .MarketIconAbsolute{
width: 36px; width: 36px;
height: 36px; height: 36px;
...@@ -1222,7 +1278,7 @@ onMounted(()=>{ ...@@ -1222,7 +1278,7 @@ onMounted(()=>{
color: #B9B9B9; color: #B9B9B9;
z-index: 2; z-index: 2;
} }
.MarketIndexButtomIcon>div:hover .el-icon{ .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
color: #fff; color: #fff;
} }
.MarketIndexButtomIcon>div:hover .MarketOpa2{ .MarketIndexButtomIcon>div:hover .MarketOpa2{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment