web/manager/src/views/lili-floor-renovation/modelList/notEnough.vue

<template>
    <div class="not-enough">
        <ul class="nav-bar setup-content">
            <li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
                <p>{{item.title}}</p>
                <p>{{item.desc}}</p>
            </li>
            <div class="setup-box" style="width:100px;left:1100px;">
                <div>
                    <Button size="small" @click.stop="handleSelectModel">编辑</Button>
                </div>
            </div>
        </ul>
        <div class="content" v-if="showContent">
            <div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
                <img :src="item.img" width="210" height="210" :alt="item.name">
                <p>{{item.name}}</p>
                <p>
                    <span>{{item.price | unitPrice('￥')}}</span> 
                    <!-- <span>{{item.price | unitPrice('￥')}}</span> -->
                </p>
                <div class="setup-box">
                    <div>
                        <Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
                    </div>
                </div>
            </div>
        </div>
        <Modal
            v-model="showModal"
            title="装修"
            draggable
            width="800"
            :z-index="100"
            mask-closable="false"
            :on-ok="sureDecorate"
            :on-cancel="cancelDecorate"
            >
            <div class="modal-tab-bar">
                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
                <table cellspacing="0">
                    <thead>
                        <tr>
                            <th width="250">主标题</th>
                            <th width="250">描述</th>
                            <th width="250">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in conData.options.navList" :key="index">
                            <td><Input v-model="item.title" /></td>
                            <td><Input v-model="item.desc" /></td>
                            <!-- <td><Input v-model="item.sort"/></td> -->
                            <td v-if="index!=0">
                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </Modal>
        <!-- 选择商品。链接 -->
        <liliDialog
            ref="liliDialog"
            @selectedLink="selectedLink"
            @selectedGoodsData="selectedGoodsData"
        ></liliDialog>
    </div>
</template>
<script>
export default {
    props:{
        data:{
            type: Object,
            default: null
        }
    },
    data() {
        return {
            currentIndex:0, // 当前商品index
            conData:this.data, // 当前数据
            selected:{}, // 已选数据
            showModal:false, // modal显隐
            showContent:true, // 选择后刷新数据用
        }
    },
    watch:{
        data:function(val){
            this.conData = val
        },
        conData:function(val){
            this.$emit('content',val)
        }
    },
    mounted() {

    },
    methods:{
        changeCurr(index){
            this.currentIndex = index;
        },
        handleSelectModel (item,type) {
            this.selected = item;
            this.showModal = true
        },
        handleSelectLink(item,index) { // 调起选择链接弹窗
            this.$refs.liliDialog.open('link')
        },
        handleSelectGoods(item) { // 调起选择链接弹窗
            if(item) this.selected = item;
            this.$refs.liliDialog.open('goods')
        },
        selectedLink(val) {
           this.selected.url = this.$options.filters.formatLinkType(val);
        },
        selectedGoodsData(val){
            console.log(val)
            let goods = val[0]
            this.selected.img = goods.thumbnail
            this.selected.price = goods.price
            this.selected.name = goods.goodsName
            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
        },
        handleDelNav(index){ // 删除导航
            this.conData.options.navList.splice(index,1)
            this.conData.options.list.splice(index,1)
        },
        handleAddNav(){ // 添加导航
            this.conData.options.navList.push(
                {title:'',desc:''}
            )
            this.conData.options.list.push(
                [{ img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                { img:'', name:'', price:0, url:'' },
                ],
            )
            this.showContent = false
            this.$nextTick(()=>{
                this.showContent = true;
            })
        },
    }
}
</script>
<style lang="scss" scoped>
@import './setup-box.scss';
.nav-bar{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    background-color: rgb(218, 217, 217);
    height: 60px;
    align-items: center;
    position: relative;
    li{
        padding: 0 30px;
        text-align: center;
        p:nth-child(1){
            font-size: 16px;
            border-radius: 50px;
            padding: 0 7px;
        }

        p:nth-child(2){
            font-size: 14px;
            color: #999;
        }

        &:hover{
            p{
                color: $theme_color;
            }
            cursor: pointer;
        }
        border-right: 1px solid #eee;
        
    }
    li:last-of-type{
        border: none;
    }
   
    .curr{
        p:nth-child(1){
            background-color: $theme_color;
            
            color: #fff;
        }
        p:nth-child(2){
            color: $theme_color;
        }
    }
}

.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    >div{
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #eee;
        margin-bottom: 10px;
        p:nth-of-type(1){
            overflow: hidden;
            width: 210px;
            white-space: nowrap;
            text-overflow:ellipsis;
            margin: 10px 0 5px 0;
        }
        p:nth-of-type(2){
            color: $theme_color;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span:nth-child(2){
                text-decoration: line-through;
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>