trike-datav/src/components/Businesses.vue

<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
import paging from "./paging.vue"
import mitt from "@/utils/mitt"
const route = useRouter()

const ShwostoreType = ref(false)
const test = () => {
  console.log(6)
}

const isShow = ref(false);

const hdClick = (e) => {
  // console.log(e)
  if (e.columnIndex == 10) {
    // alert(45)
    route.replace('/storeLogin')
  }


}
const a = (aaa) => {
  for (let i = 0; i < 100; i++) {
    if (i % 2 == 0) {
      aaa.data.push(
        [
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);' >排sd序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
        ]
      )
    } else {
      aaa.data.push(
        [
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排sd序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</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(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单编号</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>店铺名称</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>下单时间</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单状态</div>`,
    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>配送人员</div>`,
  ],
  data: [
  ]
})
onMounted(() => {
  a(configs);
  mitt.on('showBusinesses', () => {
    isShow.value = !isShow.value;
  })
})
</script>

<template>
  <transition name="fade">
    <div class="bus" v-if="isShow">
      <div class="c-list-box">
        <div class="c-l-top">
          <div class="title">订单列表</div>
          <div class="close" @click="isShow = false">关闭</div>
        </div>
        <dv-scroll-board
          :config="configs"
          @click="hdClick"
          style="width: 100%; height: 92%"
        />
        <div class="c-l-bottom">
          <paging></paging>
        </div>
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.bus {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-list-box {
  width: 94%;
  height: 94%;
  position: relative;
  background-image: url(../assets/img/list-box.png);
  background-size: 100% 100%;
  background-color: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  .c-l-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 1.2rem;
      font-family: "ifonts";
    }
    .close {
      font-size: 0.8rem;
      padding: 0.1rem 1.5rem;
      background-color: rgba(0, 156, 255, 0.3);
      border: 0.07rem solid rgba(91, 219, 246, 1);
      border-radius: 0.2rem;
      cursor: pointer;
    }
  }
  .c-l-bottom {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

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

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>