优化楼层装修
paulGao
parent
0d09920314
commit
4156d51d78
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 271 B |
|
|
@ -1,16 +1,24 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
|
||||
<Tabs :value="wap[0].title" class="tabs">
|
||||
<TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
|
||||
<component ref="lili-component" :is="templateWay[item.name]" @selected="
|
||||
(val) => {
|
||||
changed = val;
|
||||
}
|
||||
" />
|
||||
<TabPane
|
||||
:label="item.title"
|
||||
:name="item.title"
|
||||
@click="clickTag(item, i)"
|
||||
v-for="(item, i) in wap"
|
||||
:key="i"
|
||||
>
|
||||
<component
|
||||
ref="lili-component"
|
||||
:is="templateWay[item.name]"
|
||||
@selected="
|
||||
(val) => {
|
||||
changed = val;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -27,7 +35,7 @@ export default {
|
|||
changed: "", // 变更模板
|
||||
selected: 0, // 已选数据
|
||||
selectedLink: "", //选中的链接
|
||||
wap // tab标签
|
||||
wap, // tab标签
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -44,7 +52,9 @@ export default {
|
|||
});
|
||||
|
||||
this.wap.forEach((item) => {
|
||||
item.selected = false;
|
||||
if (item) {
|
||||
item.selected = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="list">
|
||||
|
||||
<div class="list-item" @click="clickPromotion(item,index)" v-for="(item,index) in Object.keys(promotionList)" :key="index" :class="{active:selectedIndex == index}">
|
||||
{{ typeOption[item].title}}
|
||||
<div
|
||||
class="list-item"
|
||||
v-for="(item, index) in Object.keys(promotionList)"
|
||||
:key="index"
|
||||
@click="clickPromotion(item, index)"
|
||||
:class="{ active: selectedIndex == index }"
|
||||
>
|
||||
{{ typeOption(item).title }}
|
||||
</div>
|
||||
|
||||
<!-- <div class="list-item" >暂无活动</div> -->
|
||||
|
|
@ -19,15 +24,30 @@
|
|||
</div> -->
|
||||
|
||||
<div class="tables">
|
||||
<Table
|
||||
height="350"
|
||||
border
|
||||
tooltip
|
||||
:loading="loading"
|
||||
:columns="activeColumns"
|
||||
:data="showPromotionList"
|
||||
></Table>
|
||||
|
||||
<Table height="350" border tooltip :loading="loading" :columns="activeColumns" :data="showPromotionList"></Table>
|
||||
|
||||
<Page @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" class="mt_10" :total="Number(totals)" size="small" show-elevator />
|
||||
|
||||
<Page
|
||||
@on-change="
|
||||
(val) => {
|
||||
params.pageNumber = val;
|
||||
}
|
||||
"
|
||||
:current="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="Number(totals)"
|
||||
size="small"
|
||||
show-elevator
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,11 +67,13 @@ export default {
|
|||
selectedIndex: 0, //左侧菜单选择
|
||||
promotions: "", //选中的活动key
|
||||
index: 999, // 已选下标
|
||||
params: { // 请求参数
|
||||
params: {
|
||||
// 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
pintuanColumns: [ // 表头
|
||||
pintuanColumns: [
|
||||
// 表头
|
||||
{
|
||||
title: "活动标题",
|
||||
key: "title",
|
||||
|
|
@ -89,7 +111,7 @@ export default {
|
|||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: this.index == params.index ? "primary" : "",
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
|
|
@ -147,7 +169,7 @@ export default {
|
|||
{
|
||||
style: {},
|
||||
},
|
||||
this.$options.filters.unitPrice(params.row.price, '￥')
|
||||
this.$options.filters.unitPrice(params.row.price, "￥")
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -181,13 +203,12 @@ export default {
|
|||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: this.index == params.index ? "primary" : "",
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedPromotion(params);
|
||||
console.log(this.index)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -233,7 +254,7 @@ export default {
|
|||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: this.index == params.index ? "primary" : "",
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
|
|
@ -252,62 +273,6 @@ export default {
|
|||
promotionData: "", //商品集合
|
||||
|
||||
showPromotionList: [], //显示当前促销的商品
|
||||
typeOption: { // 活动选项
|
||||
FULL_DISCOUNT: {
|
||||
title: "满减",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.params.promotionType = "FULL_DISCOUNT";
|
||||
|
||||
this.sortGoods("FULL_DISCOUNT");
|
||||
},
|
||||
},
|
||||
PINTUAN: {
|
||||
title: "拼团",
|
||||
methodsed: (id) => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.params.promotionType = "PINTUAN";
|
||||
this.sortGoods("PINTUAN");
|
||||
},
|
||||
},
|
||||
SECKILL: {
|
||||
title: "秒杀",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.seckillColumns;
|
||||
this.params.seckillId = this.promotionList["SECKILL"].id;
|
||||
delete this.params.promotionType;
|
||||
|
||||
getPromotionSeckill(this.params).then((res) => {
|
||||
delete this.params.seckillId;
|
||||
this.showPromotionList = this.showPromotionList.concat(
|
||||
res.result.records
|
||||
);
|
||||
|
||||
this.totals = res.result.total;
|
||||
console.log(this.totals);
|
||||
});
|
||||
},
|
||||
},
|
||||
COUPON: {
|
||||
title: "优惠券",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.params.promotionType = "COUPON";
|
||||
this.sortGoods("COUPON");
|
||||
},
|
||||
},
|
||||
POINTS_GOODS: {
|
||||
title: "积分商品",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.params.promotionType = "POINTS_GOODS";
|
||||
this.sortGoods("POINTS_GOODS");
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -317,8 +282,8 @@ export default {
|
|||
params: {
|
||||
handler() {
|
||||
this.index = 999;
|
||||
this.typeOption[this.promotions] &&
|
||||
this.typeOption[this.promotions].methodsed();
|
||||
this.typeOption(this.promotions) &&
|
||||
this.typeOption(this.promotions).methodsed();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
|
|
@ -326,30 +291,76 @@ export default {
|
|||
|
||||
methods: {
|
||||
sortGoods(type) {
|
||||
this.loading = true;
|
||||
this.loading = false;
|
||||
this.params.pageNumber - 1;
|
||||
getPromotionGoods(this.promotionList[type].id, this.params).then(
|
||||
(res) => {
|
||||
this.loading = false;
|
||||
if (res.result) {
|
||||
this.$nextTick(() => {
|
||||
this.showPromotionList = this.showPromotionList.concat(
|
||||
res.result.records
|
||||
);
|
||||
console.log(this.totals);
|
||||
this.totals = res.result.total;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
this.showPromotionList = this.promotionList[type];
|
||||
},
|
||||
typeOption(type) {
|
||||
// 活动选项
|
||||
switch (type) {
|
||||
case "FULL_DISCOUNT":
|
||||
return {
|
||||
title: "满减",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
|
||||
this.sortGoods("FULL_DISCOUNT");
|
||||
},
|
||||
};
|
||||
case "PINTUAN":
|
||||
return {
|
||||
title: "拼团",
|
||||
methodsed: (id) => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("PINTUAN");
|
||||
},
|
||||
};
|
||||
|
||||
case "KANJIA":
|
||||
return {
|
||||
title: "砍价",
|
||||
methodsed: (id) => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("KANJIA");
|
||||
},
|
||||
};
|
||||
case "SECKILL":
|
||||
return {
|
||||
title: "秒杀",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.seckillColumns;
|
||||
this.sortGoods("SECKILL");
|
||||
},
|
||||
};
|
||||
case "COUPON":
|
||||
return {
|
||||
title: "优惠券",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.sortGoods("COUPON");
|
||||
},
|
||||
};
|
||||
case "POINTS_GOODS":
|
||||
return {
|
||||
title: "积分商品",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.sortGoods("POINTS_GOODS");
|
||||
},
|
||||
};
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 选择活动
|
||||
selectedPromotion(val) {
|
||||
console.log(val);
|
||||
val.row.___type = "marketing";
|
||||
val.row.___promotion = this.promotions;
|
||||
this.$emit("selected", [val.row]);
|
||||
console.log([val.row]);
|
||||
|
||||
this.index = val.index;
|
||||
},
|
||||
|
|
@ -359,19 +370,22 @@ export default {
|
|||
if (res.success) {
|
||||
this.loading = false;
|
||||
this.getPromotion(res);
|
||||
this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
|
||||
// this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
getPromotion(res) {
|
||||
this.promotionList = res.result;
|
||||
|
||||
if (Object.keys(res.result).length) {
|
||||
this.typeOption[Object.keys(res.result)[0]].methodsed(
|
||||
this.promotionList[Object.keys(res.result)[0]].id
|
||||
);
|
||||
if (res.result) {
|
||||
this.promotionList = res.result;
|
||||
this.typeOption(Object.keys(res.result)[0]).methodsed();
|
||||
}
|
||||
|
||||
// if (Object.keys(res.result).length) {
|
||||
// this.typeOption[Object.keys(res.result)[0]].methodsed(
|
||||
// this.promotionList[Object.keys(res.result)[0]].id
|
||||
// );
|
||||
// }
|
||||
},
|
||||
|
||||
// 点击某个活动查询活动列表
|
||||
|
|
@ -379,8 +393,8 @@ export default {
|
|||
this.promotions = val;
|
||||
this.selectedIndex = i;
|
||||
this.params.pageNumber = 1;
|
||||
this.typeOption[val] &&
|
||||
this.typeOption[val].methodsed(this.promotionList[val].id);
|
||||
this.typeOption(val) &&
|
||||
this.typeOption(val).methodsed(this.promotionList[val].id);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,24 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<Row :gutter="30">
|
||||
<Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
|
||||
<div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
|
||||
<Col
|
||||
span="4"
|
||||
v-for="(item, index) in linkList"
|
||||
:key="index"
|
||||
v-if="
|
||||
(item.title !== '拼团频道' && item.title !== '签到') ||
|
||||
$route.name !== 'renovation'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: selectedIndex == index }"
|
||||
@click="handleLink(item, index)"
|
||||
>
|
||||
<Icon size="24" :type="item.icon" />
|
||||
<p>{{item.title}}</p>
|
||||
<p>{{ item.title }}</p>
|
||||
</div>
|
||||
</Col>
|
||||
<!-- 外部链接，只有pc端跳转 -->
|
||||
<Col span="6" v-if="$route.name === 'renovation'">
|
||||
<div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
|
||||
<Poptip v-model="linkVisible">
|
||||
<Icon size="24" :type="linkItem.icon" />
|
||||
<p>{{linkItem.title}}</p>
|
||||
<div slot="title">链接地址</div>
|
||||
<div slot="content">
|
||||
<Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
|
||||
</div>
|
||||
</Poptip>
|
||||
|
||||
<Col span="4">
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: selectedIndex == linkList.length }"
|
||||
@click="handleLink(linkItem, linkList.length)"
|
||||
>
|
||||
<Icon size="24" :type="linkItem.icon" />
|
||||
<p>{{ linkItem.title }}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -28,7 +37,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
linkList: [ // 链接列表
|
||||
linkList: [
|
||||
// 链接列表
|
||||
{
|
||||
title: "首页",
|
||||
icon: "md-home",
|
||||
|
|
@ -89,13 +99,12 @@ export default {
|
|||
icon: "ios-basket",
|
||||
___type: "point",
|
||||
},
|
||||
|
||||
],
|
||||
linkItem: {
|
||||
title: "外部链接",
|
||||
icon: "ios-link",
|
||||
___type: "link",
|
||||
url: ''
|
||||
url: "",
|
||||
},
|
||||
linkVisible: false, // 是否显示外部链接
|
||||
selectedIndex: 9999999, // 已选index
|
||||
|
|
@ -103,14 +112,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleLink(val, index) {
|
||||
val = {...val,___type:'other'}
|
||||
val = { ...val, ___type: "other" };
|
||||
this.selectedIndex = index;
|
||||
if (index === this.linkList.length) {
|
||||
this.linkVisible = true
|
||||
} else {
|
||||
this.linkVisible = false
|
||||
}
|
||||
this.$emit("selected",[val])
|
||||
this.$emit("selected", [val]);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -132,8 +136,8 @@ export default {
|
|||
}
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.card:hover{
|
||||
background: #ededed;
|
||||
.card:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ import * as API_Other from "@/api/other";
|
|||
// 获取楼层装修信息
|
||||
export function initData(id) {
|
||||
API_Other.getHomeData(id).then(res => {
|
||||
debugger
|
||||
homeData = res;
|
||||
console.log(res)
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -11,9 +13,10 @@ export let homeData = {};
|
|||
|
||||
/**
|
||||
* drawer:true 广告右侧打开抽屉中显示
|
||||
* drawerPromotions:true 广告右侧打开抽屉中显示
|
||||
* ad_drawer:true 活动魔方右侧显示
|
||||
* notAdd: true 没有添加按钮
|
||||
* notLink: true 没有连接功能
|
||||
* notLink: true 没有链接功能
|
||||
* notImg: true 没有选择图片功能
|
||||
* close:true 右侧关闭按钮
|
||||
*/
|
||||
|
|
@ -81,14 +84,20 @@ export const modelData = [
|
|||
type: "title",
|
||||
name: "标题栏",
|
||||
img: "md-image",
|
||||
// notTitle:true,
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "标题",
|
||||
color: "#000000"
|
||||
color: "#fff",
|
||||
title1: '领取',
|
||||
color1: "#fff",
|
||||
bk_color: "#FF0000",
|
||||
textAlign: "center",
|
||||
link: "",
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -469,22 +478,22 @@ export const modelData = [
|
|||
{
|
||||
title: "精选",
|
||||
desc: "电子推荐",
|
||||
___index:0,
|
||||
___index: 0,
|
||||
},
|
||||
{
|
||||
title: "实惠",
|
||||
desc: "便宜好货",
|
||||
___index:1,
|
||||
___index: 1,
|
||||
},
|
||||
{
|
||||
title: "进口",
|
||||
desc: "国际自营",
|
||||
___index:2,
|
||||
___index: 2,
|
||||
},
|
||||
{
|
||||
title: "推荐",
|
||||
desc: "喂奶推荐",
|
||||
___index:3,
|
||||
___index: 3,
|
||||
}
|
||||
],
|
||||
listWay: [
|
||||
|
|
@ -494,7 +503,7 @@ export const modelData = [
|
|||
title:
|
||||
" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
type: "精选",
|
||||
___index:0
|
||||
___index: 0
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
|
||||
|
|
@ -502,69 +511,88 @@ export const modelData = [
|
|||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "190",
|
||||
type: "精选",
|
||||
___index:0
|
||||
___index: 0
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "promotions",
|
||||
name: "促销活动",
|
||||
img: "md-image",
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
close: true,
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "PINTUAN",
|
||||
name: "拼团活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "惊喜折扣",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "LIVE",
|
||||
name: "直播活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "优惠好价",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "SECKILL",
|
||||
name: "秒杀活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "x点场",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "KANJIA",
|
||||
name: "砍价活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "超值好物",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
}
|
||||
// TODO 第一版本隐藏暂无此功能
|
||||
// {
|
||||
// notAdd: true,
|
||||
// notImg: true,
|
||||
// type: "joinGroup",
|
||||
// name: "拼团活动",
|
||||
// img: "md-image",
|
||||
// options: {
|
||||
// list: [
|
||||
// {
|
||||
// title: "测试拼团"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// notAdd: true,
|
||||
// notImg: true,
|
||||
// type: "integral",
|
||||
// name: "积分活动",
|
||||
// img: "md-image",
|
||||
// options: {
|
||||
// list: [
|
||||
// {
|
||||
// title: "测试积分"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// notAdd: true,
|
||||
// notImg: true,
|
||||
// type: "spike",
|
||||
// name: "秒杀活动",
|
||||
// img: "md-image",
|
||||
// options: {
|
||||
// list: [
|
||||
// {
|
||||
// title: "测试秒杀"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// notAdd: true,
|
||||
// notImg: true,
|
||||
// type: "group",
|
||||
// name: "团购活动",
|
||||
// img: "md-image",
|
||||
// options: {
|
||||
// list: [
|
||||
// {
|
||||
// title: "测试团购"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,117 +1,161 @@
|
|||
|
||||
/deep/ .ivu-modal-mask,.ivu-modal-wrap{
|
||||
/deep/ .ivu-modal-mask,
|
||||
.ivu-modal-wrap {
|
||||
z-index: 800;
|
||||
}
|
||||
.decorate-view-link{
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
|
||||
.decorate-view-link {
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.decorate-view-style {
|
||||
border: 1px solid #ededed;
|
||||
background: #f7f7fa;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 30px 0 0 0;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
> .select-style {
|
||||
background: #ededed;
|
||||
padding: 15px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.decorate-border {
|
||||
border: 1px solid #ededed;
|
||||
margin: 10px 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.drawer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> .drawer-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid #ededed;
|
||||
background: #f9f0ff;
|
||||
width: 170px;
|
||||
margin-right: 14px;
|
||||
color: #9254de;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 0.8em;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
.decorate {
|
||||
padding: 0 20px;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.decorate-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.decorate-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
.decorate-view {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
align-items: center;
|
||||
}
|
||||
.decorate-item-box {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.decorate-item-title {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.decorate-view-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.decorate-item {
|
||||
border: 1px solid #ededed;
|
||||
background: #f7f7fa;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 30px 0 0 0;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
>.select-style {
|
||||
background: #ededed;
|
||||
border-top-left-radius: 0.4em;
|
||||
margin-bottom: 20px;
|
||||
border-top-right-radius: 0.4em;
|
||||
padding: 15px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
.show-image {
|
||||
max-width: 50px;
|
||||
}
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
> span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
.selectBtn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.bing-goods-list {
|
||||
}
|
||||
|
||||
.decorate-border {
|
||||
border: 1px solid #ededed;
|
||||
margin: 10px 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>.drawer-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid #ededed;
|
||||
background: #f9f0ff;
|
||||
width: 170px;
|
||||
margin-right: 14px;
|
||||
color: #9254de;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 0.8em;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
> .bing-goods-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.decorate {
|
||||
padding: 0 20px;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.decorate-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.decorate-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decorate-view {
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.decorate-item-box {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.decorate-item-title {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.decorate-view-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.decorate-item {
|
||||
background: #ededed;
|
||||
border-top-left-radius: 0.4em;
|
||||
margin-bottom: 20px;
|
||||
border-top-right-radius: 0.4em;
|
||||
}
|
||||
|
||||
.show-image {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
>span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
.selectBtn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bing-goods-list {
|
||||
display: flex;
|
||||
|
||||
>.bing-goods-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-text {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.decorate-notice {}
|
||||
|
||||
.card {}
|
||||
|
||||
.card:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
|
|
@ -6,11 +6,24 @@
|
|||
style="margin-left: 20px"
|
||||
size="small"
|
||||
ghost
|
||||
v-if="res.type == 'tpl_ad_list' || res.type == 'tpl_activity_list' || res.drawer"
|
||||
v-if="
|
||||
res.type == 'tpl_ad_list' ||
|
||||
res.type == 'tpl_activity_list' ||
|
||||
res.drawer
|
||||
"
|
||||
type="primary"
|
||||
@click="selectStyle()"
|
||||
>选择风格</Button
|
||||
>
|
||||
<Button
|
||||
style="margin-left: 20px"
|
||||
size="small"
|
||||
ghost
|
||||
v-if="res.type == 'promotions' || res.drawerPromotions"
|
||||
type="primary"
|
||||
@click="selectPromotions()"
|
||||
>选择促销活动</Button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 右侧显示抽屉 -->
|
||||
|
|
@ -29,17 +42,48 @@
|
|||
</div>
|
||||
</Drawer>
|
||||
|
||||
<!-- 右侧显示抽屉 -->
|
||||
<Drawer
|
||||
title="选择促销活动(最多只能展示两个活动)"
|
||||
:closable="false"
|
||||
width="400"
|
||||
v-model="promotionsFlag"
|
||||
>
|
||||
<div class="drawer">
|
||||
<div
|
||||
class="drawer-item"
|
||||
@click="clickDrawer(item, index)"
|
||||
v-for="(item, index) in modelData"
|
||||
:key="index"
|
||||
v-if="item.drawerPromotions"
|
||||
>
|
||||
<img src alt />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
<!-- 卡片集合 -->
|
||||
<div
|
||||
class="decorate-list"
|
||||
v-if="(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') || res.drawer"
|
||||
v-if="
|
||||
(res.type != 'tpl_ad_list' &&
|
||||
res.type != 'tpl_activity_list' &&
|
||||
res.type != 'promotions') ||
|
||||
res.drawer ||
|
||||
res.drawerPromotions
|
||||
"
|
||||
>
|
||||
<div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
|
||||
<div
|
||||
class="decorate-item"
|
||||
v-for="(item, index) in res.options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div class="decorate-item-title">
|
||||
<div>卡片</div>
|
||||
<Icon
|
||||
@click="closeDecorate(index)"
|
||||
v-if="res.close"
|
||||
v-if="res.close || res.type == 'promotionDetail'"
|
||||
size="20"
|
||||
color="#e1251b"
|
||||
type="md-close-circle"
|
||||
|
|
@ -77,14 +121,19 @@
|
|||
title_item.___index == bindGoods.___index ||
|
||||
title_item.title == bindGoods.type
|
||||
"
|
||||
v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
|
||||
v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
|
||||
.listWay"
|
||||
:key="bindGoodsIndex"
|
||||
>
|
||||
{{ bindGoods.title }},
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="bindGoodsId(title_item)" size="small" ghost type="primary"
|
||||
<Button
|
||||
@click="bindGoodsId(title_item)"
|
||||
size="small"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择商品</Button
|
||||
>
|
||||
</div>
|
||||
|
|
@ -111,18 +160,132 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title != void 0 && !res.notTitle && res.type == 'title'"
|
||||
>
|
||||
<div class="decorate-view-title">文字对齐方式</div>
|
||||
<div class="card-box">
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'left' }"
|
||||
@click="changeTextAlign('left')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-left.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'center' }"
|
||||
@click="changeTextAlign('center')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-center.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'right' }"
|
||||
@click="changeTextAlign('right')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-right.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="
|
||||
item.title != void 0 &&
|
||||
!res.notTitle &&
|
||||
(res.type == 'title' ||
|
||||
res.type == 'notice' ||
|
||||
res.type == 'promotionDetail')
|
||||
"
|
||||
>
|
||||
<div class="decorate-view-title">背景颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.bk_color" />
|
||||
<Input v-model="item.bk_color" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填写标题 -->
|
||||
<div class="decorate-view" v-if="item.title != void 0 && !res.notTitle">
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title != void 0 && !res.notTitle && res.type != 'notice'"
|
||||
>
|
||||
<div class="decorate-view-title">菜单标题</div>
|
||||
<div>
|
||||
<Input v-model="item.title" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="
|
||||
item.title != void 0 &&
|
||||
!res.notTitle &&
|
||||
(res.type == 'title' || res.type == 'notice')
|
||||
"
|
||||
>
|
||||
<div class="decorate-view-title">标题颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.color" />
|
||||
<Input v-model="item.color" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 填写小标题 -->
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title1 != void 0 && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">小标题</div>
|
||||
<div>
|
||||
<Input v-model="item.title1" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title1 != void 0 && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">小标题颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.color1" />
|
||||
<Input v-model="item.color1" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="res.type === 'notice' && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">公告内容</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="(t, tindex) in item.title"
|
||||
:key="tindex"
|
||||
class="decorate-notice"
|
||||
>
|
||||
<Input v-model="t.context" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填写链接 -->
|
||||
|
||||
<div class="decorate-view" v-if="!res.notLink">
|
||||
<div class="decorate-view-title">选择链接</div>
|
||||
<div v-if="item.url.length != 0" class="decorate-view-link">
|
||||
<div
|
||||
v-if="item.url && item.url.length != 0"
|
||||
class="decorate-view-link"
|
||||
>
|
||||
已选链接：
|
||||
|
||||
<span>
|
||||
|
|
@ -133,38 +296,73 @@
|
|||
}}
|
||||
-
|
||||
<!-- 当选择完链接之后的商品名称 -->
|
||||
<span v-if="item.url.___type == 'goods'"> {{ item.url.goodsName }}</span>
|
||||
<span v-if="item.url.___type == 'goods'">
|
||||
{{ item.url.goodsName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的分类回调 -->
|
||||
<span v-if="item.url.___type == 'category'"> {{ item.url.name }}</span>
|
||||
<span v-if="item.url.___type == 'category'">
|
||||
{{ item.url.name }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的店铺回调 -->
|
||||
<span v-if="item.url.___type == 'shops'"> {{ item.url.memberName }}</span>
|
||||
<span v-if="item.url.___type == 'shops'">
|
||||
{{ item.url.memberName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'other'"> {{ item.url.title }}</span>
|
||||
<span v-if="item.url.___type == 'other'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'marketing'">
|
||||
<span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span>
|
||||
<span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> 满减 </span>
|
||||
<span v-if="item.url.___promotion == 'FULL_DISCOUNT'">
|
||||
满减
|
||||
</span>
|
||||
<span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
|
||||
{{ item.url.title || item.url.goodsName }}
|
||||
</span>
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span>
|
||||
<span v-if="item.url.___type == 'pages'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button ghost size="small" type="primary" @click="clickLink(item, index)"
|
||||
<Button
|
||||
ghost
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="clickLink(item, index)"
|
||||
>选择链接</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 链接地址-->
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.url && item.url.___type == 'other'"
|
||||
>
|
||||
<div class="decorate-view-title">外部链接</div>
|
||||
<div>
|
||||
<Input v-model="item.url.url" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="item.url && item.url.___type == 'other'">
|
||||
(如非同域名下，则在小程序与公众号中无效)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list' && !res.notAdd"
|
||||
v-if="
|
||||
res.type != 'tpl_ad_list' &&
|
||||
res.type != 'tpl_activity_list' &&
|
||||
!res.notAdd
|
||||
"
|
||||
type="primary"
|
||||
@click="addDecorate()"
|
||||
@click="addDecorate(res.type)"
|
||||
ghost
|
||||
>添加</Button
|
||||
>
|
||||
|
|
@ -194,6 +392,8 @@ export default {
|
|||
picModelFlag: false, //图片选择器
|
||||
linkType: "goods", // dialog弹窗口类型
|
||||
styleFlag: false, //广告魔方开关
|
||||
textAlign: this.res.options.list[0].textAlign || "center", //文字对齐方式
|
||||
promotionsFlag: false, //广告魔方开关
|
||||
selectedLinkIndex: "", //选择链接的索引
|
||||
modelData, // 装修数据
|
||||
selectedGoods: "", // 已选商品
|
||||
|
|
@ -213,15 +413,12 @@ export default {
|
|||
selectStyle() {
|
||||
this.styleFlag = !this.styleFlag;
|
||||
},
|
||||
selectPromotions() {
|
||||
this.promotionsFlag = !this.promotionsFlag;
|
||||
},
|
||||
// 回调选择的链接
|
||||
selectedLink(val) {
|
||||
// 防止楼层添加的时候商品详情添加转义符号导致添加不成功问题
|
||||
if (val) {
|
||||
delete val.intro;
|
||||
delete val.mobileIntro;
|
||||
}
|
||||
this.selectedLinks.url = val;
|
||||
|
||||
},
|
||||
// 回调的商品信息
|
||||
selectedGoodsData(val) {
|
||||
|
|
@ -257,6 +454,10 @@ export default {
|
|||
this.$refs.liliDialog.flag = true;
|
||||
},
|
||||
|
||||
changeTextAlign(val) {
|
||||
this.res.options.list[0].textAlign = val;
|
||||
this.textAlign = val;
|
||||
},
|
||||
// 点击链接赋值一个唯一值，并将当前选择的模块赋值
|
||||
clickLink(val, index) {
|
||||
this.selectedLinks = val;
|
||||
|
|
@ -275,15 +476,21 @@ export default {
|
|||
});
|
||||
},
|
||||
//添加设置
|
||||
addDecorate() {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
title: "标题",
|
||||
link: "",
|
||||
url: "",
|
||||
size: this.res.options.list[0]?.size,
|
||||
};
|
||||
this.res.options.list.push(way);
|
||||
addDecorate(type) {
|
||||
if (type === "notice") {
|
||||
this.res.options.list[0].title.push({
|
||||
content: "",
|
||||
});
|
||||
} else {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
title: "标题",
|
||||
link: "",
|
||||
url: "",
|
||||
size: this.res.options.list[0]?.size,
|
||||
};
|
||||
this.res.options.list.push(way);
|
||||
}
|
||||
},
|
||||
// 图片选择器回显
|
||||
callbackSelected(val) {
|
||||
|
|
|
|||
|
|
@ -12,20 +12,24 @@ import tpl_flex_four from "./tpl_flex_four";
|
|||
import tpl_text_picture from "./tpl_text_picture";
|
||||
import tpl_menu from "./tpl_menu";
|
||||
import tpl_search from "./tpl_search";
|
||||
import tpl_join_group from "./tpl_join_group";
|
||||
import tpl_promotion_detail from "./tpl_promotion_detail";
|
||||
import tpl_integral from "./tpl_integral";
|
||||
import tpl_spike from "./tpl_spike";
|
||||
import tpl_group from "./tpl_group";
|
||||
import tpl_ad_list from "./tpl_view_list";
|
||||
import tpl_activity_list from './tpl_view_list'
|
||||
import tpl_goods from "./tpl_goods";
|
||||
import tpl_notice from "./tpl_notice";
|
||||
import tpl_promotions from "./tpl_promotions";
|
||||
|
||||
export default {
|
||||
notice: tpl_notice,
|
||||
carousel: tpl_banner,
|
||||
title: tpl_title,
|
||||
leftOneRightTwo: tpl_left_one_right_two,
|
||||
leftTwoRightOne: tpl_left_two_right_one,
|
||||
topOneBottomTwo:tpl_top_one_bottom_two,
|
||||
topTwoBottomOne:tpl_top_two_bottom_one,
|
||||
topOneBottomTwo: tpl_top_one_bottom_two,
|
||||
topTwoBottomOne: tpl_top_two_bottom_one,
|
||||
flexThree: tpl_flex_three,
|
||||
flexFive: tpl_flex_five,
|
||||
flexFour: tpl_flex_four,
|
||||
|
|
@ -33,12 +37,14 @@ export default {
|
|||
textPicture: tpl_text_picture,
|
||||
menu: tpl_menu,
|
||||
search: tpl_search,
|
||||
joinGroup: tpl_join_group,
|
||||
promotionDetail: tpl_promotion_detail,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
integral:tpl_integral,
|
||||
spike:tpl_spike,
|
||||
group:tpl_group,
|
||||
integral: tpl_integral,
|
||||
spike: tpl_spike,
|
||||
group: tpl_group,
|
||||
tpl_ad_list,
|
||||
tpl_activity_list
|
||||
promotions: tpl_promotions,
|
||||
tpl_activity_list,
|
||||
tpl_adv
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
|
||||
<img :src="res.list[0].img" alt="" style="float:left;width: 20px;height: 20px;margin-top: 10px;margin-left: 10px;margin-right: 10px">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ context }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "公告",
|
||||
props: ["res"],
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
context: "",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.context = this.res.list[0].title[this.index].context;
|
||||
setInterval(() => {
|
||||
this.context = this.res.list[0].title[this.index].context;
|
||||
if (this.index < this.res.list[0].title.length - 1) {
|
||||
this.index++;
|
||||
} else {
|
||||
this.index = 0;
|
||||
}
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
text-align: left;
|
||||
font-size: 10px;
|
||||
background-size: cover;
|
||||
}
|
||||
.layout {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #ffffff;
|
||||
}
|
||||
.title {
|
||||
line-height: 42px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div
|
||||
v-for="(item, index) in res.list"
|
||||
:key="index"
|
||||
class="join-list-item"
|
||||
>
|
||||
<div>
|
||||
<div class="join-title">
|
||||
<div>{{ item.title }}</div>
|
||||
<div
|
||||
class="sub"
|
||||
:style="{
|
||||
backgroundColor: item.bk_color,
|
||||
color: item.color1,
|
||||
borderColor: item.bk_color,
|
||||
}"
|
||||
>
|
||||
{{ item.title1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div
|
||||
class="join-item"
|
||||
v-for="(i, _index) in item.data"
|
||||
:key="_index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
:src="i.thumbnail ? i.thumbnail : i.goodsImage"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ellipsis"
|
||||
:class="{ 'max-width': res.list.length <= 1 }"
|
||||
>
|
||||
{{ i.goodsName ? i.goodsName : i.name }}
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥{{ i.price ? i.price : i.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.join-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.join-list-item {
|
||||
flex: 1;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 54px; // 大于1个活动
|
||||
font-size: 11px;
|
||||
}
|
||||
.max-width {
|
||||
width: 158px !important;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
}
|
||||
.sub {
|
||||
background-color: #e1212b;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<div class="flex-two">
|
||||
请选择促销活动(最多只能展示两个活动)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
title: "两张横图",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.flex-two {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-item {
|
||||
width: 50%;
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,26 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<div class="background">
|
||||
<div class="layout" :style="{ textAlign: res.list[0].textAlign }">
|
||||
<div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ res.list[0].title }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 2px;
|
||||
color: #fff;
|
||||
line-height: 42px;
|
||||
font-size: 10px;
|
||||
"
|
||||
>
|
||||
<a
|
||||
:href="res.list[0].url"
|
||||
:style="{ color: res.list[0].color1 }"
|
||||
style="text-decoration: none"
|
||||
>{{ res.list[0].title1 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,13 +28,14 @@
|
|||
<script>
|
||||
export default {
|
||||
title: "标题栏",
|
||||
props: ["res"]
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
background: url("../../../../assets/title.png") no-repeat;
|
||||
background-color: rgb(255, 87, 62);
|
||||
/*background: url("../../../../assets/title.png") no-repeat;*/
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
|
|
@ -37,7 +55,8 @@ export default {
|
|||
}
|
||||
.title {
|
||||
line-height: 42px;
|
||||
font-size: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue