Skip to content

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

首页布局调整

parent 6b3f5fcd
Show whitespace changes
Inline Side-by-side
Showing with 500 additions and 112 deletions
src/App.vue
View file @ b54cb58f
...@@ -42,6 +42,7 @@ useFontStore().loadAllFonts() ...@@ -42,6 +42,7 @@ 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%;
} }
......
src/assets/styles/common.css
View file @ b54cb58f
...@@ -216,6 +216,9 @@ page { ...@@ -216,6 +216,9 @@ page {
.q-mb-sm{ .q-mb-sm{
margin-bottom: 5px; margin-bottom: 5px;
} }
.q-ml-md{
margin-left: 10px;
}
.q-mx-sm{ .q-mx-sm{
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
...@@ -234,10 +237,17 @@ page { ...@@ -234,10 +237,17 @@ page {
padding-left: 5px; padding-left: 5px;
padding-right:5px ; padding-right:5px ;
} }
.q-px-md{
padding-left: 10px;
padding-right: 10px ;
}
.q-px-xl{ .q-px-xl{
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
} }
.q-pa-xs{
padding: 5px;
}
.q-pa-xl{ .q-pa-xl{
padding: 30px; padding: 30px;
} }
...@@ -435,6 +445,9 @@ page { ...@@ -435,6 +445,9 @@ page {
.q-mr-lg{ .q-mr-lg{
margin-right:20px margin-right:20px
} }
.q-mt-xs{
margin-top: 5px;
}
.q-mt-lg{ .q-mt-lg{
margin-top:20px margin-top:20px
} }
...@@ -458,6 +471,13 @@ page { ...@@ -458,6 +471,13 @@ page {
-ms-border-radius: 8px; -ms-border-radius: 8px;
-o-border-radius: 8px; -o-border-radius: 8px;
} }
.rounded6{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.relative{ .relative{
position: relative; position: relative;
} }
...@@ -476,16 +496,61 @@ page { ...@@ -476,16 +496,61 @@ page {
.text-nategive{ .text-nategive{
color: #FF4B86; color: #FF4B86;
} }
.color0{
color: #000;
}
.colorF{
color: #FFF;
}
.colorBA{
color: #BABABA;
}
.text-right{ .text-right{
text-align: right; text-align: right;
} }
.text-left{ .text-left{
text-align: left; text-align: left;
} }
.text-center{
text-align: center;
}
.text-small{ .text-small{
font-size: 12px; font-size: 12px;
font-family: microsoft yahei; font-family: microsoft yahei;
} }
.PingFangSC{
font-family: 'PingFang SC';
}
.fz12{
font-size: 12px;
}
.fz14{
font-size: 14px;
}
.fz16{
font-size: 16px;
}
.fz18{
font-size: 18px;
}
.fz20{
font-size: 20px;
}
.fz22{
font-size: 12px;
}
.fz24{
font-size: 24px;
}
.fz26{
font-size: 26px;
}
.fz28{
font-size: 28px;
}
.fz30{
font-size: 30px;
}
.text-title{ .text-title{
font-size: 1.25rem; font-size: 1.25rem;
font-family: alifont; font-family: alifont;
...@@ -555,3 +620,9 @@ page { ...@@ -555,3 +620,9 @@ page {
bottom: 0; bottom: 0;
z-index: 9; z-index: 9;
} }
.opacity0{
opacity: 0;
}
.columnCount5 {
column-count: 5;
}
\ No newline at end of file
src/components/User/UserCard.vue
View file @ b54cb58f
...@@ -112,7 +112,9 @@ import { storeToRefs } from "pinia"; ...@@ -112,7 +112,9 @@ import { storeToRefs } from "pinia";
const useUser = useUserStore(); const useUser = useUserStore();
const { userInfo } = storeToRefs(useUser); const { userInfo } = storeToRefs(useUser);
const format = (percentage: number) => {
return percentage == 100 ? '' : ``
}
const moreList = [ const moreList = [
{ icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面" }, { icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面" },
{ icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号" }, { icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号" },
......
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ b54cb58f
...@@ -330,8 +330,11 @@ ...@@ -330,8 +330,11 @@
{Name:'青',Id:5}, {Name:'青',Id:5},
{Name:'蓝',Id:6}, {Name:'蓝',Id:6},
{Name:'紫',Id:7}, {Name:'紫',Id:7},
{Name:'黑',Id:8}, {Name:'玫红',Id:8},
{Name:'白',Id:9}, {Name:'咖啡色',Id:9},
{Name:'白',Id:10},
{Name:'黑',Id:11},
{Name:'灰',Id:12},
] ]
const cursors = [] as Array<any> const cursors = [] as Array<any>
......
src/views/Market/Index.vue
View file @ b54cb58f
<template> <template>
<div ref="marketRef" class="Market-from"> <div ref="marketRef" class="Market-from">
<div class="Market-fromBj"></div> <div class="Market-fromBj"></div>
<div class="relative" style="padding: 22px; max-width:1440px; margin:0 auto;z-index: 2;"> <div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
<div :class="[datas.scrollTop>100?'MarketHeader':'']"> <div :class="[datas.scrollTop>100?'MarketHeader':'']">
<div class="row items-center"> <div class="row items-center">
<img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" /> <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
<div class="Market-select-line absolute"></div> <div class="Market-select-line absolute"></div>
<div class="row items-center pointer"> <div class="row items-center pointer">
<img src="../../assets/img/home-search.png" width="21" height="21" <img src="../../assets/img/home-search.png" width="21" height="21"
@click="queryObj.pageIndex=1,queryTemplateBySearchHandler()"/> @click="search"/>
</div> </div>
</template> </template>
</el-input> </el-input>
</div> </div>
<div class="row items-center" style="text-align: right;"> <div class="row items-center" style="text-align: right;">
<div> <div v-if="model==1" >
<div class="MarketAdd pointer" @click="addTemplate(1)">创建</div> <div class="MarketAdd pointer" @click="datas.addVisible=true">创建</div>
</div> </div>
<UserCard></UserCard> <UserCard></UserCard>
</div> </div>
...@@ -29,36 +29,28 @@ ...@@ -29,36 +29,28 @@
<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="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible"> <el-dropdown v-if="countriesOther.length>0" trigger="click">
<el-button color="#EFEFEF">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon> <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button> </el-button>
</div> <template #dropdown>
<div class="row wrap q-pt-sm"> <div class="row wrap q-pt-lg marketTagDown">
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag> <el-check-tag :checked="x.checked"
<el-check-tag :checked="queryObj.CountryName == x.CountryName" @change="onCountryNameChangeHandler(x)" class="text-small"
@change="onCountryNameChangeHandler(x.CountryName)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
<Popover v-if="countriesOther.length>0" trigger="click" placement="bottom-start" v-model:value="MenuCountryVisible">
<template #content>
<el-check-tag :checked="queryObj.CountryName == x.CountryName"
@change="onCountryNameChangeHandler(x.CountryName,1),MenuCountryVisible=false" class="text-small q-mr-md"
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag> v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
</div>
</template> </template>
<div class="row items-center"> </el-dropdown>
<el-check-tag :checked="CountryOtherName" <el-button v-else color="#FFF" class="opacity0">
class="text-small q-mr-md"> <span></span>
<span class="q-mr-md" v-if="CountryOtherName"> </el-button>
{{queryObj.CountryName}}
</span>
<el-icon class="pointer" v-if="!MenuCountryVisible">
<ArrowDownBold @click="MenuCountryVisible = false"/>
</el-icon>
<el-icon class="pointer" v-else>
<ArrowUpBold @click="MenuCountryVisible = true"/>
</el-icon>
</el-check-tag>
</div> </div>
</Popover> <div class="row wrap q-pt-sm ">
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
<el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
</div> </div>
</div> </div>
</div> </div>
...@@ -66,13 +58,13 @@ ...@@ -66,13 +58,13 @@
<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"><span></span></el-button> <el-button color="#FFF" class="opacity0"><span></span></el-button>
</div> </div>
<div class="row wrap q-pt-sm"> <div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')" <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
class="text-small q-mr-md">四季</el-check-tag> class="text-small">四季</el-check-tag>
<el-check-tag :checked="queryObj.SeasonName == x.SeasonName" @change="onSeasonNameChangeHandler(x.SeasonName)" <el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
class="text-small q-mr-md" v-for="(x,i) in seasonArr" :key="i">{{x.SeasonName}}</el-check-tag> class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,12 +72,11 @@ ...@@ -80,12 +72,11 @@
<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 v-if="countriesOther.length>0" color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible"> <el-button color="#fff" class="opacity0">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon> <span></span>
</el-button> </el-button>
</div> </div>
<div class="row wrap q-pt-sm"> <div class="row wrap q-pt-sm">
<div class="row items-center wrap">
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
...@@ -104,9 +95,9 @@ ...@@ -104,9 +95,9 @@
:content="x.ColorName" :content="x.ColorName"
placement="bottom" placement="bottom"
> >
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x.ColorName)"> <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark" <span class="colorMark"
:style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}"></span> :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
</div> </div>
</el-tooltip> </el-tooltip>
</template> </template>
...@@ -114,7 +105,6 @@ ...@@ -114,7 +105,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<div class="MarketType row flex-between"> <div class="MarketType row flex-between">
<div class="row"> <div class="row">
...@@ -130,30 +120,55 @@ ...@@ -130,30 +120,55 @@
@click="onTypeChangeHandler(item.type,1)"> @click="onTypeChangeHandler(item.type,1)">
{{item.typeName}} {{item.typeName}}
</div> </div>
<el-dropdown trigger="click">
<div class="MarketButton active active2 cursor-pointer"> <div class="MarketButton active active2 cursor-pointer">
<span>版面</span> <span>版面</span>
<el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon> <el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
</div> </div>
<template #dropdown>
<div class="row wrap q-pt-lg q-ml-lg q-mb-lg marketTagDown marketTagDown">
<div class="MarketButton cursor-pointer"
:class="[queryObj.TempType == x.Id?'active':'']" v-for="(x,index) in layouts" :key="index"
@click="SwitchingVersion(x)">
{{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>
</div> </div>
</div> </div>
<!-- q-mt-lg row wrap --> <!-- q-mt-lg row wrap -->
<div v-if="dataList.length>0" class=" rounded" <div v-if="dataList.length>0" class="columnCount5 rounded">
style="column-count: 6;">
<template v-for="(item,index) in dataList"> <template v-for="(item,index) in dataList">
<div class="MarketIndexListBox bg-white rounded" <div class="MarketIndexListBox bg-white rounded">
style="grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;">
<div class="MarketIndexList-Hover"> <div class="MarketIndexList-Hover">
<div class="MarketIndexButtomIcon row flex-between">
<div> <div>
<el-button class="MarketIndexButtom" type="primary" <div class="MarketOpa2"></div>
@click="getTemplate(item)">详情</el-button> <el-icon v-if="userInfo.isTemplate==1 && model==1"
size="21px" class="cusor-pointer" @click="deleteTemplate(item)">
<Delete/>
</el-icon>
<el-icon v-if="model!=1"
size="28px" class="cusor-pointer iconfont"
:class="[item.checked?'icon-xihuan':'icon-xihuan1']" @click="BeFondOf(item)"></el-icon>
</div>
<div>
<div class="MarketOpa2"></div>
<el-icon size="16px" class="cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)"></el-icon>
</div> </div>
<div class="q-mt-lg">
<el-button class="MarketIndexButtom" type="primary"
@click="goToTemplate(item)">选择该{{item.TemplateType!=2?'模版':'广告'}}</el-button>
</div> </div>
<div class="q-mt-lg" v-if="userInfo.isTemplate==1 && model==1"> <div class="MarketIndexButtomBox">
<el-button class="MarketIndexButtom" type="primary" <el-button class="MarketIndexButtom" type="primary"
@click="deleteTemplate(item)">删除</el-button> @click="goToTemplate(item)">
{{model==1?'编辑':'使用'}}
</el-button>
</div> </div>
</div> </div>
<div class="MarketIndexList-img"> <div class="MarketIndexList-img">
...@@ -188,6 +203,44 @@ ...@@ -188,6 +203,44 @@
<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>
</el-dialog> </el-dialog>
<el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false"
:close-on-click-modal="true" style="width: 373px;" class="small-padding">
<template #header>
<div class="text-title text-center fz16 PingFangSC">创建设计</div>
</template>
<div class="addTemplateBox fz14">
<div class="color0 q-mb-lg">推荐尺寸</div>
<div class="q-mt-xs">
<div v-for="(item,index) in RecommendedSizes">
<div class="row addTemplateBoxRec rounded6 cursor-pointer"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
<span class="color0"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
<p class="q-pl-md"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
<span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
</p>
</div>
</div>
</div>
</div>
<div class="addTemplateBox fz14 q-mb-lg">
<div class="color0 q-mb-lg">自义定尺寸</div>
<div class="addTemplateInput q-mt-xs row items-center">
<el-input type="number" min="750" v-model="datas.CustomSize.width"
placeholder="宽" class="input-with-select" @change="setDimension"></el-input>
<span class="q-px-md">*</span>
<el-input type="number" min="383" v-model="datas.CustomSize.height"
placeholder="高" class="input-with-select" @change="setDimension"></el-input>
<span class="q-ml-md">px</span>
</div>
</div>
<div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation">
确认创建
</el-button>
</div>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -203,6 +256,8 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@ ...@@ -203,6 +256,8 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@
import { ElLoading, ElMessage, ElMessageBox } from "element-plus"; import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue"; import UserCard from "@/components/User/UserCard.vue";
import { Delete } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
const { const {
userInfo userInfo
...@@ -217,10 +272,18 @@ const seasonArr = ref([] as Array < any > ); //季节 ...@@ -217,10 +272,18 @@ const seasonArr = ref([] as Array < any > ); //季节
const typeArr = ref([] as Array < any > ); //类型 const typeArr = ref([] as Array < any > ); //类型
const sortArr = ref([] as Array < any > ); //排序 const sortArr = ref([] as Array < any > ); //排序
const dataList = 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 marketRef = ref<any>()
const MenuColorVisible = ref(false) const RecommendedSizes = ref([
const MenuCountryVisible = ref(false) {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
const CountryOtherName = ref(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 loading = ref(false as any) const loading = ref(false as any)
const searchData = ref({} as any) const searchData = ref({} as any)
...@@ -231,16 +294,15 @@ const { market, ConfigId} = storeToRefs(useScreenStore()) ...@@ -231,16 +294,15 @@ const { market, ConfigId} = storeToRefs(useScreenStore())
const SalesEditorStore = useSellTemplateStore() const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore()) const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false) const personVisible = ref(false)
const format = (percentage: number) => {
return percentage == 100 ? '' : ``
}
const model = ref(2) const model = ref(2)
const showCurrentTemplate = ref<any>() const showCurrentTemplate = ref<any>()
const deleteLoading = ref<any>(null) const deleteLoading = ref<any>(null)
const datas = reactive({ const datas = reactive({
TemplateBoxRec: null,
TemplateRow: {}, TemplateRow: {},
DetailsVisible: false, DetailsVisible: false,
addVisible: false,
loading: false, loading: false,
ColorValue: '', ColorValue: '',
scrollTop: 0, scrollTop: 0,
...@@ -249,7 +311,11 @@ const datas = reactive({ ...@@ -249,7 +311,11 @@ const datas = reactive({
{icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'}, {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
{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:{
width: null,
height: null,
}
}) })
let TemplateType = 0 let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1 if(router.currentRoute.value.path=='/market') model.value=1
...@@ -269,12 +335,73 @@ const queryObj = reactive({ ...@@ -269,12 +335,73 @@ const queryObj = reactive({
CountryName: '', //国家名称 CountryName: '', //国家名称
SeasonName: '', //季节名称 SeasonName: '', //季节名称
ColorName: '', //颜色名称 ColorName: '', //颜色名称
CountryNames: [], //国家名称
SeasonNames: [], //季节名称
ColorNames: [], //颜色名称
pageCount: 0, //总页数 pageCount: 0, //总页数
TempType: 0, TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告 TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0, type: 0,
sort: 0 sort: 0,//排序方式
}) })
//
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) =>{ const addTemplate = (type:number) =>{
// searchData.value.TemplateType = type // searchData.value.TemplateType = type
// marketStore.setMarket(!market) // marketStore.setMarket(!market)
...@@ -361,6 +488,10 @@ const goToTemplate = (item: any) => { ...@@ -361,6 +488,10 @@ const goToTemplate = (item: any) => {
} }
} }
const search = () => {
queryObj.pageIndex = 1
queryTemplateBySearchHandler()
}
/*** /***
* 获取模板市场分页列表 * 获取模板市场分页列表
*/ */
...@@ -372,6 +503,12 @@ const queryTemplateBySearchHandler = async () => { ...@@ -372,6 +503,12 @@ const queryTemplateBySearchHandler = async () => {
if(queryObj.pageIndex == 1) dataList.value =[] if(queryObj.pageIndex == 1) dataList.value =[]
let pageRes = await ConfigService.GetTemplagePageAsync(queryObj); let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
if (pageRes.data.resultCode == 1) { 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); dataList.value = dataList.value.concat(pageRes.data.data.pageData);
queryObj.pageCount = pageRes.data.data.pageCount; queryObj.pageCount = pageRes.data.data.pageCount;
} }
...@@ -384,23 +521,65 @@ const queryTemplateBySearchHandler = async () => { ...@@ -384,23 +521,65 @@ const queryTemplateBySearchHandler = async () => {
//线路切换 //线路切换
const onLineChangeHandler = (lineId: number) => { const onLineChangeHandler = (lineId: number) => {
queryObj.LineId = lineId; queryObj.LineId = lineId;
queryObj.pageIndex = 1 search()
queryTemplateBySearchHandler();
} }
//国家切换 //国家切换
const onCountryNameChangeHandler = (CountryName: string,type:Number) => { const onCountryNameChangeHandler = (row: Object) => {
if(type) CountryOtherName.value = true if(row=='') {
else CountryOtherName.value = false queryObj.CountryName = ''
queryObj.CountryName = CountryName; queryObj.CountryNames = []
queryObj.pageIndex = 1 countriesOther.value.forEach(x=>{
queryTemplateBySearchHandler(); 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 = (SeasonName: string) => { const onSeasonNameChangeHandler = (row: Object) => {
queryObj.SeasonName = SeasonName; if(row=='') {
queryObj.pageIndex = 1 queryObj.SeasonName = ''
queryTemplateBySearchHandler(); 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()
} }
//类型切换 //类型切换
...@@ -412,18 +591,32 @@ const onTypeChangeHandler = (Type: string,num: Number) => { ...@@ -412,18 +591,32 @@ const onTypeChangeHandler = (Type: string,num: Number) => {
queryObj.TemplateType = Type; queryObj.TemplateType = Type;
} }
queryObj.pageIndex = 1 search()
queryTemplateBySearchHandler();
} }
//颜色切换 //颜色切换
const onColorNameChangeHandler = (ColorName: string,ColorValue: String) => { const onColorNameChangeHandler = (row: Object) => {
MenuColorVisible.value = false if(row=='') {
if(ColorValue) datas.ColorValue = ColorValue queryObj.ColorName = ''
else datas.ColorValue = '' queryObj.ColorNames = []
queryObj.ColorName = ColorName; colorArr.value.forEach(x=>{
queryObj.pageIndex = 1 x.checked = false
queryTemplateBySearchHandler(); })
}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()
} }
/** /**
...@@ -448,8 +641,14 @@ const getTemplateQuery = async () => { ...@@ -448,8 +641,14 @@ const getTemplateQuery = async () => {
let res = await ConfigService.GetTemplateQueryAsync(); let res = await ConfigService.GetTemplateQueryAsync();
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
var tempData = res.data.data; var tempData = res.data.data;
let arrList = function(list) {
list.forEach(x => {
x.checked = false
});
}
//国家 //国家
if (tempData && tempData.CountryList) { if (tempData && tempData.CountryList) {
arrList(tempData.CountryList)
countriesOther.value = tempData.CountryList.filter((x,index)=>{ countriesOther.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1){ return index>=12 } if(model.value==1){ return index>=12 }
else return index>=13 else return index>=13
...@@ -461,17 +660,40 @@ const getTemplateQuery = async () => { ...@@ -461,17 +660,40 @@ const getTemplateQuery = async () => {
} }
//颜色 //颜色
if (tempData && tempData.ColorList) { if (tempData && tempData.ColorList) {
colorArrOther.value = tempData.ColorList.filter((x,index)=>{ let ColorList = [
if(model.value==1){ return index>=15 } {ColorName:'红',ColorValue:'#E43939',Id:1},
else return index>=14 {ColorName:'橙',ColorValue:'#F79A2C',Id:2},
}) {ColorName:'黄',ColorValue:'#FFF60B',Id:3},
colorArr.value = tempData.ColorList.filter((x,index)=>{ {ColorName:'绿',ColorValue:'#3DD948',Id:4},
if(model.value==1){ return index<14 } {ColorName:'青',ColorValue:'#39CAE4',Id:5},
else return index<14 {ColorName:'蓝',ColorValue:'#2C31F1',Id:6},
{ColorName:'紫',ColorValue:'#7A39E4',Id:7},
{ColorName:'玫红',ColorValue:'#E65FC1',Id:8},
{ColorName:'棕色',ColorValue:'#D0B478',Id:9},
{ColorName:'白',ColorValue:'#FFFFFF',Id:10},
{ColorName:'黑',ColorValue:'#000000',Id:11},
{ColorName:'灰',ColorValue:'#BABABA',Id:12},
]
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) { if (tempData && tempData.SeasonList) {
arrList(tempData.SeasonList)
seasonArr.value = tempData.SeasonList; seasonArr.value = tempData.SeasonList;
} }
//类型 //类型
...@@ -526,6 +748,43 @@ onMounted(()=>{ ...@@ -526,6 +748,43 @@ 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;
} }
.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{ .MarketButton.active.active2{
margin-right: 0; margin-right: 0;
} }
...@@ -566,9 +825,10 @@ onMounted(()=>{ ...@@ -566,9 +825,10 @@ onMounted(()=>{
/* background: #fff; */ /* background: #fff; */
} }
.marketTag-color{ .marketTag-color{
margin-top: 5px;
margin-bottom: 13px; margin-bottom: 13px;
margin-right: 47px; margin-left: 15px;
margin-right: 31px;
text-align: center;
} }
.marketTagTitleBox{ .marketTagTitleBox{
padding-right: 30px; padding-right: 30px;
...@@ -663,18 +923,18 @@ onMounted(()=>{ ...@@ -663,18 +923,18 @@ onMounted(()=>{
z-index: 1; z-index: 1;
} }
.Market-from{ .Market-from{
/* background: #f3f6fb; */
background: linear-gradient(0deg, #FFF, #E3ECFF); background: linear-gradient(0deg, #FFF, #E3ECFF);
height:100vh; height: 100vh;
overflow: auto; overflow: auto;
} }
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{ .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
padding: 0; padding: 0;
} }
.marketTag{ .marketTag{
padding: 20px 0 20px 32px; padding: 20px 0px 0 30px;
width: 460px; width: 460px;
height: 245px; overflow: hidden;
/* height: 245px; */
} }
.marketTag+.marketTag{ .marketTag+.marketTag{
margin-left: 32px; margin-left: 32px;
...@@ -723,7 +983,7 @@ onMounted(()=>{ ...@@ -723,7 +983,7 @@ onMounted(()=>{
.el-check-tag { .el-check-tag {
width: 86px; width: 86px;
height: 36px; height: 36px;
margin-right: 13px; margin-right: 14px;
margin-bottom: 18px; margin-bottom: 18px;
line-height: 36px; line-height: 36px;
border-radius: 6px; border-radius: 6px;
...@@ -739,6 +999,9 @@ onMounted(()=>{ ...@@ -739,6 +999,9 @@ onMounted(()=>{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important; 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{ .MarketIndexList{
width: 100%; width: 100%;
...@@ -774,16 +1037,14 @@ onMounted(()=>{ ...@@ -774,16 +1037,14 @@ onMounted(()=>{
top: -5px; top: -5px;
} }
.MarketIndexListBox:hover .MarketIndexList{
}
.MarketIndexList-img{ .MarketIndexList-img{
width: 100%; width: 100%;
/* height: 0; /* height: 0;
position: relative; position: relative;
padding-bottom: 56.25%; padding-bottom: 56.25%;
overflow: hidden; */ overflow: hidden; */
border-radius: 4px; border-radius: 6px;
} }
.MarketIndexList-img img{ .MarketIndexList-img img{
/* position: absolute; /* position: absolute;
...@@ -814,7 +1075,57 @@ onMounted(()=>{ ...@@ -814,7 +1075,57 @@ onMounted(()=>{
} }
.MarketIndexButtom{ .MarketIndexButtom{
color: #ffff; color: #ffff;
width: 92px; width: 86px;
height: 36px;
letter-spacing: 1px;
font-size: 14px !important;
border-radius: 6px;
}
.MarketIndexButtomIcon>div .el-icon.icon-xihuan{
color: #FF674D !important;
}
.MarketIndexButtomIcon>div .el-icon{
width: 36px;
height: 36px;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
line-height: 36px;
color: #B9B9B9;
}
.MarketIndexButtomIcon>div:hover .el-icon{
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{ .layout-item{
width: 180px; width: 180px;
......
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