tradeScreen/src/view/commodity.vue

<template>
    <div class="box">
        <div class="img-cls">
            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
            <div class="content">
                <div class="btns" style="position: absolute;">
                    <!-- <div class="btn" @click="ShwostoreType = true">商品分类</div>
                    <div class="btn" @click="ShwostoreType = false">商品管理
                    </div> -->
                    <!-- <div class="btn">啊实打实</div> -->
                    <img src="/static/a/btn.png" style="width: 8vw;height: 4vh;" alt="">
                    <img src="/static/a/btn2.png" style="width: 8vw;height: 4vh;" alt="">


                    <div  style="position: relative;color: white;">         
                        <img src="/static/a/bg.png" style="width: 8vw;height: 4vh;position: absolute;" alt="">
                        
                       
                    <div style="position: relative;">aniu</div>
                        
                    
                    
                    
                    
                    </div>
                </div>
                <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
                    v-if="!ShwostoreType">
                    <div class="manageBtn">出售中商品</div>
                    <div class="manageBtn">仓库中商品</div>
                    <div class="manageBtn">待审核商品</div>
                    <div class="manageBtn">审核未通过商品</div>
                </div>
                <div class="table" v-if="ShwostoreType">
                    <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
                </div>
                <div class="table" v-else>
                    <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"

const tableClick = (e) => {

    // console.log(i)

    if (e.ceil) {
        if (e.columnIndex == 1) {

            let tag = document.getElementById(`zmj${e.rowIndex}`)
            let tag2 = document.getElementById(`lj${e.rowIndex}`)
            tag.style.display = 'none'
            tag2.style.display = 'block'
        }
        else {
            let tag = document.getElementsByClassName(`zmj`)
            let tag2 = document.getElementsByClassName(`lj`)
            for (let i = 0; i < tag.length; i++) {
                tag[i].style.display = 'block'
                tag2[i].style.display = 'none'
            }
        }

    }

}

const ShwostoreType = ref(true)

const hdClick = (b) => {
    console.log(b)
}

const a = (aaa) => {
    if (aaa == configs2) {
        for (let i = 0; i < 10; i++) {
            if (i % 2 == 0) {
                aaa.data.push(
                    [
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    ]
                )
            } else {
                aaa.data.push(
                    [
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    ]


                )
            }


        }
    }

    else {
        for (let i = 0; i < 10; i++) {
            if (i % 2 == 0) {
                aaa.data.push(
                    [
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' > <div id='zmj${i}' class='zmj'> 排序${i}</div>  <div id='lj${i}' class='lj' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,

                    ]
                )
            } else {
                aaa.data.push(
                    [
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;' > <div id='zmj${i}' class='zmj'> 排序${i}</div>  <div class='lj' id='lj${i}' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,

                    ]



                )
            }


        }
    }


}
const configs = reactive({
    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
    oddRowBGC: '',
    evenRowBGC: "",
    rowNum: 20,
    header: [
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>排序</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类名称</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类图标</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否显示</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否推荐</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
    ],
    data: [
    ]
})
// 商品管理
const configs2 = reactive({
    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
    oddRowBGC: '',
    evenRowBGC: "",
    rowNum: 20,
    header: [
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品图</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品名称</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品售价</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>平台分类</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>销量</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>库存</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐级别</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>更新时间</div>`,
    ],
    data: [
    ]
})
onMounted(() => {
    a(configs2)
    a(configs)
})
</script>

<style lang="scss" scoped>
.box {
    margin-top: 3vh;
    width: 100vw;
    height: 90vh;
    position: relative;

    .img-cls {

        width: 99%;
        height: 90vh;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // background-color: #fff;
        box-sizing: border-box;

        .content {
            width: 100%;
            height: 100%;
            padding: 2vw;
        }

    }

    .btns {
        display: flex;
        cursor: pointer;

        .btn {
            color: white;
            // border: 1px solid #BF6D5D;
            padding: 3px 10px;
            border-radius: 20px;
            margin-right: 10px;
            position: relative;
            // background-image: url('');
            // background-size: cover;
        }
    }

    .table {
        width: 100%;
        height: 75vh;
        margin-top: 5vh;
    }
}

.manageBtn {
    padding: 2px 10px;
    border: 1px solid #6377C8;
    border-radius: 20px;
    margin-right: 10px;
}

:deep(.ceil) {
    padding: 0 !important;
    margin-bottom: 5px;
    margin-right: 2px;
}

:deep(.header-item) {
    padding: 0 !important;
}


.sjx {}

.row {}
</style>