rtim/pages/points/shopOrder.vue

<template>
    <view class="shop-order-page">
        <uni-nav-bar fixed :statusBar="true" backgroundColor="#fff" :border="false" rightWidth="80" leftWidth="80">
            <view class="page-title">省钱订单</view>
            <template v-slot:left>
                <uni-icons type="back" size="24" color="#333"></uni-icons>
            </template>
            <template v-slot:right>
                <uni-icons @click="handleSearch" type="search" size="24" color="#333"></uni-icons>
            </template>
        </uni-nav-bar>

        <!-- 平台选择tab -->
        <me-tabs :value="tabIndex" :tabs="platforms" nameKey="name" :height="88" @change="switchPlatform"
            :tab-width="134"></me-tabs>

        <!-- 订单状态tab -->
        <view class="status-tabs">
            <view v-for="(status, index) in statuses" :key="index" class="status-tab"
                :class="{ active: activeStatus === status.value }" @click="switchStatus(status.value)">
                {{ status.name }}
            </view>
        </view>

        <scroll-view class="order-list" v-if="orderList.length" scroll-y @scrolltolower="loadMore"
            lower-threshold="100">
            <view style="padding: 0 16px 5px 16px ;">
                <view v-for="(order, index) in orderList" :key="index" class="order-item">
                    <view class="order-header">
                        <view class="order-platform">
                            <image :src="typeImg[order.platform]" class="platform-icon" mode="aspectFit" />
                            <text class="order-time">{{ order.orderTime }}</text>
                        </view>
                        <view class="order-status" :class="`status-${order.statusClass}`">{{ statusMapKey[order.status]
                        }}
                        </view>
                    </view>
                    <view class="order-goods">
                        <image :src="order.imageUrl" class="goods-image" mode="aspectFill" />
                        <view class="goods-info">
                            <text class="goods-title">{{ order.productName }}</text>
                            <view class="goods-price">
                                <view class="estimate-earning">
                                    <text class="label ">预估收益</text>
                                    <text class="value">￥{{ order.estimatedCommission }}</text>
                                </view>
                                <view class="payment-amount">
                                    <text class="payment-title">付款金额</text>
                                    <text class="value">￥{{ order.orderAmount }}</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 订单详情 -->
                    <view class="order-detail">
                        <view class="detail-item">
                            <text class="detail-title">{{ platMapKey[order.platform] }}</text>
                        </view>
                        <view class="detail-item">
                            <text class="label">订单号</text>
                            <view class="value">
                                <text>{{ order.platformOrderId }}</text>
                                <text class="line"> | </text>
                                <text class="copy-btn" @click="copyOrderId(order.platformOrderId)">复制</text>
                            </view>
                        </view>
                        <view class="detail-item">
                            <text class="label">确认收货时间</text>
                            <text class="value">{{ order.receiptTime }}</text>
                        </view>
                        <view class="detail-item">
                            <text class="label">收益结算时间</text>
                            <text class="value">{{ order.settleTime }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <template v-if="orderList.length > 20">
                <!-- 加载更多提示 -->
                <view class="load-more" v-if="isLoading">
                    <text>加载中...</text>
                </view>
                <view class="load-more" v-else-if="orderList.length >= total">
                    <text>没有更多了</text>
                </view>
            </template>
        </scroll-view>
        <scs-no-data v-else />



    </view>
</template>

<script>
import { getOrderList } from '@/api/makeMoney.js'
export default {
    data() {
        return {
            typeImg: {
                jd: '/static/image/points/icon_jd@2x.png',
                pdd: '/static/image/points/icon_pdd@2x.png',
                douyin: '/static/image/points/icon_tiktok@2x.png',
                taobao: '/static/image/points/icon_taobao@2x.png',
            },
            keyword: '',

            platMapKey: {
                jd: '京东自营',
                pdd: '拼多多自营',
                douyin: '抖音商城',
                taobao: '淘宝自营',
            },
            statusMapKey: {
                '0': '待结算',
                '1': '已结算',
                '2': '已失效',
                '3': '已收货',
            },

            orderList: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            isLoading: false,
            // 平台选择
            platforms: [
                { name: '全平台', value: '' },
                { name: '京东', value: 'jd' },
                { name: '拼多多', value: 'pdd' },
                { name: '抖音商城', value: 'douyin' },
                { name: '淘宝', value: 'taobao' }
            ],
            tabIndex: 0,

            // 订单状态
            statuses: [
                { name: '全部', value: '' },
                { name: '待结算', value: '0' },
                { name: '已结算', value: '1' },
                { name: '已失效', value: '2' },
                { name: '已收货', value: '3' },
            ],
            activeStatus: '',

        }
    },
    onLoad() {
        this.getOrderList()
    },
    methods: {
        loadMore() {
            console.log("more")
            if (this.isLoading) return
            if (this.orderList.length >= this.total) {
                return
            }
            this.currentPage++
            this.getOrderList()
        },

        async getOrderList() {
            this.isLoading = true
            uni.showLoading({ mask: true })
            const params = {
                platformOrderId: '',
                status: this.activeStatus,
                platform: this.platforms[this.tabIndex].value,
                page: this.currentPage,
                pageSize: this.pageSize,
            }
            const { code, data } = await getOrderList(params)
            setTimeout(() => {
                this.isLoading = false
                uni.hideLoading()
            }, 100)
            if (code == 200) {
                if (this.currentPage == 1) {
                    this.orderList = data.list || []
                } else {
                    this.orderList = this.orderList.concat(data.list || [])
                }
                this.total = data.total || 0
            }
        },
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        handleSearch() {
            uni.navigateTo({
                url: '/pages/points/shopSearch'
            })

        },
        // 切换平台
        switchPlatform(platform) {
            this.tabIndex = platform
            this.currentPage = 1
            this.getOrderList()
        },

        // 切换订单状态
        switchStatus(status) {
            this.activeStatus = status
            this.currentPage = 1
            this.getOrderList()
        },

        // 复制订单号
        copyOrderId(orderId) {
            uni.setClipboardData({
                data: orderId,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/* 页面容器 */
.shop-order-page {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .page-title {
        line-height: 44px;
        text-align: center;
        width: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #222222;
    }
}



::v-deep .tabs-container {

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.back-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

.search-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}




/* 订单状态tab */
.status-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0 12px;
    border-bottom: 1px solid #eeeeee;
    white-space: nowrap;
    padding-top: 12rpx;
}

.status-tab {
    padding: 0 12px;
    height: 56rpx;
    background-color: #F7F8FA;
    line-height: 56rpx;
    border-radius: 28rpx;
    font-size: 14px;
    color: #666666;
    position: relative;
    font-weight: 400;
    margin: 12rpx 0;
}

.status-tab.active {
    border: 1px solid #FF5C03;
    font-weight: 500;
    color: #FF5C03;
}

.load-more {
    font-size: 14px;
    color: #999999;
    text-align: center;
    padding: 6px 0px;
}

/* 订单列表 */
.order-list {

    flex: 1;
    overflow: auto;
    height: calc(100vh - 200px);
}

/* 订单项 */
.order-item {
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    &:last-child {
        margin-bottom: 20rpx;
    }
}

/* 订单头部 */
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        width: calc(100% - 24px);
        height: 0.5px;
        background-color: #ECECEC;
    }
}

.order-platform {
    display: flex;
    align-items: center;
}

.platform-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.order-time {
    font-size: 12px;
    color: #999999;
}

.order-status {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
}

.status-1 {
    color: #52c41a;
}

.status-3 {
    color: #52c41a;
}

/* 商品信息 */
.order-goods {
    display: flex;
    padding: 12px 16px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        width: calc(100% - 24px);
        height: 0.5px;
        background-color: #ECECEC;
    }
}

.goods-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 12px;
    background-color: #f5f5f5;
}

.goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-title {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.estimate-earning {
    color: #FF5C03;
    font-weight: 400;
    font-size: 12px;

    .label {
        margin-right: 6px;
    }
}


.payment-amount {
    display: flex;
    align-items: center;

    .payment-title {
        font-weight: 400;
        font-size: 12px;
        color: #222222;
        margin-right: 6px;
    }

}


.payment-amount .label {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
}

.estimate-earning .value {
    font-size: 14px;
    color: #FF5C03;
    font-weight: 500;
}

.payment-amount .value {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
}

/* 订单详情 */
.order-detail {
    padding: 12px 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;

    .detail-title {
        color: #FF5C03;
    }

    .line {
        margin: 0 6px;
        color: #E9E9E9;
    }
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item .label {
    color: #444444;
}

.detail-item .value {
    color: #666666;
    display: flex;
    align-items: center;
}

.copy-btn {
    color: #222222;
}
</style>