caimei-applets-hehe/pages/order/order-list.vue

<template>
    <view class="order-list">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        
        <!-- 滑块 tabs -->
        <tui-tabs
            :tabs="tabs"
            :currentTab="currentTab"
            @change="tabChange"
            :sliderWidth="48"
            color="#333333"
            selectedColor="#FF457B"
            sliderBgColor="#FF457B"
        ></tui-tabs>
        
        <!-- 协销筛选订单 -->
        <cm-order-filter-control
            @click="handleFilter"
            :buttonGroup="screenTabBar"
            v-if="isDealer"
        ></cm-order-filter-control>

        <swiper
            :indicator-dots="false"
            :autoplay="false"
            class="swiper"
            :class="!isDealer ? 'swiper-hegiht1' : 'swiper-hegiht2'"
            :current="currentTab"
            @change="swiperChange"
        >
            <swiper-item v-for="tab in tabs" :key="tab.state">
                <!-- tab.orderList.length === 0 -->
                <view class="order-empty" v-if="tab.orderList.length === 0">
                    <cm-empty :image="emptyInfo.image" :message="emptyInfo.message" :offset="100"></cm-empty>
                </view>
                <scroll-view scroll-y="true" v-else class="scroll-box" @scrolltolower="scrollBottom">
                    <template v-for="(orderInfo, orderIndex) in tab.orderList">
                        <view class="grid" :key="orderIndex"></view>
                        <view class="order-section" :key="orderIndex" @click="handleToDetail(orderInfo)">
                            <!-- 订单信息 -->
                            <view class="order-info">
                                <view class="order-num">
                                    <text class="label">订单编号：</text> <text>{{ orderInfo.orderNo }}</text>
                                </view>
                                <view class="order-time">
                                    <text class="label">下单时间：</text> <text>{{ orderInfo.orderTime }}</text>
                                </view>
                                <view class="status">{{ stateExpFormat(orderInfo.status) }}</view>
                            </view>
                            <view class="line"></view>
                            <view
                                class="shop-order"
                                v-for="(shopOrder, shopOrderIndex) in orderInfo.shopOrderList"
                                :key="shopOrderIndex"
                            >
                                <!-- 供应商 -->
                                <view class="origin">
                                    <image class="cover" :src="shopOrder.shopLogo"></image>
                                    <view class="name">{{ shopOrder.shopName }}</view>
                                </view>
                                <!-- 商品列表 -->
                                <view class="goods-list">
                                    <!-- 商品信息 -->
                                    <view
                                        class="order-goods"
                                        v-for="goods in shopOrder.orderProductList"
                                        :key="goods.productId"
                                    >
                                        <cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
                                    </view>
                                </view>
                            </view>
                            <!-- 统计 -->
                            <view class="total">
                                <view class="count">共{{ orderInfo.productCount }}件商品</view>
                                <view class="status">
                                    <template v-if="['31', '32', '33'].includes(orderInfo.status)">
                                        <text class="label">已支付：</text>
                                        <text>￥{{ orderInfo.receiptAmount | formatPrice }}</text>
                                    </template>
                                    <template v-else>
                                        <text class="label">待付总额：</text>
                                        <text>￥{{ orderInfo.pendingPayments | formatPrice }}</text>
                                    </template>
                                </view>
                            </view>
                            <!-- 操作 -->
                            <cm-order-control-nav
                                v-if="orderInfo.userId == userId"
                                :orderInfo="orderInfo"
                                @confirm="handleConfirmClick"
                            ></cm-order-control-nav>
                        </view>
                    </template>
                    <!-- loading -->
                    <view class="loading-more">
                        <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
                        <tui-nomore :text="loadMoreText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>

        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            :content="modalText"
            :size="32"
            :maskClosable="false"
            color="#333"
            shape="circle"
            @click="handleModalConfirm"
        ></tui-modal>
        <!-- 加载框 -->
        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
        <!-- 失效商品列表 -->
        <cm-order-invalid-modal
            :goodsList="invalidList"
            :visible="buyAgainModal"
            @confirm="buyAgainModalClick"
            @cancel="buyAgainModalHide"
        ></cm-order-invalid-modal>
    </view>
</template>

<script>
import CmOrderProdcut from '@/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue'
import CmOrderControlNav from '@/components/cm-module/cm-order-control-nav/cm-order-control-nav.vue'
import CmOrderInvalidModal from '@/components/cm-module/cm-order-invalid-modal/cm-order-invalid-modal.vue'
import CmOrderFilterControl from '@/components/cm-module/cm-order-filter-control/cm-order-filter-control.vue'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
import { debounce } from '@/common/common.js'
import orderList from './mixins/orderList.js'
import wechatPay from './mixins/wechatPay.js'
import { mapGetters } from 'vuex'
export default {
    mixins: [wechatPay, orderList],
    components: {
        CmOrderProdcut,
        CmOrderControlNav,
        CmOrderInvalidModal,
        CmOrderFilterControl,
        CmLoading,
        CmEmpty
    },
    data() {
        return {
            tabs: [
                {
                    name: '全部',
                    state: 0,
                    pageNum: 1,
                    orderList: []
                },
                {
                    name: '待付款',
                    state: 1,
                    pageNum: 1,
                    orderList: []
                },
                {
                    name: '待发货',
                    state: 2,
                    pageNum: 1,
                    orderList: []
                },
                {
                    name: '已发货',
                    state: 3,
                    pageNum: 1,
                    orderList: []
                },
                {
                    name: '退货/款',
                    state: 4,
                    pageNum: 1,
                    orderList: []
                }
            ],
            currentTab: 0,
            screenTabBar: [{ id: 0, name: '全部订单' }, { id: 1, name: '用户订单' }, { id: 2, name: '自身订单' }],
            screenTab: 0,
            refresh: false,
            loadmore: false, // 正在加载更多
            isRequest: true,
        }
    },
    filters: {
        formatPrice(price) {
            if (!price) return '0.00'
            return Number(price).toFixed(2)
        }
    },
    computed: {
        ...mapGetters(['userId', 'userIdentity']),
        // 当前用户是否为协销
        isDealer() {
            return this.userIdentity === 2
        },
        tabInfo() {
            return this.tabs[this.currentTab]
        },
        loadMoreText() {
            if (this.tabInfo.orderList.length === 0) return '没有更多了'
            return this.tabInfo.hasMore ? '上拉加载更多' : '没有更多了'
        },
        emptyInfo() {
            const info = {}
            info.image = `${this.$Static}icon-empty-address.png`

            if (this.tabInfo.state === 0) {
                info.message = '您还没有任何的订单哟~_~'
            } else {
                info.message = '您还没有相关的订单哟~_~'
            }

            return info
        }
    },
    created() {
        setTimeout(() => {
            this.fetchOrderData()
        }, 2000)
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.resetOrderList()
    },
    methods: {
        // 重置订单列表
        resetOrderList() {
            this.refresh = true
            this.tabInfo.pageNum = 1
            this.fetchOrderData()
        },

        // 更新订单列表
        updateOrderList(response) {
            const { name, state, pageNum } = this.tabInfo
            this.$set(this.tabs, this.currentTab, {
                name,
                state,
                pageNum: pageNum + 1,
                orderList: this.tabInfo.orderList.concat(response.data.list),
                hasMore: response.data.hasNextPage
            })
        },

        // 获取订单列表 使用防抖函数封装
        fetchOrderData: debounce(function() {
            this.loadmore = true

            const params = {
                orderState: this.currentTab,
                userId: this.userId,
                orderType: this.screenTab,
                pageNum: this.tabInfo.pageNum,
                pageSize: 10
            }

            if (this.isDealer) {
                this.queryOrderDealerList(params)
            } else {
                this.queryOrderList(params)
            }
        }, 500),

        // 普通用户获取订单列表
        queryOrderList(params) {
            this.OrderService.QueryOrderList(params)
                .then(res => {
                    if (this.refresh) this.tabInfo.orderList = []
                    this.updateOrderList(res)
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    uni.stopPullDownRefresh()
                    this.refresh = false
                    this.loadmore = false
                    this.isRequest = false
                })
        },

        // 分销者获取订单列表
        queryOrderDealerList(params) {
            console.log(params)
            this.OrderService.QueryOrderDealerList(params)
                .then(res => {
                    if (this.refresh) this.tabInfo.orderList = []
                    this.updateOrderList(res)
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    uni.stopPullDownRefresh()
                    this.refresh = false
                    this.loadmore = false
                    this.isRequest = false
                })
        },

        // 筛选订单
        handleFilter(e) {
            console.log(e.index)
            this.screenTab = e.index
            this.resetOrderList()
            this.fetchOrderData()
        },
        
        // 跳转详情
        handleToDetail(orderInfo){
            this.$api.navigateTo('/pages/order/order-detail?orderId=' + orderInfo.orderId)
        },

        // 滚动到底部
        scrollBottom() {
            if (!this.tabInfo.hasMore) return
            this.fetchOrderData()
        },

        // tab切换
        tabChange(e) {
            this.currentTab = e.index
        },

        // 轮播切换
        swiperChange(e) {
            this.currentTab = e.detail.current
            if (this.tabInfo.pageNum !== 1) return
            this.isRequest = true
            this.fetchOrderData()
        }
    }
}
</script>

<style lang="scss" scoped>
.order-list {
    min-height: 100vh;
    background: #f7f7f7;

    .swiper {
        &.swiper-hegiht1 {
            height: calc(100vh - 40px);
        }

        &.swiper-hegiht2 {
            height: calc(100vh - 80px);
        }

        .scroll-box {
            height: 100%;
        }
    }

    .grid {
        height: 20rpx;
        background: #f7f7f7;
    }

    .order-section {
        padding: 38rpx 0;
        background-color: #fff;

        .line {
            width: 702rpx;
            height: 1px;
            background: #f7f7f7;
        }

        .order-info {
            position: relative;
            padding: 0 24rpx;
            margin-bottom: 32rpx;
            line-height: 1.6;

            .order-num,
            .order-time {
                font-size: 26rpx;
                color: #333333;

                .label {
                    color: #999999;
                }
            }

            .status {
                position: absolute;
                font-size: 26rpx;
                color: #ff457b;
                right: 24rpx;
                bottom: 0;
            }
        }

        .origin {
            padding: 0 24rpx;
            margin-top: 24rpx;
            margin-bottom: 16rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .cover {
                width: 56rpx;
                height: 56rpx;
                border-radius: 4rpx;
                border: 1px solid #F7F7F7;
                box-sizing: border-box;
            }

            .name {
                margin-left: 16rpx;
                font-size: 30rpx;
                color: #333333;
                font-weight: bold;
            }
        }

        .goods-list {
            .order-goods {
                padding-top: 32rpx;
                &:first-child {
                    padding-top: 0;
                }
            }
        }

        .total {
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 0 24rpx;
            margin: 32rpx 0;

            font-size: 26rpx;
            color: #333333;

            .count {
                font-weight: bold;
            }

            .status {
                color: #ff457b;

                .label {
                    color: #333333;
                }
            }
        }
    }
}
</style>