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

<script>
export default {
    props: {
        order: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        handerBtnClick(btnType, order) {
            this.$emit('handleBtnClick', btnType, order);
        }
    }
}

</script>




<template>
    <view class="orderCard">
        <view class="bandAndPrice">
            <view class="bandName">{{ order.itemBrand || '暂无品牌' }}</view>
            <view class="price">￥{{ order.priceRange }}</view>
        </view>

        <view class="mainLind">
            <view class="mainLindImg">
                <image :src="'/static/acceptOrder/orderCardPic.jpg'" alt="" />
            </view>
            <view class="mainLindInfo">
                <view class="itemName">{{ order.item || '暂无项目' }}</view>
                <view>发单人:{{ order.createNickName || '未知' }}</view>
                <view>{{ order.sendDate || '暂无时间' }}</view>
            </view>
        </view>

        <view class="tags">
            <view class="tag" v-for="(tag, index) in order.tags" :key="index"
                :style="{ backgroundColor: tag.color, opacity: 0.8 }">
                {{ tag.name }}</view>

        </view>

        <view class="Btns">

            <view class="btnGroup"
                v-if="order && (order.status == '1' || order.status == null || order.status === undefined)">
                <view class="card-button" @click="handerBtnClick('acceptOrder', order)">立即接单</view>
                <view class=" card-button isBusy" @click="handerBtnClick('isBusy', order)">在忙</view>
            </view>

            <view class="btnGroup"
                v-if="order && (order.status == '2' || order.status == null || order.status === undefined)">
                <view class="card-button willFollow" @click="handerBtnClick('willFollow', order)">待跟进</view>
                <view class="card-button isBusy" @click="handerBtnClick('tag', order)">打标签</view>
            </view>

            <view class="btnGroup"
                v-if="order && (order.status == '3' || order.status == null || order.status === undefined)">
                <view class="card-button share" @click="handerBtnClick('share', order)">一键分享</view>
            </view>

            <view class="btnGroup"
                v-if="order && (order.status == '4' || order.status == null || order.status === undefined)">
                <view class="card-button oneFollow" @click="handerBtnClick('oneFollow', order)">待跟进</view>
            </view>

        </view>
    </view>
</template>




<style scoped lang="scss">
/* 订单卡片主容器 */
.orderCard {
    box-sizing: border-box;
    width: 95%;
    background-color: #fff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    padding: 20rpx;
}

/* 品牌和价格区域 */
.orderCard .bandAndPrice {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 品牌名称 */
.orderCard .bandAndPrice .bandName {
    font-size: 20rpx;
    font-weight: 700;
    border: 2px solid #2563EB;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #EFF6FF;
    color: #2563EB;
}

/* 价格 */
.orderCard .bandAndPrice .price {
    font-size: 30rpx;
    font-weight: 700;
}

/* 主要内容行 */
.orderCard .mainLind {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;
}

/* 主要内容行图片容器 */
.orderCard .mainLind .mainLindImg image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 20rpx;
}

/* 主要内容行信息容器 */
.orderCard .mainLind .mainLindInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    font-size: 24rpx;
    color: #6b7280;
}

/* 商品名称 */
.orderCard .mainLind .mainLindInfo .itemName {
    font-size: 30rpx;
    font-weight: 700;
    color: #374751;
}

/* 标签区域 */
.orderCard .tags {
    display: flex;
    gap: 10rpx;
}

/* 单个标签 */
.orderCard .tags .tag {
    font-size: 20rpx;
    font-weight: 700;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #EFF6FF;
    color: #fff;
}

/* 按钮区域 */
.orderCard .Btns {
    margin-top: 10rpx;
}

/* 按钮组 */
.orderCard .Btns .btnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;
}

/* 卡片按钮基础样式 */
.orderCard .Btns .btnGroup .card-button {
    font-size: 24rpx;
    font-weight: 700;
    border: 2rpx solid #2563EB;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #2563EB;
    color: #fff;
    width: 45%;
    text-align: center;
    cursor: pointer;
    height: 60rpx;
    line-height: 60rpx;
}

/* 忙碌状态按钮 */
.orderCard .Btns .btnGroup .card-button.isBusy {
    background-color: #fff;
    color: #6B7280;
    border-color: #6B7280;
}

/* 待跟进状态按钮 */
.orderCard .Btns .btnGroup .card-button.willFollow {
    background-color: #EFF6FF;
    color: #2563EB;
}

/* 分享按钮 */
.orderCard .Btns .btnGroup .card-button.share {
    width: 100%;
}

/* 单独跟进按钮 */
.orderCard .Btns .btnGroup .card-button.oneFollow {
    width: 100%;
    background-color: #EFF6FF;
    color: #2563EB;
}
</style>