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" style="flex: 1.5">
                    <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" :disabled="item.status != 8 || item.status != 9"
                >到货审核</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(() => {
    let nickName = props.item.userNick || props.item.nickName;
    if (!nickName) return "";
    return nickName.charAt(0) + "*".repeat(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.redirectTo({
        url: `/pages/index/detail/index?id=${props.item.orderId}`,
    });
};

// 查看
const handleView = () => {
    // 处理查看逻辑 type=2 表示查看订单
    uni.redirectTo({
        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>