Skip to content

P
pptist
Commit c8d50ae3 authored by zhengke's avatar zhengke
Browse files
Options

首页 模版详情查看

parent b6d2df11
Show whitespace changes
Inline Side-by-side
Showing with 137 additions and 42 deletions
src/App.vue
View file @ c8d50ae3
......@@ -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
View file @ c8d50ae3
......@@ -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 0 → 100644
View file @ c8d50ae3
<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
View file @ c8d50ae3
......@@ -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
View file @ c8d50ae3
......@@ -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
View file @ c8d50ae3
......@@ -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{
......
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