From 73be4f7d731a3ffc3b29db27df8c3b106c89d6d5 Mon Sep 17 00:00:00 2001
From: xuchao <jacobxu666@gmail.com>
Date: Tue, 21 Jul 2026 11:15:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=97=E8=A1=A8=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=20+=20=E6=82=AC=E6=B5=AE=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=94=BE=E5=A4=A7=E5=B9=B6=E7=9B=B4=E8=BE=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实测修正（桌面+手机双端验证）：
1 列表左右宽度一致：宽屏下页面列居中、两侧等宽灰底加阴影。
  踩坑：uni-page-body 框架默认 display:inline，使 width/margin 失效，需先改 block；
  且居中宽度不能用 rpx（750rpx 恒等于整屏宽，会被编译成当前视口宽），改用固定 375px
  （等于框架 >768px 锁定的 rpx 基准）；body 底色加 important 压过页面级 page 背景。
2 悬浮订单按钮：整体放大 25%（80upx 改 100upx），单击直达门票订单列表，
  去掉先点订单再点门票的两步展开菜单；保留拖拽并正确区分拖拽与点击；
  清理因此废弃的展开逻辑与无用 imgLists。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App.vue                                       |  14 +-
 .../gmy-float-touch/gmy-float-touch.vue       | 228 +++++-------------
 pages/ticket/scenic.vue                       |   5 +-
 3 files changed, 70 insertions(+), 177 deletions(-)

diff --git a/App.vue b/App.vue
index a3de6f0..77d3ad3 100644
--- a/App.vue
+++ b/App.vue
@@ -53,15 +53,21 @@
 	// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
 	@media screen and (min-width: 769px) {
 		body {
-			background: #dfe4ea;
+			// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
+			background: #dfe4ea !important;
 		}
 
 		uni-page-body {
-			// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
-			width: 750rpx !important;
+			// xuchao: 框架默认 uni-page-body 为 display:inline，会使 width/margin 失效，先改 block
+			display: block !important;
+			// 不能用 rpx —— 750rpx 恒等于"整屏宽"，编译后会变成当前视口宽度而无法居中。
+			// 框架在 >768px 时把 rpx 基准锁在 375（rpxCalcBaseDeviceWidth 默认值），
+			// 故页面内容宽即 375px，这里用固定 375px 覆盖框架默认 width:100% 实现居中。
+			width: 375px !important;
 			margin: 0 auto !important;
 			min-height: 100vh;
-			box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14);
+			overflow-x: hidden;
+			box-shadow: 0 0 24px rgba(31, 45, 61, 0.14);
 		}
 	}
 	/* #endif */
diff --git a/components/gmy-float-touch/gmy-float-touch.vue b/components/gmy-float-touch/gmy-float-touch.vue
index d7ceae5..aac31df 100644
--- a/components/gmy-float-touch/gmy-float-touch.vue
+++ b/components/gmy-float-touch/gmy-float-touch.vue
@@ -1,205 +1,95 @@
 <template name="gmy-float-touch">
-	<view>
-		<view @touchmove.stop.prevent = "doNothing" >
-			<view class="box"  style="z-index: 999;" @click="show" :style="{top:top+'px',left:left + 'px'}" @touchmove="touchmove" @touchend="touchend">
-				<image :src="mainImg" mode="aspectFill"  :animation="animationData" ></image>
-				<!-- <text style="font-size: 20rpx;color: #fff;">订单</text> -->
-			</view>
-			<!-- <view class="menu  " :class="{menu0:!isShow&&isleft,menu1:isShow&&isleft ,menu1R:isShow&& !isleft ,menu0R:!isShow&& !isleft}" :style="{top:(top-75)  +'px'}" @tap="menuClick(1)" >
-				<image :src="imgLists[0]" mode=""></image>
-			</view> -->
-			<!-- xuchao: 质惠游一期只有门票模块，仅保留"门票订单"菜单项 -->
-			<view class="menu " :class="{menu0:!isShow&&isleft,menu4:isShow&&isleft ,menu4R:isShow&& !isleft ,menu0R:!isShow&& !isleft}"  :style="{top:top+'px'}" @tap="menuClick(4)">
-				<image :src="imgLists[3]" mode="aspectFill"></image>
-			</view>
+	<!-- xuchao: 直接显示"门票订单"悬浮按钮 —— 单击直达订单列表，仍可拖拽换位 -->
+	<view @touchmove.stop.prevent="doNothing">
+		<view class="box" style="z-index: 999;" :style="{top:top+'px',left:left+'px'}"
+			@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @click="onTap">
+			<image :src="mainImg" mode="aspectFill"></image>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default{
-		name:"gmy-float-touch",
-		data(){
+	export default {
+		name: "gmy-float-touch",
+		data() {
 			return {
-				isShow:false,
-				top:500,
-				left:3,
-				right:3,
-				isleft:true,
-				animationData:''
+				top: 500,
+				left: 3,
+				moved: false, // xuchao: 区分拖拽与点击，拖拽时不触发跳转
+				startX: 0,
+				startY: 0
 			}
 		},
-		props:{
-			imgLists:{
-				type:Array
-			},
-			mainImg:{
-				type:String,
-				default:"../../static/main.png"
+		props: {
+			mainImg: {
+				type: String,
+				default: "../../static/main.png"
 			}
 		},
-		methods:{
-			doNothing:function(){},
-			show:function(){
-				this.isShow = !this.isShow;
-				this.spred();
+		methods: {
+			doNothing: function() {},
+			// xuchao: 点击悬浮球直接派发订单事件（无需先展开菜单）
+			onTap: function() {
+				if (this.moved) {
+					this.moved = false
+					return
+				}
+				this.$emit("menuClick", 4)
 			},
-			touchmove:function(e){
-				if(this.isShow){
-					return 
-				}
-				var position = e.touches[0];
-				var wHeight = this.getSystemInfo('H');
-				if(position.pageY>50 && position.pageY+50 < wHeight){
-					this.top =  position.pageY-20;
-				}
-				this.left = position.pageX;
+			touchstart: function(e) {
+				this.moved = false
+				this.startX = e.touches[0].pageX
+				this.startY = e.touches[0].pageY
 			},
-			touchend:function(e){
-				var wWidth = this.getSystemInfo('W');
-				const pageX = e.changedTouches[0].clientX;
-				if(pageX > wWidth*0.5){
-					this.isleft = false;
-					this.left = wWidth-50;
+			touchmove: function(e) {
+				var position = e.touches[0]
+				// 移动超过阈值才视为拖拽，避免轻触误判
+				if (Math.abs(position.pageX - this.startX) > 5 || Math.abs(position.pageY - this.startY) > 5) {
+					this.moved = true
 				}
-				else{
-					this.isleft = true;
-					this.left = 3;
+				var wHeight = this.getSystemInfo('H')
+				if (position.pageY > 50 && position.pageY + 60 < wHeight) {
+					this.top = position.pageY - 25
 				}
-				
+				this.left = position.pageX - 25
 			},
-			menuClick:function(index){
-				this.$emit("menuClick",index);
-			},
-			getSystemInfo:function(type){
-				var result;
-				const screen = uni.getSystemInfoSync();
-				const wHeight = screen.windowHeight;
-				const wWidth = screen.windowWidth;
-				switch(type){
-					case 'H':result =  wHeight;break;
-					case 'W':result = wWidth;break;
-					default: result = 'Err';			
-				}
-				return result;
-			},
-			spred:function(e){
-				var animation = uni.createAnimation({
-				  duration: 200,
-					timingFunction: 'ease',
-				});
-				this.animationData = animation.export();
-				
-				if(this.isShow){
-					animation.rotate(135).step();
-				}
-				else{
-					animation.rotate(0).step();
-				}
-				this.animationData = animation.export();
+			touchend: function(e) {
+				var wWidth = this.getSystemInfo('W')
+				// 松手时吸附到较近的一侧屏幕边缘
+				this.left = e.changedTouches[0].clientX > wWidth * 0.5 ? wWidth - 56 : 3
 			},
+			getSystemInfo: function(type) {
+				const screen = uni.getSystemInfoSync()
+				return type === 'H' ? screen.windowHeight : screen.windowWidth
+			}
 		}
 	}
-	
 </script>
 
 <style lang="scss">
-	image{
-		width: 80upx;
-		height: 80upx;
-		z-index: 99;
-		// margin:10upx 20upx 10upx 20upx;
-	}
-	.box{
+	// xuchao: 按钮整体放大 25%（原 80upx → 100upx）
+	.box {
 		position: fixed;
-		left: 5upx;
+		left: 3upx;
 		top: 70%;
-		width: 80upx;
-		height: 80upx;
-		// border-radius: 50%;
+		width: 100upx;
+		height: 100upx;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		// background-color: rgba($color: #777, $alpha: 0.4);
 	}
-	.menu{
-		color:white;
-		position: fixed;
-		width: 80upx;
-		height: 80upx;
-		// border-radius: 50%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		// background-color: rgba($color: #777, $alpha: 0.4);
-	}
-	.menu0{
-		left: 5upx;
-		opacity: 0;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu1{
-		left: 20upx;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu2{
-		left: 10upx;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu3{
-		left: 205upx;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu4{
-		left: 106upx;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu5{
-		left: 5upx;
-		transition: top 0.2s, left 0.2s, opacity 0.2s;
-	}
-	.menu0R{
-		right: 10upx;
-		opacity: 0;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
-		
-	}
-	.menu1R{
-		right: 20upx;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
-	}
-	.menu2R{
-		right: 20upx;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
-	}
-	.menu3R{
-		right: 210upx;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
-	}
-	.menu4R{
-		right: 106upx;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
-	}
-	.menu5R{
-		right: 20upx;
-		transition: top 0.2s, right 0.2s, opacity 0.2s;
+
+	.box image {
+		width: 100upx;
+		height: 100upx;
+		z-index: 99;
 	}
 
 	/* #ifdef H5 */
-	// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
+	// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮按钮同步锚定到列左缘，避免脱离页面
 	@media screen and (min-width: 769px) {
 		.box {
-			left: calc(50vw - 184px) !important;
-		}
-		.menu0, .menu0R {
-			left: calc(50vw - 184px) !important;
-			right: auto !important;
-		}
-		.menu4, .menu4R {
-			left: calc(50vw - 134px) !important;
-			right: auto !important;
+			left: calc(50vw - 182px) !important;
 		}
 	}
 	/* #endif */
diff --git a/pages/ticket/scenic.vue b/pages/ticket/scenic.vue
index 2c1819f..b8d9095 100644
--- a/pages/ticket/scenic.vue
+++ b/pages/ticket/scenic.vue
@@ -50,7 +50,7 @@
 		<u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label"
 			@confirm='typeConfirm'></u-picker>
 		<!-- xuchao: 订单悬浮按钮 -->
-		<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
+		<gmy-float-touch :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
 	</view>
 </template>
 
@@ -65,9 +65,6 @@
 		data() {
 			return {
 				mainImg: "../../static/logo4.png",
-				imgLists: ["../../static/logo1.png", "../../static/logo2.png", "../../static/logo3.png",
-					"../../static/logo3.png", "../../static/logo5.png"
-				],
 				status: 'loadmore',
 				keyword: '',
 				transform: 'rotate(0deg)',