From 37bbd05789b091462e2bb96b42d8a75c916a2042 Mon Sep 17 00:00:00 2001
From: Lj <1095098147@qq.com>
Date: Mon, 30 Jun 2025 15:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E2=80=98=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.js                                    |   2 +-
 pages/component/home.vue                     | 115 +++++++++++++++---
 pages/component/recycle.vue                  |  90 +++++++++++---
 pages/index/index.vue                        |   2 +-
 pages/subcomponent/promo-qrcode.vue          | 170 +++++++++++++--------------
 wxcomponents/privacy-popup/privacy-popup.vue |   6 +-
 6 files changed, 260 insertions(+), 125 deletions(-)

diff --git a/config.js b/config.js
index a1172f2..b78c2f0 100644
--- a/config.js
+++ b/config.js
@@ -1,5 +1,5 @@
 // config.js
-const type = 'local'
+const type = 'prod'
 
 const config = {
   local: {
diff --git a/pages/component/home.vue b/pages/component/home.vue
index 2d8e935..0266c69 100644
--- a/pages/component/home.vue
+++ b/pages/component/home.vue
@@ -3,11 +3,33 @@
 		<!-- 顶部banner -->
 		<view class="banner">
 			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" circular
-				style="width: 100%; height: 320rpx;">
+				style="width: 100%; height: 400rpx;">
 				<swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
-					<video v-if="item.type == 1" :src="item.voUrl" autoplay muted loop :controls="false"
-						:show-play-btn="false" :show-center-play-btn="false" object-fit="cover"
-						style="width: 100%; height: 100%;"></video>
+					<view v-if="item.type == 1" class="video-container" @click="playVideo(item, index)">
+						<video 
+							:id="`video-${index}`"
+							:src="item.voUrl" 
+							:autoplay="false" 
+							:muted="true" 
+							:loop="false" 
+							:controls="true"
+							:show-play-btn="true" 
+							:show-center-play-btn="true" 
+							:show-fullscreen-btn="true"
+							:enable-play-gesture="true"
+							object-fit="cover"
+							:poster="item.image || ''"
+							style="width: 100%; height: 100%;"
+							@fullscreenchange="onFullscreenChange"
+							@play="onVideoPlay(index)"
+							@pause="onVideoPause(index)"
+						></video>
+						<view v-if="!videoPlayingStates[index]" class="video-overlay">
+							<view class="play-button">
+								<uni-icons type="play-filled" size="60" color="#fff"></uni-icons>
+							</view>
+						</view>
+					</view>
 					<image v-else :src="item.image" mode="aspectFill" style="width: 100%; height: 100%;" />
 				</swiper-item>
 			</swiper>
@@ -171,6 +193,7 @@
 				processes: [],
 				priceList: [],
 				records: [],
+				videoPlayingStates: {}, // 记录每个视频的播放状态
 				destinations: [
 					// {
 					// 	icon: '/static/home/爱心援乡.png',
@@ -345,6 +368,30 @@
 				this.addressCion = address ? address.keyContent : '';
 				this.sbkCion = sbk ? sbk.keyContent : '';
 			},
+			
+			// 视频相关方法
+			playVideo(item, index) {
+				const videoContext = uni.createVideoContext(`video-${index}`, this);
+				if (this.videoPlayingStates[index]) {
+					// 如果正在播放，暂停视频
+					videoContext.pause();
+				} else {
+					// 如果未播放，开始播放
+					videoContext.play();
+				}
+			},
+			
+			onVideoPlay(index) {
+				this.$set(this.videoPlayingStates, index, true);
+			},
+			
+			onVideoPause(index) {
+				this.$set(this.videoPlayingStates, index, false);
+			},
+			
+			onFullscreenChange(e) {
+				console.log('全屏状态改变:', e.detail);
+			},
 			// 初始化页面数据的方法
 			initializePageData() {
 				const query = this.queryParams || {}
@@ -425,7 +472,7 @@
 
 	.banner {
 		width: 100%;
-		height: 330rpx;
+		height: 400rpx;
 		position: relative;
 		overflow: hidden;
 		border-radius: 0 0 30rpx 30rpx;
@@ -434,12 +481,43 @@
 			width: 100%;
 			height: 100%;
 		}
+		
+		.video-container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			
+			.video-overlay {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: rgba(0, 0, 0, 0.3);
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				z-index: 10;
+				
+				.play-button {
+					width: 120rpx;
+					height: 120rpx;
+					background: rgba(0, 0, 0, 0.6);
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					backdrop-filter: blur(10rpx);
+				}
+			}
+		}
 	}
 
 	.content {
 		// flex: 1;
 		width: 90%;
-		margin: -70rpx auto 0;
+		margin: -80rpx auto 0;
 		position: relative;
 		z-index: 3;
 		padding-bottom: 20rpx;
@@ -672,39 +750,42 @@
 			background-color: #fff8ea;
 
 			.item-icon {
-				width: 100rpx;
-				height: 100rpx;
-				margin-bottom: 10rpx;
+				width: 120rpx;
+				height: 120rpx;
+				margin-bottom: 12rpx;
 
 				&.placeholder {
-					width: 80rpx;
-					height: 80rpx;
-					margin-bottom: 10rpx;
+					width: 120rpx;
+					height: 120rpx;
+					margin-bottom: 12rpx;
 					background: #f5f5f5;
 					border-radius: 16rpx;
 				}
 			}
 
 			.item-name {
-				font-size: 26rpx;
+				font-size: 30rpx;
 				color: #333;
-				margin-bottom: 6rpx;
+				margin-bottom: 8rpx;
+				font-weight: 500;
 			}
 
 			.item-price {
 				font-family: PingFang SC;
-				font-weight: 400;
-				font-size: 24rpx;
+				font-weight: 600;
+				font-size: 28rpx;
 				line-height: 140%;
 				letter-spacing: 0%;
 				text-align: center;
+				color: #181818;
 
 				.item-price-right {
 					text-align: center;
-					font-size: 24rpx;
+					font-size: 26rpx;
 					color: #666;
 					line-height: 140%;
 					letter-spacing: 0%;
+					font-weight: 400;
 				}
 			}
 		}
diff --git a/pages/component/recycle.vue b/pages/component/recycle.vue
index 314c797..f7d952e 100644
--- a/pages/component/recycle.vue
+++ b/pages/component/recycle.vue
@@ -250,16 +250,15 @@
     </view>
 
     <!-- 回收规则弹窗 -->
-    <view v-if="showRulePopup" class="rule-popup-mask" @click.self="closeRulePopup">
+    <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-view class="rule-popup-content" scroll-y @scroll="onRuleContentScroll">
 		  <uv-parse :content="ruleHtml"></uv-parse>
+          <view class="rule-content-bottom-indicator"></view>
         </scroll-view>
-        <button class="rule-popup-btn" @click="closeRulePopup">我知道了</button>
-        <!-- <view class="rule-popup-close" @tap="closeRulePopup">
-          <uni-icons type="close" size="36" color="#fff" />
-        </view> -->
+        <view v-if="!hasScrolledToBottom" class="scroll-tip">请滚动到底部阅读完整内容</view>
+        <button class="rule-popup-btn" :class="{ disabled: !hasScrolledToBottom }" @click="closeRulePopup">我知道了</button>
       </view>
     </view>
 
@@ -361,6 +360,7 @@ export default {
       isUserBlacklisted: false, // 用户是否被拉黑
       currentProductId: null, // 当前查看品牌的商品ID
       searchTimer: null, // 搜索防抖定时器
+      hasScrolledToBottom: false, // 是否已滚动到底部
     }
   },
   computed: {
@@ -664,6 +664,9 @@ export default {
         return;
       }
       
+      // 重置滚动状态
+      this.hasScrolledToBottom = false;
+      
       // 获取回收规则富文本
       this.$api('getGoodsRecycleRule', { goodsId: item.id }, res => {
         if (res.code === 200 && res.result) {
@@ -692,16 +695,9 @@ export default {
         return
       }
       
-      if (this.totalCount < 3) {
+      if (this.totalCount < 3 || Number(this.totalPrice) < this.minMoney) {
         uni.showToast({
-          title: `各品类混合需要满3${this.totalUnitText}才能回收哦`,
-          icon: 'none'
-        })
-        return
-      }
-      if (Number(this.totalPrice) < this.minMoney) {
-        uni.showToast({
-          title: `回收总价需满${this.minMoney}元才能预约`,
+          title: `各品类混合需要满3${this.totalUnitText}并且各品类混合需要满${this.minMoney}元才能回收哦`,
           icon: 'none'
         })
         return
@@ -874,7 +870,18 @@ export default {
       this.showRulePopup = true
     },
     closeRulePopup() {
+      // 如果还没有滚动到底部，显示提示
+      if (!this.hasScrolledToBottom) {
+        uni.showToast({
+          title: '请阅读完整回收规则',
+          icon: 'none'
+        })
+        return
+      }
+      
       this.showRulePopup = false;
+      this.hasScrolledToBottom = false; // 重置滚动状态
+      
       // 如果是在等待品牌选择的状态下关闭规则弹窗，则接着打开品牌选择
       if (this.isWaitingForBrandSelection) {
         this.isWaitingForBrandSelection = false; // 清除等待状态
@@ -888,6 +895,29 @@ export default {
         this.showBrandPopup = true; // 打开品牌索引弹窗
       }
     },
+    
+    // 处理规则弹窗遮罩点击
+    handleRulePopupMaskClick() {
+      if (!this.hasScrolledToBottom) {
+        uni.showToast({
+          title: '请阅读完整回收规则',
+          icon: 'none'
+        })
+        return
+      }
+      this.closeRulePopup()
+    },
+    
+    // 监听规则内容滚动
+    onRuleContentScroll(e) {
+      const { scrollTop, scrollHeight, deltaY } = e.detail
+      const containerHeight = 500 // 大概的容器高度，单位rpx转换后的px
+      
+      // 判断是否滚动到底部（留一些余量）
+      if (scrollTop + containerHeight >= scrollHeight - 20) {
+        this.hasScrolledToBottom = true
+      }
+    },
     loadMoreGoods() {
       const categoryId = this.categories[this.currentCategory]?.id
       const page = (this.allProductsPage[categoryId] || 1) + 1
@@ -1951,8 +1981,9 @@ export default {
   justify-content: center;
 }
 .rule-popup {
-  width: 90vw;
-  max-width: 600rpx;
+  width: 95vw;
+  max-width: 750rpx;
+  max-height: 85vh;
   background: #fff;
   border-radius: 48rpx;
   box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
@@ -1972,7 +2003,8 @@ export default {
 }
 .rule-popup-content {
   width: 100%;
-  max-height: 420rpx;
+  max-height: 60vh;
+  min-height: 400rpx;
   padding: 0 40rpx;
   box-sizing: border-box;
   overflow-y: auto;
@@ -1983,6 +2015,21 @@ export default {
     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;
@@ -2025,12 +2072,19 @@ export default {
   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;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6b75338..cdcd2e0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -36,7 +36,7 @@
 		<!-- <view class="admin-login" @click="goToAdminLogin">管理员登录→</view> -->
 
 
-		<PrivacyPopup ref="privacyPopup" :needPhone="needPhone" @agree="handleAgreePrivacy"
+		<PrivacyPopup ref="privacyPopup" :needPhone="needPhone" :appName="logoName" @agree="handleAgreePrivacy"
 			@reject="handleRejectPrivacy" @open-protocol="openProtocol" />
 		<ProtocolDialog ref="protocolDialog" :show="showProtocolDialog" :title="protocolDialogTitle"
 			:content="protocolDialogContent" @close="showProtocolDialog = false" @agree="handleProtocolAgree"
diff --git a/pages/subcomponent/promo-qrcode.vue b/pages/subcomponent/promo-qrcode.vue
index 6af527a..1f02825 100644
--- a/pages/subcomponent/promo-qrcode.vue
+++ b/pages/subcomponent/promo-qrcode.vue
@@ -1,33 +1,32 @@
 <template>
 	<view class="promo-modal-page">
 		<!-- 顶部导航栏 -->
-		<view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
-			<view class="nav-bar-inner">
-				<view class="back-icon" @tap="navigateBack">
-					<uni-icons type="left" size="22" color="#222" />
-				</view>
-				<view class="nav-bar-title">推广链接</view>
-				<view class="nav-bar-right">
-					<uni-icons type="more-filled" size="22" color="#222" />
-				</view>
+		<view class="nav-bar">
+			<view class="back" @tap="navigateBack">
+				<uni-icons type="left" size="20" />
 			</view>
+			<text class="title">推广链接</text>
 		</view>
-		<!-- 用户信息 -->
-		<view class="user-info-modal" :style="{ marginTop: navBarTotalHeight + 'px' }">
-			<view class="avatar-frame">
-				<image class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
+		
+		<!-- 页面内容 -->
+		<view class="content">
+			<!-- 用户信息 -->
+			<view class="user-info-modal">
+				<view class="avatar-frame">
+					<image class="avatar-img" :src="userInfo.headImage || '/static/avatar.png'" mode="aspectFill" />
+				</view>
+				<view class="nickname">{{userInfo.nickName || '用户'}}</view>
+			</view>
+			<!-- 二维码区 -->
+			<view class="qrcode-modal-section">
+				<image class="qrcode-img" :src="qrcodeUrl" mode="widthFix" />
+				<!-- <view class="invite-code">邀请码：{{inviteCode}}</view> -->
+			</view>
+			<!-- 底部按钮 -->
+			<view class="bottom-btns-modal">
+				<button class="btn gray" open-type="share">分享给好友</button>
+				<button class="btn green" @tap="saveToAlbum">保存到本地</button>
 			</view>
-			<view class="nickname">{{userInfo.name}}</view>
-		</view>
-		<!-- 二维码区 -->
-		<view class="qrcode-modal-section">
-			<image class="qrcode-img" :src="qrcodeUrl" mode="widthFix" />
-			<!-- <view class="invite-code">邀请码：{{inviteCode}}</view> -->
-		</view>
-		<!-- 底部按钮 -->
-		<view class="bottom-btns-modal">
-			<button class="btn gray" open-type="share">分享给好友</button>
-			<button class="btn green" @tap="saveToAlbum">保存到本地</button>
 		</view>
 	</view>
 </template>
@@ -40,37 +39,28 @@
 		mixins: [pullRefreshMixin],
 		data() {
 			return {
-				statusBarHeight: 0,
-				navBarHeight: 44,
-				navBarTotalHeight: 44,
-				userInfo: {
-					avatar: '/static/avatar.png',
-					name: '战斗世界',
-				},
+				userInfo: {},
 				qrcodeUrl: '/static/qrcode.png',
 				inviteCode: '888888',
 			}
 		},
 		onLoad() {
-			const sysInfo = uni.getSystemInfoSync()
-			this.statusBarHeight = sysInfo.statusBarHeight
-			this.navBarHeight = 44
-			this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
-			// 可能要等待获取到数据
+			// 获取用户信息和二维码
+			this.fetchUserInfo()
 			this.getQrcode()
 		},
 		// 微信小程序分享配置
 		// #ifdef MP-WEIXIN
 		onShareAppMessage() {
 			return {
-				title: `${this.userInfo.name}邀请您一起参与旧衣回收`,
+				title: `${this.userInfo.nickName || '用户'}邀请您一起参与旧衣回收`,
 				path: `/pages/component/home?shareId=${this.inviteCode}`,
 				imageUrl: this.qrcodeUrl || '/static/share-default.png'
 			}
 		},
 		onShareTimeline() {
 			return {
-				title: `${this.userInfo.name}邀请您一起参与旧衣回收，环保从我做起！`,
+				title: `${this.userInfo.nickName || '用户'}邀请您一起参与旧衣回收，环保从我做起！`,
 				query: `shareId=${this.inviteCode}`,
 				imageUrl: this.qrcodeUrl || '/static/share-default.png'
 			}
@@ -85,6 +75,21 @@
 			navigateBack() {
 				uni.navigateBack()
 			},
+			// 获取用户信息
+			fetchUserInfo() {
+				if (uni.getStorageSync('token')) {
+					this.$api("getUserByToken", {}, (res) => {
+						if (res.code == 200) {
+							this.userInfo = res.result
+							// 更新邀请码
+							if (res.result.intentioCode) {
+								this.inviteCode = res.result.intentioCode
+							}
+						}
+					})
+				}
+			},
+			
             getQrcode(){
                 // 获取全局二维码路径
                 if (getApp().globalData.qr_path) {
@@ -171,64 +176,55 @@
 <style lang="scss" scoped>
 	.promo-modal-page {
 		min-height: 100vh;
-		background: linear-gradient(to bottom, #f6fff2 0%, #fff 100%);
+		background: #f8f8f8;
+		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
+		overflow: hidden;
+		height: 100vh;
+	}
+
+	.nav-bar {
 		display: flex;
-		flex-direction: column;
 		align-items: center;
-		position: relative;
-
-		.nav-bar {
-			position: fixed;
-			top: 0;
-			left: 0;
-			right: 0;
-			z-index: 1000;
-			width: 100vw;
-			background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
-			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+		height: calc(150rpx + var(--status-bar-height));
+		padding: 0 32rpx;
+		padding-top: var(--status-bar-height);
+		background: #fff;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		box-sizing: border-box;
 
-			.nav-bar-inner {
-				display: flex;
-				align-items: center;
-				height: 44px;
-				width: 100vw;
-				position: relative;
-			}
-
-			.back-icon,
-			.nav-bar-right {
-				width: 44px;
-				height: 44px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: absolute;
-				top: 0;
-			}
-
-			.back-icon {
-				left: 0;
-			}
-
-			.nav-bar-right {
-				right: 0;
-			}
+		.back {
+			padding: 20rpx;
+			margin-left: -20rpx;
+		}
 
-			.nav-bar-title {
-				flex: 1;
-				text-align: center;
-				font-size: 36rpx;
-				font-weight: bold;
-				color: #222;
-				letter-spacing: 2rpx;
-				line-height: 44px;
-			}
+		.title {
+			flex: 1;
+			text-align: center;
+			font-size: 34rpx;
+			font-weight: 500;
+			color: #222;
 		}
+	}
+
+	.content {
+		padding: 30rpx 0 0 0;
+		margin-top: calc(150rpx + var(--status-bar-height) + 80rpx);
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		overflow: hidden;
+		box-sizing: border-box;
 
 		.user-info-modal {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			margin-bottom: 48rpx;
 
 			.avatar-frame {
 				width: 104rpx;
@@ -256,11 +252,11 @@
 		}
 
 		.qrcode-modal-section {
-			margin-top: 48rpx;
 			width: 300rpx;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			margin-bottom: 48rpx;
 
 			.qrcode-img {
 				width: 100%;
diff --git a/wxcomponents/privacy-popup/privacy-popup.vue b/wxcomponents/privacy-popup/privacy-popup.vue
index 7a70cd2..67a9fbc 100644
--- a/wxcomponents/privacy-popup/privacy-popup.vue
+++ b/wxcomponents/privacy-popup/privacy-popup.vue
@@ -6,7 +6,7 @@
       
       <!-- 内容 -->
       <view class="popup-content">
-        在你使用瀚海回收服务之前，请仔细阅读
+        在你使用{{ appName || '瀚海回收' }}服务之前，请仔细阅读
         <text class="highlight" @click="openProtocol('service')">《用户服务协议》</text>
         和
         <text class="highlight" @click="openProtocol('privacy')">《隐私政策》</text>
@@ -39,6 +39,10 @@ export default {
     needPhone: {
       type: Boolean,
       default: false
+    },
+    appName: {
+      type: String,
+      default: '瀚海回收'
     }
   },
   methods: {