rtim/pages/points/shopSearch.vue

<template>
    <view class="search-container">
        <uni-nav-bar fixed :statusBar="true" backgroundColor="#fff" :border="false" rightWidth="0" leftWidth="0">
            <view class="page-search">
                <view class="scs-headr-search">
                    <view class="search-input" style="background-color: #F5F6FA;">
                        <uni-icons @click="handleSearch" type="search" size="24" color="#999999"></uni-icons>
                        <input class="input-value" type="text" v-model="keyword" placeholder="输入关键字搜索"
                            confirm-type="search" @confirm="handleSearch" />
                    </view>
                    <text class="search-cancel" v-if="keyword.trim().length" @tap="keyword = ''; handleSearch()">取消</text>
                </view>
            </view>
        </uni-nav-bar>
        <scroll-view v-if="orderList.length" class="order-list" 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="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>
       <u-empty  mode="data" style="padding-top: 350rpx;" v-else></u-empty>
    </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,
        }
    },
    methods: {
        handleSearch() {
            this.currentPage = 1
            this.getOrderList()
        },

        // 复制订单号
        copyOrderId(orderId) {
            uni.setClipboardData({
                data: orderId,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    })
                }
            })
        },
        async getOrderList() {
            this.isLoading = true
            uni.showLoading({ mask: true })
            const params = {
                platformOrderId: this.keyword.trim(),
                status: '',
                platform: '',
                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
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.search-container {
    width: 100%;
    height: 100%;
    background-color: #F7F8FA;
    display: flex;
    flex-direction: column;

}

.page-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.search-cancel {
    font-size: 28rpx;
    font-weight: 400;
    color: #323233;
}

// 搜索栏
.scs-headr-search {
    height: 72rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: $uni-text-color;
    background-color: transparent;
    gap: 0 28rpx;
    box-sizing: border-box;

    .search_title {
        width: 176rpx;
        height: 44rpx;
    }

    .search-input {
        flex: 1;
        height: 72rpx;
        background: #ffffff;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        padding: 0 8rpx 0 24rpx;
        color: #999999;
        box-sizing: border-box;

        .icon-search {
            width: 28rpx;
            height: 28rpx;
            margin-right: 20rpx;
            margin-top: 4rpx;
        }

        .input-value {
            height: 60rpx;
            line-height: 60rpx;
            flex: 1;
        }

    }

}

/* 订单列表 */
.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;
    border-bottom: 1px solid #f0f0f0;
}

.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;
    border-bottom: 1px solid #f0f0f0;
}

.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;
}


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

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

}


.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;
    }
}

.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;
    margin-left: 8px;
}
</style>