mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 18:35:53 +08:00
优化楼层装修
This commit is contained in:
paulGao
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user