shuhi-app/pages/book/index.vue

<template>
    <page-scroll ref="pageScrollRef" :loadmore="loadMore" :loading="loading" :empty="isEmpty" emptyText="暂无搜索结果">
        <!-- 搜索框 -->
        <view class="search-header">
            <view class="search-box">
                <u-icon name="scan" size="24" color="#ffffff" @click="scanCode"></u-icon>
                <u-search v-model="searchText" placeholder="请输入ISBN" :showAction="false" :clearabled="true"
                    @search="handleSearch" @clear="handleClear" 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.coverUrl" mode="aspectFill"></image>
                    <view class="book-details">
                        <text class="book-title">{{ book.title }}</text>
                        <text class="book-isbn">ISBN: {{ book.isbn }}</text>
                        <text class="book-price">定价: {{ book.price }}</text>
                        <text class="book-set">套装: {{ book.isSet ? '是' : '否' }}</text>
                    </view>
                </view>
                <view class="book-action">
                    <u-icon name="edit-pen" size="20" color="#4cd964" @click="editBook(book)"></u-icon>
                </view>
            </view>
        </view>

        <feedback-popup v-model:show="showFeedback" @submit="handleFeedbackSubmit"></feedback-popup>
    </page-scroll>
</template>

<script setup>
import {
    ref,
    computed
} from 'vue'
import PageScroll from '@/components/pageScroll/index.vue'
import FeedbackPopup from './components/feedbackPopup.vue';

const showFeedback = ref(false)

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

// 页面滚动组件引用
const pageScrollRef = ref(null)

// 搜索相关
const searchText = ref('')
const loading = ref(false)
const bookList = ref([{
    id: 1,
    title: '公文写作教程',
    isbn: '9787040515555',
    price: '49.5',
    isSet: false,
    coverUrl: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png'
}])

// 是否为空
const isEmpty = computed(() => {
    return !loading.value && bookList.value.length === 0
})

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

    await loadData()
}

// 处理清除
function handleClear() {
    bookList.value = []
}

// 加载数据
async function loadData() {
    loading.value = true
    try {
        // 模拟API调用
        const res = await mockSearchBooks(searchText.value)
        bookList.value = res
    } catch (error) {
        uni.showToast({
            title: '加载失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

// 加载更多
async function loadMore() {
    if (loading.value) return
    page.value++
    await loadData()
}

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

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

// 模拟搜索API
function mockSearchBooks(isbn) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                id: 1,
                title: '公文写作教程',
                isbn: '9787040515555',
                price: '49.5',
                isSet: false,
                coverUrl: '/static/book-cover.jpg'
            }])
        }, 1000)
    })
}
</script>

<style lang="scss" scoped>
.search-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #4cd964;
    padding: 20rpx;

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

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