crm-app-vue3/pages/acceptOrderOrder/compounts/orderCard.vue

<template>
    <view class="order-card" :class="{ 'order-card-overTime': order.isDelay }" @click.stop="handleClick(order)">
        <view class="order-card-header">
            <view class="order-card-header-left">
                <view class="order-card-header-left-band" v-for="value in order.tags" :key="value.id"
                    :style="{ backgroundColor: value.color }">
                    {{ value.name }}
                </view>
                <view class="order-card-header-left-band" v-if="order.tags.length == 0" style="backgroundColor: #999;">
                    暂无标签
                </view>
            </view>
            <view class="order-card-header-right">
                <view class="order-card-header-right-price">
                    ￥{{ order.priceRange ? order.priceRange : '暂无价格' }}
                </view>
            </view>
        </view>
        <view class="order-card-content">
            <view class="order-card-content-left">
                <image :src="order.image ? order.image : '/static/acceptOrder/orderCardPic.jpg'" mode="scaleToFill" />
            </view>
            <view class="order-card-content-right">
                <view>{{ order.item }}</view>
                <view>发单人：{{ order.createNickName }}</view>
                <view>{{ order.sendDate }}</view>
            </view>
        </view>

        <view class="order-card-bottom">
            <u-row justify="between" v-if="order.status == '1' || order.status == null">
                <u-col span="5.5">
                    <view @click.stop="handleAcceptOrder(order)">
                        <u-button type="primary" size="medium">立即接单</u-button>
                    </view>
                </u-col>
                <u-col span="5.5">
                    <view @click.stop="handleBusy(order)">
                        <u-button type="primary" size="medium">在忙</u-button>

                    </view>
                </u-col>
            </u-row>
            <u-row justify="between" v-if="order.status == '2'">
                <u-col span="5.5">
                    <view @click.stop="handleWillFollow(order)">
                        <u-button type="primary" size="medium">待跟进</u-button>

                    </view>
                </u-col>
                <u-col span="5.5">
                    <view @click.stop="handleTag(order)">

                        <u-button type="primary" size="medium">打标签</u-button>
                    </view>
                </u-col>
            </u-row>
            <u-row justify="between" v-if="order.status == '3'">
                <u-col span="12">
                    <view @click.stop="handleShare(order)">
                        <u-button type="primary" size="medium">一键分享</u-button>
                    </view>
                </u-col>
            </u-row>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        order: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        statue() {
            switch (this.order.status) {
                case 'pending':
                    return '待接单';
                case 'received':
                    return '已接单';
                case 'rejected':
                    return '已拒绝';
            }
        }
    },
    methods: {
        handleAcceptOrder(order) {
            console.log('立即接单',order);
             this.$emit('handleCardClick', order);
        },
        handleWillFollow(order) {
            console.log('待跟进', order);
        },
        handleBusy(order) {
            console.log('在忙', order);
        },
        handleTag(order) {
            console.log('打标签', order);
        },
        handleShare(order) {
            console.log('一键分享', order);
        },
        handleClick(order) {
            console.log('点击了订单', order);
            this.$emit('handleCardClick', order);
        }
    }
}
</script>

<style scoped>
/* 样式部分无修改，保持原样 */
.order-card {
    box-sizing: border-box;
    margin: 20rpx;
    padding: 16rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #000;
    border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}

.order-card-overTime {
    background-color: rgba(254, 242, 242, 1);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-card-header-left {
    display: flex;
}

.order-card-header-left>view {
    height: 30rpx;
    line-height: 30rpx;
    padding: 0 12rpx;
    border-radius: 10rpx;
    font-size: 20rpx;
    font-weight: 700;
    padding: 5rpx 12rpx;
    margin-right: 10rpx;
}

.order-card-header-left-band {
    --tw-text-opacity: 1;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    color: #fff;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    border: 1px solid #000;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.order-card-header-left-status {
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
    border: 1px solid #000;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.order-card-header-left-timeout {
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
    border: 1px solid #000;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.order-card-header-left-phone {
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
    border: 1px solid #000;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.order-card-header-right-price {
    font-weight: 800;
    font-size: 1.5rem;
}

.order-card-content {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}

.order-card-content image {
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
}

.order-card-content .order-card-content-right {
    flex: 1;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    font-size: 24rpx;
    font-weight: 700;
}

.order-card-content .order-card-content-right>view:nth-child(1) {
    font-size: 35rpx;
    margin-bottom: 10rpx;
}

.order-card-bottom {
    margin-top: 20rpx;
}

.order-card-bottom .u-button {
    height: 70rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 700;
}
</style>