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, nextTick, onMounted } from "vue";
const props = defineProps({
    detail: {
        type: Object,
        default: () => ({}),
    },
    auditList: {
        type: Array,
        default: () => [],
    },
});

const auditCommentList = ref([]);

const initAuditList = (detail) => {
    if (!detail?.auditCommentList) return;
    auditCommentList.value = detail.auditCommentList.map((item, index) => ({
        ...item,
        idx: index,
        isbn: detail.isbn,
        comList: item.com ? (typeof item.com === "string" ? item.com.split(",") : item.com) : [],
    }));
};
watch(
    () => props.detail,
    () => {
        initAuditList(props.detail);
    },
    { deep: true, immediate: 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;
    if (sts == 1) {
        audit.comList = [];
    }
    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(","),
    }));
    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,
    initAuditList,
});
</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>