楼层装修新增内容
学习很差啦
parent
f37f633f51
commit
5958353383
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -789,7 +789,8 @@ export const modelData = [{
|
|||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:require('@/assets/mix-bg1.png')
|
||||
src:require('@/assets/mix-bg1.png'),
|
||||
size:"197 * 344"
|
||||
},
|
||||
list:[
|
||||
{
|
||||
|
|
@ -817,7 +818,11 @@ export const modelData = [{
|
|||
url:"",
|
||||
},
|
||||
],
|
||||
badge:"精选",
|
||||
badge:{
|
||||
label:"精选",
|
||||
url:""
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
right:{
|
||||
|
|
@ -825,7 +830,8 @@ export const modelData = [{
|
|||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:require('@/assets/mix-bg2.png')
|
||||
src:require('@/assets/mix-bg2.png'),
|
||||
size:"254 * 344"
|
||||
},
|
||||
list:[
|
||||
{
|
||||
|
|
@ -847,6 +853,18 @@ export const modelData = [{
|
|||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
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:"",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,179 @@
|
|||
<template>
|
||||
<div class="mix-model">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-card">
|
||||
<left :data="data" />
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-card">
|
||||
<right :data="data" />
|
||||
<div class="mix-model">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-card">
|
||||
<left :data="data"/>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel('left')"
|
||||
>编辑
|
||||
</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-card">
|
||||
<right :data="data"/>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel('right')"
|
||||
>编辑
|
||||
</Button
|
||||
>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import left from './mixs/mix-goods'
|
||||
import right from './mixs/mix-brand'
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||
|
||||
export default {
|
||||
name: "mixModel",
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
showModal: false,
|
||||
current: "", //当前选择的模块
|
||||
picModelFlag: false,
|
||||
selectedData: "", //选中的数据
|
||||
goodsIndex: 0, // 商品索引
|
||||
align: ""
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
|
|
@ -27,26 +183,128 @@ export default {
|
|||
},
|
||||
components: {
|
||||
left,
|
||||
right
|
||||
right,
|
||||
ossManage
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mix-model{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
@import "./setup-box.scss";
|
||||
|
||||
.link-src {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.left-card,.right-card{
|
||||
|
||||
.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;
|
||||
|
||||
&: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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@
|
|||
<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">
|
||||
|
|
@ -66,7 +73,18 @@ export default {
|
|||
}
|
||||
}
|
||||
.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;
|
||||
|
|
@ -76,16 +94,15 @@ export default {
|
|||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
height: 119px;
|
||||
justify-content: center;
|
||||
width:50%;
|
||||
height: 85px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.left-side {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div>
|
||||
<div class="badge-box flex">
|
||||
<div class="badge">
|
||||
{{data.options.left.data.badge}}
|
||||
{{data.options.left.data.badge.label}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
|
|
@ -75,6 +75,7 @@ export default {
|
|||
}
|
||||
}
|
||||
.badge-box{
|
||||
|
||||
justify-content:right;
|
||||
}
|
||||
.goods-list{
|
||||
|
|
|
|||
Loading…
Reference in New Issue