扫码&下订单页面

.env.dev.js

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

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

App.vue

@@ -1,156 +1,178 @@
 <script>
-export default {
-	globalData: {
-		// 胶囊距上距离
-		menuTop: 0,
-		// 导航栏高度
-		navBarHeight: 0,
-		// 胶囊距右方间距（方保持左、右间距一致）
-		menuRight: 0,
-		// 胶囊距底部间距（保持底部间距一致）
-		menuBotton: 0,
-		// 胶囊高度（自定义内容可与胶囊高度保证一致）
-		menuHeight: 0,
-		// 状态栏高度
-		statusBarHeight: 0,
-		// 安全距离
-		safeAreaHeight: 0,
-		// 胶囊宽度
-		menuWidth: 0,
-		// 窗口宽度
-		windowWidth:0,
-		// 窗口宽度高度
-		windowHeight:0,
-		// 常规子页面可操作区域高度
-		pageContentHeight:0,
-		
-	},
-	onLaunch(options) {
-		const that = this;
-		// 获取系统信息
-		const systemInfo = uni.getSystemInfoSync();
-		// 胶囊按钮位置信息
-		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
-		console.log(menuButtonInfo);
-		// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
-		that.globalData.menuTop = menuButtonInfo.top - systemInfo.statusBarHeight;
-		that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
-		that.globalData.menuWidth = menuButtonInfo.width;
-		that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
-		that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
-		that.globalData.menuHeight = menuButtonInfo.height;
-		that.globalData.statusBarHeight = systemInfo.statusBarHeight;
-		that.globalData.safeAreaHeight = systemInfo.safeAreaInsets.bottom;
-		that.globalData.windowWidth = systemInfo.windowWidth;
-		that.globalData.windowHeight = systemInfo.windowHeight;
-		that.globalData.pageContentHeight = systemInfo.windowHeight - (that.globalData.navBarHeight+that.globalData.menuTop+that.globalData.menuBotton);
-		
-		console.log(that.globalData);
-		
-	}
-};
+	export default {
+		globalData: {
+			// 胶囊距上距离
+			menuTop: 0,
+			// 导航栏高度
+			navBarHeight: 0,
+			// 胶囊距右方间距（方保持左、右间距一致）
+			menuRight: 0,
+			// 胶囊距底部间距（保持底部间距一致）
+			menuBotton: 0,
+			// 胶囊高度（自定义内容可与胶囊高度保证一致）
+			menuHeight: 0,
+			// 状态栏高度
+			statusBarHeight: 0,
+			// 安全距离
+			safeAreaHeight: 0,
+			// 胶囊宽度
+			menuWidth: 0,
+			// 窗口宽度
+			windowWidth: 0,
+			// 窗口宽度高度
+			windowHeight: 0,
+			// 常规子页面可操作区域高度
+			pageContentHeight: 0,
+
+		},
+		onLaunch(options) {
+			const that = this;
+			// 获取系统信息
+			const systemInfo = uni.getSystemInfoSync();
+			// 胶囊按钮位置信息
+			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+			console.log(menuButtonInfo);
+			// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
+			that.globalData.menuTop = menuButtonInfo.top - systemInfo.statusBarHeight;
+			that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
+			that.globalData.menuWidth = menuButtonInfo.width;
+			that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height +
+				systemInfo.statusBarHeight;
+			that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
+			that.globalData.menuHeight = menuButtonInfo.height;
+			that.globalData.statusBarHeight = systemInfo.statusBarHeight;
+			that.globalData.safeAreaHeight = systemInfo.safeAreaInsets.bottom;
+			that.globalData.windowWidth = systemInfo.windowWidth;
+			that.globalData.windowHeight = systemInfo.windowHeight;
+			that.globalData.pageContentHeight = systemInfo.windowHeight - (that.globalData.navBarHeight + that.globalData
+				.menuTop + that.globalData.menuBotton);
+
+			console.log(that.globalData);
+			this.slientLogin()
+		},
+		methods: {
+			slientLogin() {
+				uni.login({
+					success(res) {
+						uni.$u.http.post('/user/wxLogin', {
+							code: res.code
+						}).then((response) => {
+							if (response.code == 200) {
+								uni.setStorageSync('token', response.data.token)
+							}
+						})
+					},
+					fail: (err) => {
+						console.log(err, 'wx.login登录失败')
+					}
+
+				})
+			}
+		}
+	};
 </script>
 
 <style lang="scss">
-// ===
-// === 注意：此处导入的css，会作用于全部.vue文件，请适量导入
-// ===
-body{	
-	font-family: PingFang-SC-Regular, PingFang-SC;
-}
-page{
-	background-color: $app-theme-bg-gray-deep-color
-}
-@import 'uview-ui/index.scss';
-/* 解决小程序和app滚动条的问题 */
-/* #ifdef MP-WEIXIN || APP-PLUS */
-::-webkit-scrollbar {
-	display: none;
-	width: 0 !important;
-	height: 0 !important;
-	-webkit-appearance: none;
-	background: transparent;
-	color: transparent;
-}
-/* #endif */
-
-/* 解决H5 的问题 */
-/* #ifdef H5 */
-uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
-	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
-	display: none;
-	width: 0 !important;
-	height: 0 !important;
-	-webkit-appearance: none;
-	background: transparent;
-	color: transparent;
-}
-/* #endif */
-
-.shu-elip-1{
-	overflow:hidden;
-	text-overflow:ellipsis;
-	white-space:nowrap;
-}
-.shu-elip-2 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  white-space: normal !important;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-// 导出 scss 变量用于在 script 下使用
-.price_color{
-	color: $app-theme-text-money-color;
-}
-.color_blue{
-	color: $app-theme-blue;
-}
-
-.btnGroup{
-	display: flex;
-	align-items: center;
-	.btn{
-		margin: 0 10rpx;
+	// ===
+	// === 注意：此处导入的css，会作用于全部.vue文件，请适量导入
+	// ===
+	body {
+		font-family: PingFang-SC-Regular, PingFang-SC;
 	}
-}
 
+	page {
+		background-color: $app-theme-bg-gray-deep-color
+	}
 
-.mallbtn {	
-		min-width: 200rpx;
-		line-height: 66rpx;
-		padding: 0 20rpx;
-		border-radius: 36rpx;
-		color: #ffffff;
-		margin-right: 20rpx;
-		text-align: center;
-		flex: 1;
-		padding: 0 30rpx;
-}
-.soldOutBtn{
-	@extend .mallbtn;
-	background-color: $app-theme-nobuy-bg-color;
-}
-.joinCartBtn {
-	@extend .mallbtn;
-	background-color: $app-theme-joincart-bg-color;
-}
-.buyBtn {
-	@extend .mallbtn;
-	background-color: $app-theme-buybtn-bg-color;
-}
+	@import 'uview-ui/index.scss';
+	@import './static/css/common.scss';
+
+	/* 解决小程序和app滚动条的问题 */
+	/* #ifdef MP-WEIXIN || APP-PLUS */
+	::-webkit-scrollbar {
+		display: none;
+		width: 0 !important;
+		height: 0 !important;
+		-webkit-appearance: none;
+		background: transparent;
+		color: transparent;
+	}
 
+	/* #endif */
+
+	/* 解决H5 的问题 */
+	/* #ifdef H5 */
+	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
+		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
+		display: none;
+		width: 0 !important;
+		height: 0 !important;
+		-webkit-appearance: none;
+		background: transparent;
+		color: transparent;
+	}
+
+	/* #endif */
 
+	.shu-elip-1 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
+	.shu-elip-2 {
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
 
+	// 导出 scss 变量用于在 script 下使用
+	.price_color {
+		color: $app-theme-text-money-color;
+	}
 
+	.color_blue {
+		color: $app-theme-blue;
+	}
 
+	.btnGroup {
+		display: flex;
+		align-items: center;
 
+		.btn {
+			margin: 0 10rpx;
+		}
+	}
 
 
+	.mallbtn {
+		min-width: 200rpx;
+		line-height: 66rpx;
+		padding: 0 20rpx;
+		border-radius: 36rpx;
+		color: #ffffff;
+		margin-right: 20rpx;
+		text-align: center;
+		flex: 1;
+		padding: 0 30rpx;
+	}
 
+	.soldOutBtn {
+		@extend .mallbtn;
+		background-color: $app-theme-nobuy-bg-color;
+	}
 
+	.joinCartBtn {
+		@extend .mallbtn;
+		background-color: $app-theme-joincart-bg-color;
+	}
 
-</style>
+	.buyBtn {
+		@extend .mallbtn;
+		background-color: $app-theme-buybtn-bg-color;
+	}
+</style>

api/config.js

@@ -1,13 +1,12 @@
 import ENV_CONFIG from '@/.env.js'
-
 // api前缀
 export const HTTP_URL_DEV_PREFIX = '/api'
 export const HTTP_URL_PROD_PREFIX = '/api'
-const env = ENV_CONFIG[process.env.ENV_TYPE];
+const env = ENV_CONFIG[process.env.ENV_TYPE || 'dev'];
 // 基于uview-ui的http配置
 export const UVIEWUI_HTTP_CONFIG = {
 	// 地址
-	baseUrl: env.apiUrl+env.apiUrlPrefix,
+	baseUrl: env.apiUrl + env.apiUrlPrefix,
 	// 请求方式
 	method: 'post',
 	// 参数类型
@@ -29,12 +28,10 @@ export const UVIEWUI_HTTP_CONFIG = {
 
 // 此处配置请求拦截器
 export const httpRequest = (config) => {
-	console.log('请求拦截器>>>>>',config);
+	console.log('请求拦截器>>>>>', config);
 	const token = uni.getStorageSync('token');
-	console.log('token>>>>>',token);
-	config.header = {
-		token: token
-	}
+	console.log('token>>>>>', token);
+	config.header.Authorization = token ? `Bearer ${token}` : ''
 	return config;
 }
 
@@ -43,29 +40,29 @@ export const httpResponse = (res) => {
 	return new Promise(function(resolve, reject) {
 		if (res.statusCode == 200) {
 			console.log('成功>>>>');
-			if(res.data.code==0){
+			if (res.data.code == 0) {
 				uni.showToast({
-					icon:'none',
-					title:res.data.msg
+					icon: 'none',
+					title: res.data.msg
 				})
 				return reject(res.data);
 			}
-			if(res.data.code==401){
+			if (res.data.code == 401) {
 				console.log('接口未登录>>>>401');
 				// 未登录
 				uni.removeStorageSync('token');
 				uni.navigateTo({
-					url:'/pages/login/index'
+					url: '/pages/login/index'
 				})
 				return reject(res.data);
 			}
 			return resolve(res.data);
-		} 
+		}
 		if (res.statusCode == 401) {
 			console.log('未登录>>>>');
 			// 未登录
 			uni.navigateTo({
-				url:'/pages/login/index'
+				url: '/pages/login/index'
 			})
 			uni.removeStorageSync('token');
 			return reject(res.data);
@@ -79,7 +76,7 @@ export const httpResponse = (res) => {
 			})
 			return reject(res.data);
 		}
-		
+
 		return resolve(res.data);
 	})
 }
@@ -89,4 +86,4 @@ export const installHttpConfig = (Vue, vm) => {
 	Vue.prototype.$u.http.setConfig(UVIEWUI_HTTP_CONFIG);
 	Vue.prototype.$u.http.interceptor.request = httpRequest
 	Vue.prototype.$u.http.interceptor.response = httpResponse
-}
+}

components/common-dialog.vue

@@ -0,0 +1,129 @@
+<template>
+    <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="20">
+        <view class="dialog-content">
+            <!-- 标题 -->
+            <view v-if="title" class="dialog-title">{{ title }}</view>
+
+            <!-- 内容插槽 -->
+            <view class="dialog-body">
+                <slot></slot>
+            </view>
+
+            <!-- 按钮区域 -->
+            <view class="dialog-footer" :class="{ 'single-btn': !showCancel }">
+                <button v-if="showCancel" class="cancel-btn" @click="handleCancel">{{ cancelText }}</button>
+                <button class="confirm-btn" @click="handleConfirm">{{ confirmText }}</button>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    props: {
+        // 弹窗标题
+        title: {
+            type: String,
+            default: '温馨提示'
+        },
+        // 是否显示取消按钮
+        showCancel: {
+            type: Boolean,
+            default: true
+        },
+        // 确认按钮文字
+        confirmText: {
+            type: String,
+            default: '确定'
+        },
+        // 取消按钮文字
+        cancelText: {
+            type: String,
+            default: '取消'
+        }
+    },
+    data() {
+        return {
+            showPopup: false
+        }
+    },
+    methods: {
+        openPopup() {
+            this.showPopup = true
+        },
+        closePopup() {
+            this.showPopup = false
+        },
+        handleConfirm() {
+            this.$emit('confirm')
+            this.closePopup()
+        },
+        handleCancel() {
+            this.$emit('cancel')
+            this.closePopup()
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.dialog-content {
+    width: 580rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    overflow: hidden;
+
+    .dialog-title {
+        font-size: 32rpx;
+        color: #333333;
+        text-align: center;
+        padding: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+    }
+
+    .dialog-body {
+        padding: 0 40rpx;
+        text-align: center;
+		line-height: 48rpx;
+    }
+
+    .dialog-footer {
+        display: flex;
+		gap: 30rpx;
+		padding: 30rpx;
+		padding-bottom: 40rpx;
+
+        button {
+            flex: 1;
+            height: 88rpx;
+            line-height: 88rpx;
+            font-size: 32rpx;
+            border: none;
+            margin: 0;
+			&::after{
+				border: none;
+			}
+
+            &.cancel-btn {
+                background-color: #F5F5F5;
+                color: #333333;
+            }
+
+            &.confirm-btn {
+                background-color: #38C148;
+                color: #FFFFFF;
+            }
+        }
+
+        &.single-btn {
+			display: flex;
+			justify-content: center;
+            .confirm-btn {
+                flex: 1;
+				max-width: 280rpx;
+            }
+        }
+    }
+}
+</style>

components/no-data.vue

@@ -55,7 +55,7 @@ export default {
 	justify-content: center;
 	align-content: center;
 	flex-wrap: wrap;
-	margin-top: 100rpx;
+	padding-top: 100rpx;
 	.img {
 		width: 400rpx;
 		height: auto;

manifest.json

@@ -111,7 +111,7 @@
             "postcss" : true
         },
         "optimization" : {
-            "subPackages" : false
+            "subPackages" : true
         },
         "usingComponents" : true,
         "permission" : {},

package.json

@@ -1,37 +1,36 @@
 {
-    "name": "书嗨",
-    "version": "1.0",
-    "description": "",
-    "main": "main.js",
-    "id": "nx-temp-shop",
-    "displayName": "",
-    "keywords": [
-        "卖书",
-        "小程序",
-        "商城"
-    ],
-    "dcloudext": {
-        "category": [
-           
-        ]
-    },
-		"uni-app": {
-			"scripts": {
-				"dev": {
-					"title": "微信开发版(dev)",
-					"env": {
-						"ENV_TYPE": "dev",
-						"UNI_PLATFORM": "mp-weixin"
-						
-					}
-				},
-				"prod":{
-					"title":"微信正式版(prod)",
-					"env":{
-						"ENV_TYPE": "prod",
-						"UNI_PLATFORM":"mp-weixin"
-					}
+	"name": "书嗨",
+	"version": "1.0",
+	"description": "",
+	"main": "main.js",
+	"id": "nx-temp-shop",
+	"displayName": "",
+	"keywords": [
+		"卖书",
+		"小程序",
+		"商城"
+	],
+	"dcloudext": {
+		"category": [
+
+		]
+	},
+	"uni-app": {
+		"scripts": {
+			"dev": {
+				"title": "微信开发版(dev)",
+				"env": {
+					"ENV_TYPE": "dev",
+					"UNI_PLATFORM": "mp-weixin"
+				}
+			},
+			"prod": {
+				"title": "微信正式版(prod)",
+				"env": {
+					"ENV_TYPE": "prod",
+					"UNI_PLATFORM": "mp-weixin"
 				}
 			}
 		}
+	}
 }

pages-home/components/BookItem.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="book-item">
+		<view class="book-info">
+			<image class="book-cover" :src="book.coverUrl || '/static/img/default-cover.png'" mode="aspectFill" />
+			<view class="book-detail">
+				<view class="top-info">
+					<view class="book-title">{{ book.title }}</view>
+					<view class="book-tags">
+						<text class="tzs tag-text">套装书</text>
+						<text class="kmdb tag-text">可卖多本</text>
+					</view>
+				</view>
+
+				<view class="flex flex-j-b flex-a-c">
+					<view class="book-price">预估价： ¥{{ book.price }}</view>
+				</view>
+			</view>
+			<view class="delete-btn" @tap="onDelete">
+				<text>×{{book.quantity}}</text>
+			</view>
+		</view>
+
+		<common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
+			<text>确定删除这本图书吗？</text>
+		</common-dialog>
+	</view>
+</template>
+
+<script>
+	import commonDialog from '@/components/common-dialog.vue';
+	export default {
+		components: {
+			commonDialog
+		},
+		props: {
+			book: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+				quantity: this.book.quantity || 1
+			}
+		},
+		methods: {
+			onDelete() {
+				this.$refs.deleteDialog.openPopup()
+			},
+			confirmDelete() {
+				this.$emit('delete', this.book.id)
+			},
+			onQuantityChange(value) {
+				this.$emit('quantity-change', this.book)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.book-item {
+		background: #FFFFFF;
+		padding: 20rpx;
+		margin-top: 20rpx;
+		border-radius: 10rpx;
+
+		.tag-text {
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #FFFFFF;
+		}
+
+		.tzs {
+			width: 91rpx;
+			height: 30rpx;
+			background: linear-gradient(263deg, #98E05F, #0DE3AC);
+			border-radius: 2rpx;
+			padding: 4rpx 10rpx;
+			margin-right: 10rpx;
+		}
+
+		.kmdb {
+			width: 117rpx;
+			height: 30rpx;
+			background: linear-gradient(263deg, #F7CB6B, #FBA980);
+			border-radius: 2rpx;
+			padding: 4rpx 10rpx;
+			margin-right: 10rpx;
+		}
+
+		.book-info {
+			display: flex;
+			position: relative;
+
+			.book-cover {
+				width: 140rpx;
+				height: 196rpx;
+				border-radius: 8rpx;
+			}
+
+			.book-detail {
+				flex: 1;
+				margin-left: 20rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				:v-deep .u-number-input {
+					background: #F9F9F9 !important;
+					border-radius: 6rpx;
+				}
+
+				.book-title {
+					max-width: 400rpx;
+					font-size: 28rpx;
+					color: #333;
+					line-height: 1.4;
+					margin-bottom: 20rpx;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+				}
+
+				.book-price {
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+
+			.delete-btn {
+				position: absolute;
+				right: 0;
+				top: -10rpx;
+				padding: 10rpx;
+			}
+		}
+	}
+</style>

pages-home/components/BookListItem.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="book-item">
+		<!-- 书籍封面 -->
+		<image class="book-cover" :src="book.coverUrl" mode="aspectFill" />
+		<!-- 书籍详情 -->
+		<view class="book-info">
+			<view class="book-title">{{ book.title }}</view>
+			<view class="book-price">
+				<text>回收价：</text>
+				<text class="price">¥{{ book.price }}</text>
+			</view>
+			<view class="action-btn" :class="book.status">
+				<u-icon name="plus" size="16" v-if="book.status==='pending'"></u-icon>
+				<text style="margin-left:6rpx">{{ getStatusText(book.status) }}</text>
+			</view>
+		</view>
+		<!-- 选择框 -->
+		<view class="checkbox-wrapper" v-if="isEditMode" >
+			<u-checkbox class="checkbox-item" v-model="book.selected" :label-size="0" :name="book.id" shape="circle" active-color="#38C148"></u-checkbox>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'BookListItem',
+		props: {
+			book: {
+				type: Object,
+				required: true
+			},
+			isEditMode: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onSelect() {
+				this.$emit('select', this.book)
+			},
+			getStatusText(status) {
+				const statusMap = {
+					pending: '加入卖书清单',
+					added: '已加入卖书清单',
+					disabled: '暂不回收'
+				}
+				return statusMap[status] || status
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.book-item {
+		position: relative;
+		width: calc((100vw - 80rpx) / 3);
+		background-color: #ffffff;
+		box-sizing: border-box;
+		padding: 20rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		border-radius: 10rpx;
+
+		.check-icon {
+			position: absolute;
+			left: 6rpx;
+			top: 6rpx;
+			z-index: 1;
+			width: 32rpx;
+			height: 32rpx;
+			background: #38C148;
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.book-cover {
+			width: 140rpx;
+			height: 197rpx;
+			border-radius: 8rpx;
+			margin-bottom: 8rpx;
+		}
+
+		.book-info {
+			width: 100%;
+
+			.book-title {
+				font-size: 24rpx;
+				color: #333333;
+				margin-bottom: 8rpx;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				overflow: hidden;
+			}
+
+			.book-price {
+				font-size: 22rpx;
+				margin-bottom: 12rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #999999;
+
+				text {
+					color: #999999;
+
+					&.price {
+						color: #FF5B5B;
+					}
+				}
+			}
+
+			.action-btn {
+				width: 100%;
+				padding: 8rpx 0;
+				font-size: 22rpx;
+				border-radius: 8rpx;
+				text-align: center;
+				gap: 4rpx;
+
+				&.pending {
+					background: #38C148;
+					color: #FFFFFF;
+				}
+
+				&.added {
+					background: #ffffff;
+					color: #38C148;
+					border: 1px solid #38C148;
+				}
+
+				&.disabled {
+					background: #F5F5F5;
+					color: #999999;
+				}
+			}
+		}
+
+		.checkbox-wrapper {
+			position: absolute;
+			right: 6rpx;
+			top: 0;
+			
+		}
+		::v-deep .checkbox-item {
+			.u-checkbox__label{
+				margin: 0 !important;
+			}
+		}
+	}
+</style>

pages-home/components/PickupTimePicker.vue

@@ -0,0 +1,203 @@
+<template>
+	<u-popup mode="bottom" v-model="show" @close="close" border-radius="40">
+		<view class="pickup-time-picker">
+			<view class="picker-header">
+				<text class="title">期望快递上门时间</text>
+				<view class="close-icon" @click="close">
+					<u-icon name="close" size="24"></u-icon>
+				</view>
+			</view>
+
+			<view class="picker-content">
+				<!-- 左侧日期列表 -->
+				<view class="date-list">
+					<view v-for="(day, index) in weekDays" :key="index" class="date-item" :class="{ 
+                            'active': selectedDayIndex === index,
+                        }" @click="selectDay(index)">
+						<text>{{ day.text }}</text>
+					</view>
+				</view>
+
+				<!-- 右侧时间列表 -->
+				<view class="time-list">
+					<view v-for="(time, index) in availableTimes" :key="index" class="time-item" :class="{
+                        'disabled': isTimeDisabled(time),
+                        'selected': selectedTimeIndex === index
+                    }" @click="selectTime(index, time)">
+						<text>{{ time }}</text>
+						<u-icon name="checkbox-mark" v-if="selectedTimeIndex === index" color="#07c160"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				selectedDayIndex: 0,
+				selectedTimeIndex: -1,
+				currentDayIndex: 0,
+				weekDays: [],
+				availableTimes: [
+					'09:00-10:00',
+					'10:00-11:00',
+					'11:00-12:00',
+					'12:00-13:00',
+					'13:00-14:00',
+					'14:00-15:00',
+					'15:00-16:00',
+					'16:00-17:00',
+					'17:00-18:00'
+				]
+			}
+		},
+		created() {
+			this.initializeWeekDays()
+		},
+		methods: {
+			initializeWeekDays() {
+				const today = new Date()
+				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+				for (let i = 0; i < 5; i++) {
+					const date = new Date(today)
+					date.setDate(today.getDate() + i)
+
+					let text = ''
+					if (i === 0) {
+						text = '今天'
+					} else if (i === 1) {
+						text = '明天'
+					} else {
+						text = weekdays[date.getDay()]
+					}
+
+					text += `(${date.getMonth() + 1}月${date.getDate()}日)`
+
+					this.weekDays.push({
+						text,
+						date,
+						isWeekend: date.getDay() === 0 || date.getDay() === 6
+					})
+				}
+			},
+
+			selectDay(index) {
+				this.selectedDayIndex = index
+				this.selectedTimeIndex = -1 // 切换日期时重置时间选择
+			},
+
+			selectTime(index, time) {
+				if (this.isTimeDisabled(time)) return
+
+				this.selectedTimeIndex = index
+				const selectedDay = this.weekDays[this.selectedDayIndex]
+
+				this.$emit('confirm', {
+					day: selectedDay.text,
+					time: time
+				})
+				this.close()
+			},
+
+			isTimeDisabled(time) {
+				if (this.selectedDayIndex !== 0) return false
+
+				const now = new Date()
+				const [startTime] = time.split('-')
+				const [hours, minutes] = startTime.split(':').map(Number)
+
+				const timeDate = new Date()
+				timeDate.setHours(hours, minutes, 0)
+
+				return timeDate <= now
+			},
+
+			close() {
+				this.$emit('update:show', false)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.pickup-time-picker {
+		background-color: #fff;
+		border-radius: 16rpx 16rpx 0 0;
+
+		.picker-header {
+			padding: 30rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 1px solid #eee;
+
+			.title {
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #333;
+			}
+		}
+
+		.picker-content {
+			display: flex;
+			height: 760rpx;
+
+			.date-list {
+				width: 45%;
+				background-color: #f8f8f8;
+
+				.date-item {
+					padding: 30rpx 20rpx;
+					text-align: center;
+					font-size: 28rpx;
+					color: #333;
+
+					&.active {
+						background-color: #FFFFFF;
+						color: #07c160;
+					}
+
+					&.weekend {
+						color: #4099ef;
+					}
+				}
+			}
+
+			.time-list {
+				flex: 1;
+				padding: 0 20rpx;
+
+				.time-item {
+					padding: 20rpx 60rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 28rpx;
+					color: #333;
+
+					&.disabled {
+						color: #999;
+					}
+
+					&.selected {
+						color: #07c160;
+					}
+
+					.check-icon {
+						color: #07c160;
+					}
+				}
+			}
+		}
+	}
+</style>

pages-home/pages/book-order.vue

@@ -0,0 +1,309 @@
+<template>
+	<view class="book-order">
+		<!-- 取货地址部分 -->
+		<view class="section-card">
+			<view class="flex-a flex-j-b mb-20" @click="handleAddress">
+				<image src="../static/adderss.png" style="width:40rpx;height: 40rpx;"></image>
+				<view class="flex-d flex-1 ml-24" style="margin-right: 90rpx;">
+					<view class="flex-a flex-j-b  mb-10">
+						<view :style="titleStyle">发货人：三七八</view>
+						<view :style="titleStyle">15138796546</view>
+					</view>
+					<view :style="titleStyle">地址：河南省郑州市金水区科技市场数
+						码港1501室</view>
+				</view>
+				<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
+			</view>
+
+			<view class="flex-a flex-j-b" @click="handleAddress">
+				<view class="flex-a">
+					<u-icon name="plus-circle-fill" :size="48" color="#38C148" top="2"></u-icon>
+					<view :style="titleStyle" class="ml-10 font-30">取货地址</view>
+					<text class="u-required">*</text>
+				</view>
+
+				<view class="flex-a">
+					<view :style="titleStyle" class="ml-10">请添加</view>
+					<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
+				</view>
+			</view>
+
+			<view class="free-pickup mb-20 mt-20">
+				<view class="pickup-title">免费上门取货</view>
+				<view class="pickup-desc">书嗨将预约指定快递上门取件，邮费由书嗨承担</view>
+			</view>
+			<view class="flex-a flex-j-b time-card" style="padding:0 10rpx" @click="showTimePicker = true">
+				<view class="flex-a">
+					<view :style="titleStyle" class="ml-10 font-28">取件时间</view>
+					<text class="u-required">*</text>
+				</view>
+
+				<view class="flex-a">
+
+					<view v-if="selectedTime.day" :style="titleStyle" class="ml-10">{{selectedTime.day}}
+						{{selectedTime.time}}
+					</view>
+					<view v-else :style="titleStyle" class="ml-10">请选择快递上门取件时间</view>
+					<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
+				</view>
+			</view>
+		</view>
+
+		<!-- 快递备注部分 -->
+		<view class="section-card">
+			<view class="flex-a flex-j-b mb-20" @click="showExpressPicker">
+				<view class="flex-a">
+					<view :style="titleStyle" class="font-28">快递备注</view>
+				</view>
+
+				<view class="flex-a">
+					<view :style="titleStyle" class="ml-10">{{ selectedExpress || '请选择' }}</view>
+					<u-icon name="arrow-right" :size="28" color="#666" top="3"></u-icon>
+				</view>
+			</view>
+			<view class="express-desc">请从【顺丰】或【京东】中选择可正常收寄的快递，如您不选择，则由系统根据区域情况自动分配</view>
+		</view>
+
+		<!-- 书籍列表 -->
+		<view class="book-list">
+			<book-item v-for="book in books" :key="book.id" :book="book"></book-item>
+		</view>
+
+		<!-- 底部栏 -->
+		<view class="bottom-bar">
+			<view class="agreement">
+				<u-checkbox v-model="agreed" shape="circle">
+					<text class="agreement-text">我已阅读并同意</text>
+					<text class="agreement-link">《书嗨用户协议》</text>
+				</u-checkbox>
+			</view>
+			<view class="order-summary">
+				<view class="total">
+					共<text class="price">{{ totalBooks }}</text>件 预估回收价
+					<text class="price">¥{{ totalPrice }}</text>
+				</view>
+				<u-button type="primary" @click="submitOrder" :custom-style="{ margin: 0 }">提交订单</u-button>
+			</view>
+		</view>
+
+		<!-- 添加快递选择器 -->
+		<u-picker v-model="showPicker" mode="selector" :range="expressList" @confirm="onExpressConfirm"
+			@cancel="showPicker = false" range-key="name"></u-picker>
+
+		<pickup-time-picker :show.sync="showTimePicker" @confirm="onTimeConfirm"></pickup-time-picker>
+	</view>
+</template>
+
+<script>
+	import bookItem from '@/pages-home/components/BookItem.vue'
+	import pickupTimePicker from '@/pages-home/components/PickupTimePicker.vue'
+
+	export default {
+		components: {
+			bookItem,
+			pickupTimePicker
+		},
+		data() {
+			return {
+				titleStyle: {
+					'font-family': 'PingFang SC',
+					'font-weight': 400,
+					color: '#333333',
+				},
+				agreed: false,
+				books: [{
+						id: 1,
+						title: '这里是书本名称不换行',
+						coverUrl: '/static/img/default-cover.png',
+						price: 32.20,
+						quantity: 2,
+						tags: ['套装书', '可买多本']
+					},
+					{
+						id: 2,
+						title: '这里是书本名称换行文字过长这里是书本名称换行文...',
+						coverUrl: '/static/img/default-cover.png',
+						price: 32.20,
+						quantity: 19,
+						tags: ['可买多本']
+					},
+					{
+						id: 3,
+						title: '三国演义珍藏版',
+						coverUrl: '/static/img/default-cover.png',
+						price: 45.50,
+						quantity: 1,
+						tags: ['套装书']
+					},
+					{
+						id: 4,
+						title: '红楼梦典藏版全集',
+						coverUrl: '/static/img/default-cover.png',
+						price: 58.80,
+						quantity: 3,
+						tags: ['套装书', '可买多本']
+					}
+				],
+
+				showPicker: false,
+				selectedExpress: '',
+				expressList: [{
+					name: '顺丰'
+				}, {
+					name: '京东'
+				}],
+				showTimePicker: false,
+				selectedTime: {}
+			}
+		},
+		computed: {
+			totalBooks() {
+				return this.books.reduce((sum, book) => sum + (book.quantity || 1), 0)
+			},
+			totalPrice() {
+				return this.books.reduce((sum, book) => sum + book.price * (book.quantity || 1), 0).toFixed(2)
+			}
+		},
+		methods: {
+			//时间选择
+			onTimeConfirm(data) {
+				this.selectedTime = data
+			},
+
+			//打开快递选择器
+			showExpressPicker() {
+				this.showPicker = true
+			},
+			//确认选择快递  
+			onExpressConfirm(e) {
+				if (!e.length) return
+				let item = this.expressList[e[0]]
+				this.selectedExpress = item.name
+				this.showPicker = false
+			},
+			//添加或者选择地址
+			handleAddress() {
+				uni.navigateTo({
+					url: "/pages-mine/pages/address/list"
+				})
+			},
+
+			handleDeleteBook(bookId) {
+				this.books = this.books.filter(book => book.id !== bookId)
+				// 更新总数和总价
+				this.calculateTotal()
+			},
+			calculateTotal() {
+				this.totalBooks = this.books.reduce((sum, book) => sum + book.quantity, 0)
+				this.totalPrice = this.books
+					.reduce((sum, book) => sum + book.quantity * parseFloat(book.price), 0)
+					.toFixed(2)
+			},
+			submitOrder() {
+				if (!this.agreed) {
+					this.$u.toast('请先同意用户协议')
+					return
+				}
+				// 处理订单提交
+				console.log('提交订单')
+				uni.navigateTo({
+					url: "/pages-home/pages/order-success"
+				})
+			},
+			//获取默认地址 /api/token/user/address/getDefault
+			getDefaultAddress() {
+				uni.$u.http.get('/token/user/address/getDefault').then(res => {
+					console.log(res, 'getDefaultAddress')
+				})
+			}
+		},
+		mounted() {
+			this.getDefaultAddress()
+		}
+	}
+</script>
+
+<style lang="scss">
+	.book-order {
+		min-height: 100vh;
+		background: #f5f5f5;
+		padding: 20rpx 30rpx;
+		padding-bottom: calc(env(safe-area-inset-bottom) + 190rpx);
+	}
+
+	.section-card {
+		background: #fff;
+		margin-bottom: 20rpx;
+		padding: 30rpx;
+		border-radius: 10rpx;
+		box-sizing: border-box;
+	}
+
+	.u-required {
+		color: #FF0000;
+		margin-left: 8rpx;
+	}
+
+	.time-card {
+		height: 80rpx;
+		background: #F8F8F8;
+		border-radius: 10rpx;
+	}
+
+	.free-pickup {
+		.pickup-title {
+			font-weight: bold;
+			font-size: 28rpx;
+			color: #333333;
+			margin-bottom: 10rpx;
+		}
+
+		.pickup-desc {
+			font-family: PingFang SC;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #999999;
+		}
+	}
+
+	.express-desc {
+		font-size: 24rpx;
+		color: #666;
+		line-height: 1.4;
+	}
+
+	.bottom-bar {
+		position: fixed;
+		bottom: env(safe-area-inset-bottom);
+		left: 0;
+		right: 0;
+		background: #fff;
+		padding: 20rpx 30rpx;
+
+		.agreement {
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #333333;
+
+			&-link {
+				color: #07c160;
+			}
+		}
+
+		.order-summary {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #999999;
+
+			.price {
+				color: #ff0000;
+				margin: 0 10rpx;
+			}
+		}
+	}
+</style>

pages-home/pages/order-success.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="order-success">
+		<image class="success-icon" src="../static/success.png" mode="widthFix"></image>
+		<text class="success-title">订单提交成功</text>
+		<text class="success-message">您的订单已提交，书嗨稍后将安排快递上门取书！</text>
+		<view class="button-group">
+			<u-button class="notify-button" :custom-style="{borderColor: '#07c160',width:'45%',
+            color: '#07c160'}" type="default" @click="notifyStatusChange">状态变更通知</u-button>
+			<u-button :custom-style="{background: '#07c160',width:'45%',
+            color: '#ffffff'}" class="view-order-button" type="primary" @click="viewOrder">查看订单</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			notifyStatusChange() {
+				// 处理状态变更通知逻辑
+				console.log('状态变更通知')
+			},
+			viewOrder() {
+				// 处理查看订单逻辑
+				console.log('查看订单')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-success {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background-color: #ffffff;
+		padding: 34rpx 0 44rpx 0;
+
+		.success-icon {
+			width: 200rpx;
+			height: 200rpx;
+		}
+
+		.success-title {
+			font-family: PingFang SC;
+			font-weight: 400;
+			font-size: 40rpx;
+			color: #333333;
+			line-height: 107rpx;
+		}
+
+		.success-message {
+			font-family: PingFang SC;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #999999;
+			margin-bottom: 40rpx;
+		}
+
+		.button-group {
+			display: flex;
+			justify-content: space-between;
+			width: 80%;
+			gap: 70rpx;
+		}
+	}
+</style>

pages-home/pages/scaned-book.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="scan-history">
+		<!-- 顶部操作栏 -->
+		<view class="header" v-if="bookList.length">
+			<view class="left">
+				<u-checkbox v-if="isEditMode" class="checkbox-item" v-model="isAllSelected" @change="toggleSelectAll"
+					shape="circle" active-color="#38C148"></u-checkbox>
+				<text v-if="isEditMode" class="select-text">全选</text>
+			</view>
+			<view class="right">
+				<text v-if="!isEditMode" @tap="toggleEditMode">管理</text>
+				<text v-else class="delete-btn" @tap="handleDelete">删除</text>
+			</view>
+		</view>
+
+		<!-- 书籍列表 -->
+		<scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
+			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
+			<!-- 空状态 -->
+			<view v-if="!loading && !bookList.length" class="empty-state">
+				<u-empty mode="list" text="暂无扫描记录" margin-top="200"></u-empty>
+			</view>
+			<u-checkbox-group v-else v-model="checkedIds">
+				<view class="book-list">
+					<BookListItem v-for="book in bookList" :key="book.id" :book="book" :isEditMode="isEditMode" />
+
+					<!-- 加载更多 -->
+					<view class="load-more" v-if="bookList.length > 0">
+						<u-divider bg-color="#f8f8f8">{{ hasMore ? '加载中...' : '我是有底线的' }}</u-divider>
+					</view>
+				</view>
+			</u-checkbox-group>
+		</scroll-view>
+
+		<!-- 删除确认弹窗 -->
+		<common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
+			<text>确定删除这本图书吗？</text>
+		</common-dialog>
+	</view>
+</template>
+
+<script>
+	import BookListItem from '../components/BookListItem.vue'
+	import commonDialog from '@/components/common-dialog.vue'
+
+	export default {
+		components: {
+			BookListItem,
+			commonDialog
+		},
+		data() {
+			return {
+				isEditMode: false,
+				isRefreshing: false,
+				loading: false,
+				page: 1,
+				pageSize: 10,
+				hasMore: true,
+				bookList: [],
+				checkedIds: []
+			}
+		},
+		computed: {
+			isAllSelected() {
+				return this.bookList.length > 0 && this.bookList.every(book => book.selected)
+			}
+		},
+		onLoad() {
+			this.loadData()
+		},
+		methods: {
+			// 加载数据
+			async loadData(isRefresh = false) {
+				if (isRefresh) {
+					this.page = 1
+					this.hasMore = true
+				}
+
+				if (!this.hasMore || this.loading) return
+
+				this.loading = true
+
+				try {
+					const res = await this.fetchBookList()
+
+					if (isRefresh) {
+						this.bookList = res.list
+					} else {
+						this.bookList = [...this.bookList, ...res.list]
+					}
+
+					this.hasMore = res.hasMore
+					this.page++
+				} catch (error) {
+					uni.showToast({
+						title: '加载失败',
+						icon: 'none'
+					})
+				} finally {
+					this.loading = false
+					if (isRefresh) {
+						this.isRefreshing = false
+					}
+				}
+			},
+
+			// 模拟获取数据
+			fetchBookList() {
+				return new Promise((resolve) => {
+					setTimeout(() => {
+						const list = Array(this.pageSize).fill().map((_, index) => ({
+							id: (this.page - 1) * this.pageSize + index + 1,
+							title: `这里是书本名称${(this.page - 1) * this.pageSize + index + 1}`,
+							price: '32.20',
+							coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0',
+							status: Math.random() > 0.5 ? 'pending' : 'added',
+							selected: false
+						}))
+
+						resolve({
+							list,
+							hasMore: this.page < 3 // 模拟只有3页数据
+						})
+					}, 1000)
+				})
+			},
+
+			// 下拉刷新
+			async onRefresh() {
+				if (this.loading) return
+				this.isRefreshing = true
+				await this.loadData(true)
+			},
+
+			// 上拉加载更多
+			async onLoadMore() {
+				if (this.loading || !this.hasMore) return
+				await this.loadData()
+			},
+
+			// 切换编辑模式
+			toggleEditMode() {
+				this.isEditMode = !this.isEditMode
+				if (!this.isEditMode) {
+					this.bookList.forEach(book => book.selected = false)
+				}
+			},
+
+			// 切换全选
+			toggleSelectAll() {
+				const newValue = !this.isAllSelected
+				this.bookList.forEach(book => book.selected = newValue)
+			},
+
+			// 处理删除
+			handleDelete() {
+				if (this.checkedIds.length === 0) {
+					uni.showToast({
+						title: '请选择要删除的记录',
+						icon: 'none'
+					})
+					return
+				}
+				this.$refs.deleteDialog.openPopup()
+			},
+
+			// 确认删除
+			confirmDelete() {
+				this.bookList = this.bookList.filter(book => !book.selected)
+				if (this.bookList.length === 0) {
+					this.isEditMode = false
+				}
+				uni.showToast({
+					title: '删除成功',
+					icon: 'success'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.scan-history {
+		min-height: 100vh;
+
+		::v-deep .checkbox-item {
+			.u-checkbox__label {
+				margin: 0 !important;
+			}
+		}
+
+		.header {
+			position: sticky;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 100;
+			height: 88rpx;
+			background: #FFFFFF;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 30rpx;
+			font-size: 28rpx;
+			border-bottom: 1rpx solid #EEEEEE;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				.select-text {
+					margin-left: 12rpx;
+					color: #333333;
+				}
+			}
+
+			.right {
+				text {
+					color: #333333;
+
+					&.delete-btn {
+						color: #FF5B5B;
+					}
+				}
+			}
+		}
+
+		.scroll-view {
+			height: calc(100vh - 88rpx);
+		}
+
+		.book-list {
+			padding: 20rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			gap: 20rpx;
+
+			.load-more {
+				width: 100%;
+				display: flex;
+				color: #999999;
+				font-size: 24rpx;
+				padding: 30rpx 0;
+				justify-content: center;
+			}
+		}
+	}
+</style>

pages-mine/pages/address/list.vue

@@ -14,7 +14,7 @@
 			
 		</view>
 		<view class="btn">
-			<u-button type="primary" shape="circle" @click="$u.route({ url: '/pages-mine/pages/address/add-or-update' })">
+			<u-button type="primary" @click="$u.route({ url: '/pages-mine/pages/address/add-or-update' })">
 				<u-icon name="plus"></u-icon>
 				<text>新建收货地址</text>
 			</u-button>

pages.json

@@ -4,6 +4,14 @@
 	},
 	// 主包
 	"pages": [
+		//首页
+		{
+			"path": "pages/home/index",
+			"style": {
+				"navigationBarTitleText": "书嗨",
+				"navigationStyle": "custom"
+			}
+		},
 		// 商城
 		{
 			"path": "pages/mall/index",
@@ -234,6 +242,27 @@
 				"navigationBarTitleText": "文章详情"
 			}
 		}]
+	}, {
+		"root": "pages-home",
+		"pages": [{
+				"path": "pages/scaned-book",
+				"style": {
+					"navigationBarTitleText": "扫过的书"
+				}
+			},
+			{
+				"path": "pages/book-order",
+				"style": {
+					"navigationBarTitleText": "卖书订单明细"
+				}
+			},
+			{
+				"path": "pages/order-success",
+				"style": {
+					"navigationBarTitleText": "卖书订单提交成功"
+				}
+			}
+		]
 	}],
 	// 分包预载配置
 	"preloadRule": {
@@ -254,28 +283,28 @@
 		"selectedColor": "#22ac38",
 		"list": [{
 			"text": "首页",
-			"pagePath": "pages/mall/index",
-			"iconPath": "./static/tabbar/home.png",
-			"selectedIconPath": "./static/tabbar/home2.png"
+			"pagePath": "pages/home/index",
+			"iconPath": "/static/tabbar/home.png",
+			"selectedIconPath": "/static/tabbar/home2.png"
 		}, {
 			"text": "分类",
 			"pagePath": "pages/mall/classify",
-			"iconPath": "./static/tabbar/fenlei.png",
-			"selectedIconPath": "./static/tabbar/fenlei2.png"
+			"iconPath": "/static/tabbar/fenlei.png",
+			"selectedIconPath": "/static/tabbar/fenlei2.png"
 		}, {
 			"text": "购物车",
 			"pagePath": "pages/mall/shopping-cart",
-			"iconPath": "./static/tabbar/cart.png",
-			"selectedIconPath": "./static/tabbar/cart2.png"
+			"iconPath": "/static/tabbar/cart.png",
+			"selectedIconPath": "/static/tabbar/cart2.png"
 		}, {
 			"text": "我的",
 			"pagePath": "pages/mine/index",
-			"iconPath": "./static/tabbar/person.png",
-			"selectedIconPath": "./static/tabbar/person2.png"
+			"iconPath": "/static/tabbar/person.png",
+			"selectedIconPath": "/static/tabbar/person2.png"
 		}]
 	},
 	// 启动模式配置
 	"condition": {
 
 	}
-}
+}

pages/home/components/BookItem.vue

@@ -0,0 +1,146 @@
+<template>
+	<view class="book-item">
+		<view class="book-info">
+			<image class="book-cover" :src="book.coverUrl || '/static/img/default-cover.png'" mode="aspectFill" />
+			<view class="book-detail">
+				<view class="top-info">
+					<view class="book-title">{{ book.title }}</view>
+					<view class="book-tags">
+						<text class="tzs tag-text">套装书</text>
+						<text class="kmdb tag-text">可卖多本</text>
+					</view>
+				</view>
+
+				<view class="flex flex-j-b flex-a-c">
+					<view class="book-price">回收价： ¥{{ book.price }}</view>
+					<u-number-box class="number-box" bg-color="#38c148" color="#ffffff" v-model="book.quantity" :min="1"
+						:max="99" @change="onQuantityChange"></u-number-box>
+				</view>
+			</view>
+			<view class="delete-btn" @tap="onDelete">
+				<u-icon name="close" size="26" color="#999"></u-icon>
+			</view>
+		</view>
+
+		<common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
+			<text>确定删除这本图书吗？</text>
+		</common-dialog>
+	</view>
+</template>
+
+<script>
+	import commonDialog from '@/components/common-dialog.vue';
+	export default {
+		components: {
+			commonDialog
+		},
+		props: {
+			book: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+				quantity: this.book.quantity || 1
+			}
+		},
+		methods: {
+			onDelete() {
+				this.$refs.deleteDialog.openPopup()
+			},
+			confirmDelete() {
+				this.$emit('delete', this.book.id)
+			},
+			onQuantityChange(value) {
+				this.$emit('quantity-change', this.book)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.book-item {
+		background: #FFFFFF;
+		padding: 20rpx;
+		margin-top: 20rpx;
+		border-radius: 10rpx;
+
+		.book-info {
+			display: flex;
+			position: relative;
+
+			.book-cover {
+				width: 140rpx;
+				height: 196rpx;
+				border-radius: 8rpx;
+			}
+
+			.tag-text {
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #FFFFFF;
+			}
+
+			.tzs {
+				width: 91rpx;
+				height: 30rpx;
+				background: linear-gradient(263deg, #98E05F, #0DE3AC);
+				border-radius: 2rpx;
+				padding: 4rpx 10rpx;
+				margin-right: 10rpx;
+			}
+
+			.kmdb {
+				width: 117rpx;
+				height: 30rpx;
+				background: linear-gradient(263deg, #F7CB6B, #FBA980);
+				border-radius: 2rpx;
+				padding: 4rpx 10rpx;
+				margin-right: 10rpx;
+			}
+
+			.book-detail {
+				flex: 1;
+				margin-left: 20rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				:v-deep .u-number-input {
+					background: #F9F9F9 !important;
+					border-radius: 6rpx;
+				}
+
+				.book-title {
+					max-width: 400rpx;
+					font-size: 28rpx;
+					color: #333;
+					line-height: 1.4;
+					margin-bottom: 20rpx;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					font-family: Source Han Sans CN;
+					font-weight: bold;
+				}
+
+				.book-price {
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+
+			.delete-btn {
+				position: absolute;
+				right: 0;
+				top: -10rpx;
+				padding: 10rpx;
+			}
+		}
+	}
+</style>

pages/home/components/ConfirmBooks.vue

@@ -0,0 +1,132 @@
+<template>
+    <u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20">
+        <view class="popup-content">
+            <view class="popup-title">需要确认你手里的书册数齐全</view>
+            <view class="desc-text">缺册会导致拒收，请核对册数后再提交</view>
+
+            <view class="book-info">
+                <image class="book-cover" src="/static/img/book-cover.jpg" mode="aspectFit" />
+                <view class="book-detail">
+                    <view class="book-name">这里是本本名称换行文字过多展示这里是书本...</view>
+                    <view class="book-isbn">ISBN:9787020134144</view>
+                </view>
+            </view>
+
+            <view class="buttons">
+                <button class="confirm-btn" @click="confirmComplete">确认书册齐全</button>
+                <button class="incomplete-btn" @click="markIncomplete">书册不全，有缺册</button>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showPopup: false
+        };
+    },
+    methods: {
+        openPopup() {
+            this.showPopup = true;
+        },
+        closePopup() {
+            this.showPopup = false;
+        },
+        confirmComplete() {
+            // 处理确认书册齐全的逻辑
+            this.$emit('confirm');
+            this.closePopup();
+        },
+        markIncomplete() {
+            // 处理书册不全的逻辑
+            this.$emit('incomplete');
+            this.closePopup();
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.popup-content {
+    background: #FFFFFF;
+    padding: 40rpx;
+    width: 600rpx;
+
+    .popup-title {
+        font-size: 32rpx;
+        color: #333333;
+        font-weight: 500;
+        text-align: center;
+    }
+
+    .desc-text {
+        font-size: 26rpx;
+        color: #999999;
+        text-align: center;
+        margin-top: 20rpx;
+        margin-bottom: 30rpx;
+    }
+
+    .book-info {
+        display: flex;
+        background: #F8F8F8;
+        padding: 20rpx;
+        border-radius: 10rpx;
+        margin-bottom: 30rpx;
+
+        .book-cover {
+            width: 120rpx;
+            height: 160rpx;
+            border-radius: 6rpx;
+        }
+
+        .book-detail {
+            flex: 1;
+            margin-left: 20rpx;
+
+            .book-name {
+                font-size: 28rpx;
+                color: #333333;
+                line-height: 1.4;
+                margin-bottom: 10rpx;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+
+            .book-isbn {
+                font-size: 26rpx;
+                color: #999999;
+            }
+        }
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+
+        button {
+            width: 100%;
+            height: 88rpx;
+            line-height: 88rpx;
+            border-radius: 10rpx;
+            font-size: 32rpx;
+            border: none;
+
+            &.confirm-btn {
+                background-color: #38C148;
+                color: #FFFFFF;
+            }
+
+            &.incomplete-btn {
+                background-color: #F1F1F1;
+                color: #FF5B5B;
+            }
+        }
+    }
+}
+</style>

pages/home/components/InputIsbn.vue

@@ -0,0 +1,92 @@
+<template>
+	<u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20" width ="85%">
+		<view class="popup-content">
+			<view class="popup-title">请输入图书ISBN编码</view>
+			<view class="desc-text">请输入不含“-”符号的13位或10位ISBN编码</view>
+			<image src="/static/img/barcode.png" alt="ISBN Barcode" style="height:200rpx;margin-bottom: 20rpx"
+				mode="heightFix" />
+			<u-input v-model="isbn" placeholder="在此输入ISBN编码" class="popup-input" input-align="center"
+				:custom-style="{'border-radius': '10rpx',height:'80rpx'}" border />
+			<view class="buttons">
+				<button @click="cancel">取消</button>
+				<button @click="submit">提交</button>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showPopup: false,
+				isbn: '',
+			};
+		},
+		methods: {
+			openPopup() {
+				this.showPopup = true;
+			},
+			closePopup() {
+				this.showPopup = false;
+			},
+			cancel() {
+				this.isbn = '';
+				this.closePopup();
+			},
+			submit() {
+				// Handle ISBN submission
+				console.log('Submitted ISBN:', this.isbn);
+				this.closePopup();
+			},
+		},
+	};
+</script>
+
+<style lang="scss">
+	.popup-content {
+		text-align: center;
+		padding: 40rpx;
+
+		.desc-text {
+			font-family: PingFang SC;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #333333;
+			margin: 20rpx 0;
+		}
+
+		.popup-title {
+			font-family: PingFang SC;
+			font-weight: bold;
+			font-size: 32rpx;
+			color: #38C148;
+		}
+
+		.buttons {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 20px;
+			gap: 30rpx;
+
+			button {
+				flex: 1;
+				height: 80rpx;
+				line-height: 80rpx;
+				font-size: 32rpx;
+				border-radius: 10rpx;
+				border: none;
+				
+				&:first-child {
+					background-color: #F5F5F5;
+					color: #333333;
+				}
+				
+				&:last-child {
+					background-color: #38C148;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+</style>

pages/home/components/ScanBookList.vue

@@ -0,0 +1,109 @@
+<template>
+	<view class="scan-book-list">
+		<!-- 顶部提示 -->
+		<view class="tip-text">
+			套装书(相同ISBN相同的系列书籍)只需扫描其中一本，扫描价即套装价；需用户将整个套装全部寄出，缺册不予回收。
+		</view>
+
+		<!-- 书籍列表 -->
+		<view class="book-list">
+			<BookItem v-for="(book,index) in bookList" :key="book.id" :book="book" @delete="handleDeleteBook"
+				@quantity-change="handleQuantityChange" />
+		</view>
+		
+		<view class="link-wrap flex-a">
+			<text class="link-btn flex-1" @click="goToScannedBooks">扫过的书 ></text>
+			<text class="link-btn flex-1" @click="goToRules">卖书规则 ></text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import BookItem from './BookItem.vue'
+	import BookItemVue from '@/pages-home/components/BookItem.vue'
+
+	export default {
+		components: {
+			BookItem,BookItemVue
+		},
+		props: {
+			bookList: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				books: []
+			}
+		},
+		watch: {
+			bookList: {
+				handler(newVal) {
+					this.books = newVal
+				},
+				deep: true,
+				immediate:true
+			}
+		},
+		methods: {
+			handleDeleteBook(bookId) {
+				this.books = this.books.filter(book => book.id !== bookId)
+				this.$emit('updateBooks', this.books)
+			},
+			handleQuantityChange(data) {
+				const book = this.books.find(book => book.id === data.id)
+				if (book) {
+					book.quantity = data.quantity
+				}
+				this.$emit('updateBooks', this.books)
+			},
+			onNext() {
+				this.$emit('next')
+			},
+			goToScannedBooks() {
+			    uni.navigateTo({
+			        url: '/pages-home/pages/scaned-book'
+			    })
+			},
+			goToRules() {
+			    uni.navigateTo({
+			        url: '/pages/rules/index'
+			    })
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.scan-book-list {
+		padding: 20rpx;
+
+		.tip-text {
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #FF8A4B;
+			line-height: 36rpx;
+		}
+		
+		.link-wrap {
+			gap: 20rpx;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+		
+			.link-btn {
+				height: 80rpx;
+				background: #ffffff;
+				border-radius: 10rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-family: PingFang SC;
+				font-weight: 500;
+				font-size: 32rpx;
+				color: #666666;
+			}
+		}
+	}
+</style>

pages/home/components/ServiceGuarantee.vue

@@ -0,0 +1,119 @@
+<template>
+    <u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20">
+        <view class="popup-content">
+            <view class="popup-title">服务保障</view>
+
+            <view class="guarantee-list">
+                <!-- 免费退回 -->
+                <view class="guarantee-item">
+                    <view class="item-header">
+                        <u-icon name="gift-fill" size="40" color="#333"></u-icon>
+                        <text class="item-title">免费退回</text>
+                    </view>
+                    <view class="item-desc">本单不合格书籍可免费退回，您可在订单审核完成后，提交申请退回。</view>
+                </view>
+
+                <!-- 24小时验 -->
+                <view class="guarantee-item">
+                    <view class="item-header">
+                        <u-icon name="clock-fill" size="40" color="#333"></u-icon>
+                        <text class="item-title">24小时验</text>
+                    </view>
+                    <view class="item-desc">本单获得24小时验资格，订单将在"到仓签收"后24小时内验货完毕，未完成验货将获得3元补贴到余额，可随验货书款一起提现。</view>
+                </view>
+
+                <!-- 极速打款 -->
+                <view class="guarantee-item">
+                    <view class="item-header">
+                        <u-icon name="rmb-circle-fill" size="40" color="#333"></u-icon>
+                        <text class="item-title">极速打款</text>
+                    </view>
+                    <view class="item-desc">余额提现后，将在24小时内到账。</view>
+                </view>
+
+                <!-- 卖亏必赔 -->
+                <view class="guarantee-item">
+                    <view class="item-header">
+                        <u-icon name="shield-fill" size="40" color="#333"></u-icon>
+                        <text class="item-title">卖亏必赔</text>
+                    </view>
+                    <view class="item-desc">订单完成后15天内，若发现订单内所售书籍发生涨价，可以申请补差。</view>
+                </view>
+            </view>
+
+            <button class="confirm-btn" @click="closePopup">确定</button>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showPopup: false
+        };
+    },
+    methods: {
+        openPopup() {
+            this.showPopup = true;
+        },
+        closePopup() {
+            this.showPopup = false;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.popup-content {
+    background: #FFFFFF;
+    padding: 40rpx;
+    width: 600rpx;
+
+    .popup-title {
+        font-size: 32rpx;
+        color: #333333;
+        font-weight: 500;
+        text-align: center;
+        margin-bottom: 30rpx;
+    }
+
+    .guarantee-list {
+        .guarantee-item {
+            margin-bottom: 30rpx;
+
+            .item-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10rpx;
+
+                .item-title {
+                    font-size: 28rpx;
+                    color: #333333;
+                    font-weight: 500;
+                    margin-left: 10rpx;
+                }
+            }
+
+            .item-desc {
+                font-size: 26rpx;
+                color: #666666;
+                line-height: 1.5;
+                padding-left: 50rpx;
+            }
+        }
+    }
+
+    .confirm-btn {
+        width: 100%;
+        height: 88rpx;
+        line-height: 88rpx;
+        background-color: #38C148;
+        color: #FFFFFF;
+        font-size: 32rpx;
+        border-radius: 10rpx;
+        border: none;
+        margin-top: 20rpx;
+    }
+}
+</style>

pages/home/components/notScanned.vue

@@ -0,0 +1,244 @@
+<template>
+	<!-- 内容区域 -->
+	<scroll-view scroll-y>
+		<view class="guide-title" data-text="卖书攻略手册"></view>
+
+		<!-- 第一步 -->
+		<view class="step-box">
+			<view class="flex-a">
+				<image src="/static/img/step1.png" class="step-img"></image>
+				<view class="flex-col flex-1">
+					<view class="step-icon-wrap">
+						<image src="/static/img/logo2.png" class="logo-icon"></image>
+						<text class="step-text">第一步</text>
+					</view>
+					<view class="step-title">扫描ISBN</view>
+					<view class="step-desc">看看您的图书价值多少</view>
+
+					<view class="collapse-header" @click="toggleCollapse('step1')">
+						<text class="collapse-title">什么书不收？</text>
+						<u-icon :name="collapseState.step1 ? 'arrow-up' : 'arrow-down'" size="14"
+							color="#999999"></u-icon>
+					</view>
+				</view>
+			</view>
+
+			<view class="rule-list" v-if="collapseState.step1">
+				<text class="rule-item">1、不收盗版书、复印书、非法出版物。</text>
+				<text class="rule-item">2、不收破损、污渍、发霉、脱胶、笔记杂乱、老化泛黄、附件缺失、浸水留痕的书。</text>
+				<text class="rule-item">3、练习册、习题册书写完成度过高拒收。</text>
+				<text class="rule-item">4、扫码提示不收的书籍暂时不收</text>
+			</view>
+		</view>
+
+		<!-- 第二步 -->
+		<view class="step-box">
+			<view class="flex-a">
+				<view class="flex-col flex-1">
+					<view class="step-icon-wrap">
+						<image src="/static/img/logo2.png" class="logo-icon"></image>
+						<text class="step-text">第二步</text>
+					</view>
+					<view class="step-title">等待快递取书</view>
+					<view class="step-desc">寄书邮费由书嗨承担</view>
+				</view>
+				<image src="/static/img/step2.png" class="step-img"></image>
+			</view>
+
+		</view>
+
+		<!-- 第三步 -->
+		<view class="step-box">
+			<view class="flex-a">
+				<image src="/static/img/step3.png" class="step-img"></image>
+				<view class="flex-col flex-1">
+					<view class="step-icon-wrap">
+						<image src="/static/img/logo2.png" class="logo-icon"></image>
+						<text class="step-text">第三步</text>
+					</view>
+					<view class="step-title">审核到账</view>
+					<view class="step-desc">到账后15天内卖方必赔</view>
+					<view class="collapse-header" @click="toggleCollapse('step3')">
+						<text class="collapse-title">什么是审核？</text>
+						<u-icon :name="collapseState.step3 ? 'arrow-up' : 'arrow-down'" size="14"
+							color="#999999"></u-icon>
+					</view>
+				</view>
+			</view>
+
+			<view class="rule-list" v-if="collapseState.step3">
+				<text class="rule-item">1、书嗨会在收到您寄的卖书快递包裹后对书籍进行审核，审核的内容包裹卖书本的数量、种类和品相。</text>
+				<text class="rule-item">2、书的品相将被分为品相良好和品相不通过</text>
+				<text class="rule-item">3、品相不通过的书籍会被拒收，首单可以在收到书款后48小时内申请免费退回拒收书籍，后续订单需要自付邮费。</text>
+			</view>
+		</view>
+		<view class="link-wrap flex-a">
+			<text class="link-btn flex-1" @click="goToScannedBooks">扫过的书 ></text>
+			<text class="link-btn flex-1" @click="goToRules">卖书规则 ></text>
+		</view>
+	</scroll-view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				collapseState: {
+					step1: false,
+					step3: false
+				}
+			}
+		},
+		methods: {
+			toggleCollapse(step) {
+				this.$set(this.collapseState, step, !this.collapseState[step])
+			},
+
+			goToScannedBooks() {
+				uni.navigateTo({
+					url: '/pages/scanned/list'
+				})
+			},
+			goToRules() {
+				uni.navigateTo({
+					url: '/pages/rules/index'
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.guide-title {
+		position: relative;
+		margin: 40rpx auto;
+		margin-top: 20rpx;
+		height: 60rpx;
+		&::before,
+		&::after {
+			content: attr(data-text);
+			font-family: Source Han Sans CN;
+			font-weight: 600;
+			font-size: 42rpx;
+			color: #33BA44;
+			text-align: center;
+			position: absolute;
+			top: 0;
+			left: 33%;
+		}
+
+		&::before {
+			-webkit-text-stroke: 2rpx #ffffff;
+		}
+	}
+
+
+	.step-box {
+		border-radius: 12rpx;
+		position: relative;
+		margin-bottom: 20rpx;
+	}
+
+	.flex-col {
+		padding-left: 8%;
+	}
+
+	.step-icon-wrap {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+
+		.logo-icon {
+			width: 48rpx;
+			height: 48rpx;
+			margin-right: 12rpx;
+		}
+
+		.step-text {
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #999999;
+		}
+	}
+
+	.step-title {
+		font-family: Source Han Sans CN;
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #37C148;
+		line-height: 41rpx;
+	}
+
+	.step-desc {
+		font-family: Source Han Sans CN;
+		font-weight: 450;
+		font-size: 26rpx;
+		color: #37C148;
+		line-height: 41rpx;
+	}
+
+	.step-img {
+		width: 375rpx;
+		height: 252rpx;
+		display: block;
+	}
+
+	.collapse-header {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-top: 20rpx;
+
+		.collapse-title {
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #999999;
+		}
+	}
+
+	.rule-list {
+		background: #f8f8f8;
+		border-radius: 8rpx;
+		padding: 20rpx;
+		box-sizing: border-box;
+		margin-top: 16rpx;
+		width: calc(100% - 60rpx);
+		margin-left: 30rpx;
+		display: flex;
+		flex-direction: column;
+
+		.rule-item {
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #999999;
+			line-height: 36rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.link-wrap {
+		padding: 0 20rpx;
+		gap: 20rpx;
+		box-sizing: border-box;
+
+		.link-btn {
+			height: 80rpx;
+			background: #F8F8F8;
+			border-radius: 10rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #666666;
+		}
+	}
+</style>

pages/home/index.vue

@@ -0,0 +1,359 @@
+<template>
+	<view class="container" :style="{ background: containerBg }" :class="bookList.length ? 'book-list' : 'no-list'">
+		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: navbarBackground }">
+			<text class="nav-title">卖书给书嗨</text>
+		</u-navbar>
+
+		<not-scanned v-if="!bookList.length"></not-scanned>
+		<scan-book-list v-else @updateBooks="updateBooksList" :bookList="bookList"></scan-book-list>
+		<!-- 底部固定按钮 -->
+		<view class="bottom-fixed">
+			<view class="btn-wrap">
+				<button class="scan-btn flex-1" @click="handleScan">
+					<u-icon name="scan" color="#FFFFFF" size="40"></u-icon>
+					<text>扫码卖书</text>
+				</button>
+				<button class="isbn-btn flex-1" @click="goToInputISBN">
+					<u-icon name="edit-pen" color="#4CD964" size="40"></u-icon>
+					<text>输入ISBN</text>
+				</button>
+			</view>
+
+			<view class="flex-a flex-j-b pad-20" v-if="bookList.length">
+				<view class="left-info">
+					<view class="flex-a common-text">
+						共<text class="color-red">{{ totalBooks }}</text>件
+						预估回收价 <text class="color-red">¥{{ totalPrice || 0 }}</text>
+					</view>
+					<text class="common-text tip">*旧书预估价格满30元起收</text>
+				</view>
+
+				<button class="scan-btn next-btn" @click="onNext">下一步</button>
+			</view>
+
+			<view class="service-icons" v-if="bookList.length">
+				<view class="icon-item" v-for="(item, index) in serviceItems" :key="index" @tap="showServiceGuarantee">
+					<u-icon :name="item.icon" size="32" color="#FFF6ED"></u-icon>
+					<text style="margin-left: 6rpx;">{{ item.text }}</text>
+				</view>
+			</view>
+		</view>
+
+		<InputIsbn ref="isbnPopup" />
+		<!-- 套装书说明弹窗 -->
+		<CommonDialog ref="setBookDialog" title="套装书说明" :showCancel="false">
+			<text>套装书(ISBN码相同的系列书箱)只需扫描其中一册，扫码价即套装价。打包时请把所有单册统在一起或放在一个袋子里寄出。</text>
+		</CommonDialog>
+
+		<!-- 暂不回收弹窗 -->
+		<CommonDialog ref="notAcceptDialog" title="暂不回收" :showCancel="false">
+			<text>这本书暂时不回收，请您过段时间再来试试~</text>
+		</CommonDialog>
+
+		<!-- 暂无信息弹窗 -->
+		<CommonDialog ref="noInfoDialog" title="暂无信息" :showCancel="false">
+			<text>抱歉，没有该书的信息，书喵会定期补充图书信息，请您过段时间再来试试~</text>
+		</CommonDialog>
+
+		<!-- 扫累了弹窗 -->
+		<CommonDialog ref="tiredDialog" title="暂不回收" :showCancel="false">
+			<text>扫累了，休息休息吧~</text>
+		</CommonDialog>
+	</view>
+</template>
+
+<script>
+	import notScanned from './components/notScanned.vue'
+	import InputIsbn from './components/InputIsbn.vue';
+	import ScanBookList from './components/ScanBookList.vue';
+	import CommonDialog from '@/components/common-dialog.vue';
+	export default {
+		components: {
+			notScanned,
+			InputIsbn,
+			ScanBookList,
+			CommonDialog
+		},
+		data() {
+			return {
+				collapseState: {
+					step1: false,
+					step3: false
+				},
+				scrollTop: 0,
+				bookList: [{
+					id: 1,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}, {
+					id: 2,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}, {
+					id: 3,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}, {
+					id: 4,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}, {
+					id: 5,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}, {
+					id: 6,
+					title: '三国演义',
+					price: 26.2,
+					quantity: 1,
+					coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0'
+				}],
+				serviceItems: [{
+						icon: 'gift',
+						text: '免费退回'
+					},
+					{
+						icon: 'clock',
+						text: '24小时验'
+					},
+					{
+						icon: 'rmb-circle',
+						text: '极速打款'
+					},
+					{
+						icon: 'shield',
+						text: '卖亏必赔'
+					}
+				]
+			}
+		},
+		computed: {
+			navbarBackground() {
+				if (this.scrollTop > 0) {
+					return 'linear-gradient(180deg, #4CD964 0%, #5ff178 100%)'
+				}
+				return 'transparent'
+			},
+			containerBg() {
+				return this.bookList.length > 0 ? 'linear-gradient(180deg, #4CD964 0%, #F8F8F8 25%)' :
+					'linear-gradient(180deg, #4CD964 0%, #ffffff 25%)'
+			},
+			containerPb() {
+				return this.bookList.length > 0 ? '300rpx' : '110rpx'
+			},
+			totalBooks() {
+				return this.bookList.reduce((sum, book) => sum + (book.quantity || 1), 0)
+			},
+			totalPrice() {
+				return this.bookList.reduce((sum, book) => sum + book.price * (book.quantity || 1), 0).toFixed(2)
+			}
+		},
+		onPageScroll(e) {
+			this.$nextTick(() => {
+				this.scrollTop = e.scrollTop
+			})
+		},
+		methods: {
+			//提交
+			onNext() {
+				if (this.totalPrice < 30) {
+					uni.showToast({
+						title: '预估价格需满30元才能回收',
+						icon: 'none'
+					})
+					return
+				}
+				
+				uni.navigateTo({
+					url:"/pages-home/pages/book-order"
+				})
+			},
+
+			updateBooksList(data) {
+				this.bookList = data
+			},
+
+			toggleCollapse(step) {
+				this.$set(this.collapseState, step, !this.collapseState[step])
+			},
+			handleScan() {
+				uni.scanCode({
+					scanType: ['barCode'],
+					success: (res) => {
+						this.checkBookISBN(res.result)
+					},
+					fail: () => {
+						uni.showToast({
+							title: '扫码失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			async checkBookISBN(isbn) {
+				try {
+					const res = await this.$api.checkBook(isbn)
+					if (res.canBuy) {
+						uni.navigateTo({
+							url: `/pages/book/detail?isbn=${isbn}`
+						})
+					} else {
+						uni.showToast({
+							title: '暂不收购此书',
+							icon: 'none'
+						})
+					}
+				} catch (err) {
+					uni.showToast({
+						title: '查询失败',
+						icon: 'none'
+					})
+				}
+			},
+			goToScannedBooks() {
+				uni.navigateTo({
+					url: '/pages-home/pages/scaned-book'
+				})
+			},
+			goToRules() {
+				uni.navigateTo({
+					url: '/pages/rules/index'
+				})
+			},
+			showServiceGuarantee() {
+				this.$refs.serviceGuarantee.openPopup()
+			},
+			goToInputISBN() {
+				console.log(this.$refs.isbnPopup, 'this.$refs.isbnPopup')
+				this.$refs.isbnPopup.openPopup()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100%;
+		position: relative;
+		overflow: auto;
+		z-index: 1;
+		/* #ifdef MP-WEIXIN */
+		min-height: 100vh;
+		/* #endif */
+		/* #ifndef MP-WEIXIN */
+		min-height: calc(100vh - 120rpx);
+
+		/* #endif */
+		&.book-list {
+			padding-bottom: 300rpx;
+		}
+
+		padding-bottom: 110rpx;
+
+
+		.nav-title {
+			font-family: PingFang SC;
+			font-weight: bold;
+			font-size: 34rpx;
+			color: #FFFFFF;
+			padding-left: 40rpx;
+		}
+	}
+
+	.common-text {
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #999999;
+
+		&.tip {
+			color: #FF8A4B;
+		}
+	}
+
+	.color-red {
+		color: #ff0000;
+		margin: 0 10rpx;
+	}
+
+	.bottom-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9;
+		background-color: #ffffff;
+		/* #ifdef H5 */
+		padding-bottom: 120rpx;
+		/* #endif */
+
+		.btn-wrap {
+			display: flex;
+			gap: 20rpx;
+			padding: 20rpx;
+			padding-bottom: 0;
+
+			button {
+				flex: 1;
+				height: 88rpx;
+				border-radius: 10rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 10rpx;
+				border: none;
+
+				text {
+					font-size: 32rpx;
+				}
+
+				&::after {
+					border: none;
+				}
+			}
+
+			.isbn-btn {
+				background-color: #FFFFFF;
+				color: #4CD964;
+				border: 3rpx solid #4CD964;
+			}
+		}
+
+		.scan-btn {
+			background-color: #4CD964;
+			color: #FFFFFF;
+		}
+
+		.next-btn {
+			margin: 0;
+			width: 208rpx;
+		}
+	}
+
+	.service-icons {
+		display: flex;
+		justify-content: space-around;
+		padding: 14rpx;
+		background: #1F1303;
+		box-sizing: border-box;
+
+		.icon-item {
+			display: flex;
+			align-items: center;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #FFF6ED;
+		}
+	}
+</style>

static/css/common.scss

@@ -0,0 +1,344 @@
+$theme-color:#707bce;
+$theme-dark-color:rgba(#e4c491,.8);
+$bg-theme-color:rgba(#e4c491,.1);
+$blue:#03A9F4;
+$yellow:#f9ae3d;
+$yellow-text:#f9ae3d;
+$font-normal:#333333;
+$font-middle:#666666;
+$font-light:#333333;
+
+view{
+	font-size: 28rpx;
+	box-sizing: border-box;
+}
+.page{
+	background-color: #F5F5F5;
+	min-height: 100vh;
+}
+.page-top{
+	padding-top:30rpx;
+}
+.flex,.flex-box,.flex-row{
+	display: flex;
+}
+.flex-column{
+	flex-direction: column;
+}
+.flex-end{
+	justify-content:flex-end;
+}
+.flex-align{
+	align-items: center;
+}
+.flex-center{
+	align-items: center;
+	justify-content: center;
+}
+.flex-a-c{
+	align-items: center;
+}
+.flex-j-c{
+	justify-content: center;
+}
+.flex-j-e{
+	justify-content: flex-end;
+}
+.space-between{
+	justify-content: space-between;
+}
+.flex-wrap{
+	flex-wrap: wrap;
+}
+.text-center{
+	text-align: center !important;
+}
+.pad{
+	padding-left:30rpx;
+	padding-right:30rpx;
+}
+@keyframes circle {
+	0%{transform: rotate(0);}
+	100%{transform: rotate(360deg);}
+}
+.px-15{
+	padding-top:15rpx;
+	padding-bottom:15rpx;
+}
+.input-placeholder{
+	font-size: 26rpx;
+	color:#999999;
+}
+.mb-20 {
+	margin-bottom: 20rpx;
+}
+.c-4{
+	color: #ad2305;
+}
+.c-3{
+	color:#333739;
+}
+.c-5{
+	color:#545657;
+}
+.c-6{
+	color:#666769;
+}
+.c-9{
+	color:#999A9A;
+}
+.c-f{
+	color:#FFFFFF;
+}
+.c-y{
+	color:$yellow;
+}
+.text-y{
+	color:$yellow-text;
+}
+.px-15{
+	padding-left:15rpx;
+	padding-right:15rpx;
+}
+.bg-white{
+	background-color: #FFFFFF;
+}
+.bg-gray{
+	background-color: #ecf7f3;
+}
+.bg-gray-light{
+	background-color: #FAFAFA;
+}
+.bg-gray-empha{
+	background-color: #F1F2F3;
+}
+.border{
+	border:1rpx solid #EFEFEF;
+}
+.border-bottom{
+	border-bottom: 1rpx solid #EFEFEF;
+}
+.btn{
+	width:auto;
+	margin-left:0;
+	margin-right:0;
+	padding-left:30rpx;
+	padding-right:30rpx;
+	font-size: 14px;
+	background-color: transparent;
+	&.primary{
+		background-color:$theme-color;
+		color:#FFFFFF;
+	}
+	&.info{
+		border:1rpx solid #DCDCDC;
+	}
+}
+.font-bold{
+	font-weight: bold;
+}
+.font-normal{
+	font-weight: normal;
+	font-style: normal;
+}
+
+@for $i from 0 through 30 {
+	.ml-#{$i*2} {
+		margin-left: #{$i * 2}rpx;
+	}
+	.mr-#{$i * 2} {
+		margin-right: #{$i * 2}rpx;
+	}
+	.mt-#{$i * 2} {
+		margin-top: #{$i * 2}rpx;
+	}
+	.mb-#{$i * 2} {
+		margin-bottom: #{$i * 2}rpx;
+	}
+	.pad-#{$i * 2}{
+		padding: #{$i * 2}rpx;
+		box-sizing: border-box;
+	}
+}
+@for $i from 0 through 20 {
+	.pt-#{$i*2}{
+		padding-top:#{$i * 2}rpx;
+	}
+	.px-#{$i * 2} {
+		padding-left: #{$i* 2}rpx!important;
+		padding-right: #{$i* 2}rpx!important;
+	}
+	.py-#{$i * 2} {
+		padding-top: #{$i * 2}rpx!important;
+		padding-bottom: #{$i * 2}rpx!important;
+	}
+	.pad-#{$i * 2}{
+		padding:#{$i * 2}rpx;
+	}
+	.radius-#{$i * 2}{
+		border-radius: #{$i * 2}rpx;
+	}
+	.font-#{20 + $i * 2}{
+		font-size: #{22 + $i * 2}rpx;
+	}
+}
+@for $i from 1 through 5{
+	.text-line#{$i}{
+		overflow: hidden;
+		display: -webkit-box!important;
+		text-overflow: ellipsis;
+		word-break: break-all;
+		-webkit-line-clamp: #{$i};
+		-webkit-box-orient: vertical!important;
+	}
+}
+
+
+.operat-btns {
+	padding: 16px;
+	box-sizing: border-box;
+	width: 100%;
+	position: fixed;
+	bottom: 20px;
+	left: 0;
+	right: 0;
+}
+
+.operat-btns .u-button + .u-button {
+	margin-left: 14px;
+}
+
+// 超出省略,最多5行
+@for $i from 12 through 30 {
+    .font-#{$i} {
+        // vue下，单行和多行显示省略号需要单独处理
+        font-size: #{$i} + 'px' !important;
+    }
+}
+.common-title {
+	font-size: 15px;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #101010;
+	line-height: 19px;
+}
+
+.flex {
+	display: flex;
+}
+.flex-j-b{
+	justify-content: space-between;
+}
+.flex-1 {
+	flex: 1;
+}
+
+.flex-a {
+	display: flex;
+	align-items: center;
+}
+
+.flex-a-s {
+	align-items: flex-start;
+}
+
+.flex-a-c {
+	align-items: center;
+}
+
+.flex-a-e {
+	align-items: flex-end;
+}
+
+.flex-c {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-d {
+	display: flex;
+	flex-direction: column;
+}
+
+.common-text{
+	font-family: PingFang SC;
+	font-weight: 500;
+	font-size: 13px;
+	color: #666666;
+	line-height: 24px;
+	text-align: left;
+}
+
+.common-num-text{
+	font-family: AlibabaSans102 V2 Num_Alipay;
+	font-weight: normal;
+	font-size: 18px;
+	color: #111111;
+	line-height: 24px;
+	text-align: left;
+}
+
+.common-card {
+	padding: 14px 12px 21px;
+	background: #FFFFFF;
+	border-radius: 10px;
+	opacity: 1;
+}
+
+.white-bg{
+	padding: 0;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	border-radius: 10px;
+}
+
+.common-tag {
+	padding: 2px 4px;
+	background: linear-gradient(180deg, #DBC4A3 0%, #D2B692 100%);
+	border-radius: 3px 3px 3px 3px;
+	opacity: 1;
+	position: relative;
+	font-size:11px;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #FFFFFF;
+	margin-left: 6px;
+}
+
+.common-number-text{
+	font-family: AlibabaSans102 V2 Num_Alipay;
+	font-weight: normal;
+	font-size: 16px;
+	color: #111111;
+	line-height: 28px;
+}
+
+.common-btn{
+	padding: 8rpx 20rpx;
+	box-sizing: border-box;
+	background: #ff6c22;
+	color: #ffffff;
+	font-size: 26rpx;
+	border-radius: 28rpx;
+	border: 2rpx solid #ff6c22;
+	
+	&.plain{
+		border: 2rpx solid #707bce;
+		color: #707bce;
+		background: #ffffff;
+	}
+}
+.color-primary{
+	color: #707bce !important;
+}
+
+.team-title {
+	font-size: 28rpx;
+	color: #707bce;
+}
+
+.common-page{
+	padding: 30rpx;
+	box-sizing: border-box;
+}

unpackage/dist/dev/.sourcemap/mp-weixin/pages-home/border-success.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,sBAAI,CAAC,C","file":"pages-home/border-success.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages-home/border-success.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/.sourcemap/mp-weixin/pages-home/pages/border-success.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,sBAAI,CAAC,C","file":"pages-home/pages/border-success.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages-home/pages/border-success.vue'\ncreatePage(Page)"],"sourceRoot":""}