h5-dm-orderFront/src/views/order/goodsItem.vue

<template>
    <div class="goods-item">
        <el-card class="w-full" shadow="never" :body-style="{ padding: '10px' }">
            <p class="text-xl font-bold flex" style="justify-content: space-between;font-size:14px;">{{ props.goodsItem.title }}
                <span v-if="props.goodsItem.status==1" class="p-1 rounded ml-2" style="background-color: #e0eee0;font-size: 12px;color:red;height: 20px;padding: 2px;">已出单</span>
            </p>
            <!-- 添加规格展示区域 -->
            <div v-if="props.goodsItem.specsList && props.goodsItem.specsList.length > 0" class="mb-2">
                <el-tag
                    v-for="spec in props.goodsItem.specsList"
                    :key="spec.id"
                    size="small"
                    class="mr-1 mb-1"
                >
                    {{ spec.name }}: {{ spec.value }}
                </el-tag>
            </div>
            <div>
                <b style="color: coral">{{ props.goodsItem.summary }}</b>
                <span class="p-1 rounded ml-2" style="background-color: #e0eee0">{{
                    '×' + props.goodsItem.num
                }}</span>
                <span class="float-right">
                    <el-button-group size="small">
                        <el-button @click="reduce()" :disabled="props.goodsItem.status==1"> - </el-button>
                        <el-button @click="add()" :disabled="props.goodsItem.status==1"> + </el-button>
                    </el-button-group>
                </span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['add', 'reduce'])
const props = defineProps({
    goodsItem: {
        type: Object,
        default: () => ({})
    }
})
const add = () => {
    emit('add', props.goodsItem)
}
const reduce = () => {
    emit('reduce', props.goodsItem)
}
</script>

<style></style>