shuhi-app/pages/index/entry/scan-book.vue

<template>
	<view class="container">
		<!-- 顶部搜索框 -->
		<u-sticky>
			<view class="search-area">
				<u-search v-model="searchValue" placeholder="扫描/输入ISBN或SH码" :show-action="true" actionText="查询"
					@search="handleSearch" @custom="handleSearch">
					<template #suffixIcon>
						<u-icon name="close" size="20" v-if="searchValue" @click="searchValue = ''" />
					</template>
				</u-search>
			</view>
		</u-sticky>

		<!-- 已扫描ISBN显示 -->
		<view class="isbn-display" v-if="scannedISBN">
			<text>已成功添加：{{ scannedISBN }}</text>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 空状态 -->
			<view class="empty-state" v-if="!bookInfo">
				<u-empty mode="data" text="暂无扫描数据" margin-top="100" />
			</view>

			<!-- 书籍详情 -->
			<view class="book-detail" v-else>
				<view class="common-card mb-20">
					<view class="flex flex-a-e">
						<image class="book-image" :src="bookInfo.image" mode="heightFix" />
						<text class="ml-20 font-15">{{bookInfo.name}}</text>
					</view>

					<view class="book-status">
						<text class="status-text">状态：已加入回收书单</text>
						<text class="time-text">加入时间：{{ bookInfo.addTime }}</text>
					</view>
				</view>
				<!-- 基本信息 -->
				<view class="common-card info-section mb-20">
					<view class="price-info">
						<text class="label">定价：</text>
						<text class="price">¥{{ bookInfo.price }}</text>
						<text class="recycle-price">回收价：¥{{ bookInfo.recyclePrice }}</text>
					</view>

					<view class="book-info">
						<view class="info-item">
							<text class="label">ISBN：</text>
							<text>{{ bookInfo.isbn }}</text>
						</view>
						<view class="info-item">
							<text class="label">语言：</text>
							<text>{{ bookInfo.language }}</text>
						</view>
						<view class="info-item">
							<text class="label">作者：</text>
							<text>{{ bookInfo.author }}</text>
						</view>
						<view class="info-item">
							<text class="label">出版社：</text>
							<text>{{ bookInfo.publisher }}</text>
						</view>
						<view class="info-item">
							<text class="label">出版时间：</text>
							<text>{{ bookInfo.publishDate }}</text>
						</view>
					</view>
				</view>

				<!-- 简介和轨迹 -->
				<view class="common-card tabs-section" style="padding:0">
					<u-tabs :list="tabsList" v-model="currentTab" lineColor="#19be6b" />
					<view class="tab-content">
						<view v-if="currentTab === 0" class="intro-content">
							<text class="section-title">内容简介:</text>
							<text class="content-text">{{ bookInfo.introduction }}</text>
							<text class="section-title">作者简介:</text>
							<text class="content-text">{{ bookInfo.authorIntro }}</text>
						</view>
						<view v-else class="track-content">
							<text>{{ bookInfo.track }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部扫描按钮 -->
		<view class="fixed-bottom">
			<u-button size="large" type="primary" text="扫码（ISBN或SH码）" @click="handleScan" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const searchValue = ref('');
	const scannedISBN = ref('');
	const currentTab = ref(0);
	const tabsList = [{
			name: '简介'
		},
		{
			name: '轨迹'
		}
	];

	// 模拟书籍信息
	const bookInfo = ref(null);

	// 处理搜索
	const handleSearch = () => {
		if (!searchValue.value) return;
		loadBookInfo(searchValue.value);
	};

	// 处理扫描
	const handleScan = () => {
		uni.scanCode({
			success: (res) => {
				searchValue.value = res.result;
				scannedISBN.value = res.result;
				loadBookInfo(res.result);
			}
		});
	};

	// 加载书籍信息
	const loadBookInfo = (isbn) => {
		// 模拟数据
		bookInfo.value = {
			name: '圆圈正义',
			image: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png',
			addTime: '2023-05-15 12:15:12',
			price: '46',
			recyclePrice: '4.6[1折]',
			isbn: '9787015454545',
			language: '中文',
			author: '罗翔',
			publisher: '中国法治出版社',
			publishDate: '2019-08-12',
			introduction: '《圆圈正义》一书共收录作者的40篇微信文章...',
			authorIntro: '罗翔，男，中国政法大学教授...',
			track: '轨迹信息...'
		};
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 50px;
	}

	.search-box {
		padding: 12px;
		background-color: #fff;
	}

	.isbn-display {
		padding: 8px 12px;
		background-color: #e8f5e9;
		color: #19be6b;
		font-size: 14px;
	}

	.book-detail {
		margin: 12px;
		border-radius: 8px;
		overflow: hidden;
	}

	.book-image {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
		border-radius: 5px;
	}

	.book-status {
		padding: 12px;

		.status-text {
			font-size: 16px;
			color: #19be6b;
			margin-bottom: 4px;
			display: block;
		}

		.time-text {
			font-size: 14px;
			color: #999;
		}
	}

	.info-section {
		padding: 16px;

		.price-info {
			margin-bottom: 16px;

			.price {
				color: #19be6b;
				font-size: 18px;
				font-weight: bold;
				margin-right: 12px;
			}

			.recycle-price {
				color: #666;
				font-size: 14px;
			}
		}
	}

	.info-item {
		margin-bottom: 8px;
		font-size: 14px;

		.label {
			color: #666;
			margin-right: 8px;
		}
	}

	.tab-content {
		padding: 16px;
		padding-top: 0;

		.section-title {
			font-weight: bold;
			margin-top: 12px;
			margin-bottom: 6px;
			display: block;
		}

		.content-text {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
			margin-bottom: 16px;
		}
	}

	.footer {
		padding: 12px;
		background-color: #fff;
	}

	.empty-state {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>