merchapp/java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue

<template>
  <view class="view-container">
    <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
    <view class="item-content">
      <view class="title"> 待办事处 </view>
      <view class="item-list">
        <view class="item">
          <view class="item-value">{{ dashboardInfo.return.review_num }}</view>
          <view class="item-title">待审核退货</view>
        </view>
        <view class="item">
          <view class="item-value">{{ dashboardInfo.product.off_num }}</view>
          <view class="item-title">违规商品</view>
        </view>
        <view class="item">
          <view class="item-value">{{
            dashboardInfo.product.product_warning_num || 0
          }}</view>
          <view class="item-title">待补货</view>
        </view>
      </view>
    </view>
    <view class="order-content">
      <view class="title"> 销量统计 </view>
      <view class="order-list">
        <view class="order-item">
          <view class="order-title">今日销售额</view>
          <view class="order-item-num">{{ orderSalesAmoutInfo.today }}</view>
          <view class="order-bottom"
            >昨日
            {{
              orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
                ? "+"
                : "-"
            }}
            {{
              orderSalesAmoutInfo.daym2m == null
                ? "-"
                : Number(orderSalesAmoutInfo.daym2m * 100).toFixed(0) + "%"
            }}</view
          >
        </view>
        <view class="order-item order-item-1">
          <view class="order-title">订单量</view>
          <view class="order-item-num">{{ orderNumInfo.today }}</view>
          <view class="order-bottom"
            >昨日{{
              orderNumInfo.daym2m && orderNumInfo.daym2m > 0 ? "+" : "-"
            }}
            {{
              orderNumInfo.daym2m == null
                ? "-"
                : Number(orderNumInfo.daym2m * 100).toFixed(0) + "%"
            }}</view
          >
        </view>
        <view class="order-item order-item-2">
          <view class="order-title">退货单数</view>
          <view class="order-item-num">{{ orderReturnNumInfo.today }}</view>
          <view class="order-bottom"
            >昨日{{
              orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
                ? "+"
                : "-"
            }}
            {{
              orderReturnNumInfo.daym2m == null
                ? "-"
                : Number(orderReturnNumInfo.daym2m * 100).toFixed(0) + "%"
            }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../api/user";
import {
  GetSalesAmountFun,
  GetShopOrderNum,
  GetOrderReturnNum,
} from "../../api/shop";
import statusBar from "@/components/status-bar.vue";
export default {
  name: "viewCenter",
  components: {
    statusBar,
  },
  data() {
    return {
      dashboardInfo: {
        return: {
          review_num: 0,
        },
        product: {
          off_num: 0,
          product_warning_num: 0,
        },
      },
      orderSalesAmoutInfo: {
        daym2m: null,
        month: 0,
        today: 0,
        yestoday: 0,
        endVal: 0,
      },
      orderNumInfo: {
        daym2m: null,
        month: 0,
        today: 0,
        yestoday: 0,
        endVal: 0,
      },
      orderReturnNumInfo: {
        daym2m: null,
        month: 0,
        today: 0,
        yestoday: 0,
        endVal: 0,
      },
    };
  },
  onShow() {
    this.getAccountDashboard();
    this.getSalesAmountFun();
    this.getShopOrderNum();
    this.getOrderReturnNum();
  },
  methods: {
    async getAccountDashboard() {
      let res = await GetAccountDashboard();
      if (res && res.status == 200) {
        this.dashboardInfo = res.data;
      }
    },
    async getSalesAmountFun() {
      let res = await GetSalesAmountFun();
      if (res && res.status == 200) {
        this.orderSalesAmoutInfo = { ...this.orderSalesAmoutInfo, ...res.data };
      }
    },
    async getShopOrderNum() {
      let res = await GetShopOrderNum();
      if (res && res.status == 200) {
        this.orderNumInfo = { ...this.orderNumInfo, ...res.data };
      }
    },
    async getOrderReturnNum() {
      let res = await GetOrderReturnNum();
      if (res && res.status == 200) {
        this.orderReturnNumInfo = { ...this.orderReturnNumInfo, ...res.data };
      }
    },
  },
};
</script>

<style lang="scss">
.view-container {
  padding: 40rpx;
  height: calc(100vh - 116rpx);
  background: #f6f6f6;

  .item-content {
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;

    .item-list {
      display: flex;
      justify-content: space-around;
      margin: 40rpx 0;

      .item {
        text-align: center;

        .item-value {
          margin-bottom: 16rpx;
          font-size: 48rpx;
          font-weight: bold;
        }

        .item-title {
          min-width: 160rpx;
          color: #b1b1b1;
        }
      }
    }
  }

  .title {
    position: relative;
    padding-left: 20rpx; /* 给条状留出空间 */
    font-size: 32rpx;
    color: #333;

    /* 通过伪元素添加左侧条状 */
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx; /* 条状宽度 */
      height: 32rpx; /* 条状高度 */
      background-color: #007aff; /* 条状颜色 */
      border-radius: 4rpx; /* 可选圆角 */
    }
  }

  .order-content {
    margin: 40rpx 0;

    .order-list {
      display: flex;
      margin: 40rpx 0;

      .order-item {
        margin-right: 40rpx;
        padding: 12rpx;
        min-width: 26%;
        border-radius: 12rpx;
        background: #41e6f9;
        color: #fff;

        .order-title {
          font-size: 24rpx;
        }

        .order-item-num {
          padding: 8rpx 0;
          font-family: math;
          text-align: center;
          font-weight: bold;
          font-size: 44rpx;
        }

        .order-bottom {
          font-size: 24rpx;
          text-align: right;
        }
      }

      .order-item-1 {
        background: #de41f6;
      }

      .order-item-2 {
        background: #6b7bfa;
      }
    }
  }
}
</style>