<template>
|
<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('default')"
|
>选择图片
|
</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.url"
|
/>
|
<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 v-if="current.model == 'brand'" style="margin-bottom: 10px">
|
<Input disabled 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"
|
:initialize="picModelFlag"
|
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 {
|
showModal: false,
|
current: "", //当前选择的模块
|
picModelFlag: false,
|
selectedData: "", //选中的数据
|
goodsIndex: 0, // 商品索引
|
align: "",
|
defaultCallbackImageType: "",
|
};
|
},
|
props: {
|
data: {
|
type: Object,
|
default: {},
|
},
|
},
|
components: {
|
left,
|
right,
|
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 == "default") {
|
console.log(this.current.data.image);
|
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) {
|
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) {
|
if (this.selectedData != "list") {
|
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
|
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);
|
}
|
},
|
/*
|
* 点击不同模块进行编辑
|
* 判断也很简单，就是第一个第二个模块进行判断
|
*
|
* */
|
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">
|
@import "./setup-box.scss";
|
|
.link-src {
|
margin: 10px 0;
|
}
|
|
.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>
|
