Skip to content

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

颜色 分类 及新增

parent 896ce41b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 434 additions and 172 deletions
src/components/home/temDesign.vue
View file @ eca7030a
......@@ -55,7 +55,7 @@ import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user";
import { useSellTemplateStore } from '@/store'
import { useSellTemplateStore,useSlidesStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
......@@ -72,6 +72,7 @@ import { noDataImg } from "@/utils/common";
const {
userInfo
} = storeToRefs(useUserStore())
const slidesStore = useSlidesStore()
const router = useRouter();
const typeArr = ref([] as Array < any > ); //类型
const layouts = ref([
......@@ -107,7 +108,6 @@ const deleteLoading = ref<any>(null)
const datas = reactive({
TemplateBoxRec: null,// 推荐尺寸
DetailsVisible: false,
addVisible: false,
loading: false,
ColorValue: '',
scrollTop: 0,
......@@ -211,10 +211,12 @@ const ConfirmCreation = () => {
})
}
}
datas.addVisible = false
let viewportRatios = 0
if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
slidesStore.setViewportRatio(viewportRatios)
if(datas.TemplateBoxRec.Id==3) {
datas.TemplateBoxRec = null
addTemplate(1)
......@@ -225,6 +227,8 @@ const ConfirmCreation = () => {
}else{
VIEWPORT_SIZE.value = datas.CustomSize.width
VIEWPORT_VER_SIZE.value = datas.CustomSize.height
viewportRatios = datas.CustomSize.height/datas.CustomSize.width
slidesStore.setViewportRatio(viewportRatios)
datas.CustomSize.width = null
datas.CustomSize.height = null
addTemplate(2)
......
src/services/ConfigService.ts
View file @ eca7030a
......@@ -147,7 +147,7 @@ class ConfigService{
/**
*
* @returns 获取模板查询条件
* @returns 获取模板查询条件 配置项数据(颜色、国家、季节)
*/
static async GetTemplateQueryAsync():Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigData",{})
......
src/services/LineService.ts
View file @ eca7030a
......@@ -6,17 +6,17 @@ class LineService{
static async RemoveTemplateConfigData(ID : number):Promise<HttpResponse>{
return Api.Post("triptemplate_RemoveTemplateConfigData",{ID})
}
// 根据ke新增编辑配置
static async SetTemplateConfigData(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_SetTemplateConfigData",params)
// 批量设置颜色分类
static async BatchSetColor(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_BatchSetColor",params)
}
// 获取配置项数据(颜色、国家、季节) Trip_Template_Color Trip_Template_Country Trip_Template_Season
static async GetTemplateConfigDataList(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigDataList",params)
}
// 获取配置项数据(颜色、国家、季节)
static async GetTemplateConfigData(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigData",params)
// 获取颜色
static async GetParentColor(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetParentColor",params)
}
// 系列
......
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ eca7030a
......@@ -157,7 +157,8 @@
</el-button> -->
</p>
<div class="row q-mt-md">
<el-select v-model="queryObj.ColorId" placeholder="请选择分类">
<el-select v-model="queryColor.Code" placeholder="请选择分类"
@change="getColor(1)">
<el-option
key=""
label="不限"
......@@ -165,28 +166,26 @@
/>
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.ColorName}`"
:value="item.Id"
:key="item.ID"
:label="`${item.Name}`"
:value="item.ID"
/>
</el-select>
<el-select class="q-pl-sm" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色"
@change="setCountryValue">
<el-option
v-for="item in dispositionObj.ColorList"
:key="item.ColorValue"
:label="`${item.ColorName}${item.ColorValue}`"
:value="item.ColorValue"
v-for="item in datas.ColorList"
:key="item.Content"
:label="`${item.Content}`"
:value="item.Content"
>
<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>
:color="item.Content"
effect="dark" class="q-mr-md"></el-tag>
<span>{{item.Name}}</span>
<span class="q-ml-md">{{item.Content}}</span>
</template>
</el-option>
</el-select>
......@@ -222,10 +221,10 @@
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.ColorName}`"
:value="item.Id"
v-for="item in datas.ColorList"
:key="item.ID"
:label="`${item.Name}`"
:value="item.ID"
/>
</el-select>
<span class="Required q-ma-xs">*</span>
......@@ -309,6 +308,7 @@
ColorValue: '',
ColorName: '',
},
ColorList: [],
EditAddType: 0,//0新增 1编辑
addEditLoading: false,
EditAddShow: false,
......@@ -318,13 +318,21 @@
})
const dispositionObj = ref({} as any)
const queryObj = ref({} as any)
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const queryColors = ref({
DictKey: 'Trip_Template_Color',
Name: queryObj.value.ColorName,
})
const searchData = ref({} as any)
datas.DataSource = inject(injectKeyDataSource)
queryObj.value = inject(injectKeyDataSource).queryObj
searchData.value = inject(injectKeyTemplate)
const lines = ref([] as Array < any > ) //线路
const Series = ref([] as Array < any > ) //系列
const ColorList = DominantColour()
const ColorList = ref([] as Array < any > ) //DominantColour()
const cursors = [] as Array<any>
......@@ -648,16 +656,40 @@
*/
const GetTemplateConfigDatas = async () => {
try {
let response = await LineService.GetTemplateConfigData()
let response = await ConfigService.GetTemplateQueryAsync()
if (response.data.resultCode == 1) {
dispositionObj.value = response.data.data;
getCountryId()
}
} catch (error) {
}
}
const getColor = async (type:Number) => {
if(type==1&&!queryColor.Code) {
queryObj.value.ColorName = ''
queryObj.value.ColorStr = ''
}
let response = await LineService.GetParentColor(queryColor.value)
if (response.data.resultCode == 1) {
if(type==0) ColorList.value = response.data.data
else datas.ColorList = response.data.data;
}
}
const GetTemplateColors = async () => {
let pageRes = await LineService.GetTemplateConfigDataList(queryColors.value);
let colorArr = pageRes.data.data
for(let i=0;i<colorArr.length;i++){
if(colorArr[i].Content==queryObj.value.ColorStr) {
queryColor.value.Code = Number(colorArr[i].Code)
getColor()
}
}
}
GetTemplateConfigDatas()
getLinesHandler()
getColor(0)
GetTemplateColors()
</script>
<style lang="scss" scoped>
......
src/views/Market/Index.vue
View file @ eca7030a
......@@ -47,7 +47,7 @@
</div>
<div class="row wrap q-pt-sm ">
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
<el-check-tag :checked="queryObj.CountryList.length==0" @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>
......@@ -61,7 +61,7 @@
<el-button color="#FFF" class="opacity0"><span></span></el-button>
</div>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
<el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
class="text-small">四季</el-check-tag>
<el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
......@@ -107,19 +107,19 @@
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<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>
'border-color':queryObj.ColorList.length==0?'black':'#eee'}"></span>
</div>
</el-tooltip>
<template v-for="(x,i) in colorArr" :key="i">
<template v-for="(x,i) in ColorList" :key="i">
<el-tooltip
class="box-item"
effect="dark"
:content="x.ColorName"
:content="x.Name"
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>
:style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
......@@ -291,20 +291,22 @@ const queryObj = reactive({
pageSize: 20,
LineId: 0, //线路Id
Title: '', //模板名称
CountryName: '', //国家名称
SeasonName: '', //季节名称
ColorName: '', //颜色名称
CountryNames: [], //国家名称
SeasonNames: [], //季节名称
ColorNames: [], //颜色名称
TagJsonStr: '',
CountryList: [], //国家名称
SeasonList: [], //季节名称
ColorList: [], //颜色名称
pageCount: 0, //总页数
TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0,
sort: 0,//排序方式
})
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const ColorList = DominantColour()
const ColorList = ref([]) //DominantColour()
// 版型 横版 竖版
const SwitchingVersion = (row: Object) =>{
......@@ -417,8 +419,7 @@ const onLineChangeHandler = (lineId: number) => {
//国家切换
const onCountryNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.CountryName = ''
queryObj.CountryNames = []
queryObj.CountryList = []
countriesOther.value.forEach(x=>{
x.checked = false
})
......@@ -426,17 +427,15 @@ const onCountryNameChangeHandler = (row: Object) => {
x.checked = false
})
}else{
queryObj.CountryName = row.CountryName;
if(!row.checked) {
row.checked = true
queryObj.CountryNames.push(row.CountryName)
queryObj.CountryList.push(row.CountryName)
}else{
row.checked = false
let list = queryObj.CountryNames.filter(x=>{
let list = queryObj.CountryList.filter(x=>{
if(x!=row.CountryName) return x
})
queryObj.CountryNames = list
if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
queryObj.CountryList = list
}
}
search()
......@@ -445,29 +444,20 @@ const onCountryNameChangeHandler = (row: Object) => {
//季节切换
const onSeasonNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.SeasonName = ''
queryObj.SeasonNames = []
queryObj.SeasonList = []
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
// })
// }
queryObj.SeasonList.push(row.SeasonName)
}else{
row.checked = false
let list = queryObj.SeasonNames.filter(x=>{
let list = queryObj.SeasonList.filter(x=>{
if(x!=row.SeasonName) return x
})
queryObj.SeasonNames = list
if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
queryObj.SeasonList = list
}
}
search()
......@@ -487,23 +477,20 @@ const onTypeChangeHandler = (Type: string,num: Number) => {
//颜色切换
const onColorNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.ColorName = ''
queryObj.ColorNames = []
queryObj.ColorList = []
colorArr.value.forEach(x=>{
x.checked = false
})
}else{
queryObj.ColorName = row.ColorName;
if(!row.checked) {
row.checked = true
queryObj.ColorNames.push(row.ColorName)
queryObj.ColorList.push(row.Name)
}else{
row.checked = false
let list = queryObj.ColorNames.filter(x=>{
if(x!=row.ColorName) return x
let list = queryObj.ColorList.filter(x=>{
if(x!=row.Name) return x
})
queryObj.ColorNames = list
if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
queryObj.ColorList = list
}
}
search()
......@@ -555,6 +542,7 @@ const getTemplateQuery = async () => {
ColorName: ColorList[i].ColorName,
ColorValue: ColorList[i].ColorValue,
checked: false,
ID: ColorList[i].Id
})
}
// arrList(tempData.ColorList)
......@@ -608,6 +596,14 @@ const scrollingHandler = () =>{
}
const getColor = async () => {
let response = await LineService.GetParentColor(queryColor.value)
if (response.data.resultCode == 1) {
ColorList.value = response.data.data
}
}
getColor()
getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();
......
src/views/TemplateCenter/Index.vue
View file @ eca7030a
......@@ -4,13 +4,13 @@
<div class="row wrap">
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">关键字:</span>
<el-input style="width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
<el-input style="max-width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
@keyup.enter="search"></el-input>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span>
<el-select v-model="queryObj.TemplateType"
class="ml-1 shrink"
class="ml-1 shrink TemSel"
placeholder="模版类型" clearable>
<el-option
v-for="item in typeArr"
......@@ -23,7 +23,7 @@
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;&nbsp;版型:</span>
<el-select v-model="queryObj.TempType"
class="ml-1 shrink"
class="ml-1 shrink TemSel"
placeholder="版型" clearable>
<el-option
v-for="item in layouts"
......@@ -33,17 +33,45 @@
/>
</el-select>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;国家:</span>
<el-select v-model="queryObj.CountryList" multiple
class="ml-1 shrink TemSel"
placeholder="国家" clearable>
<el-option key="" label="不限" value=""/>
<el-option
v-for="item in countries"
:key="item.CountryName"
:label="`${item.CountryName}`"
:value="item.CountryName"
/>
</el-select>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;季节:</span>
<el-select v-model="queryObj.SeasonList" multiple
class="ml-1 shrink TemSel"
placeholder="季节" clearable>
<el-option key="" label="四季" value=""/>
<el-option
v-for="item in seasonArr"
:key="item.SeasonName"
:label="`${item.SeasonName}`"
:value="item.SeasonName"
/>
</el-select>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;颜色:</span>
<el-select v-model="queryObj.ColorName"
class="ml-1 shrink"
<el-select v-model="queryObj.ColorList" multiple
class="ml-1 shrink TemSel"
placeholder="颜色" clearable>
<el-option key="" label="不限" value=""/>
<el-option
v-for="item in ColorList"
:key="item.ColorName"
:label="`${item.ColorName}`"
:value="item.ColorName"
:key="item.ID"
:label="`${item.Name}`"
:value="item.Name"
/>
</el-select>
</div>
......@@ -234,8 +262,12 @@ const queryObj = reactive({
type: 0,
sort: 0,//排序方式
})
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const setTemplateType = ref(1)
const ColorList = DominantColour()
const ColorList = ref([])//DominantColour()
const tableScrollHandler = ()=>{
if(queryObj.pageCount>queryObj.pageIndex){
......@@ -568,34 +600,17 @@ const getTemplateQuery = async () => {
}
//国家
if (tempData && tempData.CountryList) {
arrList(tempData.CountryList)
countriesOther.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1){ return index>=12 }
else return index>=13
})
countries.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1) {return index<12}
else return index<13
})
countries.value = tempData.CountryList
}
//颜色
if (tempData && tempData.ColorList) {
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
// for(let i=0;i<ColorList.length;i++){
// colorArr.value.push({
// ColorName: ColorList[i].ColorName,
// ColorValue: ColorList[i].ColorValue,
// checked: false,
// })
// }
}
//季节
if (tempData && tempData.SeasonList) {
......@@ -638,6 +653,14 @@ const scrollingHandler = () =>{
}
const getColor = async () => {
let response = await LineService.GetParentColor(queryColor.value)
if (response.data.resultCode == 1) {
ColorList.value = response.data.data
}
}
getColor()
getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();
......@@ -1104,4 +1127,7 @@ onMounted(()=>{
height: 42px;
line-height: 42px;
}
.TemSel{
width: 120px;
}
</style>
\ No newline at end of file
src/views/TemplateCenter/colour.vue
View file @ eca7030a
This diff is collapsed.
src/views/TemplateCenter/font.vue
View file @ eca7030a
<template>
<div class="row items-center flex-between q-mb-lg">
<div></div>
<el-input style="width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
<el-input style="max-width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
@keyup.enter="search">
<template #append>
<div class="Market-select-line absolute"></div>
......
src/views/TemplateCenter/nation.vue
View file @ eca7030a
<template>
<div class="row items-center flex-between q-mb-lg">
<div></div>
<el-input style="width:600px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
<el-input style="max-width:600px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
@keyup.enter="search">
<template #append>
<div class="Market-select-line absolute"></div>
......@@ -11,7 +11,7 @@
</div>
</template>
</el-input>
<el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
<el-button type="primary" size="default" style="color: #ffff;" @click="addNation">
新增国家
</el-button>
</div>
......@@ -121,7 +121,7 @@
type: 'warning',
})
datas.requestLoading = true
const result = await LineService.SetTemplateConfigData(datas.params)
const result = await ConfigService.SetTemplateConfigData(datas.params)
if(result){
datas.addEditVisible = false
datas.requestLoading = false
......@@ -134,7 +134,7 @@
datas.requestLoading = false
}
}
const addFont = () => {
const addNation = () => {
datas.addEditVisible = true
}
const editDelete = (item: Object,index: Number) => {
......
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