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 class="floating-sort-btn" @click="sortByAuditStatus">
            <u-icon name="list" color="#FFFFFF" size="22"></u-icon>
            <text class="btn-text">排序</text>
        </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) : [],
    }));
    sortByAuditStatus();
};
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;
};

/**
 * 排序审核列表，未审核的放在前面，已审核的放在后面
 * @returns {Array} 排序后的审核列表
 */
const sortByAuditStatus = () => {
    // 创建一个新数组避免直接修改原数组的顺序
    const sortedList = [...auditCommentList.value];
    
    // 排序：未审核状态(sts===0)的放前面，已审核的(sts===1或sts===3)放后面
    sortedList.sort((a, b) => {
        // 如果a是未审核(0)，而b是已审核(1或3)，则a排在前面
        if (a.sts === 0 && (b.sts === 1 || b.sts === 3)) {
            return -1;
        }
        // 如果b是未审核(0)，而a是已审核(1或3)，则b排在前面
        if (b.sts === 0 && (a.sts === 1 || a.sts === 3)) {
            return 1;
        }
        // 其他情况保持原顺序
        return 0;
    });
    
    // 更新引用，保持响应性
    auditCommentList.value = sortedList;
    
    return sortedList;
};

defineExpose({
    formatReason,
    initAuditList,
    sortByAuditStatus,
});
</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;
}

/* 悬浮排序按钮样式 */
.floating-sort-btn {
    position: fixed;
    right: 20rpx;
    bottom: 30%;
    width: 90rpx;
    height: 90rpx;
    background: linear-gradient(135deg, #2b85e4, #5cadff);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(43, 133, 228, 0.3);
}

.btn-text {
    font-size: 24rpx;
    color: #FFFFFF;
    margin-top: 4rpx;
}
</style>