shuhi-app/pages/index/detail/batch-audit.vue

<template>
    <view class="batch-audit">
        <BookItem
            v-for="(item, index) in scannedBooksDetail"
            :key="item.isbn"
            :item="item"
            showClose
            @close="(isbn) => handleClose(index, isbn)"
        />

        <view class="fixed-bottom">
            <u-button type="warning" size="large" @click="handleScanCode">扫码</u-button>
            <u-button type="primary" size="large" @click="showQualityModal">确定</u-button>
        </view>

        <u-modal
            :show="showModal"
            :title="'品相选择'"
            @cancel="closeModal"
            :showCancelButton="true"
            :closeOnClickOverlay="true"
            @confirm="handleAudit"
        >
            <view class="quality-selector" @click="playGlobalSound">
                <view class="quality-circle" :class="{ selected: isQualitySelected }" @click="toggleQuality">
                    <text>良好</text>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import BookItem from "./components/BookItem2.vue";

const detailMap = ref({});
const scannedBooksDetail = ref([]);
// 获取图书详情 /app/book/getSimpleBookInfoByIsbn/{isbn}
const getBookInfo = (isbn) => {
    if (detailMap.value[isbn]) {
        scannedBooksDetail.value.push(detailMap.value[isbn]);
        return;
    }
    uni.$u.http.get(`/app/book/getSimpleBookInfoByIsbn/${isbn}`).then((res) => {
        if (res.code == 200) {
            detailMap.value[isbn] = res.data;
            scannedBooksDetail.value.push(res.data);
        }
    });
};

const handleClose = (index, isbn) => {
    scannedBooksDetail.value.splice(index, 1);
    scannedBooks.value = scannedBooks.value.filter((item) => item != isbn);
};
//isbn正则校验是否符合
function checkIsbn(isbn) {
    const isbn13Regex = /^(?:97[89]-?\d{1,5}-?\d{1,7}-?\d{1,6}-?\d)$/;
    if (isbn13Regex.test(isbn)) {
        return true;
    }
    return false;
}
//存储已经扫码的图书
const scannedBooks = ref([]);
//扫码之后的逻辑
function handleScan(isbn) {
    if (!checkIsbn(isbn)) {
        let text = `不是正确的ISBN码`;
        uni.$u.ttsModule.speak(text);
        return;
    }

    //取 isbn 的后四位字符串进行播报
    let isbnStr = `${isbn.slice(-4)}`;

    let isbns = orderDetail.value.detailVoList.map((item) => item.isbn);
    //订单总数本
    if (isbns.includes(isbn)) {
        let book = orderDetail.value.detailVoList.find((item) => item.isbn == isbn);

        if (book.auditCommentList?.length > 0) {
            //未审核数量
            let notAuditNum = book.auditCommentList.filter((item) => item.sts === 0).length || 0;
            //已扫描书籍中当前isbn的数量
            let scannedNum = scannedBooks.value.filter((item) => item == isbn).length || 0;

            if (scannedNum >= notAuditNum) {
                let text = `${isbnStr}已超出订单中的数量`;
                return uni.$u.ttsModule.speak(text);
            } else {
                //扫描到套装书
                if (book.suit == 1) {
                    let text = `${isbnStr}请注意套装书是否齐全`;
                    uni.$u.ttsModule.speak(text);
                }
                //扫描到需要取出的书
                if (book.bookWarn == 1) {
                    let text = `请注意${isbnStr}需要取出`;
                    uni.$u.ttsModule.speak(text);
                }

                scannedBooks.value.push(isbn);
                getBookInfo(isbn);
            }
        }
    } else {
        let text = `此订单中不存在${isbnStr}这本书 `;
        uni.$u.ttsModule.speak(text);
    }
}

//扫码
function handleScanCode() {
    uni.scanCode({
        success: (res) => {
            handleScan(res.result);
        },
    });
}

const checkUserId = ref();
const orderId = ref();
const orderDetail = ref({});
const showModal = ref(false);
const isQualitySelected = ref(false);

const showQualityModal = () => {
    showModal.value = true;
};

const closeModal = () => {
    showModal.value = false;
    playGlobalSound()
};

//点击全局音效
function playGlobalSound(){
    uni.$u.playClickSound()
}

const toggleQuality = () => {
    isQualitySelected.value = !isQualitySelected.value;
};

//审核 /app/orderinfo/checkOrder
const handleAudit = () => {
    playGlobalSound()
    if (!isQualitySelected.value) {
        uni.$u.toast("请选择品相");
        uni.$u.ttsModule.speak("请选择品相");
        return;
    }

    let checkUserInfo = uni.getStorageSync("checkUserInfo");
    if (checkUserInfo.userId) {
        checkUserId.value = checkUserInfo.userId;
    }

    uni.$u.http
        .post("/app/orderinfo/checkOrderBatch", {
            checkUserId: checkUserId.value,
            orderId: orderId.value,
            checkList: scannedBooks.value.map((isbn) => ({ sts: 1, com: "", isbn })),
        })
        .then((res) => {
            if (res.code == 200) {
                uni.showToast({ title: "审核成功", icon: "none" });
                uni.$u.ttsModule.speak("审核成功");
                uni.navigateBack({ delta: 2 });
            } else {
                uni.$u.toast(res.msg);
            }
        });
};

onLoad((options) => {
    orderId.value = options.orderId;
    orderDetail.value = uni.getStorageSync("orderDetail");
    scannedBooks.value = uni.getStorageSync("scannedBooks");

    scannedBooks.value.forEach((isbn) => {
        getBookInfo(isbn);
    });

    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        if (e.barcode) {
            handleScan(e.barcode);
        }
    });
    // #endif
});
onShow(() => {
    uni.$u.updateActivePageOnShow();
    checkUserId.value = uni.getStorageSync("userInfo")?.userId;
    orderDetail.value = uni.getStorageSync("orderDetail");
});
onUnload(() => {
    uni.$u.cleanupOnPageUnload();
});
</script>

<style lang="scss" scoped>
.batch-audit {
    padding: 20rpx;
    box-sizing: border-box;
    padding-bottom: 140rpx;
}

.quality-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0;
}

.quality-circle {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    text {
        color: #fff;
        font-size: 28rpx;
    }

    &.selected {
        background-color: #4caf50;
    }
}
</style>