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"
import { orderList } from "@/api/index.js"
import { useAppStore } from "@/store/app.js"

const appStore = useAppStore();

const route = useRouter()

const isShow = ref(false);

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

const initData = (data) => {
  let arr = [];
  for (let i = 0; i < data.length; i++) {
    let calss = 'div';
    if (i % 2 != 0) {
      calss = 'div div2'
    }
    arr.push(
      [
        `<div class="${calss}">${data[i].order_sn || '-'}</div>`,
        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
        `<div class="${calss}">${data[i].user_address || '-'}</div>`,
        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
        `<div class="${calss}">${data[i].mer_name || '-'}</div>`,
        `<div class="${calss}">${data[i].create_time || '-'}</div>`,
        `<div class="${calss}">${data[i].status || '-'}</div>`,
        `<div class="${calss}">${data[i].courier || '-'}</div>`,
      ]
    )
  }
  configs.data = arr;
  scrollBoardRef.value?.updateRows(configs.data);
}
const scrollBoardRef = ref(null);
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: [
  ]
})

const pages = ref({
  areaCode: appStore.address.areaCode,
  streetCode: appStore.address.streetCode,
  page: 1,
  limit: 30,
  total: 0,
  pageAll: 0,
  type: '', //类型 1-待取货, 2-配送中, 3-已完成
})

const loadOrderList = (pramas) => {
  orderList(pramas).then((res) => {
    initData(res.data.currOrderList);
    pages.value.total = res.data.currOrderCount;
    pages.value.pageAll = Math.ceil(res.data.currOrderCount / pages.value.limit);
  }).catch(err => {
    console.error(err);
  })
}

onMounted(() => {
  // loadOrderList();
  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
          ref="scrollBoardRef"
          :config="configs"
          @click="hdClick"
          style="width: 100%; height: 92%"
        />
        <div class="c-l-bottom">
          <paging :page="pages" @loadList="loadOrderList"></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(.div) {
  width: 100%;
  text-align: center;
  height: 100%;
  color: aliceblue;
  background: rgba(91, 219, 246, 0.2);
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

:deep(.div2) {
  background: rgba(0, 168, 255, 0.16);
}

:deep(.ceil) {
  padding: 0 !important;
  margin-bottom: 0.3rem;
  margin-right: 0.1rem;
}

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

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