From 3371b2b3d8083bd6e0ebeb397fdca818c7ae6e52 Mon Sep 17 00:00:00 2001
From: wangdong <1551135706@qq.com>
Date: Fri, 10 May 2024 13:34:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/squareDynamic/index.vue | 103 ++++++++++++++++++++++++++++++++--
 1 file changed, 99 insertions(+), 4 deletions(-)

diff --git a/pages/squareDynamic/index.vue b/pages/squareDynamic/index.vue
index 8f24a63..a1d7472 100644
--- a/pages/squareDynamic/index.vue
+++ b/pages/squareDynamic/index.vue
@@ -46,7 +46,15 @@
 			  <image mode="aspectFill" src="@/static/empty.png" alt="暂无动态" />
 			  <view>暂无动态</view>
 			</view>
-			<view class="publish" @click="publish">
+			<view
+				id="publish"
+				class="publish"
+				:style="{'left': left === 0 ? '626rpx' : left + 'px', 'top': top === 0 ? 'calc(100% - 300rpx)' : top + 'px'}"
+				@touchmove.stop.prevent="touchmove"
+				@touchend="touchend"
+				@click="publish"
+				:class="{transition: !isMove }"
+			>
 				<image src="/static/publish.png" mode="aspectFill"></image>
 				<text>发布</text>
 			</view>
@@ -58,6 +66,8 @@
 	import * as Api from '@/api/squareDynamic/index.js'
 	
 	export default {
+		components: {
+		},
 		data() {
 			return {
 				tabList: ['推荐', '精选', '晒单', '日常', '文章'],
@@ -88,6 +98,16 @@
 				loading: false,
 				finished: false,
 				showFullCont: [],
+				top:0,
+				left:0,
+				width: 0,
+				height: 0,
+				offsetWidth: 0,
+				offsetHeight: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				isMove: true,
+				edge: 20,
 			};
 		},
 		watch: {
@@ -104,8 +124,20 @@
 				frontColor: '#000000',
 				backgroundColor: '#E7F1FC',
 			});
-			console.log(this.dynamicList, this.dynamicList[0]);
 			this.getDynamicList();
+			const sys = uni.getSystemInfoSync();
+			this.windowWidth = sys.windowWidth;
+			this.windowHeight = sys.windowHeight;
+			if (sys.windowTop) {
+				this.windowHeight += sys.windowTop;
+			}
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#publish').boundingClientRect(data => {
+				this.width = data.width;
+				this.height = data.height;
+				this.offsetWidth = data.width / 2;
+				this.offsetHeight = data.height / 2;
+			}).exec();
 		},
 		methods: {
 			async getDynamicList() {
@@ -203,6 +235,69 @@
 					url: '/pages/squareDynamic/publish',
 				})
 			},
+			spred(e){
+				const 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();
+			},
+			touchmove(e) {
+				// 单指触摸
+				if (e.touches.length !== 1) {
+					return false;
+				}
+				this.isMove = true;
+				this.isShow=false
+				this.spred()
+				this.left = e.touches[0].clientX - this.offsetWidth;
+				let clientX = e.touches[0].clientX;
+				let clientY = e.touches[0].clientY - this.offsetHeight;
+				let edgeBottom = this.windowHeight - this.height - this.edge;
+				// 左右触及边界
+				if (clientX < this.edge) {
+					this.left = this.edge;
+				} else if (clientX > this.windowWidth - this.offsetWidth - this.edge) {
+					this.left = this.windowWidth - this.width - this.edge;
+				} else {
+					this.left = clientX - this.offsetWidth;
+				}
+				// 上下触及边界
+				if (clientY < this.edge) {
+					this.top = this.edge;
+				} else if (clientY > edgeBottom) {
+					this.top = edgeBottom;
+				} else {
+					this.top = clientY
+				}
+				
+			},
+			touchend(e) {
+				if (this.isDock) {
+					let edgeRigth = this.windowWidth - this.width - this.edge;
+					
+					if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+						this.left = this.edge;
+					} else {
+						this.left = edgeRigth;
+					}
+					if(this.left>200){
+						this.postitionName=false
+					}else{
+						this.postitionName=true
+					}
+				}
+				
+				this.isMove = false;
+			},
 		},
 	};
 </script>
@@ -356,8 +451,8 @@
 			}
 			.publish {
 				position: fixed;
-				right: 24rpx;
-				bottom: 140rpx;
+				left: 626rpx;
+				top: calc(100% - 300rpx);
 				width: 100rpx;
 				height: 100rpx;
 				background: #F34A40;