zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

楼层装修新增内容

master
学习很差啦 2023-03-31 15:22:38 +08:00
parent f37f633f51
commit 5958353383
7 changed files with 626 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
buyer/src/components/indexDecorate/modelList/mixModel.vue Normal file
View File

@ -0,0 +1,53 @@
<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;
position: relative;
}
</style>

131
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue Normal file
View File

@ -0,0 +1,131 @@
<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="badge-box flex">
<div class="round">
<Icon type="ios-arrow-forward" />
</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{
margin-top: 33px;
justify-content:right;
>.round{
width: 17.5px;
height: 17.5px;
opacity: 1;
border-radius: 50%;
text-align: center;
line-height: 17.5px;
border: 0.7px solid #333333;
margin-right: 17.5px;
}
}
.goods-list{
flex-wrap: wrap;
justify-content:space-between;
padding: 0 16px;
}
.goods-item{
display: flex;
align-items: center;
justify-content: center;
width:50%;
height: 85px;
border-radius: 9.8px;
opacity: 1;
transition: .35s;
background: #FFFFFF;
margin-bottom:9px;
}
.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>

124
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue Normal file
View File

@ -0,0 +1,124 @@
<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>

24
manager/src/views/page-decoration/modelConfig.js
View File

@ -789,7 +789,8 @@ export const modelData = [{
data:{ data:{
image:{ image:{
url:"", url:"",
src:require('@/assets/mix-bg1.png') src:require('@/assets/mix-bg1.png'),
size:"197 * 344"
}, },
list:[ list:[
{ {
@ -817,7 +818,11 @@ export const modelData = [{
url:"", url:"",
}, },
], ],
badge:"精选", badge:{
label:"精选",
url:""
}
} }
}, },
right:{ right:{
@ -825,7 +830,8 @@ export const modelData = [{
data:{ data:{
image:{ image:{
url:"", url:"",
src:require('@/assets/mix-bg2.png') src:require('@/assets/mix-bg2.png'),
size:"254 * 344"
}, },
list:[ list:[
{ {
@ -847,6 +853,18 @@ export const modelData = [{
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png", img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
url:"", 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:"", badge:"",
} }

264
manager/src/views/page-decoration/modelList/mixModel.vue
View File

@ -3,21 +3,177 @@
<!-- 左侧 --> <!-- 左侧 -->
<div class="left-card"> <div class="left-card">
<left :data="data"/> <left :data="data"/>
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel('left')"
>编辑
</Button
>
</div>
</div>
</div> </div>
<!-- 右侧 --> <!-- 右侧 -->
<div class="right-card"> <div class="right-card">
<right :data="data"/> <right :data="data"/>
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel('right')"
>编辑
</Button
>
</div> </div>
</div> </div>
</div>
<Modal
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div v-if="current">
<div class="modal-tab-bar">
<div>
当前模块 :
<ButtonGroup>
<Button :type="current.model == 'goods' ? 'primary' : 'default'">商品</Button>
<Button :type="current.model == 'brand' ? 'primary' : 'default'">品牌</Button>
</ButtonGroup>
</div>
<div class="flex">
<div>
图片 :
</div>
<div>
<img class="image" :src="current.data.image.src" alt="">
<div>
<div>推荐尺寸：{{ current.data.image.size }}</div>
<div class="link-src">
链接地址：
<Input style="width: 200px;" v-model="current.data.image.url" disabled/>
</div>
<Button
size="small"
type="primary"
@click="handleSelectImg(current.data.image)"
>选择图片
</Button
>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('image')"
>选择链接
</Button
>
</div>
</div>
</div>
<div class="flex" v-if="current.model == 'goods'">
<div>
标签 :
</div>
<Input style="width:200px" type="text" v-model="current.data.badge.label"/>
<Input style="width:100px; margin-left:10px" disabled type="text" v-model="current.data.badge.value"/>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('badge')"
>选择链接
</Button
>
</div>
<div class="flex column-list">
<div
v-for="(item, index) in current.data.list"
:key="index"
class="draggable"
>
<div class="flex">
<img :src="item.img" class="column-img"/>
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'goods'"
@click="handleSelectGoods('list',index)"
>选择商品
</Button
>
<div>
<div style="margin-bottom: 10px">
<Input v-model="item.url" />
</div>
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'brand'"
@click="handleSelectLink('list',index)"
>
选择链接
</Button
>
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'brand'"
@click="handleSelectImg('list',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> </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";
export default { export default {
name: "mixModel", name: "mixModel",
data() { data() {
return {} return {
showModal: false,
current: "", //当前选择的模块
picModelFlag: false,
selectedData: "", //选中的数据
goodsIndex: 0, // 商品索引
align: ""
}
}, },
props: { props: {
data: { data: {
@ -27,20 +183,84 @@ export default {
}, },
components: { components: {
left, left,
right right,
ossManage
}, },
mounted() { mounted() {
}, },
methods: {} methods: {
handleSelectImg() {
// 选择图片
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;
this.current.data.image.src = val.url;
},
// 选择商品回调
selectedGoodsData(val) {
console.log(val)
this.$nextTick(() => {
this.data.options[this.align].data.list[this.goodsIndex].img = val[0].thumbnail
this.data.options[this.align].data.list[this.goodsIndex].title = val[0].goodsName
this.data.options[this.align].data.list[this.goodsIndex].price = 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();
},
// 选择链接回调
selectedLink(val) {
console.log(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]);
},
/*
* 点击不同模块进行编辑
* 判断也很简单，就是第一个第二个模块进行判断
*
* */
handleSelectModel(align) {
this.align = align;
this.current = this.data.options[align]
console.log(this.data.options[align])
this.showModal = true
},
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "./setup-box.scss";
.link-src {
margin: 10px 0;
}
.mix-model { .mix-model {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.left-card, .right-card { .left-card, .right-card {
width: 584px; width: 584px;
height: 344px; height: 344px;
@ -48,5 +268,43 @@ export default {
opacity: 1; opacity: 1;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 1px 13px 0px #E5E5E5; box-shadow: 0px 1px 13px 0px #E5E5E5;
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 {
> .flex {
align-items: center;
}
} }
</style> </style>

27
manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
View File

@ -4,6 +4,13 @@
<img :src="data.options.right.data.image.src" alt=""> <img :src="data.options.right.data.image.src" alt="">
</div> </div>
<div> <div>
<div class="badge-box flex">
<div class="round">
<Icon type="ios-arrow-forward" />
</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" :key="index" v-for="(item,index) in data.options.right.data.list">
<div class="goods-thumbnail"> <div class="goods-thumbnail">
@ -66,7 +73,18 @@ export default {
} }
} }
.badge-box{ .badge-box{
margin-top: 33px;
justify-content:right; justify-content:right;
>.round{
width: 17.5px;
height: 17.5px;
opacity: 1;
border-radius: 50%;
text-align: center;
line-height: 17.5px;
border: 0.7px solid #333333;
margin-right: 17.5px;
}
} }
.goods-list{ .goods-list{
flex-wrap: wrap; flex-wrap: wrap;
@ -76,16 +94,15 @@ export default {
.goods-item{ .goods-item{
display: flex; display: flex;
align-items: center; align-items: center;
width: 173.6px; justify-content: center;
height: 119px; width:50%;
height: 85px;
border-radius: 9.8px; border-radius: 9.8px;
opacity: 1; opacity: 1;
transition: .35s; transition: .35s;
background: #FFFFFF; background: #FFFFFF;
margin-bottom:9px; margin-bottom:9px;
&:hover{
box-shadow: 0px 1px 6px 0px #E5E5E5;
}
} }
.left-side { .left-side {

3
manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
View File

@ -6,7 +6,7 @@
<div> <div>
<div class="badge-box flex"> <div class="badge-box flex">
<div class="badge"> <div class="badge">
{{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">
@ -75,6 +75,7 @@ export default {
} }
} }
.badge-box{ .badge-box{
justify-content:right; justify-content:right;
} }
.goods-list{ .goods-list{