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

<template>
    <view class="book-info">
        <template v-if="isShow">
            <view class="font-bold mt-30 mb-30" style="padding: 0 20rpx">
                {{ bookList.length }}条记录，共{{ bookList.length }}本，已审{{ auditNum || 0 }}本
            </view>
        </template>

        <view class="book-info-item bg-white mt-12" :style="{ backgroundColor: item.backgroundColor }"
            v-for="item in formatList" :key="item.title" :id="item.id" v-show="item?.title">
            <view class="book-info-item-title">{{ item.title }}</view>
            <view class="book-info-item-list">
                <BookItem v-for="book in item.list" :key="book.bookId" :item="book" @click="handleBookClick(book)"
                    type="review" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import BookItem from "./BookItem.vue";
import toPinyin from "@/utils/toPinyin.js";
const props = defineProps({
    bookList: {
        type: Array,
        default: () => [],
    },
    detail: {
        type: Object,
        default: () => ({}),
    },
    isShow: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(["get-all-firstLetter"]);

//计算已审书籍数量
const auditNum = computed(() => {
    return props.bookList.filter((v) => !!v.auditReviewComment?.sts).length || 0;
});

function handleBookClick(book) {
    // if(book.auditReviewComment?.sts){
    //     uni.$u.toast("该书已复审完成");
    //     uni.$u.ttsModule.speak("该书已复审完成");
    //     return;
    // }
    uni.navigateTo({
        url: `/pages/index/detail/review-book?isbn=${book.isbn}&orderId=${props.detail.orderId}&auditReviewId=${book.auditReviewComment?.auditReviewId || ''}&index=${book.auditReviewComment?.index ?? ''}`,
    });
    uni.setStorageSync("auditBook", book);
}

function getAuditCateNum(cate) {
    let auditList = [];
    props.bookList.forEach((v) => {
        auditList.push(...(v.detailReviewVoList || []));
    });
    return auditList.filter((v) => v.sts == cate).length;
}

function getBookFirstLetter(bookName) {
    if (!bookName) return "其他";

    let firstChineseChar = null;
    for (let i = 0; i < bookName.length; i++) {
        const char = bookName.charAt(i);
        if (/^[\u4E00-\u9FA5]$/.test(char)) {
            firstChineseChar = char;
            break;
        }
    }

    let firstLetter = "";
    if (firstChineseChar) {
        const pinyin = toPinyin.chineseToPinYin(firstChineseChar);
        firstLetter = toPinyin.chineseToInitials(pinyin);
        if (!firstLetter && pinyin) {
            firstLetter = pinyin.charAt(0).toUpperCase();
        }
    } else {
        const char = bookName.charAt(0);
        if (/^[A-Za-z]$/.test(char)) {
            firstLetter = char.toUpperCase();
        }
    }

    if (!firstLetter || !/^[A-Z]$/.test(firstLetter)) {
        firstLetter = "其他";
    }
    return firstLetter;
}

function isBookReviewed(book) {
    const sts = book.auditReviewComment?.sts;
    return sts != null && sts !== 0 && sts !== "0";
}

function getReviewSts(book) {
    return Number(book.auditReviewComment?.sts);
}

//格式化书籍列表
const formatBookList = (list) => {
    const poorBooks = { title: "极差", list: [], backgroundColor: "#de868f", id: "poor" };
    const goodBooks = { title: "良好", list: [], backgroundColor: "#81b337", id: "good" };
    const otherBooks = [];

    const handleBookCategorization = (book) => {
        const firstLetter = getBookFirstLetter(book.bookName);

        let bool = otherBooks.some((item) => item.title == firstLetter);
        if (!bool) {
            otherBooks.push({ id: firstLetter, title: firstLetter, list: [{ ...book }] });
        } else {
            otherBooks.find((item) => item.title == firstLetter).list.push(book);
        }
    };

    list.forEach((book) => {
        if (isBookReviewed(book)) {
            const sts = getReviewSts(book);
            if (sts === 3) {
                poorBooks.list.push(book);
            } else if (sts === 1) {
                goodBooks.list.push(book);
            } else {
                handleBookCategorization(book);
            }
        } else {
            handleBookCategorization(book);
        }
    });

    return { poorBooks, goodBooks, otherBooks };
};

const formatList = ref([]);
watch(
    () => props.bookList,
    (newVal) => {
        let { poorBooks, goodBooks, otherBooks } = formatBookList(newVal);

        // 按照首字母排序 A-Z
        otherBooks.sort((a, b) => a.id.localeCompare(b.id));

        let poor = poorBooks.list.length > 0 ? poorBooks : {};
        let good = goodBooks.list.length > 0 ? goodBooks : {};
        formatList.value = [...otherBooks, poor, good];
        emit("get-all-firstLetter", otherBooks.map((item) => item.id));
    },
    { immediate: true, deep: true }
);
</script>

<style scoped>
.book-info-item-title {
    padding: 10rpx 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    border-bottom: 1px solid #e5e5e5;
}
</style>