ss_dc_wechat_mini_program/components/SsCarCard/index.vue

<template>
    <view class="car-card" :class="statusClass" @click="handleCardClick">
        <!-- 第一行：车辆名称 -->
        <view class="car-title">
            {{ carData.name || '别克GL8' }}
        </view>
        <!-- {{ carData }} -->
        <!-- 第二行：左右结构 -->
        <view class="car-info">
            <!-- 左边：车辆图片 -->
            <view class="car-image-container">
                <image class="car-image" :src="getImageUrl(carData.image)" mode="aspectFill" />
            </view>

            <!-- 右边：车辆信息 -->
            <view class="car-details">
                <view class="detail-item car-name">
                    {{ carData.wph }}
                </view>
                <view class="detail-item seats" v-for="wp in carData.wpcsList">
                    {{ wp.mc }} : {{ wp.sz || wp.zf }}
                </view>

                <!-- <view class="detail-item car-color">
                    {{ carData.color || '白色' }}
                </view>-->
                <view class="detail-item car-type">
                    {{ carData.type || '商务车' }}
                </view> 
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'
import { getImageUrl } from '@/utils/util'

// Props
const props = defineProps({
    // 车辆数据
    carData: {
        type: Object,
        default: () => ({})
    },
    // 车辆状态：'available' | 'reserved' | 'disabled'
    status: {
        type: String,
        default: 'available',
        validator: (value) => ['available', 'reserved', 'disabled'].includes(value)
    }
})

// Emits
const emit = defineEmits(['click', 'select'])


// 计算状态样式类
const statusClass = computed(() => {
    return `status-${props.status}`
})

// 处理卡片点击
const handleCardClick = () => {
    if (props.status === 'disabled') {
        return // 禁用状态和已预约状态不响应点击
    }

    emit('click', props.carData)
    emit('select', props.carData)
}

// 移除 onMounted 中的异步获取逻辑，现在在父组件中处理
// onMounted(async () => {
//     // 更新物品类型
//     const result = await commonApi.getDictByCbNameAndValue('wplb', props.carData.wplbm)
//     props.carData.type = result.data.result[props.carData.wplbm]
// })
</script>

<style lang="scss" scoped>
.car-card {
    background: #FFFFFF;
    border-radius: 8rpx;
    overflow: visible;
    padding: 34rpx;
    margin-bottom: 34rpx;
    box-shadow: 2rpx 6rpx 6rpx rgba(4, 0, 0, 0.15);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;

    // 可预约状态 - 绿色
    &.status-available {
        background-color: #c7ffe0;
    }

    // 已被预约状态 - 橙色（不可更改）
    &.status-reserved {
        background-color: #ffb882;
    }

    // 禁用状态 - 灰色
    &.status-disabled {
        background-color: #f5f5f5;
        opacity: 0.6;
    }
}

.car-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #000000;
    margin-bottom: 17rpx;
    text-align: left;
}

.car-info {
    display: flex;
    align-items: flex-start;
    gap: 45rpx;
}

.car-image-container {
    flex-shrink: 0;
    width: 380rpx;
    height: 212rpx;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #f8f8f8;
}

.car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    min-width: 0;
}

.detail-item {
    font-size: 34rpx;
    color: #333;
    line-height: 48rpx;


}

// 禁用状态下的文字颜色
.status-disabled {

    .car-title,
    .detail-item {
        color: #999 !important;
    }

    .detail-item.seats {
        color: #bbb !important;
    }
}

// 响应式适配
@media (max-width: 750rpx) {
    .car-card-content {
        padding: 20rpx;
    }

    .car-image-container {
        width: 160rpx;
        height: 100rpx;
    }

    .car-title {
        font-size: 32rpx;
    }

    .detail-item {
        font-size: 26rpx;

        &.seats {
            font-size: 28rpx;
        }

        &.car-name {
            font-size: 28rpx;
        }
    }
}
</style>