最新楼层装修模块

master
学习很差啦 2023-04-07 16:47:27 +08:00
parent 816d842a57
commit 1cbafbce25
19 changed files with 940 additions and 144 deletions

View File

@ -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()
} }
} }

View File

@ -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;
} }

View File

@ -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() {

View File

@ -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>

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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

View File

@ -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)
} }
}) })

View File

@ -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)
} }
}) })

View File

@ -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
/> />

View File

@ -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',

View File

@ -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 {

View File

@ -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>

View File

@ -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;

View File

@ -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,
}, },