新增部分楼层
lemon橪
parent
6b3892e17d
commit
f37f633f51
|
|
@ -86,6 +86,14 @@
|
|||
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||
</template>
|
||||
<!-- 商品模块 -->
|
||||
<template v-if="element.type == 'goodsType'">
|
||||
<goodsAndType :paramData="element" class="mb_20 width_1200_auto"></goodsAndType>
|
||||
</template>
|
||||
<!-- 商品模块 -->
|
||||
<template v-if="element.type == 'onlyGoodsModel'">
|
||||
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||
</template>
|
||||
<!-- 新品排行 -->
|
||||
<template v-if="element.type == 'newGoodsSort'">
|
||||
<new-goods-sort
|
||||
|
|
@ -132,6 +140,9 @@ import Recommend from "./modelList/Recommend.vue";
|
|||
import NotEnough from "./modelList/NotEnough.vue";
|
||||
import Seckill from "./modelList/Seckill.vue";
|
||||
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||
import goodsAndType from "./modelList/goodsAndType.vue";
|
||||
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "modelFormItem",
|
||||
|
|
@ -145,7 +156,9 @@ export default {
|
|||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill,
|
||||
oneRowThreeColumns
|
||||
oneRowThreeColumns,
|
||||
goodsAndType,
|
||||
onlyGoodsModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,46 @@
|
|||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<div class="flex goods-type-line">
|
||||
<div class="goods-type-title">{{data.options.title}}</div>
|
||||
<div class="goods-type-title">{{ paramData.options.title }}</div>
|
||||
<div class="flex goods-type-labels">
|
||||
<div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
|
||||
{{item.label}}
|
||||
<div
|
||||
:class="{ active: current === item.___index }"
|
||||
class="goods-type-item"
|
||||
v-for="(item, index) in paramData.options.labels"
|
||||
:key="index"
|
||||
@click="handleClickLabel(item, index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list">
|
||||
<div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
|
||||
<div class="goods-list flex-j-sb">
|
||||
<div
|
||||
v-if="paramData.options"
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in paramData.options.list.filter((client) => {
|
||||
return client.___index == current;
|
||||
})"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{item.title}}</div>
|
||||
<div class="goods-desc">{{item.desc}}</div>
|
||||
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-price">
|
||||
{{item.price | unitPrice("￥")}}
|
||||
{{ item.price | unitPrice("￥") }}
|
||||
</div>
|
||||
<!-- 查看 -->
|
||||
<div class="white-shadow">
|
||||
<div class="search">去查看</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,45 +48,96 @@
|
|||
export default {
|
||||
name: "goods",
|
||||
props: {
|
||||
data: {
|
||||
paramData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
current:0
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
current: "",
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.current = this.paramData.options.labels[0].___index;
|
||||
},
|
||||
methods: {
|
||||
// 筛选出当前分类下的商品
|
||||
handleClickLabel(val, index) {
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.goods-list-item{
|
||||
.white-shadow {
|
||||
width: 287px;
|
||||
height: 122px;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transition: 0.35s;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(252, 252, 252, 0.58) -50%,
|
||||
#ffffff 99%
|
||||
);
|
||||
}
|
||||
.search {
|
||||
width: 143px;
|
||||
height: 45px;
|
||||
border-radius: 22.5px;
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
line-height: 45px;
|
||||
color: #ffffff;
|
||||
background: $theme_color;
|
||||
}
|
||||
.goods-list-item {
|
||||
padding-top: 30px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #FFFFFF;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 14px 0px #C5C5C5;
|
||||
background: #ffffff;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
position: relative;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
> .white-shadow {
|
||||
opacity: 1;
|
||||
}
|
||||
> .goods-img {
|
||||
> img {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-img{
|
||||
.goods-img {
|
||||
margin-bottom: 9.8px;
|
||||
text-align: center;
|
||||
>img{
|
||||
> img {
|
||||
transition: all 0.4s ease;
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name{
|
||||
.goods-name {
|
||||
font-size: 18px;
|
||||
|
||||
font-weight: normal;
|
||||
|
|
@ -82,7 +149,7 @@ export default {
|
|||
color: #333333;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc{
|
||||
.goods-desc {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
|
|
@ -93,22 +160,22 @@ export default {
|
|||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price{
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #F31947;
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line{
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title{
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
|
|
@ -116,17 +183,17 @@ export default {
|
|||
|
||||
color: #333333;
|
||||
}
|
||||
.active{
|
||||
color: #F31947;
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels{
|
||||
.goods-type-labels {
|
||||
cursor: pointer;
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
}
|
||||
.goods-type-item{
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list flex" >
|
||||
<div
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "onlyGoodsList",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag:false,
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClick(val){
|
||||
this.linkTo(val.url)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods-list-item {
|
||||
padding-top: 34.8px;
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
margin-bottom: 11.9px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<!-- 底部栏 -->
|
||||
<BaseFooter></BaseFooter>
|
||||
<!-- 侧边栏 -->
|
||||
<fixedBar class="fixed-bar"></fixedBar>
|
||||
<fixedBar class="fixed-bar" :class="{'show-fixed': topSearchShow}"></fixedBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -217,8 +217,24 @@ export default {
|
|||
transform: translateZ(0);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
.fixed-bar{
|
||||
opacity: 0 !important;
|
||||
transform: translateY(-10px);
|
||||
transition: .35s;
|
||||
z-index: 999999;
|
||||
height: 0px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.show-fixed{
|
||||
height: 354px !important;
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
|
||||
/* 2K */
|
||||
|
|
@ -241,12 +257,14 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 2025px) {
|
||||
/* 样式 */
|
||||
.fixed-bar{
|
||||
position: fixed;
|
||||
right:150px;
|
||||
top: 400px;
|
||||
top: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
|
|
@ -755,12 +755,106 @@ export const modelData = [{
|
|||
price: "120",
|
||||
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
desc:"万家宝藏好店等你来",
|
||||
url:'',
|
||||
___index: 0
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'onlyGoodsModel',
|
||||
name: '商品模块2',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
list:[
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
price: "120",
|
||||
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
desc:"万家宝藏好店等你来",
|
||||
url:'',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'mixModel',
|
||||
name: '混合模块',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
left:{
|
||||
model:'goods',
|
||||
//数据集合
|
||||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:require('@/assets/mix-bg1.png')
|
||||
},
|
||||
list:[
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
title:"商品标题",
|
||||
price:"120",
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
title:"商品标题",
|
||||
price:"120",
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
title:"商品标题",
|
||||
price:"120",
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
title:"商品标题",
|
||||
price:"120",
|
||||
url:"",
|
||||
},
|
||||
],
|
||||
badge:"精选",
|
||||
}
|
||||
},
|
||||
right:{
|
||||
model:'brand',
|
||||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:require('@/assets/mix-bg2.png')
|
||||
},
|
||||
list:[
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
url:"",
|
||||
},
|
||||
],
|
||||
badge:"",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: 'notEnough',
|
||||
name: '还没逛够',
|
||||
|
|
|
|||
|
|
@ -119,6 +119,14 @@
|
|||
<template v-if="element.type == 'goodsType'">
|
||||
<goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
|
||||
</template>
|
||||
<!-- 商品模块2 -->
|
||||
<template v-if="element.type == 'onlyGoodsModel'">
|
||||
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||
</template>
|
||||
<!-- 混合模块 -->
|
||||
<template v-if="element.type == 'mixModel'">
|
||||
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||
</template>
|
||||
<!-- 一行三列 -->
|
||||
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||
|
|
@ -252,6 +260,9 @@ import Seckill from "./modelList/seckill.vue";
|
|||
import goodsType from "./modelList/goodsAndType.vue";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
|
||||
import mixModel from "./modelList/mixModel.vue";
|
||||
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||
|
||||
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||
import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
|
||||
export default {
|
||||
|
|
@ -269,7 +280,9 @@ export default {
|
|||
goodsType,
|
||||
ossManage,
|
||||
oneRowThreeColumns,
|
||||
"seckill-only-album":seckillOnlyAlbum
|
||||
"seckill-only-album":seckillOnlyAlbum,
|
||||
onlyGoodsModel,
|
||||
mixModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,199 +1,312 @@
|
|||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<div class="flex goods-type-line">
|
||||
<div class="goods-type-title">{{data.options.title}}</div>
|
||||
<div class="flex goods-type-labels">
|
||||
<div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
|
||||
{{item.label}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods-type-wrapper">
|
||||
<div class="flex goods-type-line">
|
||||
<div class="goods-type-title">{{ data.options.title }}</div>
|
||||
<div class="flex goods-type-labels">
|
||||
<div
|
||||
@click="tabCurrentlyIndex = index"
|
||||
:class="{ active: tabCurrentlyIndex === index }"
|
||||
class="goods-type-item"
|
||||
v-for="(item, index) in data.options.labels"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list">
|
||||
<div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
|
||||
<div class="goods-img">
|
||||
<img :src="item.img">
|
||||
</div>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{item.title}}</div>
|
||||
<div class="goods-desc">{{item.desc}}</div>
|
||||
|
||||
</div>
|
||||
<div class="goods-price">
|
||||
{{item.price | unitPrice("￥")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list flex">
|
||||
<div
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||
return subset.___index == tabCurrentlyIndex;
|
||||
})"
|
||||
:key="index"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-price">
|
||||
{{ item.price | unitPrice("￥") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(data.options.list)"
|
||||
>编辑</Button
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
|
||||
<Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
|
||||
<TabPane v-for="(tab, index) in data.options.labels" :key="index" :label="tab.label" :name="index">
|
||||
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
<div v-for="(item,index) in data.options.list" :key="index">
|
||||
<img :src="item.img" class="column-img">
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectImg(index)"
|
||||
>选择图片</Button
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectLink(index)"
|
||||
>选择链接</Button
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<div class="tab-bar">
|
||||
标题
|
||||
<Input style="width: 300px" v-model="data.options.title"></Input>
|
||||
</div>
|
||||
<div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
|
||||
标签
|
||||
<Input
|
||||
style="width: 300px"
|
||||
v-model="data.options.labels[tabCurrentlyIndex].label"
|
||||
></Input>
|
||||
</div>
|
||||
<Tabs
|
||||
type="card"
|
||||
@on-click="handleClickTab"
|
||||
:value="tabIndex"
|
||||
:draggable="true"
|
||||
|
||||
>
|
||||
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
||||
<TabPane
|
||||
v-for="(tab,tabIndex) in data.options.labels"
|
||||
:key="tabIndex"
|
||||
:label="tab.label"
|
||||
:name="tab.___index + ''"
|
||||
>
|
||||
<div class="flex flex-a-c">
|
||||
<Button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</Button>
|
||||
<Button class="add-goods" @click="addCurrentGoods">
|
||||
添加商品
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||
return subset.___index == tabCurrentlyIndex;
|
||||
})"
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<img :src="item.img" class="column-img" />
|
||||
<div class="flex column-goods-config">
|
||||
<div class="column-config">
|
||||
<div>
|
||||
标题：
|
||||
<Input v-model="item.title"></Input>
|
||||
</div>
|
||||
<div>
|
||||
描述：
|
||||
<Input v-model="item.desc"></Input>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="delGoods(item)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
|
||||
export default {
|
||||
name: "goods",
|
||||
components:{ossManage},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
current:0,
|
||||
showModal:false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleDragDrop (name, newName, a, b, names) {
|
||||
// names 为调整后的 name 集合
|
||||
this.data.options.labels.splice(b,1,...this.data.options.labels.splice(a, 1 , this.data.options.labels[b]));
|
||||
default: {},
|
||||
},
|
||||
// 回显图片
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected[this.current].img = val.url;
|
||||
console.log(this.selected)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
tabCurrentlyIndex: 0, // 选项卡索引
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.tabIndex = this.data.options.labels[0].___index
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 算出最大的index 然后索引叠加
|
||||
*/
|
||||
handleTabsAdd() {
|
||||
let findAllIndex = this.data.options.labels.map((item) => {
|
||||
return item.___index;
|
||||
});
|
||||
let max = Math.max.apply(null, findAllIndex);
|
||||
|
||||
this.data.options.labels.push({
|
||||
label: "标签" + (max + 1),
|
||||
___index: max + 1,
|
||||
});
|
||||
},
|
||||
// 删除标签
|
||||
handleContextMenuDelete(item,index) {
|
||||
// 删除标签下关联的商品
|
||||
this.data.options.list.forEach((lab,currently)=>{
|
||||
if(lab.___index == item.___index){
|
||||
this.data.options.list.splice(currently,1)
|
||||
}
|
||||
})
|
||||
// 删除当前标签
|
||||
this.data.options.labels.splice(index,1)
|
||||
},
|
||||
// 删除商品
|
||||
delGoods(val) {
|
||||
this.data.options.list.forEach((item, i) => {
|
||||
if (
|
||||
item.title == val.title &&
|
||||
item.___index == this.tabCurrentlyIndex
|
||||
) {
|
||||
this.data.options.list.splice(i, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 切换选项卡
|
||||
handleClickTab(name) {
|
||||
console.log(name)
|
||||
this.tabCurrentlyIndex = name;
|
||||
},
|
||||
// 添加当前选项卡中的商品
|
||||
addCurrentGoods() {
|
||||
this.$refs.liliDialog.open("goods");
|
||||
},
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
console.log(item)
|
||||
console.log(item);
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
console.log(val);
|
||||
let goods = val[0];
|
||||
this.selected.img = goods.thumbnail;
|
||||
this.selected.price = goods.price;
|
||||
this.selected.name = goods.goodsName;
|
||||
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||
if (val.length) {
|
||||
val.forEach((item) => {
|
||||
const pushGoodsDetail = {
|
||||
img: item.thumbnail,
|
||||
price: item.price,
|
||||
title: item.goodsName,
|
||||
desc: "",
|
||||
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||
___index: this.tabCurrentlyIndex,
|
||||
};
|
||||
this.data.options.list.push(pushGoodsDetail);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
this.selected[this.current].url =
|
||||
this.$options.filters.formatLinkType(val);
|
||||
this.selected[this.current].type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
|
||||
console.log(this.selected[this.current]);
|
||||
},
|
||||
handleSelectLink(index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.current = index;
|
||||
},
|
||||
handleSelectImg(index){
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.goods-type-wrapper{
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
&:hover{
|
||||
>.setup-box{
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods-list-item{
|
||||
.goods-list-item {
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 14px 0px #C5C5C5;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
}
|
||||
}
|
||||
.goods-img{
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
>img{
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name{
|
||||
.goods-name {
|
||||
font-size: 18px;
|
||||
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
|
|
@ -203,7 +316,7 @@ export default {
|
|||
color: #333333;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc{
|
||||
.goods-desc {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
|
|
@ -214,22 +327,22 @@ export default {
|
|||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price{
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #F31947;
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line{
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title{
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
|
|
@ -237,17 +350,16 @@ export default {
|
|||
|
||||
color: #333333;
|
||||
}
|
||||
.active{
|
||||
color: #F31947;
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels{
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
}
|
||||
.goods-type-item{
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="mix-model">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-card">
|
||||
<left :data="data" />
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-card">
|
||||
<right :data="data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import left from './mixs/mix-goods'
|
||||
import right from './mixs/mix-brand'
|
||||
export default {
|
||||
name: "mixModel",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
left,
|
||||
right
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mix-model{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.left-card,.right-card{
|
||||
width: 584px;
|
||||
height: 344px;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.right.data.image.src" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex goods-list">
|
||||
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
justify-content:right;
|
||||
}
|
||||
.goods-list{
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
height: 119px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
width: 254px;
|
||||
height: 344px;
|
||||
border-radius: 9.8px 0px 0px 9.8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.left.data.image.src" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="badge-box flex">
|
||||
<div class="badge">
|
||||
{{data.options.left.data.badge}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="goods-detail-title">{{item.title}}</div>
|
||||
<div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
justify-content:right;
|
||||
}
|
||||
.goods-list{
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
height: 119px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
display: block;
|
||||
width: 196.7px;
|
||||
height: 343.7px;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list flex">
|
||||
<div
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(data.options.list)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<div class="flex flex-a-c">
|
||||
<Button class="add-goods" @click="addCurrentGoods">
|
||||
添加商品
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<img :src="item.img" class="column-img" />
|
||||
<div class="flex column-goods-config">
|
||||
<div class="column-config">
|
||||
<div>
|
||||
标题：
|
||||
<Input v-model="item.title"></Input>
|
||||
</div>
|
||||
<div>
|
||||
描述：
|
||||
<Input v-model="item.desc"></Input>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="delGoods(item,index)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "onlyGoodsList",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag:false,
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 删除商品
|
||||
delGoods(val,i) {
|
||||
this.data.options.list.splice(i, 1);
|
||||
},
|
||||
// 添加当前选项卡中的商品
|
||||
addCurrentGoods() {
|
||||
this.$refs.liliDialog.open("goods");
|
||||
},
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
console.log(item);
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
if (val.length) {
|
||||
val.forEach((item) => {
|
||||
const pushGoodsDetail = {
|
||||
img: item.thumbnail,
|
||||
price: item.price,
|
||||
title: item.goodsName,
|
||||
desc: "",
|
||||
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||
};
|
||||
this.data.options.list.push(pushGoodsDetail);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected[this.current].url =
|
||||
this.$options.filters.formatLinkType(val);
|
||||
this.selected[this.current].type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
|
||||
console.log(this.selected[this.current]);
|
||||
},
|
||||
handleSelectLink(index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods-list-item {
|
||||
padding-top: 34.8px;
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
margin-bottom: 11.9px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -108,7 +108,8 @@ export default {
|
|||
}
|
||||
.model-list {
|
||||
width: 130px;
|
||||
height: auto;
|
||||
height: 450px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
margin-top: 60px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue