shuhi-app/pages/my/components/orderItem.vue

<template>
    <view class="order-card">
        <!-- 用户信息 -->
        <view class="user-info">
            <image class="avatar" :src="item.imgPath" mode="aspectFill"></image>
            <view class="user-details">
                <text class="username">{{ item.plat == 1 ? '微信用户' : '支付宝用户' }} （{{ maskedNickName }}）</text>
                <text class="date">共卖出{{ item.totalNum }}本书</text>
                <text class="date">来自{{ item.sendSsq }}</text>
            </view>

            <view class="user-details right-items">
                <text class="date">{{ item.schedulePickupStartTime }}</text>
                <text class="status" :style="{ color: statusColor }">[{{ statusText }}]</text>
            </view>
        </view>

        <!-- 订单详情 -->
        <view class="order-details">
            <view class="detail-row flex flex-col">
                <view class="flex-1">
                    <text>订单ID：</text>
                    <text class="link" @click="copyToClipboard(item.orderId)">{{ item.orderId }}</text>
                </view>
                <view class="flex-1">
                    <text>运单号：</text>
                    <text class="link" @click="copyToClipboard(item.waybillCode)">{{ item.waybillCode }}</text>
                </view>
            </view>
            <view class="detail-row">
                <text class="flex-1">预估金额：{{ item.expectMoney || 0 }}</text>
                <text class="flex-1">审核金额：{{ item.finalMoney || '待核算' }}</text>
            </view>
            <view class="detail-row">
                <text>内部备注：{{ item.manageRemark ? item.manageRemark[0].remark : '-' }}</text>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <u-button size="small" type="primary" @click="handleAudit">到货审核</u-button>
            <u-button size="small" @click="handleView">查看</u-button>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    computed
} from 'vue'

const props = defineProps({
    item: {
        type: Object,
        default: () => { }
    }
})

const statusEnum = {
    "0": '创建',
    "1": '用户删除',
    "2": '下单(待初审)',
    "3": '初审(待取书)',
    "4": '初审未通过',
    "5": '快递取书(待签收)',
    "6": '快递签收(待收货)',
    "7": '物流签收(路由异常)',
    "8": '仓库收货(待审核)',
    "9": '审核中(审核未提交)',
    "10": '已审核(待付款)',
    "11": '已完成'
};

// 处理昵称显示
const maskedNickName = computed(() => {
    if (!props.item.nickName) return '';
    return props.item.nickName.charAt(0) + '*'.repeat(props.item.nickName.length - 1);
});

let statusText = computed(() => {
    return props.item.status ? statusEnum[props.item.status] : '-';
});

// 模拟数据
const statusColor = ref('#FF4D4F')

// 复制到剪贴板
const copyToClipboard = (text) => {
    uni.setClipboardData({
        data: text,
        success: () => {
            uni.showToast({
                title: '复制成功',
                icon: 'success'
            })
        }
    })
}

// 到货审核
const handleAudit = () => {
    // 处理到货审核逻辑
    uni.navigateTo({
        url: `/pages/index/detail/index?id=${props.item.orderId}`
    })
}

// 查看
const handleView = () => {
    // 处理查看逻辑 type=2 表示查看订单
    uni.navigateTo({  
        url: `/pages/index/detail/index?id=${props.item.orderId}&type=2`
    })
}
</script>

<style lang="scss" scoped>
.order-card {
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .user-info {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20rpx;

        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            margin-right: 20rpx;
        }

        .user-details {
            flex: 1;
            display: flex;
            flex-direction: column;

            &.right-items {
                align-items: flex-end;
            }

            .username {
                font-size: 28rpx;
                color: #333333;
                margin-bottom: 4rpx;
            }

            .date {
                font-size: 24rpx;
                color: #999999;
            }

            .status {
                font-size: 24rpx;
                font-weight: bold;
            }
        }
    }

    .order-details {
        font-size: 26rpx;
        color: #333333;
        margin-bottom: 20rpx;

        .detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12rpx;

            .link {
                color: #007BFF;
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }

    .action-buttons {
        display: flex;
        justify-content: space-between;

        :deep(.u-button) {
            flex: 1;
            margin: 0 10rpx;
            height: 60rpx;
            font-size: 26rpx;
        }
    }
}
</style>