editor_page/src/components/setting/settingProduct.vue

<template>
    <div class="product-content panel">
        <div class="panel-header">
            <h3 class="header-title">{{ content.name }}设置</h3>
            <a class="el-icon-close close-btn" @click="closeRightTemplateHandle"></a>
        </div>
        <div class="tab">
            <span v-for="(item, index) in 3" :key="index" @click="changeLayoutNum(index)"
                :class="{ active: index + 1 == content.value.layoutNum }"><i class="el-icon-s-data"></i> {{ index + 1
                }}</span>
        </div>
        <p class="tit">商品列表</p>
        <el-button class="add-btn" type="primary" @click="toggleSearchPopup"><i class="el-icon-plus"></i> 添加商品
        </el-button>
        <template v-if="content.value.productList && content.value.productList.length > 0">
            <ul class="list" v-if="content.value.productList && content.value.productList.length > 0">
                <div v-for="(item, index) in content.value.productList" :key="index" style="display: flex;">
                    <li class="item" style="margin-right: 10px !important;">
                        <img :src="item.pic">
                        <i class="el-icon-error" @click="deleteItem(index)"></i>
                    </li>
                    <div style="flex: 1;min-width: 0;">
                        <div style="flex: 1;" class="tover">{{ item.title }}</div>
                        <div style="display: flex;margin-top: 10px;">
                            <div style="margin-right: 10px;">是否悬浮</div>
                            <el-switch v-model="item.isFixedNode" @change="fixedNodeChange($event,item)" :active-value="true" :inactive-value="false">
                        </el-switch>
                        </div>
                    </div>
                </div>
            </ul>
        </template>

        <div class="options">
            <el-form label-width="100px">
                <el-form-item label="划线价">
                    <el-switch v-model="content.value.showOriginalPrice" :active-value="true" :inactive-value="false"
                        @change="handleDate">
                    </el-switch>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog title="添加商品" :visible.sync="show" @close="close">
            <el-form label-width="100px">
                <el-form-item label="选择商品">
                    <el-select v-model="selectProduct" filterable remote reserve-keyword placeholder="请输入商品名称"
                        :remote-method="searchProductList" @change="addProduct" :loading="loading">
                        <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                            :value-key="item.productName" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 商品导入组件 -->
        <productManage v-if="productVisible" :on-success="chooseProductHandle">
        </productManage>
    </div>
</template>

<script>
import productManage from '@/components/productManage.vue'
export default {
    name: 'settingProduct',
    components: {
        productManage
    },
    props: ['data'],
    data() {
        return {
            content: JSON.parse(JSON.stringify(this.data)),
            list: {},
            productList: [],
            loading: false,
            show: false,

            selectItem: null,
            selectProduct: '',

            options: {
                originalPrice: '划线价',
                goodRatio: '好评率',
                volumeStr: '销量数'
            },
            loadingOption: false,

            productVisible: false
        }
    },
    mounted() {
    },
    // watch: {
    //     data: {
    //         deep: true,
    //         handler(val) {
    //             this.content = val;
    //         },
    //     },
    // },
    created() {
        this.content.value.isFixedNode = this.getFixedState()
    },
    methods: {
        handleDate() {
            this.$emit('updataContent', this.content)
        },
        closeRightTemplateHandle() {
            this.$emit('closeRightTemplateHandle', false)
        },

        // 改变商品排列数量
        changeLayoutNum(index) {
            this.content.value.layoutNum = index + 1
            this.handleDate()
        },

        deleteItem(index) {
            if(this.content.value.productList[index].isFixedNode)
                this.$parent.setFixedNodeContent(this.content,this.content.key,true)
            this.content.value.productList.splice(index, 1)
            this.handleDate()
        },
        // 搜索商品
        searchProductList(productName) {
            this.productList = productList
        },
        confirm() {
            this.content.value.productList.push(this.selectItem)
            this.close()
            this.handleDate()
        },
        // 打开商品添加弹框
        toggleSearchPopup() {
            this.productVisible = true
            // this.show = true
        },
        // 关闭商品添加弹框
        close() {
            this.show = false
            this.selectItem = null
            this.selectProduct = ''
        },
        addProduct(data) {
            this.selectItem = data
        },
        // 选择商品后的回调
        chooseProductHandle(val){
            this.productVisible = false
            val.forEach(item => {
                this.content.value.productList.push(item)
            });
            
            let map = new Map()
            this.content.value.productList =  this.content.value.productList.filter((item) => !map.has(item.id.toString()) && map.set(item.id.toString()))
            this.handleDate()
        },
        // 悬浮节点切换判断
        fixedNodeChange(val,pitem){
            console.log(val,pitem)
            let fixedNode = this.$parent.view.filter(item=> item.key=='fixedNode')
            if(fixedNode.length>0){
                console.log('已存在悬浮节点')
                if(val){
                    console.log('切换悬浮节点')
                    this.$confirm('当前已存在悬浮组件, 是否替换?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {

                            this.content.value.productList.map(item=>{item.isFixedNode = false})
                            pitem.isFixedNode = true

                            this.$parent.setFixedNodeContent(this.content,this.content.key)
                            this.content.value.isFixedNode = this.getFixedState()
                            this.handleDate()
                        }).catch(() => {
                            this.content.value.isFixedNode = this.getFixedState()
                        });
                }else{
                    this.content.value.productList.map(item=>{item.isFixedNode = false})

                    this.$parent.setFixedNodeContent(this.content,this.content.key,true)
                    this.content.value.isFixedNode = this.getFixedState()
                    this.handleDate()
                }
            }else{
                console.log('未存在悬浮节点')
                this.$parent.clickType(this.$parent.typeList.filter(item=> item.key=='fixedNode')[0])

                this.content.value.productList.map(item=>{item.isFixedNode = false})
                pitem.isFixedNode = true

                this.$parent.setFixedNodeContent(this.content,this.content.key)
                this.content.value.isFixedNode = this.getFixedState()
                this.handleDate()
            }
        },
        getFixedState(){
            let fixedNode = this.$parent.view.filter(item=> item.key=='fixedNode'&&item.value.type==this.content.key)
            if(fixedNode.length>0){
                for(var i=0;i<fixedNode.length;i++){
                    let item = fixedNode[i]
                    if(this.content.id==item.value.contentObj.id) {
                        this.content.value.productList.map(citem=>{
                            item.value.contentObj.value.productList.map(it=>{
                                if(it.id==citem.id) citem.isFixedNode = it.isFixedNode
                            })
                        })
                        return true
                    }
                }
            }else{
                this.content.value.productList.map(citem=>{
                    citem.isFixedNode = false
                })
                this.content = JSON.parse(JSON.stringify(this.content))
                return false
            }
        },
    }
}

</script>

<style lang="scss" scoped>
.panel {
    padding: 0 10px;
}

.panel .panel-header {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;
    z-index: 10;
}

.panel .panel-header .header-title {
    padding-left: 5px;
    font-size: 14px;
    color: #29304e;
    position: relative;
}

.panel .panel-header .header-title:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #1890ff;
    opacity: 1;
    border-radius: 2px;
}

.panel .panel-header .close-btn {
    position: absolute;
    top: 12px;
    right: 0;
    border: none;
    outline: none;
    cursor: pointer;
    color: #999;
    font-weight: 700;
}

.product-content {
    padding: 0 15px;
}

.product-content h2 {
    font-size: 16px;
    color: #333;
}

.product-content .tab {
    display: flex;
    justify-content: space-around;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 10px;
}

.product-content .tab span {
    width: 33.33%;
    text-align: center;
    font-size: 14px;
    color: #666;
    display: block;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
}

.product-content .tab span.active {
    color: #fff;
    background: #409eff;
    border-radius: 2px;
}

.product-content .tab span:nth-of-type(2) {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


.product-content .tit {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin: 18px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}

.product-content .add-btn {
    width: calc(100% - 30px);
    height: 34px;
    line-height: 34px;
    padding: 0;
    font-size: 12px;
    margin-left: 15px;
    margin-top: 5px;
}

.product-content .list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 12px;
    margin: 0;
}

.product-content .list .item {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    margin: 4px;
    position: relative;
    transition: all .3s;
    list-style: none;
}

.product-content .list .item img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.product-content .list .item i {
    position: absolute;
    top: -6px;
    right: -6px;
    cursor: pointer;
    opacity: 0;
    transition: all .3s;
    color: red;
}

.product-content .list .item::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    opacity: 0;
    transition: all .3s;
}

.product-content .list .item:hover {
    cursor: grab;
}

.product-content .list .item:hover::before,
.product-content .list .item:hover i {
    opacity: 1;
}

.product-content .options {
    padding: 15px;
    border-radius: 6px;
}

.product-content .options .el-form {
    background: #f7f8f9;
    overflow: hidden;
    padding: 10px 0;
}

.product-content .options .el-form .el-form-item {
    margin: 0;
}

.product-content .options .el-form .el-form-item label {
    font-size: 12px;
}

.tover{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
</style>