book-hi/pages/home/components/ScanBookList.vue

<template>
	<view class="scan-book-list">
		<!-- 顶部提示 -->
		<view class="tip-text">
			套装书(相同ISBN相同的系列书籍)只需扫描其中一本，扫描价即套装价；需用户将整个套装全部寄出，缺册不予回收。
		</view>

		<!-- 书籍列表 -->
		<view class="book-list">
			<BookItem v-for="(book,index) in bookList" :key="book.isbn" :book="book" @delete="handleDeleteBook"
				@quantity-change="handleQuantityChange" />
		</view>
		
		<view class="link-wrap flex-a">
			<text class="link-btn flex-1" @click="goToScannedBooks">扫过的书 ></text>
			<text class="link-btn flex-1" @click="goToRules">卖书规则 ></text>
		</view>
	</view>
</template>

<script>
	import BookItem from './BookItem.vue'

	export default {
		components: {
			BookItem
		},
		props: {
			bookList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				books: []
			}
		},
		watch: {
			bookList: {
				handler(newVal) {
					this.books = newVal
				},
				deep: true,
				immediate:true
			}
		},
		methods: {
			handleDeleteBook(bookId) {
				this.books = this.books.filter(book => book.isbn !== bookId)
				this.$emit('updateBooks', this.books)
			},
			handleQuantityChange(data) {
				const book = this.books.find(book => book.isbn === data.isbn)
				if (book) {
					book.num = data.num
				}
				this.$emit('updateBooks', this.books)
			},
			onNext() {
				this.$emit('next')
			},
			goToScannedBooks() {
			    uni.navigateTo({
			        url: '/pages-home/pages/scaned-book'
			    })
			},
			goToRules() {
			    uni.navigateTo({
			        url: '/pages/rules/index'
			    })
			},
		}
	}
</script>

<style lang="scss">
	.scan-book-list {
		padding: 20rpx;

		.tip-text {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF8A4B;
			line-height: 36rpx;
		}
		
		.link-wrap {
			gap: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		
			.link-btn {
				height: 80rpx;
				background: #ffffff;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
			}
		}
	}
</style>