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 class="mt-10 bind-code" style="padding: 10rpx 20rpx">
            SH码：未绑码
        </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, index) in auditList" :key="index">
                <u-tag size="large" :text="item.label" :plain="current != item.sts" type="primary" :name="item.sts"
                    @click="radioClick">
                </u-tag>
            </view>
        </view>

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

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

const auditList = ref([{ sts: 1, label: '品相良好' }, { sts: 2, label: '品相一般', disabled: true }, { sts: 3, label: '品相极差' }])
const current = ref(0)

const radioClick = (index) => {
    current.value = index

    let data = formatReason()
    emit('selected', data)
}

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: '图书馆/藏书印章' }
])

function formatReason() {
    return [
        {
            "isbn": props.detail.isbn,
            "sts": current.value,
            "com": selectedReasons.value.join(',')
        }
    ]
}

const emit = defineEmits(['selected'])
const selectedReasons = ref([]);
const toggleReason = (item) => {
    const index = selectedReasons.value.indexOf(item.label);
    if (index > -1) {
        selectedReasons.value.splice(index, 1);
    } else {
        selectedReasons.value.push(item.label);
    }

    let data = formatReason()
    emit('selected', data)
};
</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;
}
</style>