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 { 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.loadStatus = 'loading'
    // let { code, data } = await OrderApi.getOrderPage({
    //     pageNo: state.pagination.pageNo,
    //     pageSize: state.pagination.pageSize,
    //     status: tabMaps[state.currentTab].value,
    // })
    // if (code !== 0) {
    //     return
    // }

    data.list.forEach((item) => {
        item.order.forEach((sitem) => {
            handleOrderButtons(sitem)
        })
    })
    state.pagination.list = _.concat(state.pagination.list, data.list)
    console.log(state.pagination.list)
    state.pagination.total = data.total
    let currentPageTotal = state.pagination.list.reduce((pre, cur) => {
        return pre + cur.order.length
    }, 0)
    state.loadStatus = currentPageTotal < state.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>