Jelajahi Sumber

fix 优化库存搜索下拉问题

ylong 2 bulan lalu
induk
melakukan
560de89191
3 mengubah file dengan 218 tambahan dan 221 penghapusan
  1. 1 1
      .env.dev.js
  2. 1 1
      components/pageScroll/index.vue
  3. 216 219
      pages/code/search.vue

+ 1 - 1
.env.dev.js

@@ -1,5 +1,5 @@
 export default {
     "NODE_ENV": 'development',
-    "apiUrl":"https://bk.shuhi.com",
+    "apiUrl":"https://bpi.shuhi.com",
     "apiUrlPrefix":"/api",
 };

+ 1 - 1
components/pageScroll/index.vue

@@ -175,6 +175,6 @@ export default {
     font-size: 24rpx;
     padding: 30rpx 0;
     justify-content: center;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
+    padding-bottom: 40rpx;
 }
 </style>

+ 216 - 219
pages/code/search.vue

@@ -1,220 +1,217 @@
-<template>
-    <view class="book-search">
-        <!-- 搜索框 - 固定在顶部 -->
-        <view class="search-container fixed-top">
-            <u-search v-model="searchKeyword" placeholder="输入ISBN/书名" :show-action="true" action-text="搜索"
-                :clearabled="true" @search="handleSearch" @clear="handleClear" @custom="handleSearch"></u-search>
-        </view>
-
-        <!-- 书籍列表 -->
-        <view class="content-wrapper">
-            <page-scroll ref="pageScroll" url="/token/activation/infoList" :immediate="true" :slot-empty="true"
-                :params="searchParams" @updateList="handleUpdateList">
-            <view class="book-list">
-                <view class="book-item" v-for="(item, index) in bookList" :key="index">
-                    <!-- 书籍封面 -->
-                    <view class="book-cover">
-                        <u-image :src="item.cover || defaultCover" width="120rpx" height="160rpx" border-radius="8rpx"
-                            :fade="true"></u-image>
-                    </view>
-
-                    <!-- 书籍信息 -->
-                    <view class="book-info">
-                        <view class="book-title">{{ item.bookName }}</view>
-                        <view class="book-isbn">ISBN: {{ item.isbn }}</view>
-                        <view class="book-author">作者: {{ item.author }}</view>
-                        <view class="book-publish">出版社: {{ item.publish }}</view>
-                        <view class="book-date">出版时间: {{ formatDate(item.pubDate) }}</view>
-                    </view>
-
-                    <!-- 库存信息 -->
-                    <view class="book-stock">
-                        <view class="stock-num">{{ item.stockNum }}</view>
-                        <view class="stock-label">库存</view>
-                    </view>
-                </view>
-            </view>
-
-            <!-- 空状态提示 -->
-            <template v-slot:empty>
-                <view class="empty-container">
-                    <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png" class="empty-image"
-                        mode="aspectFit" />
-                    <view class="empty-title">暂无搜索结果</view>
-                    <view class="empty-text">请尝试其他关键词</view>
-                </view>
-            </template>
-        </page-scroll>
-        </view>
-    </view>
-</template>
-
-<script>
-import pageScroll from '@/components/pageScroll/index.vue'
-
-export default {
-    components: {
-        pageScroll
-    },
-    data() {
-        return {
-            searchKeyword: '',
-            bookList: [],
-            searchParams: {},
-            defaultCover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/book-default.png'
-        };
-    },
-
-    // #ifdef MP-ALIPAY
-    onPullDownRefresh() {
-        this.$refs.pageScroll?.loadData(true, this.searchParams)
-    },
-    // #endif
-
-    methods: {
-        // 处理搜索
-        handleSearch() {
-            this.searchParams = {
-                searchContent: this.searchKeyword.trim()
-            };
-
-            // 重新加载数据
-            this.$refs.pageScroll?.loadData(true, this.searchParams);
-        },
-
-        // 清空搜索
-        handleClear() {
-            this.searchKeyword = '';
-            this.searchParams = {};
-            this.bookList = [];
-        },
-
-        // 更新列表数据
-        handleUpdateList(data) {
-            this.bookList = data;
-        },
-
-        // 格式化日期
-        formatDate(dateStr) {
-            if (!dateStr) return '';
-            const date = new Date(dateStr);
-            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.book-search {
-    min-height: 100vh;
-    background-color: #f5f5f5;
-}
-
-.search-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    background-color: #fff;
-    padding: 20rpx 30rpx;
-    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
-}
-
-.content-wrapper {
-    margin-top: 130rpx; /* 为固定搜索框留出空间 */
-}
-
-.book-list {
-    padding: 0 30rpx;
-}
-
-.book-item {
-    display: flex;
-    background-color: #fff;
-    padding: 30rpx;
-    margin-bottom: 20rpx;
-    border-radius: 16rpx;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-
-    .book-cover {
-        margin-right: 24rpx;
-        flex-shrink: 0;
-    }
-
-    .book-info {
-        flex: 1;
-
-        .book-title {
-            font-size: 32rpx;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 12rpx;
-            line-height: 1.4;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-        }
-
-        .book-isbn,
-        .book-author,
-        .book-publish,
-        .book-date {
-            font-size: 26rpx;
-            color: #666;
-            margin-bottom: 8rpx;
-            line-height: 1.3;
-        }
-
-        .book-isbn {
-            color: #999;
-            font-family: 'Courier New', monospace;
-        }
-    }
-
-    .book-stock {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        min-width: 80rpx;
-
-        .stock-num {
-            font-size: 36rpx;
-            font-weight: 600;
-            color: #52c41a;
-            margin-bottom: 8rpx;
-        }
-
-        .stock-label {
-            font-size: 24rpx;
-            color: #999;
-        }
-    }
-}
-
-.empty-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 25vh;
-
-    .empty-image {
-        width: 200rpx;
-        height: 200rpx;
-        margin-bottom: 30rpx;
-    }
-
-    .empty-title {
-        font-size: 32rpx;
-        color: #333;
-        margin-bottom: 16rpx;
-    }
-
-    .empty-text {
-        font-size: 28rpx;
-        color: #999;
-    }
-}
+<template>
+	<view class="book-search">
+
+		<!-- 书籍列表 -->
+		<view class="content-wrapper">
+			<page-scroll ref="pageScroll" url="/token/activation/infoList" :immediate="true" :slot-empty="true"
+				:params="searchParams" @updateList="handleUpdateList">
+
+				<!-- 搜索框 - 固定在顶部 -->
+				<view class="search-container">
+					<u-search v-model="searchKeyword" placeholder="输入ISBN/书名" :show-action="true" action-text="搜索"
+						:clearabled="true" @search="handleSearch" @clear="handleClear"
+						@custom="handleSearch"></u-search>
+				</view>
+
+				<view class="book-list">
+					<view class="book-item" v-for="(item, index) in bookList" :key="index">
+						<!-- 书籍封面 -->
+						<view class="book-cover">
+							<u-image :src="item.cover || defaultCover" width="120rpx" height="160rpx"
+								border-radius="8rpx" :fade="true"></u-image>
+						</view>
+
+						<!-- 书籍信息 -->
+						<view class="book-info">
+							<view class="book-title">{{ item.bookName }}</view>
+							<view class="book-isbn">ISBN: {{ item.isbn }}</view>
+							<view class="book-author">作者: {{ item.author }}</view>
+							<view class="book-publish">出版社: {{ item.publish }}</view>
+							<view class="book-date">出版时间: {{ formatDate(item.pubDate) }}</view>
+						</view>
+
+						<!-- 库存信息 -->
+						<view class="book-stock">
+							<view class="stock-num">{{ item.stockNum }}</view>
+							<view class="stock-label">库存</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 空状态提示 -->
+				<template v-slot:empty>
+					<view class="empty-container">
+						<image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png" class="empty-image"
+							mode="aspectFit" />
+						<view class="empty-title">暂无搜索结果</view>
+						<view class="empty-text">请尝试其他关键词</view>
+					</view>
+				</template>
+			</page-scroll>
+		</view>
+	</view>
+</template>
+
+<script>
+	import pageScroll from '@/components/pageScroll/index.vue'
+
+	export default {
+		components: {
+			pageScroll
+		},
+		data() {
+			return {
+				searchKeyword: '',
+				bookList: [],
+				searchParams: {},
+				defaultCover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/book-default.png'
+			};
+		},
+
+		// #ifdef MP-ALIPAY
+		onPullDownRefresh() {
+			this.$refs.pageScroll?.loadData(true, this.searchParams)
+		},
+		// #endif
+
+		methods: {
+			// 处理搜索
+			handleSearch() {
+				this.searchParams = {
+					searchContent: this.searchKeyword.trim()
+				};
+
+				// 重新加载数据
+				this.$refs.pageScroll?.loadData(true, this.searchParams);
+			},
+
+			// 清空搜索
+			handleClear() {
+				this.searchKeyword = '';
+				this.searchParams = {};
+				this.bookList = [];
+			},
+
+			// 更新列表数据
+			handleUpdateList(data) {
+				this.bookList = data;
+			},
+
+			// 格式化日期
+			formatDate(dateStr) {
+				if (!dateStr) return '';
+				const date = new Date(dateStr);
+				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.book-search {
+		 min-height: 100vh;
+		background-color: #f5f5f5;
+	}
+
+	.search-container {
+		z-index: 999;
+		background-color: #fff;
+		padding: 20rpx 30rpx;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
+		margin-bottom: 30rpx;
+	}
+
+	.book-list {
+		padding: 0 30rpx;
+		box-sizing: border-box;
+	}
+
+	.book-item {
+		display: flex;
+		background-color: #fff;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+		border-radius: 16rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+
+		.book-cover {
+			margin-right: 24rpx;
+			flex-shrink: 0;
+		}
+
+		.book-info {
+			flex: 1;
+
+			.book-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 12rpx;
+				line-height: 1.4;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+			}
+
+			.book-isbn,
+			.book-author,
+			.book-publish,
+			.book-date {
+				font-size: 26rpx;
+				color: #666;
+				margin-bottom: 8rpx;
+				line-height: 1.3;
+			}
+
+			.book-isbn {
+				color: #999;
+				font-family: 'Courier New', monospace;
+			}
+		}
+
+		.book-stock {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			min-width: 80rpx;
+
+			.stock-num {
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #52c41a;
+				margin-bottom: 8rpx;
+			}
+
+			.stock-label {
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+	}
+
+	.empty-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 25vh;
+
+		.empty-image {
+			width: 200rpx;
+			height: 200rpx;
+			margin-bottom: 30rpx;
+		}
+
+		.empty-title {
+			font-size: 32rpx;
+			color: #333;
+			margin-bottom: 16rpx;
+		}
+
+		.empty-text {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
 </style>