最新楼层装修模块
parent
816d842a57
commit
1cbafbce25
|
@ -16,23 +16,28 @@ export default {
|
||||||
iconList:[
|
iconList:[
|
||||||
{
|
{
|
||||||
icon:"user",
|
icon:"user",
|
||||||
label:"会员中心"
|
label:"会员中心",
|
||||||
|
path:"/home"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"consumer",
|
icon:"consumer",
|
||||||
label:"客服"
|
label:"客服",
|
||||||
|
path:"/home"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"notification",
|
icon:"notification",
|
||||||
label:"消息"
|
label:"消息",
|
||||||
|
path:"/home/MsgList"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"feedback",
|
icon:"feedback",
|
||||||
label:"反馈"
|
label:"反馈",
|
||||||
|
path:"/home"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"back",
|
icon:"back",
|
||||||
label:"顶部"
|
label:"顶部",
|
||||||
|
path:"back"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
isScrolling:false,
|
isScrolling:false,
|
||||||
|
@ -62,7 +67,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleClickIcon(val){
|
handleClickIcon(val){
|
||||||
if(val.icon === 'back'){
|
if(val.path === 'back'){
|
||||||
this.scrollToTop()
|
this.scrollToTop()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -94,6 +94,14 @@
|
||||||
<template v-if="element.type == 'onlyGoodsModel'">
|
<template v-if="element.type == 'onlyGoodsModel'">
|
||||||
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 混合模块 -->
|
||||||
|
<template v-if="element.type == 'mixModel'">
|
||||||
|
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||||
|
</template>
|
||||||
|
<!-- 混合模块 -->
|
||||||
|
<template v-if="element.type == 'forYour'">
|
||||||
|
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
|
||||||
|
</template>
|
||||||
<!-- 新品排行 -->
|
<!-- 新品排行 -->
|
||||||
<template v-if="element.type == 'newGoodsSort'">
|
<template v-if="element.type == 'newGoodsSort'">
|
||||||
<new-goods-sort
|
<new-goods-sort
|
||||||
|
@ -142,6 +150,8 @@ import Seckill from "./modelList/Seckill.vue";
|
||||||
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||||
import goodsAndType from "./modelList/goodsAndType.vue";
|
import goodsAndType from "./modelList/goodsAndType.vue";
|
||||||
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||||
|
import mixModel from "./modelList/mixModel.vue";
|
||||||
|
import forYour from "./modelList/forYour.vue";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -158,7 +168,9 @@ export default {
|
||||||
Seckill,
|
Seckill,
|
||||||
oneRowThreeColumns,
|
oneRowThreeColumns,
|
||||||
goodsAndType,
|
goodsAndType,
|
||||||
onlyGoodsModel
|
onlyGoodsModel,
|
||||||
|
mixModel,
|
||||||
|
forYour
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -223,7 +235,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.width_1200_auto {
|
.width_1200_auto {
|
||||||
width: 1200px;
|
width: 1184px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,8 +27,8 @@
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="userInfo.id">
|
<div v-if="userInfo.id">
|
||||||
<div class="icon-list flex flex-j-sb" @click="entryControl">
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" :key="index" v-for="(item,index) in recentList">
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
|
||||||
<div class="value">
|
<div class="value">
|
||||||
{{ item.value}}
|
{{ item.value}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,16 +48,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gray-line"></div>
|
<div class="gray-line"></div>
|
||||||
<div class="icon-list flex flex-j-sb" @click="entryControl">
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" :key="index" v-for="(item,index) in entranceList">
|
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item,index) in entranceList">
|
||||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
<div>
|
<div>
|
||||||
{{ item.label}}
|
{{ item.label}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon-list flex flex-j-sb" @click="entryControl">
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" :key="index" v-for="(item,index) in appendList">
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in appendList">
|
||||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
<div>
|
<div>
|
||||||
{{ item.label}}
|
{{ item.label}}
|
||||||
|
@ -88,19 +88,23 @@ export default {
|
||||||
entranceList:[
|
entranceList:[
|
||||||
{
|
{
|
||||||
icon:"collage",
|
icon:"collage",
|
||||||
label:"宝贝收藏"
|
label:"宝贝收藏",
|
||||||
|
path:"/home/Favorites"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"shop",
|
icon:"shop",
|
||||||
label:"收藏店铺"
|
label:"收藏店铺",
|
||||||
|
path:"/home/Favorites?type=STORE"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"carts",
|
icon:"carts",
|
||||||
label:"购物车"
|
label:"购物车",
|
||||||
|
path:"/cart"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"story",
|
icon:"story",
|
||||||
label:"我的足迹"
|
label:"我的足迹",
|
||||||
|
path:"/home/MyTracks"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
appendList:[
|
appendList:[
|
||||||
|
@ -143,8 +147,9 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 快捷跳转中心
|
// 快捷跳转中心
|
||||||
entryControl(){
|
entryControl(val){
|
||||||
|
console.log(val)
|
||||||
|
this.$router.push(val.path)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
@ -0,0 +1,228 @@
|
||||||
|
<template>
|
||||||
|
<div class="model" v-if="data">
|
||||||
|
<div class="for-your">{{ data.options.title }}</div>
|
||||||
|
<div class="flex card">
|
||||||
|
<div class="left">
|
||||||
|
<img :src="data.options.data.image.src" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="right flex">
|
||||||
|
<!-- 商品区 -->
|
||||||
|
<div class="goods-list">
|
||||||
|
<div
|
||||||
|
class="goods-item"
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
@click="linkTo(item.url)"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<img class="goods-img" :src="item.img" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 热卖区 -->
|
||||||
|
<div class="hot-list">
|
||||||
|
<div class="hot-title">{{ data.options.data.hot.title }}</div>
|
||||||
|
<div
|
||||||
|
class="hot-item flex flex-a-c"
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
@click="linkTo(item.url)"
|
||||||
|
>
|
||||||
|
<img :src="item.img" alt="" />
|
||||||
|
<div class="hot-goods">
|
||||||
|
<div class="hot-goods-title">{{ item.title }}</div>
|
||||||
|
<div>
|
||||||
|
<div class="hot-price">¥{{ item.price | unitPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "forYour",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
width: 558px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.goods-item {
|
||||||
|
width: 278px;
|
||||||
|
height: 277px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
border-right: 1.4px solid #e2e2e2;
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
/deep/ .goods-name {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
/deep/ .goods-desc {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
margin-top: 23px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
width: 190px;
|
||||||
|
height: 156px;
|
||||||
|
margin-top: 19px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 11px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.for-your {
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.right-card {
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 346px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
> img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 839px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 0px 9.8px 9.8px 0px;
|
||||||
|
}
|
||||||
|
.hot-list {
|
||||||
|
width: 279px;
|
||||||
|
}
|
||||||
|
.hot-title {
|
||||||
|
margin-left: 25px;
|
||||||
|
line-height: 63px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #333333;
|
||||||
|
height: 63px;
|
||||||
|
}
|
||||||
|
.hot-item {
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
height: 122px;
|
||||||
|
padding:0 14px;
|
||||||
|
align-items: center;
|
||||||
|
&:hover {
|
||||||
|
> .hot-goods {
|
||||||
|
> .hot-goods-title {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 76.3px;
|
||||||
|
height: 77.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hot-goods {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
.hot-goods-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.hot-price {
|
||||||
|
margin-top: 10.3px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -15,10 +15,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 商品部分 -->
|
<!-- 商品部分 -->
|
||||||
<div class="goods-list flex-j-sb">
|
<div class="only-goods-list flex-j-sb">
|
||||||
<div
|
<div
|
||||||
v-if="paramData.options"
|
v-if="paramData.options"
|
||||||
class="goods-list-item"
|
class="only-goods-list-item"
|
||||||
v-for="(item, index) in paramData.options.list.filter((client) => {
|
v-for="(item, index) in paramData.options.list.filter((client) => {
|
||||||
return client.___index == current;
|
return client.___index == current;
|
||||||
})"
|
})"
|
||||||
|
@ -104,7 +104,10 @@ export default {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: $theme_color;
|
background: $theme_color;
|
||||||
}
|
}
|
||||||
.goods-list-item {
|
.only-goods-list{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.only-goods-list-item {
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
width: 287px;
|
width: 287px;
|
||||||
height: 343.7px;
|
height: 343.7px;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex" v-if="data.options.right.model == 'brand'">
|
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||||
<div class="left-side" >
|
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||||
<img :src="data.options.right.data.image.src" alt="">
|
<img :src="data.options.right.data.image.src" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="right-side">
|
||||||
<div class="badge-box flex">
|
<div class="badge-box flex">
|
||||||
<div class="round">
|
<div class="round">
|
||||||
<Icon type="ios-arrow-forward" />
|
<Icon type="ios-arrow-forward" />
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex goods-list">
|
<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-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
|
||||||
<div class="goods-thumbnail">
|
<div class="goods-thumbnail">
|
||||||
<img :src="item.img" alt="">
|
<img :src="item.img" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
@ -43,8 +43,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.goods-detail{
|
.right-side{
|
||||||
|
width: 330px;
|
||||||
}
|
}
|
||||||
.goods-detail-title{
|
.goods-detail-title{
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
color: #F31947;
|
color: $theme_color;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom:10px;
|
margin-bottom:10px;
|
||||||
}
|
}
|
||||||
|
@ -87,6 +87,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.goods-list{
|
.goods-list{
|
||||||
|
width: 330px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content:space-between;
|
justify-content:space-between;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex" v-if="data.options.left.model == 'goods'">
|
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||||
<div class="left-side" >
|
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||||
<img :src="data.options.left.data.image.src" alt="">
|
<img :src="data.options.left.data.image.src" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="right-side">
|
||||||
<div class="badge-box flex">
|
<div class="badge-box flex">
|
||||||
<div class="badge">
|
<div class="badge" @click="linkTo(data.options.right.data.image.url)">
|
||||||
{{data.options.left.data.badge}}
|
{{data.options.left.data.badge.label}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex goods-list">
|
<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-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
|
||||||
<div class="goods-thumbnail">
|
<div class="goods-thumbnail">
|
||||||
<img :src="item.img" alt="">
|
<img :src="item.img" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,8 +46,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.goods-detail{
|
.right-side{
|
||||||
|
width: 387px;
|
||||||
}
|
}
|
||||||
.goods-detail-title{
|
.goods-detail-title{
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -79,11 +80,13 @@ export default {
|
||||||
justify-content:right;
|
justify-content:right;
|
||||||
}
|
}
|
||||||
.goods-list{
|
.goods-list{
|
||||||
|
width: 387px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content:space-between;
|
justify-content:space-between;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
.goods-item{
|
.goods-item{
|
||||||
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 173.6px;
|
width: 173.6px;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="goods-type-wrapper">
|
<div class="goods-type-wrapper">
|
||||||
<!-- 商品部分 -->
|
<!-- 商品部分 -->
|
||||||
<div class="goods-list flex" >
|
<div class="only-goods-list flex" >
|
||||||
<div
|
<div
|
||||||
class="goods-list-item"
|
class="only-goods-list-item"
|
||||||
v-for="(item, index) in data.options.list"
|
v-for="(item, index) in data.options.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="handleClick(item)"
|
@click="handleClick(item)"
|
||||||
|
@ -86,7 +86,7 @@ export default {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.goods-list {
|
.only-goods-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -101,7 +101,7 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.goods-list-item {
|
.only-goods-list-item {
|
||||||
padding-top: 34.8px;
|
padding-top: 34.8px;
|
||||||
margin-bottom: 14.3px;
|
margin-bottom: 14.3px;
|
||||||
width: 287px;
|
width: 287px;
|
||||||
|
@ -155,7 +155,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
|
|
||||||
color: #f31947;
|
color: $theme_color;
|
||||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
}
|
}
|
||||||
.goods-type-line {
|
.goods-type-line {
|
||||||
|
@ -172,7 +172,7 @@ export default {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
color: #f31947;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
.goods-type-labels {
|
.goods-type-labels {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
|
|
@ -53,11 +53,12 @@ export default {
|
||||||
params: { // 请求参数
|
params: { // 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 100,
|
pageSize: 100,
|
||||||
type: 'GOODS'
|
type: this.$route.query.type || 'GOODS'
|
||||||
},
|
},
|
||||||
spinShow: false // 加载状态
|
spinShow: false // 加载状态
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getList () { // 获取收藏列表
|
getList () { // 获取收藏列表
|
||||||
this.spinShow = true
|
this.spinShow = true
|
||||||
|
@ -123,6 +124,7 @@ export default {
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.homePage) this.params.pageSize = 5;
|
if (this.homePage) this.params.pageSize = 5;
|
||||||
this.getList()
|
this.getList()
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 69 KiB |
Binary file not shown.
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 71 KiB |
|
@ -66,7 +66,6 @@ export default {
|
||||||
}, []);
|
}, []);
|
||||||
this.wap.forEach((items,indexs) => {
|
this.wap.forEach((items,indexs) => {
|
||||||
if(items.title == '活动'){
|
if(items.title == '活动'){
|
||||||
console.log(32323232323232)
|
|
||||||
this.wap.splice(indexs,1)
|
this.wap.splice(indexs,1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -117,7 +117,6 @@ export default {
|
||||||
if(urls.indexOf('/floorList/renovation') != -1){
|
if(urls.indexOf('/floorList/renovation') != -1){
|
||||||
this.linkList.forEach((items,indexs)=>{
|
this.linkList.forEach((items,indexs)=>{
|
||||||
if(items.title == '砍价'){
|
if(items.title == '砍价'){
|
||||||
console.log(12321322,indexs)
|
|
||||||
this.linkList.splice(indexs,1)
|
this.linkList.splice(indexs,1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
:current="params.pageNumber"
|
:current="params.pageNumber"
|
||||||
:page-size="params.pageSize"
|
:page-size="params.pageSize"
|
||||||
class="mt_10"
|
class="mt_10"
|
||||||
:total="Number(totals)"
|
:total="Number(total)"
|
||||||
size="small"
|
size="small"
|
||||||
show-elevator
|
show-elevator
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -789,7 +789,7 @@ export const modelData = [{
|
||||||
data:{
|
data:{
|
||||||
image:{
|
image:{
|
||||||
url:"",
|
url:"",
|
||||||
src:require('@/assets/mix-bg1.png'),
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg1.png',
|
||||||
size:"197 * 344"
|
size:"197 * 344"
|
||||||
},
|
},
|
||||||
list:[
|
list:[
|
||||||
|
@ -830,7 +830,7 @@ export const modelData = [{
|
||||||
data:{
|
data:{
|
||||||
image:{
|
image:{
|
||||||
url:"",
|
url:"",
|
||||||
src:require('@/assets/mix-bg2.png'),
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg2.png',
|
||||||
size:"254 * 344"
|
size:"254 * 344"
|
||||||
},
|
},
|
||||||
list:[
|
list:[
|
||||||
|
@ -872,6 +872,80 @@ export const modelData = [{
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'forYour',
|
||||||
|
name: '为你推荐',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
model:'goods',
|
||||||
|
title:"为你推荐",
|
||||||
|
//数据集合
|
||||||
|
data:{
|
||||||
|
image:{
|
||||||
|
url:"",
|
||||||
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg3.png',
|
||||||
|
size:"197 * 344"
|
||||||
|
},
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example1.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"346 * 554"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example2.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example3.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example4.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hot:{
|
||||||
|
title:"最近热卖",
|
||||||
|
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:"",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'notEnough',
|
type: 'notEnough',
|
||||||
|
|
|
@ -127,6 +127,10 @@
|
||||||
<template v-if="element.type == 'mixModel'">
|
<template v-if="element.type == 'mixModel'">
|
||||||
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 为你推荐 -->
|
||||||
|
<template v-if="element.type == 'forYour'">
|
||||||
|
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
|
||||||
|
</template>
|
||||||
<!-- 一行三列 -->
|
<!-- 一行三列 -->
|
||||||
<template v-if="element.type == 'oneRowThreeColumns'">
|
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||||
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||||
|
@ -261,6 +265,7 @@ import goodsType from "./modelList/goodsAndType.vue";
|
||||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
|
||||||
import mixModel from "./modelList/mixModel.vue";
|
import mixModel from "./modelList/mixModel.vue";
|
||||||
|
import forYour from "./modelList/forYour.vue";
|
||||||
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||||
|
|
||||||
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||||
|
@ -282,7 +287,8 @@ export default {
|
||||||
oneRowThreeColumns,
|
oneRowThreeColumns,
|
||||||
"seckill-only-album":seckillOnlyAlbum,
|
"seckill-only-album":seckillOnlyAlbum,
|
||||||
onlyGoodsModel,
|
onlyGoodsModel,
|
||||||
mixModel
|
mixModel,
|
||||||
|
forYour
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -0,0 +1,444 @@
|
||||||
|
<template>
|
||||||
|
<div class="model" v-if="data">
|
||||||
|
<div class="for-your">{{ data.options.title }}</div>
|
||||||
|
|
||||||
|
<div class="flex card">
|
||||||
|
<div class="left">
|
||||||
|
<img :src="data.options.data.image.src" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="right flex">
|
||||||
|
<!-- 商品区 -->
|
||||||
|
<div class="goods-list">
|
||||||
|
<div
|
||||||
|
class="goods-item"
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<img class="goods-img" :src="item.img" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 热卖区 -->
|
||||||
|
<div class="hot-list">
|
||||||
|
<div class="hot-title">{{ data.options.data.hot.title }}</div>
|
||||||
|
<div
|
||||||
|
class="hot-item flex flex-a-c"
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img :src="item.img" alt="" />
|
||||||
|
<div class="hot-goods">
|
||||||
|
<div class="hot-goods-title">{{ item.title }}</div>
|
||||||
|
<div>
|
||||||
|
<div class="hot-price">¥{{ item.price | unitPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel()">编辑 </Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div>
|
||||||
|
主标题:
|
||||||
|
<Input style="width: 200px" v-model="data.options.title"></Input>
|
||||||
|
</div>
|
||||||
|
<Divider>左侧商品部分</Divider>
|
||||||
|
<div class="flex">
|
||||||
|
<div>图片 :</div>
|
||||||
|
<div>
|
||||||
|
<img class="image" :src="data.options.data.image.src" alt="" />
|
||||||
|
<div>
|
||||||
|
<div>推荐尺寸:{{ data.options.data.image.size }}</div>
|
||||||
|
<div class="link-src">
|
||||||
|
链接地址:
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="data.options.data.image.url"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg('image')"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('image')"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider>中间商品部分</Divider>
|
||||||
|
<div class="flex column-list">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="column-goods-list">
|
||||||
|
<div><Input v-model="item.title"></Input></div>
|
||||||
|
<div><Input v-model="item.desc"></Input></div>
|
||||||
|
<div><Input disabled v-model="item.url"></Input></div>
|
||||||
|
<div>{{ item.size }}</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('list', index)"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg('list', index)"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Divider>右侧商品部分</Divider>
|
||||||
|
<div class="flex">
|
||||||
|
<div>右侧标题 :</div>
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="data.options.data.hot.title"
|
||||||
|
></Input>
|
||||||
|
</div>
|
||||||
|
<div class="flex column-list">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="column-goods-list">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectGoods('hot', index)"
|
||||||
|
>选择商品
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "forYour",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
|
||||||
|
picModelFlag: false,
|
||||||
|
selectedData: "", //选中的数据
|
||||||
|
goodsIndex: 0, // 商品索引
|
||||||
|
align: "",
|
||||||
|
defaultCallbackImageType: "",
|
||||||
|
current: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ossManage,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSelectImg(type, index) {
|
||||||
|
this.defaultCallbackImageType = type;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectGoods(val, index) {
|
||||||
|
this.$refs.liliDialog.open("goods");
|
||||||
|
this.$refs.liliDialog.singleGoods();
|
||||||
|
this.selectedData = val;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
handleSelectLink(val, index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.selectedData = val;
|
||||||
|
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
// 回显图片
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
if (this.defaultCallbackImageType == "image") {
|
||||||
|
this.data.options.data.image.src = val.url;
|
||||||
|
} else {
|
||||||
|
this.data.options.data[this.defaultCallbackImageType][
|
||||||
|
this.goodsIndex
|
||||||
|
].img = val.url;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].url =
|
||||||
|
this.$options.filters.formatLinkType(val[0]);
|
||||||
|
|
||||||
|
console.log(val, this.selectedData, this.goodsIndex);
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
console.log(val,this.selectedData)
|
||||||
|
if (this.selectedData == "image") {
|
||||||
|
this.data.options.data.image.url =
|
||||||
|
this.$options.filters.formatLinkType(val);
|
||||||
|
} else {
|
||||||
|
console.log(this.data.options.data.list,this.goodsIndex)
|
||||||
|
this.data.options.data.list[
|
||||||
|
this.goodsIndex
|
||||||
|
].url = this.$options.filters.formatLinkType(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 点击不同模块进行编辑
|
||||||
|
* 判断也很简单,就是第一个第二个模块进行判断
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
handleSelectModel() {
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
width: 558px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.goods-item {
|
||||||
|
width: 278px;
|
||||||
|
height: 277px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-right: 1.4px solid #e2e2e2;
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
margin-top: 23px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
width: 190px;
|
||||||
|
height: 156px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 19px;
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 11px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.for-your {
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.column-goods-list {
|
||||||
|
> div {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-src {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.right-card {
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
margin: 10px 0;
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 346px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
> img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 839px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 0px 9.8px 9.8px 0px;
|
||||||
|
}
|
||||||
|
.hot-list {
|
||||||
|
width: 279px;
|
||||||
|
}
|
||||||
|
.hot-title {
|
||||||
|
margin-left: 25px;
|
||||||
|
line-height: 63px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #333333;
|
||||||
|
height: 63px;
|
||||||
|
}
|
||||||
|
.hot-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
height: 122px;
|
||||||
|
padding-left: 14px;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
width: 76.3px;
|
||||||
|
height: 77.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hot-goods {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
.hot-goods-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.hot-price {
|
||||||
|
margin-top: 10.3px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -5,12 +5,9 @@
|
||||||
<left :data="data" />
|
<left :data="data" />
|
||||||
<div class="setup-box">
|
<div class="setup-box">
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button size="small" @click.stop="handleSelectModel('left')"
|
||||||
size="small"
|
|
||||||
@click.stop="handleSelectModel('left')"
|
|
||||||
>编辑
|
>编辑
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,12 +16,9 @@
|
||||||
<right :data="data" />
|
<right :data="data" />
|
||||||
<div class="setup-box">
|
<div class="setup-box">
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button size="small" @click.stop="handleSelectModel('right')"
|
||||||
size="small"
|
|
||||||
@click.stop="handleSelectModel('right')"
|
|
||||||
>编辑
|
>编辑
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,56 +35,65 @@
|
||||||
<div>
|
<div>
|
||||||
当前模块 :
|
当前模块 :
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button :type="current.model == 'goods' ? 'primary' : 'default'">商品</Button>
|
<Button :type="current.model == 'goods' ? 'primary' : 'default'"
|
||||||
<Button :type="current.model == 'brand' ? 'primary' : 'default'">品牌</Button>
|
>商品</Button
|
||||||
|
>
|
||||||
|
<Button :type="current.model == 'brand' ? 'primary' : 'default'"
|
||||||
|
>品牌</Button
|
||||||
|
>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
<div>图片 :</div>
|
||||||
<div>
|
<div>
|
||||||
图片 :
|
<img class="image" :src="current.data.image.src" alt="" />
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img class="image" :src="current.data.image.src" alt="">
|
|
||||||
<div>
|
<div>
|
||||||
<div>推荐尺寸:{{ current.data.image.size }}</div>
|
<div>推荐尺寸:{{ current.data.image.size }}</div>
|
||||||
<div class="link-src">
|
<div class="link-src">
|
||||||
链接地址:
|
链接地址:
|
||||||
<Input style="width: 200px;" v-model="current.data.image.url" disabled/>
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="current.data.image.url"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleSelectImg(current.data.image)"
|
@click="handleSelectImg('default')"
|
||||||
>选择图片
|
>选择图片
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
class="ml_10"
|
class="ml_10"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleSelectLink('image')"
|
@click="handleSelectLink('image')"
|
||||||
>选择链接
|
>选择链接
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex" v-if="current.model == 'goods'">
|
<div class="flex" v-if="current.model == 'goods'">
|
||||||
<div>
|
<div>标签 :</div>
|
||||||
标签 :
|
<Input
|
||||||
</div>
|
style="width: 200px"
|
||||||
<Input style="width:200px" type="text" v-model="current.data.badge.label"/>
|
type="text"
|
||||||
<Input style="width:100px; margin-left:10px" disabled type="text" v-model="current.data.badge.value"/>
|
v-model="current.data.badge.label"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
style="width: 100px; margin-left: 10px"
|
||||||
|
disabled
|
||||||
|
type="text"
|
||||||
|
v-model="current.data.badge.url"
|
||||||
|
/>
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
class="ml_10"
|
class="ml_10"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleSelectLink('badge')"
|
@click="handleSelectLink('badge')"
|
||||||
>选择链接
|
>选择链接
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex column-list">
|
<div class="flex column-list">
|
||||||
<div
|
<div
|
||||||
|
@ -107,11 +110,10 @@
|
||||||
v-if="current.model == 'goods'"
|
v-if="current.model == 'goods'"
|
||||||
@click="handleSelectGoods('list', index)"
|
@click="handleSelectGoods('list', index)"
|
||||||
>选择商品
|
>选择商品
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<div style="margin-bottom: 10px">
|
<div v-if="current.model == 'brand'" style="margin-bottom: 10px">
|
||||||
<Input v-model="item.url" />
|
<Input disabled v-model="item.url" />
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
|
@ -121,8 +123,7 @@
|
||||||
@click="handleSelectLink('list', index)"
|
@click="handleSelectLink('list', index)"
|
||||||
>
|
>
|
||||||
选择链接
|
选择链接
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
class="ml_10"
|
class="ml_10"
|
||||||
|
@ -130,8 +131,7 @@
|
||||||
v-if="current.model == 'brand'"
|
v-if="current.model == 'brand'"
|
||||||
@click="handleSelectImg('list', index)"
|
@click="handleSelectImg('list', index)"
|
||||||
>选择图片
|
>选择图片
|
||||||
</Button
|
</Button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -159,8 +159,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import left from './mixs/mix-goods'
|
import left from "./mixs/mix-goods";
|
||||||
import right from './mixs/mix-brand'
|
import right from "./mixs/mix-brand";
|
||||||
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -172,25 +172,26 @@ export default {
|
||||||
picModelFlag: false,
|
picModelFlag: false,
|
||||||
selectedData: "", //选中的数据
|
selectedData: "", //选中的数据
|
||||||
goodsIndex: 0, // 商品索引
|
goodsIndex: 0, // 商品索引
|
||||||
align: ""
|
align: "",
|
||||||
}
|
defaultCallbackImageType: "",
|
||||||
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {}
|
default: {},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
left,
|
left,
|
||||||
right,
|
right,
|
||||||
ossManage
|
ossManage,
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
handleSelectImg() {
|
handleSelectImg(type, index) {
|
||||||
|
this.defaultCallbackImageType = type;
|
||||||
|
this.goodsIndex = index;
|
||||||
// 选择图片
|
// 选择图片
|
||||||
this.$refs.ossManage.selectImage = true;
|
this.$refs.ossManage.selectImage = true;
|
||||||
this.picModelFlag = true;
|
this.picModelFlag = true;
|
||||||
|
@ -199,39 +200,54 @@ export default {
|
||||||
handleSelectGoods(val, index) {
|
handleSelectGoods(val, index) {
|
||||||
this.$refs.liliDialog.open("goods");
|
this.$refs.liliDialog.open("goods");
|
||||||
this.$refs.liliDialog.singleGoods();
|
this.$refs.liliDialog.singleGoods();
|
||||||
this.selectedData = val
|
this.selectedData = val;
|
||||||
this.goodsIndex = index
|
this.goodsIndex = index;
|
||||||
},
|
},
|
||||||
handleSelectLink(val, index) {
|
handleSelectLink(val, index) {
|
||||||
// 调起选择链接弹窗
|
// 调起选择链接弹窗
|
||||||
this.$refs.liliDialog.open("link");
|
this.$refs.liliDialog.open("link");
|
||||||
this.selectedData = val
|
this.selectedData = val;
|
||||||
this.goodsIndex = index
|
this.goodsIndex = index;
|
||||||
|
|
||||||
},
|
},
|
||||||
// 回显图片
|
// 回显图片
|
||||||
callbackSelected(val) {
|
callbackSelected(val) {
|
||||||
this.picModelFlag = false;
|
this.picModelFlag = false;
|
||||||
|
if (this.defaultCallbackImageType == "default") {
|
||||||
|
console.log(this.current.data.image);
|
||||||
this.current.data.image.src = val.url;
|
this.current.data.image.src = val.url;
|
||||||
|
} else {
|
||||||
|
console.log(this.goodsIndex, this.data.options[this.align].data.list);
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
|
||||||
|
|
||||||
|
// this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 选择商品回调
|
// 选择商品回调
|
||||||
selectedGoodsData(val) {
|
selectedGoodsData(val) {
|
||||||
console.log(val)
|
console.log(val);
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.data.options[this.align].data.list[this.goodsIndex].img = val[0].thumbnail
|
this.data.options[this.align].data.list[this.goodsIndex].img =
|
||||||
this.data.options[this.align].data.list[this.goodsIndex].title = val[0].goodsName
|
val[0].thumbnail;
|
||||||
this.data.options[this.align].data.list[this.goodsIndex].price = val[0].price
|
this.data.options[this.align].data.list[this.goodsIndex].title =
|
||||||
this.data.options[this.align].data.list[this.goodsIndex].url = val[0].url
|
val[0].goodsName;
|
||||||
})
|
this.data.options[this.align].data.list[this.goodsIndex].price =
|
||||||
console.log(this.data.options[this.align].data.list[this.goodsIndex])
|
val[0].price;
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].url =
|
||||||
|
val[0].url;
|
||||||
|
});
|
||||||
|
console.log(this.data.options[this.align].data.list[this.goodsIndex]);
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
// 选择链接回调
|
// 选择链接回调
|
||||||
selectedLink(val) {
|
selectedLink(val) {
|
||||||
console.log(val)
|
if (this.selectedData != "list") {
|
||||||
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
|
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
|
||||||
console.log(this.data.options[this.align].data[this.selectedData]);
|
console.log(this.data.options[this.align].data[this.selectedData])
|
||||||
|
}
|
||||||
|
if (this.selectedData == "list") {
|
||||||
|
this.data.options[this.align].data[this.selectedData][this.goodsIndex]
|
||||||
|
.url = this.$options.filters.formatLinkType(val);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* 点击不同模块进行编辑
|
* 点击不同模块进行编辑
|
||||||
|
@ -240,13 +256,12 @@ export default {
|
||||||
* */
|
* */
|
||||||
handleSelectModel(align) {
|
handleSelectModel(align) {
|
||||||
this.align = align;
|
this.align = align;
|
||||||
this.current = this.data.options[align]
|
this.current = this.data.options[align];
|
||||||
console.log(this.data.options[align])
|
console.log(this.data.options[align]);
|
||||||
this.showModal = true
|
this.showModal = true;
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -261,13 +276,14 @@ export default {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-card, .right-card {
|
.left-card,
|
||||||
|
.right-card {
|
||||||
width: 584px;
|
width: 584px;
|
||||||
height: 344px;
|
height: 344px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -294,7 +310,6 @@ export default {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.modal-tab-bar {
|
.modal-tab-bar {
|
||||||
> .flex {
|
> .flex {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -149,7 +149,7 @@ import {
|
||||||
import Editor from "@tinymce/tinymce-vue";
|
import Editor from "@tinymce/tinymce-vue";
|
||||||
import { initEditor } from "@/components/editor/config";
|
import { initEditor } from "@/components/editor/config";
|
||||||
export default {
|
export default {
|
||||||
name: "article",
|
|
||||||
components: {
|
components: {
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue