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

<template>
    <view class="order-card" :class="{ 'order-card-overTime': order && order.isDelay }"
        @click.stop="handleClick(order)">
        <view class="order-card-header">
            <view class="order-card-header-left">
                <view class="order-card-header-left-band" style="backgroundColor: #007AFF;"
                    v-show="order && order.itemBrand">
                    {{ order.itemBrand }}
                </view>
                <view class="order-card-header-left-band" v-for="value in (order && 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 && order.priceRange ? order.priceRange : '暂无价格' }}
                </view>
            </view>
        </view>
        <view class="order-card-content">
            <view class="order-card-content-left">
                <image :src="(order && order.image) ? order.image : '/static/acceptOrder/orderCardPic.jpg'"
                    mode="scaleToFill" />
            </view>
            <view class="order-card-content-right">
                <view>{{ order && order.item || '暂无项目' }}</view>
                <view>发单人：{{ order && order.createNickName || '未知' }}</view>
                <view>{{ order && order.sendDate || '暂无时间' }}</view>
            </view>
        </view>

        <view class="order-card-bottom">
            <u-row justify="between"
                v-if="order && (order.status == '1' || order.status == null || order.status === undefined)">
                <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">在忙（{{ buzyTime / 1000 }}s）</u-button>

                    </view>
                </u-col>
            </u-row>
            <u-row justify="between" v-if="order && 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 && 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>
            <u-row justify="between" v-if="order && order.status == '4'">
                <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>
// order.status 1未接，2已接单，3完成一键分享，4未接待跟进
export default {
    props: {
        order: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            buzyTime: 300000,
            // buzyTime: 5000,
            busyTimer: null,

        }
    },
    computed: {
        statue() {
            switch (this.order.status) {
                case 'pending':
                    return '待接单';
                case 'received':
                    return '已接单';
                case 'rejected':
                    return '已拒绝';
            }
        }
    },
    watch: {
        buzyTime: {
            handler(newVal) {
                // console.log('newVal', newVal);
                if (newVal == 0 && this.order) {
                    // 移动到最后
                    this.handleBusy(this.order)
                }
            },
            deep: true
        }
    },

    mounted() {
        // 只有当order对象存在时才启动定时器
        if (this.order) {
            this.openTimer()
            console.log('order', this.order);
        }

    },
    beforeDestroy() {
        this.closeTimer()
    },
    methods: {
        handleAcceptOrder(order) {
            console.log('立即接单', order);
            this.$emit('handleCardClick', order);
        },
        handleWillFollow(order) {
            console.log('待跟进', order);
        },
        handleBusy(order) {
            this.closeTimer()
            console.log('在忙', order);
            this.$emit('handleBuzyBtnClick', {
                ...order,
            });
        },
        handleTag(order) {
            console.log('打标签', order);
        },
        handleShare(order) {
            console.log('一键分享', order);
        },
        handleClick(order) {
            console.log('点击了订单', order);
            this.$emit('handleCardClick', order);
        },
        openTimer() {
            // 组件挂载时启动定时器
            console.log('组件挂载时启动定时器');
            this.busyTimer = setInterval(() => {
                this.buzyTime -= 1000;
            }, 1000);
        },
        closeTimer() {
            // 组件卸载时清理定时器，防止内存泄漏
            if (this.busyTimer) {
                clearInterval(this.busyTimer);
                this.busyTimer = null;
            }
        }

    }
}
</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>