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="myui_card 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="myui_card 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">
            昨日
            <text :class="[orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
                ? 'up'
                : 'down']">
 {{
              orderSalesAmoutInfo.daym2m == null
                ? "N/A"
                : Number(orderSalesAmoutInfo.daym2m * 100).toFixed(0) + "%"
            }}
            </text>
          </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">
            昨日
            <text :class="[orderNumInfo.daym2m && orderNumInfo.daym2m > 0
                ? 'up'
                : 'down']">
 {{
              orderNumInfo.daym2m == null
                ? "N/A"
                : Number(orderNumInfo.daym2m * 100).toFixed(0) + "%"
            }}
            </text>
          </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">
            昨日
             <text :class="[orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
                ? 'up'
                : 'down']">
 {{
              orderReturnNumInfo.daym2m == null
                ? "N/A"
                : Number(orderReturnNumInfo.daym2m * 100).toFixed(0) + "%"
            }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <tabbar tabbarName="shituzhongxin"></tabbar>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../api/user";
import {
  GetSalesAmountFun,
  GetShopOrderNum,
  GetOrderReturnNum,
} from "../../api/shop";
import statusBar from "@/components/status-bar.vue";
import tabbar from "@/components/tabbar/tabbar.vue";
export default {
  name: "viewCenter",
  components: {
    statusBar,
    tabbar,
  },
  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">
@import "@/styles/variables.scss";
.view-container {
  padding: 40rpx 32rpx;
  height: calc(100vh - 116rpx);
  background: #fff;

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

      .item {
        text-align: center;

        .item-value {
          font-size: 56rpx;
          font-weight: bold;
          color: #222;
           font-family: math;
        }

        .item-title {
          min-width: 160rpx;
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }

  .title {
    position: relative;
    // padding-left: 20rpx; /* 给条状留出空间 */
    font-size: 32rpx;
    color: #222;
    font-weight: bold;
    margin-bottom: 30rpx;

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

  .order-content {
    margin: 32rpx 0;

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

      .order-item {
        margin-right: 40rpx;
        padding: 12rpx;
        min-width: 26%;
        // border-radius: 12rpx;
        // background: #41e6f9;
        // box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
        // color: #fff;
        text-align: center;

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

        .order-item-num {
          padding: 12rpx 0;
          height: 56rpx;
          font-size: 56rpx;
          font-weight: bold;
          font-family: math;
          color: #222;
        }

        .up{
          color: #cf1322;
        }
        
        .down{
          color: #3f8600;
        }
        

        .order-bottom {
          font-size: 24rpx;
          color: #999;
          display: flex;
          gap: 4rpx;
          justify-content: center;
        }
      }

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

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