From 2a7b68b688d70d5d0911468097f9132e54b69af6 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Wed, 30 Jul 2025 18:43:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(QuickOrderEntry):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD=E5=B9=B6=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构悬浮按钮为可拖拽组件，支持保存位置到本地存储
移除固定位置的bottom属性，改为通过movable-area实现自由拖动
---
 components/QuickOrderEntry.vue | 100 ++++++++++++++++++++++++++++++-----------
 1 file changed, 75 insertions(+), 25 deletions(-)

diff --git a/components/QuickOrderEntry.vue b/components/QuickOrderEntry.vue
index 393fb70..556a7ec 100644
--- a/components/QuickOrderEntry.vue
+++ b/components/QuickOrderEntry.vue
@@ -1,19 +1,29 @@
 <template>
-    <view class="quick-order-container" 
-	:style="{bottom}"
-	@click="handleClick"
-	@longpress="handleLongPress">
-        <view class="new-message" v-if="innerHasNewMessage" @click.stop="goToOrderList">
-            你有新的快捷下单信息
-        </view>
-        <view class="quick-order">
-            <view class="number-order" v-if="innerMessageCount > 0">
-                {{ innerMessageCount }}
+    <movable-area class="movable-area">
+        <movable-view 
+            class="movable-view" 
+            :x="x" 
+            :y="y" 
+            direction="all"
+            @click="handleClick"
+            :animation="false"
+            :damping="200"
+            @change="handleChange"
+            @longpress="handleLongPress">
+            <view class="quick-order-container">
+                <view class="new-message" v-if="innerHasNewMessage" @click.stop="goToOrderList">
+                    你有新的快捷下单信息
+                </view>
+                <view class="quick-order">
+                    <view class="number-order" v-if="innerMessageCount > 0">
+                        {{ innerMessageCount }}
+                    </view>
+                    <image :src="imageUrl" mode=""></image>
+                    <view class="long-press-hint">长按查看更多</view>
+                </view>
             </view>
-            <image :src="imageUrl" mode=""></image>
-            <view class="long-press-hint">长按查看更多</view>
-        </view>
-    </view>
+        </movable-view>
+    </movable-area>
 </template>
 
 <script>
@@ -34,10 +44,7 @@ export default {
         autoFetch: {
             type: Boolean,
             default: true
-        },
-		bottom : {
-			default : '33vh',
-		}
+        }
     },
     data() {
         return {
@@ -45,10 +52,14 @@ export default {
             innerHasNewMessage: false,
             innerMessageCount: 0,
             isInitialized: false,
-            timer: null // 定时器ID
+            timer: null, // 定时器ID
+            x: 0, // 拖拽位置x
+            y: 0 // 拖拽位置y
         }
     },
 	mounted() {
+		// 初始化拖拽位置
+		this.initDragPosition()
 		this.getQuickOrderInfo()
         // 开启定时器，每30秒更新一次数据
         this.startTimer()
@@ -61,6 +72,29 @@ export default {
 		uni.$off('getQuickOrderInfo', this.getQuickOrderInfo)
     },
     methods: {
+        // 初始化拖拽位置
+        initDragPosition() {
+            // 尝试从本地存储恢复保存的位置
+            const savedPosition = uni.getStorageSync('quickOrderPosition')
+            
+            if (savedPosition && savedPosition.x !== undefined && savedPosition.y !== undefined) {
+                // 如果有保存的位置，使用保存的位置
+                this.x = savedPosition.x
+                this.y = savedPosition.y
+            }
+        },
+        
+        // 处理拖拽位置变化
+        handleChange(e) {
+            const { x, y, source } = e.detail
+            
+            // 只保存用户主动拖拽的位置，不保存系统自动调整的位置
+            if (source === 'touch') {
+                // 保存位置到本地存储
+                uni.setStorageSync('quickOrderPosition', { x, y })
+            }
+        },
+        
         // 处理点击事件
         async handleClick() {
             // 发出点击事件，便于父组件监听
@@ -208,16 +242,32 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.quick-order-container {
+.movable-area {
+    height: 100vh;
+    width: 750rpx;
+    top: 0;
     position: fixed;
-    right: 30rpx;
-    bottom: 30vh;
+    pointer-events: none; // 此处要加，鼠标事件可以渗透
     z-index: 99;
-    transition: transform 0.3s;
     
-    &:active {
-        transform: scale(0.95);
+    .movable-view {
+        width: 230rpx;
+        height: 160rpx;
+        pointer-events: auto; // 恢复鼠标事件
+        transition: transform 0.3s;
+        left: 600rpx;
+        top: 50%;
+        
+        &:active {
+            transform: scale(0.95);
+        }
     }
+}
+
+.quick-order-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
     
     .new-message {
         position: absolute;