275 lines
12 KiB
Vue
275 lines
12 KiB
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> |