From 12b08bda78079be939da31325afa42c6e6ddf91f Mon Sep 17 00:00:00 2001
From: hly <2783385703@qq.com>
Date: Mon, 25 Aug 2025 18:28:46 +0800
Subject: [PATCH] 1

---
 api/model/index.js                          |    7 +-
 compoent/base/banner-swiper.vue             |  230 +++
 compoent/base/rule-popup.vue                |  353 +++++
 compoent/base/service-qrcode.vue            |  272 ++++
 compoent/base/tabbar.vue                    |   43 +-
 compoent/recycle/brand-selector.vue         |  597 ++++++++
 compoent/recycle/product-detail-popup.vue   |  533 +++++++
 compoent/recycle/product-style-selector.vue |  362 +++++
 config.js                                   |    2 +-
 pages/component/home.vue                    |  470 +------
 pages/component/my.vue                      |   46 +-
 pages/component/recycle copy.vue            |   56 +-
 pages/component/recycle.vue                 | 2028 +++++++++++----------------
 pages/manager/inspect-result.vue            |  193 ++-
 pages/manager/inspect.vue                   |  932 ++++++------
 pages/manager/order-detail.vue              |  486 +++++--
 pages/subcomponent/detail.vue               |   11 +-
 pages/subcomponent/pickup.vue               |  474 ++++---
 uni.scss                                    |    1 +
 19 files changed, 4532 insertions(+), 2564 deletions(-)
 create mode 100644 compoent/base/banner-swiper.vue
 create mode 100644 compoent/base/rule-popup.vue
 create mode 100644 compoent/base/service-qrcode.vue
 create mode 100644 compoent/recycle/brand-selector.vue
 create mode 100644 compoent/recycle/product-detail-popup.vue
 create mode 100644 compoent/recycle/product-style-selector.vue

diff --git a/api/model/index.js b/api/model/index.js
index f92a51f..68307c2 100644
--- a/api/model/index.js
+++ b/api/model/index.js
@@ -188,6 +188,12 @@ const api = {
 		method: 'GET',
 		auth : false
 	},
+	// 根据商品标识查询商品品牌下的款式
+	getGoodsBrandProduct: {
+		url: '/recycle-admin/applet/class/getGoodsBrandProduct',
+		method: 'GET',
+		auth : false
+	},
 	// 2.根据分类标识获取分类商品列表带分页
 	getClassGoodsList: {
 		url: '/recycle-admin/applet/class/getClassGoodsList',
@@ -258,7 +264,6 @@ const api = {
 		method: 'GET',
 		auth: true,
 	},
-	
 }
 
 export default api
\ No newline at end of file
diff --git a/compoent/base/banner-swiper.vue b/compoent/base/banner-swiper.vue
new file mode 100644
index 0000000..9f0f6ae
--- /dev/null
+++ b/compoent/base/banner-swiper.vue
@@ -0,0 +1,230 @@
+<template>
+	<view class="banner" :style="{ height: height }">
+		<swiper
+			:indicator-dots="false"
+			:autoplay="true"
+			:interval="3000"
+			:duration="500"
+			circular
+			:style="{ width: '100%', height: height }"
+		>
+			<swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
+				<view v-if="item.type == 1" class="video-container">
+					<!-- 预览状态：显示封面图 -->
+					<image 
+						v-if="!videoPlayingStates[index]" 
+						:src="item.image || ''" 
+						mode="aspectFill" 
+						style="width: 100%; height: 100%;"
+						class="video-poster"
+						@click="playVideoFullscreen(item, index)"
+					/>
+					<!-- 播放状态：显示视频 -->
+					<video 
+						v-else
+						:id="`${videoIdPrefix}-${index}`"
+						:src="item.voUrl" 
+						:autoplay="true" 
+						:muted="false" 
+						:loop="false" 
+						:controls="true"
+						:show-play-btn="true" 
+						:show-center-play-btn="false"
+						:show-fullscreen-btn="true"
+						:show-progress="true"
+						:show-mute-btn="true"
+						:enable-progress-gesture="true"
+						:enable-play-gesture="true"
+						object-fit="cover"
+						style="width: 100%; height: 100%;"
+						@fullscreenchange="onFullscreenChange"
+						@play="onVideoPlay(index)"
+						@pause="onVideoPause(index)"
+						@ended="onVideoEnded(index)"
+					></video>
+					<!-- 播放按钮覆盖层 -->
+					<view v-if="!videoPlayingStates[index]" class="video-overlay" @click="playVideoFullscreen(item, index)">
+						<view class="play-button-large">
+							<view class="play-triangle"></view>
+						</view>
+					</view>
+				</view>
+				<image v-else :src="item.image" mode="aspectFill" style="width: 100%; height: 100%;" @click="onImageClick(item, index)" />
+			</swiper-item>
+		</swiper>
+		
+		<!-- 备用静态图片，当没有轮播图数据时显示 -->
+		<image v-if="!bannerList || bannerList.length === 0" :src="fallbackImage" mode="aspectFill" style="width: 100%; height: 100%;" />
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BannerSwiper',
+	props: {
+		// 轮播图数据
+		bannerList: {
+			type: Array,
+			default: () => []
+		},
+		// 轮播图高度
+		height: {
+			type: String,
+			default: '400rpx'
+		},
+		// 备用图片
+		fallbackImage: {
+			type: String,
+			default: ''
+		},
+		// 视频ID前缀，用于区分不同页面的视频
+		videoIdPrefix: {
+			type: String,
+			default: 'video'
+		}
+	},
+	data() {
+		return {
+			videoPlayingStates: {} // 记录每个视频的播放状态
+		}
+	},
+	methods: {
+		// 视频全屏播放
+		playVideoFullscreen(item, index) {
+			if (!this.videoPlayingStates[index]) {
+				// 第一次点击：显示视频并开始播放
+				this.$set(this.videoPlayingStates, index, true)
+				// 等待视频元素渲染后再进行操作
+				this.$nextTick(() => {
+					setTimeout(() => {
+						const videoContext = uni.createVideoContext(`${this.videoIdPrefix}-${index}`, this)
+						if (videoContext) {
+							// 直接进入全屏播放，强制竖屏
+							videoContext.requestFullScreen({
+								direction: 0 // 竖屏方向，0代表竖屏，1代表横屏，-1自动
+							})
+						}
+					}, 200)
+				})
+			}
+		},
+		
+		// 图片点击事件
+		onImageClick(item, index) {
+			this.$emit('image-click', { item, index })
+		},
+		
+		// 视频播放事件
+		onVideoPlay(index) {
+			this.$set(this.videoPlayingStates, index, true)
+		},
+		
+		// 视频暂停事件
+		onVideoPause(index) {
+			this.$set(this.videoPlayingStates, index, false)
+		},
+		
+		// 视频结束事件
+		onVideoEnded(index) {
+			// 视频播放结束，回到预览状态
+			this.$set(this.videoPlayingStates, index, false)
+		},
+		
+		// 全屏状态改变事件
+		onFullscreenChange(e) {
+			console.log('全屏状态改变:', e.detail)
+			const videoIndex = e.target.id.replace(`${this.videoIdPrefix}-`, '')
+			
+			if (e.detail.fullScreen) {
+				// 进入全屏时，不做任何操作
+				console.log('进入全屏模式，方向:', e.detail.direction)
+			} else {
+				// 退出全屏时，回到预览状态
+				console.log('退出全屏模式，回到预览状态')
+				this.$set(this.videoPlayingStates, videoIndex, false)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.banner {
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	border-radius: 0 0 30rpx 30rpx;
+
+	image {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.video-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		
+		.video-poster {
+			cursor: pointer;
+			transition: transform 0.2s ease;
+			
+			&:active {
+				transform: scale(0.98);
+			}
+		}
+		
+		.video-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.4);
+			z-index: 10;
+			cursor: pointer;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			
+			.play-button-large {
+				width: 120rpx;
+				height: 120rpx;
+				background: transparent;
+				border-radius: 50%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				backdrop-filter: blur(10rpx);
+				transition: all 0.3s ease;
+				box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
+				
+				&:active {
+					transform: scale(0.9);
+					background: rgba(255, 255, 255, 0.1);
+				}
+				
+				.play-triangle {
+					width: 0;
+					height: 0;
+					border-left: 24rpx solid #fff;
+					border-top: 18rpx solid transparent;
+					border-bottom: 18rpx solid transparent;
+					margin-left: 8rpx;
+					transition: all 0.3s ease;
+					filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
+				}
+			}
+			
+			&:hover .play-button-large {
+				transform: scale(1.1);
+				box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4);
+				
+				.play-triangle {
+					border-left-color: #ff8917;
+				}
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/compoent/base/rule-popup.vue b/compoent/base/rule-popup.vue
new file mode 100644
index 0000000..bf8cd77
--- /dev/null
+++ b/compoent/base/rule-popup.vue
@@ -0,0 +1,353 @@
+<template>
+	<!-- 回收规则弹窗 -->
+	<view v-if="showRulePopup" class="rule-popup-mask" @click.self="handleRulePopupMaskClick">
+		<view class="rule-popup">
+			<view class="rule-popup-title">{{ ruleTitle }}</view>
+			<scroll-view class="rule-popup-content" scroll-y @scroll="onRuleContentScroll"
+				@scrolltolower="onRuleScrollToLower">
+				<uv-parse :content="ruleHtml" @ready="onRuleContentReady"></uv-parse>
+				<view class="rule-content-bottom-indicator"></view>
+			</scroll-view>
+			<view v-if="!hasScrolledToBottom" class="scroll-tip">请滚动到底部阅读完整内容</view>
+			<button class="rule-popup-btn" :class="{ disabled: !hasScrolledToBottom }" :disabled="!hasScrolledToBottom"
+				@click.stop="closeRulePopup">我知道了</button>
+		</view>
+	</view>
+
+	<!-- 预约上门取件弹窗 -->
+	<view v-if="showPickupConfirm" class="pickup-confirm-mask">
+		<view class="pickup-confirm-popup">
+			<view class="pickup-confirm-title">{{ confirmTitle }}</view>
+			<view class="pickup-confirm-content">
+				<uv-parse :content="confirmContent"></uv-parse>
+			</view>
+			<view class="pickup-confirm-btn-row">
+				<button class="pickup-confirm-btn" @click="handlePickupCancel">{{ cancelText }}</button>
+				<button class="pickup-confirm-btn agree" @click="handlePickupAgree">{{ confirmText }}</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'RulePopup',
+	props: {
+		// 回收规则弹窗标题
+		ruleTitle: {
+			type: String,
+			default: '回收规则'
+		},
+		// 确认弹窗标题
+		confirmTitle: {
+			type: String,
+			default: '温馨提示'
+		},
+		// 确认弹窗内容
+		confirmContent: {
+			type: String,
+			default: ''
+		},
+		// 取消按钮文本
+		cancelText: {
+			type: String,
+			default: '取消回收'
+		},
+		// 确认按钮文本
+		confirmText: {
+			type: String,
+			default: '我同意'
+		}
+	},
+	data() {
+		return {
+			showRulePopup: false,
+			showPickupConfirm: false,
+			ruleHtml: '',
+			hasScrolledToBottom: false
+		}
+	},
+	methods: {
+		// 打开回收规则弹窗
+		openRulePopup(ruleContent = '') {
+			this.ruleHtml = ruleContent || '<p>暂无回收规则</p>'
+			this.hasScrolledToBottom = false
+			this.showRulePopup = true
+			// 弹窗显示后主动判断内容是否需要滚动
+			this.$nextTick(() => {
+				const query = uni.createSelectorQuery().in(this)
+				query.select('.rule-popup-content').boundingClientRect(rect => {
+					if (rect && rect.height && rect.scrollHeight && rect.scrollHeight <= rect.height + 10) {
+						this.hasScrolledToBottom = true
+					}
+				}).exec()
+			})
+		},
+		
+		// 打开确认弹窗
+		openConfirmPopup() {
+			this.showPickupConfirm = true
+		},
+		
+		// 关闭回收规则弹窗
+		closeRulePopup() {
+			if (!this.hasScrolledToBottom) {
+				uni.showToast({
+					title: '请阅读完整回收规则',
+					icon: 'none'
+				})
+				return
+			}
+			this.showRulePopup = false
+			this.hasScrolledToBottom = false
+			this.$emit('rule-confirm')
+		},
+		
+		// 关闭确认弹窗
+		closeConfirmPopup() {
+			this.showPickupConfirm = false
+		},
+		
+		// 处理规则弹窗遮罩点击
+		handleRulePopupMaskClick() {
+			if (!this.hasScrolledToBottom) {
+				uni.showToast({
+					title: '请阅读完整回收规则',
+					icon: 'none'
+				})
+				return
+			}
+			this.closeRulePopup()
+		},
+		
+		// 处理取消回收
+		handlePickupCancel() {
+			this.closeConfirmPopup()
+			this.$emit('pickup-cancel')
+		},
+		
+		// 处理确认回收
+		handlePickupAgree() {
+			this.closeConfirmPopup()
+			this.$emit('pickup-confirm')
+		},
+		
+		// 监听规则内容滚动
+		onRuleContentScroll(e) {
+			const { scrollTop, scrollHeight, clientHeight, height } = e.detail
+			const h = clientHeight || height
+			// 内容高度不够，无需滚动，直接允许
+			if (scrollHeight <= h + 10) {
+				this.hasScrolledToBottom = true
+				return
+			}
+			if (scrollTop + h >= scrollHeight - 20) {
+				this.hasScrolledToBottom = true
+			}
+		},
+		
+		// 规则内容滚动到底部
+		onRuleScrollToLower() {
+			this.hasScrolledToBottom = true
+		},
+		
+		// 规则内容准备完成
+		onRuleContentReady() {
+			this.$nextTick(() => {
+				const query = uni.createSelectorQuery().in(this)
+				query.select('.rule-popup-content').boundingClientRect(rect => {
+					query.select('.rule-popup-content').scrollOffset(scroll => {
+						// 只有内容高度小于等于可视高度时才点亮
+						if (scroll.scrollHeight <= rect.height + 1) {
+							this.hasScrolledToBottom = true
+						}
+					})
+				}).exec()
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.rule-popup-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.35);
+	z-index: 4000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.rule-popup {
+	width: 95vw;
+	max-width: 750rpx;
+	max-height: 85vh;
+	background: #fff;
+	border-radius: 48rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+	padding-bottom: 40rpx;
+}
+
+.rule-popup-title {
+	font-size: 36rpx;
+	color: #222;
+	font-weight: bold;
+	text-align: center;
+	margin-top: 48rpx;
+	margin-bottom: 16rpx;
+}
+
+.rule-popup-content {
+	width: 100%;
+	max-height: 60vh;
+	min-height: 400rpx;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+	overflow-y: auto;
+	scrollbar-width: none;
+	/* Firefox */
+	-ms-overflow-style: none;
+	/* IE and Edge */
+	&::-webkit-scrollbar {
+		width: 0 !important;
+		display: none;
+		/* Chrome, Safari, Opera */
+	}
+}
+
+.rule-content-bottom-indicator {
+	height: 20rpx;
+	width: 100%;
+}
+
+.scroll-tip {
+	font-size: 24rpx;
+	color: #ff6b35;
+	text-align: center;
+	margin: 16rpx 0 8rpx 0;
+	animation: tipPulse 2s infinite;
+}
+
+@keyframes tipPulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.6;
+	}
+}
+
+.rule-popup-btn {
+	width: 80%;
+	height: 88rpx;
+	background: linear-gradient(to right, #ffd01e, #ff8917);
+	border-radius: 44rpx;
+	color: #fff;
+	font-size: 32rpx;
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	margin: 0 auto;
+	margin-top: 16rpx;
+	box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
+	transition: all 0.3s ease;
+	&::after {
+		border: none;
+	}
+	&:active {
+		opacity: 0.9;
+	}
+	&.disabled {
+		background: #ccc;
+		color: #999;
+		box-shadow: none;
+		opacity: 0.6;
+	}
+}
+
+/* 预约上门取件弹窗样式 */
+.pickup-confirm-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.35);
+	z-index: 5000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pickup-confirm-popup {
+	width: 90vw;
+	max-width: 600rpx;
+	background: #fff;
+	border-radius: 48rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+	padding: 48rpx 36rpx 40rpx 36rpx;
+}
+
+.pickup-confirm-title {
+	font-size: 36rpx;
+	color: #222;
+	font-weight: bold;
+	text-align: center;
+	margin-bottom: 24rpx;
+}
+
+.pickup-confirm-content {
+	width: 100%;
+	font-size: 26rpx;
+	color: #333;
+	text-align: left;
+	line-height: 1.7;
+	margin-bottom: 36rpx;
+}
+
+.pickup-confirm-btn-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	gap: 32rpx;
+}
+
+.pickup-confirm-btn {
+	flex: 1;
+	height: 88rpx;
+	border-radius: 44rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2rpx solid #ffd01e;
+	background: #fff;
+	color: #ff9c00;
+	box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
+	&:not(.agree) {
+		background: #fff0d2;
+	}
+	&.agree {
+		background: linear-gradient(to right, #ffd01e, #ff8917);
+		color: #fff;
+		border: none;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/compoent/base/service-qrcode.vue b/compoent/base/service-qrcode.vue
new file mode 100644
index 0000000..a775d13
--- /dev/null
+++ b/compoent/base/service-qrcode.vue
@@ -0,0 +1,272 @@
+<template>
+	<!-- 客服二维码弹窗 -->
+	<view v-if="showModal" class="qrcode-modal-mask" @click="closeModal">
+		<view class="qrcode-modal-content" @click.stop>
+			<view class="qrcode-modal-header">
+				<text class="qrcode-modal-title">联系客服</text>
+				<view class="qrcode-modal-close" @click="closeModal">
+					<uni-icons type="close" size="24" color="#999"></uni-icons>
+				</view>
+			</view>
+			<view class="qrcode-modal-body">
+				<image 
+					v-if="serviceQrcodeUrl" 
+					:src="serviceQrcodeUrl" 
+					mode="aspectFit" 
+					class="qrcode-modal-img"
+					:show-menu-by-longpress="true"
+					@longpress="onQrcodeLongPress"
+				></image>
+				<view v-else class="qrcode-placeholder">
+					<text>二维码加载中...</text>
+				</view>
+				<text class="qrcode-modal-tip">长按识别二维码添加客服微信</text>
+				<!-- <view class="qrcode-actions">
+					<button class="save-btn" @click="saveQrcodeToAlbum" v-if="serviceQrcodeUrl">
+						保存到相册
+					</button>
+				</view> -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'ServiceQrcode',
+	data() {
+		return {
+			showModal: false
+		}
+	},
+	computed: {
+		serviceQrcodeUrl() {
+			const item = getApp().globalData.configData.find(i => i.keyName === 'kefu_code')
+			return item ? item.keyContent : ''
+		}
+	},
+	methods: {
+		// 打开客服二维码弹窗
+		open() {
+			this.showModal = true
+		},
+		
+		// 关闭客服二维码弹窗
+		close() {
+			this.showModal = false
+			this.$emit('close')
+		},
+		
+		// 关闭二维码弹窗（内部调用）
+		closeModal() {
+			this.close()
+		},
+		
+		// 处理二维码长按事件
+		onQrcodeLongPress() {
+			console.log('长按二维码')
+			// 在微信小程序中，show-menu-by-longpress="true" 会自动处理长按识别
+			// 这里可以添加一些反馈提示
+			uni.showToast({
+				title: '长按识别二维码',
+				icon: 'none',
+				duration: 1500
+			})
+		},
+		
+		// 保存二维码到相册
+		saveQrcodeToAlbum() {
+			if (!this.serviceQrcodeUrl) {
+				uni.showToast({
+					title: '二维码还未加载完成',
+					icon: 'none'
+				})
+				return
+			}
+			
+			// 先授权相册权限
+			uni.getSetting({
+				success: (res) => {
+					if (!res.authSetting['scope.writePhotosAlbum']) {
+						// 没有权限，申请权限
+						uni.authorize({
+							scope: 'scope.writePhotosAlbum',
+							success: () => {
+								this.doSaveQrcodeImage()
+							},
+							fail: () => {
+								// 权限被拒绝，引导用户手动开启
+								uni.showModal({
+									title: '提示',
+									content: '需要您授权保存相册权限',
+									showCancel: false,
+									success: () => {
+										uni.openSetting()
+									}
+								})
+							}
+						})
+					} else {
+						// 已有权限，直接保存
+						this.doSaveQrcodeImage()
+					}
+				}
+			})
+		},
+		
+		// 执行保存二维码图片
+		doSaveQrcodeImage() {
+			uni.downloadFile({
+				url: this.serviceQrcodeUrl,
+				success: (res) => {
+					if (res.statusCode === 200) {
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: () => {
+								uni.showToast({
+									title: '保存成功',
+									icon: 'success'
+								})
+							},
+							fail: (err) => {
+								console.log('保存失败', err)
+								uni.showToast({
+									title: '保存失败',
+									icon: 'none'
+								})
+							}
+						})
+					}
+				},
+				fail: (err) => {
+					console.log('下载失败', err)
+					uni.showToast({
+						title: '下载失败',
+						icon: 'none'
+					})
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	// 客服二维码弹窗样式
+	.qrcode-modal-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 9999;
+		backdrop-filter: blur(5rpx);
+	}
+
+	.qrcode-modal-content {
+		background: #fff;
+		border-radius: 24rpx;
+		width: 600rpx;
+		max-width: 90vw;
+		animation: fadeInScale 0.3s ease;
+		overflow: hidden;
+	}
+
+	.qrcode-modal-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 40rpx 40rpx 20rpx 40rpx;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.qrcode-modal-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.qrcode-modal-close {
+		padding: 10rpx;
+		margin: -10rpx;
+	}
+
+	.qrcode-modal-body {
+		padding: 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.qrcode-modal-img {
+		width: 400rpx;
+		height: 400rpx;
+		border-radius: 16rpx;
+		margin-bottom: 30rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	}
+
+	.qrcode-placeholder {
+		width: 400rpx;
+		height: 400rpx;
+		border-radius: 16rpx;
+		margin-bottom: 30rpx;
+		background: #f5f5f5;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		text {
+			color: #999;
+			font-size: 28rpx;
+		}
+	}
+
+	.qrcode-modal-tip {
+		font-size: 28rpx;
+		color: #666;
+		text-align: center;
+		line-height: 1.4;
+		margin-bottom: 20rpx;
+	}
+
+	.qrcode-actions {
+		display: flex;
+		justify-content: center;
+		margin-top: 20rpx;
+	}
+
+	.save-btn {
+		background: linear-gradient(90deg, #ff8917, #ffd01e);
+		color: #fff;
+		border: none;
+		border-radius: 25rpx;
+		padding: 16rpx 40rpx;
+		font-size: 28rpx;
+		font-weight: bold;
+		
+		&::after {
+			border: none;
+		}
+		
+		&:active {
+			opacity: 0.8;
+		}
+	}
+
+	@keyframes fadeInScale {
+		from {
+			opacity: 0;
+			transform: scale(0.8);
+		}
+
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/compoent/base/tabbar.vue b/compoent/base/tabbar.vue
index 9c70362..aa7e4c4 100644
--- a/compoent/base/tabbar.vue
+++ b/compoent/base/tabbar.vue
@@ -2,7 +2,7 @@
 	<view class="tabbar-box">
 		<view class="tabbar">
 			<view :class="{ 'tabbar-active' : select == item.key}" v-for="(item, index) in list" :key="index"
-				v-if="!item.isNotShop || !userShop" @click="toPath(item, index)" class="tabbar-item">
+				@click="toPath(item, index)" class="tabbar-item">
 				<view class="tabbar-icon">
 					<image :src="select == item.key ? 
 					item.selectedIconPath : 
@@ -24,44 +24,29 @@
 		name: "tabbar",
 		props: ['select'],
 		computed: {
-			...mapGetters(['userShop']),
 		},
 		data() {
 			return {
 				list: [{
-						"selectedIconPath": "/static/image/tabbar/home-active.png",
-						"iconPath": "/static/image/tabbar/home.png",
-						"pagePath": "/pages/index/index",
+						"selectedIconPath": "/static/home/首页-点击.png",
+						"iconPath": "/static/home/首页-未点击.png",
+						"pagePath": "/pages/component/home",
 						"title": "首页",
 						key: 'home',
 					},
 					{
-						"selectedIconPath": "/static/image/tabbar/product-list-active.png",
-						"iconPath": "/static/image/tabbar/product-list.png",
-						"pagePath": "/pages/index/category",
-						"title": "商品列表",
-						key: 'category',
+						"selectedIconPath": "/static/home/回收-点击.png",
+						"iconPath": "/static/home/回收-未点击.png",
+						"pagePath": "/pages/component/recycle",
+						"title": "回收",
+						key: 'recycle',
 					},
 					{
-						"selectedIconPath": "/static/image/tabbar/order-active.png",
-						"iconPath": "/static/image/tabbar/order.png",
-						"pagePath": "/pages/index/order",
-						"title": "订单",
-						key: 'order',
-					},
-					{
-						"selectedIconPath": "/static/image/tabbar/cart-active.png",
-						"iconPath": "/static/image/tabbar/cart.png",
-						"pagePath": "/pages/index/cart",
-						"title": "购物车",
-						key: 'cart',
-					},
-					{
-						"selectedIconPath": "/static/image/tabbar/user-center-active.png",
-						"iconPath": "/static/image/tabbar/user-center.png",
-						"pagePath": "/pages/index/center",
+						"selectedIconPath": "/static/home/我的-点击.png",
+						"iconPath": "/static/home/我的-未点击.png",
+						"pagePath": "/pages/component/my",
 						"title": "我的",
-						key: 'center',
+						key: 'my',
 					}
 				]
 			};
@@ -94,7 +79,7 @@
 			flex-direction: row;
 			height: 120rpx;
 			padding-bottom: env(safe-area-inset-bottom);
-			z-index: 999999;
+			z-index: 999;
 			bottom: 0;
 			left: 0;
 			color: #BCBCBC;
diff --git a/compoent/recycle/brand-selector.vue b/compoent/recycle/brand-selector.vue
new file mode 100644
index 0000000..fc38688
--- /dev/null
+++ b/compoent/recycle/brand-selector.vue
@@ -0,0 +1,597 @@
+<template>
+	<!-- 品牌索引弹窗 -->
+	<view v-if="showBrandPopup" class="brand-popup-mask">
+		<view class="brand-popup">
+			<view class="brand-popup-header">
+				<text class="brand-popup-close" @click="close">关闭</text>
+				<text class="brand-popup-title">可回收的品牌</text>
+			</view>
+			<view class="brand-popup-search">
+				<input class="brand-search-input" v-model="brandSearch" placeholder="请输入要查询的内容" @input="onBrandSearchInput" />
+			</view>
+			
+			
+			<scroll-view class="brand-popup-list" scroll-y :scroll-into-view="scrollToView">
+
+				<!-- 热门品牌区域 -->
+				<view v-if="hotBrandList.length > 0 && !brandSearch" class="hot-brands-section">
+					<view class="hot-brands-title">热门品牌</view>
+					<view class="hot-brands-grid">
+						<view v-for="brand in hotBrandList" :key="brand.id" class="hot-brand-item" @click="openBrandConfirm(brand)">
+							<image :src="brand.logo" class="hot-brand-logo" mode="aspectFit" />
+							<text class="hot-brand-name">{{brand.name}}</text>
+						</view>
+					</view>
+				</view>
+
+				<view v-for="letter in brandIndexList" :key="letter" :id="'brand-letter-' + letter">
+					<view class="brand-letter">{{letter}}</view>
+					<view v-for="brand in filteredBrandList.filter(b => b.letter === letter)" :key="brand.name" class="brand-item" @click="openBrandConfirm(brand)">
+						<image :src="brand.logo" class="brand-logo" mode="aspectFit" />
+						<text class="brand-name">{{brand.name}}</text>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="brand-index-bar">
+				<text v-for="letter in brandIndexList" :key="letter" :class="{active: currentLetter === letter}" @click="scrollToLetter(letter)">{{letter}}</text>
+			</view>
+		</view>
+	</view>
+
+	<!-- 品牌确认弹窗 -->
+	<view v-if="showBrandConfirm" class="brand-confirm-mask" @click.self="closeBrandConfirm">
+		<view class="brand-confirm-popup">
+			<view class="brand-confirm-title">品牌确认提示</view>
+			<view class="brand-confirm-logo-wrap">
+				<image :src="brandConfirmInfo.logo" class="brand-confirm-logo" mode="aspectFit" />
+			</view>
+			<view class="brand-confirm-name">{{ brandConfirmInfo.name }}</view>
+			<view class="brand-confirm-desc">请确认所选品牌是否与实物品牌信息一致，否则将无法进行回收。</view>
+			<view class="brand-confirm-btn-row">
+				<button class="brand-confirm-btn retry" @click="closeBrandConfirm">重新选择</button>
+				<button class="brand-confirm-btn confirm" @click="confirmBrand">确认一致</button>
+			</view>
+		</view>
+	</view>
+
+	<!-- 减少数量时的品牌选择弹窗 -->
+	<view v-if="showBrandReducePopup" class="brand-reduce-popup-mask" @click.self="closeBrandReducePopup">
+		<view class="brand-reduce-popup">
+			<view class="brand-reduce-popup-header">
+				<text class="brand-reduce-popup-close" @click="closeBrandReducePopup">关闭</text>
+				<text class="brand-reduce-popup-title">选择要减少的品牌</text>
+			</view>
+			<scroll-view class="brand-reduce-popup-list" scroll-y>
+				<view v-for="brand in reduceBrandList" :key="brand.brandId" class="brand-item" @click="selectReduceBrand(brand)">
+					<image :src="brand.logo" class="brand-logo" mode="aspectFit" />
+					<text class="brand-name">{{brand.name}}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+	
+	<!-- 商品款式选择组件 -->
+	<product-style-selector ref="styleSelector" @style-confirm="onStyleConfirm" @close="onStyleSelectorClose"></product-style-selector>
+</template>
+
+<script>
+import { pinyin } from '../../utils/pinyin.js'
+import ProductStyleSelector from './product-style-selector.vue'
+
+export default {
+	name: 'BrandSelector',
+	components: {
+		ProductStyleSelector
+	},
+	data() {
+		return {
+			showBrandPopup: false,
+			showBrandConfirm: false,
+			showBrandReducePopup: false,
+			brandConfirmInfo: {
+				logo: '',
+				name: '',
+				id: ''
+			},
+			brandList: [],
+			hotBrandList: [], // 热门品牌列表
+			currentLetter: 'A',
+			scrollToView: '',
+			brandSearch: '',
+			reduceBrandList: [],
+			currentProductId: null,
+			searchTimer: null
+		}
+	},
+	computed: {
+		filteredBrandList() {
+			return this.brandList
+		},
+		// 动态生成品牌字母索引，只显示有品牌的字母
+		brandIndexList() {
+			const letters = new Set()
+			let hasSharp = false
+			this.brandList.forEach(b => {
+				if (b.letter && /^[A-Z]$/.test(b.letter)) {
+					letters.add(b.letter)
+				} else {
+					letters.add('#')
+					hasSharp = true
+				}
+			})
+			const arr = Array.from(letters).filter(l => l !== '#').sort()
+			if (hasSharp) arr.push('#')
+			return arr
+		}
+	},
+	methods: {
+		// 打开品牌选择弹窗
+		open(productId) {
+			if (!productId) {
+				console.error('productId is required')
+				return
+			}
+			this.currentProductId = productId
+			this.getGoodsBrandList(productId)
+			this.showBrandPopup = true
+		},
+		
+		// 关闭品牌选择弹窗
+		close() {
+			this.showBrandPopup = false
+			this.showBrandConfirm = false
+			this.showBrandReducePopup = false
+			// 清理搜索状态
+			this.brandSearch = ''
+			this.currentProductId = null
+			// 清空品牌列表
+			this.brandList = []
+			this.hotBrandList = []
+			if (this.searchTimer) {
+				clearTimeout(this.searchTimer)
+				this.searchTimer = null
+			}
+			this.$emit('close')
+		},
+		
+		// 打开减少品牌选择弹窗
+		openReducePopup(brandList) {
+			this.reduceBrandList = brandList || []
+			this.showBrandReducePopup = true
+		},
+		
+		// 关闭减少品牌选择弹窗
+		closeBrandReducePopup() {
+			this.showBrandReducePopup = false
+			this.reduceBrandList = []
+			this.$emit('reduce-close')
+		},
+		
+		// 选择要减少的品牌
+		selectReduceBrand(brandInfo) {
+			this.closeBrandReducePopup()
+			this.$emit('reduce-select', brandInfo)
+		},
+		
+		// 滚动到指定字母
+		scrollToLetter(letter) {
+			this.currentLetter = letter
+			this.scrollToView = 'brand-letter-' + letter
+		},
+		
+		// 打开品牌确认弹窗
+		openBrandConfirm(brand) {
+			this.brandConfirmInfo = {
+				id: brand.id,
+				logo: brand.logo,
+				name: brand.name
+			}
+			this.showBrandConfirm = true
+		},
+		
+		// 关闭品牌确认弹窗
+		closeBrandConfirm() {
+			this.showBrandConfirm = false
+		},
+		
+		// 确认品牌
+		confirmBrand() {
+			this.showBrandConfirm = false
+			// 打开商品款式选择弹窗，传递已有数量
+			this.$emit('get-existing-quantities', this.brandConfirmInfo.id, (existingQuantities) => {
+				this.$refs.styleSelector.open(this.brandConfirmInfo, this.currentProductId, existingQuantities)
+			})
+		},
+		
+		// 处理款式确认事件
+		onStyleConfirm(data) {
+			this.showBrandPopup = false
+			this.$emit('brand-confirm', {
+				brandInfo: data.brandInfo,
+				selectedStyles: data.selectedStyles
+			})
+		},
+		
+		// 处理款式选择器关闭事件
+		onStyleSelectorClose() {
+			// 款式选择器关闭时的处理逻辑
+		},
+		
+		// 获取商品品牌列表
+		getGoodsBrandList(productId, searchName = '') {
+			this.currentProductId = productId
+			const params = { productId }
+			if (searchName.trim()) {
+				params.name = searchName.trim()
+			}
+			this.$api('getGoodsBrandList', params, res => {
+				if (res && res.success && res.result && res.result.records) {
+					const allBrands = res.result.records.map(item => {
+						// 获取品牌名称的拼音首字母
+						const firstChar = this.getPinyinFirstLetter(item.name)
+						return {
+							id: item.id,
+							logo: item.image || '/static/brand/alexander.png',
+							name: item.name,
+							letter: firstChar,
+							isPin: item.isPin,
+							hot: item.hot || 0,
+							...item
+						}
+					})
+					
+					// 分离热门品牌和普通品牌
+					this.hotBrandList = allBrands.filter(brand => brand.hot == 1)
+					this.brandList = allBrands.filter(brand => brand.hot != 1)
+				}
+			})
+		},
+		
+		// 获取中文拼音首字母
+		getPinyinFirstLetter(str) {
+			if (!str) return '#'
+			const firstChar = str.charAt(0)
+			// 遍历pinyin对象，查找包含该汉字的拼音
+			for (let key in pinyin) {
+				const chars = pinyin[key]
+				if (chars && chars.indexOf(firstChar) !== -1) {
+					return key.charAt(0).toUpperCase()
+				}
+			}
+			// 英文首字母
+			if (/^[A-Za-z]$/.test(firstChar)) {
+				return firstChar.toUpperCase()
+			}
+			return '#'
+		},
+		
+		// 品牌搜索输入事件处理
+		onBrandSearchInput(e) {
+			const searchValue = e.detail.value
+			
+			// 清除之前的定时器
+			if (this.searchTimer) {
+				clearTimeout(this.searchTimer)
+			}
+			
+			// 设置防抖，500ms后执行搜索
+			this.searchTimer = setTimeout(() => {
+				if (this.currentProductId) {
+					this.getGoodsBrandList(this.currentProductId, searchValue)
+				}
+			}, 500)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.brand-popup-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.35);
+	z-index: 3000;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+.brand-popup {
+	position: relative;
+	width: 100%;
+	max-width: 750px;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
+	padding-bottom: 40rpx;
+	height: 94vh;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.brand-popup-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx 24rpx 0 24rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+}
+.brand-popup-close {
+	position: absolute;
+	left: 24rpx;
+	font-size: 28rpx;
+	color: #888;
+}
+.brand-popup-title {
+	font-size: 32rpx;
+	color: #222;
+	font-weight: bold;
+}
+.brand-popup-search {
+	padding: 20rpx 24rpx 0 24rpx;
+}
+.brand-search-input {
+	height: 60rpx;
+	border-radius: 30rpx;
+	background: #f5f5f5;
+	border: none;
+	padding-left: 40rpx;
+	font-size: 28rpx;
+	color: #888;
+}
+.brand-popup-list {
+	flex: 1;
+	overflow-y: auto;
+	max-height: calc(94vh - 160rpx);
+	padding: 0 24rpx;
+	scrollbar-width: none; /* Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	&::-webkit-scrollbar {
+		width: 0 !important;
+		display: none; /* Chrome, Safari, Opera */
+	}
+}
+.brand-letter {
+	font-size: 28rpx;
+	color: #888;
+	background-color: #f8f8f8;
+	margin: 24rpx 0 0 0;
+	padding: 8rpx 8rpx;
+	font-weight: bold;
+}
+.brand-item {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+	border-bottom: 1px solid #f0f0f0;
+}
+.brand-logo {
+	width: 60rpx;
+	height: 60rpx;
+	margin-right: 20rpx;
+	border-radius: 8rpx;
+	background: #f8f8f8;
+}
+.brand-name {
+	font-size: 28rpx;
+	color: #222;
+}
+.brand-index-bar {
+	position: absolute;
+	right: 12rpx;
+	top: 120rpx;
+	width: 32rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	z-index: 10;
+}
+.brand-index-bar text {
+	font-size: 22rpx;
+	color: #bbb;
+	margin: 4rpx 0;
+	font-weight: bold;
+	&.active {
+		color: #ff9c00;
+	}
+}
+
+/* 热门品牌样式 */
+.hot-brands-section {
+	padding: 20rpx 0;
+	border-bottom: 1px solid #f0f0f0;
+}
+.hot-brands-title {
+	font-size: 28rpx;
+	color: #222;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+.hot-brands-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10rpx;
+}
+.hot-brand-item {
+	width: calc((100% - 120rpx) / 3);
+	display: flex;
+	// flex-direction: column;
+	align-items: center;
+	padding: 2rpx 4rpx;
+	border-radius: 40rpx;
+	background: #f3f3f3;
+	border: 1px solid #eee;
+	&:active {
+		background: #eee;
+	}
+}
+.hot-brand-logo {
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 8rpx;
+	margin-bottom: 8rpx;
+	background: #fff;
+	flex-shrink: 0;
+}
+.hot-brand-name {
+	font-size: 22rpx;
+	color: #333;
+	text-align: center;
+	line-height: 1.2;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.brand-confirm-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.25);
+	z-index: 5001;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.brand-confirm-popup {
+	width: 70vw;
+	max-width: 270px;
+	background: #fff;
+	border-radius: 32rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 48rpx 20rpx 36rpx 20rpx;
+	position: relative;
+}
+.brand-confirm-title {
+	font-size: 36rpx;
+	color: #222;
+	font-weight: bold;
+	text-align: center;
+	margin-bottom: 24rpx;
+}
+.brand-confirm-logo-wrap {
+	width: 120rpx;
+	height: 120rpx;
+	background: #f8f8f8;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 18rpx;
+}
+.brand-confirm-logo {
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 50%;
+}
+.brand-confirm-name {
+	font-size: 28rpx;
+	color: #222;
+	font-weight: bold;
+	text-align: center;
+	margin-bottom: 16rpx;
+}
+.brand-confirm-desc {
+	font-size: 24rpx;
+	color: #999;
+	text-align: center;
+	margin-bottom: 32rpx;
+	line-height: 1.6;
+}
+.brand-confirm-btn-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	gap: 24rpx;
+}
+.brand-confirm-btn {
+	flex: 1;
+	height: 72rpx;
+	border-radius: 36rpx;
+	font-size: 28rpx;
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	margin: 0 0;
+}
+.brand-confirm-btn.retry {
+	background: #fff;
+	color: #ff9c00;
+	border: 2rpx solid #ff9c00;
+}
+.brand-confirm-btn.confirm {
+	background: linear-gradient(to right, #ffd01e, #ff8917);
+	color: #fff;
+	border: none;
+}
+
+/* 减少数量时的品牌选择弹窗 */
+.brand-reduce-popup-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.35);
+	z-index: 5001;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.brand-reduce-popup {
+	width: 70vw;
+	max-width: 270px;
+	background: #fff;
+	border-radius: 32rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 48rpx 20rpx 36rpx 20rpx;
+	position: relative;
+}
+.brand-reduce-popup-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx 24rpx 0 24rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+}
+.brand-reduce-popup-close {
+	position: absolute;
+	left: 24rpx;
+	font-size: 28rpx;
+	color: #888;
+}
+.brand-reduce-popup-title {
+	font-size: 32rpx;
+	color: #222;
+	font-weight: bold;
+}
+.brand-reduce-popup-list {
+	flex: 1;
+	overflow-y: auto;
+	max-height: 60vh;
+	padding: 0 24rpx;
+	scrollbar-width: none; /* Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	&::-webkit-scrollbar {
+		width: 0 !important;
+		display: none; /* Chrome, Safari, Opera */
+	}
+}
+</style>
\ No newline at end of file
diff --git a/compoent/recycle/product-detail-popup.vue b/compoent/recycle/product-detail-popup.vue
new file mode 100644
index 0000000..b57348e
--- /dev/null
+++ b/compoent/recycle/product-detail-popup.vue
@@ -0,0 +1,533 @@
+<template>
+	<!-- 商品明细弹窗 -->
+	<view v-if="showDetailPopup" class="detail-popup-mask" @click.self="close">
+		<view class="detail-popup" @click.stop>
+			<view class="detail-popup-header">
+				<text class="detail-popup-close" @click="close">关闭</text>
+				<text class="detail-popup-title">商品明细</text>
+			</view>
+			
+			<!-- 商品基本信息 -->
+			<view class="product-basic-info">
+				<image :src="productInfo.image" class="product-image" mode="aspectFit" />
+				<view class="product-info">
+					<text class="product-name">{{ productInfo.name }}</text>
+					<text class="brand-name">品牌：{{ brandInfo.name }}</text>
+				</view>
+			</view>
+			
+			<!-- 款式列表 -->
+			<scroll-view class="style-list" scroll-y>
+				<view v-for="(style, index) in styleList" :key="style.id" class="style-item">
+					<image :src="style.image" class="style-image" mode="aspectFit" />
+					<view class="style-info">
+						<text class="style-name">{{ style.name }}</text>
+						<view class="style-price">
+							<text class="price-symbol">¥</text>
+							<text class="price-value" v-if="style.minPrice === style.maxPrice">{{ style.minPrice }}</text>
+							<text class="price-value" v-else>{{ style.minPrice }}-{{ style.maxPrice }}</text>
+							<text class="price-unit">/件</text>
+						</view>
+					</view>
+					<view class="style-quantity">
+						<button class="btn-minus" @click="updateQuantity(index, -1)">-</button>
+						<text class="quantity">{{ style.quantity || 0 }}</text>
+						<button class="btn-plus" @click="updateQuantity(index, 1)">+</button>
+					</view>
+				</view>
+			</scroll-view>
+			
+			<!-- 价格统计 -->
+			<view class="price-summary">
+				<view class="summary-left">
+					<text class="summary-label">已选 <text class="summary-count">{{ totalQuantity }}</text> 件，预计可得</text>
+					<view class="amount-row">
+						<text class="amount" v-if="totalPriceRange.min === totalPriceRange.max">¥{{ totalPriceRange.min }}</text>
+						<text class="amount" v-else>¥{{ totalPriceRange.min }}-{{ totalPriceRange.max }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 底部按钮 -->
+			<view class="detail-popup-footer">
+				<button class="confirm-btn" @click="confirmChanges">确认修改</button>
+			</view>
+			
+			<!-- 浮窗按钮 -->
+			<view class="floating-btn" @click="openStyleSelector">
+				<text class="floating-btn-text">+</text>
+			</view>
+
+			<product-style-selector ref="styleSelector" @style-confirm="onStyleConfirm" @close="onStyleSelectorClose"></product-style-selector>
+			<!-- 款式选择器组件 -->
+
+		</view>
+		
+	</view>
+</template>
+
+<script>
+import productStyleSelector from './product-style-selector.vue'
+export default {
+	name: 'ProductDetailPopup',
+	components: {
+		productStyleSelector
+	},
+	data() {
+		return {
+			showDetailPopup: false,
+			productInfo: {
+				id: '',
+				name: '',
+				image: ''
+			},
+			brandInfo: {
+				id: '',
+				name: '',
+				logo: ''
+			},
+			styleList: [],
+			originalQuantities: {} // 保存原始数量，用于取消时恢复
+		}
+	},
+	computed: {
+		// 计算总价格范围
+		totalPriceRange() {
+			const result = this.styleList.reduce((sum, style) => {
+				const quantity = style.quantity || 0
+				if (quantity > 0) {
+					const minPrice = Number(style.minPrice) || 0
+					const maxPrice = Number(style.maxPrice) || Number(style.minPrice) || 0
+					sum.min += quantity * minPrice
+					sum.max += quantity * maxPrice
+				}
+				return sum
+			}, { min: 0, max: 0 })
+			
+			return {
+				min: result.min.toFixed(1),
+				max: result.max.toFixed(1)
+			}
+		},
+		// 计算总数量
+		totalQuantity() {
+			return this.styleList.reduce((sum, style) => sum + (style.quantity || 0), 0)
+		}
+	},
+	methods: {
+		// 打开商品明细弹窗
+		open(productInfo, brandInfo, existingQuantities = {}, styleCache = {}) {
+			if (!productInfo || !brandInfo) {
+				console.error('productInfo and brandInfo are required')
+				return
+			}
+			
+			this.productInfo = productInfo
+			this.brandInfo = brandInfo
+			this.originalQuantities = { ...existingQuantities }
+			
+			// 直接基于已选择的款式构建列表
+			this.buildStyleListFromExisting(existingQuantities, styleCache)
+			this.showDetailPopup = true
+		},
+		
+		// 关闭弹窗
+		close() {
+			this.showDetailPopup = false
+			this.styleList = []
+			this.productInfo = { id: '', name: '', image: '' }
+			this.brandInfo = { id: '', name: '', logo: '' }
+			this.originalQuantities = {}
+			this.$emit('close')
+		},
+		
+		// 更新数量
+		updateQuantity(index, delta) {
+			const style = this.styleList[index]
+			if (!style) return
+			
+			let newQuantity = (style.quantity || 0) + delta
+			if (newQuantity < 0) newQuantity = 0
+			
+			this.$set(style, 'quantity', newQuantity)
+		},
+		
+		// 基于已选择的款式构建列表
+		buildStyleListFromExisting(existingQuantities, styleCache) {
+			const styleList = []
+			
+			// 从父组件传入的已选择数据中提取款式信息
+			Object.entries(existingQuantities).forEach(([uniqueKey, quantity]) => {
+				if (quantity > 0 && uniqueKey.startsWith(`${this.brandInfo.id}_`)) {
+					// 从styleCache中获取完整的款式信息
+					const cacheInfo = styleCache[uniqueKey]
+					if (cacheInfo && cacheInfo.styleInfo) {
+						const styleInfo = cacheInfo.styleInfo
+						styleList.push({
+							id: styleInfo.id,
+							name: styleInfo.name,
+							image: styleInfo.image || '/static/default-product.png',
+							minPrice: styleInfo.minPrice,
+							maxPrice: styleInfo.maxPrice,
+							brandId: styleInfo.brandId || this.brandInfo.id,
+							shopId: styleInfo.shopId,
+							quantity: quantity
+						})
+					}
+				}
+			})
+			
+			this.styleList = styleList
+		},
+		
+		// 确认修改
+		confirmChanges() {
+			const updatedStyles = this.styleList.filter(style => (style.quantity || 0) > 0)
+			
+			this.$emit('confirm-changes', {
+				productInfo: this.productInfo,
+				brandInfo: this.brandInfo,
+				updatedStyles: updatedStyles
+			})
+			
+			this.close()
+		},
+		
+		// 打开款式选择器
+		openStyleSelector() {
+			// 获取当前品牌下已有的款式数量
+			const existingQuantities = {}
+			this.styleList.forEach(style => {
+				if (style.quantity > 0) {
+					const uniqueKey = `${this.brandInfo.id}_${style.id}`
+					existingQuantities[uniqueKey] = style.quantity
+				}
+			})
+			
+			// 直接打开内部的款式选择器
+			this.$refs.styleSelector.open(this.brandInfo, this.productInfo.id, existingQuantities)
+		},
+		
+		// 处理款式确认事件
+		onStyleConfirm(data) {
+			if (data.selectedStyles && data.selectedStyles.length > 0) {
+				// 更新当前的款式列表
+				const newStyleList = []
+				
+				data.selectedStyles.forEach(style => {
+					if (style.quantity > 0) {
+						newStyleList.push({
+							id: style.id,
+							name: style.name,
+							image: style.image || '/static/default-product.png',
+							minPrice: style.minPrice,
+							maxPrice: style.maxPrice,
+							brandId: style.brandId || this.brandInfo.id,
+							shopId: style.shopId,
+							quantity: style.quantity
+						})
+					}
+				})
+				
+				this.styleList = newStyleList
+				// 不关闭当前弹窗，保持商品明细弹窗打开状态
+			}
+		},
+		
+		// 处理款式选择器关闭事件
+		onStyleSelectorClose() {
+			// 款式选择器关闭时的处理逻辑
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-popup-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.25);
+	z-index: 5000;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.detail-popup {
+	position: relative;
+	width: 100%;
+	max-width: 750px;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
+	padding-bottom: 40rpx;
+	height: 84vh;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.detail-popup-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx 24rpx 0 24rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+	border-bottom: 1px solid #f0f0f0;
+	padding-bottom: 20rpx;
+}
+
+.detail-popup-close {
+	position: absolute;
+	left: 24rpx;
+	font-size: 28rpx;
+	color: #888;
+}
+
+.detail-popup-title {
+	font-size: 32rpx;
+	color: #222;
+	font-weight: bold;
+}
+
+.product-basic-info {
+	display: flex;
+	align-items: center;
+	padding: 24rpx;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.product-image {
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 12rpx;
+	margin-right: 20rpx;
+	background: #f8f8f8;
+	flex-shrink: 0;
+}
+
+.product-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-name {
+	font-size: 30rpx;
+	color: #222;
+	font-weight: bold;
+	margin-bottom: 8rpx;
+}
+
+.brand-name {
+	font-size: 26rpx;
+	color: #666;
+}
+
+.style-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	max-height: calc(84vh - 200rpx);
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	&::-webkit-scrollbar {
+		width: 0 !important;
+		display: none;
+	}
+}
+
+.style-item {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 0;
+	border-bottom: 1px solid #f0f0f0;
+	
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.style-image {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 12rpx;
+	margin-right: 20rpx;
+	background: #f8f8f8;
+	flex-shrink: 0;
+}
+
+.style-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-width: 0;
+}
+
+.style-name {
+	font-size: 28rpx;
+	color: #222;
+	font-weight: bold;
+	margin-bottom: 8rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.style-price {
+	display: flex;
+	align-items: baseline;
+}
+
+.price-symbol {
+	font-size: 24rpx;
+	color: #ff7a0e;
+}
+
+.price-value {
+	font-size: 28rpx;
+	color: #ff7a0e;
+	font-weight: bold;
+	margin: 0 4rpx;
+}
+
+.price-unit {
+	font-size: 24rpx;
+	color: #999;
+}
+
+.style-quantity {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.btn-minus, .btn-plus {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 50%;
+	background: #f8f8f8;
+	border: 1px solid #e0e0e0;
+	color: #666;
+	font-size: 28rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+	padding: 0;
+	
+	&::after {
+		border: none;
+	}
+	
+	&:active {
+		background: #e0e0e0;
+	}
+}
+
+.quantity {
+	width: 60rpx;
+	text-align: center;
+	font-size: 28rpx;
+	color: #333;
+	margin: 0 16rpx;
+}
+
+.price-summary {
+	padding: 20rpx 24rpx;
+	border-top: 1px solid #f0f0f0;
+	background: #fff;
+}
+
+.summary-left {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.summary-label {
+	font-size: 26rpx;
+	color: #333;
+}
+
+.summary-count {
+	color: #ff9c00;
+	font-weight: bold;
+	font-size: 28rpx;
+}
+
+.amount-row {
+	display: flex;
+	align-items: center;
+	margin-top: 4rpx;
+}
+
+.amount {
+	color: #ff9c00;
+	font-size: 44rpx;
+	font-weight: bold;
+	vertical-align: middle;
+}
+
+.detail-popup-footer {
+	padding: 24rpx;
+	border-top: 1px solid #f0f0f0;
+	background: #fff;
+}
+
+.confirm-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(to right, #ffd01e, #ff8917);
+	border-radius: 44rpx;
+	color: #fff;
+	font-size: 32rpx;
+	font-weight: bold;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	&::after {
+		border: none;
+	}
+	
+	&:active {
+		opacity: 0.9;
+	}
+}
+
+.floating-btn {
+	position: absolute;
+	right: 24rpx;
+	bottom: 180rpx;
+	width: 100rpx;
+	height: 100rpx;
+	background: linear-gradient(to right, #ffd01e, #ff8917);
+	border-radius: 50%;
+	box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.3);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	
+	&:active {
+		opacity: 0.9;
+		transform: scale(0.95);
+	}
+}
+
+.floating-btn-text {
+	font-size: 48rpx;
+	color: #fff;
+	font-weight: bold;
+	line-height: 1;
+}
+</style>
\ No newline at end of file
diff --git a/compoent/recycle/product-style-selector.vue b/compoent/recycle/product-style-selector.vue
new file mode 100644
index 0000000..ef7a7d6
--- /dev/null
+++ b/compoent/recycle/product-style-selector.vue
@@ -0,0 +1,362 @@
+<template>
+	<!-- 商品款式选择弹窗 -->
+	<view v-if="showStylePopup" class="style-popup-mask">
+		<view class="style-popup">
+			<view class="style-popup-header">
+				<text class="style-popup-close" @click="close">关闭</text>
+				<text class="style-popup-title">选择回收款式</text>
+			</view>
+			<view class="style-popup-brand-info">
+				<image :src="brandInfo.logo" class="brand-logo" mode="aspectFit" />
+				<text class="brand-name">{{ brandInfo.name }}</text>
+			</view>
+			<scroll-view class="style-popup-list" scroll-y>
+				<view class="style-grid">
+					<view v-for="(item, index) in styleList" :key="item.id" class="style-item" @click="selectStyle(item, index)">
+						<view class="style-item-content">
+							<view class="image-container">
+								<image :src="item.image" class="style-image" mode="aspectFill" />
+								<view class="style-quantity">
+									<button class="btn-minus" @click.stop="updateQuantity(index, -1)">-</button>
+									<text class="quantity">{{ item.quantity || 0 }}</text>
+									<button class="btn-plus" @click.stop="updateQuantity(index, 1)">+</button>
+								</view>
+							</view>
+							<text class="style-name">{{ item.name }}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="style-popup-footer">
+				<button class="next-btn" @click="nextStep" :disabled="!hasSelectedItems">下一步</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'ProductStyleSelector',
+	data() {
+		return {
+			showStylePopup: false,
+			brandInfo: {
+				id: '',
+				name: '',
+				logo: ''
+			},
+			styleList: [],
+			currentProductId: null,
+			existingQuantities: {}
+		}
+	},
+	computed: {
+		hasSelectedItems() {
+			return this.styleList.some(item => (item.quantity || 0) > 0)
+		}
+	},
+	methods: {
+		// 打开款式选择弹窗
+		open(brandInfo, productId, existingQuantities = {}) {
+			if (!brandInfo || !productId) {
+				console.error('brandInfo and productId are required')
+				return
+			}
+			this.brandInfo = brandInfo
+			this.currentProductId = productId
+			this.existingQuantities = existingQuantities
+			this.getProductStyles(brandInfo.id, productId)
+			this.showStylePopup = true
+		},
+		
+		// 关闭弹窗
+		close() {
+			this.showStylePopup = false
+			this.styleList = []
+			this.brandInfo = { id: '', name: '', logo: '' }
+			this.currentProductId = null
+			this.existingQuantities = {}
+			this.$emit('close')
+		},
+		
+		// 选择款式
+		selectStyle(item, index) {
+			// 点击款式项时的处理逻辑
+			console.log('Selected style:', item)
+		},
+		
+		// 更新数量
+		updateQuantity(index, delta) {
+			const item = this.styleList[index]
+			if (!item) return
+			
+			let newQuantity = (item.quantity || 0) + delta
+			if (newQuantity < 0) newQuantity = 0
+			
+			this.$set(item, 'quantity', newQuantity)
+		},
+		
+		// 获取商品款式列表
+		getProductStyles(brandId, productId) {
+			const params = {
+				brandId: brandId,
+				productId: productId
+			}
+			
+			this.$api('getGoodsBrandProduct', params, res => {
+				if (res && res.success && res.result && res.result) {
+					this.styleList = res.result.map(item => {
+						const uniqueKey = `${brandId}_${item.id}`
+						const existingQty = this.existingQuantities[uniqueKey] || 0
+						return {
+							id: item.id,
+							name: item.name,
+							image: item.image || '/static/default-product.png',
+							minPrice: item.minPrice,
+							maxPrice: item.maxPrice,
+							brandId: item.brandId,
+							shopId: item.shopId,
+							quantity: existingQty,
+							...item
+						}
+					})
+				} else {
+					this.styleList = []
+				}
+			})
+		},
+		
+		// 下一步
+		nextStep() {
+			const selectedItems = this.styleList.filter(item => (item.quantity || 0) > 0)
+			
+			if (selectedItems.length === 0) {
+				uni.showToast({
+					title: '请选择至少一个款式',
+					icon: 'none'
+				})
+				return
+			}
+			
+			this.$emit('style-confirm', {
+				brandInfo: this.brandInfo,
+				selectedStyles: selectedItems
+			})
+			this.close()
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.style-popup-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.35);
+	z-index: 3000;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.style-popup {
+	position: relative;
+	width: 100%;
+	max-width: 750px;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
+	height: 94vh;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.style-popup-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx 24rpx 0 24rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+}
+
+.style-popup-close {
+	position: absolute;
+	left: 24rpx;
+	font-size: 28rpx;
+	color: #888;
+}
+
+.style-popup-title {
+	font-size: 32rpx;
+	color: #222;
+	font-weight: bold;
+}
+
+.style-popup-brand-info {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 24rpx;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.brand-logo {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 8rpx;
+	margin-right: 20rpx;
+	background: #f8f8f8;
+}
+
+.brand-name {
+	font-size: 28rpx;
+	color: #222;
+	font-weight: bold;
+}
+
+.style-popup-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	&::-webkit-scrollbar {
+		width: 0 !important;
+		display: none;
+	}
+}
+
+.style-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20rpx;
+	padding: 20rpx 0;
+}
+
+.style-item {
+	width: calc((100% - 40rpx) / 3);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-radius: 16rpx;
+	background: #fff;
+	box-sizing: border-box;
+}
+
+.style-item-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+}
+
+.image-container {
+	position: relative;
+	width: 100%;
+	height: 200rpx;
+	margin-bottom: 16rpx;
+}
+
+.style-image {
+	width: 100%;
+	height: 100%;
+	border-radius: 12rpx;
+	background: #f8f8f8;
+}
+
+.style-name {
+	font-size: 24rpx;
+	color: #222;
+	font-weight: 500;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+}
+
+.style-quantity {
+	position: absolute;
+	bottom: 8rpx;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 24rpx;
+	padding: 4rpx 8rpx;
+}
+
+.btn-minus, .btn-plus {
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	background: #fff;
+	border: 1px solid #ddd;
+	color: #333;
+	font-size: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+	padding: 0;
+	box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+	
+	&::after {
+		border: none;
+	}
+	
+	&:active {
+		background: #f0f0f0;
+	}
+}
+
+.quantity {
+	width: 32rpx;
+	text-align: center;
+	font-size: 20rpx;
+	color: #333;
+	margin: 0 8rpx;
+	font-weight: bold;
+}
+
+.style-popup-footer {
+	padding: 20rpx 24rpx;
+	border-top: 1px solid #f0f0f0;
+	background: #fff;
+}
+
+.next-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(to right, #ffd01e, #ff8917);
+	border-radius: 44rpx;
+	color: #fff;
+	font-size: 32rpx;
+	font-weight: bold;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	&::after {
+		border: none;
+	}
+	
+	&:disabled {
+		background: #ccc;
+		color: #999;
+	}
+	
+	&:active:not(:disabled) {
+		opacity: 0.9;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/config.js b/config.js
index 61604a8..a7176df 100644
--- a/config.js
+++ b/config.js
@@ -1,5 +1,5 @@
 // config.js
-const type = 'prod'
+const type = 'local'
 
 const config = {
 	local: {
diff --git a/pages/component/home.vue b/pages/component/home.vue
index 77ecce0..f502819 100644
--- a/pages/component/home.vue
+++ b/pages/component/home.vue
@@ -1,54 +1,12 @@
 <template>
 	<view class="container safe-area">
 		<!-- 顶部banner -->
-		<view class="banner">
-			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" circular
-				style="width: 100%; height: 400rpx;">
-				<swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
-					<view v-if="item.type == 1" class="video-container">
-						<!-- 预览状态：显示封面图 -->
-						<image 
-							v-if="!videoPlayingStates[index]" 
-							:src="item.image || ''" 
-							mode="aspectFill" 
-							style="width: 100%; height: 100%;"
-							class="video-poster"
-							@click="playVideoFullscreen(item, index)"
-						/>
-						<!-- 播放状态：显示视频 -->
-						<video 
-							v-else
-							:id="`video-${index}`"
-							:src="item.voUrl" 
-							:autoplay="true" 
-							:muted="false" 
-							:loop="false" 
-							:controls="true"
-							:show-play-btn="true" 
-							:show-center-play-btn="false" 
-							:show-fullscreen-btn="true"
-							:show-progress="true"
-							:show-mute-btn="true"
-							:enable-progress-gesture="true"
-							:enable-play-gesture="true"
-							object-fit="cover"
-							style="width: 100%; height: 100%;"
-							@fullscreenchange="onFullscreenChange"
-							@play="onVideoPlay(index)"
-							@pause="onVideoPause(index)"
-							@ended="onVideoEnded(index)"
-						></video>
-						<!-- 播放按钮覆盖层 -->
-						<view v-if="!videoPlayingStates[index]" class="video-overlay" @click="playVideoFullscreen(item, index)">
-							<view class="play-button-large">
-						<view class="play-triangle"></view>
-							</view>
-						</view>
-					</view>
-					<image v-else :src="item.image" mode="aspectFill" style="width: 100%; height: 100%;" @click="showServiceQrcode" />
-				</swiper-item>
-			</swiper>
-		</view>
+		<banner-swiper 
+			:banner-list="bannerList" 
+			height="400rpx" 
+			video-id-prefix="home-video"
+			@image-click="onBannerImageClick"
+		></banner-swiper>
 		<view class="content">
 			<!-- 回收流程 -->
 			<view class="process-section">
@@ -172,78 +130,31 @@
 
 		</view>
 		<!-- 根据角色显示不同的导航栏 -->
-		<uv-tabbar :value="value" :fixed="true" @change="changeTo">
-			<uv-tabbar-item text="首页">
-				<template v-slot:active-icon>
-					<image class="icon" src="/static/home/首页-点击.png"></image>
-				</template>
-				<template v-slot:inactive-icon>
-					<image class="icon" src="/static/home/首页-未点击.png"></image>
-				</template>
-			</uv-tabbar-item>
-			<uv-tabbar-item text="回收">
-				<template v-slot:active-icon>
-					<image class="icon" src="/static/home/回收-点击.png"></image>
-				</template>
-				<template v-slot:inactive-icon>
-					<image class="icon" src="/static/home/回收-未点击.png"></image>
-				</template>
-			</uv-tabbar-item>
-			<uv-tabbar-item text="我的">
-				<template v-slot:active-icon>
-					<image class="icon" src="/static/home/我的-点击.png"></image>
-				</template>
-				<template v-slot:inactive-icon>
-					<image class="icon" src="/static/home/我的-未点击.png"></image>
-				</template>
-			</uv-tabbar-item>
-		</uv-tabbar>
+		<tabbar select="home"></tabbar>
 		
 		<!-- 客服二维码弹窗 -->
-		<view v-if="showQrcodeModal" class="qrcode-modal-mask" @click="closeQrcodeModal">
-			<view class="qrcode-modal-content" @click.stop>
-				<view class="qrcode-modal-header">
-					<text class="qrcode-modal-title">联系客服</text>
-					<view class="qrcode-modal-close" @click="closeQrcodeModal">
-						<uni-icons type="close" size="24" color="#999"></uni-icons>
-					</view>
-				</view>
-				<view class="qrcode-modal-body">
-					<image 
-						v-if="serviceQrcodeUrl" 
-						:src="serviceQrcodeUrl" 
-						mode="aspectFit" 
-						class="qrcode-modal-img"
-						:show-menu-by-longpress="true"
-						@longpress="onQrcodeLongPress"
-					></image>
-					<view v-else class="qrcode-placeholder">
-						<text>二维码加载中...</text>
-					</view>
-					<text class="qrcode-modal-tip">长按识别二维码添加客服微信</text>
-					<!-- <view class="qrcode-actions">
-						<button class="save-btn" @click="saveQrcodeToAlbum" v-if="serviceQrcodeUrl">
-							保存到相册
-						</button>
-					</view> -->
-				</view>
-			</view>
-		</view>
+		<service-qrcode ref="serviceQrcode" @close="closeQrcodeModal"></service-qrcode>
 	</view>
 </template>
 
 <script>
 	import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
-	export default {
-		mixins: [pullRefreshMixin],
+  import tabbar from '../../compoent/base/tabbar.vue'
+  import serviceQrcode from '../../compoent/base/service-qrcode.vue'
+  import bannerSwiper from '../../compoent/base/banner-swiper.vue'
+export default {
+  mixins: [pullRefreshMixin],
+  components: {
+    tabbar,
+    serviceQrcode,
+    bannerSwiper
+  },
 		data() {
 			return {
 				value: 0,
-				processes: [],
-				priceList: [],
-				records: [],
-				videoPlayingStates: {}, // 记录每个视频的播放状态
-				showQrcodeModal: false, // 控制二维码弹窗显示
+			processes: [],
+			priceList: [],
+			records: [],
 				destinations: [
 					// {
 					// 	icon: '/static/home/爱心援乡.png',
@@ -307,26 +218,9 @@
 			sbk_cion() {
 				const item = getApp().globalData.configData.find(i => i.keyName === 'sbk_cion')
 				return item ? item.keyContent : ''
-			},
-			serviceQrcodeUrl() {
-				const item = getApp().globalData.configData.find(i => i.keyName === 'kefu_code')
-				return item ? item.keyContent : ''
 			}
 		},
 		methods: {
-			changeTo(e) {
-				this.value = e
-				console.log(e, '111')
-				if (e == 1) {
-					uni.reLaunch({
-						url: '/pages/component/recycle'
-					}, true);
-				} else if (e == 2) {
-					uni.reLaunch({
-						url: '/pages/component/my'
-					}, true);
-				}
-			},
 			goAbout() {
 				uni.navigateTo({
 					url: '/pages/subcomponent/about'
@@ -440,147 +334,22 @@
 				this.sbkCion = sbk ? sbk.keyContent : '';
 			},
 			
-			// 视频相关方法
-			playVideoFullscreen(item, index) {
-				if (!this.videoPlayingStates[index]) {
-					// 第一次点击：显示视频并开始播放
-					this.$set(this.videoPlayingStates, index, true);
-					// 等待视频元素渲染后再进行操作
-					this.$nextTick(() => {
-						setTimeout(() => {
-							const videoContext = uni.createVideoContext(`video-${index}`, this);
-							if (videoContext) {
-								// 直接进入全屏播放，强制竖屏
-								videoContext.requestFullScreen({
-									direction: 0 // 竖屏方向，0代表竖屏，1代表横屏，-1自动
-								});
-							}
-						}, 200);
-					});
+			// 轮播图图片点击事件
+			onBannerImageClick({ item, index }) {
+				// 非视频类型的图片点击，显示客服二维码
+				if (item.type !== 1) {
+					this.showServiceQrcode()
 				}
 			},
 			
 			// 显示客服二维码弹窗
 			showServiceQrcode() {
-				this.showQrcodeModal = true;
+				this.$refs.serviceQrcode.open()
 			},
 			
 			// 关闭二维码弹窗
 			closeQrcodeModal() {
-				this.showQrcodeModal = false;
-			},
-			
-			// 处理二维码长按事件
-			onQrcodeLongPress() {
-				console.log('长按二维码');
-				// 在微信小程序中，show-menu-by-longpress="true" 会自动处理长按识别
-				// 这里可以添加一些反馈提示
-				uni.showToast({
-					title: '长按识别二维码',
-					icon: 'none',
-					duration: 1500
-				});
-			},
-			
-			// 保存二维码到相册
-			saveQrcodeToAlbum() {
-				if (!this.serviceQrcodeUrl) {
-					uni.showToast({
-						title: '二维码还未加载完成',
-						icon: 'none'
-					});
-					return;
-				}
-				
-				// 先授权相册权限
-				uni.getSetting({
-					success: (res) => {
-						if (!res.authSetting['scope.writePhotosAlbum']) {
-							// 没有权限，申请权限
-							uni.authorize({
-								scope: 'scope.writePhotosAlbum',
-								success: () => {
-									this.doSaveQrcodeImage();
-								},
-								fail: () => {
-									// 权限被拒绝，引导用户手动开启
-									uni.showModal({
-										title: '提示',
-										content: '需要您授权保存相册权限',
-										showCancel: false,
-										success: () => {
-											uni.openSetting();
-										}
-									});
-								}
-							});
-						} else {
-							// 已有权限，直接保存
-							this.doSaveQrcodeImage();
-						}
-					}
-				});
-			},
-			
-			// 执行保存二维码图片
-			doSaveQrcodeImage() {
-				uni.downloadFile({
-					url: this.serviceQrcodeUrl,
-					success: (res) => {
-						if (res.statusCode === 200) {
-							uni.saveImageToPhotosAlbum({
-								filePath: res.tempFilePath,
-								success: () => {
-									uni.showToast({
-										title: '保存成功',
-										icon: 'success'
-									});
-								},
-								fail: (err) => {
-									console.log('保存失败', err);
-									uni.showToast({
-										title: '保存失败',
-										icon: 'none'
-									});
-								}
-							});
-						}
-					},
-					fail: (err) => {
-						console.log('下载失败', err);
-						uni.showToast({
-							title: '下载失败',
-							icon: 'none'
-						});
-					}
-				});
-			},
-			
-			onVideoPlay(index) {
-				this.$set(this.videoPlayingStates, index, true);
-			},
-			
-			onVideoPause(index) {
-				this.$set(this.videoPlayingStates, index, false);
-			},
-			
-			onVideoEnded(index) {
-				// 视频播放结束，回到预览状态
-				this.$set(this.videoPlayingStates, index, false);
-			},
-			
-			onFullscreenChange(e) {
-				console.log('全屏状态改变:', e.detail);
-				const videoIndex = e.target.id.replace('video-', '');
-				
-				if (e.detail.fullScreen) {
-					// 进入全屏时，不做任何操作
-					console.log('进入全屏模式，方向:', e.detail.direction);
-				} else {
-					// 退出全屏时，回到预览状态
-					console.log('退出全屏模式，回到预览状态');
-					this.$set(this.videoPlayingStates, videoIndex, false);
-				}
+				// 弹窗关闭后的回调处理
 			},
 			// 初始化页面数据的方法
 			initializePageData() {
@@ -658,86 +427,7 @@
 		padding-bottom: env(safe-area-inset-bottom);
 	}
 
-	.banner {
-		width: 100%;
-		height: 400rpx;
-		position: relative;
-		overflow: hidden;
-		border-radius: 0 0 30rpx 30rpx;
 
-		image {
-			width: 100%;
-			height: 100%;
-		}
-		
-		.video-container {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			
-			.video-poster {
-				cursor: pointer;
-				transition: transform 0.2s ease;
-				
-				&:active {
-					transform: scale(0.98);
-				}
-			}
-			
-			.video-overlay {
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				background: rgba(0, 0, 0, 0.4);
-				z-index: 10;
-				cursor: pointer;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				
-				.play-button-large {
-					width: 120rpx;
-					height: 120rpx;
-					background: transparent;
-					border-radius: 50%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					backdrop-filter: blur(10rpx);
-					transition: all 0.3s ease;
-					box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
-					// border: 3rpx solid rgba(255, 255, 255, 0.9);
-					
-					&:active {
-						transform: scale(0.9);
-						background: rgba(255, 255, 255, 0.1);
-					}
-					
-					.play-triangle {
-						width: 0;
-						height: 0;
-						border-left: 24rpx solid #fff;
-						border-top: 18rpx solid transparent;
-						border-bottom: 18rpx solid transparent;
-						margin-left: 8rpx;
-						transition: all 0.3s ease;
-						filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
-					}
-				}
-				
-				&:hover .play-button-large {
-					transform: scale(1.1);
-					box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4);
-					
-					.play-triangle {
-						border-left-color: #ff8917;
-					}
-				}
-			}
-		}
-	}
 
 	.content {
 		// flex: 1;
@@ -1266,109 +956,5 @@
 		}
 	}
 
-	// 客服二维码弹窗样式
-	.qrcode-modal-mask {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: rgba(0, 0, 0, 0.6);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		z-index: 9999;
-		backdrop-filter: blur(5rpx);
-	}
 
-	.qrcode-modal-content {
-		background: #fff;
-		border-radius: 24rpx;
-		width: 600rpx;
-		max-width: 90vw;
-		animation: fadeInScale 0.3s ease;
-		overflow: hidden;
-	}
-
-	.qrcode-modal-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 40rpx 40rpx 20rpx 40rpx;
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-
-	.qrcode-modal-title {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #333;
-	}
-
-	.qrcode-modal-close {
-		padding: 10rpx;
-		margin: -10rpx;
-	}
-
-	.qrcode-modal-body {
-		padding: 40rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.qrcode-modal-img {
-		width: 400rpx;
-		height: 400rpx;
-		border-radius: 16rpx;
-		margin-bottom: 30rpx;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-	}
-
-	.qrcode-placeholder {
-		width: 400rpx;
-		height: 400rpx;
-		border-radius: 16rpx;
-		margin-bottom: 30rpx;
-		background: #f5f5f5;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		
-		text {
-			color: #999;
-			font-size: 28rpx;
-		}
-	}
-
-	.qrcode-modal-tip {
-		font-size: 28rpx;
-		color: #666;
-		text-align: center;
-		line-height: 1.4;
-		margin-bottom: 20rpx;
-	}
-
-	.qrcode-actions {
-		display: flex;
-		justify-content: center;
-		margin-top: 20rpx;
-	}
-
-	.save-btn {
-		background: linear-gradient(90deg, #ff8917, #ffd01e);
-		color: #fff;
-		border: none;
-		border-radius: 25rpx;
-		padding: 16rpx 40rpx;
-		font-size: 28rpx;
-		font-weight: bold;
-		
-		&::after {
-			border: none;
-		}
-		
-		&:active {
-			opacity: 0.8;
-		}
-	}
 </style>
\ No newline at end of file
diff --git a/pages/component/my.vue b/pages/component/my.vue
index 757141d..ed69185 100644
--- a/pages/component/my.vue
+++ b/pages/component/my.vue
@@ -156,40 +156,19 @@
             </view>
         </view>
         <!-- 根据角色显示不同的导航栏 -->
-        <uv-tabbar :value="value" :fixed="true" @change="changeTo">
-            <uv-tabbar-item text="首页">
-                <template v-slot:active-icon>
-                    <image class="icon" src="/static/home/首页-点击.png"></image>
-                </template>
-                <template v-slot:inactive-icon>
-                    <image class="icon" src="/static/home/首页-未点击.png"></image>
-                </template>
-            </uv-tabbar-item>
-            <uv-tabbar-item text="回收">
-                <template v-slot:active-icon>
-                    <image class="icon" src="/static/home/回收-点击.png"></image>
-                </template>
-                <template v-slot:inactive-icon>
-                    <image class="icon" src="/static/home/回收-未点击.png"></image>
-                </template>
-            </uv-tabbar-item>
-            <uv-tabbar-item text="我的">
-                <template v-slot:active-icon>
-                    <image class="icon" src="/static/home/我的-点击.png"></image>
-                </template>
-                <template v-slot:inactive-icon>
-                    <image class="icon" src="/static/home/我的-未点击.png"></image>
-                </template>
-            </uv-tabbar-item>
-        </uv-tabbar>
+        <tabbar select="my"></tabbar>
     </view>
 </template>
 
 <script>
 import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
+import tabbar from '../../compoent/base/tabbar.vue'
 
 export default {
     mixins: [pullRefreshMixin],
+    components: {
+        tabbar
+    },
     data() {
         return {
             value: 2,
@@ -224,18 +203,9 @@ export default {
                 throw error // 抛出错误表示刷新失败
             }
         },
-        changeTo(e) {
-            this.value = e
-            console.log(e, '111')
-            if (e == 0) {
-                uni.reLaunch({
-                    url: '/pages/component/home'
-                });
-            } else if (e == 1) {
-                uni.reLaunch({
-                    url: '/pages/component/recycle'
-                });
-            }
+        getSelectKey() {
+            const keys = ['home', 'recycle', 'my']
+            return keys[this.value] || 'my'
         },
         goWithdraw() {
             uni.navigateTo({
diff --git a/pages/component/recycle copy.vue b/pages/component/recycle copy.vue
index bf6ebf8..854762e 100644
--- a/pages/component/recycle copy.vue	
+++ b/pages/component/recycle copy.vue	
@@ -186,38 +186,7 @@
     </view>
 
     <!-- 根据角色显示不同的导航栏 -->
-    <uv-tabbar
-      v-if="ishow"
-      :value="value" 
-      :fixed="true" 
-      @change="changeTo" 
-      class="uv-tabbar"
-    >
-      <uv-tabbar-item text="首页" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/首页-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/首页-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-      <uv-tabbar-item text="回收" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/回收-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/回收-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-      <uv-tabbar-item text="我的" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/我的-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/我的-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-    </uv-tabbar>
+    <tabbar v-if="ishow" :select="getSelectKey()"></tabbar>
 
     <!-- 品牌索引弹窗 -->
     <view v-if="showBrandPopup" class="brand-popup-mask">
@@ -296,8 +265,12 @@
 <script>
   import tabBarMixin from '../mixins/tabBarMixin.js'
   import { pinyin } from '../../utils/pinyin.js'
+  import tabbar from '../../compoent/base/tabbar.vue'
 export default {
   mixins: [tabBarMixin],
+  components: {
+    tabbar
+  },
   data() {
     return {
       value:1,
@@ -395,19 +368,10 @@ export default {
       console.log('closePriceInfoPopup called');
       this.showPriceInfoPopup = false
     },
-    changeTo(e){
-      this.value = e
-      if(e==2){
-        uni.reLaunch({
-          url: '/pages/component/my'
-        });
-      }else if(e==0){
-        console.log(e,'111')
-        uni.reLaunch({
-          url: '/pages/component/home'
-        });
-      }
-    },
+    getSelectKey() {
+       const keys = ['home', 'recycle', 'my']
+       return keys[this.value] || 'recycle'
+     },
     fetchGoodsList(categoryId, page = 1, callback) {
       this.$api('getClassGoodsList', {
         classId: categoryId,
@@ -1924,4 +1888,4 @@ export default {
     }
   }
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/component/recycle.vue b/pages/component/recycle.vue
index 2ca1992..00de95c 100644
--- a/pages/component/recycle.vue
+++ b/pages/component/recycle.vue
@@ -1,76 +1,16 @@
 <template>
   <view class="container">
     <!-- 顶部banner -->
-    <view class="banner">
-      <swiper
-        :indicator-dots="false"
-        :autoplay="true"
-        :interval="3000"
-        :duration="500"
-        circular
-        style="width: 100%; height: 320rpx;"
-      >
-        <swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
-          <view v-if="item.type == 1" class="video-container">
-            <!-- 预览状态：显示封面图 -->
-            <image 
-              v-if="!videoPlayingStates[index]" 
-              :src="item.image || ''" 
-              mode="aspectFill" 
-              style="width: 100%; height: 100%;"
-              class="video-poster"
-              @click="playVideoFullscreen(item, index)"
-            />
-            <!-- 播放状态：显示视频 -->
-          <video 
-              v-else
-              :id="`recycle-video-${index}`"
-            :src="item.voUrl" 
-              :autoplay="true" 
-              :muted="false" 
-              :loop="false" 
-              :controls="true"
-              :show-play-btn="true" 
-            :show-center-play-btn="false"
-              :show-fullscreen-btn="true"
-              :show-progress="true"
-              :show-mute-btn="true"
-              :enable-progress-gesture="true"
-              :enable-play-gesture="true"
-            object-fit="cover"
-            style="width: 100%; height: 100%;"
-              @fullscreenchange="onFullscreenChange"
-              @play="onVideoPlay(index)"
-              @pause="onVideoPause(index)"
-              @ended="onVideoEnded(index)"
-          ></video>
-            <!-- 播放按钮覆盖层 -->
-            <view v-if="!videoPlayingStates[index]" class="video-overlay" @click="playVideoFullscreen(item, index)">
-              <view class="play-button-large">
-                <view class="play-triangle"></view>
-              </view>
-            </view>
-          </view>
-          <image v-else :src="item.image" mode="aspectFill" style="width: 100%; height: 100%;" />
-        </swiper-item>
-      </swiper>
-	  
-	  <!-- 备用静态图片，当没有轮播图数据时显示 -->
-	  <image v-if="!bannerList || bannerList.length === 0" :src="recycle_banner" mode="aspectFill" style="width: 100%; height: 100%;" />
-    </view>
-	
+    <banner-swiper :banner-list="bannerList" height="320rpx" :fallback-image="recycle_banner"
+      video-id-prefix="recycle-video"></banner-swiper>
+
 
     <!-- 商品列表 -->
     <view class="goods-list">
       <!-- 左侧分类导航 -->
       <view class="category-nav">
-        <view 
-          v-for="(category, index) in categories" 
-          :key="category.id || index"
-          class="category-item"
-          :class="{ active: currentCategory === index }"
-          @click="switchCategory(index)"
-        >
+        <view v-for="(category, index) in categories" :key="category.id || index" class="category-item"
+          :class="{ active: currentCategory === index }" @click="switchCategory(index)">
           <view class="category-dot" v-if="getCategoryItemCount(index) > 0">{{ getCategoryItemCount(index) }}</view>
           {{ category.title }}
         </view>
@@ -80,36 +20,40 @@
       <scroll-view class="goods-content" scroll-y @scrolltolower="loadMoreGoods">
         <view class="goods-section">
           <view class="goods-item" v-for="(item, index) in recycleList" :key="index">
-            <image v-if="item.image" :src="item.image" class="goods-item-img" mode="aspectFit" />
+            <view class="goods-img-container">
+              <image v-if="item.image" :src="item.image" class="goods-item-img" mode="aspectFit" />
+              <!-- 品牌标签 -->
+              <view class="brand-tag" v-if="item.isPin === 'Y'">品牌</view>
+            </view>
             <view class="goods-info-wrap">
               <view class="goods-header">
-                <text class="goods-name">{{item.name}}</text>
+                <text class="goods-name">{{ item.name }}</text>
               </view>
-              <text class="goods-desc">{{item.service}}</text>
+              <text class="goods-desc">{{ item.service }}</text>
               <view class="rules-brand-row">
-              <view class="rules-link" @click="showRules(item)">
-                <view class="rules">
-                  <text>回收规则</text>
-                  <uni-icons type="right" size="14" color="#999"></uni-icons>
+                <view class="rules-link" @click="showRules(item)" v-if="item.isRecycleRules == '1'">
+                  <view class="rules">
+                    <text>回收规则</text>
+                    <uni-icons type="right" size="14" color="#999"></uni-icons>
                   </view>
                 </view>
-                <view class="brand-check-placeholder" v-if="item.isPin === 'Y'">
-                  <view class="brand-check" @click="checkBrand(index)"> 
+                <!-- <view class="brand-check-placeholder" v-if="item.isPin === 'Y'">
+                  <view class="brand-check" @click="checkBrand(index)">
                     <text>查看品牌</text>
                     <uni-icons type="right" size="12" color="#ff7a0e"></uni-icons>
                   </view>
-                </view>
+                </view> -->
               </view>
               <view class="goods-info">
-                <view class="price-info">
+                <!-- <view class="price-info">
                   <text class="price-symbol">¥</text>
-                <text class="price-value" v-if="!item.maxPrice || item.maxPrice == item.price">{{item.price}}</text>
-                <text class="price-value" v-else>{{item.price}}-{{item.maxPrice}}</text>
+                  <text class="price-value" v-if="!item.maxPrice || item.maxPrice == item.price">{{ item.price }}</text>
+                  <text class="price-value" v-else>{{ item.price }}-{{ item.maxPrice }}</text>
                   <text class="price-unit">/{{ item.unit || '件' }}</text>
-                </view>
+                </view> -->
                 <view class="quantity-control">
                   <button class="btn-minus" @click="updateQuantity(index, -1)">-</button>
-                  <text class="quantity">{{getItemTotalQuantity(item)}}</text>
+                  <text class="quantity">{{ getItemTotalQuantity(item) }}</text>
                   <button class="btn-plus" @click="updateQuantity(index, 1)">+</button>
                 </view>
               </view>
@@ -137,21 +81,23 @@
     </view>
 
     <!-- 固定底部区域 -->
-    <view class="fixed-bottom-wrap" v-if="!showDetailPanel" >
+    <view class="fixed-bottom-wrap" v-if="!showDetailPanel">
       <view class="green-tip-bar">
         回收范围仅支持回收以上品类，按件回收预计比称重回收多
-        <text class="tip-highlight"> {{extraRecycleAmount.display}}</text>
+        <text class="tip-highlight"> {{ extraRecycleAmount.display }}</text>
       </view>
       <view class="bottom-bar">
         <view class="bottom-left">
           <view class="summary-row">
-            <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> {{ totalUnitText }} 预计回收可得</text>
+            <text class="summary-label">已选 <text class="summary-count">{{ totalCount }}</text> {{ totalUnitText }}
+              预计回收可得</text>
             <uni-icons type="help" size="18" color="#b2b2b2" style="margin: 0 8rpx;" @tap="showPriceInfoPopups" />
           </view>
-          <view class="amount-row">
-            <uni-icons :type="showDetailPanel ? 'up' : 'down'" size="18" color="#5e5e5e" style="margin-right: 8rpx;vertical-align: middle;" @click="toggleDetailPanel" />
-            <text class="amount" v-if="priceRange.min === priceRange.max">¥{{priceRange.min}}</text>
-            <text class="amount" v-else>¥{{priceRange.min}}-{{priceRange.max}}</text>
+          <view class="amount-row" @click="toggleDetailPanel">
+            <uni-icons :type="showDetailPanel ? 'up' : 'down'" size="18" color="#5e5e5e"
+              style="margin-right: 8rpx;vertical-align: middle;" />
+            <text class="amount" v-if="priceRange.min === priceRange.max">¥{{ priceRange.min }}</text>
+            <text class="amount" v-else>¥{{ priceRange.min }}-{{ priceRange.max }}</text>
           </view>
         </view>
         <button class="submit-btn" @click="submitOrder">预约上门取件</button>
@@ -165,38 +111,49 @@
         <view class="detail-popup-close" @click="toggleDetailPanel">×</view>
         <view class="green-tip-bar popup-green-tip">
           回收范围仅支持回收以上品类，按件回收预计比称重回收多
-          <text class="tip-highlight"> {{extraRecycleAmount.display}}</text>
+          <text class="tip-highlight"> {{ extraRecycleAmount.display }}</text>
         </view>
         <view class="panel-header">
           <text class="panel-title">已选商品明细</text>
         </view>
         <scroll-view class="panel-list popup-panel-list" scroll-y>
-          <view v-for="(item, idx) in selectedProducts" :key="item.uniqueKey || idx" class="panel-item">
-            <image v-if="item.image" :src="item.image" class="panel-item-img" mode="aspectFit" />
+          <view v-for="(item, idx) in selectedProducts" :key="item.uniqueKey || idx" class="panel-item" @click="openProductDetail(item)">
+            <view class="panel-img-container">
+              <image v-if="item.image" :src="item.image" class="panel-item-img" mode="aspectFit" />
+              <!-- 品牌标签 -->
+              <view class="panel-brand-tag" v-if="item.brandId">品牌</view>
+            </view>
             <view class="panel-item-info">
-              <text class="panel-item-name">{{item.name}}</text>
-              <text class="panel-item-desc" v-if="item.brandName">品牌：{{item.brandName}}</text>
-              <text class="panel-item-desc" v-else>{{item.service}}</text>
-              <text class="panel-item-price" v-if="!item.maxPrice || item.maxPrice == item.price">¥{{item.price}}/{{ item.unit || '件' }}</text>
-              <text class="panel-item-price" v-else>¥{{item.price}}-{{item.maxPrice}}/{{ item.unit || '件' }}</text>
+              <text class="panel-item-name">{{ item.name }}</text>
+              <text class="panel-item-desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{ item.styleName }}</text>
+              <text class="panel-item-desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</text>
+              <text class="panel-item-desc" v-else-if="item.styleName">款式：{{ item.styleName }}</text>
+              <text class="panel-item-desc" v-else>{{ item.service }}</text>
+              <text class="panel-item-price" v-if="!item.maxPrice || item.maxPrice == item.price">¥{{ item.price }}/{{
+                item.unit || '件' }}</text>
+              <text class="panel-item-price" v-else>¥{{ item.price }}-{{ item.maxPrice }}/{{ item.unit || '件' }}</text>
             </view>
             <view class="panel-quantity-control">
-              <button class="btn-minus" @click="updateQuantityByProduct(item, -1)">-</button>
-              <text class="quantity">{{item.quantity}}</text>
-              <button class="btn-plus" @click="updateQuantityByProduct(item, 1)">+</button>
+              <button class="btn-minus" @click.stop="updateQuantityByProduct(item, -1)">-</button>
+              <!-- <button class="btn-minus">-</button> -->
+              <text class="quantity">{{ item.quantity }}</text>
+              <button class="btn-plus" @click.stop="updateQuantityByProduct(item, 1)">+</button>
+              <!-- <button class="btn-plus">+</button> -->
             </view>
           </view>
         </scroll-view>
         <view class="popup-bottom-bar">
           <view class="bottom-left">
             <view class="summary-row">
-              <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> {{ totalUnitText }} 预计回收可得</text>
+              <text class="summary-label">已选 <text class="summary-count">{{ totalCount }}</text> {{ totalUnitText }}
+                预计回收可得</text>
               <uni-icons type="help" size="18" color="#b2b2b2" style="margin: 0 8rpx;" @tap="showPriceInfoPopups" />
             </view>
-            <view class="amount-row">
-              <uni-icons :type="showDetailPanel ? 'up' : 'down'" size="18" color="#5e5e5e" style="margin-right: 8rpx;vertical-align: middle;" @click="toggleDetailPanel" />
-              <text class="amount" v-if="priceRange.min === priceRange.max">¥{{priceRange.min}}</text>
-              <text class="amount" v-else>¥{{priceRange.min}}-{{priceRange.max}}</text>
+            <view class="amount-row" @click="toggleDetailPanel">
+              <uni-icons :type="showDetailPanel ? 'up' : 'down'" size="18" color="#5e5e5e"
+                style="margin-right: 8rpx;vertical-align: middle;" />
+              <text class="amount" v-if="priceRange.min === priceRange.max">¥{{ priceRange.min }}</text>
+              <text class="amount" v-else>¥{{ priceRange.min }}-{{ priceRange.max }}</text>
             </view>
           </view>
           <button class="submit-btn" @click="submitOrder">预约上门取件</button>
@@ -228,138 +185,43 @@
     </view>
 
     <!-- 根据角色显示不同的导航栏 -->
-    <uv-tabbar
-      v-if="ishow"
-      :value="value" 
-      :fixed="true" 
-      @change="changeTo" 
-      class="uv-tabbar"
-    >
-      <uv-tabbar-item text="首页" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/首页-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/首页-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-      <uv-tabbar-item text="回收" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/回收-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/回收-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-      <uv-tabbar-item text="我的" >
-        <template v-slot:active-icon>
-          <image class="icon" src="/static/home/我的-点击.png"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="icon" src="/static/home/我的-未点击.png"></image>
-        </template>
-      </uv-tabbar-item>
-    </uv-tabbar>
-
-    <!-- 品牌索引弹窗 -->
-    <view v-if="showBrandPopup" class="brand-popup-mask">
-      <view class="brand-popup">
-        <view class="brand-popup-header">
-          <text class="brand-popup-close" @click="closeBrandPopup">关闭</text>
-          <text class="brand-popup-title">可回收的品牌</text>
-        </view>
-        <view class="brand-popup-search">
-          <input class="brand-search-input" v-model="brandSearch" placeholder="请输入要查询的内容" @input="onBrandSearchInput" />
-        </view>
-        <scroll-view class="brand-popup-list" scroll-y :scroll-into-view="scrollToView">
-          <view v-for="letter in brandIndexList" :key="letter" :id="'brand-letter-' + letter">
-            <view class="brand-letter">{{letter}}</view>
-            <view v-for="brand in filteredBrandList.filter(b => b.letter === letter)" :key="brand.name" class="brand-item" @click="openBrandConfirm(brand)">
-              <image :src="brand.logo" class="brand-logo" mode="aspectFit" />
-              <text class="brand-name">{{brand.name}}</text>
-            </view>
-          </view>
-        </scroll-view>
-        <view class="brand-index-bar">
-          <text v-for="letter in brandIndexList" :key="letter" :class="{active: currentLetter === letter}" @click="scrollToLetter(letter)">{{letter}}</text>
-        </view>
-      </view>
-    </view>
+    <tabbar v-if="ishow" select="recycle"></tabbar>
 
-    <!-- 回收规则弹窗 -->
-    <view v-if="showRulePopup" class="rule-popup-mask" @click.self="handleRulePopupMaskClick">
-      <view class="rule-popup">
-        <view class="rule-popup-title">回收规则</view>
-        <scroll-view class="rule-popup-content" scroll-y @scroll="onRuleContentScroll" @scrolltolower="onRuleScrollToLower">
-		  <uv-parse :content="ruleHtml" @ready="onRuleContentReady"></uv-parse>
-          <view class="rule-content-bottom-indicator"></view>
-        </scroll-view>
-        <view v-if="!hasScrolledToBottom" class="scroll-tip">请滚动到底部阅读完整内容</view>
-        <button class="rule-popup-btn" :class="{ disabled: !hasScrolledToBottom }" :disabled="!hasScrolledToBottom" @click.stop="closeRulePopup">我知道了</button>
-      </view>
-    </view>
+    <!-- 品牌选择组件 -->
+    <brand-selector ref="brandSelector" @brand-confirm="onBrandConfirm" @reduce-select="onReduceSelect"
+      @close="onBrandSelectorClose" @get-existing-quantities="getExistingQuantities"></brand-selector>
 
-    <!-- 预约上门取件弹窗 -->
-    <view v-if="showPickupConfirm" class="pickup-confirm-mask">
-      <view class="pickup-confirm-popup">
-        <view class="pickup-confirm-title">温馨提示</view>
-        <view class="pickup-confirm-content">
-            <uv-parse :content="recycle_toast"></uv-parse>
-          <!-- <view class="confirm-item confirm-item-red">1.当前回收快递免费上门，由于快递成本较高，为避免不必要的成本及资源二次浪费不属于可回收品类或不符合回收标准的物品请勿寄出。</view>
-          <view class="confirm-item">2.已通过的回收物品将正常结算。不符合回收要求的物品可选择快递取回，运费自付。请在订单结算后48小时内联系在线客服安排取回，逾期未联系将默认捐赠，无法再次取回。</view>
-          <view class="confirm-item">3.若用户寄出大量不可回收的物品，平台有权限制下次回收权限，或取消下次包邮服务。</view>
-          <view class="confirm-item">4.对于合格率高的回收订单，平台将根据实际情况，给予额外回收奖励。</view> -->
-        </view>
-        <view class="pickup-confirm-btn-row">
-          <button class="pickup-confirm-btn" @click="handlePickupCancel">取消回收</button>
-          <button class="pickup-confirm-btn agree" @click="handlePickupAgree">我同意</button>
-        </view>
-      </view>
-    </view>
+    <!-- 规则弹窗组件 -->
+    <rule-popup ref="rulePopup" :confirm-content="recycle_toast" @rule-confirm="onRuleConfirm"
+      @pickup-cancel="handlePickupCancel" @pickup-confirm="handlePickupAgree"></rule-popup>
 
-    <!-- 品牌确认弹窗 -->
-    <view v-if="showBrandConfirm" class="brand-confirm-mask" @click.self="closeBrandConfirm">
-      <view class="brand-confirm-popup">
-        <view class="brand-confirm-title">品牌确认提示</view>
-        <view class="brand-confirm-logo-wrap">
-          <image :src="brandConfirmInfo.logo" class="brand-confirm-logo" mode="aspectFit" />
-        </view>
-        <view class="brand-confirm-name">{{ brandConfirmInfo.name }}</view>
-        <view class="brand-confirm-desc">请确认所选品牌是否与实物品牌信息一致，否则将无法进行回收。</view>
-        <view class="brand-confirm-btn-row">
-          <button class="brand-confirm-btn retry" @click="closeBrandConfirm">重新选择</button>
-          <button class="brand-confirm-btn confirm" @click="confirmBrand">确认一致</button>
-        </view>
-      </view>
-    </view>
+    <!-- 商品明细弹窗组件 -->
+    <product-detail-popup ref="productDetailPopup" @confirm-changes="onDetailConfirmChanges" @close="onDetailPopupClose"></product-detail-popup>
 
-    <!-- 减少数量时的品牌选择弹窗 -->
-    <view v-if="showBrandReducePopup" class="brand-reduce-popup-mask" @click.self="closeBrandReducePopup">
-      <view class="brand-reduce-popup">
-        <view class="brand-reduce-popup-header">
-          <text class="brand-reduce-popup-close" @click="closeBrandReducePopup">关闭</text>
-          <text class="brand-reduce-popup-title">选择要减少的品牌</text>
-        </view>
-        <scroll-view class="brand-reduce-popup-list" scroll-y>
-          <view v-for="brand in reduceBrandList" :key="brand.brandId" class="brand-item" @click="selectReduceBrand(brand)">
-            <image :src="brand.logo" class="brand-logo" mode="aspectFit" />
-            <text class="brand-name">{{brand.name}}</text>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
   </view>
 </template>
 
 <script>
-  import tabBarMixin from '../mixins/tabBarMixin.js'
-  import { pinyin } from '../../utils/pinyin.js'
+import tabBarMixin from '../mixins/tabBarMixin.js'
+import { pinyin } from '../../utils/pinyin.js'
+import tabbar from '../../compoent/base/tabbar.vue'
+import brandSelector from '../../compoent/recycle/brand-selector.vue'
+import bannerSwiper from '../../compoent/base/banner-swiper.vue'
+import rulePopup from '../../compoent/base/rule-popup.vue'
+import productDetailPopup from '../../compoent/recycle/product-detail-popup.vue'
 export default {
   mixins: [tabBarMixin],
+  components: {
+    tabbar,
+    brandSelector,
+    bannerSwiper,
+    rulePopup,
+    productDetailPopup
+  },
   data() {
     return {
-      value:1,
-      ishow:true,
+      value: 1,
+      ishow: true,
       // 动态数据
       allProducts: {},      // { [categoryId]: [商品数组] }
       allProductsPage: {},  // { [categoryId]: 当前已加载页码 }
@@ -367,38 +229,22 @@ export default {
       pageSize: 10,
       currentCategory: 0,
       tabbarHeight: 0,
-      videoPlayingStates: {}, // 记录每个视频的播放状态
       showDetailPanel: false,
-      showBrandPopup: false,
-      showRulePopup: false,
       ruleImgUrl: '/static/回收/回收规则.png',
-      showPickupConfirm: false,
-      showBrandConfirm: false,
-      brandConfirmInfo: {
-        logo: '',
-        name: ''
-      },
-      brandList: [],
       brandCache: {}, // 为每个商品缓存品牌信息 { productId: [brandList] }
-      currentLetter: 'A',
-      scrollToView: '',
-      brandSearch: '',
-      ruleHtml: '', // 回收规则富文本内容
       loadingMore: false,
       finished: false,
       pendingBrandIndex: null, // 记录待加一的品牌商品index
       showPriceInfoPopup: false,
       isWaitingForBrandSelection: false, // 等待品牌选择的标志
-      showBrandReducePopup: false, // 显示减少数量时的品牌选择弹窗
       reduceItem: null, // 待减少数量的商品
-      reduceBrandList: [], // 可减少的品牌列表
       viewedRuleItems: new Set(), // 已查看过规则的商品ID集合
       loadOptions: null, // 保存options参数
       userInfo: null, // 用户信息
       isUserBlacklisted: false, // 用户是否被拉黑
       currentProductId: null, // 当前查看品牌的商品ID
       searchTimer: null, // 搜索防抖定时器
-      hasScrolledToBottom: false, // 是否已滚动到底部
+      isFromPickupFlow: false // 标记是否来自预约流程
     }
   },
   computed: {
@@ -427,6 +273,10 @@ export default {
     totalCount() {
       return Object.values(this.allProducts).reduce((total, categoryItems) => {
         return total + categoryItems.reduce((sum, item) => {
+          // 如果商品有品牌款式数量，汇总所有品牌款式的数量
+          if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+            return sum + Object.values(item.brandStyleQuantities).reduce((styleSum, qty) => styleSum + qty, 0)
+          }
           // 如果商品有品牌数量，汇总所有品牌的数量
           if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
             return sum + Object.values(item.brandQuantities).reduce((brandSum, qty) => brandSum + qty, 0)
@@ -443,18 +293,20 @@ export default {
       Object.values(this.allProducts).forEach(categoryItems => {
         categoryItems.forEach(item => {
           let hasQuantity = false
-          if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
+          if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+            hasQuantity = Object.values(item.brandStyleQuantities).some(qty => qty > 0)
+          } else if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
             hasQuantity = Object.values(item.brandQuantities).some(qty => qty > 0)
           } else {
             hasQuantity = (item.quantity || 0) > 0
           }
-          
+
           if (hasQuantity) {
             units.add(item.unit || '件')
           }
         })
       })
-      
+
       // 如果只有一种单位，显示单位；如果混合多种单位，显示"项"
       if (units.size === 0) return '件'
       if (units.size === 1) return Array.from(units)[0]
@@ -464,25 +316,38 @@ export default {
     totalPriceRange() {
       const result = Object.values(this.allProducts).reduce((categoryTotal, categoryItems) => {
         return categoryItems.reduce((sum, item) => {
-          let itemQuantity = 0
-          // 如果商品有品牌数量，汇总所有品牌的数量
-          if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
-            itemQuantity = Object.values(item.brandQuantities).reduce((brandSum, qty) => brandSum + qty, 0)
+          // 如果商品有品牌款式数量，使用款式价格计算
+          if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+            Object.entries(item.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+              if (quantity > 0 && item.styleCache && item.styleCache[uniqueKey]) {
+                const styleInfo = item.styleCache[uniqueKey].styleInfo
+                const minPrice = Number(styleInfo.minPrice) || 0
+                const maxPrice = Number(styleInfo.maxPrice) || Number(styleInfo.minPrice) || 0
+                sum.min += quantity * minPrice
+                sum.max += quantity * maxPrice
+              }
+            })
           } else {
-            itemQuantity = item.quantity || 0
-          }
-          
-          if (itemQuantity > 0) {
-            const minPrice = Number(item.price) || 0
-            const maxPrice = Number(item.maxPrice) || Number(item.price) || 0
-            sum.min += itemQuantity * minPrice
-            sum.max += itemQuantity * maxPrice
+            let itemQuantity = 0
+            // 如果商品有品牌数量，汇总所有品牌的数量
+            if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
+              itemQuantity = Object.values(item.brandQuantities).reduce((brandSum, qty) => brandSum + qty, 0)
+            } else {
+              itemQuantity = item.quantity || 0
+            }
+
+            if (itemQuantity > 0) {
+              const minPrice = Number(item.price) || 0
+              const maxPrice = Number(item.maxPrice) || Number(item.price) || 0
+              sum.min += itemQuantity * minPrice
+              sum.max += itemQuantity * maxPrice
+            }
           }
-          
+
           return sum
         }, categoryTotal)
       }, { min: 0, max: 0 })
-      
+
       return {
         min: result.min.toFixed(1),
         max: result.max.toFixed(1)
@@ -503,11 +368,32 @@ export default {
       return this.totalPriceRange
     },
     selectedProducts() {
-      // 返回所有分类下所有已选商品，按品牌分组
+      // 返回所有分类下所有已选商品，按品牌款式分组
       const products = []
       Object.values(this.allProducts).flat().forEach(item => {
-        if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
-          // 按品牌分别添加
+        if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+          // 按品牌款式分别添加
+          Object.entries(item.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+            if (quantity > 0 && item.styleCache && item.styleCache[uniqueKey]) {
+              const { brandInfo, styleInfo } = item.styleCache[uniqueKey]
+              products.push({
+                ...item,
+                quantity: quantity,
+                brandId: brandInfo.id,
+                brandName: brandInfo.name,
+                brandImage: brandInfo.logo,
+                styleId: styleInfo.id,
+                styleName: styleInfo.name,
+                styleImage: styleInfo.image,
+                price: styleInfo.minPrice, // 使用款式价格
+                maxPrice: styleInfo.maxPrice,
+                name: item.name, // 保持原商品名称
+                uniqueKey: `${item.id}_${uniqueKey}` // 用于区分同商品不同品牌款式
+              })
+            }
+          })
+        } else if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
+          // 按品牌分别添加（兼容旧数据）
           Object.entries(item.brandQuantities).forEach(([brandId, quantity]) => {
             if (quantity > 0) {
               const brandInfo = this.getBrandInfo(brandId)
@@ -531,9 +417,7 @@ export default {
       })
       return products
     },
-    filteredBrandList() {
-      return this.brandList
-    },
+
     bannerList() {
       return getApp().globalData.bannerList || []
     },
@@ -556,7 +440,7 @@ export default {
     extraRecycleAmount() {
       const minPrice = parseFloat(this.priceRange.min) || 0;
       const maxPrice = parseFloat(this.priceRange.max) || 0;
-      
+
       if (minPrice === 0 && maxPrice === 0) {
         return {
           min: '0.00',
@@ -564,13 +448,13 @@ export default {
           display: '0.00元'
         };
       }
-	  
-	  let re_key_numer = this.re_key_numer || 0.066
-      
+
+      let re_key_numer = this.re_key_numer || 0.066
+
       // 计算减去6.6%后的金额
       const minExtra = minPrice - (minPrice * re_key_numer);
       const maxExtra = maxPrice - (maxPrice * re_key_numer);
-      
+
       // 如果最小值和最大值相等，显示单个值
       if (minPrice === maxPrice) {
         return {
@@ -579,7 +463,7 @@ export default {
           display: `${minExtra.toFixed(2)}元`
         };
       }
-      
+
       // 显示区间
       return {
         min: minExtra.toFixed(2),
@@ -587,44 +471,17 @@ export default {
         display: `${minExtra.toFixed(2)}-${maxExtra.toFixed(2)}元`
       };
     },
-    // 动态生成品牌字母索引，只显示有品牌的字母
-    brandIndexList() {
-      const letters = new Set()
-      let hasSharp = false
-      this.brandList.forEach(b => {
-        if (b.letter && /^[A-Z]$/.test(b.letter)) {
-          letters.add(b.letter)
-        } else {
-          letters.add('#')
-          hasSharp = true
-        }
-      })
-      const arr = Array.from(letters).filter(l => l !== '#').sort()
-      if (hasSharp) arr.push('#')
-      return arr
-    },
+
   },
   methods: {
     showPriceInfoPopups() {
       console.log('showPriceInfoPopup called');
+      this.isFromPickupFlow = false // 标记是从帮助按钮触发
       this.showPriceInfoPopup = true
     },
-    closePriceInfoPopup() {
-      console.log('closePriceInfoPopup called');
-      this.showPriceInfoPopup = false
-    },
-    changeTo(e){
-      this.value = e
-      if(e==2){
-        uni.reLaunch({
-          url: '/pages/component/my'
-        });
-      }else if(e==0){
-        console.log(e,'111')
-        uni.reLaunch({
-          url: '/pages/component/home'
-        });
-      }
+    getSelectKey() {
+      const keys = ['home', 'recycle', 'my']
+      return keys[this.value] || 'recycle'
     },
     fetchGoodsList(categoryId, page = 1, callback) {
       this.$api('getClassGoodsList', {
@@ -647,6 +504,9 @@ export default {
       const categoryId = this.categories[index]?.id
       const categoryItems = this.allProducts[categoryId] || []
       return categoryItems.reduce((sum, item) => {
+        if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+          return sum + Object.values(item.brandStyleQuantities).reduce((styleSum, qty) => styleSum + qty, 0)
+        }
         if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
           return sum + Object.values(item.brandQuantities).reduce((brandSum, qty) => brandSum + qty, 0)
         }
@@ -662,21 +522,52 @@ export default {
       // console.log(categoryId,'switchCategory')
       if (!this.allProducts[categoryId]) {
         this.fetchGoodsList(categoryId, 1)
-          }
+      }
     },
     // 更新商品数量
     updateQuantity(index, delta) {
       const categoryId = this.categories[this.currentCategory]?.id
       const item = this.allProducts[categoryId]?.[index]
       if (!item) return
-      
+
       // 如果是减少数量且delta为负数
       if (delta < 0) {
-        // 检查是否有多个品牌
-        if (item.brandQuantities && Object.keys(item.brandQuantities).length > 1) {
-          // 有多个品牌，显示选择弹窗
+        // 检查是否有多个品牌款式
+        if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 1) {
+          // 有多个品牌款式，显示选择弹窗
+          this.reduceItem = { item, index, delta }
+          const reduceStyleList = Object.entries(item.brandStyleQuantities)
+            .filter(([uniqueKey, quantity]) => quantity > 0)
+            .map(([uniqueKey, quantity]) => {
+              const cacheInfo = item.styleCache[uniqueKey]
+              return {
+                uniqueKey,
+                quantity,
+                name: cacheInfo ? `${cacheInfo.brandInfo.name} - ${cacheInfo.styleInfo.name}` : '未知款式',
+                logo: cacheInfo ? cacheInfo.brandInfo.logo : ''
+              }
+            })
+          this.$refs.brandSelector.openReducePopup(reduceStyleList)
+          return
+        } else if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length === 1) {
+          // 只有一个品牌款式，直接减少
+          const uniqueKey = Object.keys(item.brandStyleQuantities)[0]
+          const currentQty = item.brandStyleQuantities[uniqueKey] || 0
+          const newQty = Math.max(0, currentQty + delta)
+          this.$set(item.brandStyleQuantities, uniqueKey, newQty)
+
+          // 如果数量为0，删除该品牌款式
+          if (newQty === 0) {
+            delete item.brandStyleQuantities[uniqueKey]
+            if (item.styleCache && item.styleCache[uniqueKey]) {
+              delete item.styleCache[uniqueKey]
+            }
+          }
+          return
+        } else if (item.brandQuantities && Object.keys(item.brandQuantities).length > 1) {
+          // 有多个品牌，显示选择弹窗（兼容旧数据）
           this.reduceItem = { item, index, delta }
-          this.reduceBrandList = Object.entries(item.brandQuantities)
+          const reduceBrandList = Object.entries(item.brandQuantities)
             .filter(([brandId, quantity]) => quantity > 0)
             .map(([brandId, quantity]) => {
               const brandInfo = this.getBrandInfo(brandId)
@@ -687,15 +578,15 @@ export default {
                 logo: brandInfo ? brandInfo.logo : ''
               }
             })
-          this.showBrandReducePopup = true
+          this.$refs.brandSelector.openReducePopup(reduceBrandList)
           return
         } else if (item.brandQuantities && Object.keys(item.brandQuantities).length === 1) {
-          // 只有一个品牌，直接减少
+          // 只有一个品牌，直接减少（兼容旧数据）
           const brandId = Object.keys(item.brandQuantities)[0]
           const currentQty = item.brandQuantities[brandId] || 0
           const newQty = Math.max(0, currentQty + delta)
           this.$set(item.brandQuantities, brandId, newQty)
-          
+
           // 如果数量为0，删除该品牌
           if (newQty === 0) {
             delete item.brandQuantities[brandId]
@@ -709,19 +600,34 @@ export default {
           return
         }
       }
-      
+
       // 品牌商品且数量为0且加一时
       if (item.isPin === 'Y' && (item.quantity || 0) === 0 && delta > 0) {
         this.pendingBrandIndex = index
-        this.isWaitingForBrandSelection = true;
-        this.showRules(item); // 先显示回收规则
+        // 检查是否需要显示回收规则
+        if (item.isRecycleRules === 'Y') {
+          this.isWaitingForBrandSelection = true;
+          this.showRules(item); // 先显示回收规则
+        } else {
+          // 不需要显示规则，直接打开品牌选择
+          this.$refs.brandSelector.open(item.id)
+        }
         return
       }
-      // 无品牌商品，数量为0且加一时，也弹规则，确认后再加数量
+      // 无品牌商品，数量为0且加一时
       if (item.isPin !== 'Y' && (item.quantity || 0) === 0 && delta > 0) {
         this.pendingBrandIndex = index
-        this.isWaitingForBrandSelection = false; // 标记为无品牌
-        this.showRules(item)
+        // 检查是否需要显示回收规则
+        if (item.isRecycleRules === 'Y') {
+          this.isWaitingForBrandSelection = false; // 标记为无品牌
+          this.showRules(item)
+        } else {
+          // 不需要显示规则，直接加数量
+          let newQuantity = (item.quantity || 0) + delta
+          if (newQuantity < 0) newQuantity = 0
+          this.$set(item, 'quantity', newQuantity)
+          this.pendingBrandIndex = null
+        }
         return
       }
       // 其它情况直接加数量
@@ -729,27 +635,239 @@ export default {
       if (newQuantity < 0) newQuantity = 0
       this.$set(item, 'quantity', newQuantity)
     },
-    // 选择要减少的品牌
-    selectReduceBrand(brandInfo) {
+    // 处理品牌确认事件（新的款式选择流程）
+    onBrandConfirm(data) {
+      if (this.pendingBrandIndex !== null) {
+        const categoryId = this.categories[this.currentCategory]?.id
+        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex]
+        if (item && data.selectedStyles && data.selectedStyles.length > 0) {
+          // 初始化品牌款式数量对象
+          if (!item.brandStyleQuantities) {
+            this.$set(item, 'brandStyleQuantities', {})
+          }
+
+          // 清理当前品牌的所有款式数据
+          const brandPrefix = `${data.brandInfo.id}_`
+          Object.keys(item.brandStyleQuantities).forEach(key => {
+            if (key.startsWith(brandPrefix)) {
+              delete item.brandStyleQuantities[key]
+              if (item.styleCache && item.styleCache[key]) {
+                delete item.styleCache[key]
+              }
+            }
+          })
+          
+          // 为每个选中的款式设置数量（只保存有数量的款式）
+          data.selectedStyles.forEach(style => {
+            if (style.quantity > 0) {
+              const uniqueKey = `${data.brandInfo.id}_${style.id}`
+              this.$set(item.brandStyleQuantities, uniqueKey, style.quantity)
+              
+              // 缓存款式信息用于后续显示
+              if (!item.styleCache) {
+                this.$set(item, 'styleCache', {})
+              }
+              this.$set(item.styleCache, uniqueKey, {
+                brandInfo: data.brandInfo,
+                styleInfo: style
+              })
+            }
+          })
+
+          // 清除原来的quantity和brandQuantities（如果存在）
+          if (item.quantity) {
+            this.$set(item, 'quantity', 0)
+          }
+          if (item.brandQuantities) {
+            this.$set(item, 'brandQuantities', {})
+          }
+        }
+        this.pendingBrandIndex = null
+      }
+    },
+
+    // 处理减少品牌选择事件
+    onReduceSelect(selectInfo) {
       const { item, index, delta } = this.reduceItem
-      const currentQty = item.brandQuantities[brandInfo.brandId] || 0
-      const newQty = Math.max(0, currentQty + delta)
       
-      this.$set(item.brandQuantities, brandInfo.brandId, newQty)
+      if (selectInfo.uniqueKey) {
+        // 新的品牌款式减少逻辑
+        const currentQty = item.brandStyleQuantities[selectInfo.uniqueKey] || 0
+        const newQty = Math.max(0, currentQty + delta)
+
+        this.$set(item.brandStyleQuantities, selectInfo.uniqueKey, newQty)
+
+        // 如果数量为0，删除该品牌款式
+        if (newQty === 0) {
+          delete item.brandStyleQuantities[selectInfo.uniqueKey]
+          if (item.styleCache && item.styleCache[selectInfo.uniqueKey]) {
+            delete item.styleCache[selectInfo.uniqueKey]
+          }
+        }
+      } else if (selectInfo.brandId) {
+        // 兼容旧的品牌减少逻辑
+        const currentQty = item.brandQuantities[selectInfo.brandId] || 0
+        const newQty = Math.max(0, currentQty + delta)
+
+        this.$set(item.brandQuantities, selectInfo.brandId, newQty)
+
+        // 如果数量为0，删除该品牌
+        if (newQty === 0) {
+          delete item.brandQuantities[selectInfo.brandId]
+        }
+      }
+
+      this.reduceItem = null
+    },
+
+    // 处理品牌选择器关闭事件
+    onBrandSelectorClose() {
+      // 如果用户取消品牌选择，重置状态
+      this.pendingBrandIndex = null
+      this.isWaitingForBrandSelection = false
+    },
+
+    // 获取已有的款式数量
+    getExistingQuantities(brandId, callback) {
+      if (this.pendingBrandIndex !== null) {
+        const categoryId = this.categories[this.currentCategory]?.id
+        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex]
+        if (item && item.brandStyleQuantities) {
+          // 过滤出当前品牌的款式数量
+          const existingQuantities = {}
+          Object.entries(item.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+            if (uniqueKey.startsWith(`${brandId}_`)) {
+              existingQuantities[uniqueKey] = quantity
+            }
+          })
+          callback(existingQuantities)
+        } else {
+          callback({})
+        }
+      } else {
+        callback({})
+      }
+    },
+
+    // 打开商品明细弹窗
+    openProductDetail(selectedItem) {
+      if (!selectedItem.brandId || !selectedItem.styleId) {
+        uni.showToast({
+          title: '该商品无法查看明细',
+          icon: 'none'
+        })
+        return
+      }
+      
+      // 查找原始商品信息
+      const originalItem = this.findOriginalItem(selectedItem.id)
+      if (!originalItem) {
+        uni.showToast({
+          title: '商品信息不存在',
+          icon: 'none'
+        })
+        return
+      }
+      
+      // 构建商品信息
+      const productInfo = {
+        id: originalItem.id,
+        name: originalItem.name,
+        image: originalItem.image
+      }
+      
+      // 构建品牌信息
+      const brandInfo = {
+        id: selectedItem.brandId,
+        name: selectedItem.brandName,
+        logo: selectedItem.brandImage
+      }
       
-      // 如果数量为0，删除该品牌
-      if (newQty === 0) {
-        delete item.brandQuantities[brandInfo.brandId]
+      // 获取该品牌下的所有款式数量
+      const existingQuantities = {}
+      if (originalItem.brandStyleQuantities) {
+        Object.entries(originalItem.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+          if (uniqueKey.startsWith(`${selectedItem.brandId}_`)) {
+            existingQuantities[uniqueKey] = quantity
+          }
+        })
       }
       
-      this.closeBrandReducePopup()
+      // 打开商品明细弹窗
+      this.$refs.productDetailPopup.open(productInfo, brandInfo, existingQuantities, originalItem.styleCache || {})
     },
     
-    // 关闭减少品牌选择弹窗
-    closeBrandReducePopup() {
-      this.showBrandReducePopup = false
-      this.reduceItem = null
-      this.reduceBrandList = []
+    // 处理商品明细确认修改事件
+    onDetailConfirmChanges(data) {
+      const { productInfo, brandInfo, updatedStyles } = data
+      
+      // 查找原始商品
+      const originalItem = this.findOriginalItem(productInfo.id)
+      if (!originalItem) return
+      
+      // 清理当前品牌的所有款式数据
+      const brandPrefix = `${brandInfo.id}_`
+      if (originalItem.brandStyleQuantities) {
+        Object.keys(originalItem.brandStyleQuantities).forEach(key => {
+          if (key.startsWith(brandPrefix)) {
+            delete originalItem.brandStyleQuantities[key]
+            if (originalItem.styleCache && originalItem.styleCache[key]) {
+              delete originalItem.styleCache[key]
+            }
+          }
+        })
+      }
+      
+      // 重新设置款式数据
+      if (!originalItem.brandStyleQuantities) {
+        this.$set(originalItem, 'brandStyleQuantities', {})
+      }
+      if (!originalItem.styleCache) {
+        this.$set(originalItem, 'styleCache', {})
+      }
+      
+      updatedStyles.forEach(style => {
+        if (style.quantity > 0) {
+          const uniqueKey = `${brandInfo.id}_${style.id}`
+          this.$set(originalItem.brandStyleQuantities, uniqueKey, style.quantity)
+          this.$set(originalItem.styleCache, uniqueKey, {
+            brandInfo: brandInfo,
+            styleInfo: style
+          })
+        }
+      })
+      
+      // uni.showToast({
+      //   title: '修改成功',
+      //   icon: 'success'
+      // })
+    },
+    
+    // 处理商品明细弹窗关闭事件
+    onDetailPopupClose() {
+      // 弹窗关闭时的处理逻辑
+    },
+
+    // 处理规则确认事件
+    onRuleConfirm() {
+      // 如果是在等待品牌选择的状态下关闭规则弹窗，则接着打开品牌选择
+      if (this.isWaitingForBrandSelection) {
+        this.isWaitingForBrandSelection = false; // 清除等待状态
+        const categoryId = this.categories[this.currentCategory]?.id;
+        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex];
+        // 记录该商品的规则已被查看
+        this.viewedRuleItems.add(item.id);
+        this.$refs.brandSelector.open(item.id); // 打开品牌索引弹窗
+      } else if (this.pendingBrandIndex !== null) {
+        // 无品牌商品，规则弹窗关闭后加数量
+        const categoryId = this.categories[this.currentCategory]?.id;
+        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex];
+        if (item) {
+          let newQuantity = (item.quantity || 0) + 1
+          this.$set(item, 'quantity', newQuantity)
+        }
+        this.pendingBrandIndex = null
+      }
     },
     // 获取品牌信息
     getBrandInfo(brandId) {
@@ -763,8 +881,11 @@ export default {
       // 如果缓存中没有找到，也从当前brandList中查找（兼容性）
       return this.brandList.find(brand => brand.id === brandId)
     },
-    // 获取商品的总数量（所有品牌）
+    // 获取商品的总数量（所有品牌款式）
     getItemTotalQuantity(item) {
+      if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+        return Object.values(item.brandStyleQuantities).reduce((sum, qty) => sum + qty, 0)
+      }
       if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
         return Object.values(item.brandQuantities).reduce((sum, qty) => sum + qty, 0)
       }
@@ -772,41 +893,44 @@ export default {
     },
     // 显示回收规则
     showRules(item) {
+      // 检查是否需要显示回收规则
+      if (item.isRecycleRules !== 'Y') {
+        // 不需要显示规则，直接添加数量
+        if (item.isPin === 'Y') {
+          // 品牌商品，直接打开品牌选择
+          this.pendingBrandIndex = this.recycleList.findIndex(i => i.id === item.id)
+          this.$refs.brandSelector.open(item.id)
+        } else {
+          // 非品牌商品，直接加数量
+          let newQuantity = (item.quantity || 0) + 1
+          this.$set(item, 'quantity', newQuantity)
+        }
+        return
+      }
+
       // isPin=Y: 弹规则，读到底部后自动弹品牌；isPin=N: 只弹规则
       if (item.isPin === 'Y') {
-      // 检查该商品是否已经查看过规则
-      if (this.viewedRuleItems.has(item.id)) {
-        // 如果已经查看过，直接跳过规则弹窗，进入品牌选择
-        this.isWaitingForBrandSelection = false;
-        this.getGoodsBrandList(item.id);
-        this.showBrandPopup = true;
-        return;
-      }
-      // 重置滚动状态
-      this.hasScrolledToBottom = false;
-      // 获取回收规则富文本
-      this.$api('getGoodsRecycleRule', { goodsId: item.id }, res => {
-        if (res.code === 200 && res.result) {
-          this.ruleHtml = res.result
-        } else {
-          this.ruleHtml = '<p>暂无回收规则</p>'
+        // 检查该商品是否已经查看过规则
+        if (this.viewedRuleItems.has(item.id)) {
+          // 如果已经查看过，直接跳过规则弹窗，进入品牌选择
+          this.isWaitingForBrandSelection = false;
+          this.$refs.brandSelector.open(item.id);
+          return;
         }
-		this.showRulePopup = true
-          // 规则弹窗关闭后自动弹品牌弹窗逻辑在closeRulePopup已实现
+        // 获取回收规则富文本
+        this.$api('getGoodsRecycleRule', { goodsId: item.id }, res => {
+          const ruleContent = (res.code === 200 && res.result) ? res.result : '<p>暂无回收规则</p>'
+          this.$refs.rulePopup.openRulePopup(ruleContent)
+          // 规则弹窗关闭后自动弹品牌弹窗逻辑在onRuleConfirm已实现
         })
       } else {
         // isPin=N 只弹规则
-        this.hasScrolledToBottom = false;
         this.$api('getGoodsRecycleRule', { goodsId: item.id }, res => {
-          if (res.code === 200 && res.result) {
-            this.ruleHtml = res.result
-          } else {
-            this.ruleHtml = '<p>暂无回收规则</p>'
-          }
-          this.showRulePopup = true
+          const ruleContent = (res.code === 200 && res.result) ? res.result : '<p>暂无回收规则</p>'
+          this.$refs.rulePopup.openRulePopup(ruleContent)
           // 不弹品牌弹窗
           this.isWaitingForBrandSelection = false;
-      })
+        })
       }
     },
     showMore() {
@@ -826,7 +950,7 @@ export default {
         })
         return
       }
-      
+
       if (this.totalCount < this.minMumber || Number(this.totalPrice) < this.minMoney) {
         uni.showToast({
           title: `各品类混合需要满${this.minMumber}${this.totalUnitText}并且各品类混合需要满${this.minMoney}元才能回收哦`,
@@ -834,13 +958,35 @@ export default {
         })
         return
       }
-      this.showPickupConfirm = true;
+      this.$refs.rulePopup.openConfirmPopup();
     },
     handlePickupCancel() {
-      this.showPickupConfirm = false;
+      // 取消回收的处理逻辑
     },
     handlePickupAgree() {
-      this.showPickupConfirm = false;
+      // 显示总的回收规则弹窗
+      this.showGeneralRulesPopup()
+    },
+    
+    // 显示总的回收规则弹窗
+     showGeneralRulesPopup() {
+       this.isFromPickupFlow = true // 标记是从预约流程触发
+       this.showPriceInfoPopup = true
+     },
+     
+     // 关闭价格说明弹窗的方法
+     closePriceInfoPopup() {
+       console.log('closePriceInfoPopup called');
+       this.showPriceInfoPopup = false
+       // 如果是从预约流程触发的，关闭弹窗后执行跳转逻辑
+       if (this.isFromPickupFlow) {
+         this.isFromPickupFlow = false // 重置标志
+         this.executePickupFlow()
+       }
+     },
+    
+    // 执行预约流程
+    executePickupFlow() {
       uni.showLoading({
         title: '提交中...'
       })
@@ -856,6 +1002,15 @@ export default {
     goToPickup() {
       // 获取所有选中的衣物（所有分类）
       const selectedItems = this.selectedProducts.map(item => {
+        let desc = '允许脏破烂，160码以上'
+        if (item.brandName && item.styleName) {
+          desc = `品牌：${item.brandName} | 款式：${item.styleName}`
+        } else if (item.brandName) {
+          desc = `品牌：${item.brandName}`
+        } else if (item.styleName) {
+          desc = `款式：${item.styleName}`
+        }
+        
         const baseItem = {
           id: item.id,
           name: item.name,
@@ -863,9 +1018,9 @@ export default {
           quantity: item.quantity,
           unitPrice: item.price,
           maxPrice: item.maxPrice,
-          desc: item.brandName ? `品牌：${item.brandName}` : '允许脏破烂，160码以上'
+          desc: desc
         }
-        
+
         // 如果有品牌信息，添加品牌相关字段
         if (item.brandId) {
           baseItem.brandId = item.brandId
@@ -873,6 +1028,13 @@ export default {
           baseItem.brandImage = item.brandImage
         }
         
+        // 如果有款式信息，添加款式相关字段
+        if (item.styleId) {
+          baseItem.styleId = item.styleId
+          baseItem.styleName = item.styleName
+          baseItem.styleImage = item.styleImage
+        }
+
         return baseItem
       })
       const itemsStr = encodeURIComponent(JSON.stringify(selectedItems))
@@ -885,27 +1047,10 @@ export default {
       const item = this.allProducts[categoryId]?.[index]
       if (item?.id) {
         this.pendingBrandIndex = index
-        this.getGoodsBrandList(item.id)
-        this.showBrandPopup = true
-      }
-    },
-    closeBrandPopup() {
-      this.showBrandPopup = false
-      // 如果用户取消品牌选择，重置状态
-      this.pendingBrandIndex = null;
-      this.isWaitingForBrandSelection = false;
-      // 清理搜索状态
-      this.brandSearch = ''
-      this.currentProductId = null
-      if (this.searchTimer) {
-        clearTimeout(this.searchTimer)
-        this.searchTimer = null
+        this.$refs.brandSelector.open(item.id)
       }
     },
-    scrollToLetter(letter) {
-      this.currentLetter = letter
-      this.scrollToView = 'brand-letter-' + letter
-    },
+
     // 添加下拉刷新方法
     async refreshData() {
       try {
@@ -918,17 +1063,23 @@ export default {
             if (item.brandQuantities) {
               item.brandQuantities = {}
             }
+            if (item.brandStyleQuantities) {
+              item.brandStyleQuantities = {}
+            }
+            if (item.styleCache) {
+              item.styleCache = {}
+            }
           })
         })
         // 清空已查看规则的记录
         this.viewedRuleItems.clear()
-        
+
         // 清空品牌缓存
         this.brandCache = {}
-        
+
         // 模拟网络请求延迟
         await new Promise(resolve => setTimeout(resolve, 1000))
-        
+
         uni.showToast({
           title: '刷新成功',
           icon: 'success'
@@ -947,10 +1098,10 @@ export default {
       this.showDetailPanel = !this.showDetailPanel
     },
     fetchUserInfo() {
-      if(uni.getStorageSync('token')){
+      if (uni.getStorageSync('token')) {
         this.login_status = getApp().globalData.login_status;
-        this.$api("getUserByToken",{},(res)=>{
-          if(res.code == 200){
+        this.$api("getUserByToken", {}, (res) => {
+          if (res.code == 200) {
             this.userInfo = res.result
             // 检查用户是否被拉入黑名单
             this.isUserBlacklisted = res.result.isBlack === 'Y'
@@ -963,28 +1114,49 @@ export default {
     },
     updateQuantityByProduct(item, delta) {
       // 在明细弹窗中更新数量
-      if (item.brandId) {
-        // 有品牌ID的商品
+      if (item.brandId && item.styleId) {
+        // 有品牌和款式ID的商品（新的品牌款式逻辑）
         const originalItem = this.findOriginalItem(item.id)
-        if (originalItem && originalItem.brandQuantities) {
-          const currentQty = originalItem.brandQuantities[item.brandId] || 0
+        if (originalItem && originalItem.brandStyleQuantities) {
+          const uniqueKey = `${item.brandId}_${item.styleId}`
+          const currentQty = originalItem.brandStyleQuantities[uniqueKey] || 0
           const newQty = Math.max(0, currentQty + delta)
-          this.$set(originalItem.brandQuantities, item.brandId, newQty)
           
-          // 如果数量为0，删除该品牌
-          if (newQty === 0) {
-            delete originalItem.brandQuantities[item.brandId]
-          }
+          if (newQty > 0) {
+            this.$set(originalItem.brandStyleQuantities, uniqueKey, newQty)
+          } else {
+            // 如果数量为0，删除该品牌款式
+            delete originalItem.brandStyleQuantities[uniqueKey]
+            if (originalItem.styleCache && originalItem.styleCache[uniqueKey]) {
+              delete originalItem.styleCache[uniqueKey]
+            }
+          }
+
+          // 同步更新显示的数量
+          item.quantity = newQty
+        }
+      } else if (item.brandId) {
+        // 有品牌ID但没有款式ID的商品（兼容旧逻辑）
+        const originalItem = this.findOriginalItem(item.id)
+        if (originalItem && originalItem.brandQuantities) {
+          const currentQty = originalItem.brandQuantities[item.brandId] || 0
+          const newQty = Math.max(0, currentQty + delta)
           
+          if (newQty > 0) {
+            this.$set(originalItem.brandQuantities, item.brandId, newQty)
+          } else {
+            // 如果数量为0，删除该品牌
+            delete originalItem.brandQuantities[item.brandId]
+          }
+
           // 同步更新显示的数量
           item.quantity = newQty
         }
       } else {
         // 没有品牌的商品
         if (!item.quantity) item.quantity = 0
-        item.quantity += delta
-        if (item.quantity < 0) item.quantity = 0
-        
+        item.quantity = Math.max(0, item.quantity + delta)
+
         // 同步到原商品
         const originalItem = this.findOriginalItem(item.id)
         if (originalItem) {
@@ -992,7 +1164,7 @@ export default {
         }
       }
     },
-    
+
     // 查找原始商品对象
     findOriginalItem(itemId) {
       for (const categoryItems of Object.values(this.allProducts)) {
@@ -1001,74 +1173,7 @@ export default {
       }
       return null
     },
-    openRulePopup() {
-      this.showRulePopup = true
-      // 弹窗显示后主动判断内容是否需要滚动
-      this.$nextTick(() => {
-        const query = uni.createSelectorQuery().in(this)
-        query.select('.rule-popup-content').boundingClientRect(rect => {
-          if (rect && rect.height && rect.scrollHeight && rect.scrollHeight <= rect.height + 10) {
-            this.hasScrolledToBottom = true
-          }
-        }).exec()
-      })
-    },
-    closeRulePopup() {
-      if (!this.hasScrolledToBottom) {
-        uni.showToast({
-          title: '请阅读完整回收规则',
-          icon: 'none'
-        })
-        return
-      }
-      this.showRulePopup = false;
-      this.hasScrolledToBottom = false; // 重置滚动状态
-      // 如果是在等待品牌选择的状态下关闭规则弹窗，则接着打开品牌选择
-      if (this.isWaitingForBrandSelection) {
-        this.isWaitingForBrandSelection = false; // 清除等待状态
-        const categoryId = this.categories[this.currentCategory]?.id;
-        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex];
-        // 记录该商品的规则已被查看
-        this.viewedRuleItems.add(item.id);
-        this.getGoodsBrandList(item.id);
-        this.showBrandPopup = true; // 打开品牌索引弹窗
-      } else if (this.pendingBrandIndex !== null) {
-        // 无品牌商品，规则弹窗关闭后加数量
-        const categoryId = this.categories[this.currentCategory]?.id;
-        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex];
-        if (item) {
-          let newQuantity = (item.quantity || 0) + 1
-          this.$set(item, 'quantity', newQuantity)
-        }
-        this.pendingBrandIndex = null
-      }
-    },
-    
-    // 处理规则弹窗遮罩点击
-    handleRulePopupMaskClick() {
-      if (!this.hasScrolledToBottom) {
-        uni.showToast({
-          title: '请阅读完整回收规则',
-          icon: 'none'
-        })
-        return
-      }
-      this.closeRulePopup()
-    },
-    
-    // 监听规则内容滚动
-    onRuleContentScroll(e) {
-      const { scrollTop, scrollHeight, clientHeight, height } = e.detail
-      const h = clientHeight || height
-      // 内容高度不够，无需滚动，直接允许
-      if (scrollHeight <= h + 10) {
-        this.hasScrolledToBottom = true
-        return
-      }
-      if (scrollTop + h >= scrollHeight - 20) {
-        this.hasScrolledToBottom = true
-      }
-    },
+
     loadMoreGoods() {
       const categoryId = this.categories[this.currentCategory]?.id
       const page = (this.allProductsPage[categoryId] || 1) + 1
@@ -1089,172 +1194,28 @@ export default {
         this.finished = true
       }
     },
-    openBrandConfirm(brand) {
-      this.brandConfirmInfo = {
-        id: brand.id,
-        logo: brand.logo,
-        name: brand.name
-      }
-      this.showBrandConfirm = true
-    },
-    closeBrandConfirm() {
-      this.showBrandConfirm = false
-    },
-    confirmBrand() {
-      this.showBrandConfirm = false
-      this.showBrandPopup = false
-      // 确认后将待加一的商品数量+1，并记录品牌ID
-      if (this.pendingBrandIndex !== null) {
-        const categoryId = this.categories[this.currentCategory]?.id
-        const item = this.allProducts[categoryId]?.[this.pendingBrandIndex]
-        if (item) {
-          // 初始化品牌数量对象
-          if (!item.brandQuantities) {
-            this.$set(item, 'brandQuantities', {})
-          }
-          
-          // 增加该品牌的数量
-          const currentQty = item.brandQuantities[this.brandConfirmInfo.id] || 0
-          this.$set(item.brandQuantities, this.brandConfirmInfo.id, currentQty + 1)
-          
-          // 清除原来的quantity（如果存在）
-          if (item.quantity) {
-            this.$set(item, 'quantity', 0)
-          }
-        }
-        this.pendingBrandIndex = null
-      }
-    },
-    getGoodsBrandList(productId, searchName = '') {
-      this.currentProductId = productId
-      const params = { productId }
-      if (searchName.trim()) {
-        params.name = searchName.trim()
-      }
-      this.$api('getGoodsBrandList', params, res => {
-        // console.log(res,'res')
-        if (res && res.success && res.result && res.result.records) {
-          const brandList = res.result.records.map(item => {
-            // 获取品牌名称的拼音首字母
-            const firstChar = this.getPinyinFirstLetter(item.name)
-            return {
-              id: item.id,
-              logo: item.image || '/static/brand/alexander.png',
-              name: item.name,
-              letter: firstChar,
-              isPin: item.isPin
-            }
-          })
-          // 缓存到对应商品的品牌列表中
-          this.$set(this.brandCache, productId, brandList)
-          // 同时更新当前显示的brandList（用于弹窗显示）
-          this.brandList = [...brandList]
-        }
-      })
-    },
-    // 获取中文拼音首字母
-    getPinyinFirstLetter(str) {
-      if (!str) return '#'
-      const firstChar = str.charAt(0)
-      // 遍历pinyin对象，查找包含该汉字的拼音
-      for (let key in pinyin) {
-        const chars = pinyin[key]
-        if (chars && chars.indexOf(firstChar) !== -1) {
-          return key.charAt(0).toUpperCase()
-        }
-      }
-      // 英文首字母
-      if (/^[A-Za-z]$/.test(firstChar)) {
-        return firstChar.toUpperCase()
-      }
-      return '#'
-    },
-    
-    // 品牌搜索输入事件处理
-    onBrandSearchInput(e) {
-      const searchValue = e.detail.value
-      
-      // 清除之前的定时器
-      if (this.searchTimer) {
-        clearTimeout(this.searchTimer)
-      }
-      
-      // 设置防抖，500ms后执行搜索
-      this.searchTimer = setTimeout(() => {
-        if (this.currentProductId) {
-          this.getGoodsBrandList(this.currentProductId, searchValue)
-        }
-      }, 500)
-    },
-
-    // 视频相关方法
-    playVideoFullscreen(item, index) {
-      if (!this.videoPlayingStates[index]) {
-        // 第一次点击：显示视频并开始播放
-        this.$set(this.videoPlayingStates, index, true);
-        // 等待视频元素渲染后再进行操作
-        this.$nextTick(() => {
-          setTimeout(() => {
-            const videoContext = uni.createVideoContext(`recycle-video-${index}`, this);
-            if (videoContext) {
-              // 直接进入全屏播放，强制竖屏
-              videoContext.requestFullScreen({
-                direction: 0 // 竖屏方向，0代表竖屏，1代表横屏，-1自动
-              });
-            }
-          }, 200);
-        });
-      }
-    },
-    
-    onVideoPlay(index) {
-      this.$set(this.videoPlayingStates, index, true);
-    },
-    
-    onVideoPause(index) {
-      this.$set(this.videoPlayingStates, index, false);
-    },
-    
-    onVideoEnded(index) {
-      // 视频播放结束，回到预览状态
-      this.$set(this.videoPlayingStates, index, false);
-    },
-    
-    onFullscreenChange(e) {
-      console.log('全屏状态改变:', e.detail);
-      const videoIndex = e.target.id.replace('recycle-video-', '');
-      
-      if (e.detail.fullScreen) {
-        // 进入全屏时，不做任何操作
-        console.log('进入全屏模式，方向:', e.detail.direction);
-      } else {
-        // 退出全屏时，回到预览状态
-        console.log('退出全屏模式，回到预览状态');
-        this.$set(this.videoPlayingStates, videoIndex, false);
-      }
-    },
 
     // 初始化页面数据的方法
     initializePageData() {
       const options = this.loadOptions || {}
-      
+
       if (options && options.categoryId) {
         const idx = this.categories.findIndex(c => c.id == options.categoryId)
         if (idx !== -1) this.currentCategory = idx
       }
-      
+
       if (this.categories.length > 0) {
         this.fetchGoodsList(this.categories[this.currentCategory].id, 1)
       }
-      
+
       uni.$on('bannerListUpdated', () => {
         this.$forceUpdate && this.$forceUpdate()
       })
-      
+
       if (getApp().globalData.bannerList && getApp().globalData.bannerList.length > 0) {
         this.$forceUpdate && this.$forceUpdate()
       }
-      
+
       // 检查全局清空标志（兼容 reLaunch）
       if (getApp().globalData.shouldClearRecycle) {
         Object.values(this.allProducts).forEach(categoryItems => {
@@ -1263,6 +1224,12 @@ export default {
             if (item.brandQuantities) {
               this.$set(item, 'brandQuantities', {})
             }
+            if (item.brandStyleQuantities) {
+              this.$set(item, 'brandStyleQuantities', {})
+            }
+            if (item.styleCache) {
+              this.$set(item, 'styleCache', {})
+            }
           })
         })
         // 清空已查看规则的记录
@@ -1273,22 +1240,7 @@ export default {
         getApp().globalData.shouldClearRecycle = false
       }
     },
-    onRuleContentReady() {
-      this.$nextTick(() => {
-        const query = uni.createSelectorQuery().in(this)
-        query.select('.rule-popup-content').boundingClientRect(rect => {
-          query.select('.rule-popup-content').scrollOffset(scroll => {
-            // 只有内容高度小于等于可视高度时才点亮
-            if (scroll.scrollHeight <= rect.height + 1) {
-              this.hasScrolledToBottom = true
-            }
-          })
-        }).exec()
-      })
-    },
-    onRuleScrollToLower() {
-      this.hasScrolledToBottom = true
-    },
+
   },
   created() {
     this.currentCategory = 0
@@ -1317,7 +1269,7 @@ export default {
   onLoad(options) {
     // 保存options参数
     this.loadOptions = options
-    
+
     // 检查App数据是否已经准备好
     if (!getApp().globalData.isAppDataReady) {
       // 显示加载状态
@@ -1325,7 +1277,7 @@ export default {
         title: '加载中...',
         mask: true
       })
-      
+
       // 监听App数据准备完成事件
       uni.$on('appDataReady', () => {
         uni.hideLoading()
@@ -1336,7 +1288,7 @@ export default {
       this.initializePageData()
     }
   },
-  
+
   onUnload() {
     uni.$off('bannerListUpdated')
     // 移除事件监听
@@ -1345,7 +1297,7 @@ export default {
   onShow() {
     // 获取用户信息，检查黑名单状态
     this.fetchUserInfo()
-    
+
     const id = getApp().globalData.targetRecycleCategoryId
     if (id) {
       const trySwitch = () => {
@@ -1375,6 +1327,12 @@ export default {
           if (item.brandQuantities) {
             this.$set(item, 'brandQuantities', {})
           }
+          if (item.brandStyleQuantities) {
+            this.$set(item, 'brandStyleQuantities', {})
+          }
+          if (item.styleCache) {
+            this.$set(item, 'styleCache', {})
+          }
         })
       })
       // 清空已查看规则的记录
@@ -1387,14 +1345,20 @@ export default {
     // 监听清除订单数据的事件
     uni.$on('clearRecycleOrderData', () => {
       // 清除所有商品的选中数量，保证响应式
-      Object.values(this.allProducts).forEach(categoryItems => {
-        categoryItems.forEach(item => {
-          this.$set(item, 'quantity', 0)
-          if (item.brandQuantities) {
-            this.$set(item, 'brandQuantities', {})
-          }
-        })
-      })
+          Object.values(this.allProducts).forEach(categoryItems => {
+            categoryItems.forEach(item => {
+              this.$set(item, 'quantity', 0)
+              if (item.brandQuantities) {
+                this.$set(item, 'brandQuantities', {})
+              }
+              if (item.brandStyleQuantities) {
+                this.$set(item, 'brandStyleQuantities', {})
+              }
+              if (item.styleCache) {
+                this.$set(item, 'styleCache', {})
+              }
+            })
+          })
       // 清空已查看规则的记录
       this.viewedRuleItems.clear()
       // 清空品牌缓存
@@ -1433,96 +1397,22 @@ export default {
   overflow: hidden;
 }
 
-.banner {
-  background: linear-gradient(135deg, #ff9500,#ff5e00);
-  position: relative;
-  height: 350rpx;
-  z-index: 1;
-  image {
-    width: 100%;
-    height: 90%;
-  }
-  
-  .video-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    
-    .video-poster {
-      cursor: pointer;
-      transition: transform 0.2s ease;
-      
-      &:active {
-        transform: scale(0.98);
-      }
-    }
-    
-    .video-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.4);
-      z-index: 10;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      
-      .play-button-large {
-        width: 120rpx;
-        height: 120rpx;
-        background: transparent;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        backdrop-filter: blur(10rpx);
-        transition: all 0.3s ease;
-        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
-        
-        &:active {
-          transform: scale(0.9);
-          background: rgba(255, 255, 255, 0.1);
-        }
-        
-        .play-triangle {
-          width: 0;
-          height: 0;
-          border-left: 24rpx solid #fff;
-          border-top: 18rpx solid transparent;
-          border-bottom: 18rpx solid transparent;
-          margin-left: 8rpx;
-          transition: all 0.3s ease;
-          filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
-        }
-      }
-      
-      &:hover .play-button-large {
-        transform: scale(1.1);
-        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4);
-        
-        .play-triangle {
-          border-left-color: #ff8917;
-        }
-      }
-    }
-  }
-}
+
 
 .goods-list {
   // flex: 1;
   display: flex;
   position: relative;
-  height: calc(110vh - 320rpx - 160rpx - env(safe-area-inset-bottom)); /* 减去banner、底部栏和绿色提示条的高度 */
+  height: calc(110vh - 320rpx - 160rpx - env(safe-area-inset-bottom));
+  /* 减去banner、底部栏和绿色提示条的高度 */
   margin-top: -10rpx;
   z-index: 2;
   border-radius: 20rpx 20rpx 0 0;
   overflow: hidden;
   padding: 30rpx;
   box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.05);
-  background: linear-gradient(to bottom, #fff7e8, 20%,#ffffff);
+  background: linear-gradient(to bottom, #fff7e8, 20%, #ffffff);
+
   .category-nav {
     width: 20%;
     background: #ffffff;
@@ -1532,12 +1422,17 @@ export default {
     border-radius: 20rpx 0 0 0;
     margin-right: 20rpx;
     overflow-y: auto;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+
+    /* IE and Edge */
     &::-webkit-scrollbar {
       width: 0 !important;
-      display: none; /* Chrome, Safari, Opera */
+      display: none;
+      /* Chrome, Safari, Opera */
     }
+
     .category-item {
       position: relative;
       padding: 28rpx 20rpx;
@@ -1589,7 +1484,8 @@ export default {
   .goods-content {
     flex: 1;
     height: 100%;
-    padding: 0 0 180rpx 0; /* 添加底部padding，为固定底部栏预留空间 */
+    padding: 0 0 180rpx 0;
+    /* 添加底部padding，为固定底部栏预留空间 */
     background: #ffffff;
     width: 70%;
     margin: 1rpx;
@@ -1597,11 +1493,15 @@ export default {
     border-radius: 0 20rpx 0 0;
     overflow-y: auto;
     box-sizing: border-box;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+
+    /* IE and Edge */
     &::-webkit-scrollbar {
       width: 0 !important;
-      display: none; /* Chrome, Safari, Opera */
+      display: none;
+      /* Chrome, Safari, Opera */
     }
   }
 }
@@ -1612,15 +1512,34 @@ export default {
   padding: 30rpx 0;
   border-bottom: 1rpx solid #f5f5f5;
 
-  .goods-item-img {
+  .goods-img-container {
+    position: relative;
     width: 180rpx;
     height: 180rpx;
+    margin-right: 28rpx;
+    flex-shrink: 0;
+  }
+
+  .goods-item-img {
+    width: 100%;
+    height: 100%;
     border-radius: 24rpx;
     background: #f8f8f8;
-    margin-right: 28rpx;
     object-fit: contain;
-    flex-shrink: 0;
   }
+
+  .brand-tag {
+    position: absolute;
+    top: 0rpx;
+    left: 0rpx;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    font-size: 20rpx;
+    padding: 4rpx 8rpx;
+    border-radius: 8rpx;
+    z-index: 2;
+  }
+
   .goods-info-wrap {
     flex: 1;
     display: flex;
@@ -1628,6 +1547,7 @@ export default {
     justify-content: center;
     min-width: 0;
   }
+
   .goods-header {
     display: flex;
     justify-content: space-between;
@@ -1667,6 +1587,7 @@ export default {
     padding: 4rpx 10rpx;
     line-height: 1;
     white-space: nowrap;
+
     text {
       margin-right: 4rpx;
     }
@@ -1759,18 +1680,21 @@ export default {
     align-items: center;
     margin-top: 20rpx;
     gap: 16rpx;
+
     .rules-link {
       margin-top: 0;
+
       .rules {
         display: inline-flex;
-    align-items: center;
-    font-family: PingFang SC;
-    font-weight: 400;
-    font-size: 12px;
-    color: #666;
+        align-items: center;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #666;
         white-space: nowrap;
       }
     }
+
     .brand-check-placeholder {
       margin-left: 12rpx;
     }
@@ -1782,10 +1706,11 @@ export default {
   align-items: center;
   background: #fff;
   border-radius: 24rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
   padding: 30rpx 30rpx 30rpx 30rpx;
   margin: 30rpx 0 0 0;
 }
+
 .other-unrecycle-img {
   width: 120rpx;
   height: 120rpx;
@@ -1795,6 +1720,7 @@ export default {
   object-fit: contain;
   flex-shrink: 0;
 }
+
 .other-unrecycle-info {
   flex: 1;
   display: flex;
@@ -1803,6 +1729,7 @@ export default {
   min-width: 0;
   overflow: hidden;
 }
+
 .other-unrecycle-title {
   font-size: 30rpx;
   color: #222;
@@ -1812,6 +1739,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .other-unrecycle-desc {
   font-size: 24rpx;
   color: #999;
@@ -1820,17 +1748,20 @@ export default {
   overflow: hidden;
   white-space: nowrap;
 }
+
 .other-unrecycle-price-row {
   display: flex;
   align-items: center;
   white-space: nowrap;
 }
+
 .other-unrecycle-price {
   font-size: 28rpx;
   color: #ff9c00;
   font-weight: bold;
   white-space: nowrap;
 }
+
 .other-unrecycle-btn {
   width: 60rpx;
   height: 60rpx;
@@ -1847,15 +1778,17 @@ export default {
 
 .fixed-bottom-wrap {
   position: fixed;
+  padding-bottom: 120rpx;
   left: 0;
-  right: 0;
-  bottom: calc(v-bind('tabbarHeight + "px"') + env(safe-area-inset-bottom));
+  bottom: calc(env(safe-area-inset-bottom));
+  // bottom: calc(v-bind('tabbarHeight + "rpx"') + env(safe-area-inset-bottom));
   width: 100vw;
   z-index: 100;
   background: transparent;
   box-sizing: border-box;
   pointer-events: auto;
 }
+
 .bottom-bar-divider {
   width: 100%;
   height: 1px;
@@ -1865,6 +1798,7 @@ export default {
   bottom: 0;
   z-index: 1;
 }
+
 .green-tip-bar {
   width: 100%;
   background: #eaffea;
@@ -1878,12 +1812,14 @@ export default {
   justify-content: center;
   line-height: 1.4;
   min-height: 40rpx;
+
   .tip-highlight {
     color: #ff9c00;
     font-weight: bold;
     font-size: 20rpx;
   }
 }
+
 .bottom-bar {
   width: 100%;
   background-color: #fff;
@@ -1897,29 +1833,35 @@ export default {
   border-top-right-radius: 0;
   border-bottom-left-radius: env(safe-area-inset-bottom);
   border-bottom-right-radius: env(safe-area-inset-bottom);
+
   .bottom-left {
     // flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
+
     .summary-row {
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #333;
+
       .summary-label {
         color: #333;
       }
+
       .summary-count {
         color: #ff9c00;
         font-weight: bold;
         font-size: 28rpx;
       }
     }
+
     .amount-row {
       display: flex;
       align-items: center;
       margin-top: 4rpx;
+
       .amount {
         color: #ff9c00;
         font-size: 44rpx;
@@ -1928,6 +1870,7 @@ export default {
       }
     }
   }
+
   .submit-btn {
     width: 300rpx;
     height: 88rpx;
@@ -1942,32 +1885,38 @@ export default {
     border: none;
     // margin-left: 0rpx;
     box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
+
     &::after {
       border: none;
     }
+
     &:active {
       opacity: 0.9;
     }
   }
 }
+
 .detail-popup-mask {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
-  bottom: calc(90rpx + env(safe-area-inset-bottom)); /* tabbar高度+安全区 */
-  background: rgba(0,0,0,0.35);
+  bottom: calc(120rpx + env(safe-area-inset-bottom));
+  // bottom: calc(90rpx + env(safe-area-inset-bottom));
+  /* tabbar高度+安全区 */
+  background: rgba(0, 0, 0, 0.35);
   z-index: 8;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }
+
 .detail-popup {
   width: 100vw;
   max-width: none;
   background: #fff;
   border-radius: 48rpx 48rpx 0 0;
-  box-shadow: 0 8rpx 48rpx rgba(0,0,0,0.18);
+  box-shadow: 0 8rpx 48rpx rgba(0, 0, 0, 0.18);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1978,6 +1927,7 @@ export default {
   max-height: 80vh;
   bottom: 0;
 }
+
 .detail-popup-close {
   position: absolute;
   right: 36rpx;
@@ -1986,6 +1936,7 @@ export default {
   color: #bbb;
   z-index: 2;
 }
+
 .popup-green-tip {
   border-radius: 48rpx 48rpx 0 0;
   font-size: 20rpx;
@@ -1994,6 +1945,7 @@ export default {
   color: #13ac47;
   text-align: left;
 }
+
 .panel-header {
   display: flex;
   align-items: center;
@@ -2004,6 +1956,7 @@ export default {
   background: #fff;
   position: relative;
 }
+
 .panel-title {
   font-size: 32rpx;
   color: #222;
@@ -2011,40 +1964,74 @@ export default {
   text-align: center;
   flex: 1;
 }
+
 .popup-panel-list {
   flex: 1;
+  width: 710rpx;
   overflow-y: auto;
   max-height: 36vh;
   padding: 0 24rpx;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+
+  /* IE and Edge */
   &::-webkit-scrollbar {
     width: 0 !important;
-    display: none; /* Chrome, Safari, Opera */
+    display: none;
+    /* Chrome, Safari, Opera */
   }
 }
+
 .panel-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 24rpx 0;
   border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  
+  &:active {
+    // background: #f8f8f8;
+  }
 }
-.panel-item-img {
+
+.panel-img-container {
+  position: relative;
   width: 100rpx;
   height: 100rpx;
   margin-right: 20rpx;
+  flex-shrink: 0;
+}
+
+.panel-item-img {
+  width: 100%;
+  height: 100%;
   border-radius: 16rpx;
   background: #f8f8f8;
 }
-.panel-item-info {
-  flex: 1;
+
+.panel-brand-tag {
+  position: absolute;
+  top: 0rpx;
+  left: 0rpx;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 18rpx;
+  padding: 2rpx 6rpx;
+  border-radius: 6rpx;
+  z-index: 2;
+}
+
+.panel-item-info {
+  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 0;
-  
+
 }
+
 .panel-item-name {
   font-size: 30rpx;
   color: #222;
@@ -2054,6 +2041,7 @@ export default {
   overflow: hidden;
   white-space: nowrap;
 }
+
 .panel-item-desc {
   font-size: 24rpx;
   color: #999;
@@ -2062,11 +2050,13 @@ export default {
   overflow: hidden;
   white-space: nowrap;
 }
+
 .panel-item-price {
   font-size: 26rpx;
   color: #ff9c00;
   margin-top: 2rpx;
 }
+
 .panel-quantity-control {
   display: flex;
   align-items: center;
@@ -2074,6 +2064,7 @@ export default {
   // margin-right: 30rpx;
   flex-shrink: 0;
 }
+
 .panel-quantity-control button {
   width: 48rpx;
   height: 48rpx;
@@ -2087,19 +2078,23 @@ export default {
   background: #ffffff;
   border: none;
   border-radius: 50%;
+
   &::after {
     border: none;
   }
+
   &:active {
     opacity: 0.8;
   }
 }
+
 .panel-quantity-control .quantity {
   width: 30rpx;
   text-align: center;
   font-size: 28rpx;
   color: #333;
 }
+
 .popup-bottom-bar {
   width: 100%;
   background-color: #fff;
@@ -2107,34 +2102,41 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 0 30rpx;
+  box-sizing: border-box;
   box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
   height: 120rpx;
   border-top: 1px solid #f0f0f0;
   border-bottom-left-radius: 48rpx;
   border-bottom-right-radius: 48rpx;
+
   // padding-bottom: env(safe-area-inset-bottom);
   .bottom-left {
     display: flex;
     flex-direction: column;
     justify-content: center;
+
     .summary-row {
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #333;
+
       .summary-label {
         color: #333;
       }
+
       .summary-count {
         color: #ff9c00;
         font-weight: bold;
         font-size: 28rpx;
       }
     }
+
     .amount-row {
       display: flex;
       align-items: center;
       margin-top: 4rpx;
+
       .amount {
         color: #ff9c00;
         font-size: 44rpx;
@@ -2143,6 +2145,7 @@ export default {
       }
     }
   }
+
   .submit-btn {
     width: 300rpx;
     height: 88rpx;
@@ -2156,341 +2159,25 @@ export default {
     justify-content: center;
     border: none;
     box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
+
     &::after {
       border: none;
     }
+
     &:active {
       opacity: 0.9;
     }
   }
 }
 
-.brand-popup-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 3000;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-.brand-popup {
-  position: relative;
-  width: 100%;
-  max-width: 750px;
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
-  box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
-  padding-bottom: 40rpx;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.brand-popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32rpx 24rpx 0 24rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-  position: relative;
-}
-.brand-popup-close {
-  position: absolute;
-  left: 24rpx;
-  font-size: 28rpx;
-  color: #888;
-}
-.brand-popup-title {
-  font-size: 32rpx;
-  color: #222;
-  font-weight: bold;
-}
-.brand-popup-search {
-  padding: 20rpx 24rpx 0 24rpx;
-}
-.brand-search-input {
-  width: 100%;
-  height: 60rpx;
-  border-radius: 30rpx;
-  background: #f5f5f5;
-  border: none;
-  padding-left: 40rpx;
-  font-size: 28rpx;
-  color: #888;
-}
-.brand-popup-list {
-  flex: 1;
-  overflow-y: auto;
-  max-height: 60vh;
-  padding: 0 24rpx;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none; /* Chrome, Safari, Opera */
-  }
-}
-.brand-letter {
-  font-size: 28rpx;
-  color: #888;
-  margin: 24rpx 0 8rpx 0;
-  font-weight: bold;
-}
-.brand-item {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-.brand-logo {
-  width: 60rpx;
-  height: 60rpx;
-  margin-right: 20rpx;
-  border-radius: 8rpx;
-  background: #f8f8f8;
-}
-.brand-name {
-  font-size: 28rpx;
-  color: #222;
-}
-.brand-index-bar {
-  position: absolute;
-  right: 12rpx;
-  top: 120rpx;
-  width: 32rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  z-index: 10;
-}
-.brand-index-bar text {
-  font-size: 22rpx;
-  color: #bbb;
-  margin: 4rpx 0;
-  font-weight: bold;
-  &.active {
-    color: #ff9c00;
-  }
-}
 
-.rule-popup-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 4000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rule-popup {
-  width: 95vw;
-  max-width: 750rpx;
-  max-height: 85vh;
-  background: #fff;
-  border-radius: 48rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  padding-bottom: 40rpx;
-}
-.rule-popup-title {
-  font-size: 36rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-top: 48rpx;
-  margin-bottom: 16rpx;
-}
-.rule-popup-content {
-  width: 100%;
-  max-height: 60vh;
-  min-height: 400rpx;
-  padding: 0 40rpx;
-  box-sizing: border-box;
-  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none; /* Chrome, Safari, Opera */
-  }
-}
-.rule-content-bottom-indicator {
-  height: 20rpx;
-  width: 100%;
-}
-.scroll-tip {
-  font-size: 24rpx;
-  color: #ff6b35;
-  text-align: center;
-  margin: 16rpx 0 8rpx 0;
-  animation: tipPulse 2s infinite;
-}
-@keyframes tipPulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-.rule-popup-desc {
-  font-size: 26rpx;
-  color: #888;
-  text-align: center;
-  margin-bottom: 24rpx;
-  margin-top: 0;
-}
-.rule-popup-warning {
-  width: 100%;
-  border: 2rpx solid #ffb800;
-  color: #ffb800;
-  background: #fffbe6;
-  border-radius: 32rpx;
-  font-size: 28rpx;
-  text-align: center;
-  padding: 16rpx 0;
-  margin-bottom: 24rpx;
-  font-weight: bold;
-}
-.rule-popup-img {
-  display: block;
-  margin: 0 auto 24rpx auto;
-  max-width: 80%;
-  max-height: 300rpx;
-  border-radius: 16rpx;
-  object-fit: contain;
-}
-.rule-popup-btn {
-  width: 80%;
-  height: 88rpx;
-  background: linear-gradient(to right, #ffd01e, #ff8917);
-  border-radius: 44rpx;
-  color: #fff;
-  font-size: 32rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  margin: 0 auto;
-  margin-top: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
-  transition: all 0.3s ease;
-  &::after {
-    border: none;
-  }
-  &:active {
-    opacity: 0.9;
-  }
-  &.disabled {
-    background: #ccc;
-    color: #999;
-    box-shadow: none;
-    opacity: 0.6;
-  }
-}
-.rule-popup-close {
-  position: absolute;
-  right: 32rpx;
-  bottom: 32rpx;
-  width: 72rpx;
-  height: 72rpx;
-  background: #ff5a5f;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  box-shadow: 0 2rpx 8rpx rgba(255,90,95,0.12);
-}
 
-/* 预约上门取件弹窗样式 */
-.pickup-confirm-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 5000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.pickup-confirm-popup {
-  width: 90vw;
-  max-width: 600rpx;
-  background: #fff;
-  border-radius: 48rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  padding: 48rpx 36rpx 40rpx 36rpx;
-}
-.pickup-confirm-title {
-  font-size: 36rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 24rpx;
-}
-.pickup-confirm-content {
-  width: 100%;
-  font-size: 26rpx;
-  color: #333;
-  text-align: left;
-  line-height: 1.7;
-  margin-bottom: 36rpx;
-  .confirm-item {
-    margin-bottom: 24rpx;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  .confirm-item-red {
-    color: red;
-  }
-}
-.pickup-confirm-btn-row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 32rpx;
-}
-.pickup-confirm-btn {
-  flex: 1;
-  height: 88rpx;
-  border-radius: 44rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2rpx solid #ffd01e;
-  background: #fff;
-  color: #ff9c00;
-  box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
-}
-.pickup-confirm-btn:not(.agree) {
-  background: #fff0d2;
-}
-.pickup-confirm-btn.agree {
-  background: linear-gradient(to right, #ffd01e, #ff8917);
-  color: #fff;
-  border: none;
-}
+
+
 .uv-tabbar {
   z-index: 1000;
 }
+
 .loading-more {
   text-align: center;
   color: #999;
@@ -2498,117 +2185,32 @@ export default {
   font-size: 26rpx;
 }
 
-.brand-confirm-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.25);
-  z-index: 5001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.brand-confirm-popup {
-  width: 70vw;
-  max-width: 270px;
-  background: #fff;
-  border-radius: 32rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48rpx 20rpx 36rpx 20rpx;
-  position: relative;
-}
-.brand-confirm-title {
-  font-size: 36rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 24rpx;
-}
-.brand-confirm-logo-wrap {
-  width: 120rpx;
-  height: 120rpx;
-  background: #f8f8f8;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 18rpx;
-}
-.brand-confirm-logo {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-}
-.brand-confirm-name {
-  font-size: 28rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 16rpx;
-}
-.brand-confirm-desc {
-  font-size: 24rpx;
-  color: #999;
-  text-align: center;
-  margin-bottom: 32rpx;
-  line-height: 1.6;
-}
-.brand-confirm-btn-row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 24rpx;
-}
-.brand-confirm-btn {
-  flex: 1;
-  height: 72rpx;
-  border-radius: 36rpx;
-  font-size: 28rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  margin: 0 0;
-}
-.brand-confirm-btn.retry {
-  background: #fff;
-  color: #ff9c00;
-  border: 2rpx solid #ff9c00;
-}
-.brand-confirm-btn.confirm {
-  background: linear-gradient(to right, #ffd01e, #ff8917);
-  color: #fff;
-  border: none;
-}
+
 .price-info-popup-mask {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  background: rgba(0,0,0,0.4);
+  background: rgba(0, 0, 0, 0.4);
   z-index: 6000;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .price-info-popup {
   width: 85vw;
   max-width: 600rpx;
   background: #fff;
   border-radius: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   padding: 40rpx 40rpx;
+
   .price-info-popup-title {
     font-size: 34rpx;
     color: #333;
@@ -2616,20 +2218,25 @@ export default {
     text-align: center;
     margin-bottom: 30rpx;
   }
+
   .price-info-popup-content {
     width: 100%;
     max-height: 50vh;
+
     .price-info-section {
       margin-bottom: 30rpx;
+
       &:last-child {
         margin-bottom: 0;
       }
+
       .price-info-heading {
         font-size: 28rpx;
         color: #333;
         font-weight: 500;
         margin-bottom: 15rpx;
       }
+
       .price-info-text {
         font-size: 26rpx;
         color: #666;
@@ -2637,6 +2244,7 @@ export default {
       }
     }
   }
+
   .price-info-popup-btn {
     width: 100%;
     height: 88rpx;
@@ -2651,112 +2259,46 @@ export default {
     border: none;
     margin-top: 40rpx;
     box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
+
     &::after {
       border: none;
     }
+
     &:active {
       opacity: 0.9;
     }
   }
 }
 
-/* 减少数量时的品牌选择弹窗 */
-.brand-reduce-popup-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 5001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.brand-reduce-popup {
-  width: 70vw;
-  max-width: 270px;
-  background: #fff;
-  border-radius: 32rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48rpx 20rpx 36rpx 20rpx;
-  position: relative;
-}
-.brand-reduce-popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32rpx 24rpx 0 24rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-  position: relative;
-}
-.brand-reduce-popup-close {
-  position: absolute;
-  left: 24rpx;
-  font-size: 28rpx;
-  color: #888;
-}
-.brand-reduce-popup-title {
-  font-size: 32rpx;
-  color: #222;
-  font-weight: bold;
-}
-.brand-reduce-popup-list {
-  flex: 1;
-  overflow-y: auto;
-  max-height: 60vh;
-  padding: 0 24rpx;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none; /* Chrome, Safari, Opera */
-  }
-}
-.brand-item {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-.brand-logo {
-  width: 60rpx;
-  height: 60rpx;
-  margin-right: 20rpx;
-  border-radius: 8rpx;
-  background: #f8f8f8;
-}
-.brand-name {
-  font-size: 28rpx;
-  color: #222;
-}
+
 
 .rules-link {
   min-width: 90rpx;
   padding: 0 12rpx;
+
   .rules {
     font-size: 15px;
     white-space: normal;
     overflow: visible;
   }
 }
+
 // ... existing code ...
 .rules-brand-row {
   display: flex;
   align-items: center;
   margin-top: 20rpx;
   gap: 24rpx; // 增大间距
+
   .rules-link {
     margin-top: 0;
   }
+
   .brand-check-placeholder {
     margin-left: 16rpx;
   }
 }
+
 // ... existing code ...
 .price-info {
   display: flex;
@@ -2764,10 +2306,12 @@ export default {
   white-space: nowrap;
   flex-shrink: 0;
   gap: 12rpx; // 增大间距
+
   .price-symbol {
     font-size: 32rpx; // 增大符号
     color: #ff7a0e;
   }
+
   .price-value {
     font-size: 44rpx; // 增大数字
     color: #ff7a0e;
@@ -2775,18 +2319,21 @@ export default {
     margin: 0 6rpx;
     white-space: nowrap;
   }
+
   .price-unit {
     font-size: 28rpx;
     color: #999;
     white-space: nowrap;
   }
 }
+
 .quantity-control {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   white-space: nowrap;
   gap: 0rpx; // 增大间距
+
   button {
     width: 30rpx; // 增大按钮
     height: 72rpx;
@@ -2800,13 +2347,16 @@ export default {
     background: #ffffff;
     border: none;
     border-radius: 50%;
+
     &::after {
       border: none;
     }
+
     &:active {
       opacity: 0.8;
     }
   }
+
   .quantity {
     width: 60rpx;
     text-align: center;
@@ -2814,4 +2364,4 @@ export default {
     color: #333;
   }
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/manager/inspect-result.vue b/pages/manager/inspect-result.vue
index 8851ce9..91e6a57 100644
--- a/pages/manager/inspect-result.vue
+++ b/pages/manager/inspect-result.vue
@@ -14,20 +14,22 @@
       <!-- 合格产品卡片 -->
       <view v-if="hasQualifiedItems" class="result-card">
         <view class="card-title">合格产品</view>
-        <view v-for="item in qualifiedList" :key="item.shopId" class="result-group">
+        <view v-for="(item, index) in qualifiedList" :key="item.uniqueKey || index" class="result-group">
           <view class="row-main">
             <view class="goods-name-section">
-              <text class="goods-name">{{ item.shopId ? getGoodsName(item.shopId) : (item.id === 'unrecyclable' ? '不可回收'
-                : (item.id === 'quality_issue' ? '质量问题' : ''))}}</text>
-              <text class="goods-brand">{{ getItemBrand(item.shopId) }}</text>
+              <text class="goods-name">{{ getGoodsName(item.shopId) }}</text>
+              <text class="goods-brand">{{ getBrandStyleInfo(item) }}</text>
             </view>
             <text class="row-count">x{{ item.count }}</text>
-            <text class="row-total">¥{{ item.total }}</text>
+          </view>
+          <view class="price-input-row">
+            <text class="price-label">总金额</text>
+            <input class="price-input" v-model="item.total" type="digit" placeholder="请输入金额" />
           </view>
           <!-- 选择理由模块 -->
           <view v-if="item.items && item.items.length > 0">
-            <view v-for="(commonItem, index) in item.items" :key="commonItem.id || index" class="row-reason">
-              <text class="reason-label">{{ getGoodsName(item.shopId) }}{{ index + 1 }}</text>
+            <view v-for="(commonItem, itemIndex) in item.items" :key="commonItem.id || itemIndex" class="row-reason">
+              <text class="reason-label">{{ getQualifiedItemLabel(item, itemIndex) }}</text>
               <view class="reason-select" @click="selectReasonForQualified(commonItem, item)">
                 <text class="reason-placeholder" :class="{ 'selected': hasSelectedReason(commonItem) }">
                   {{ hasSelectedReason(commonItem) ? '已选择' : '请选择理由（选填）' }}
@@ -48,7 +50,10 @@
               <text class="goods-brand"></text>
             </view>
             <text class="row-count">x{{ group.count }}</text>
-            <text class="row-total">¥{{ group.total }}</text>
+          </view>
+          <view class="price-input-row">
+            <text class="price-label">总金额</text>
+            <input class="price-input" v-model="group.total" type="digit" placeholder="请输入金额" />
           </view>
           <!-- 选择理由模块 -->
           <view v-if="inspectData && inspectData.list">
@@ -75,7 +80,10 @@
               <text class="goods-brand"></text>
             </view>
             <text class="row-count">x{{ item.count }}</text>
-            <text class="row-total">¥{{ item.total }}</text>
+          </view>
+          <view class="price-input-row">
+            <text class="price-label">总金额</text>
+            <input class="price-input" v-model="item.total" type="digit" placeholder="请输入金额" />
           </view>
           <!-- 选择理由模块 -->
           <view v-if="inspectData && inspectData.list">
@@ -222,15 +230,28 @@ export default {
       const uniqueIds = Array.from(new Set(allIds.filter(Boolean)))
       console.log('uniqueIds', uniqueIds)
       await this.fetchGoodsNames(uniqueIds)
-      // 合格商品
+      // 合格商品 - 按照商品、品牌、款式作为唯一标识生成独立数据
       this.inspectData["list"].forEach(item => {
         if (item.qualifiedNum > 0 && item.id !== 'unrecyclable' && item.id !== 'quality_issue') {
+          // 为每个品牌款式组合创建独立的条目
+          const uniqueKey = item.uniqueKey || `${item.shopId}_${item.pinId || 'no-brand'}_${item.styleId || 'no-style'}`
+          
           this.qualifiedList.push({
             shopId: item.shopId,
             count: item.qualifiedNum,
-            total: item.price,
+            total: item.price || 0,
             classId: item.categoryId,
-            items: item.commonOrderList ? [...item.commonOrderList] : []
+            brandName: item.brandName || '',
+            styleName: item.styleName || '',
+            pinId: item.pinId || '',
+            styleId: item.styleId || '',
+            uniqueKey: uniqueKey,
+            originalItem: item, // 保存原始数据引用
+            items: item.commonOrderList ? [...item.commonOrderList] : [{
+              testingInstructions: '',
+              testingImages: '',
+              testingStatus: 0
+            }]
           })
           console.log('qualifiedList', this.qualifiedList)
         }
@@ -283,6 +304,29 @@ export default {
       uni.navigateBack()
     },
     finishInspect() {
+      // 校验金额必填性
+      // 检查合格产品金额
+      for (const item of this.qualifiedList) {
+        if (!item.total || item.total === '' || parseFloat(item.total) <= 0) {
+          uni.showToast({ title: '请填写合格产品金额', icon: 'none' })
+          return
+        }
+      }
+      // 检查不合格产品金额
+      for (const group of this.unqualifiedGroups) {
+        if (!group.total || group.total === '' || parseFloat(group.total) <= 0) {
+          uni.showToast({ title: '请填写不合格产品金额', icon: 'none' })
+          return
+        }
+      }
+      // 检查不可回收产品金额
+      for (const item of this.unrecyclableList) {
+        if (!item.total || item.total === '' || parseFloat(item.total) <= 0) {
+          uni.showToast({ title: '请填写不可回收产品金额', icon: 'none' })
+          return
+        }
+      }
+      
       // 校验理由必填性
       // 1. 合格产品理由可选填
       // 2. 质量问题和不可回收理由必填
@@ -311,6 +355,9 @@ export default {
           return
         }
       }
+      // 同步用户输入的金额到inspectData
+      this.syncPriceToInspectData()
+      
       // 在提交前将质量问题和不可回收中的id值置为空
       const processedList = this.inspectData["list"].map(item => {
         if (item.id === 'quality_issue' || item.id === 'unrecyclable') {
@@ -564,6 +611,79 @@ export default {
       // 检查该商品是否已选择理由或上传图片
       return (item.testingInstructions && item.testingInstructions.trim() !== '') ||
              (item.testingImages && item.testingImages.trim() !== '')
+    },
+    
+    getBrandStyleInfo(item) {
+      // 获取品牌款式信息
+      const brandName = item.brandName || ''
+      const styleName = item.styleName || ''
+      
+      if (brandName && styleName) {
+        return `品牌：${brandName} | 款式：${styleName}`
+      } else if (brandName) {
+        return `品牌：${brandName}`
+      } else if (styleName) {
+        return `款式：${styleName}`
+      } else {
+        return this.getItemBrand(item.shopId)
+      }
+    },
+    
+    getQualifiedItemLabel(item, index) {
+      // 生成合格产品的标签
+      const goodsName = this.getGoodsName(item.shopId)
+      const brandName = item.brandName || ''
+      const styleName = item.styleName || ''
+      
+      if (brandName && styleName) {
+        return `(${brandName}-${styleName})`
+      } else if (brandName) {
+        return `(${brandName})`
+      } else {
+        return `${goodsName}`
+      }
+    },
+    
+    syncPriceToInspectData() {
+      // 同步合格产品金额 - 按品牌款式唯一标识
+      this.qualifiedList.forEach(qualifiedItem => {
+        // 使用uniqueKey或者shopId+pinId+styleId来匹配
+        const inspectItem = this.inspectData.list.find(item => {
+          if (qualifiedItem.uniqueKey && item.uniqueKey) {
+            return item.uniqueKey === qualifiedItem.uniqueKey
+          }
+          // 备用匹配方式
+          return item.shopId === qualifiedItem.shopId && 
+                 (item.pinId || '') === (qualifiedItem.pinId || '') &&
+                 (item.styleId || '') === (qualifiedItem.styleId || '') &&
+                 item.id !== 'unrecyclable' && 
+                 item.id !== 'quality_issue'
+        })
+        
+        if (inspectItem) {
+          inspectItem.price = parseFloat(qualifiedItem.total) || 0
+          // 同步理由信息
+          if (qualifiedItem.items && qualifiedItem.items.length > 0) {
+            inspectItem.commonOrderList = qualifiedItem.items
+          }
+        }
+      })
+      
+      // 同步不合格产品金额
+      this.unqualifiedGroups.forEach(group => {
+        const inspectItem = this.inspectData.list.find(item => item.id === 'quality_issue')
+        if (inspectItem) {
+          inspectItem.price = parseFloat(group.total) || 0
+        }
+      })
+      
+      // 同步不可回收产品金额
+      this.unrecyclableList.forEach(unrecyclableItem => {
+        const inspectItem = this.inspectData.list.find(item => item.id === 'unrecyclable')
+        if (inspectItem) {
+          inspectItem.price = parseFloat(unrecyclableItem.total) || 0
+        }
+      })
     }
   }
 }
@@ -598,8 +718,8 @@ export default {
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
 
   .back {
-    padding: 20rpx;
-    margin-left: -20rpx;
+    padding: 22rpx;
+    margin-left: -22rpx;
   }
 
   .nav-title {
@@ -652,7 +772,7 @@ export default {
   color: #ffb400;
   font-size: 12px;
   border-radius: 12px;
-  padding: 2px 14px;
+  padding: 2px 26rpx;
   font-weight: 400;
   height: 22px;
   display: flex;
@@ -674,14 +794,14 @@ export default {
     margin-right: 8px;
 
     .goods-name {
-      font-size: 14px;
+      font-size: 26rpx;
       font-weight: bold;
       color: #222;
       line-height: 1.2;
     }
 
     .goods-brand {
-      font-size: 11px;
+      font-size: 22rpx;
       color: #999;
       font-weight: normal;
       line-height: 1.2;
@@ -690,7 +810,7 @@ export default {
   }
 
   .row-name {
-    font-size: 14px;
+    font-size: 26rpx;
     font-weight: bold;
     color: #222;
     margin-right: 8px;
@@ -703,13 +823,40 @@ export default {
   }
 
   .row-total {
-    font-size: 14px;
+    font-size: 26rpx;
     color: #222;
     font-weight: bold;
     margin-left: auto;
   }
 }
 
+.price-input-row {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  margin-bottom: 8px;
+
+  .price-label {
+    font-size: 26rpx;
+    color: #888;
+    min-width: 80px;
+    flex-shrink: 0;
+  }
+
+  .price-input {
+    flex: 1;
+    height: 40px;
+    border-radius: 12px;
+    background: #f6f6f6;
+    border: none;
+    font-size: 16px;
+    color: #222;
+    padding: 0 16px;
+    margin-left: 12px;
+    font-weight: bold;
+  }
+}
+
 .row-reason {
   display: flex;
   align-items: center;
@@ -727,7 +874,7 @@ export default {
     border-radius: 12px;
     background: #f6f6f6;
     border: none;
-    font-size: 14px;
+    font-size: 26rpx;
     color: #222;
     padding-left: 12px;
     margin-left: 8px;
@@ -740,7 +887,7 @@ export default {
     height: 36px;
     border-radius: 12px;
     background: #f6f6f6;
-    font-size: 14px;
+    font-size: 26rpx;
     color: #bbb;
     padding-left: 12px;
     margin-left: 8px;
@@ -749,8 +896,8 @@ export default {
 
   .reason-placeholder {
     color: #bbb;
-    font-size: 14px;
-
+    font-size: 26rpx;
+    flex-shrink: 0;
     &.selected {
       color: #52c41a;
       font-weight: 500;
diff --git a/pages/manager/inspect.vue b/pages/manager/inspect.vue
index a70c390..439b262 100644
--- a/pages/manager/inspect.vue
+++ b/pages/manager/inspect.vue
@@ -33,24 +33,22 @@
                 </text>
               </view>
               <text class="goods-desc">{{ item.desc }}</text>
+              <!-- 显示已选择的品牌款式信息 -->
+              <view v-if="getSelectedBrandStyles(item).length > 0" class="selected-styles">
+                <view v-for="style in getSelectedBrandStyles(item)" :key="style.uniqueKey" class="style-item">
+                  <text class="style-text">{{ style.brandName }} - {{ style.styleName }} x{{ style.quantity }}</text>
+                </view>
+              </view>
             </view>
           </view>
           <view class="goods-row">
             <text class="row-label">合格数量</text>
             <view class="num-ctrl">
-              <button class="num-btn" @tap="changeNum(item, 'qualified', -1)">-</button>
-              <text class="num">{{ item.qualified }}</text>
-              <button 
-              class="num-btn" 
-              @tap="changeNum(item, 'qualified', 1)"
-              >+</button>
+              <button class="num-btn" @tap="updateQuantity(idx, -1)">-</button>
+              <text class="num">{{ getItemTotalQuantity(item) }}</text>
+              <button class="num-btn" @tap="updateQuantity(idx, 1)">+</button>
             </view>
           </view>
-
-          <view class="goods-row">
-            <text class="row-label">总金额</text>
-            <input class="amount-input" :value="getInspectPrice(item)" @input="updateInspectPrice(item, $event)" placeholder="请输入金额" :disabled="!item.qualified || item.qualified === 0" />
-          </view>
         </view>
         <view v-if="loadingMore" class="loading-more">加载中...</view>
         <view v-else-if="finished" class="loading-more">没有更多了</view>
@@ -62,48 +60,18 @@
       <button class="btn-main" @tap="goNext">下一步</button>
     </view>
 
-    <!-- 品牌索引弹窗 -->
-    <view v-if="showBrandPopup" class="brand-popup-mask">
-      <view class="brand-popup">
-        <view class="brand-popup-header">
-          <text class="brand-popup-close" @click="closeBrandPopup">关闭</text>
-          <text class="brand-popup-title">可回收的品牌</text>
-        </view>
-        <view class="brand-popup-search">
-          <input class="brand-search-input" v-model="brandSearch" placeholder="请输入要查询的内容" @input="onBrandSearchInput" />
-        </view>
-        <scroll-view class="brand-popup-list" scroll-y>
-          <view v-for="letter in brandIndexList" :key="letter" :id="'brand-letter-' + letter">
-            <view class="brand-letter" :style="letter === '#' ? 'color:red' : ''">{{letter}}</view>
-            <view v-for="brand in brandList.filter(b => b.letter === letter)" :key="brand.name" class="brand-item" @click="openBrandConfirm(brand)">
-              <image :src="brand.logo" class="brand-logo" mode="aspectFit" />
-              <text class="brand-name">{{brand.name}}</text>
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-
-    <!-- 品牌确认弹窗 -->
-    <view v-if="showBrandConfirm" class="brand-confirm-mask" @click.self="closeBrandConfirm">
-      <view class="brand-confirm-popup">
-        <view class="brand-confirm-title">品牌确认提示</view>
-        <view class="brand-confirm-logo-wrap">
-          <image :src="brandConfirmInfo.logo" class="brand-confirm-logo" mode="aspectFit" />
-        </view>
-        <view class="brand-confirm-name">{{ brandConfirmInfo.name }}</view>
-        <view class="brand-confirm-desc">请确认所选品牌是否与实物品牌信息一致，否则将无法进行回收。</view>
-        <view class="brand-confirm-btn-row">
-          <button class="brand-confirm-btn retry" @click="closeBrandConfirm">重新选择</button>
-          <button class="brand-confirm-btn confirm" @click="confirmBrand">确认一致</button>
-        </view>
-      </view>
-    </view>
+    <!-- 品牌选择组件 -->
+    <brand-selector ref="brandSelector" @brand-confirm="onBrandConfirm" @reduce-select="onReduceSelect"
+      @close="onBrandSelectorClose" @get-existing-quantities="getExistingQuantities"></brand-selector>
   </view>
 </template>
 
 <script>
+import brandSelector from '../../compoent/recycle/brand-selector.vue'
 export default {
+  components: {
+    brandSelector
+  },
   data() {
     return {
       statusBarHeight: 0,
@@ -119,15 +87,9 @@ export default {
       loadingMore: false,
       finished: false,
       // 品牌选择相关
-      showBrandPopup: false,
-      brandList: [],
-      brandSearch: '',
-      currentProductId: null,
       pendingBrandIndex: null,
-      brandConfirmInfo: {},
-      showBrandConfirm: false,
-
-      searchTimer: null,
+      reduceItem: null, // 待减少数量的商品
+      brandStyleCache: {}, // 全局品牌款式缓存
       // brandIndexList 改为 computed
     }
   },
@@ -159,26 +121,6 @@ export default {
       console.log('categories计算 - 最终结果:', result.map(c => ({ id: c.id, title: c.title, badge: c.badge })))
       return result
     },
-    // brandIndexList 改为 computed
-    brandIndexList() {
-      // 动态生成品牌索引，包含所有有品牌的首字母和 #
-      const letters = new Set()
-      let hasSharp = false
-      this.brandList.forEach(b => {
-        if (b.letter && /^[A-Z]$/.test(b.letter)) {
-          letters.add(b.letter)
-        } else {
-          letters.add('#')
-          hasSharp = true
-        }
-      })
-      const arr = Array.from(letters).filter(l => l !== '#').sort()
-      if (hasSharp) arr.push('#')
-      console.log('brandIndexList for render:', arr)
-      // 如果brandList里有letter为#的品牌但arr没有#，强制返回['#']
-      if (this.brandList.some(b => b.letter === '#') && !arr.includes('#')) return ['#']
-      return arr
-    },
   },
   methods: {
     initInspectResult() {
@@ -307,6 +249,34 @@ export default {
         const inspectItem = this.inspectResult.list?.find(listItem =>
           listItem.shopId == item.id || listItem.shopId == itemId || listItem.id == item.id || listItem.id == itemId
         )
+        // 恢复品牌款式数据 - 从所有分类的商品中查找
+        const brandStyleQuantities = {}
+        const styleCache = {}
+        let totalQuantity = 0
+        
+        // 查找所有分类中是否有相同商品的品牌款式数据
+        Object.values(this.allProducts).forEach(categoryProducts => {
+          const existingProduct = categoryProducts.find(p => p.id === item.id)
+          if (existingProduct && this.currentGoods) {
+            const existingGoodsItem = this.currentGoods.find(g => g.id === item.id)
+            if (existingGoodsItem && existingGoodsItem.brandStyleQuantities) {
+              Object.assign(brandStyleQuantities, existingGoodsItem.brandStyleQuantities)
+              Object.assign(styleCache, existingGoodsItem.styleCache)
+              totalQuantity = Object.values(existingGoodsItem.brandStyleQuantities).reduce((sum, qty) => sum + qty, 0)
+            }
+          }
+        })
+        
+        // 如果没有找到现有数据，尝试从全局状态中恢复
+        if (totalQuantity === 0 && this.brandStyleCache && this.brandStyleCache[item.id]) {
+          Object.assign(brandStyleQuantities, this.brandStyleCache[item.id].brandStyleQuantities || {})
+          Object.assign(styleCache, this.brandStyleCache[item.id].styleCache || {})
+          totalQuantity = Object.values(brandStyleQuantities).reduce((sum, qty) => sum + qty, 0)
+        }
+        
+        // 如果没有品牌款式数据，使用普通数量
+        const finalQuantity = totalQuantity > 0 ? 0 : (inspectItem ? inspectItem.qualifiedNum : 0)
+        
         return {
           id: item.id,
           image: item.image || '/static/回收/衣物.png',
@@ -315,12 +285,16 @@ export default {
           maxPrice: item.maxPrice || 0,
           desc: item.service || '允许脏破烂，160码以上',
           qualified: inspectItem ? inspectItem.qualifiedNum : 0,
-          amount: inspectItem ? inspectItem.price : '', // 只用inspectResult里的金额
           originalNum: 0,
           estimatedPrice: orderItem ? orderItem.estimatedPrice : 0,
           originalId: item.id,
           isPin: item.isPin || 'N',
-          orderItem: orderItem
+          orderItem: orderItem,
+          unit: item.unit || '件',
+          // 品牌款式相关数据
+          brandStyleQuantities: brandStyleQuantities,
+          styleCache: styleCache,
+          quantity: finalQuantity
         }
       })
       this.currentGoods = goodsList
@@ -350,9 +324,12 @@ export default {
         return
       }
       
+      // 将品牌款式数据转换为独立的质检对象
+      const processedInspectResult = this.processInspectResultForBrandStyles()
+      
       // 构造传递给步骤二的完整数据
       const resultData = {
-        inspectResult: this.inspectResult,
+        inspectResult: processedInspectResult,
         order: this.order // 同时传递订单信息
       }
       console.log('resultDataStr:', resultData)
@@ -362,6 +339,122 @@ export default {
         url: `/pages/manager/inspect-result?resultData=${resultDataStr}`
       })
     },
+    
+    // 处理品牌款式数据，将每个品牌款式组合生成独立的质检对象
+    processInspectResultForBrandStyles() {
+      const processedList = []
+      
+      // 遍历当前的质检结果
+      this.inspectResult.list.forEach(inspectItem => {
+        // 不可回收和质量问题直接保留
+        if (inspectItem.id === 'unrecyclable' || inspectItem.id === 'quality_issue') {
+          processedList.push(inspectItem)
+          return
+        }
+        
+        // 从全局缓存中查找品牌款式数据
+        const cachedBrandStyleData = this.findBrandStyleDataFromCache(inspectItem.shopId)
+        
+        if (cachedBrandStyleData && Object.keys(cachedBrandStyleData.brandStyleQuantities).length > 0) {
+          // 如果有品牌款式数据，为每个品牌款式创建独立对象
+          Object.entries(cachedBrandStyleData.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+            if (quantity > 0 && cachedBrandStyleData.styleCache && cachedBrandStyleData.styleCache[uniqueKey]) {
+              const { brandInfo, styleInfo } = cachedBrandStyleData.styleCache[uniqueKey]
+              
+              // 为每个品牌款式组合创建独立的质检对象
+              const brandStyleInspectItem = {
+                ...inspectItem,
+                qualifiedNum: quantity,
+                shopId: inspectItem.shopId,
+                pinId: brandInfo.id,
+                styleId: styleInfo.id,
+                brandName: brandInfo.name,
+                styleName: styleInfo.name,
+                brandImage: brandInfo.logo,
+                styleImage: styleInfo.image,
+                uniqueKey: uniqueKey,
+                commonOrderList: [{
+                  testingInstructions: '',
+                  testingImages: '',
+                  testingStatus: 0
+                }]
+              }
+              processedList.push(brandStyleInspectItem)
+            }
+          })
+        } else {
+          // 没有品牌款式数据，保留原始对象
+          processedList.push(inspectItem)
+        }
+      })
+      
+      return {
+        id: this.inspectResult.id,
+        list: processedList
+      }
+    },
+    
+    // 根据shopId查找当前商品
+    findCurrentGoodsByShopId(shopId) {
+      return this.currentGoods.find(item => {
+        const orderItem = this.getOrderItemByProductId(item.id)
+        const itemId = orderItem ? (orderItem.shopId || orderItem.id) : item.id
+        return itemId == shopId
+      })
+    },
+    
+    // 从全局缓存和所有分类商品中查找品牌款式数据
+    findBrandStyleDataFromCache(shopId) {
+      // 首先从全局缓存中查找
+      const productId = this.getProductIdFromShopId(shopId)
+      if (productId && this.brandStyleCache[productId]) {
+        return this.brandStyleCache[productId]
+      }
+      
+      // 从所有分类的商品中查找
+      for (const categoryId in this.allProducts) {
+        const categoryProducts = this.allProducts[categoryId]
+        for (const product of categoryProducts) {
+          const orderItem = this.getOrderItemByProductId(product.id)
+          const itemId = orderItem ? (orderItem.shopId || orderItem.id) : product.id
+          
+          if (itemId == shopId && this.brandStyleCache[product.id]) {
+            return this.brandStyleCache[product.id]
+          }
+        }
+      }
+      
+      return null
+    },
+    
+    // 根据shopId获取productId
+    getProductIdFromShopId(shopId) {
+      // 从订单数据中查找
+      if (this.order && this.order.commonOrderList) {
+        const orderItem = this.order.commonOrderList.find(item => 
+          item.shopId == shopId || item.id == shopId
+        )
+        if (orderItem) {
+          return orderItem.shopId || orderItem.id
+        }
+      }
+      
+      // 从所有分类商品中查找
+      for (const categoryId in this.allProducts) {
+        const categoryProducts = this.allProducts[categoryId]
+        const product = categoryProducts.find(p => {
+          const orderItem = this.getOrderItemByProductId(p.id)
+          const itemId = orderItem ? (orderItem.shopId || orderItem.id) : p.id
+          return itemId == shopId
+        })
+        if (product) {
+          return product.id
+        }
+      }
+      
+      return shopId
+    },
+    
     validateInspectData() {
       if (!this.inspectResult.list || this.inspectResult.list.length === 0) {
         return {
@@ -391,13 +484,7 @@ export default {
             message: '有商品未完成质检选择'
           }
         }
-        // 检查总金额（price）是否填写（不可回收和质量问题不校验）
-        if (!item.price || item.price === 0 || item.price === '') {
-          return {
-            isValid: false,
-            message: '有商品未填写总金额'
-          }
-        }
+        // 不再校验价格，价格将在下一步填写
       }
       return {
         isValid: true,
@@ -424,29 +511,304 @@ export default {
         this.updateCurrentGoods()
       }
     },
-    changeNum(item, key, delta) {
-      if (key === 'qualified') {
-        const currentCategoryId = this.categories[this.currentCategory]?.id
-        // 处理不可回收和质量问题
-          if (item.id === 'unrecyclable-1' || item.id === 'unrecyclable') {
-            const newQualified = Math.max(0, (item.qualified || 0) + delta)
-            this.$set(item, 'qualified', newQualified)
-            this.updateInspectResult(item, 'qualified', delta, currentCategoryId)
-            this.$forceUpdate()
-            return
-          }
-        // 处理普通商品
+    // 更新商品数量
+    updateQuantity(index, delta) {
+      const categoryId = this.categories[this.currentCategory]?.id
+      const item = this.currentGoods[index]
+      if (!item) return
+
+      // 处理不可回收和质量问题
+      if (item.id === 'unrecyclable-1' || item.id === 'quality-issue-1') {
         const newQualified = Math.max(0, (item.qualified || 0) + delta)
         this.$set(item, 'qualified', newQualified)
-        this.updateInspectResult(item, 'qualified', delta, currentCategoryId)
-        // 新增：如果数量为0，移除该商品对象（包括不可回收和质量问题）
-        if (newQualified === 0) {
-          this.removeInspectItem(item)
-        }
+        this.updateInspectResult(item, 'qualified', delta, categoryId)
+        // 更新商品列表以同步显示
+        this.updateCurrentGoods()
         this.$forceUpdate()
-        console.log('更新后的inspectResult:', JSON.stringify(this.inspectResult, null, 2))
+        return
+      }
+
+      // 如果是减少数量且delta为负数
+      if (delta < 0) {
+        // 检查是否有多个品牌款式
+        if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 1) {
+          // 有多个品牌款式，显示选择弹窗
+          this.reduceItem = { item, index, delta }
+          const reduceStyleList = Object.entries(item.brandStyleQuantities)
+            .filter(([uniqueKey, quantity]) => quantity > 0)
+            .map(([uniqueKey, quantity]) => {
+              const cacheInfo = item.styleCache[uniqueKey]
+              return {
+                uniqueKey,
+                quantity,
+                name: cacheInfo ? `${cacheInfo.brandInfo.name} - ${cacheInfo.styleInfo.name}` : '未知款式',
+                logo: cacheInfo ? cacheInfo.brandInfo.logo : ''
+              }
+            })
+          this.$refs.brandSelector.openReducePopup(reduceStyleList)
+          return
+        } else if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length === 1) {
+          // 只有一个品牌款式，直接减少
+          const uniqueKey = Object.keys(item.brandStyleQuantities)[0]
+          const currentQty = item.brandStyleQuantities[uniqueKey] || 0
+          const newQty = Math.max(0, currentQty + delta)
+          this.$set(item.brandStyleQuantities, uniqueKey, newQty)
+
+          // 如果数量为0，删除该品牌款式
+          if (newQty === 0) {
+            delete item.brandStyleQuantities[uniqueKey]
+            if (item.styleCache && item.styleCache[uniqueKey]) {
+              delete item.styleCache[uniqueKey]
+            }
+          }
+          this.updateInspectResultFromBrandStyle(item)
+          return
+        } else {
+          // 没有品牌数量，使用原来的逻辑
+          let newQuantity = (item.quantity || 0) + delta
+          if (newQuantity < 0) newQuantity = 0
+          this.$set(item, 'quantity', newQuantity)
+          this.updateInspectResultFromQuantity(item)
+          return
+        }
+      }
+
+      // 品牌商品且加一时，总是打开品牌选择
+      if (item.isPin === 'Y' && delta > 0) {
+        this.pendingBrandIndex = index
+        this.$refs.brandSelector.open(item.id)
+        return
+      }
+      
+      // 无品牌商品，直接加减数量
+      if (item.isPin !== 'Y') {
+        let newQuantity = (item.quantity || 0) + delta
+        if (newQuantity < 0) newQuantity = 0
+        this.$set(item, 'quantity', newQuantity)
+        this.updateInspectResultFromQuantity(item)
+        return
+      }
+    },
+    
+    // 获取商品的总数量（所有品牌款式）
+    getItemTotalQuantity(item) {
+      // 特殊处理不可回收和质量问题
+      if (item.id === 'unrecyclable-1' || item.id === 'quality-issue-1') {
+        return item.qualified || 0
+      }
+      
+      if (item.brandStyleQuantities && Object.keys(item.brandStyleQuantities).length > 0) {
+        return Object.values(item.brandStyleQuantities).reduce((sum, qty) => sum + qty, 0)
+      }
+      return item.quantity || 0
+    },
+    
+    // 获取已选择的品牌款式信息
+    getSelectedBrandStyles(item) {
+      const styles = []
+      if (item.brandStyleQuantities && item.styleCache) {
+        Object.entries(item.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+          if (quantity > 0 && item.styleCache[uniqueKey]) {
+            const { brandInfo, styleInfo } = item.styleCache[uniqueKey]
+            styles.push({
+              uniqueKey,
+              quantity,
+              brandName: brandInfo.name,
+              styleName: styleInfo.name
+            })
+          }
+        })
+      }
+      return styles
+    },
+    
+    // 处理品牌确认事件
+    onBrandConfirm(data) {
+      if (this.pendingBrandIndex !== null) {
+        const item = this.currentGoods[this.pendingBrandIndex]
+        if (item && data.selectedStyles && data.selectedStyles.length > 0) {
+          // 初始化品牌款式数量对象
+          if (!item.brandStyleQuantities) {
+            this.$set(item, 'brandStyleQuantities', {})
+          }
+
+          // 清理当前品牌的所有款式数据
+          const brandPrefix = `${data.brandInfo.id}_`
+          Object.keys(item.brandStyleQuantities).forEach(key => {
+            if (key.startsWith(brandPrefix)) {
+              delete item.brandStyleQuantities[key]
+              if (item.styleCache && item.styleCache[key]) {
+                delete item.styleCache[key]
+              }
+            }
+          })
+          
+          // 为每个选中的款式设置数量（只保存有数量的款式）
+          data.selectedStyles.forEach(style => {
+            if (style.quantity > 0) {
+              const uniqueKey = `${data.brandInfo.id}_${style.id}`
+              this.$set(item.brandStyleQuantities, uniqueKey, style.quantity)
+              
+              // 缓存款式信息用于后续显示
+              if (!item.styleCache) {
+                this.$set(item, 'styleCache', {})
+              }
+              this.$set(item.styleCache, uniqueKey, {
+                brandInfo: data.brandInfo,
+                styleInfo: style
+              })
+            }
+          })
+
+          // 清除原来的quantity
+          if (item.quantity) {
+            this.$set(item, 'quantity', 0)
+          }
+          
+          // 更新质检结果
+          this.updateInspectResultFromBrandStyle(item)
+          
+          // 保存到全局缓存
+          this.$set(this.brandStyleCache, item.id, {
+            brandStyleQuantities: { ...item.brandStyleQuantities },
+            styleCache: { ...item.styleCache }
+          })
+        }
+        this.pendingBrandIndex = null
+      }
+    },
+    
+    // 处理减少品牌选择事件
+    onReduceSelect(selectInfo) {
+      const { item, index, delta } = this.reduceItem
+      
+      if (selectInfo.uniqueKey) {
+        // 品牌款式减少逻辑
+        const currentQty = item.brandStyleQuantities[selectInfo.uniqueKey] || 0
+        const newQty = Math.max(0, currentQty + delta)
+
+        this.$set(item.brandStyleQuantities, selectInfo.uniqueKey, newQty)
+
+        // 如果数量为0，删除该品牌款式
+        if (newQty === 0) {
+          delete item.brandStyleQuantities[selectInfo.uniqueKey]
+          if (item.styleCache && item.styleCache[selectInfo.uniqueKey]) {
+            delete item.styleCache[selectInfo.uniqueKey]
+          }
+        }
+        
+        this.updateInspectResultFromBrandStyle(item)
+        
+        // 更新全局缓存
+        this.$set(this.brandStyleCache, item.id, {
+          brandStyleQuantities: { ...item.brandStyleQuantities },
+          styleCache: { ...item.styleCache }
+        })
+      }
+
+      this.reduceItem = null
+    },
+    
+    // 处理品牌选择器关闭事件
+    onBrandSelectorClose() {
+      this.pendingBrandIndex = null
+    },
+    
+    // 获取已有的款式数量
+    getExistingQuantities(brandId, callback) {
+      if (this.pendingBrandIndex !== null) {
+        const item = this.currentGoods[this.pendingBrandIndex]
+        if (item && item.brandStyleQuantities) {
+          // 过滤出当前品牌的款式数量
+          const existingQuantities = {}
+          Object.entries(item.brandStyleQuantities).forEach(([uniqueKey, quantity]) => {
+            if (uniqueKey.startsWith(`${brandId}_`)) {
+              existingQuantities[uniqueKey] = quantity
+            }
+          })
+          callback(existingQuantities)
+        } else {
+          callback({})
+        }
+      } else {
+        callback({})
+      }
+    },
+    
+    // 从品牌款式数据更新质检结果
+    updateInspectResultFromBrandStyle(item) {
+      const totalQuantity = this.getItemTotalQuantity(item)
+      
+      // 如果总数量为0，移除质检结果
+      if (totalQuantity === 0) {
+        this.removeInspectItem(item)
+        return
+      }
+      
+      // 更新或创建质检结果项
+      const categoryId = this.categories[this.currentCategory]?.id
+      const orderItem = this.getOrderItemByProductId(item.id)
+      const itemId = orderItem ? (orderItem.shopId || orderItem.id) : item.id
+      
+      let inspectItem = this.inspectResult.list?.find(listItem => listItem.shopId == itemId)
+      if (!inspectItem) {
+        inspectItem = {
+          price: 0,
+          qualifiedNum: totalQuantity,
+          noQualifiedNum: 0,
+          unrecyclable: 0,
+          shopId: itemId,
+          pinId: '',
+          categoryId: categoryId || '',
+          commonOrderList: [{
+            testingInstructions: '',
+            testingImages: '',
+            testingStatus: 0
+          }]
+        }
+        this.inspectResult.list.push(inspectItem)
+      } else {
+        inspectItem.qualifiedNum = totalQuantity
       }
     },
+    
+    // 从普通数量更新质检结果
+    updateInspectResultFromQuantity(item) {
+      const quantity = item.quantity || 0
+      
+      // 如果数量为0，移除质检结果
+      if (quantity === 0) {
+        this.removeInspectItem(item)
+        return
+      }
+      
+      // 更新或创建质检结果项
+      const categoryId = this.categories[this.currentCategory]?.id
+      const orderItem = this.getOrderItemByProductId(item.id)
+      const itemId = orderItem ? (orderItem.shopId || orderItem.id) : item.id
+      
+      let inspectItem = this.inspectResult.list?.find(listItem => listItem.shopId == itemId)
+      if (!inspectItem) {
+        inspectItem = {
+          price: 0,
+          qualifiedNum: quantity,
+          noQualifiedNum: 0,
+          unrecyclable: 0,
+          shopId: itemId,
+          pinId: '',
+          categoryId: categoryId || '',
+          commonOrderList: [{
+            testingInstructions: '',
+            testingImages: '',
+            testingStatus: 0
+          }]
+        }
+        this.inspectResult.list.push(inspectItem)
+      } else {
+        inspectItem.qualifiedNum = quantity
+      }
+    },
+    
     // 修改：移除商品对象方法，支持不可回收和质量问题
     removeInspectItem(item) {
       // 判断不可回收和质量问题
@@ -605,48 +967,6 @@ export default {
       
       console.log('更新后的inspectResult:', JSON.stringify(this.inspectResult, null, 2))
     },
-    getInspectPrice(item) {
-      // 优化：不可回收和质量问题通过id匹配
-      if (item.id === 'unrecyclable-1' || item.id === 'unrecyclable') {
-        const inspectItem = this.inspectResult.list?.find(listItem => listItem.id === 'unrecyclable')
-        return inspectItem ? inspectItem.price : ''
-      }
-      if (item.id === 'quality-issue-1' || item.id === 'quality_issue') {
-        const inspectItem = this.inspectResult.list?.find(listItem => listItem.id === 'quality_issue')
-        return inspectItem ? inspectItem.price : ''
-      }
-      // 普通商品
-      const inspectItem = this.inspectResult.list?.find(listItem => listItem.shopId == item.id)
-      return inspectItem ? inspectItem.price : ''
-    },
-    updateInspectPrice(item, event) {
-      // 优化：不可回收和质量问题通过id匹配
-      if (item.id === 'unrecyclable-1' || item.id === 'unrecyclable') {
-        const inspectItem = this.inspectResult.list?.find(listItem => listItem.id === 'unrecyclable')
-        if (!inspectItem) return
-        inspectItem.price = parseFloat(event.detail.value) || 0
-        return
-      }
-      if (item.id === 'quality-issue-1' || item.id === 'quality_issue') {
-        const inspectItem = this.inspectResult.list?.find(listItem => listItem.id === 'quality_issue')
-        if (!inspectItem) return
-        inspectItem.price = parseFloat(event.detail.value) || 0
-        return
-      }
-      // 普通商品
-      let itemId = item.originalId || item.id
-      const orderItem = this.getOrderItemByProductId(itemId)
-      if (orderItem && orderItem.id) {
-        itemId = orderItem.id // 使用订单中的商品ID
-      }
-      // 只查找，不新建
-      let inspectItem = this.inspectResult.list?.find(listItem => listItem.shopId == (orderItem ? (orderItem.shopId || orderItem.id) : itemId))
-      if (!inspectItem) return // 没有就不处理
-      const newPrice = parseFloat(event.detail.value) || 0
-      inspectItem.price = newPrice
-      console.log('更新价格:', itemId, newPrice)
-      console.log('当前商品对象:', inspectItem)
-    },
     
     loadMoreGoods() {
       const categoryId = this.categories[this.currentCategory]?.id
@@ -676,107 +996,7 @@ export default {
     },
     
 
-    // 获取品牌列表
-    getGoodsBrandList(productId, searchName = '') {
-      this.currentProductId = productId
-      const params = { productId }
-      if (searchName.trim()) {
-        params.name = searchName.trim()
-      }
-      this.$api('getGoodsBrandList', params, res => {
-        if (res && res.success && res.result && res.result.records) {
-          // 保证响应式
-          const newList = res.result.records.map(item => {
-            // 获取品牌名称的拼音首字母
-            const firstChar = this.getPinyinFirstLetter(item.name)
-            return {
-              id: item.id,
-              logo: item.image || '/static/brand/alexander.png',
-              name: item.name,
-              letter: firstChar
-            }
-          })
-          // 打印所有品牌的name和letter
-          newList.forEach(b => console.log('品牌:', b.name, 'letter:', b.letter))
-          this.brandList = [...newList]
-          // 打印brandList和brandIndexList
-          this.$nextTick(() => {
-            console.log('brandList:', this.brandList)
-            console.log('brandIndexList:', this.brandIndexList)
-          })
-        }
-      })
-    },
-    
-    // 获取中文拼音首字母
-    getPinyinFirstLetter(str) {
-      if (!str) return '#'
-      const firstChar = str.charAt(0)
-      // 只认A-Z，否则归为#
-      if (/^[A-Za-z]$/.test(firstChar)) {
-        return firstChar.toUpperCase()
-      }
-      return '#'
-    },
-    
-    // 品牌搜索输入事件处理
-    onBrandSearchInput(e) {
-      const searchValue = e.detail.value
-      
-      // 清除之前的定时器
-      if (this.searchTimer) {
-        clearTimeout(this.searchTimer)
-      }
-      
-      // 设置防抖，500ms后执行搜索
-      this.searchTimer = setTimeout(() => {
-        if (this.currentProductId) {
-          this.getGoodsBrandList(this.currentProductId, searchValue)
-        }
-      }, 500)
-    },
-    
-    // 打开品牌确认弹窗
-    openBrandConfirm(brand) {
-      this.brandConfirmInfo = {
-        id: brand.id,
-        logo: brand.logo,
-        name: brand.name
-      }
-      this.showBrandConfirm = true
-    },
-    
-    // 关闭品牌确认弹窗
-    closeBrandConfirm() {
-      this.showBrandConfirm = false
-    },
-    
-    // 确认品牌选择
-    confirmBrand() {
-      this.showBrandConfirm = false
-      this.showBrandPopup = false
-      
-      // 确认后增加商品数量
-      if (this.pendingBrandIndex !== null) {
-        const item = this.currentGoods[this.pendingBrandIndex]
-        if (item) {
-          const newQualified = Math.max(0, (item.qualified || 0) + 1)
-          this.$set(item, 'qualified', newQualified)
-          this.updateInspectResult(item, 'qualified', 1, this.categories[this.currentCategory]?.id)
-          // 强制更新categories计算属性，使左侧分类数字变化
-          this.$forceUpdate()
-        }
-        this.pendingBrandIndex = null
-      }
-    },
-    
-    // 关闭品牌弹窗
-    closeBrandPopup() {
-      this.showBrandPopup = false
-      this.pendingBrandIndex = null
-      this.brandSearch = ''
-      this.currentProductId = null
-    },
+
     
     // 格式化价格显示
     formatPrice(item) {
@@ -1201,212 +1421,24 @@ export default {
   font-size: 26rpx;
 }
 
-// 品牌选择弹窗样式
-.brand-popup-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 3000;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.brand-popup {
-  position: relative;
-  width: 100%;
-  max-width: 1500rpx;
-  background: #fff;
-  border-radius: 64rpx 64rpx 0 0;
-  box-shadow: 0 -8rpx 48rpx rgba(0,0,0,0.08);
-  padding-bottom: 80rpx;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.brand-popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32rpx 24rpx 0 24rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-  position: relative;
-}
-
-.brand-popup-close {
-  position: absolute;
-  left: 24rpx;
-  font-size: 28rpx;
-  color: #888;
-}
-
-.brand-popup-title {
-  font-size: 32rpx;
-  color: #222;
-  font-weight: bold;
-}
-
-.brand-popup-search {
-  padding: 20rpx 24rpx 0 24rpx;
-}
-
-.brand-search-input {
-  width: 100%;
-  height: 60rpx;
-  border-radius: 30rpx;
-  background: #f5f5f5;
-  border: none;
-  padding-left: 40rpx;
-  font-size: 28rpx;
-  color: #888;
-}
-
-.brand-popup-list {
-  flex: 1;
-  overflow-y: auto;
-  max-height: 60vh;
-  padding: 0 24rpx;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none; /* Chrome, Safari, Opera */
+// 品牌款式显示样式
+.selected-styles {
+  margin-top: 8rpx;
+  
+  .style-item {
+    margin-bottom: 4rpx;
+    
+    .style-text {
+      font-size: 22rpx;
+      color: #ff9c00;
+      background: #fff7e6;
+      padding: 2rpx 8rpx;
+      border-radius: 8rpx;
+      display: inline-block;
+    }
   }
 }
 
-.brand-letter {
-  font-size: 28rpx;
-  color: #888;
-  margin: 24rpx 0 8rpx 0;
-  font-weight: bold;
-}
-
-.brand-item {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.brand-logo {
-  width: 60rpx;
-  height: 60rpx;
-  margin-right: 20rpx;
-  border-radius: 8rpx;
-  background: #f8f8f8;
-}
-
-.brand-name {
-  font-size: 28rpx;
-  color: #222;
-}
-
-// 品牌确认弹窗样式
-.brand-confirm-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.25);
-  z-index: 5001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.brand-confirm-popup {
-  width: 70vw;
-  max-width: 540rpx;
-  background: #fff;
-  border-radius: 64rpx;
-  box-shadow: 0 16rpx 64rpx rgba(0,0,0,0.12);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 96rpx 40rpx 72rpx 40rpx;
-  position: relative;
-}
-
-.brand-confirm-title {
-  font-size: 36rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 24rpx;
-}
-
-.brand-confirm-logo-wrap {
-  width: 120rpx;
-  height: 120rpx;
-  background: #f8f8f8;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 18rpx;
-}
-
-.brand-confirm-logo {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-}
-
-.brand-confirm-name {
-  font-size: 28rpx;
-  color: #222;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 16rpx;
-}
-
-.brand-confirm-desc {
-  font-size: 24rpx;
-  color: #999;
-  text-align: center;
-  margin-bottom: 32rpx;
-  line-height: 1.6;
-}
-
-.brand-confirm-btn-row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 24rpx;
-}
-
-.brand-confirm-btn {
-  flex: 1;
-  height: 72rpx;
-  border-radius: 36rpx;
-  font-size: 28rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  margin: 0 0;
-}
-
-.brand-confirm-btn.retry {
-  background: #fff;
-  color: #ff9c00;
-  border: 2rpx solid #ff9c00;
-}
-
-.brand-confirm-btn.confirm {
-  background: linear-gradient(to right, #ffd01e, #ff8917);
-  color: #fff;
-  border: none;
-}
-
 
 </style>
 
diff --git a/pages/manager/order-detail.vue b/pages/manager/order-detail.vue
index 89d5735..ab85d40 100644
--- a/pages/manager/order-detail.vue
+++ b/pages/manager/order-detail.vue
@@ -18,35 +18,38 @@
         <view v-if="order.cancelReason" class="cancel-reason">{{ order.cancelReason }}</view>
         <view class="info-card-header">
           <view class="info-title-wrap">
-          <text class="info-title">回收信息</text>
+            <text class="info-title">回收信息</text>
             <view v-if="order.statusText === '不包邮'" class="tag-nobaoyou">不包邮</view>
           </view>
           <view class="status-tag" :class="order.statusClass" style="margin-left:auto;">{{ order.statusLabel }}</view>
         </view>
         <!-- 步骤条（横向卡片式） -->
         <view class="steps-bar">
-          <view v-for="(step, idx) in steps" :key="step.text" :class="['step-item', {active: idx === currentStep}]">
+          <view v-for="(step, idx) in steps" :key="step.text" :class="['step-item', { active: idx === currentStep }]">
             <image :src="step.icon" class="step-icon" />
-            <view class="step-label" :class="{active: idx === currentStep}">
-            <text class="step-text">{{ step.text }}</text>
+            <view class="step-label" :class="{ active: idx === currentStep }">
+              <text class="step-text">{{ step.text }}</text>
             </view>
           </view>
         </view>
         <!-- 订单基础信息（左对齐，分隔线，按钮、箭头、标签等细节） -->
         <view class="base-info">
-          <view v-for="(item, i) in baseInfo" :key="item.label" class="base-info-row" :class="{'user-stat-trigger': item.label === '用户名'}" @tap="item.label === '用户名' ? onUserStatClick() : null">
+          <view v-for="(item, i) in baseInfo" :key="item.label" class="base-info-row"
+            :class="{ 'user-stat-trigger': item.label === '用户名' }"
+            @tap="item.label === '用户名' ? onUserStatClick() : null">
             <view class="base-label-wrap">
-            <text class="base-label">{{ item.label }}</text>
+              <text class="base-label">{{ item.label }}</text>
             </view>
             <view class="base-value-wrap">
               <text class="base-value">{{ item.value }}</text>
               <view class="base-actions">
-                <text v-if="item.viewLogistics" class="view-logistics-btn" @tap="viewLogistics(item.value, item.expressCompany)">查看物流</text>
-              <text v-if="item.copy" class="copy-btn" @tap="copyText(item.value)">复制</text>
+                <text v-if="item.viewLogistics" class="view-logistics-btn"
+                  @tap="viewLogistics(item.value, item.expressCompany)">查看物流</text>
+                <text v-if="item.copy" class="copy-btn" @tap="copyText(item.value)">复制</text>
               </view>
-            <uni-icons v-if="item.arrow" type="right" size="18" color="#bbb" />
+              <uni-icons v-if="item.arrow" type="right" size="18" color="#bbb" />
             </view>
-            <view v-if="i < baseInfo.length-1" class="divider"></view>
+            <view v-if="i < baseInfo.length - 1" class="divider"></view>
           </view>
         </view>
       </view>
@@ -85,37 +88,48 @@
             <view class="custom-goods-info">
               <text class="custom-goods-name">{{ item.title }}</text>
               <text class="custom-goods-desc">{{ item.pinName }}</text>
-              <text class="custom-goods-desc">{{ item.details }}</text>
+              <view class="custom-goods-desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{
+                item.styleName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.styleName">款式：{{ item.styleName }}</view>
+              <text class="custom-goods-desc" v-else>{{ item.details }}</text>
               <view class="custom-goods-meta">
-                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
-                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
+                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice
+                }}<text class="custom-goods-unit"> /{{ item.unit }}</text></text>
+                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text
+                    class="custom-goods-unit"> /{{ item.unit }}</text></text>
                 <text class="custom-goods-count">x{{ item.num }}</text>
               </view>
             </view>
-            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
+            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{
+              parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
             <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
           </view>
         </view>
       </view>
-      
+
       <!-- 现金打款时展示完整订单详情卡片 -->
       <view v-else-if="order.status === 3" class="info-card detail-card custom-inspect-card">
         <view class="custom-header-bg">
           <view class="custom-card-title">订单详情</view>
-            </view>
+        </view>
         <view class="custom-detail-content">
           <view class="custom-detail-row">
-            <text class="custom-detail-label" >订单编号</text>
+            <text class="custom-detail-label">订单编号</text>
             <text class="custom-detail-value">{{ order.ordeNo || order.id }}</text>
-            </view>
+          </view>
+          <view class="custom-detail-row">
+            <text class="custom-detail-label">预估回收</text>
+            <text class="custom-detail-value highlight">¥ {{ order.estimatedPrice }}</text>
+          </view>
           <view class="custom-detail-row">
             <text class="custom-detail-label">合格结算</text>
             <text class="custom-detail-value highlight">¥ {{ order.price || order.estimate }}</text>
-            </view>
+          </view>
           <view class="custom-detail-row">
             <text class="custom-detail-label">运费扣除</text>
             <text class="custom-detail-value">¥ 0</text>
-            </view>
+          </view>
           <view class="custom-detail-row total-row">
             <text class="custom-detail-label">结算金额</text>
             <text class="custom-detail-value total highlight">¥ {{ order.price || order.estimate }}</text>
@@ -127,14 +141,21 @@
             <view class="custom-goods-info">
               <text class="custom-goods-name">{{ item.title }}</text>
               <text class="custom-goods-desc">{{ item.pinName }}</text>
-              <text class="custom-goods-desc">{{ item.details }}</text>
+              <view class="custom-goods-desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{
+                item.styleName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.styleName">款式：{{ item.styleName }}</view>
+              <text class="custom-goods-desc" v-else>{{ item.details }}</text>
               <view class="custom-goods-meta">
-                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
-                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
+                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice
+                }}<text class="custom-goods-unit"> /{{ item.unit }}</text></text>
+                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text
+                    class="custom-goods-unit"> /{{ item.unit }}</text></text>
                 <text class="custom-goods-count">x{{ item.num }}</text>
               </view>
             </view>
-            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
+            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{
+              parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
             <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
           </view>
         </view>
@@ -149,14 +170,14 @@
           <view v-for="(item, i) in qcInfo" :key="item.label" class="inspect-row">
             <text class="inspect-label">{{ item.label }}</text>
             <text class="inspect-value">{{ item.value }}</text>
-            <view v-if="i < qcInfo.length-1" class="inspect-divider"></view>
+            <view v-if="i < qcInfo.length - 1" class="inspect-divider"></view>
           </view>
           <view class="inspect-btn" @tap="goToInspection">点此查看质检报告详情</view>
         </view>
       </view>
 
       <!-- 已预约状态下订单详情卡片 -->
-      <view v-else-if="order.status === 1||order.status === 0" class="info-card detail-card custom-inspect-card">
+      <view v-else-if="order.status === 1 || order.status === 0" class="info-card detail-card custom-inspect-card">
         <view class="custom-header-bg">
           <view class="custom-card-title">订单详情</view>
         </view>
@@ -172,14 +193,21 @@
             <view class="custom-goods-info">
               <text class="custom-goods-name">{{ item.title }}</text>
               <text class="custom-goods-desc">{{ item.pinName }}</text>
-              <text class="custom-goods-desc">{{ item.details }}</text>
+              <view class="custom-goods-desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{
+                item.styleName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</view>
+              <view class="custom-goods-desc" v-else-if="item.styleName">款式：{{ item.styleName }}</view>
+              <text class="custom-goods-desc" v-else>{{ item.details }}</text>
               <view class="custom-goods-meta">
-                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
-                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
+                <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice
+                }}<text class="custom-goods-unit"> /{{ item.unit }}</text></text>
+                <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text
+                    class="custom-goods-unit"> /{{ item.unit }}</text></text>
                 <text class="custom-goods-count">x{{ item.num }}</text>
               </view>
             </view>
-            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
+            <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{
+              parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
             <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
           </view>
         </view>
@@ -241,9 +269,9 @@ export default {
             { label: '预约时间', value: data.goTime || data.createTime }
           ]
           // 质检信息（如有）
-		  
-		  let sum = (data.qualifiedNum || 0) + (data.noQualifiedNum || 0) + (data.unrecyclable || 0)
-		  
+
+          let sum = (data.qualifiedNum || 0) + (data.noQualifiedNum || 0) + (data.unrecyclable || 0)
+
           this.qcInfo = [
             { label: '质检数量', value: sum ? sum + ' 件' : '' },
             { label: '质检合格', value: data.qualifiedNum ? data.qualifiedNum + ' 件' : '' },
@@ -287,8 +315,8 @@ export default {
     },
     goToInspect() {
       const orderData = encodeURIComponent(JSON.stringify(this.order))
-      uni.navigateTo({ 
-        url: `/pages/manager/inspect?orderData=${orderData}` 
+      uni.navigateTo({
+        url: `/pages/manager/inspect?orderData=${orderData}`
       })
     },
     async onUserStatClick() {
@@ -307,7 +335,7 @@ export default {
     },
     getAreaList() {
       this.$api('getAreaList', {}, (res) => {
-        console.log(res,'getAreaList');
+        console.log(res, 'getAreaList');
         if (res.code == 200 && Array.isArray(res.result)) {
           // 按sort升序排序
           const sorted = res.result.slice().sort((a, b) => a.sort - b.sort)
@@ -350,29 +378,29 @@ export default {
     // 判断是否显示单价格（根据estimatedPrice格式判断）
     shouldShowSinglePrice(estimatedPrice) {
       if (!estimatedPrice || typeof estimatedPrice !== 'string') return true;
-      
+
       // 解析estimatedPrice，格式如"25-0"或"25-50"
       const parts = estimatedPrice.split('-');
       if (parts.length !== 2) return true;
-      
+
       const maxPrice = parseFloat(parts[1]);
       return maxPrice === 0;
     },
     // 从总价反推单件价格区间
     getSinglePriceRange(estimatedPrice, quantity) {
       if (!estimatedPrice || typeof estimatedPrice !== 'string' || !quantity) return '';
-      
+
       // 解析estimatedPrice，格式如"25-50"
       const parts = estimatedPrice.split('-');
       if (parts.length !== 2) return estimatedPrice;
-      
+
       const minTotal = parseFloat(parts[0]);
       const maxTotal = parseFloat(parts[1]);
-      
+
       // 反推单件价格
       const minPrice = (minTotal / quantity).toFixed(2);
       const maxPrice = (maxTotal / quantity).toFixed(2);
-      
+
       return `${minPrice}~${maxPrice}`;
     },
   }
@@ -382,6 +410,7 @@ export default {
 <style lang="scss" scoped>
 $order-card-radius: 32px;
 $order-card-padding: 40px 28px;
+
 .order-detail-container {
   background: #f8f8f8;
   min-height: 100vh;
@@ -390,6 +419,7 @@ $order-card-padding: 40px 28px;
   flex-direction: column;
   align-items: center;
 }
+
 .nav-bar {
   display: flex;
   align-items: center;
@@ -403,11 +433,13 @@ $order-card-padding: 40px 28px;
   right: 0;
   z-index: 999;
   box-sizing: border-box;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+
   .back {
     padding: 20rpx;
     margin-left: -20rpx;
   }
+
   .nav-title {
     flex: 1;
     text-align: center;
@@ -415,12 +447,14 @@ $order-card-padding: 40px 28px;
     font-weight: 500;
     color: #222;
   }
+
   .nav-icons {
     display: flex;
     align-items: center;
     gap: 30px;
   }
 }
+
 .main-content {
   margin-top: calc(200rpx + var(--status-bar-height));
   width: 100vw;
@@ -431,6 +465,7 @@ $order-card-padding: 40px 28px;
   flex-direction: column;
   align-items: center;
 }
+
 .info-card {
   width: 100%;
   max-width: 375px;
@@ -440,10 +475,12 @@ $order-card-padding: 40px 28px;
   padding: 16px 8px;
   background: #fff;
   border-radius: 20px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
   // color: blue;
   &.process-card {
     position: relative;
+
     .status-tag {
       position: absolute;
       right: 18px;
@@ -458,6 +495,7 @@ $order-card-padding: 40px 28px;
       line-height: 18px;
       display: flex;
       align-items: center;
+
       &.orange {
         background: #fff7e6;
         color: #ffb400;
@@ -469,6 +507,7 @@ $order-card-padding: 40px 28px;
         display: flex;
         align-items: center;
       }
+
       &.gray {
         background: #f5f5f5;
         color: #444;
@@ -480,6 +519,7 @@ $order-card-padding: 40px 28px;
         display: flex;
         align-items: center;
       }
+
       &.blue {
         background: #eaf6ff;
         color: #2a9cfb;
@@ -492,17 +532,28 @@ $order-card-padding: 40px 28px;
         align-items: center;
       }
     }
+
     .status-tag.red {
       background: #fff0f0;
       color: #ff4d4f;
     }
   }
+
   .info-card-header {
-    display: flex; align-items: center; justify-content: flex-start;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
     .info-title-wrap {
       display: flex;
       align-items: center;
-      .info-title { font-size: 18px; font-weight: bold; color: #222; }
+
+      .info-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #222;
+      }
+
       .tag-nobaoyou {
         margin-left: 8px;
         background: #fff0f0;
@@ -516,14 +567,19 @@ $order-card-padding: 40px 28px;
         align-items: center;
       }
     }
-    .status-tag { margin-left: auto; }
+
+    .status-tag {
+      margin-left: auto;
+    }
   }
+
   .steps-bar {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin: 24px 0 24px 0;
     gap: 14px;
+
     .step-item {
       background: #fff8ea;
       border-radius: 16px;
@@ -536,30 +592,31 @@ $order-card-padding: 40px 28px;
       overflow: hidden;
       position: relative;
       transition: all 0.3s ease;
-      
-      .step-icon { 
-        width: 44px; 
-        height: 44px; 
+
+      .step-icon {
+        width: 44px;
+        height: 44px;
         margin: 6px 0 0 0;
         transition: transform 0.3s ease;
       }
-      
+
       .step-label {
-        width: 100%; 
-        height: 28px; 
-        background: transparent; 
-        position: absolute; 
-        left: 0; 
-        bottom: 0; 
-        border-radius: 0 0 12px 12px; 
-        display: flex; 
-        align-items: center; 
-        justify-content: center; 
-        transition: all 0.3s ease; 
+        width: 100%;
+        height: 28px;
+        background: transparent;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        border-radius: 0 0 12px 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
         overflow: hidden;
         line-height: 1;
-        
-        .step-num, .step-text {
+
+        .step-num,
+        .step-text {
           font-size: 11px;
           color: #9b9b9b;
           font-weight: 600;
@@ -567,38 +624,41 @@ $order-card-padding: 40px 28px;
           vertical-align: middle;
           transition: color 0.3s ease;
         }
-        
-        .step-num { 
-          margin-right: 2px; 
+
+        .step-num {
+          margin-right: 2px;
         }
       }
-      
-      &.active { 
+
+      &.active {
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(255, 156, 0, 0.08);
-        
+
         .step-icon {
           transform: scale(1.05);
         }
-        
-        .step-label { 
-          background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%); 
+
+        .step-label {
+          background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
         }
-        
-        .step-num, .step-text { 
-          color: #fff; 
-          font-weight: bold; 
+
+        .step-num,
+        .step-text {
+          color: #fff;
+          font-weight: bold;
         }
       }
-      
+
       &:not(.active):hover {
         transform: translateY(-1px);
         box-shadow: 0 2px 12px rgba(255, 156, 0, 0.06);
       }
     }
   }
+
   .base-info {
     margin-top: 18px;
+
     .base-info-row {
       display: flex;
       align-items: flex-start;
@@ -607,24 +667,90 @@ $order-card-padding: 40px 28px;
       min-height: 36px;
       justify-content: space-between;
       align-items: center;
-      .base-label-wrap { min-width: 80px; text-align: left;  color: #8b8b8b; font-size: 13px;}
-      .base-value-wrap { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
-      .base-value { color: #222; font-size: 15px; font-weight: 600; word-break: break-all; text-align: right; }
-      .base-actions { display: flex; align-items: center; gap: 8px; }
-      .view-logistics-btn { color: #2a9cfb; font-size: 13px; font-weight: 400; padding: 1px 6px; border-radius: 6px; transition: background 0.2s; }
-      .view-logistics-btn:active { background: #eaf6ff; }
-      .copy-btn { color: #ffb400; font-size: 13px; font-weight: 400; padding: 1px 6px; border-radius: 6px; transition: background 0.2s; }
-      .copy-btn:active { background: #fff7e6; }
-      .divider { position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; background: #f0f0f0; }
-      uni-icons { margin-left: 6px; }
+
+      .base-label-wrap {
+        min-width: 80px;
+        text-align: left;
+        color: #8b8b8b;
+        font-size: 13px;
+      }
+
+      .base-value-wrap {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: flex-end;
+      }
+
+      .base-value {
+        color: #222;
+        font-size: 15px;
+        font-weight: 600;
+        word-break: break-all;
+        text-align: right;
+      }
+
+      .base-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .view-logistics-btn {
+        color: #2a9cfb;
+        font-size: 13px;
+        font-weight: 400;
+        padding: 1px 6px;
+        border-radius: 6px;
+        transition: background 0.2s;
+      }
+
+      .view-logistics-btn:active {
+        background: #eaf6ff;
+      }
+
+      .copy-btn {
+        color: #ffb400;
+        font-size: 13px;
+        font-weight: 400;
+        padding: 1px 6px;
+        border-radius: 6px;
+        transition: background 0.2s;
+      }
+
+      .copy-btn:active {
+        background: #fff7e6;
+      }
+
+      .divider {
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        bottom: -1px;
+        height: 1px;
+        background: #f0f0f0;
+      }
+
+      uni-icons {
+        margin-left: 6px;
+      }
+    }
+
+    .base-info-row .base-value-wrap {
+      flex-wrap: wrap;
+    }
+
+    .base-info-row .base-value {
+      white-space: pre-line;
+      line-height: 1.5;
     }
-    .base-info-row .base-value-wrap { flex-wrap: wrap; }
-    .base-info-row .base-value { white-space: pre-line; line-height: 1.5; }
   }
+
   &.detail-card {
     position: relative;
     padding: 0;
     background: transparent;
+
     .card-header-bg {
       height: 56px;
       background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
@@ -634,21 +760,25 @@ $order-card-padding: 40px 28px;
       padding-left: 20px;
       padding-top: 12px;
     }
+
     .detail-content {
       background: #fff;
       border-radius: 0 0 20px 20px;
       padding: 20px 16px 16px 16px;
     }
+
     .detail-row {
       display: flex;
       align-items: center;
       min-height: 32px;
+
       .detail-label {
         color: #bcbcbc;
         font-size: 14px;
         width: 90px;
         flex-shrink: 0;
       }
+
       .detail-value {
         color: #222;
         font-size: 15px;
@@ -657,6 +787,7 @@ $order-card-padding: 40px 28px;
         margin-left: 0;
         flex: 1;
       }
+
       &.total-row .detail-value.total {
         color: #ffb400;
         font-size: 20px;
@@ -666,23 +797,91 @@ $order-card-padding: 40px 28px;
         margin-left: auto;
         min-width: 100px;
       }
-      .orange { color: #ffb400; }
+
+      .orange {
+        color: #ffb400;
+      }
+    }
+
+    .divider {
+      height: 1px;
+      background: #f0f0f0;
+      margin: 16px 0;
+    }
+
+    .goods-row {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 18px;
+    }
+
+    .goods-img {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      margin-right: 12px;
+    }
+
+    .goods-info {
+      flex: 1;
+    }
+
+    .goods-name {
+      font-size: 15px;
+      font-weight: bold;
+      color: #222;
+      margin-bottom: 2px;
+    }
+
+    .goods-desc {
+      font-size: 13px;
+      color: #bbb;
+      margin-bottom: 8px;
+    }
+
+    .goods-price-row {
+      display: flex;
+      align-items: center;
+    }
+
+    .goods-price {
+      color: #ffb400;
+      font-size: 15px;
+      font-weight: bold;
+      margin-right: 8px;
+    }
+
+    .goods-unit {
+      font-size: 13px;
+      color: #bbb;
+    }
+
+    .goods-count {
+      color: #bbb;
+      font-size: 13px;
+      margin-left: 8px;
+    }
+
+    .goods-total {
+      color: #222;
+      font-size: 15px;
+      font-weight: bold;
+      margin-left: auto;
     }
-    .divider { height: 1px; background: #f0f0f0; margin: 16px 0; }
-    .goods-row { display: flex; align-items: flex-start; margin-bottom: 18px; }
-    .goods-img { width: 48px; height: 48px; border-radius: 12px; margin-right: 12px; }
-    .goods-info { flex: 1; }
-    .goods-name { font-size: 15px; font-weight: bold; color: #222; margin-bottom: 2px; }
-    .goods-desc { font-size: 13px; color: #bbb; margin-bottom: 8px; }
-    .goods-price-row { display: flex; align-items: center; }
-    .goods-price { color: #ffb400; font-size: 15px; font-weight: bold; margin-right: 8px; }
-    .goods-unit { font-size: 13px; color: #bbb; }
-    .goods-count { color: #bbb; font-size: 13px; margin-left: 8px; }
-    .goods-total { color: #222; font-size: 15px; font-weight: bold; margin-left: auto; }
   }
 }
+
 .footer-btns {
-  position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; gap: 16px; padding: 16px 24px 32px 24px; z-index: 101;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  display: flex;
+  gap: 16px;
+  padding: 16px 24px 32px 24px;
+  z-index: 101;
+
   .btn-outline {
     flex: 1;
     height: 40px;
@@ -695,6 +894,7 @@ $order-card-padding: 40px 28px;
     box-shadow: none;
     padding: 0 18px;
   }
+
   .btn-main {
     flex: 1;
     height: 40px;
@@ -708,18 +908,21 @@ $order-card-padding: 40px 28px;
     padding: 0 18px;
   }
 }
+
 .cancel-reason {
   color: #bbb;
   font-size: 13px;
   margin-bottom: 10px;
   padding-left: 2px;
 }
+
 .inspect-card {
   max-width: 335px;
   width: 100%;
   margin: 0 auto 28px auto;
   border-radius: 24px;
   overflow: hidden;
+
   .inspect-header {
     height: 60px;
     background: linear-gradient(180deg, #fff7e6 0%, #fffbe6 100%);
@@ -728,25 +931,50 @@ $order-card-padding: 40px 28px;
     align-items: flex-end;
     padding-left: 24px;
   }
+
   .inspect-title {
     font-size: 20px;
     font-weight: bold;
     color: #222;
     line-height: 60px;
   }
+
   .inspect-content {
     background: #fff;
     border-radius: 0 0 24px 24px;
     padding: 24px 24px 20px 24px;
   }
+
   .inspect-row {
-    display: flex; align-items: center; justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     min-height: 40px;
-    .inspect-label { color: #bcbcbc; font-size: 16px; }
-    .inspect-value { color: #222; font-size: 16px; font-weight: 500; }
-    .inspect-divider { height: 1px; background: #f0f0f0; margin: 0; width: 100%; position: absolute; left: 0; bottom: 0; }
+
+    .inspect-label {
+      color: #bcbcbc;
+      font-size: 16px;
+    }
+
+    .inspect-value {
+      color: #222;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .inspect-divider {
+      height: 1px;
+      background: #f0f0f0;
+      margin: 0;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+
     position: relative;
   }
+
   .inspect-btn {
     width: 100%;
     margin: 24px 0 0 0;
@@ -762,12 +990,14 @@ $order-card-padding: 40px 28px;
     line-height: 48px;
   }
 }
+
 .card-title {
   font-size: 20px;
   font-weight: bold;
   color: #222;
   margin-bottom: 12px;
 }
+
 .custom-inspect-card {
   background: linear-gradient(180deg, #fffbe6 0%, #fff 90%);
   border-radius: 20px;
@@ -776,6 +1006,7 @@ $order-card-padding: 40px 28px;
   margin: 24rpx 0 0 0;
   overflow: hidden;
 }
+
 .custom-header-bg {
   height: 56px;
   background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
@@ -785,28 +1016,33 @@ $order-card-padding: 40px 28px;
   padding-left: 24px;
   padding-top: 12px;
 }
+
 .custom-card-title {
   font-size: 20px;
   font-weight: bold;
   color: #222;
   margin-bottom: 12px;
 }
+
 .custom-detail-content {
   background: #fff;
   border-radius: 0 0 20px 20px;
   padding: 20px 16px 16px 16px;
 }
+
 .custom-detail-row {
   display: flex;
   align-items: center;
   min-height: 32px;
   font-size: 15px;
+
   .custom-detail-label {
     color: #bcbcbc;
     font-size: 14px;
     width: 90px;
     flex-shrink: 0;
   }
+
   .custom-detail-value {
     color: #222;
     font-size: 15px;
@@ -815,6 +1051,7 @@ $order-card-padding: 40px 28px;
     margin-left: 0;
     flex: 1;
   }
+
   &.total-row .custom-detail-value.total {
     color: #ffb400;
     font-size: 20px;
@@ -824,18 +1061,21 @@ $order-card-padding: 40px 28px;
     margin-left: auto;
     min-width: 100px;
   }
+
   .highlight {
     color: #ffb400;
     font-size: 18px;
     font-weight: bold;
   }
 }
+
 .custom-divider {
   width: 100%;
   height: 1px;
   background: #f0f0f0;
   margin: 16px 0;
 }
+
 .custom-goods-row {
   background: #fff;
   border-radius: 24px;
@@ -848,6 +1088,7 @@ $order-card-padding: 40px 28px;
   min-width: 0;
   flex-wrap: nowrap;
 }
+
 .custom-goods-img {
   width: 48px;
   height: 48px;
@@ -855,6 +1096,7 @@ $order-card-padding: 40px 28px;
   margin-right: 12px;
   flex-shrink: 0;
 }
+
 .custom-goods-info {
   flex: 1;
   display: flex;
@@ -863,6 +1105,7 @@ $order-card-padding: 40px 28px;
   min-width: 0;
   margin-right: 16px;
 }
+
 .custom-goods-name {
   font-size: 15px;
   color: #222;
@@ -872,6 +1115,7 @@ $order-card-padding: 40px 28px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .custom-goods-desc {
   font-size: 13px;
   color: #bcbcbc;
@@ -879,10 +1123,12 @@ $order-card-padding: 40px 28px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
   &:last-child {
     margin-bottom: 10px;
   }
 }
+
 .custom-goods-meta {
   display: flex;
   align-items: center;
@@ -890,6 +1136,7 @@ $order-card-padding: 40px 28px;
   flex-wrap: nowrap;
   white-space: nowrap;
 }
+
 .custom-goods-price {
   color: #ffb400;
   font-size: 15px;
@@ -897,11 +1144,13 @@ $order-card-padding: 40px 28px;
   white-space: nowrap;
   flex-shrink: 0;
 }
+
 .custom-goods-unit {
   color: #bcbcbc;
   font-size: 13px;
   font-weight: normal;
 }
+
 .custom-goods-count {
   color: #bcbcbc;
   font-size: 13px;
@@ -909,6 +1158,7 @@ $order-card-padding: 40px 28px;
   white-space: nowrap;
   flex-shrink: 0;
 }
+
 .custom-goods-total {
   color: #222;
   font-size: 15px;
@@ -919,26 +1169,32 @@ $order-card-padding: 40px 28px;
   min-width: 60px;
   text-align: right;
 }
+
 .user-stat-modal-mask {
   position: fixed;
-  left: 0; right: 0; top: 0; bottom: 0;
-  background: rgba(0,0,0,0.45);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .user-stat-modal-box {
   width: 80vw;
   max-width: 420px;
   background: linear-gradient(180deg, #fff7f2 0%, #fff 100%);
   border-radius: 32px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   padding: 38px 0 32px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .user-stat-modal-title {
   font-size: 24px;
   font-weight: bold;
@@ -946,6 +1202,7 @@ $order-card-padding: 40px 28px;
   text-align: center;
   margin-bottom: 32px;
 }
+
 .user-stat-modal-row {
   width: 80%;
   display: flex;
@@ -955,21 +1212,25 @@ $order-card-padding: 40px 28px;
   margin: 0 auto;
   padding: 12px 0;
 }
+
 .user-stat-label {
   color: #999;
   font-size: 16px;
 }
+
 .user-stat-value {
   color: #222;
   font-size: 18px;
   font-weight: 500;
 }
+
 .user-stat-modal-divider {
   width: 80%;
   height: 1px;
   background: #f0f0f0;
   margin: 0 auto;
 }
+
 .user-stat-modal-btn {
   width: 80%;
   margin: 32px auto 0 auto;
@@ -983,9 +1244,10 @@ $order-card-padding: 40px 28px;
   text-align: center;
   line-height: 48px;
 }
+
 .user-stat-trigger {
   color: #222;
   font-weight: 500;
   cursor: pointer;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/subcomponent/detail.vue b/pages/subcomponent/detail.vue
index e07e588..86e7dce 100644
--- a/pages/subcomponent/detail.vue
+++ b/pages/subcomponent/detail.vue
@@ -89,13 +89,13 @@
           <text class="order-value">{{ orderDetail && orderDetail.ordeNo ? orderDetail.ordeNo : orderId }}</text>
         </view>
         <view class="order-divider"></view>
-        <template v-if="status < 2">
+        <template>
           <view class="order-row">
             <text class="order-label">预估回收</text>
             <text class="order-value order-highlight">¥ {{ estimatePrice }}</text>
           </view>
         </template>
-        <template v-else-if="status === 3">
+        <template v-if="status === 3">
           <view class="order-row">
             <text class="order-label">合格结算</text>
             <text class="order-value order-highlight">¥ {{ finalPrice }}</text>
@@ -116,7 +116,10 @@
             <view class="goods-info">
               <text class="goods-name">{{ item.title }}</text>
               <text class="desc">{{ item.pinName }}</text>
-              <text class="goods-desc">{{ item.details }}</text>
+              <view class="desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{ item.styleName }}</view>
+              <view class="desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</view>
+              <view class="desc" v-else-if="item.styleName">款式：{{ item.styleName }}</view>
+              <text class="goods-desc" v-else>{{ item.details }}</text>
               <view class="goods-meta">
                 <text class="goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥ {{ item.onePrice }}<text class="goods-unit"> /{{item.unit}}</text></text>
                 <text class="goods-price" v-else>¥ {{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="goods-unit"> /{{item.unit}}</text></text>
@@ -1008,4 +1011,4 @@ letter-spacing: 0%;
   margin-top: calc(150rpx + var(--status-bar-height));
   padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/subcomponent/pickup.vue b/pages/subcomponent/pickup.vue
index ed92a93..0a3470b 100644
--- a/pages/subcomponent/pickup.vue
+++ b/pages/subcomponent/pickup.vue
@@ -1,7 +1,7 @@
 <template>
-  <view class="pickup-container" :style="{paddingTop: navBarHeightRpx + 'rpx'}">
+  <view class="pickup-container" :style="{ paddingTop: navBarHeightRpx + 'rpx' }">
     <!-- 顶部导航栏 -->
-    <view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
+    <view class="nav-bar" :style="{ height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px' }">
       <view class="back" @tap="goBack">
         <uni-icons type="left" size="20"></uni-icons>
       </view>
@@ -14,11 +14,7 @@
       <view class="card process-card">
         <view class="card-title process-title">回收流程</view>
         <view class="process-steps">
-          <view
-            class="process-step-card"
-            v-for="(step, i) in steps"
-            :key="i"
-          >
+          <view class="process-step-card" v-for="(step, i) in steps" :key="i">
             <image :src="step.icon" class="step-icon" mode="aspectFit" />
             <view v-if="i === 0" class="step-bottom-bar">
               <view class="step-num-bar">
@@ -36,14 +32,14 @@
           <view class="info-item" @tap="selectAddress">
             <text class="label">取件地址</text>
             <view class="value">
-              <text class="text" :class="{placeholder: !displayAddress}">{{ displayAddress || '请选择' }}</text>
+              <text class="text" :class="{ placeholder: !displayAddress }">{{ displayAddress || '请选择' }}</text>
               <text class="arrow">></text>
             </view>
           </view>
           <view class="info-item" @tap="openTimePicker">
             <text class="label">上门时间</text>
             <view class="value">
-              <text class="text" :class="{placeholder: !selectedTime}">{{ selectedTime || '请选择' }}</text>
+              <text class="text" :class="{ placeholder: !selectedTime }">{{ selectedTime || '请选择' }}</text>
               <text class="arrow">></text>
             </view>
           </view>
@@ -54,7 +50,8 @@
       <view class="card order-card">
         <view class="card-title process-title">订单详情</view>
         <view class="order-items">
-          <view class="order-item" v-for="(item, index) in showAllItems ? selectedItems : selectedItems.slice(0, 3)" :key="index">
+          <view class="order-item" v-for="(item, index) in showAllItems ? selectedItems : selectedItems.slice(0, 3)"
+            :key="index">
             <view class="item-left">
               <image :src="item.icon" mode="aspectFit"></image>
               <image v-if="item.brandImage" :src="item.brandImage" class="brand-logo" mode="aspectFit"></image>
@@ -64,13 +61,20 @@
                 <text class="name">{{ item.name }}</text>
                 <text v-if="item.brandName" class="brand-tag">{{ item.brandName }}</text>
               </view>
-              <!-- <view class="desc">{{ item.desc }}</view> -->
+              <view class="desc" v-if="item.brandName && item.styleName">品牌：{{ item.brandName }} | 款式：{{ item.styleName
+                }}</view>
+              <view class="desc" v-else-if="item.brandName">品牌：{{ item.brandName }}</view>
+              <view class="desc" v-else-if="item.styleName">款式：{{ item.styleName }}</view>
+              <view class="desc" v-else>{{ item.desc }}</view>
               <view class="price-row">
-                <text class="price" v-if="!item.maxPrice || item.maxPrice == (item.price || item.unitPrice)">￥{{ item.price || item.unitPrice }}/{{item.unit}}</text>
-                <text class="price" v-else>￥{{ item.price || item.unitPrice }}~{{ item.maxPrice }}/{{item.unit}}</text>
+                <text class="price" v-if="!item.maxPrice || item.maxPrice == (item.price || item.unitPrice)">￥{{
+                  item.price || item.unitPrice }}/{{ item.unit }}</text>
+                <text class="price" v-else>￥{{ item.price || item.unitPrice }}~{{ item.maxPrice }}/{{ item.unit }}</text>
                 <text class="count">x{{ item.quantity }}</text>
-                <text class="amount" v-if="!item.maxPrice || item.maxPrice == (item.price || item.unitPrice)">￥{{ ((item.price || item.unitPrice) * item.quantity).toFixed(2) }}</text>
-                <text class="amount" v-else>￥{{ ((item.price || item.unitPrice) * item.quantity).toFixed(2) }}~{{ ((item.maxPrice) * item.quantity).toFixed(2) }}</text>
+                <text class="amount" v-if="!item.maxPrice || item.maxPrice == (item.price || item.unitPrice)">￥{{
+                  ((item.price || item.unitPrice) * item.quantity).toFixed(2) }}</text>
+                <text class="amount" v-else>￥{{ ((item.price || item.unitPrice) * item.quantity).toFixed(2) }}~{{
+                  ((item.maxPrice) * item.quantity).toFixed(2) }}</text>
               </view>
             </view>
           </view>
@@ -92,7 +96,7 @@
 
     <!-- 底部提交栏 -->
     <view class="agreement-bar">
-      <view class="checkbox" :class="{active: agreed}" @tap="toggleAgreement">
+      <view class="checkbox" :class="{ active: agreed }" @tap="toggleAgreement">
         <text v-if="agreed">✓</text>
       </view>
       <text>我已阅读并同意</text>
@@ -105,7 +109,7 @@
         <text>已选 {{ totalCount }} 件 预估回收可得</text>
         <text class="amount">￥{{ totalPriceRange }}</text>
       </view>
-      <button class="main-btn"  @tap="submitOrder">预约上门取件</button>
+      <button class="main-btn" @tap="submitOrder">预约上门取件</button>
     </view>
 
     <!-- 时间选择弹窗 -->
@@ -119,29 +123,22 @@
         <view class="picker-section">
           <view class="section-title">选择日期</view>
           <view class="date-btns">
-            <view
-              v-for="(tab, index) in dateTabs"
-              :key="index"
-              :class="['date-btn', {active: currentDateTab === index}]"
-              @tap="selectDateTab(index)"
-            >
+            <view v-for="(tab, index) in dateTabs" :key="index"
+              :class="['date-btn', { active: currentDateTab === index }]" @tap="selectDateTab(index)">
               {{ tab.label }}
             </view>
           </view>
         </view>
         <view class="picker-section">
-  <view class="section-title">选择时间</view>
-  <view class="time-btns">
-    <view
-      v-for="(slot, idx) in timeSlots"
-      :key="idx"
-      :class="['time-btn', {active: selectedTimeSlot === idx, disabled: !availableTimeSlots[idx]}]"
-      @tap="availableTimeSlots[idx] ? selectTimeSlot(idx) : null"
-    >
-      {{ slot }}
-    </view>
-  </view>
-</view>
+          <view class="section-title">选择时间</view>
+          <view class="time-btns">
+            <view v-for="(slot, idx) in timeSlots" :key="idx"
+              :class="['time-btn', { active: selectedTimeSlot === idx, disabled: !availableTimeSlots[idx] }]"
+              @tap="availableTimeSlots[idx] ? selectTimeSlot(idx) : null">
+              {{ slot }}
+            </view>
+          </view>
+        </view>
         <view class="confirm-btn" @tap="confirmTime">确认</view>
       </view>
     </view>
@@ -188,7 +185,7 @@ export default {
   onLoad(options) {
     // 判断是否从回收页面跳转而来
     this.fromRecycle = options.fromRecycle === 'true'
-    
+
     // 如果是从回收页面跳转来的，解析传递的衣物信息
     if (this.fromRecycle && options.items) {
       try {
@@ -220,7 +217,7 @@ export default {
     try {
       const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
       navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - sysInfo.statusBarHeight
-    } catch (e) {}
+    } catch (e) { }
     this.navBarHeight = navBarHeight
     this.navBarHeightRpx = Math.round(navBarHeight * 750 / sysInfo.windowWidth)
 
@@ -238,38 +235,38 @@ export default {
   },
   computed: {
     availableTimeSlots() {
-  const tab = this.dateTabs[this.currentDateTab];
-  if (!tab) return this.timeSlots.map(() => true);
-  const dateObj = tab.date;
-  const now = new Date();
-  return this.timeSlots.map(slot => {
-    const startTime = slot.split('~')[0];
-    const [h, m] = startTime.split(':');
-    const slotDate = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate(), h, m);
-    return slotDate > now;
-  });
-},
+      const tab = this.dateTabs[this.currentDateTab];
+      if (!tab) return this.timeSlots.map(() => true);
+      const dateObj = tab.date;
+      const now = new Date();
+      return this.timeSlots.map(slot => {
+        const startTime = slot.split('~')[0];
+        const [h, m] = startTime.split(':');
+        const slotDate = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate(), h, m);
+        return slotDate > now;
+      });
+    },
     totalCount() {
       return this.selectedItems.reduce((sum, item) => sum + item.quantity, 0)
     },
     totalPriceRange() {
       if (this.selectedItems.length === 0) return '0.0'
-      
+
       let minTotal = 0
       let maxTotal = 0
-      
+
       this.selectedItems.forEach(item => {
         const minPrice = item.price || item.unitPrice || 0
         const maxPrice = item.maxPrice || minPrice || 0
         minTotal += minPrice * item.quantity
         maxTotal += maxPrice * item.quantity
       })
-      
+
       // 如果最小值和最大值相等，只显示一个值
       if (minTotal === maxTotal) {
         return minTotal.toFixed(2)
       }
-      
+
       return `${minTotal.toFixed(2)}~${maxTotal.toFixed(2)}`
     },
     canSubmit() {
@@ -311,29 +308,29 @@ export default {
       this.currentDateTab = index
     },
     selectTimeSlot(index) {
-     if (this.availableTimeSlots[index]) {
-       this.selectedTimeSlot = index;
-     }
-   },
-   confirmTime() {
-     if (this.selectedTimeSlot === -1) {
-       uni.showToast({ title: '请选择可用时间段', icon: 'none' });
-       return;
-     }
-     const tab = this.dateTabs[this.currentDateTab];
-     const dateObj = tab.date;
-     const timeStr = this.timeSlots[this.selectedTimeSlot];
-     const startTime = timeStr.split('~')[0];
-     const yyyy = dateObj.getFullYear();
-     const mm = (dateObj.getMonth() + 1).toString().padStart(2, '0');
-     const dd = dateObj.getDate().toString().padStart(2, '0');
-     this.selectedTime = `${yyyy}-${mm}-${dd} ${startTime}:00`;
-     this.closeTimePicker();
-   },
-   resetPicker() {
-     this.currentDateTab = 0;
-     this.selectedTimeSlot = -1;
-   },
+      if (this.availableTimeSlots[index]) {
+        this.selectedTimeSlot = index;
+      }
+    },
+    confirmTime() {
+      if (this.selectedTimeSlot === -1) {
+        uni.showToast({ title: '请选择可用时间段', icon: 'none' });
+        return;
+      }
+      const tab = this.dateTabs[this.currentDateTab];
+      const dateObj = tab.date;
+      const timeStr = this.timeSlots[this.selectedTimeSlot];
+      const startTime = timeStr.split('~')[0];
+      const yyyy = dateObj.getFullYear();
+      const mm = (dateObj.getMonth() + 1).toString().padStart(2, '0');
+      const dd = dateObj.getDate().toString().padStart(2, '0');
+      this.selectedTime = `${yyyy}-${mm}-${dd} ${startTime}:00`;
+      this.closeTimePicker();
+    },
+    resetPicker() {
+      this.currentDateTab = 0;
+      this.selectedTimeSlot = -1;
+    },
     toggleAgreement() {
       this.agreed = !this.agreed
     },
@@ -343,66 +340,70 @@ export default {
     showPrivacyPolicy() {
       uni.showModal({ title: '隐私政策', content: '这里展示隐私政策内容' })
     },
-   submitOrder() {
-     if (!this.agreed) {
-       uni.showToast({ title: '请先同意服务协议', icon: 'none' })
-       return
-     }
-     if (!this.displayAddress || this.displayAddress === '请选择取件地址') {
-       uni.showToast({ title: '请选择取件地址', icon: 'none' })
-       return
-     }
-     if (!this.selectedTime) {
-       uni.showToast({ title: '请选择上门时间', icon: 'none' })
-       return
-     }
-     if (this.selectedItems.length === 0) {
-       uni.showToast({ title: '请选择回收物品', icon: 'none' })
-       return
-     }
-     const list = this.selectedItems.map(item => {
-       const orderItem = {
-         shopId: item.id,
-         num: item.quantity
-       };
-       // 如果有品牌ID，添加到订单项中
-       if (item.brandId) {
-         orderItem.pinId = item.brandId;
-       } else if (item.pinId) {
-         orderItem.pinId = item.pinId;
-       }
-       return orderItem;
-     });
-     console.log({
-      addressId: this.addressId,
-      strTime: this.selectedTime,
-      list: list
-     },'createOrder');
-
-     // 校验通过，提交
-     uni.showLoading({ title: '提交中...' })
-     this.$api('createOrder', {
-      addressId: this.addressId,
-      strTime: this.selectedTime,
-      list: JSON.stringify(list)
-     }, (res) => {
-      if (res && res.success) {
-        console.log(res,'createOrder-res');
-        uni.showToast({ title: '预约成功', icon: 'success' })
-        uni.redirectTo({
-          url: `/pages/subcomponent/detail?id=${res.result.id}`
-        })
+    submitOrder() {
+      if (!this.agreed) {
+        uni.showToast({ title: '请先同意服务协议', icon: 'none' })
+        return
+      }
+      if (!this.displayAddress || this.displayAddress === '请选择取件地址') {
+        uni.showToast({ title: '请选择取件地址', icon: 'none' })
+        return
       }
-     })
-
-    //  setTimeout(() => {
-    //    uni.hideLoading()
-    //    uni.showToast({ title: '预约成功', icon: 'success' })
-    //    setTimeout(() => {
-    //      uni.navigateBack()
-    //    }, 1500)
-    //  }, 1000)
-   },
+      if (!this.selectedTime) {
+        uni.showToast({ title: '请选择上门时间', icon: 'none' })
+        return
+      }
+      if (this.selectedItems.length === 0) {
+        uni.showToast({ title: '请选择回收物品', icon: 'none' })
+        return
+      }
+      const list = this.selectedItems.map(item => {
+        const orderItem = {
+          shopId: item.id,
+          num: item.quantity
+        };
+        // 如果有品牌ID，添加到订单项中
+        if (item.brandId) {
+          orderItem.pinId = item.brandId;
+        } else if (item.pinId) {
+          orderItem.pinId = item.pinId;
+        }
+        // 如果有款式ID，添加到订单项中
+        if (item.styleId) {
+          orderItem.styleId = item.styleId;
+        }
+        return orderItem;
+      });
+      console.log({
+        addressId: this.addressId,
+        strTime: this.selectedTime,
+        list: list
+      }, 'createOrder');
+
+      // 校验通过，提交
+      uni.showLoading({ title: '提交中...' })
+      this.$api('createOrder', {
+        addressId: this.addressId,
+        strTime: this.selectedTime,
+        list: JSON.stringify(list)
+      }, (res) => {
+        if (res && res.success) {
+          console.log(res, 'createOrder-res');
+          uni.showToast({ title: '预约成功', icon: 'success' })
+          uni.redirectTo({
+            url: `/pages/subcomponent/detail?id=${res.result.id}`
+          })
+        }
+      })
+
+      //  setTimeout(() => {
+      //    uni.hideLoading()
+      //    uni.showToast({ title: '预约成功', icon: 'success' })
+      //    setTimeout(() => {
+      //      uni.navigateBack()
+      //    }, 1500)
+      //  }, 1000)
+    },
     toggleExpandOrder() {
       this.showAllItems = !this.showAllItems
     },
@@ -472,10 +473,12 @@ export default {
   align-items: center;
   background: #fff;
   padding: 0 30rpx;
+
   .back {
     padding: 20rpx;
     margin-left: -20rpx;
   }
+
   .title {
     flex: 1;
     text-align: center;
@@ -483,10 +486,13 @@ export default {
     font-weight: 500;
     color: #222;
   }
+
   .right-btns {
     display: flex;
     gap: 30rpx;
-    .more, .scan {
+
+    .more,
+    .scan {
       font-size: 40rpx;
       color: #333;
     }
@@ -498,23 +504,26 @@ export default {
 }
 
 .card {
-  background: linear-gradient(to bottom,#fff3db 0%,#fffefb 40%);
+  background: linear-gradient(to bottom, #fff3db 0%, #fffefb 40%);
   border-radius: 20rpx;
   margin-bottom: 20rpx;
   overflow: hidden;
-  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.03);
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
 }
+
 .process-card {
   background: #fff;
   border-radius: 24rpx;
   box-shadow: 0 8rpx 32rpx rgba(255, 149, 0, 0.08);
   padding: 0 0 20rpx 0;
 }
+
 .process-steps {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 0 30rpx 30rpx;
+
   .process-step-card {
     background: #FFF8ED;
     border-radius: 24rpx;
@@ -525,11 +534,13 @@ export default {
     align-items: center;
     margin-right: 24rpx;
     position: relative;
+
     .step-icon {
       width: 64rpx;
       height: 64rpx;
       margin: 24rpx 0 18rpx 0;
     }
+
     .step-bottom-bar {
       position: absolute;
       left: 0;
@@ -541,11 +552,13 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+
       .step-num-bar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-top: 8rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 8rpx;
+
         .num-main {
           width: 32rpx;
           height: 32rpx;
@@ -559,6 +572,7 @@ export default {
           font-weight: 600;
           margin-right: 10rpx;
         }
+
         .text-main {
           color: #fff;
           font-size: 26rpx;
@@ -566,17 +580,19 @@ export default {
         }
       }
     }
+
     .step-label-gray {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 56rpx;
-    background: #FFF8ED;
-    border-radius: 0 0 24rpx 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 56rpx;
+      background: #FFF8ED;
+      border-radius: 0 0 24rpx 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
       .num-gray {
         width: 32rpx;
         height: 32rpx;
@@ -590,6 +606,7 @@ export default {
         font-weight: 600;
         margin-right: 10rpx;
       }
+
       .text-gray {
         color: #bbb;
         font-size: 26rpx;
@@ -597,31 +614,41 @@ export default {
       }
     }
   }
+
   .process-step-card:last-child {
     margin-right: 0;
   }
 }
+
 .divider {
   height: 1rpx;
   background: rgba(0, 0, 0, 0.05);
   margin: 0 30rpx;
 }
+
 .pickup-info {
   padding: 0 30rpx;
+
   .info-item {
     padding: 30rpx 0;
     border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
-    &:last-child { border-bottom: none; }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
     .label {
       font-size: 28rpx;
       color: #333;
       margin-bottom: 16rpx;
       display: block;
     }
+
     .value {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .text {
         flex: 1;
         font-size: 28rpx;
@@ -630,7 +657,11 @@ export default {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      .text.placeholder { color: #ccc; }
+
+      .text.placeholder {
+        color: #ccc;
+      }
+
       .arrow {
         color: #999;
         font-size: 28rpx;
@@ -639,27 +670,36 @@ export default {
     }
   }
 }
+
 .order-card {
   background: #fff;
   border-radius: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.04);
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
   margin-bottom: 20rpx;
+
   .order-items {
     padding: 0 30rpx;
+
     .order-item {
       display: flex;
       align-items: flex-start;
       padding: 30rpx 0;
       border-bottom: 1rpx solid #f5f5f5;
-      &:last-child { border-bottom: none; }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
       .item-left {
         position: relative;
         margin-right: 20rpx;
-        image { 
-          width: 80rpx; 
-          height: 80rpx; 
+
+        image {
+          width: 80rpx;
+          height: 80rpx;
           border-radius: 8rpx;
         }
+
         .brand-logo {
           position: absolute;
           bottom: -8rpx;
@@ -671,19 +711,23 @@ export default {
           background: #fff;
         }
       }
+
       .item-info {
         flex: 1;
+
         .name-brand-row {
           display: flex;
           align-items: center;
           flex-wrap: wrap;
           margin-bottom: 4rpx;
-          .name { 
-            font-size: 30rpx; 
-            color: #333; 
-            font-weight: 500; 
+
+          .name {
+            font-size: 30rpx;
+            color: #333;
+            font-weight: 500;
             margin-right: 12rpx;
           }
+
           .brand-tag {
             background: #FFE8CC;
             color: #FF9500;
@@ -693,47 +737,99 @@ export default {
             border: 1rpx solid #FFD4A0;
           }
         }
-        .desc { font-size: 24rpx; color: #999; margin: 4rpx 0 8rpx 0; }
+
+        .desc {
+          font-size: 24rpx;
+          color: #999;
+          margin: 4rpx 0 8rpx 0;
+        }
+
         .price-row {
           display: flex;
           align-items: center;
-          .price { color: #FF9500; font-size: 26rpx; margin-right: 10rpx; }
-          .count { color: #999; font-size: 24rpx; margin-right: 10rpx; }
-          .amount { color: #333; font-size: 28rpx; margin-left: auto; }
+
+          .price {
+            color: #FF9500;
+            font-size: 26rpx;
+            margin-right: 10rpx;
+          }
+
+          .count {
+            color: #999;
+            font-size: 24rpx;
+            margin-right: 10rpx;
+          }
+
+          .amount {
+            color: #333;
+            font-size: 28rpx;
+            margin-left: auto;
+          }
         }
       }
     }
   }
+
   .expand-btn {
     text-align: center;
     color: #999;
     font-size: 24rpx;
     padding: 10rpx 0;
-    .arrow { font-size: 20rpx; }
+
+    .arrow {
+      font-size: 20rpx;
+    }
   }
 }
+
 .agreement-bar {
   display: flex;
   align-items: center;
   background: #fffbe6;
   padding: 20rpx 30rpx;
   font-size: 24rpx;
+
   .checkbox {
-    width: 32rpx; height: 32rpx; border-radius: 50%; border: 2rpx solid #FFB74D;
-    margin-right: 10rpx; display: flex; align-items: center; justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    border: 2rpx solid #FFB74D;
+    margin-right: 10rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: #fff;
-    &.active { background: #FFB74D; color: #fff; }
+
+    &.active {
+      background: #FFB74D;
+      color: #fff;
+    }
+  }
+
+  .link {
+    color: #FFB74D;
   }
-  .link { color: #FFB74D; }
 }
+
 .bottom-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #fff;
   padding: 20rpx 30rpx calc(40rpx + env(safe-area-inset-bottom));
-  .summary { color: #666; font-size: 26rpx; }
-  .amount { color: #FF9500; font-size: 32rpx; font-weight: bold; margin-left: 10rpx; }
+
+  .summary {
+    color: #666;
+    font-size: 26rpx;
+  }
+
+  .amount {
+    color: #FF9500;
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-left: 10rpx;
+  }
+
   .main-btn {
     background: #FFB74D;
     color: #fff;
@@ -744,15 +840,20 @@ export default {
     height: 80rpx;
     display: flex;
     justify-content: center;
-    &[disabled] { opacity: 0.5; }
+
+    &[disabled] {
+      opacity: 0.5;
+    }
   }
 }
+
 .order-desc {
   color: #999;
   font-size: 22rpx;
   padding: 0 30rpx 20rpx 30rpx;
   line-height: 1.7;
 }
+
 .time-picker {
   position: fixed;
   left: 0;
@@ -760,6 +861,7 @@ export default {
   top: 0;
   bottom: 0;
   z-index: 1000;
+
   .mask {
     position: absolute;
     left: 0;
@@ -768,6 +870,7 @@ export default {
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
   }
+
   .picker-content {
     position: absolute;
     left: 0;
@@ -776,16 +879,19 @@ export default {
     background: #fff;
     border-radius: 20rpx 20rpx 0 0;
     padding-bottom: env(safe-area-inset-bottom);
+
     .picker-header {
       padding: 30rpx 0 0 0;
       display: flex;
       align-items: center;
       border-bottom: 1rpx solid #eee;
+
       .reset {
         color: #bbb;
         font-size: 28rpx;
         margin-left: 30rpx;
       }
+
       .title {
         flex: 1;
         text-align: center;
@@ -795,19 +901,25 @@ export default {
         margin-right: 60rpx;
       }
     }
+
     .picker-section {
       padding: 30rpx 30rpx 0 30rpx;
+
       .section-title {
         font-size: 28rpx;
         color: #222;
         margin-bottom: 20rpx;
       }
-      .date-btns, .time-btns {
+
+      .date-btns,
+      .time-btns {
         display: flex;
         flex-wrap: wrap;
         gap: 20rpx 20rpx;
       }
-      .date-btn, .time-btn {
+
+      .date-btn,
+      .time-btn {
         width: 200rpx;
         height: 70rpx;
         background: #f5f5f5;
@@ -820,13 +932,16 @@ export default {
         border: 2rpx solid transparent;
         margin-bottom: 10rpx;
       }
-      .date-btn.active, .time-btn.active {
+
+      .date-btn.active,
+      .time-btn.active {
         background: #fff;
         color: #FFB74D;
         border: 2rpx solid #FFB74D;
         font-weight: 500;
       }
     }
+
     .confirm-btn {
       margin: 40rpx 30rpx 30rpx 30rpx;
       height: 90rpx;
@@ -841,10 +956,11 @@ export default {
     }
   }
 }
+
 .process-title {
   font-size: 32rpx;
   font-weight: bold;
-  background: linear-gradient(to bottom,#fff3db 0%,#fffefb 40%);
+  background: linear-gradient(to bottom, #fff3db 0%, #fffefb 40%);
   color: #222;
   text-align: left;
   padding: 36rpx 0 24rpx 30rpx;
@@ -858,4 +974,4 @@ export default {
   border-color: #eee;
   pointer-events: none;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
index b9249e9..8656dd5 100644
--- a/uni.scss
+++ b/uni.scss
@@ -13,6 +13,7 @@
  */
 
 /* 颜色变量 */
+$uni-color: #000;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;