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

<template>
	<view class="container">
		<u-navbar title="扫书查单" :border="false" fixed safe-area-inset-top>
			<template #left>
				<u-icon name="arrow-left" color="#333333" size="20" @click="goBack"></u-icon>
			</template>
			<template #right>
				<u-text type="primary" text="新增" @click="showModal = true"></u-text>
			</template>
		</u-navbar>



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

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

		<!-- 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';

	// ISBN列表数据
	const isbnList = ref([{
			isbn: '9787050405548',
			quantity: 1
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		},
		{
			isbn: '9787050405548',
			quantity: 3
		}
	]);

	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
	}

	// 扫码处理
	const handleScan = () => {
		uni.scanCode({
			success: (res) => {
				// 验证ISBN格式
				if (isValidISBN(res.result)) {
					isbnList.value.push({
						isbn: res.result,
						quantity: 1
					});
				} else {
					uni.showToast({
						title: '无效的ISBN',
						icon: 'none'
					});
				}
			}
		});
	};

	// 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.navigateTo({
			url: "/pages/index/audit/isbn-order"
		})
		console.log('查询ISBN列表:', isbnList.value);
	};

	const addIsbn = () => {
		if (isValidISBN(newIsbn.value)) {
			isbnList.value.push({
				isbn: newIsbn.value,
				quantity: 1
			});
			showModal.value = false;
			newIsbn.value = '';
		} else {
			uni.showToast({
				title: '无效的ISBN',
				icon: 'none'
			});
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.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: 14px;
		}

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

	.isbn-list {
		flex: 1;
		padding: 12px;
		box-sizing: border-box;
	}

	.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>