feat: ✨ 楼层装修新增绑定分类功能
学习很差啦
parent
17a4131bf1
commit
bb93be2fb1
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Modal :styles="{ top: '120px' }" width="1160" z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
|
||||
<Modal :styles="{ top: '120px' }" width="1160" :z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
|
||||
<template v-if="flag">
|
||||
<goodsDialog @selected="(val) => {goodsData = val;}"
|
||||
v-if="goodsFlag" ref="goodsDialog" :selectedWay='goodsData'/>
|
||||
|
|
|
|||
|
|
@ -114,5 +114,6 @@ export default {
|
|||
}
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -521,21 +521,25 @@ export const modelData = [
|
|||
title: "精选",
|
||||
desc: "电子推荐",
|
||||
___index: 0,
|
||||
bindCategory:""
|
||||
},
|
||||
{
|
||||
title: "实惠",
|
||||
desc: "便宜好货",
|
||||
___index: 1,
|
||||
bindCategory:""
|
||||
},
|
||||
{
|
||||
title: "进口",
|
||||
desc: "国际自营",
|
||||
___index: 2,
|
||||
bindCategory:""
|
||||
},
|
||||
{
|
||||
title: "推荐",
|
||||
desc: "喂奶推荐",
|
||||
___index: 3,
|
||||
bindCategory:""
|
||||
}
|
||||
],
|
||||
listWay: [
|
||||
|
|
@ -561,6 +565,7 @@ export const modelData = [
|
|||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: "notice",
|
||||
name: "公告",
|
||||
|
|
|
|||
|
|
@ -6,8 +6,18 @@
|
|||
.decorate-view-link {
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
flex:8;
|
||||
color: #999;
|
||||
}
|
||||
.decorate-view-btn{
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>button{
|
||||
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.decorate-view-style {
|
||||
border: 1px solid #ededed;
|
||||
|
|
@ -97,6 +107,7 @@
|
|||
|
||||
.decorate-view-title {
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.decorate-item {
|
||||
|
|
@ -161,3 +172,25 @@
|
|||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.title-item{
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding:10px 10px 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
>.title-btn{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.title-goodsName{
|
||||
/* 适用于webkit内核和移动端 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.title-tooltip{
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="decorate">
|
||||
<div class="decorate-title">
|
||||
{{ res.name }}
|
||||
|
||||
<Button
|
||||
style="margin-left: 20px"
|
||||
size="small"
|
||||
|
|
@ -25,6 +26,12 @@
|
|||
>选择促销活动</Button
|
||||
>
|
||||
</div>
|
||||
<Alert type="warning" v-if="res.name == '商品分类'">装修提示
|
||||
<template slot="desc">
|
||||
<div style="color:red"> 如果当前装修内容不是最后一项且绑定为分类，则会默认展示当前分类的100条商品内容。</div>
|
||||
<div style="color:red"> 如果当前装修内容是最后一项且绑定为分类，则会默认会根据当前分类触底加载</div>
|
||||
</template>
|
||||
</Alert>
|
||||
|
||||
<!-- 右侧显示抽屉 -->
|
||||
<Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
|
||||
|
|
@ -110,12 +117,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">绑定商品</div>
|
||||
<div class="decorate-view-title">绑定</div>
|
||||
<div class="decorate-view-link">
|
||||
<div
|
||||
class="decorate-view-link"
|
||||
|
||||
v-if="res.options.list[0].listWay.length != 0"
|
||||
>
|
||||
<!-- 绑定商品选择器回调已选择的商品 -->
|
||||
|
||||
<div
|
||||
v-if="
|
||||
title_item.___index == bindGoods.___index ||
|
||||
|
|
@ -124,18 +133,53 @@
|
|||
v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
|
||||
.listWay"
|
||||
:key="bindGoodsIndex"
|
||||
class="title-item wes-2"
|
||||
>
|
||||
{{ bindGoods.title }},
|
||||
<Tooltip max-width="200" placement="left">
|
||||
<div slot="content" class="title-tooltip">
|
||||
{{ bindGoods.title }}
|
||||
</div>
|
||||
<div class="title-goodsName">
|
||||
{{ bindGoods.title }}
|
||||
</div>
|
||||
<div>
|
||||
</Tooltip>
|
||||
<div class="title-btn">
|
||||
<Button
|
||||
@click="bindGoodsId(title_item)"
|
||||
@click="
|
||||
slotGoods(
|
||||
res.options.list[0].listWay,
|
||||
title_item.___index,
|
||||
bindGoods,
|
||||
'up'
|
||||
)
|
||||
"
|
||||
style="margin-right: 10px"
|
||||
size="small"
|
||||
>上移</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 显示绑定分类 -->
|
||||
<div v-if="title_item.bindCategory" >
|
||||
绑定分类为：{{ title_item.bindCategory.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorate-view-btn">
|
||||
<Button
|
||||
@click="bindGoodsId(title_item,title_index)"
|
||||
size="small"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择商品</Button
|
||||
>
|
||||
<Button
|
||||
@click="bindGoodsCategory(title_index)"
|
||||
size="small"
|
||||
|
||||
style='margin-top:20px'
|
||||
>选择分类</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -339,9 +383,11 @@
|
|||
{{
|
||||
ways.find((e) => {
|
||||
return item.url.___type == e.name;
|
||||
}) ? ways.find((e) => {
|
||||
})
|
||||
? ways.find((e) => {
|
||||
return item.url.___type == e.name;
|
||||
}).title : '发现'
|
||||
}).title
|
||||
: "发现"
|
||||
}}
|
||||
-
|
||||
<!-- 当选择完链接之后的专题名称 -->
|
||||
|
|
@ -428,6 +474,10 @@
|
|||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
|
||||
<Modal width='800px' title="选择分类" v-model="enableSelectCategory">
|
||||
<categoryTemplate v-if="enableSelectCategory" @selected="confirmCategory" />
|
||||
</Modal>
|
||||
|
||||
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
|
||||
|
||||
<Modal width="1200px" v-model="picModelFlag">
|
||||
|
|
@ -440,10 +490,12 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
|
|||
import { modelData } from "./config";
|
||||
import hotzone from "@/components/hotzone";
|
||||
import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
|
||||
import categoryTemplate from "@/components/lili-dialog/template/category"; // 选择链接的类型
|
||||
export default {
|
||||
components: {
|
||||
ossManage,
|
||||
hotzone,
|
||||
categoryTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -460,6 +512,8 @@ export default {
|
|||
selectedGoods: "", // 已选商品
|
||||
selectedLinks: "", // 已选链接
|
||||
modelList: "", // 装修列表
|
||||
enableSelectCategory:false, //商品是否绑定分类
|
||||
goodsSelectedIndex:0, //绑定商品分类的索引
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -470,6 +524,59 @@ export default {
|
|||
},
|
||||
props: ["res"],
|
||||
methods: {
|
||||
// 选择分类
|
||||
confirmCategory(val){
|
||||
let data = {...this.res.options.list[0].titleWay[this.goodsSelectedIndex]}
|
||||
let callback = {
|
||||
id:val[0].id,
|
||||
name:val[0].name,
|
||||
categoryIdWay:val[0].id
|
||||
};
|
||||
data = {
|
||||
...data,
|
||||
bindCategory:callback
|
||||
}
|
||||
this.res.options.list[0].listWay = this.res.options.list[0].listWay.filter(item=>{
|
||||
return item.___index != this.goodsSelectedIndex
|
||||
})
|
||||
this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data
|
||||
|
||||
console.log( this.res.options.list[0])
|
||||
},
|
||||
// 商品排序
|
||||
slotGoods(list, key, val) {
|
||||
const newVal = [];
|
||||
let newValIndex = 0;
|
||||
// 给当前点击的商品分组
|
||||
list.forEach((item, index) => {
|
||||
if (item.___index == key) {
|
||||
newVal.push(item);
|
||||
}
|
||||
});
|
||||
// 获得当前点击商品的索引
|
||||
newVal.forEach((item, index) => {
|
||||
if (item.id == val.id) {
|
||||
newValIndex = index;
|
||||
}
|
||||
});
|
||||
// 进行商品排序
|
||||
this.upData(newVal, newValIndex);
|
||||
if (list.length == newVal.length) {
|
||||
list = newVal;
|
||||
} else {
|
||||
let newList;
|
||||
newVal.forEach((item, index) => {
|
||||
newList = list.filter((child) => {
|
||||
return child.id != item.id && child.___index != key;
|
||||
});
|
||||
});
|
||||
list = [...newList, ...newVal];
|
||||
}
|
||||
|
||||
this.$set(this.res.options.list[0], "listWay", list);
|
||||
},
|
||||
|
||||
// 轮播图排序
|
||||
slotBanner(val, key, index, down) {
|
||||
console.log(val);
|
||||
if (down == "down") {
|
||||
|
|
@ -489,7 +596,7 @@ export default {
|
|||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
return arr;
|
||||
},
|
||||
downData(arr,index) {
|
||||
downData(arr, index) {
|
||||
let newArr = [];
|
||||
if (arr.length > 1 && index !== arr.length - 1) {
|
||||
newArr = this.swapItems(arr, index, index + 1);
|
||||
|
|
@ -534,13 +641,22 @@ export default {
|
|||
};
|
||||
});
|
||||
this.res.options.list[0].listWay.push(...data);
|
||||
// 清除已经绑定的分类
|
||||
this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory = ""
|
||||
this.linkType = "";
|
||||
},
|
||||
// 绑定商品
|
||||
bindGoodsId(val) {
|
||||
bindGoodsId(val,index) {
|
||||
this.selectedGoods = val;
|
||||
this.goodsSelectedIndex = index
|
||||
this.liliDialogFlag(true);
|
||||
},
|
||||
// 绑定分类
|
||||
bindGoodsCategory(index,key){
|
||||
this.enableSelectCategory = true
|
||||
this.goodsSelectedIndex = index
|
||||
|
||||
},
|
||||
// 点击抽屉
|
||||
clickDrawer(item, index) {
|
||||
this.$emit("handleDrawer", item);
|
||||
|
|
|
|||
|
|
@ -97,13 +97,13 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
// params: {
|
||||
// handler(val) {
|
||||
// // this.pageNumber++;
|
||||
// this.init();
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
params: {
|
||||
handler(val) {
|
||||
// this.pageNumber++;
|
||||
this.init();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
|
|
|
|||
Loading…
Reference in New Issue