Skip to content

P
pptist
Commit 6b3f5fcd authored by 罗超's avatar 罗超
Browse files
Options

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

parents 28b7defa 35174d87
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 67 deletions
src/assets/styles/common.css
View file @ 6b3f5fcd
...@@ -416,6 +416,16 @@ page { ...@@ -416,6 +416,16 @@ page {
.q-ma-lg{ .q-ma-lg{
margin:20px margin:20px
} }
.q-ma-xs{
margin-right: 5px;
margin-left: 5px;
}
.q-mr-xs{
margin-right: 5px;
}
.q-ml-xs{
margin-left: 5px;
}
.q-pa-lg{ .q-pa-lg{
padding:20px padding:20px
} }
......
src/components/Maps/MapAttributes/MarkAttributes.vue
View file @ 6b3f5fcd
...@@ -53,7 +53,22 @@ ...@@ -53,7 +53,22 @@
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/> <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div> </div>
</div> </div>
<div class="attr-items flex items-center grey-bg q-mt-lg">
<div style="font-size: 11px;width:50px;">加粗</div>
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',3)"/>
<Slider class="filter-slider grow" :max="800" :min="400" :step="200" :value="attrs.fontWeight"
@update:value="value => {updateLabFontSizeHandler(value as number),attrs.fontWeight=value}" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',3)"/>
</div>
</div>
<div class="attr-items flex items-center q-mt-md">
<div style="font-size: 11px;width:50px;">字体</div>
<el-select size="mini" v-model="attrs.fontFamily" filterable @change="val=>updateLabFontFamilyHandler(val as number)" placeholder="请选择">
<el-option v-for="item in formatFonts" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="attr-items flex items-center q-mt-md"> <div class="attr-items flex items-center q-mt-md">
<div style="font-size: 11px;width:50px;">对齐</div> <div style="font-size: 11px;width:50px;">对齐</div>
<el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择"> <el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择">
...@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2'; ...@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2';
import { color as am4coreColor,Label} from "@amcharts/amcharts4/core"; import { color as am4coreColor,Label} from "@amcharts/amcharts4/core";
import { watch } from 'vue'; import { watch } from 'vue';
import MapService from '@/services/MapService'; import MapService from '@/services/MapService';
import { useFontStore } from '@/store'
const mapStore = useMapStore() const mapStore = useMapStore()
const { current,fillColor } = storeToRefs(mapStore) const { current,fillColor } = storeToRefs(mapStore)
const { formatFonts } = storeToRefs(useFontStore())
const attrs = reactive({ const attrs = reactive({
arrow:-1, arrow:-1,
textEnable:false, textEnable:false,
fontSize:12, fontSize:12,
fontWeight:400,
fontFamily: '',
fontAlign:0, fontAlign:0,
fontText:'', fontText:'',
fontColor:'#000', fontColor:'#000',
...@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => { ...@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => {
} }
value = attrs.fontSize value = attrs.fontSize
updateLabFontSizeHandler(value as number) updateLabFontSizeHandler(value as number)
}if(val==3){
if(symbol=='-'&&attrs.fontWeight>400){
attrs.fontWeight = attrs.fontWeight-200
}if(symbol=='+'&&attrs.fontWeight<800){
attrs.fontWeight = attrs.fontWeight+200
}
value = attrs.fontWeight
updateLabFontWeightHandler(value as number)
} }
} }
const updateFilter = (t: number, val: number) => { const updateFilter = (t: number, val: number) => {
...@@ -213,6 +240,8 @@ const createLabel = ()=>{ ...@@ -213,6 +240,8 @@ const createLabel = ()=>{
//label.fontWeight = 'bold' //label.fontWeight = 'bold'
attrs.fontSize = 13 attrs.fontSize = 13
attrs.fontWeight = 400
attrs.fontFamily = 'Microsoft Yahei'
attrs.fill = fillColor.value.realColor attrs.fill = fillColor.value.realColor
attrs.text = '文字内容' attrs.text = '文字内容'
attrs.fontAlign = 0 attrs.fontAlign = 0
...@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{ ...@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{
}, 500); }, 500);
} }
} }
const updateLabFontWeightHandler = (val:number) =>{
let lab = getCurrentLabel()
if(lab){
lab.fontWeight=val
setTimeout(() => {
asyncAllMarkHandler()
}, 500);
}
}
const updateLabFontFamilyHandler = (val:number) =>{
let lab = getCurrentLabel()
if(lab){
lab.fontFamily=val
setTimeout(() => {
asyncAllMarkHandler()
}, 500);
}
}
const setLabelTextHandler = (val:string)=>{ const setLabelTextHandler = (val:string)=>{
let lab = getCurrentLabel() let lab = getCurrentLabel()
if(lab){ if(lab){
...@@ -335,6 +382,8 @@ const setAttribute = ()=>{ ...@@ -335,6 +382,8 @@ const setAttribute = ()=>{
attrs.textEnable = true attrs.textEnable = true
attrs.fontText = lab.text attrs.fontText = lab.text
attrs.fontSize = lab.fontSize??15 attrs.fontSize = lab.fontSize??15
attrs.fontWeight = lab.fontWeight??400
attrs.fontFamily = lab.fontFamily??'Microsoft Yahei'
attrs.fontAlign = lab.marginBottom attrs.fontAlign = lab.marginBottom
attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String() attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String()
//attrs.fontSize = //attrs.fontSize =
...@@ -357,4 +406,4 @@ setAttribute() ...@@ -357,4 +406,4 @@ setAttribute()
watch(()=>current.value,()=>{ watch(()=>current.value,()=>{
setAttribute() setAttribute()
}) })
</script> </script>
\ No newline at end of file
src/components/Maps/MapAttributes/index.vue
View file @ 6b3f5fcd
...@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore) ...@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore)
right: 20px; right: 20px;
left: unset; left: unset;
top: 45px; top: 45px;
bottom: 200px;
position: absolute; position: absolute;
z-index: 9; z-index: 9;
overflow: auto;
} }
.attr-box .attr-header { .attr-box .attr-header {
......
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ 6b3f5fcd
...@@ -42,9 +42,17 @@ ...@@ -42,9 +42,17 @@
<el-input v-model="titleValue" @blur="handleUpdateTitle()" <el-input v-model="titleValue" @blur="handleUpdateTitle()"
:placeholder="searchData.TemplateType!=2?'输入模板名称':'输入广告名称'" class="input-with-select"></el-input> :placeholder="searchData.TemplateType!=2?'输入模板名称':'输入广告名称'" class="input-with-select"></el-input>
</div> </div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>国家：</p> <p class="q-mt-md row flex-between items-center">
<div class="row wrap q-mt-md"> <div><span class="Required q-mr-md">*</span>国家：</div>
<el-select v-model="queryObj.CountryName" class="m-2" placeholder="请选择国家"> <el-button v-if="!datas.EditAddCountryShow" class="button-new-tag ml-1"
style="width: 56px;"
size="small"
@click="EditAddDatas(0,0)">
+ 国家
</el-button>
</p>
<div class="row q-mt-md">
<el-select v-model="queryObj.CountryName" filterable class="m-2" placeholder="请选择国家">
<el-option <el-option
v-for="item in dispositionObj.CountryList" v-for="item in dispositionObj.CountryList"
:key="item.CountryValue" :key="item.CountryValue"
...@@ -52,20 +60,52 @@ ...@@ -52,20 +60,52 @@
:value="item.CountryValue" :value="item.CountryValue"
/> />
</el-select> </el-select>
<el-button v-if="!datas.EditAddCountryShow" class="button-new-tag q-ml-md ml-1"
@click="EditAddDatas(1,0)">
编辑
</el-button>
</div> </div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p> <div class="EditAddElement" v-if="datas.EditAddCountryShow">
<div class="row wrap q-mt-md"> <p class="q-mt-md row flex-between">
<el-select v-model="queryObj.LineId" class="m-2" <span>{{datas.EditAddType==1?'编辑':'新增'}}国家：</span>
filterable placeholder="请选择线路" <span>
@change="onLineChangeHandler(1)"> <el-button class="button-new-tag ml-1"
<el-option size="small" @click="CancelEditAdd(0)">
v-for="item in lines" 取消
:key="item.LineID" </el-button>
:label="item.LineName" <el-button class="button-new-tag ml-1 q-ml-xs"
:value="item.LineID" :loading="datas.addEditLoading"
/> type="danger"
</el-select> size="small" @click="setEditAdd(0)">
提交
</el-button>
</span>
</p>
<div class="row q-mt-md">
<span class="Required q-ma-xs">*</span>
<el-input
placeholder="国家名称"
v-model="datas.addEditCountry.CountryName"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
</div>
</div> </div>
<template v-if="false">
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.LineId" class="m-2"
filterable placeholder="请选择线路"
@change="onLineChangeHandler(1)">
<el-option
v-for="item in lines"
:key="item.LineID"
:label="item.LineName"
:value="item.LineID"
/>
</el-select>
</div>
<template v-if="Series.length>0"> <template v-if="Series.length>0">
<p class="q-mt-md"><span class="Required q-mr-md"></span>选择系列：</p> <p class="q-mt-md"><span class="Required q-mr-md"></span>选择系列：</p>
<div class="row wrap q-mt-md"> <div class="row wrap q-mt-md">
...@@ -80,6 +120,7 @@ ...@@ -80,6 +120,7 @@
</el-select> </el-select>
</div> </div>
</template> </template>
</template>
<p class="q-mt-md"><span class="Required q-mr-md"></span>标签：</p> <p class="q-mt-md"><span class="Required q-mr-md"></span>标签：</p>
<div class="row wrap q-mt-md"> <div class="row wrap q-mt-md">
<el-tag <el-tag
...@@ -104,61 +145,105 @@ ...@@ -104,61 +145,105 @@
+ 添加标签 + 添加标签
</el-button> </el-button>
</div> </div>
<p class="q-mt-md"><span class="Required q-mr-md"></span>选择颜色：</p> <p class="q-mt-md row flex-between items-center">
<div><span class="Required q-mr-md">*</span>选择颜色：</div>
<el-button v-if="!datas.EditAddShow" class="button-new-tag ml-1"
style="width: 56px;"
size="small"
@click="EditAddDatas(0,1)">
+ 色值
</el-button>
</p>
<div class="row q-mt-md"> <div class="row q-mt-md">
<el-select v-model="queryObj.ColorStr" placeholder="请选择颜色" <!-- <el-select v-model="queryObj.ColorId" placeholder="请选择分类">
@change="setCountryValue">
<el-option <el-option
key="" key=""
label="不限" label="不限"
value="" value=""
/> />
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select> -->
<el-select class="" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色"
@change="setCountryValue">
<el-option <el-option
v-for="item in dispositionObj.ColorList" v-for="item in dispositionObj.ColorList"
:key="item.ColorValue" :key="item.ColorValue"
:label="`${item.ColorName} / ${item.ColorValue}`" :label="`${item.ColorName}${item.ColorValue}`"
:value="item.ColorValue" :value="item.ColorValue"
/>
>
<template #default>
<el-tag
:color="item.ColorValue"
effect="dark" class="q-mr-md">
{{ item.label }}
</el-tag>
<span>{{item.ColorName}}</span>
<span class="q-ml-md">{{item.ColorValue}}</span>
</template>
</el-option>
</el-select> </el-select>
<el-button v-if="!datas.addColorsShow" class="button-new-tag q-ml-md ml-1" <el-button v-if="!datas.EditAddShow" class="button-new-tag q-ml-md ml-1"
@click="datas.addColorsShow=!datas.addColorsShow"> @click="EditAddDatas(1,1)">
+ 颜色 编辑
</el-button> </el-button>
</div> </div>
<template v-if="datas.addColorsShow"> <div class="EditAddElement" v-if="datas.EditAddShow">
<p class="q-mt-md row flex-between"> <p class="q-mt-md row flex-between">
<span>新增颜色：</span> <span>{{datas.EditAddType==1?'编辑':'新增'}}色值：</span>
<span> <span>
<el-button class="button-new-tag ml-1" <el-button class="button-new-tag ml-1"
size="small" @click="CancelAddColor()"> size="small" @click="CancelEditAdd(1)">
取消 取消
</el-button> </el-button>
<el-button class="button-new-tag ml-1 q-ml-xs" <el-button class="button-new-tag ml-1 q-ml-xs"
:loading="datas.addColorLoading" :loading="datas.addEditLoading"
type="danger" type="danger"
size="small" @click="setColor()"> size="small" @click="setEditAdd(1)">
提交 提交
</el-button> </el-button>
</span> </span>
</p> </p>
<div class="row q-mt-md"> <div class="row q-mt-md">
<span class="Required q-mr-xs">*</span> <el-select v-model="datas.addEditColor.ColorId"
class="ml-1 w-20"
placeholder="分类"
size="small">
<el-option
key=""
label="不限"
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select>
<span class="Required q-ma-xs">*</span>
<el-input <el-input
placeholder="输入颜色名称" placeholder="色值名称"
v-model="datas.addColor.ColorName" v-model="datas.addEditColor.ColorName"
class="ml-1 w-20 q-ml-sm" class="ml-1 w-20 q-ml-sm"
size="small" size="small"
/> />
<span class="Required q-mr-xs q-ml-sm">*</span> <span class="Required q-mr-xs q-ml-sm">*</span>
<el-input <el-input
placeholder="例：#e5e3da" :disabled="datas.EditAddType==1"
v-model="datas.addColor.ColorValue" placeholder="#e5e3da"
v-model="datas.addEditColor.ColorValue"
class="ml-1 w-20 q-ml-sm" class="ml-1 w-20 q-ml-sm"
size="small" size="small"
/> />
</div> </div>
</template> </div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p> <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p>
<div class="row wrap q-mt-md"> <div class="row wrap q-mt-md">
<el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节"> <el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
...@@ -213,12 +298,19 @@ ...@@ -213,12 +298,19 @@
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
const datas = reactive({ const datas = reactive({
addColor: { addEditCountry: {
CountryId: '',
CountryName: '',
},
addEditColor: {
ColorId: '',
ColorValue: '', ColorValue: '',
ColorName: '', ColorName: '',
}, },
addColorLoading: false, EditAddType: 0,//0新增 1编辑
addColorsShow: false, addEditLoading: false,
EditAddShow: false,
EditAddCountryShow: false,
DataSource:{}, DataSource:{},
CountryValue: null, CountryValue: null,
}) })
...@@ -230,6 +322,17 @@ ...@@ -230,6 +322,17 @@
searchData.value = inject(injectKeyTemplate) searchData.value = inject(injectKeyTemplate)
const lines = ref([] as Array < any > ) //线路 const lines = ref([] as Array < any > ) //线路
const Series = ref([] as Array < any > ) //系列 const Series = ref([] as Array < any > ) //系列
const ColorList = [
{Name:'红',Id:1},
{Name:'橙',Id:2},
{Name:'黄',Id:3},
{Name:'绿',Id:4},
{Name:'青',Id:5},
{Name:'蓝',Id:6},
{Name:'紫',Id:7},
{Name:'黑',Id:8},
{Name:'白',Id:9},
]
const cursors = [] as Array<any> const cursors = [] as Array<any>
...@@ -265,16 +368,81 @@ ...@@ -265,16 +368,81 @@
queryObj.value.Title = titleValue.value queryObj.value.Title = titleValue.value
} }
const CancelAddColor = () =>{ const EditAddDatas = (type:Number,num:Number) => {
datas.addColorsShow = false datas.EditAddType = type
datas.addColor = { if(!num) {
ColorValue: '', datas.EditAddCountryShow=!datas.EditAddCountryShow
ColorName: '', if(type) datas.addEditCountry = {
CountryId: '',
CountryName: queryObj.value.CountryName,
}
}
else {
datas.EditAddShow=!datas.EditAddShow
if(type) datas.addEditColor = {
ColorId: queryObj.value.ColorId,
ColorValue: queryObj.value.ColorStr,
ColorName: queryObj.value.ColorName,
}
}
}
const CancelEditAdd = (num:Number) =>{
if(!num){
datas.EditAddCountryShow = false
datas.addEditCountry = {
CountryId: '',
CountryName: '',
}
}else{
datas.EditAddShow = false
datas.addEditColor = {
ColorId: '',
ColorValue: '',
ColorName: '',
}
} }
} }
const setEditAdd = async (num:Number) => {
if(!num){
}else{
setColor()
}
}
const setCountry = async () => {
if(!datas.addEditCountry.CountryName){
ElMessage({
showClose: true,
message: '请完善国家名称',
type: 'warning',
})
return
}
try {
datas.addEditLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addEditCountry)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
message: '新增颜色成功',
type: 'success',
})
GetTemplateConfigDatas()
CancelEditAdd()
}else {
ElMessage({
showClose: true,
message: '新增颜色失败',
type: 'warning',
})
}
datas.addEditLoading = false
} catch (error) {}
}
const setColor = async () => { const setColor = async () => {
if(!datas.addColor.ColorValue||!datas.addColor.ColorName){ if(!datas.addEditColor.ColorValue||!datas.addEditColor.ColorName){
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: '请完善颜色的名称及颜色16进制', message: '请完善颜色的名称及颜色16进制',
...@@ -282,7 +450,7 @@ ...@@ -282,7 +450,7 @@
}) })
return return
} }
if(datas.addColor.ColorValue.indexOf('#')==-1){ if(datas.addEditColor.ColorValue.indexOf('#')==-1){
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "色号需要在最前面加 # 号", message: "色号需要在最前面加 # 号",
...@@ -291,8 +459,8 @@ ...@@ -291,8 +459,8 @@
return return
} }
try { try {
datas.addColorLoading = true datas.addEditLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addColor) let dataRes = await ConfigService.SetTemplateConfigData(datas.addEditColor)
if (dataRes.data.resultCode == 1) { if (dataRes.data.resultCode == 1) {
ElMessage({ ElMessage({
showClose: true, showClose: true,
...@@ -300,7 +468,7 @@ ...@@ -300,7 +468,7 @@
type: 'success', type: 'success',
}) })
GetTemplateConfigDatas() GetTemplateConfigDatas()
CancelAddColor() CancelEditAdd()
}else { }else {
ElMessage({ ElMessage({
showClose: true, showClose: true,
...@@ -308,7 +476,7 @@ ...@@ -308,7 +476,7 @@
type: 'warning', type: 'warning',
}) })
} }
datas.addColorLoading = false datas.addEditLoading = false
} catch (error) {} } catch (error) {}
} }
...@@ -487,6 +655,12 @@ ...@@ -487,6 +655,12 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.EditAddElement{
box-shadow: 0px 1px 1px #f6f6f6;
background: #f6f6f6;
padding: 0 5px 10px 5px;
margin-top: 5px;
}
.origin-image { .origin-image {
height: 100px; height: 100px;
background-size: contain; background-size: contain;
......
src/views/Editor/index.vue
View file @ 6b3f5fcd
...@@ -124,6 +124,7 @@ const datas = reactive({ ...@@ -124,6 +124,7 @@ const datas = reactive({
TemplateType: TemplatesType,// 1行程模版 2广告模版 TemplateType: TemplatesType,// 1行程模版 2广告模版
Width: 0, Width: 0,
Height: 0, Height: 0,
ColorId: '',
} }
}, },
......
src/views/Market/Index.vue
View file @ 6b3f5fcd
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<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"> <el-button color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
<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> </div>
...@@ -80,7 +80,9 @@ ...@@ -80,7 +80,9 @@
<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 v-if="countriesOther.length>0" color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
</div> </div>
<div class="row wrap q-pt-sm"> <div class="row wrap q-pt-sm">
<div class="row items-center wrap"> <div class="row items-center wrap">
...@@ -89,9 +91,10 @@ ...@@ -89,9 +91,10 @@
effect="dark" effect="dark"
content="不限" content="不限"
placement="bottom"> placement="bottom">
<div class="marketTag-color text-small pointer" @change="onColorNameChangeHandler('')"> <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<span class="colorMark" <span class="colorMark"
:style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)','border-color':queryObj.ColorName==''?'black':'#eee'}"></span> :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
'border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
</div> </div>
</el-tooltip> </el-tooltip>
<template v-for="(x,i) in colorArr" :key="i"> <template v-for="(x,i) in colorArr" :key="i">
...@@ -113,6 +116,26 @@ ...@@ -113,6 +116,26 @@
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<div class="MarketType row flex-between">
<div class="row">
<div class="MarketButton cursor-pointer"
:class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
@click="onTypeChangeHandler(item.type)">
{{item.typeName}}
</div>
</div>
<div class="row">
<div class="MarketButton cursor-pointer"
:class="[queryObj.sort == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
@click="onTypeChangeHandler(item.type,1)">
{{item.typeName}}
</div>
<div class="MarketButton active active2 cursor-pointer">
<span>版面</span>
<el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
</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=" rounded"
style="column-count: 6;"> style="column-count: 6;">
...@@ -136,11 +159,11 @@ ...@@ -136,11 +159,11 @@
<div class="MarketIndexList-img"> <div class="MarketIndexList-img">
<img :src="item.CoverImg" class="rounded" /> <img :src="item.CoverImg" class="rounded" />
</div> </div>
<div class="MarketIndexList-text row items-center"> <!-- <div class="MarketIndexList-text row items-center">
<el-tag class="mx-1 q-mr-md" effect="dark" v-if="item.TemplateType==2" <el-tag class="mx-1 q-mr-md" effect="dark" v-if="item.TemplateType==2"
size="small">广告</el-tag> size="small">广告</el-tag>
<span>{{item.Title}}</span> <span>{{item.Title}}</span>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -192,6 +215,7 @@ const colorArrOther = ref([] as Array < any > ); //颜色 ...@@ -192,6 +215,7 @@ const colorArrOther = ref([] as Array < any > ); //颜色
const colorArr = ref([] as Array < any > ); //颜色 const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节 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 dataList = ref([] as Array < any > ); //模板数据列表 const dataList = ref([] as Array < any > ); //模板数据列表
const marketRef = ref<any>() const marketRef = ref<any>()
const MenuColorVisible = ref(false) const MenuColorVisible = ref(false)
...@@ -249,6 +273,7 @@ const queryObj = reactive({ ...@@ -249,6 +273,7 @@ const queryObj = reactive({
TempType: 0, TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告 TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0, type: 0,
sort: 0
}) })
const addTemplate = (type:number) =>{ const addTemplate = (type:number) =>{
// searchData.value.TemplateType = type // searchData.value.TemplateType = type
...@@ -379,9 +404,14 @@ const onSeasonNameChangeHandler = (SeasonName: string) => { ...@@ -379,9 +404,14 @@ const onSeasonNameChangeHandler = (SeasonName: string) => {
} }
//类型切换 //类型切换
const onTypeChangeHandler = (Type: string) => { const onTypeChangeHandler = (Type: string,num: Number) => {
searchData.value.MarketTemplateType = Type if(num){
queryObj.TemplateType = Type; queryObj.sort = Type;
}else{
searchData.value.MarketTemplateType = Type
queryObj.TemplateType = Type;
}
queryObj.pageIndex = 1 queryObj.pageIndex = 1
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
} }
...@@ -433,11 +463,11 @@ const getTemplateQuery = async () => { ...@@ -433,11 +463,11 @@ const getTemplateQuery = async () => {
if (tempData && tempData.ColorList) { if (tempData && tempData.ColorList) {
colorArrOther.value = tempData.ColorList.filter((x,index)=>{ colorArrOther.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index>=15 } if(model.value==1){ return index>=15 }
else return index>=7 else return index>=14
}) })
colorArr.value = tempData.ColorList.filter((x,index)=>{ colorArr.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index<15 } if(model.value==1){ return index<14 }
else return index<15 else return index<14
}) })
} }
//季节 //季节
...@@ -445,10 +475,21 @@ const getTemplateQuery = async () => { ...@@ -445,10 +475,21 @@ const getTemplateQuery = async () => {
seasonArr.value = tempData.SeasonList; seasonArr.value = tempData.SeasonList;
} }
//类型 //类型
for(let i=1;i<3;i++){ for(let i=0;i<3;i++){
let text = '所有模版'
if(i==1) text = '行程'
if(i==2) text = '广告'
typeArr.value.push({ typeArr.value.push({
type:i, type:i,
typeName:i==1?'模版':'广告' typeName:text
})
}
for(let i=0;i<2;i++){
let text = '综合排序'
if(i==1) text = '最新模板'
sortArr.value.push({
type:i,
typeName:text
}) })
} }
} }
...@@ -485,6 +526,45 @@ onMounted(()=>{ ...@@ -485,6 +526,45 @@ 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;
} }
.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{ .marketTag-color{
margin-top: 5px; margin-top: 5px;
margin-bottom: 13px; margin-bottom: 13px;
...@@ -567,9 +647,9 @@ onMounted(()=>{ ...@@ -567,9 +647,9 @@ onMounted(()=>{
border-radius: 8px; border-radius: 8px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px !important;
color: #FFFFFF; color: #FFFFFF;
line-height: 32px; line-height: 36px;
text-align: center; text-align: center;
} }
.Market-fromBj{ .Market-fromBj{
...@@ -655,7 +735,7 @@ onMounted(()=>{ ...@@ -655,7 +735,7 @@ onMounted(()=>{
.MarketIndexListBox{ .MarketIndexListBox{
/* width:calc(20% - 10px); */ /* width:calc(20% - 10px); */
/* margin: 10px 10px 0 0; */ /* margin: 10px 10px 0 0; */
padding:5px; /* padding:5px; */
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;
......
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