mall-app-t/pages/order/list.vue

<template>
  <pb-layout title="订单" navbar="normal" tabbar="/pages/order/list" :bgStyle="bgStyle" opacityBgUi="bg-white"
    color="black">
    <pb-sticky bgColor="#fff">
      <pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
    </pb-sticky>
    <p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
    <view v-if="state.pagination.total > 0">
      <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
        :key="order.payOrderId">
        <view v-for="(sorder, sindex) in order.order" @tap="onOrderDetail(sorder.id)">
          <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
            <!-- <view class="order-no">订单号：{{ sorder.no }}</view> -->
            <view class="order-no text-lg font-weight-bold">{{ sorder.particularName }}</view>
            <view class="order-state ss-font-26" :class="formatOrderColor(sorder)">
              {{ formatOrderStatus(sorder) }}
            </view>
          </view>
          <view class="border-bottom" v-for="item in sorder.items" :key="item.id">
            <p-goods-item :img="item.picUrl" :title="item.spuName"
              :skuText="item.properties.map((property) => property.valueName).join(' ')" :price="item.price"
              :num="item.count" />
          </view>

          <view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
            :class="sorder.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
            <view class="ss-flex ss-col-center">
              <button v-if="sorder.buttons.includes('combination')" class="tool-btn ss-reset-button"
                @tap.stop="onOrderGroupon(sorder)">
                拼团详情
              </button>
              <button v-if="sorder.buttons.length === 0" class="tool-btn ss-reset-button"
                @tap.stop="onOrderDetail(sorder.id)">
                查看详情
              </button>
              <button v-if="sorder.buttons.includes('confirm')" class="tool-btn ss-reset-button"
                @tap.stop="onConfirm(sorder)">
                确认收货
              </button>
              <button v-if="sorder.buttons.includes('express')" class="tool-btn ss-reset-button"
                @tap.stop="onExpress(sorder.id)">
                查看物流
              </button>
              <button v-if="sorder.buttons.includes('cancel')" class="tool-btn ss-reset-button"
                @tap.stop="onCancel(sorder.id, sindex)">
                取消订单
              </button>
              <button v-if="sorder.buttons.includes('comment')" class="tool-btn ss-reset-button"
                @tap.stop="onComment(sorder.id)">
                评价
              </button>
              <button v-if="sorder.buttons.includes('delete')" class="delete-btn ss-reset-button"
                @tap.stop="onDelete(sorder.id)">
                删除订单
              </button>
            </view>
          </view>
          <view class="pay-box ss-m-t-30 ss-flex ss-gap-40 ss-p-b-40 ss-row-right ss-p-r-20">
            <view class="ss-flex ss-col-center">
              <view class="discounts-title pay-color">共 {{ totalNumsPerOrder(order) }} 件商品,总金额:</view>
              <view class="discounts-money pay-color"> ￥{{ fen2yuan(totalPricePerOrder(order)) }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus"
      :content-text="{ contentdown: '上拉加载更多' }" />
  </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import OrderApi from '@/peach/api/trade/order'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
import peach from '@/peach'
import _, { isEmpty } from 'lodash'
import { resetPagination } from '@/peach/utils'

const bgStyle = {
  backgroundColor: '#fff',
  description: '',
}

const state = ref({
  currentTab: 0,
  pagination: {
    list: [],
    total: 0,
    pageNo: 1,
    pageSize: 6,
  },
  loadStatus: '',
})

const tabMaps = [
  {
    name: '全部',
  },
  {
    name: '待付款',
    value: 0,
  },
  {
    name: '待核销',
    value: 50,
  },
  {
    name: '待配送',
    value: 60,
  },
]

// 单个订单总商品数
function totalNumsPerOrder(order) {
  if (order.order.length) {
    return order.order.reduce((per, cur) => {
      return per + cur.productCount
    }, 0)
  }
}

// 单个订单总金额
function totalPricePerOrder(order) {
  if (order.order.length) {
    return order.order.reduce((per, cur) => {
      return per + cur.payPrice
    }, 0)
  }
}

// 切换选项卡
function onTabsChange(e) {
  if (state.value.currentTab === e.index) {
    return
  }
  // 重头加载代码
  resetPagination(state.value.pagination)
  state.value.currentTab = e.index
  getOrderList()
}

// 订单详情
function onOrderDetail(id) {
  peach.$router.go('/pages/order/detail', {
    id,
  })
}

// 获取订单列表
async function getOrderList() {
  state.value.loadStatus = 'loading'
  let { data } = await OrderApi.getOrderPage({
    pageNo: state.value.pagination.pageNo,
    pageSize: state.value.pagination.pageSize,
    status: tabMaps[state.value.currentTab].value,
  })

  data.list.forEach((item) => {
    item.order.forEach((sitem) => {
      handleOrderButtons(sitem)
    })
  })
  state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
  console.log(state.value.pagination.list)
  state.value.pagination.total = data.total
  let currentPageTotal = state.value.pagination.list.reduce((pre, cur) => {
    return pre + cur.order.length
  }, 0)
  state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
}

onLoad(async (options) => {
  if (options.type) {
    state.value.currentTab = options.type
  }
  await getOrderList()
})

// 加载更多
function loadMore() {
  if (state.value.loadStatus === 'noMore') {
    return
  }
  state.value.pagination.pageNo++
  getOrderList()
}

// 上拉加载更多
onReachBottom(() => {
  loadMore()
})

// 下拉刷新
onPullDownRefresh(() => {
  resetPagination(state.value.pagination)
  getOrderList()
  setTimeout(function () {
    uni.stopPullDownRefresh()
  }, 800)
})
</script>