shuhi-app/pages/index/offline/check-order.vue

<template>
    <view class="container">
		<view class="book-list">
			<book-item v-for="(book, index) in bookList" :key="index" :book="book" @remove="removeBook" />
		</view>

        <!-- 底部信息和按钮 -->
        <view class="footer fixed-bottom flex-d" style="padding-top:10rpx">
            <text class="pad-10">共 {{ totalBooks }} 本，预估回收价 ¥{{ totalPrice }}</text>
            <view class="flex-a mt-12">
                <u-button size="large" type="primary" text="提交" @click="handleSubmit" />
                <u-button size="large" type="warning" text="扫码" @click="handleScan" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import BookItem from '../components/BookItem.vue';
import PageScroll from '@/components/PageScroll/index.vue';

const bookList = ref([
    {
        title: '动物解剖生理第三版',
        isbn: '9787109260962',
        price: '39.6',
        discount: '0',
        quantity: '1/1',
        estimatedPrice: '2.8',
        reviewAmount: '0',
        good: 0,
        average: 0,
        poor: 0,
        image: 'https://example.com/book.jpg'
    },
    // ...更多书籍
]);

const totalBooks = ref(bookList.value.length);
const totalPrice = ref(bookList.value.reduce((sum, book) => sum + parseFloat(book.estimatedPrice), 0).toFixed(2));

const removeBook = (book) => {
    const index = bookList.value.indexOf(book);
    if (index > -1) {
        bookList.value.splice(index, 1);
        updateTotals();
    }
};

const updateTotals = () => {
    totalBooks.value = bookList.value.length;
    totalPrice.value = bookList.value.reduce((sum, book) => sum + parseFloat(book.estimatedPrice), 0).toFixed(2);
};

const handleSubmit = () => {
    console.log('提交订单');
};

const handleScan = () => {
    uni.scanCode({
        success: (res) => {
            console.log('扫码结果:', res.result);
            // 添加新书逻辑
        }
    });
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    padding: 12px;
	box-sizing: border-box;
	height: 100%;
	.book-list{
		height: calc(100% - 96px);
		overflow: auto;
	}
}

.footer {
    background-color: #fff;
    border-top: 1px solid #eee;
}
</style>