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>已查询ISBN：{{ 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-d flex-a-c">
                        <image class="book-image" :src="bookInfo.cover" mode="heightFix" />
                        <text class="ml-20 font-15">{{ bookInfo.bookName }}</text>
                    </view>

                    <view class="book-status">
                        <text class="status-text"
                            >状态：{{ bookInfo.recycleStatus ? "已加入回收书单" : "未加入回收书单" }}</text
                        >
                        <text class="time-text" v-if="bookInfo.recycleTime">加入时间：{{ bookInfo.recycleTime }}</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.expectPrice }}</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.lang || "-" }}</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.publish }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">出版时间：</text>
                            <text>{{ bookInfo.pubDate }}</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.contentBlurb }}</text>
                            <text class="section-title">作者简介:</text>
                            <text class="content-text">{{ bookInfo.anthorBlurb }}</text>
                            <text class="content-text">{{ bookInfo.catalog }}</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";
import { onLoad, onShow } from "@dcloudio/uni-app";

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) => {
    uni.$u.http.get(`/app/book/getBookByIsbn/${isbn}`).then((res) => {
        if (res.code == 200) {
            bookInfo.value = res.data;
        }
    });
};

onLoad(() => {
    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        searchValue.value = e.barcode;
        scannedISBN.value = e.barcode;
        loadBookInfo(e.barcode);
    });
    // #endif
});
onShow(() => {
    uni.$u.updateActivePageOnShow()
})
</script>

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

.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: 260rpx;
    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>