tradeScreen/src/view/commodity.vue
2023-11-29 00:27:26 +08:00

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>