shuhi-app/pages/index/audit/scan-order.vue

<template>
    <view class="container" @click="playGlobalSound">
        <u-navbar title="扫书查单" :border="false" fixed bgColor="#22ac38" leftIconColor="#fff"
            titleStyle="font-size:36rpx;color:#fff">
            <template #left>
                <u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
            </template>
            <template #right>
                <text style="color: #fff;font-size: 32rpx;" type="primary" @click="showModal = true">新增</text>
            </template>
        </u-navbar>



        <!-- 顶部操作栏 -->
        <u-sticky>
            <view class="header" @click="clearAll">清除全部</view>

            <!-- 提示信息 -->
            <view class="tips">
                <text>请勿录入审核为不良的书籍ISBN！</text>
                <text class="sub-tips">不良书籍的ISBN可能是错误的！</text>
            </view>
        </u-sticky>

        <!-- ISBN列表 -->
        <scroll-view scroll-y class="isbn-list">
            <view v-for="(item, index) in isbnList" :key="index" class="isbn-item">
                <view class="item-left">
                    <u-icon name="minus-circle-fill" color="#dd524d" size="24" @click="removeItem(index)" />
                    <text class="index">{{ index + 1 }}、</text>
                    <text class="isbn">{{ item.isbn }}</text>
                </view>

                <u-number-box v-model="item.quantity" :disableMinus="item.quantity <= 1"></u-number-box>
            </view>
        </scroll-view>

        <!-- 底部按钮 -->
        <view class="fixed-bottom">
            <u-button size="large" type="warning" text="扫码加书" @click="handleScan" />
            <u-button size="large" type="primary" text="查询" @click="handleQuery" />
        </view>


        <!-- ISBN Input Modal -->
        <u-popup :show="showModal" mode="center" customStyle="width: 84%;border-radius:10px">
            <view class="modal-content">
                <text>输入ISBN码</text>
                <u-input v-model="newIsbn" placeholder="请输入ISBN码" custom-style="margin:60rpx 0" />
                <view class="modal-buttons">
                    <u-button text="取消" @click="showModal = false" />
                    <u-button type="primary" text="确定" @click="addIsbn" />
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app"

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

// ISBN列表数据
const isbnList = ref([]);

const showModal = ref(false);
const newIsbn = ref('');

// 移除项目
const removeItem = (index) => {
    isbnList.value.splice(index, 1);
};

const goBack = () => {
    uni.navigateBack()
};
//清除全部
function clearAll() {
    isbnList.value.length = 0
}

// 添加或更新ISBN
const addOrUpdateIsbn = (isbn) => {
    const existingItem = isbnList.value.find(item => item.isbn === isbn);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        isbnList.value.push({
            isbn: isbn,
            quantity: 1
        });
    }
};

//处理isbn
function handleIsbn(isbn) {
    if (isValidISBN(isbn)) {
        addOrUpdateIsbn(isbn);
    } else {
        uni.$u.ttsModule.speak('不正确的ISBN码')
    }
}

// 扫码处理
const handleScan = () => {
    uni.scanCode({
        success: (res) => {
            handleIsbn(res.result)
        }
    });
};

// ISBN格式验证
const isValidISBN = (isbn) => {
    // 简单的ISBN-13验证
    return /^97[89]\d{10}$/.test(isbn);
};

// 查询处理
const handleQuery = () => {
    if (isbnList.value.length === 0) {
        uni.showToast({
            title: '请先添加ISBN',
            icon: 'none'
        });
        return;
    }
    uni.setStorageSync('isbnList', isbnList.value);
    uni.navigateTo({
        url: '/pages/index/audit/isbn-order'
    });
};


const addIsbn = () => {
    if (isValidISBN(newIsbn.value)) {
        addOrUpdateIsbn(newIsbn.value)
        showModal.value = false;
        newIsbn.value = '';
    } else {
        uni.$u.ttsModule.speak('不正确的ISBN码')
    }
};

onLoad(() => {
    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        addOrUpdateIsbn(e.barcode)
    })
    // #endif
})
onShow(() => {
    uni.$u.updateActivePageOnShow()
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    // #ifdef APP-PLUS
    padding-top: 84px;
    // #endif
}

.header {
    padding: 12px;
    background-color: #999;
    color: #fff;
    text-align: center;
}

.tips {
    padding: 16px;
    background-color: #f8f8f8;
    text-align: center;

    text {
        display: block;
        color: #666;
        font-size: 16px;
    }

    .sub-tips {
        font-size: 14px;
        margin-top: 4px;
    }
}

.isbn-list {
    flex: 1;
    padding: 12px;
    box-sizing: border-box;
    padding-top: 44px;
    // #ifdef APP-PLUS
    padding-top: 10px;
    // #endif
}

.isbn-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 4px;

    .item-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .index {
        color: #666;
    }

    .isbn {
        color: #333;
    }

}

.modal-content {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 10px;
}
</style>