jdt-user/src/pages/admin/order_manage/index.vue

<template>
  <view>
    <view class="Card">
      <view>全部订单</view>
      <view class="orderinfo">
        <view class="info" @click="toListPage(0)">
          <view class="num">{{ orderInfo?.count?.A || 0 }}</view>
          <view class="sub">全部</view>
        </view>
        <view class="info" @click="toListPage(1)">
          <view class="num">{{ orderInfo?.count?.B || 0 }}</view>
          <view class="sub">待付款</view>
        </view>
        <view class="info" @click="toListPage(2)">
          <view class="num">{{ orderInfo?.count?.C || 0 }}</view>
          <view class="sub">待核销</view>
        </view>
        <view class="info" @click="toListPage(3)">
          <view class="num">{{ orderInfo?.count?.D || 0 }}</view>
          <view class="sub">已核销</view>
        </view>
        <view class="info" @click="toListPage(4)">
          <view class="num">{{ orderInfo?.count?.F || 0 }}</view>
          <view class="sub">已过期</view>
        </view>
      </view>
    </view>
    <view class="Card">
      <view class="top"
        ><text class="iconfont icon-shujutongji icon"></text
        ><text>数据统计</text></view
      >
      <view class="gridBox">
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=price&time=today`"
        >
          <view class="title">{{ orderInfo?.total?.TodayNumber || 0 }}</view>
          <view class="sub">今日成交额</view>
        </navigator>
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=price&time=yesterday`"
        >
          <view class="title">{{
            orderInfo?.total?.YesterdayNumber || 0
          }}</view>
          <view class="sub">昨日成交额</view>
        </navigator>
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=price&time=month`"
        >
          <view class="title">{{ orderInfo?.total?.MonthNumber || 0 }}</view>
          <view class="sub">本月成交额</view>
        </navigator>
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=order&time=today`"
        >
          <view class="title">{{ orderInfo?.total?.TodayOrder || 0 }}</view>
          <view class="sub">今日订单数</view>
        </navigator>
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=order&time=yesterday`"
        >
          <view class="title">{{ orderInfo?.total?.YesterdayOrder || 0 }}</view>
          <view class="sub">昨日订单数</view>
        </navigator>
        <navigator
          class="item"
          hover-class="none"
          :url="`/pages/admin/statistics/index?type=order&time=month`"
        >
          <view class="title">{{ orderInfo?.total?.MonthOrder || 0 }}</view>
          <view class="sub">本月订单数</view>
        </navigator>
      </view>
    </view>
    <view class="Card">
      <view class="top"
        ><text class="iconfont icon-xiangxishuju icon"></text
        ><text>详细数据</text></view
      >
      <view v-if="orderInfo?.list?.length > 0">
        <nut-table
          :bordered="true"
          class="table"
          :columns="columns"
          :data="orderInfo?.list"
        ></nut-table>
      </view>
      <nut-empty v-else description="暂无订单数据"></nut-empty>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { h, ref } from "vue";
import Taro from "@tarojs/taro";
import { orderStatistics } from "../../../api/admin";

Taro.useLoad(() => {
  getData();
});

const orderInfo = ref<any>({});

const columns = ref([
  {
    title: "日期",
    key: "Date",
    align: "center",
  },
  {
    title: "订单数",
    key: "TotalCount",
    align: "center",
  },
  {
    title: "交易额",
    key: "NumberSum",
    align: "center",
    render: (row) => {
      return h(
        "view",
        {
          style: {
            color: "red",
          },
        },
        row.NumberSum
      );
    },
  },
]);

const getData = async () => {
  const user_info = Taro.getStorageSync("userInfo");
  const res = await orderStatistics({
    bid: user_info.data.bid,
  });
  orderInfo.value = res.data;
};

const toListPage = (index: number) => {
  Taro.navigateTo({
    url: `/pages/admin/order_manage/list/index?type=${index}`,
  });
};
</script>

<style lang="scss">
.Card {
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  margin: 10px auto;
  padding: 25px;

  .top {
    display: flex;
    align-items: center;
    text {
      margin-right: 5px;
    }
  }
}

.icon {
  color: red;
}

.gridBox {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  grid-gap: 10px;
  justify-content: center;
  text-align: center;

  .item {
    margin-top: 50px;
    .title {
      font-size: 50px;
    }
    .sub {
      font-size: 25px;
      color: #999;
    }
  }
}

.table {
  margin-top: 10px;
}

.orderinfo {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  .info {
    text-align: center;

    .num {
      font-size: 40px;
      color: red;
    }

    .sub {
      font-size: 25px;
      color: #999;
    }
  }
}
</style>