Skip to content

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

模版详情，新增模版 组件

parent eb6c7035
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 1318 deletions
src/components/home/temDesign.vue
View file @ ac948bd1
......@@ -6,7 +6,7 @@
<div class="text-title text-center fz16 PingFangSC">创建设计</div>
</template>
<div class="addTemplateBox fz14">
<div class="color0 q-mb-lg">推荐尺寸</div>
<div class="color0 q-mb-lg text-left">推荐尺寸</div>
<div class="q-mt-xs">
<div v-for="(item,index) in RecommendedSizes">
<div class="row addTemplateBoxRec rounded6 cursor-pointer"
......@@ -22,7 +22,7 @@
</div>
</div>
<div class="addTemplateBox fz14">
<div class="color0">自义定尺寸</div>
<div class="color0 text-left">自义定尺寸</div>
<div class="q-mt-xs q-mb-lg row">
<template v-for="(item,index) in typeArr">
<div class="MarketButton cursor-pointer"
......@@ -73,7 +73,7 @@ const {
userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const typeArr = ref([] as Array < any > ); //类型
const layouts = ref([
{Name: '不限',Id:0},
{Name: '横版',Id:1},
......@@ -157,7 +157,16 @@ const queryObj = reactive({
sort: 0,//排序方式
})
const setTemplateType = ref(1)
const ColorList = DominantColour()
//类型
for(let i=0;i<3;i++){
let text = '所有模版'
if(i==1) text = '行程'
if(i==2) text = '广告'
typeArr.value.push({
type:i,
typeName:text
})
}
const props = defineProps({
addTem:{
type: Boolean,
......@@ -227,7 +236,10 @@ const addTemplate = (type:number) =>{
path:`/create_template/${type}`
})
}
//类型切换
const onTypeChangeHandler = (Type: string) => {
setTemplateType.value = Type
}
</script>
......@@ -240,63 +252,6 @@ const addTemplate = (type:number) =>{
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%;
}
.MarketDetaSwR div{
background: url('../../assets//img/right.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwR{
right: -177px;
}
.MarketDetaSwL div:hover{
background: url('../../assets//img/leftActive.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwL div{
background: url('../../assets//img/left.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwL{
left: -177px;
}
.MarketDetaSw div{
width: 104px;
height: 104px;
}
.MarketDetaSw{
position: absolute;
top: 393px;
}
.Details-right{
width: 256px;
padding: 0 33px;
}
.Details-leftBox img{
width:100%;
height:auto;
margin-bottom: 30px;
}
.Details-leftBox{
width: 100%;
height: 806px;
}
.Details-left{
overflow: auto;
}
.Details-container{
height: 806px;
width: 1097px;
padding: 0 19px 0 19px;
position: relative;
}
.addTemplateInput {
::v-deep(.el-input__wrapper){
background-color: #EFEFEF;
......@@ -319,16 +274,6 @@ const addTemplate = (type:number) =>{
.addTemplateBox{
padding: 0 41px;
}
.el-button:not(.is-link),.el-menu-item,
.el-button:not(.is-link):hover,.el-menu-item:hover{
border: 0;
}
.MarketButton.active.active2{
margin-right: 0;
}
.MarketButton.active.active2::after{
background: none;
}
.MarketButton{
width: 90px;
height: 36px;
......
src/components/home/temDetails.vue
View file @ ac948bd1
<template>
<!-- 行程、广告图详情 -->
<el-dialog v-model="datas.DetailsVisible" :align-center="true" :show-close="true" :close-on-press-escape="false"
<el-dialog v-model="props.DetaTem" :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="CloseDetails">
<template #header>
......@@ -36,7 +36,7 @@
<div>尺寸</div>
<div class="q-pt-lg">
<div class="addTemplateBoxRec addTemplateBoxRecw136 rounded6 color0 text-center">
{{showCurrentTemplate.width?showCurrentTemplate.width:0}} * {{showCurrentTemplate.height?showCurrentTemplate.height:0}} px
{{showCurrentTemplate.Width?showCurrentTemplate.Width:0}} * {{showCurrentTemplate.Height?showCurrentTemplate.Height:0}} px
</div>
</div>
</div>
......@@ -54,55 +54,6 @@
</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>
<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">
<div class="color0">自义定尺寸</div>
<div class="q-mt-xs q-mb-lg row">
<template v-for="(item,index) in typeArr">
<div class="MarketButton cursor-pointer"
v-if="item.type>0"
:class="[setTemplateType == item.type?'active':'']" :key="index"
@click="onTypeChangeHandler(item.type,2)">
{{item.typeName}}
</div>
</template>
</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>
<script setup lang="ts">
......@@ -128,69 +79,21 @@ const {
userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const lines = ref([] as Array < any > ) //线路
const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const colorArrOther = ref([] as Array < any > ); //颜色
const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节
const typeArr = ref([] as Array < any > ); //类型
const sortArr = 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 RecommendedSizes = ref([
{Name: '手机海报',width:750,height:1334,Id:1,checked: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 scrollContainer = ref<any>()
const scrollToElement = ref<any>()
const loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { market, ConfigId} = storeToRefs(useScreenStore())
const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
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,// 推荐尺寸
DetailsVisible: false,
addVisible: false,
loading: false,
ColorValue: '',
scrollTop: 0,
moreList:[
{icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
{icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
{icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
{icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
],
CustomSize:{ // 自定义尺寸
width: null,
height: null,
},
SwitchingDiagram: [
require("@/assets/img/left.png"),
require("@/assets/img/leftActive.png"),
require("@/assets/img/right.png"),
require("@/assets/img/rightActive.png"),
],
currentImg: 0,// 当前查看img
})
let TemplateType = 0
......@@ -203,29 +106,25 @@ if(router.currentRoute.value.path.includes('create')) {
model.value=0
}
marketStore.setModel(model.value)
const queryObj = reactive({
pageIndex: 1,
pageSize: 20,
LineId: 0, //线路Id
Title: '', //模板名称
CountryName: '', //国家名称
SeasonName: '', //季节名称
ColorName: '', //颜色名称
CountryNames: [], //国家名称
SeasonNames: [], //季节名称
ColorNames: [], //颜色名称
pageCount: 0, //总页数
TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0,
sort: 0,//排序方式
const props = defineProps({
DetaTem:{
type: Boolean,
default: false,
},
Details:{
type: Object,
default: {},
}
})
const setTemplateType = ref(1)
const ColorList = DominantColour()
const emit = defineEmits<{
(event: 'close'): void,
}>()
// 删除监听滚动
const CloseDetails = () => {
document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
emit('close')
// document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
}
const ToggleImg = (text: String) => {
......@@ -243,119 +142,12 @@ const ToggleImg = (text: String) => {
}
}
// 版型 横版 竖版
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) =>{
// searchData.value.TemplateType = type
// marketStore.setMarket(!market)
// searchData.value.TempId = 0
router.push({
path:`/create_template/${type}`
})
}
const CloseTemplate = () => {
if(SalesBack.value==1){
marketStore.setMarket(false)
SalesEditorStore.setSalesEditor(SalesEditor.value)
}else SalesEditorStore.setSalesEditor(0)
}
// 删除模版
const deleteTemplate = (item:any) => {
ElMessageBox.confirm(
`此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
let queryMsg = {
TempId: item.TempId
}
deleteLoading.value = ElLoading.service({
lock:true,
text:'正在处理'
})
let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
if (dataRes.data.resultCode == 1) {
queryObj.pageIndex = 1
ElMessage({
showClose: true,
message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
type: 'success',
})
await queryTemplateBySearchHandler()
}else {
ElMessage({
showClose: true,
message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
type: 'warning',
})
}
deleteLoading.value.close()
deleteLoading.value = null
} catch (error) {}
}).catch(() => {})
}
// 图片滚动翻页
const handleScroll = (e) =>{
let temp = document.querySelector("#scrollId .Details-left").scrollTop;
......@@ -366,7 +158,7 @@ const handleScroll = (e) =>{
}
// 查看所有子模版
const getTemplate = async (item:any) => {
if(!item) return
if(item.PageImageList && item.PageImageList.length>0){
datas.currentImg = 0
datas.DetailsVisible = true
......@@ -412,244 +204,8 @@ const goToTemplate = (item: any) => {
}
}
const search = () => {
queryObj.pageIndex = 1
queryTemplateBySearchHandler()
}
/***
* 获取模板市场分页列表
*/
const queryTemplateBySearchHandler = async () => {
const parmas = router.currentRoute.value.params
if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
loading.value = true
try {
if(queryObj.pageIndex == 1) dataList.value =[]
let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
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);
queryObj.pageCount = pageRes.data.data.pageCount;
}
loading.value = false
} catch (error) {
loading.value = false
}
}
//线路切换
const onLineChangeHandler = (lineId: number) => {
queryObj.LineId = lineId;
search()
}
//国家切换
const onCountryNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.CountryName = ''
queryObj.CountryNames = []
countriesOther.value.forEach(x=>{
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 = (row: Object) => {
if(row=='') {
queryObj.SeasonName = ''
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()
}
//类型切换
const onTypeChangeHandler = (Type: string,num: Number) => {
if(num==1){
queryObj.sort = Type;
}else if(num==2){
setTemplateType.value = Type
} else{
searchData.value.MarketTemplateType = Type
queryObj.TemplateType = Type;
}
if(num!=2) search()
}
//颜色切换
const onColorNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.ColorName = ''
queryObj.ColorNames = []
colorArr.value.forEach(x=>{
x.checked = false
})
}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()
}
/**
* 获取线路列表
*/
const getLinesHandler = async () => {
try {
let response = await LineService.GetLineListAsync()
if (response.data.resultCode == 1) {
lines.value = response.data.data;
}
} catch (error) {
}
}
/**
* 获取模板市场查询条件
*/
const getTemplateQuery = async () => {
try {
let res = await ConfigService.GetTemplateQueryAsync();
if (res.data.resultCode == 1) {
var tempData = res.data.data;
let arrList = function(list) {
list.forEach(x => {
x.checked = false
});
}
//国家
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
})
}
//颜色
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
// })
}
//季节
if (tempData && tempData.SeasonList) {
arrList(tempData.SeasonList)
seasonArr.value = tempData.SeasonList;
}
//类型
for(let i=0;i<3;i++){
let text = '所有模版'
if(i==1) text = '行程'
if(i==2) text = '广告'
typeArr.value.push({
type:i,
typeName:text
})
}
for(let i=0;i<2;i++){
let text = '综合排序'
if(i==1) text = '最新模板'
sortArr.value.push({
type:i,
typeName:text
})
}
}
} catch (error) {
}
}
const scrollingHandler = () =>{
if(marketRef.value && !loading.value){
let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
let scrollTop = marketRef.value.scrollTop
if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
queryObj.pageIndex++
queryTemplateBySearchHandler()
}
datas.scrollTop = scrollTop
}
}
getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();
onMounted(()=>{
marketRef.value.addEventListener("scroll", scrollingHandler);
watch(()=>props.Details,()=>{
getTemplate(props.Details)
})
</script>
......@@ -718,16 +274,6 @@ onMounted(()=>{
padding: 0 19px 0 19px;
position: relative;
}
.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;
}
......@@ -737,13 +283,6 @@ onMounted(()=>{
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;
......@@ -755,118 +294,6 @@ onMounted(()=>{
.marketTagDown.marketTagDown{
width: 309px;
}
.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{
margin-bottom: 13px;
margin-left: 15px;
margin-right: 31px;
text-align: center;
}
.marketTagTitleBox{
padding-right: 30px;
}
.marketTag-Title span:first-child{
font-weight: bold;
color: #1C1C1C;
}
.marketTag-Title{
font-family: PingFang SC;
font-size: 14px;
}
.marketTag-from{
margin-top: 38px;
}
.MarketHeader>div{
padding: 10px 22px;
max-width:1440px;
margin:0 auto;
}
.MarketHeader{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 2;
background: #E3ECFF;
animation:myHeader 1s;
-webkit-animation:myHeader 1s;
}
@keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
@-webkit-keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
.Market-select-line{
width: 1px;
height: 14px;
background: #F4F4F4;
right: 61px;
}
.Market-select ::v-deep(.el-input__wrapper){
box-shadow: 0 0 0;
border-radius: 8px 0 0 8px;
padding: 1px 23px;
}
::v-deep(.el-input__wrapper):hover{
box-shadow: 0 0 0;
}
::v-deep(.el-input__wrapper.is-focus){
box-shadow: 0 0 0;
}
::v-deep(.el-input-group__append){
box-shadow: 0 0 0;
background: #fff;
}
.input-with-select{
height: 46px;
}
......@@ -882,67 +309,6 @@ onMounted(()=>{
line-height: 36px;
text-align: center;
}
.Market-fromBj{
height: 486px;
background: url('../../assets//img/homeBJ.png') no-repeat;
background-size: auto 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1;
}
.Market-from{
background: linear-gradient(0deg, #FFF, #E3ECFF);
height: 90vh;
overflow: auto;
}
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
padding: 0;
}
.marketTag{
padding: 20px 0px 0 30px;
width: 460px;
overflow: hidden;
/* height: 245px; */
}
.marketTag+.marketTag{
margin-left: 32px;
}
.colorMark:hover .ColorNameBox {
display: block;
}
.ColorNameBox{
width: 0;
display: none;
left: 0;
top: -30px;
}
.ColorName{
background: black;
color: #fff;
padding: 2px 10px;
border-radius: 3px;
margin-left: -10px;
}
.ColorNameBJ{
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: black;
display: block;
margin-left: 2px;
}
.colorMark{
width: 28px;
height: 28px;
position: relative;
display: inline-block;
border-radius: 50%;
margin: 4px;
background: #fff;
border: 4px solid #eee;
}
.aliMarketfont {
font-family: aliMarketfont;
}
......@@ -962,142 +328,6 @@ onMounted(()=>{
font-weight: 400 !important;
font-size: 14px !important;
}
.MarketIndexListBox{
/* width:calc(20% - 10px); */
/* margin: 10px 10px 0 0; */
/* padding:5px; */
position: relative;
overflow: hidden;
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{
width: 100%;
position: relative;
overflow: hidden;
}
.MarketIndexList-Hover{
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,0.5);
opacity: 0;
transition: opacity 0.5s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $themeHoverColor;
}
.MarketIndexListBox:hover .MarketIndexList-Hover{
opacity: 1;
}
.MarketIndexList-Hover div span{
/* display: inline-block; */
/* background: #fff; */
/* border-radius: 4px; */
/* padding: 0 10px 3px 10px; */
}
.MarketIndexListBox:hover{
top: -5px;
}
.MarketIndexList-img{
width: 100%;
/* height: 0;
position: relative;
padding-bottom: 56.25%;
overflow: hidden; */
border-radius: 6px;
}
.MarketIndexList-img img{
/* position: absolute;
top: 0;
left: 0;
height: 100%; */
width: 100%;
/* height: auto;
position: absolute; */
object-fit: cover;
}
.MarketIndexList-text{
font-size: 14px;
padding: 10px;
padding-bottom: 5px;
}
.MarketIndexList-text span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.MarketVerticalLine{
width: 1px;
height: 80%;
background: #dcdfe6;
margin-right: 30px;
margin-top: 5px;
}
.MarketIndexButtom{
color: #ffff;
width: 86px;
height: 36px;
letter-spacing: 1px;
font-size: 14px !important;
border-radius: 6px;
}
.MarketIconAbsolute{
width: 36px;
height: 36px;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
line-height: 36px;
color: #B9B9B9;
z-index: 2;
}
.MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
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{
width: 180px;
}
.el-check-tag.el-check-tagW76{
width: 76px;
margin-left: 0;
......
src/router/router.ts
View file @ ac948bd1
......@@ -213,28 +213,28 @@ const routes: RouteRecordRaw[] = [
path: '/m',
component: () => import('@/views/TemplateCenter/Index.vue'),
meta:{
title:'字体管理'
title:'字体'
}
},
{
path: '/m/nation',
component: () => import('@/views/TemplateCenter/nation.vue'),
meta:{
title:'国家管理'
title:'国家'
}
},
{
path: '/m/colour',
component: () => import('@/views/TemplateCenter/colour.vue'),
meta:{
title:'颜色管理'
title:'颜色'
}
},
{
path: '/m/TemplateManagement',
component: () => import('@/views/TemplateCenter/TemplateManagement.vue'),
meta:{
title:'颜色管理'
title:'模版管理'
}
},
]
......
src/store/menu.ts
View file @ ac948bd1
......@@ -21,9 +21,9 @@ const menus:{menu:Menu,owner:MenuOwner}[] = [
{menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'*'},
{menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'*'},
{menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'},
{menu:{name:'字体设置',icon:'IconAddText',url:'/m'},owner:'M'},
{menu:{name:'国家设置',icon:'IconWorld',url:'/m/nation'},owner:'M'},
{menu:{name:'颜色设置',icon:'IconPlatte',url:'/m/colour'},owner:'M'},
{menu:{name:'字体',icon:'IconAddText',url:'/m'},owner:'M'},
{menu:{name:'国家',icon:'IconWorld',url:'/m/nation'},owner:'M'},
{menu:{name:'颜色',icon:'IconPlatte',url:'/m/colour'},owner:'M'},
{menu:{name:'模版管理',icon:'IconPageTemplate',url:'/m/TemplateManagement'},owner:'M'},
]
......
src/views/Editor/EditorHeader/index.vue
View file @ ac948bd1
......@@ -241,15 +241,18 @@ const goBack = (type:any) =>{
setNewDatas(type,0)
let path ='/'
const t = useSlidesStore().viewportRatio<0?1:2
if(type!=0){
if(model.value==2) path = `/market/create/${searchData.value.TemplateType==1?'trip':'ad'}`
else if(model.value==0) path = `/market/op/${ConfigId.value}/${t}`
else if(model.value==1) path = `/market`
}
console.log(path)
router.push({path})
// if(type!=0){
// if(model.value==2) path = `/market/create/${searchData.value.TemplateType==1?'trip':'ad'}`
// else if(model.value==0) path = `/market/op/${ConfigId.value}/$-{t}`
// else if(model.value==1) path = `/market`
// }
// console.log(path)
// router.push({path})
if(model.value==0) path = `/market/op/${ConfigId.value}/$-{t}`
else window.history.back()
}).catch(() => {})
}
// 返回是否清空数据
const setNewDatas = (type,i) => {
......
src/views/Market/Index.vue
View file @ ac948bd1
......@@ -17,9 +17,9 @@
</el-input>
</div>
<div class="row items-center" style="text-align: right;">
<div v-if="model==1" >
<div class="MarketAdd pointer" @click="datas.addVisible=true">创建</div>
</div>
<!-- <div v-if="model==1" >
<div class="MarketAdd pointer">创建</div>
</div> -->
<UserCard></UserCard>
</div>
</div>
......@@ -215,109 +215,7 @@
</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="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" id="scrollId" v-if="showCurrentTemplate && showCurrentTemplate.PageImageList">
<div class="Details-left" ref="scrollContainer">
<div class="Details-leftBox row">
<div class="column" style="width: 770px;">
<img ref="scrollToElement" v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i"
class="rounded">
</div>
<div style="width: 20px;height: 100%;"></div>
</div>
</div>
<div class="Details-right column flex-between">
<div>
<div>类型</div>
<div class="q-pt-lg q-pb-lg marketTagDown">
<el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}</el-check-tag>
</div>
<div>目的地</div>
<div class="q-pt-lg q-pb-lg marketTagDown">
<el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.CountryName?showCurrentTemplate.CountryName:'-'}}</el-check-tag>
</div>
<div>季节</div>
<div class="q-pt-lg q-pb-lg marketTagDown">
<el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.SeasonName?showCurrentTemplate.SeasonName:'-'}}</el-check-tag>
</div>
<div>尺寸</div>
<div class="q-pt-lg">
<div class="addTemplateBoxRec addTemplateBoxRecw136 rounded6 color0 text-center">
{{showCurrentTemplate.width?showCurrentTemplate.width:0}} * {{showCurrentTemplate.height?showCurrentTemplate.height:0}} px
</div>
</div>
</div>
<div class="row flex-center">
<div class="MarketAdd MarketAddw140 pointer" @click="goToTemplate(showCurrentTemplate)">立即使用</div>
</div>
</div>
<template v-if="showCurrentTemplate.PageImageList.length>1">
<div class="MarketDetaSw MarketDetaSwL" v-if="datas.currentImg!=0">
<div class="cursor-pointer" @click="ToggleImg('left')"></div>
</div>
<div class="MarketDetaSw MarketDetaSwR" v-if="datas.currentImg<showCurrentTemplate.PageImageList.length-1">
<div class="cursor-pointer" @click="ToggleImg('right')"></div>
</div>
</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>
<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">
<div class="color0">自义定尺寸</div>
<div class="q-mt-xs q-mb-lg row">
<template v-for="(item,index) in typeArr">
<div class="MarketButton cursor-pointer"
v-if="item.type>0"
:class="[setTemplateType == item.type?'active':'']" :key="index"
@click="onTypeChangeHandler(item.type,2)">
{{item.typeName}}
</div>
</template>
</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>
<temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
</template>
<script setup lang="ts">
......@@ -336,6 +234,7 @@ 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';
import temDetails from "@/components/home/temDetails.vue";
import { noDataImg } from "@/utils/common";
......@@ -359,55 +258,24 @@ const layouts = ref([
{Name: '竖版',Id:2},
])
const marketRef = ref<any>()
const RecommendedSizes = ref([
{Name: '手机海报',width:750,height:1334,Id:1,checked: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 scrollContainer = ref<any>()
const scrollToElement = ref<any>()
const loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { market, ConfigId} = storeToRefs(useScreenStore())
const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
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,// 推荐尺寸
DetailsVisible: false,
addVisible: false,
loading: false,
ColorValue: '',
scrollTop: 0,
moreList:[
{icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
{icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
{icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
{icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
],
CustomSize:{ // 自定义尺寸
width: null,
height: null,
},
SwitchingDiagram: [
require("@/assets/img/left.png"),
require("@/assets/img/leftActive.png"),
require("@/assets/img/right.png"),
require("@/assets/img/rightActive.png"),
],
currentImg: 0,// 当前查看img
TemDetails: {}
})
const DetailsVisible = ref(false)
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
if(router.currentRoute.value.path.includes('create')) {
......@@ -435,101 +303,19 @@ const queryObj = reactive({
type: 0,
sort: 0,//排序方式
})
const setTemplateType = ref(1)
const ColorList = DominantColour()
// 删除监听滚动
const CloseDetails = () => {
document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
}
const ColorList = DominantColour()
const ToggleImg = (text: String) => {
if(text=='left'){
if(datas.currentImg>0) {
datas.currentImg--
scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
}
}
if(text=='right'){
if(datas.currentImg<imgList.value.length-1) {
datas.currentImg++
scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
}
}
}
// 版型 横版 竖版
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) =>{
// searchData.value.TemplateType = type
// marketStore.setMarket(!market)
// searchData.value.TempId = 0
router.push({
path:`/create_template/${type}`
})
}
const CloseTemplate = () => {
if(SalesBack.value==1){
marketStore.setMarket(false)
SalesEditorStore.setSalesEditor(SalesEditor.value)
}else SalesEditorStore.setSalesEditor(0)
}
// 删除模版
const deleteTemplate = (item:any) => {
ElMessageBox.confirm(
......@@ -571,45 +357,11 @@ 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?'广告':'行程'}没有预览信息，请选择其他操作`,
})
}
// 查看所有子模版
const getTemplate = (item:any) => {
DetailsVisible.value = true
datas.TemDetails = item
}
/**
......@@ -725,14 +477,11 @@ const onSeasonNameChangeHandler = (row: Object) => {
const onTypeChangeHandler = (Type: string,num: Number) => {
if(num==1){
queryObj.sort = Type;
}else if(num==2){
setTemplateType.value = Type
} else{
}else{
searchData.value.MarketTemplateType = Type
queryObj.TemplateType = Type;
}
if(num!=2) search()
search()
}
//颜色切换
......@@ -876,85 +625,6 @@ 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%;
}
.MarketDetaSwR div{
background: url('../../assets//img/right.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwR{
right: -177px;
}
.MarketDetaSwL div:hover{
background: url('../../assets//img/leftActive.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwL div{
background: url('../../assets//img/left.png') no-repeat;
background-size: 100% 100%;
}
.MarketDetaSwL{
left: -177px;
}
.MarketDetaSw div{
width: 104px;
height: 104px;
}
.MarketDetaSw{
position: absolute;
top: 393px;
}
.Details-right{
width: 256px;
padding: 0 33px;
}
.Details-leftBox img{
width:100%;
height:auto;
margin-bottom: 30px;
}
.Details-leftBox{
width: 100%;
height: 806px;
}
.Details-left{
overflow: auto;
}
.Details-container{
height: 806px;
width: 1097px;
padding: 0 19px 0 19px;
position: relative;
}
.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;
......@@ -1007,7 +677,6 @@ onMounted(()=>{
.MarketType{
margin-top: 29px;
margin-bottom: 33px;
/* background: #fff; */
}
.marketTag-color{
margin-bottom: 13px;
......@@ -1045,22 +714,17 @@ onMounted(()=>{
animation:myHeader 1s;
-webkit-animation:myHeader 1s;
}
@keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
@keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
@-webkit-keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
@-webkit-keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
.Market-select-line{
width: 1px;
height: 14px;
......@@ -1178,15 +842,11 @@ onMounted(()=>{
font-size: 14px !important;
}
.MarketIndexListBox{
/* width:calc(20% - 10px); */
/* margin: 10px 10px 0 0; */
/* padding:5px; */
position: relative;
overflow: hidden;
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{
width: 100%;
......@@ -1213,10 +873,7 @@ onMounted(()=>{
opacity: 1;
}
.MarketIndexList-Hover div span{
/* display: inline-block; */
/* background: #fff; */
/* border-radius: 4px; */
/* padding: 0 10px 3px 10px; */
}
.MarketIndexListBox:hover{
top: -5px;
......@@ -1225,20 +882,10 @@ onMounted(()=>{
.MarketIndexList-img{
width: 100%;
/* height: 0;
position: relative;
padding-bottom: 56.25%;
overflow: hidden; */
border-radius: 6px;
}
.MarketIndexList-img img{
/* position: absolute;
top: 0;
left: 0;
height: 100%; */
width: 100%;
/* height: auto;
position: absolute; */
object-fit: cover;
}
.MarketIndexList-text{
......@@ -1310,19 +957,4 @@ onMounted(()=>{
bottom: 15px;
text-align: center;
}
.layout-item{
width: 180px;
}
.el-check-tag.el-check-tagW76{
width: 76px;
margin-left: 0;
}
.addTemplateBoxRec.addTemplateBoxRecw136{
width: 136px;
}
.MarketAdd.MarketAddw140{
width: 140px;
height: 42px;
line-height: 42px;
}
</style>
\ No newline at end of file
src/views/TemplateCenter/Index.vue
View file @ ac948bd1
......@@ -70,20 +70,20 @@
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称：</span>
<el-input min="750" v-model="datas.params.label"
placeholder="请输入字体名称" class="input-with-select"></el-input>
placeholder="请输入字体名称" class=""></el-input>
<span class="q-px-md shrink">fontFamily：</span>
<el-input min="750" v-model="datas.params.fontFamily"
placeholder="请输入fontFamily" class="input-with-select"></el-input>
placeholder="请输入fontFamily" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.fontUrl"
placeholder="请输入URL" class="input-with-select"></el-input>
placeholder="请输入URL" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs row items-center">
<span class="q-pr-md shrink">裁剪URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
placeholder="请输入裁剪字体URL" class="input-with-select"></el-input>
placeholder="请输入裁剪字体URL" class=""></el-input>
</div>
</div>
<div class="text-center">
......
src/views/TemplateCenter/TemplateManagement.vue
View file @ ac948bd1
<template>
<div class="row items-center flex-between q-mb-lg">
<div style="width: 224px;"></div>
<el-input style="width:600px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33">
<div class="row items-center justify-content">
<div class="row wrap">
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm">关键字:</span>
<el-input style="width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable></el-input>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm">&nbsp;&nbsp;模版:</span>
<el-select v-model="queryObj.TempType"
class="ml-1"
placeholder="模版类型" clearable>
<el-option
v-for="item in typeArr"
:key="item.type"
:label="`${item.typeName}`"
:value="item.type"
/>
</el-select>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm">&nbsp;&nbsp;&nbsp;版型:</span>
<el-select v-model="queryObj.TemplateType"
class="ml-1"
placeholder="版型" clearable>
<el-option
v-for="item in layouts"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select>
</div>
<div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm">&nbsp;&nbsp;颜色:</span>
<el-select v-model="queryObj.ColorName"
class="ml-1"
placeholder="颜色" clearable>
<el-option key="" label="不限" value=""/>
<el-option
v-for="item in ColorList"
:key="item.ColorName"
:label="`${item.ColorName}`"
:value="item.ColorName"
/>
</el-select>
</div>
<el-button class="q-ml-lg q-mb-lg" type="primary" size="default" style="color: #ffff;" @click="search">
<el-icon size="18px">
<Search/>
</el-icon>
</el-button>
</div>
<!-- <el-input style="width:100px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33">
<template #append>
<div class="Market-select-line absolute"></div>
<div class="row items-center pointer">
......@@ -9,10 +59,8 @@
@click="search"/>
</div>
</template>
</el-input>
<el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
新增模版
</el-button>
</el-input> -->
</div>
<el-table v-loading="loading" ref="dataTableRef" highlight-current-row
v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
......@@ -54,15 +102,16 @@
<span class="text-info">{{scope.row.CreateTime}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<el-table-column label="操作" width="190">
<template #default="scope">
<el-button type="primary" :icon="Edit" size="small" @click="goToTemplate(scope.row)">编辑</el-button>
<el-button type="primary" :icon="Edit" size="small" @click="getTemplate(scope.row)">详情</el-button>
<el-button type="primary" :icon="Edit" size="small" @click="deleteTemplate(scope.row)">删除</el-button>
<br/>
<el-button class="q-mt-sm" type="primary" :icon="Edit" size="small" @click="getTemplate(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<!-- 行程、广告图详情 -->
<temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
</template>
<script setup lang="ts">
......@@ -78,7 +127,8 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink,DominantC
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import { Delete,View } from '@element-plus/icons-vue';
import temDetails from "@/components/home/temDetails.vue";
import { Delete,View,Search } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import { noDataImg } from "@/utils/common";
......@@ -128,6 +178,7 @@ const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const deleteLoading = ref<any>(null)
const datas = reactive({
TemDetails: {},
TemplateBoxRec: null,// 推荐尺寸
DetailsVisible: false,
addVisible: false,
......@@ -152,6 +203,7 @@ const datas = reactive({
],
currentImg: 0,// 当前查看img
})
const DetailsVisible = ref(false)
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
if(router.currentRoute.value.path.includes('create')) {
......@@ -332,35 +384,8 @@ const handleScroll = (e) =>{
}
// 查看所有子模版
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?'广告':'行程'}没有预览信息，请选择其他操作`,
})
}
DetailsVisible.value = true
datas.TemDetails = item
}
/**
......@@ -576,7 +601,7 @@ const getTemplateQuery = async () => {
}
//类型
for(let i=0;i<3;i++){
let text = '所有模版'
let text = '不限'
if(i==1) text = '行程'
if(i==2) text = '广告'
typeArr.value.push({
......
src/views/TemplateCenter/colour.vue
View file @ ac948bd1
......@@ -55,12 +55,12 @@
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称：</span>
<el-input min="750" v-model="datas.params.ColorName"
placeholder="请输入颜色名称" class="input-with-select"></el-input>
placeholder="请输入颜色名称" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">色值：</span>
<el-input min="750" v-model="datas.params.ColorValue"
placeholder="例子:#e5e3da" class="input-with-select"></el-input>
placeholder="例子:#e5e3da" class=""></el-input>
<div class="q-pl-sm">
<el-color-picker v-model="datas.params.ColorValue" />
<!-- <el-tag
......
src/views/TemplateCenter/nation.vue
View file @ ac948bd1
......@@ -40,7 +40,7 @@
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称：</span>
<el-input min="750" v-model="datas.params.Content"
placeholder="请输入国家名称" class="input-with-select"></el-input>
placeholder="请输入国家名称" class=""></el-input>
</div>
</div>
<div class="text-center">
......
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