huitong/pages/admin/order/index.vue

<template>
  <view>
    <view class="order-index" ref="container">
      <view class="header acea-row">
        <navigator class="item" :url="`/pages/admin/orderList/index?types=1&merId=${mer_id}`" hover-class="none">
          <view class="num">{{ census.unpaid }}</view>
          <view>待付款</view>
        </navigator>
        <navigator class="item" :url="`/pages/admin/orderList/index?types=2&merId=${mer_id}`" hover-class="none">
          <view class="num">{{ census.unshipped }}</view>
          <view>待发货</view>
        </navigator>
        <navigator class="item" :url="`/pages/admin/orderList/index?types=3&merId=${mer_id}`" hover-class="none">
          <view class="num">{{ census.untake }}</view>
          <view>待收货</view>
        </navigator>
        <navigator class="item" :url="`/pages/admin/orderList/index?types=4&merId=${mer_id}`" hover-class="none">
          <view class="num">{{ census.unevaluate }}</view>
          <view>待评价</view>
        </navigator>
        <navigator class="item" :url="`/pages/admin/orderList/index?types=6&merId=${mer_id}`" hover-class="none">
          <view class="num">{{ census.refund }}</view>
          <view>退款</view>
        </navigator>
      </view>
      <view class="wrapper">
        <view class="title">
          <span class="iconfont icon-shujutongji"></span>数据统计
        </view>
        <view class="list acea-row" v-if="orderData">
          <navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=today&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.today.payPrice }}</view>
            <view>今日成交额</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=yesterday&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.yesterday.payPrice }}</view>
            <view>昨日成交额</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=month&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.month.payPrice  }}</view>
            <view>本月成交额</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=today&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.today.orderNum}}</view>
            <view>今日订单数</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=yesterday&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.yesterday.orderNum }}</view>
            <view>昨日订单数</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=month&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.month.orderNum}}</view>
            <view>本月订单数</view>
          </navigator>
        </view>
      </view>
      <view class="public-wrapper">
        <view class="title">
          <span class="iconfont icon-xiangxishuju"></span>详细数据
        </view>
        <view class="nav acea-row row-between-wrapper">
          <view class="data">日期</view>
          <view class="browse">订单数</view>
          <view class="turnover">成交额</view>
        </view>
        <view class="conter">
          <view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
            <view class="data">{{ item.day }}</view>
            <view class="browse">{{ item.total }}</view>
            <view class="turnover">{{ item.pay_price }}</view>
          </view>
        </view>
      </view>
      <Loading :loaded="loaded" :loading="loading"></Loading>
    </view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  getStatisticsInfo,
  getStatisticsMonth,
  orderStatistics,
  orderPrice
} from "@/api/admin";
import Loading from '@/components/Loading/index.vue'
export default {
  name: 'adminOrder',
  components: {
    Loading
  },
  data() {
    return {
      census: {},
      orderData: {
        today: {},
        yesterday: {},
        month: {}
      },
      list: [],
      where: {
        page: 1,
        limit: 15
      },
      loaded: false,
      loading: false,
      mer_id: '',
    }
  },
  onLoad(options) {
	  this.mer_id = options.mer_id
	  this.getOrderStatistics(this.mer_id);
	  this.getList(this.mer_id)
  },
  methods: {
    getIndex: function() {
      var that = this;
      getStatisticsInfo().then(
        res => {
          that.census = res.data;
        },
        err => {
          that.$util.Tips({
            title: err.msg
          })
        }
      );
    },
    getList: function(mer_id) {
      var that = this;
      if(that.loading || that.loaded) return;
      that.loading = true;
      orderPrice(that.where, mer_id).then(
        res => {
          that.loading = false;
          that.loaded = res.data.length < that.where.limit;
          that.list.push.apply(that.list, res.data);
          that.where.page = that.where.page + 1;
        },
        error => {
          that.$util.Tips({
            title: error.msg
          })
        },
        300
      );
    },
    getOrderStatistics: function(mer_id) {
      let that = this;
      orderStatistics(mer_id).then(
        res => {
          that.census = res.data.order;
          that.orderData = res.data.data;
        },
        err => {
          that.$util.Tips({
            title: err.msg
          })
        }
      );
    }
  },
  onReachBottom() {
    this.getList(this.mer_id)
  }
}
</script>

<style lang="scss">
.popupn {
  position: fixed;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: transparent;
  height: 90rpx;
  line-height: 90rpx;
  z-index: 100;
  .spin {
    display: block;
    transform: rotate(180deg);
    font-size: 36rpx;
  }
  .title {
    max-width: 560rpx;
    margin: 0 auto;
    position: relative;
    display: inline;
    padding: 10rpx 30rpx 10rpx 50rpx;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 30rpx;
    color: #fff;
  }
  .iconfont {
    display: inline-block;
    position: relative;
    top: 4rpx;
    right: 0;
  }
  .mer_logo {
    width: 34rpx;
    height: 34rpx;
    position: relative;
    top: 6rpx;
    right: 10px;
  }
  .mer_name {
    display: inline-block;
    max-width: 650rpx;
  }
  .invoice-content {
    background-color: #ffffff;
  }
}
/*订单首页*/
.order-index .header {
  background-image: url("data:image/png;base64,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
  background-size: 100% 100%;
  width: 100%;
  height: 280upx;
  padding: 40upx 3upx 0 3upx;
  box-sizing: border-box;
}

.order-index .header .item {
  flex: 1;
  -webkit-flex: 1;
  -o-flex: 1;
  -ms-flex: 1;
  text-align: center;
  font-size: 24upx;
  color: #fff;
}

.order-index .header .item .num {
  font-size: 40upx;
  margin-bottom: 7upx;
  height: 60rpx;
}

.order-index .wrapper {
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  margin: -115upx auto 0 auto;
  padding-top: 25upx;
}

.order-index .wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 40upx;
}

.order-index .wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.order-index .wrapper .list .item {
  width: 33.33%;
  text-align: center;
  font-size: 24upx;
  color: #999;
  margin-bottom: 45upx;
}

.order-index .wrapper .list .item .num {
  font-size: 40upx;
  color: #333;
}

.public-wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 20upx;
}

.public-wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.public-wrapper {
  margin: 18upx auto 0 auto;
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  padding-top: 25upx;
}

.public-wrapper .nav {
  padding: 0 30upx;
  height: 70upx;
  line-height: 70upx;
  font-size: 24upx;
  color: #999;
}

.public-wrapper .data {
  width: 210upx;
  text-align: left;
}

.public-wrapper .browse {
  width: 192upx;
  text-align: right;
}

.public-wrapper .turnover {
  width: 227upx;
  text-align: right;
}

.public-wrapper .conter {
  padding: 0 30upx;
}

.public-wrapper .conter .item {
  border-bottom: 1px solid #f7f7f7;
  height: 70upx;
  font-size: 24upx;
}

.public-wrapper .conter .item .turnover {
  color: #d84242;
}
</style>