yicangzongtai_app_240321/pages/workbench/order/index.vue

<template>
  <view class="container-order">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="top" :style="{'top': sticky + 'px'}">
      <view class="iconfont3 left" @click="changeDate(0)">&#xe604;</view>
      <view class="time" @click="openDate" v-if="date">
        <!-- {{date}} -->
        <uni-datetime-picker type="date" v-model="date" :border="false" :clear-icon="false" :end="nowDate"
          @change="selectDate" />
      </view>
      <view class="iconfont3 right" @click="changeDate(1)">&#xe604;</view>
    </view>
    <view style="height: 138rpx;"></view>
    <view class="order-info">
      <view class="item">
        <view class="num">{{orderInfo.order_num || 0}}</view>
        <view class="">订单数</view>
      </view>
      <view class="item">
        <view class="num">{{orderInfo.sale_money_total || 0}}</view>
        <view class="">营业额(￥)</view>
      </view>
      <view class="item">
        <view class="num">{{orderInfo.discount_money_total || 0}}</view>
        <view class="">打赏金额(￥)</view>
      </view>
    </view>
    <view class="list" v-if="list.length">
      <z-order-list :list="list" :isMine="false"></z-order-list>
      <u-loadmore :status="status" />
    </view>
    <noData v-if="list.length<=0"></noData>
    <view class="footer">
      <view class="btn" @click="orderUp">
        <view class="up-icon">
          <view class="iconfont3">&#xe8b5;</view>
        </view>
        <view class="">上报订单</view>
      </view>
    </view>
  </view>
</template>

<script>
  import zOrderList from '@/pages/workbench/z-order-list.vue';
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      zOrderList,
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '订单管理',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        sticky: uni.getSystemInfoSync().statusBarHeight + 44,
        date: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
        nowDate: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
        timestamp: 24 * 60 * 60 * 1000,
        list: [],
        orderInfo: {},
        params: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        currPage: 1,
        refresh: false,
        status: 'loadmore',
      }
    },
    onShow() {
      this.getOrderInfo()
      this.getOrderlist(this.date)
    },
    onPullDownRefresh() {
      this.getOrderInfo()
      this.getOrderlist(this.date, true)
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onReachBottom() {
      if (this.currPage == this.totalPage) {
        return this.status = 'nomore';
      } else {
        this.params.page++
        this.getOrderlist(this.date, false)
      }
    },
    methods: {
      // 时间戳
      timestampHandle(date, i) {
        let timestamp = 24 * 60 * 60 * 1000
        let yesterday = new Date(date).getTime() - timestamp
        let tomorrow = new Date(date).getTime() + timestamp
        let isLook = tomorrow > new Date().getTime() ? true : false
        console.log(date, i, isLook)
        if (i == 0) {
          return {
            status: true,
            currentDate: this.$u.timeFormat(yesterday, 'yyyy-mm-dd')
          }
        }
        if (isLook) {
          return {
            status: false,
            date: date
          }
        }
        return {
          status: true,
          currentDate: this.$u.timeFormat(tomorrow, 'yyyy-mm-dd')
        }
      },
      changeDate(i) {
        this.$u.throttle(() => {
          let res = this.timestampHandle(this.date, i)
          if (res.status) {
            this.date = res.currentDate
            this.getOrderInfo()
            this.getOrderlist(this.date, true)
          }
        }, 500)
      },
      openDate() {
        this.show = true
      },
      selectDate(e) {
        if (e) {
          this.date = e
          this.getOrderInfo()
          this.getOrderlist(e, true)
        }
      },
      // 获取订单全部信息
      getOrderInfo() {
        this.$http.get('/offlineorder/count').then(res => {
          if (res.code == 200) {
            this.orderInfo = res.data
          }
        })
      },
      getOrderlist(date, refresh) {
        uni.showLoading({
          title: '加载中'
        })
        this.params.page = refresh ? 1 : this.params.page
        this.$http.get('/offlineorder/page', {
          date: date,
          ...this.params
        }).then(res => {
          if (res.code == 200) {
            if (this.params.page == 1) this.list = []
            this.list = [...this.list, ...res.page.list]
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage
            setTimeout(() => {
              uni.hideLoading()
            }, 300)
            if (this.currPage == this.totalPage) return this.status = 'nomore';
          }
        }).catch(err => {
          uni.hideLoading()
        })
      },
      orderUp() {
        uni.navigateTo({
          url: `/pages/workbench/order/entering`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-order {
    .top {
      position: fixed;
      width: 100%;
      height: 138rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      z-index: 9;
      background-color: #fff;

      .time {
        margin: 0 60rpx;
      }

      .left,
      .right {
        color: #808080;
      }

      .right {
        transform: rotate(180deg);
      }
    }

    .order-info {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 690rpx;
      height: 205rpx;
      margin: 0 auto 10rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #1a1a1a;

      .item {
        max-width: 30%;
        text-align: center;

        .num {
          font-size: 36rpx;
          color: #ff6600;
          margin-bottom: 18rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .list {
      padding: 0 30rpx 200rpx;
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      z-index: 8;

      .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 700;
        text-align: center;
        color: #FA6138;

        .up-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 67rpx;
          height: 67rpx;
          margin-bottom: 16rpx;
          background: #FA6138;
          border-radius: 50%;
          color: #fff;
        }
      }
    }

    /deep/ .uni-date {
      .uni-date__x-input {
        padding-left: 0;
        color: #1a1a1a;
      }
    }
  }
</style>