shuhi-app/pages/book/index.vue

<template>
	<view class="book-list" style="padding:0">
		<!-- 搜索框 -->
		<view class="search-header">
			<view class="search-box">
				<u-icon style="margin-right:16rpx" name="scan" size="30" color="#ffffff" @click="scanCode"></u-icon>
				<u-search height="80rpx" v-model="searchText" placeholder="请输入ISBN" :showAction="false"
					:clearabled="true" @search="handleSearch" bgColor="#ffffff"></u-search>
			</view>
		</view>

		<!-- 搜索结果列表 -->
		<view class="book-list" v-if="bookList.length > 0">
			<view class="book-item" v-for="(book, index) in bookList" :key="index">
				<view class="book-info">
					<image class="book-image" :src="book.cover" mode="aspectFill"></image>
					<view class="book-details">
						<text class="book-title">{{ book.bookName }}</text>
						<text class="book-isbn">ISBN: {{ book.isbn }}</text>
						<text class="book-price">定价: {{ book.price }}</text>
						<text class="book-set">套装: {{ book.suit == 1 ? '是' : '否' }}</text>
					</view>
				</view>
				<view class="book-action">
					<u-icon name="edit-pen" size="30" color="#4cd964" @click="editBook(book)"></u-icon>
				</view>
			</view>
		</view>

		<feedback-popup ref="showFeedback" @submit="handleFeedbackSubmit"></feedback-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import FeedbackPopup from './components/feedbackPopup.vue';

	const showFeedback = ref(null)

	function handleFeedbackSubmit(data) {
		console.log('反馈数据:', data)
	}


	// 搜索相关
	const searchText = ref('')
	const bookList = ref([])

	// 处理搜索
	async function handleSearch() {
		if (!searchText.value) {
			uni.showToast({
				title: '请输入ISBN',
				icon: 'none'
			})
			return
		}

		await getSimpleBookInfoByIsbn(searchText.value)
	}

	// 加载数据
	async function getSimpleBookInfoByIsbn(isbn) {
		uni.$u.http.get(`/app/book/getSimpleBookInfoByIsbn/${isbn}`).then(res => {
			if (res.code == 200) {
				let bool = bookList.value.some(v => v.isbn == isbn)
				if (!bool) {
					bookList.value.push(res.data)
				}
			} else {
				uni.$u.toast(res.msg)
			}
		})
	}

	// 扫码
	function scanCode() {
		uni.scanCode({
			scanType: ['barCode'],
			success: (res) => {
				searchText.value = res.result
				getSimpleBookInfoByIsbn(res.result)
			},
			fail: () => {
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}

	// 编辑图书
	function editBook(book) {
		// 处理编辑逻辑
		showFeedback.value?.open(book)
	}

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

<style lang="scss" scoped>
	.search-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: rgb(34, 172, 56);
		padding: 20rpx;

		.search-box {
			display: flex;
			align-items: center;
			border-radius: 8rpx;
			padding: 0 20rpx;
		}

		:deep(.uni-input-placeholder) {
			font-size: 32rpx;
		}
	}

	.book-list {
		padding: 20rpx;

		.book-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

			.book-info {
				display: flex;
				flex: 1;

				.book-image {
					width: 160rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.book-details {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.book-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.book-isbn,
					.book-price,
					.book-set {
						font-size: 26rpx;
						color: #666;
						margin-top: 8rpx;
					}
				}
			}

			.book-action {
				padding: 20rpx;
			}
		}
	}
</style>