cashier_desktop/src/views/home/components/settleItem.vue

<template>
    <div class="item" v-for="item in props.list" :key="item.id">
        <div class="top">
            <div class="name">
                <span v-if="item.is_temporary" style="color: #999;"> [临时菜]</span>
                {{ item.product_name }}
            </div>
            <div class="n">x{{ formatDecimal(+item.number, 2, true) }}</div>
            <div class="p"
                :class="{ undeline: (goodsStore.showVipPrice && item.memberPrice) || item.is_time_discount }">
                <template v-if="item.is_temporary">
                    <template v-if="item.is_gift">
                        <span class="t_line">￥{{ formatDecimal(+item.discount_sale_amount) }}</span>
                        ￥0.00
                    </template>
                    <template v-else>
                        <span>￥{{ formatDecimal(item.discount_sale_amount * item.number) }}</span>
                    </template>
                </template>
                <template v-else>
                    <template v-if="item.is_gift">
                        <span class="t_line">￥{{ formatDecimal(+item.lowPrice) }}</span>
                        ￥0.00
                    </template>
                    <template v-else>
                        <template v-if="+item.discount_sale_amount">
                            <span class="t_line">
                                ￥{{ formatDecimal(+item.lowPrice) }}
                            </span>
                            <span>
                                ￥{{ formatDecimal(+item.discount_sale_amount) }}
                            </span>
                        </template>
                        <template v-else>
                            ￥{{ formatDecimal(+item.lowPrice) }}
                        </template>
                    </template>
                </template>
            </div>
        </div>
        <div class="gift_wrap" style="padding-bottom: 10px;">
            <div class="name">备注：{{ item.remark || '无' }}</div>
        </div>
        <div class="tag_wrap" v-if="item.sku_name">
            <div class="tag" v-for="item in item.sku_name.split(',')">
                {{ item }}
            </div>
        </div>
        <div class="gift_wrap" v-if="item.is_gift">
            <div class="name">
                <span v-if="item.is_gift">[赠送]</span>
            </div>
            <div class="n"></div>
            <div class="p">
                <span>
                    -￥<template v-if="item.is_temporary || +item.discount_sale_amount">
                        {{ formatDecimal(item.discount_sale_amount * item.number) }}
                    </template>
                    <template v-else>{{ formatDecimal(item.lowPrice * item.number) }}</template>
                </span>
            </div>
        </div>
        <div class="gift_wrap" v-if="item.returnNum">
            <div class="name">
                <span>[退菜]</span>
            </div>
            <div class="n">x{{ item.returnNum }}</div>
            <div class="p">
                <span>
                    -￥<template v-if="item.is_temporary || +item.discount_sale_amount">
                        {{ formatDecimal(item.discount_sale_amount * item.returnNum) }}
                    </template>
                    <template v-else>{{ formatDecimal(item.lowPrice * item.returnNum) }}</template>
                </span>
            </div>
        </div>
        <div class="gift_wrap" v-if="!item.is_temporary && !item.is_gift && +item.discount_sale_amount">
            <div class="name">
                <span>[改价优惠]</span>
            </div>
            <div class="n"></div>
            <div class="p">
                <span>
                    -￥{{ formatDecimal((item.lowPrice - item.discount_sale_amount) * item.number) }}
                </span>
            </div>
        </div>
        <div class="gift_wrap" v-if="goodsStore.showVipPrice && item.memberPrice && !item.is_time_discount">
            <div class="name">
                <span>[会员价]</span>
            </div>
            <div class="n"></div>
            <div class="p">
                <span>
                    ￥{{ formatDecimal(+item.memberPrice) }}
                </span>
            </div>
        </div>
        <div class="gift_wrap" v-if="item.is_time_discount">
            <template v-if="item.time_dicount_mode == 'vip-price'">
                <div class="name">
                    <span>[会员价]</span>
                </div>
                <div class="n"></div>
                <div class="p">
                    <span>
                        ￥{{ formatDecimal(+item.memberPrice) }}
                    </span>
                </div>
            </template>
            <template v-else>
                <div class="name">
                    <span>[限时折扣]</span>
                </div>
                <div class="n"></div>
                <div class="p">
                    <span>
                        ￥{{ formatDecimal(+item.time_discount_price) }}
                    </span>
                </div>
            </template>
        </div>
        <div class="gift_wrap" v-if="+item.pack_number">
            <div class="name">
                <span>[打包费]</span>
            </div>
            <div class="n"></div>
            <div class="p">
                <span v-if="item.is_temporary">
                    +￥0.00
                </span>
                <span v-else>
                    +￥{{ formatDecimal(item.pack_number * item.packFee) }}
                </span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { formatDecimal } from '@/utils/index.js'
import { useGoods } from '@/store/goods.js'

const goodsStore = useGoods()

const props = defineProps({
    list: {
        type: [Array],
        default: []
    }
})
</script>

<style scoped lang="scss">
.item {
    padding: var(--el-font-size-base) 0;
    border-bottom: 1px solid #ececec;


    .name {
        flex: 1.5;
    }

    .n {
        width: 30px;
        color: #555;
    }

    .p {
        flex: 1;
        color: #555;
        display: flex;
        justify-content: flex-end;

        &.undeline {
            color: #999;
            text-decoration: line-through;
        }
    }

    .t_line {
        text-decoration: line-through;
        color: #999;
        margin-right: 4px;
    }

    .top {
        display: flex;
        padding-bottom: 6px;
    }

    .gift_wrap {
        display: flex;
        color: #999;
        font-size: 16px;

        .n {
            color: #999;
        }

        .p {
            color: var(--el-color-danger);
        }
    }

    .tag_wrap {
        display: flex;
        flex-wrap: wrap;

        .tag {
            padding: 2px 6px;
            background-color: var(--el-color-danger);
            color: #fff;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

    .packge_Wrap {
        display: flex;
        align-items: center;

        .icon_item {
            $size: 40px;
            width: $size;
            height: $size;
            background-color: #e2e2e2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
    }
}
</style>