316 lines
13 KiB
Vue
316 lines
13 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="img-cls">
|
|
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
|
<div class="content">
|
|
<div class="btns">
|
|
<div class="btn" @click="test">订单列表</div>
|
|
<div class="btn" @click="test">退款单</div>
|
|
<div class="btn" @click="test">核销订单</div>
|
|
|
|
|
|
</div>
|
|
<div class="btns">
|
|
<div class="btn" @click="test">订单列表</div>
|
|
<div class="btn" @click="test">退款单</div>
|
|
<div class="btn" @click="test">核销订单</div>
|
|
</div>
|
|
|
|
<div class="table">
|
|
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
// 102B3
|
|
import { ref, reactive, onMounted } from "vue"
|
|
import { useRouter } from 'vue-router'
|
|
const route = useRouter()
|
|
|
|
const ShwostoreType = ref(false)
|
|
const test = () => {
|
|
console.log(6)
|
|
}
|
|
|
|
const tableHdClick = (e) => {
|
|
|
|
|
|
if (e.ceil) {
|
|
if (e.columnIndex == 0) {
|
|
// console.log(e.rowIndex)
|
|
let tag = document.getElementById(`order${e.rowIndex}`)
|
|
let tag2 = document.getElementById(`card${e.rowIndex}`)
|
|
tag.style.display = 'none'
|
|
tag2.style.display = 'block'
|
|
console.log(tag.style.display)
|
|
console.log(tag2.style.display)
|
|
|
|
} else {
|
|
let tag = document.getElementsByClassName(`order`)
|
|
let tag2 = document.getElementsByClassName(`card`)
|
|
for (let i = 0; i < tag.length; i++) {
|
|
tag[i].style.display = 'block'
|
|
tag2[i].style.display = 'none'
|
|
}
|
|
|
|
console.log(tag[0].style.display)
|
|
console.log(tag2[0].style.display)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
const a = (aaa) => {
|
|
for (let i = 0; i < 50; i++) {
|
|
if (i % 2 == 0) {
|
|
aaa.data.push(
|
|
[
|
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;cursor: pointer;'>
|
|
<div class='order' id='order${i}' style='position:relative'>
|
|
<div style=' width: 0;
|
|
height: 0;
|
|
border-left: 0.5vh solid transparent;
|
|
border-right: 0.5vh solid transparent;
|
|
border-top: 0.5vh solid #C25941;
|
|
position: absolute;
|
|
top:50%;
|
|
left:0
|
|
'>
|
|
</div> 4554545</div>
|
|
|
|
<div class='card' id='card${i}'
|
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
|
<span>总单号：</span>
|
|
<span>35356565656565</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>下单时间</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>商品总价</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>订单类型</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>用户备注</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>商家备注</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</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>`,
|
|
]
|
|
)
|
|
} else {
|
|
aaa.data.push(
|
|
[
|
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;cursor: pointer;'>
|
|
<div class='order' id='order${i}' style='position:relative'>
|
|
<div style=' width: 0;
|
|
height: 0;
|
|
border-left: 0.5vh solid transparent;
|
|
border-right: 0.5vh solid transparent;
|
|
border-top: 0.5vh solid #C25941;
|
|
position: absolute;
|
|
top:50%;
|
|
left:0
|
|
'>
|
|
</div> 1111</div>
|
|
|
|
<div class='card' id='card${i}'
|
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
|
<span>总单号：</span>
|
|
<span>35356565656565</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>下单时间</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>商品总价</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>订单类型</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>用户备注</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
|
<span>商家备注</span>
|
|
<span>2023.11.214</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</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>`,
|
|
]
|
|
|
|
|
|
)
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
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>`,
|
|
`<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(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;
|
|
// cursor: pointer;
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 2vw;
|
|
}
|
|
|
|
}
|
|
|
|
.btns {
|
|
display: flex;
|
|
|
|
.btn {
|
|
color: white;
|
|
border: 1px solid #BF6D5D;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
height: 75vh;
|
|
margin-top: 2vh;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {}
|
|
</style> |