更新：增加“图书首页”功能

pages/book/search.vue

@@ -0,0 +1,293 @@
+<template>
+  <view class="search-page">
+    <!-- 搜索栏 -->
+    <nav-bar>
+      <template #title>
+        <view class="search-box">
+          <wd-search
+            v-model="keyword"
+            hide-cancel
+            @search="handleSearch"
+          />
+        </view>
+      </template>
+    </nav-bar>
+
+    <!-- 搜索结果 -->
+    <view class="search-results">
+      <view v-if="loading" class="loading-wrapper">
+        <wd-loading />
+      </view>
+      <view v-else-if="searchResults.length > 0" class="book-list">
+        <view
+          v-for="(item, index) in searchResults"
+          :key="index"
+          class="book-item"
+          @click="handleBookClick(item.bookId)"
+        >
+          <image :src="item.images" />
+          <text class="book-text">{{ item.name }}</text>
+          <text v-if="formatPrice(item)" class="book-price">{{
+            formatPrice(item)
+          }}</text>
+          <text v-if="formatStats(item)" class="book-flag">{{
+            formatStats(item)
+          }}</text>
+        </view>
+      </view>
+      <view v-else-if="isEmpty" class="empty-wrapper">
+        <wd-status-tip image="content" :tip="$t('global.searchNoResult')" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useI18n } from 'vue-i18n'
+import { homeApi } from '@/api/modules/home'
+import type { IBookWithStats, IVipInfo } from '@/types/home'
+
+const { t } = useI18n()
+
+// 状态定义
+const notchHeight = ref(0)
+const keyword = ref('')
+const searchResults = ref<IBookWithStats[]>([])
+const loading = ref(false)
+const isEmpty = ref(false)
+const vipInfo = ref<IVipInfo | null>(null)
+
+// 获取URL参数
+onLoad((options: any) => {
+  keyword.value = options.keyword
+
+  handleSearch()
+})
+
+/**
+ * 获取VIP信息
+ */
+const getVipInfo = async () => {
+  try {
+    const res = await homeApi.getVipInfo()
+    if (res.vipInfo) {
+      vipInfo.value = res.vipInfo
+    }
+  } catch (error) {
+    console.error('获取VIP信息失败:', error)
+  }
+}
+
+/**
+ * 处理搜索
+ */
+const handleSearch = async () => {
+  if (!keyword.value.trim()) {
+    return
+  }
+
+  loading.value = true
+  isEmpty.value = false
+
+  try {
+    const res = await homeApi.searchBooks({
+      key: keyword.value.trim(),
+      page: 1,
+      limit: 10,
+    })
+    if (res.bookList && res.bookList.length > 0) {
+      searchResults.value = res.bookList
+      isEmpty.value = false
+    } else {
+      searchResults.value = []
+      isEmpty.value = true
+    }
+  } catch (error) {
+    console.error('搜索失败:', error)
+    searchResults.value = []
+    isEmpty.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 处理清空
+ */
+const handleClear = () => {
+  keyword.value = ''
+  searchResults.value = []
+  isEmpty.value = false
+}
+
+/**
+ * 处理图书点击
+ */
+const handleBookClick = (bookId: number) => {
+  uni.navigateTo({
+    url: `/pages/book/detail?id=${bookId}`
+  })
+}
+
+/**
+ * 格式化价格
+ */
+const formatPrice = (book: IBookWithStats): string => {
+  // 已购买不显示价格
+  if (book.isBuy) return ''
+
+  // VIP用户且图书为VIP专享
+  if (vipInfo.value?.id && book.isVip === '2') {
+    const price = book.sysDictData?.dictValue
+    return price ? `$ ${price} NZD` : ''
+  }
+
+  // 普通用户
+  if (!vipInfo.value?.id) {
+    const price = book.sysDictData?.dictValue
+    return price ? `$ ${price} NZD` : ''
+  }
+
+  return ''
+}
+
+/**
+ * 格式化统计信息
+ */
+const formatStats = (book: IBookWithStats): string => {
+  if (book.readCount && book.readCount > 0) {
+    return `${book.readCount}${t('home.readingCount')}`
+  }
+
+  if (book.buyCount && book.buyCount > 0) {
+    return `${book.buyCount}${t('home.purchased')}`
+  }
+
+  return ''
+}
+
+/**
+ * 页面加载
+ */
+onMounted(async () => {
+  // 获取刘海高度
+  const systemInfo = uni.getSystemInfoSync()
+  notchHeight.value = systemInfo.safeArea.top
+
+  // 获取VIP信息
+  await getVipInfo()
+})
+</script>
+
+<style lang="scss" scoped>
+.search-page {
+  min-height: 100vh;
+  background: #f7faf9;
+}
+
+.search-box {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  --wot-search-padding: 0;
+  --wot-search-side-padding: 0;
+  :deep() {
+    .wd-search {
+      background: transparent;
+    }
+  }
+}
+
+.search-header {
+  background: #fff;
+  padding: 20rpx;
+  padding-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  .search-bar-wrapper {
+    display: flex;
+    align-items: center;
+
+    .back-icon {
+      margin-right: 20rpx;
+      flex-shrink: 0;
+    }
+
+    .search-input {
+      flex: 1;
+    }
+  }
+}
+
+.search-results {
+  padding: 20rpx;
+}
+
+.loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100rpx 0;
+}
+
+.empty-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100rpx 0;
+}
+
+.book-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .book-item {
+    width: 49%;
+    background-color: #fff;
+    border-radius: 15rpx;
+    height: 575rpx;
+    position: relative;
+    margin-bottom: 20rpx;
+
+    image {
+      width: 85%;
+      margin: 25rpx auto 0;
+      border-radius: 15rpx;
+      height: 380rpx;
+      display: block;
+    }
+
+    .book-text {
+      display: block;
+      font-size: 28rpx;
+      color: #333;
+      line-height: 36rpx;
+      width: 80%;
+      margin: 15rpx auto 0;
+      max-height: 72rpx;
+      overflow: hidden;
+    }
+
+    .book-price {
+      position: absolute;
+      font-size: 28rpx;
+      color: #ff4703;
+      left: 30rpx;
+      bottom: 20rpx;
+    }
+
+    .book-flag {
+      display: block;
+      font-size: 26rpx;
+      color: #999;
+      position: absolute;
+      right: 6%;
+      bottom: 20rpx;
+    }
+  }
+}
+</style>