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

<template>
    <view class="audit-info">
        <view class="font-bold mt-16" style="padding: 0 20rpx">
            该书共{{ detail.num }}本，其中：良好{{ getAuditCateNum(1) }}本，一般{{ getAuditCateNum(2) }}本，极差{{ getAuditCateNum(3) }}本
        </view>

        <view v-if="auditCommentList.length > 0" v-for="(audit, index) in auditCommentList" :key="index">
            <view class="mt-10 bind-code" style="padding: 10rpx 20rpx">
                第{{ index + 1 }}本的审核意见
            </view>

            <view class="mt-20 bg-white flex flex-j-a flex-a-c" style="padding:20rpx;border-radius: 10rpx;">
                <view class="u-page__tag-item" v-for="(item, idx) in auditList" :key="idx">
                    <u-tag size="large" :text="item.label" :plain="audit.sts != item.sts" type="primary"
                        :name="item.sts" :class="{ 'disabled': item.sts == 2 }"
                        @click="radioClick(audit, index, item.sts)">
                    </u-tag>
                </view>
            </view>

            <view class="mt-20 bg-white" style="padding:20rpx;border-radius: 10rpx;" v-if="audit.sts == 3">
                <view class="flex flex-a-c flex-wrap">
                    <view class="mr-10 reason-item" v-for="(item, idx) in reasonList" :key="idx"
                        @click="toggleReason(audit, index, item)"
                        :class="{ 'selected': audit.comList.includes(item.label) }">
                        {{ item.label }}
                    </view>
                </view>
            </view>
        </view>



    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    detail: {
        type: Object,
        default: () => ({})
    },
})


const auditCommentList = ref([])
watch(() => props.detail?.auditCommentList, (newVal) => {
    if (!newVal) return
    auditCommentList.value = newVal.map(item => ({
        ...item,
        isbn: props.detail.isbn,
        comList: item.com ? (typeof item.com === 'string' ? item.com.split(',') : item.com) : []
    }))
}, { immediate: true, deep: true })

const auditList = ref([{ sts: 1, label: '品相良好' }, { sts: 2, label: '品相一般', disabled: true }, { sts: 3, label: '品相极差' }])
const emit = defineEmits(['selected'])
const radioClick = (audit, index, sts) => {
    if (sts == 2) return
    audit.sts = sts
    auditCommentList.value[index] = audit
    formatReason()
}

const getAuditCateNum = (cate) => {
    return props.detail.auditCommentList?.filter(item => item.sts == cate)?.length || 0
}

let reasonList = ref([
    { sts: 3, label: '明显泛黄水印/发霉/明显异味' },
    { sts: 3, label: '老化泛黄褪色/污渍' },
    { sts: 3, label: '明显破损/脱胶缺页/书籍变型' },
    { sts: 3, label: '无此书' },
    { sts: 3, label: '印刷不清晰' },
    { sts: 3, label: '无防伪' },
    { sts: 3, label: '无外护封/无ISBN' },
    { sts: 3, label: '无此书多其他书' },
    { sts: 3, label: '笔记杂乱/习题做完' },
    { sts: 3, label: '有笔记贴' },
    { sts: 3, label: '套装缺册' },
    { sts: 3, label: '听力无光盘' },
    { sts: 3, label: '图书馆/藏书印章' }
])

const formatReason = () => {
    let list = auditCommentList.value.map((item, index) => ({
        ...item,
        idx: index,
        com: item.comList.join(',')
    }))
    console.log(list, 'list')
    return list
}

const toggleReason = (audit, index, item) => {
    const idx = audit.comList.indexOf(item.label)
    
    if (idx > -1) {
        audit.comList.splice(idx, 1)
    } else {
        audit.comList.push(item.label)
    }
    
    auditCommentList.value[index] = audit
}

defineExpose({
    formatReason
})
</script>

<style lang="scss" scoped>
.bind-code {
    background-color: #cecece;
    border-radius: 4rpx;
}

.reason-item {
    background-color: #f0f0f0;
    border-radius: 4rpx;
    padding: 14rpx 20rpx;
    margin-bottom: 16rpx;
}

.selected {
    background-color: #d0e8ff;
}

.disabled {
    background-color: #d0d0d0;
}
</style>