shuhi-app/pages/index/detail/components/BookItem.vue

<template>
    <view class="card">
        <view class="flex w100">
            <view class="flex-d">
                <image style="width: 70px;height: 90px;" :src="item.cover" mode="aspectFill"></image>
                <view class="quantity mt-24" v-if="!showClose && !type">数量: {{ item.num }}</view>
            </view>
            <view class="book-info ml-20 flex-1">
                <view class="common-title mb-20">{{ item.bookName }}</view>
                <view class="flex flex-j-b mb-10">
                    <view class="isbn">ISBN: {{ item.isbn }}</view>
                    <view class="set">套装: {{ item.suit == 1 ? '是' : '不是' }}</view>
                </view>

                <view class="flex flex-j-b mb-10">
                    <view class="price">定价: {{ item.bookPrice }}</view>
                    <view class="estimate">预估单价: {{ (item.recycleDiscount * item.bookPrice * 0.1).toFixed(2) }}</view>
                </view>
                <view class="flex flex-j-b mb-10">
                    <view class="discount">回收折扣: {{ item.recycleDiscount }}</view>
                    <view class="review">审核金额: <text class="color-red">{{ item.finalMoney || 0 }}</text></view>
                </view>
                <template v-if="type=='review'">
                    <view class="">
                        <view>不良原因: <text :class="item.auditComment?.sts == 3 ? 'color-red' : ''">{{
                                item.auditComment?.com }}</text></view>
                        <view v-if="item.auditReviewComment?.com">
                            复审结果：<text class="color-red">{{ item.auditReviewComment?.com }}</text>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="quality mb-10">
                        品相: 良好({{ goodNum }}) 、 一般({{ item.averageNum || 0 }}) 、 <text
                            :class="item.badNum > 0 ? 'color-red' : ''">极差({{ badNum }})</text>
                    </view>
                    <view class="color-red" v-if="reasons">原因：{{ reasons }}</view>
                </template>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
    item: Object,
    showClose: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: ''
    }
})

//良好
const goodNum = computed(() => {
    return props.item.auditCommentList?.filter(v => v.sts == 1).length || 0
})
//极差  
const badNum = computed(() => {
    return props.item.auditCommentList?.filter(v => v.sts == 3).length || 0
})

const reasons = computed(() => {
    let list = props.item.auditCommentList
    if (!list) return ''
    if (list.length > 0) {
        let poorList = list.filter(v => v.sts == 3)
        if (poorList.length == 0) return ''
        return poorList.map(v => v.com).join(';')
    }
})
</script>

<style scoped>
.card {
    padding: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 6rpx;

    .card-content {
        display: flex;
        width: 100%;
    }

    .book-info {
        font-size: 26rpx;
    }

    .color-red {
        color: #bd3124;
    }
}
</style>