feat: 更新增加任务按钮

src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "",
-    "appid" : "",
+    "appid" : "wx3938d1aaf05e6bc7",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",

src/pages/index/index.vue

@@ -54,6 +54,10 @@ import { loadTasks } from "@/utils/task";
 import type { ITask } from "@/utils/task";
 import { getStreak, isChecked, toggleCheck } from '@/utils/check'
 import { calcEndTime } from "@/utils";
+import { share } from '@/utils/share'
+
+const { onShareAppMessage } = share()
+onShareAppMessage()
 
 defineOptions({ name: 'Home' })
 

src/pages/user/index.vue

@@ -37,9 +37,9 @@
       </view>
     </wd-card>
 
-    <view class="px-3">
+    <liu-drag-button v-if="fabVisible" @clickBtn="openAdd">
-      <wd-button block @click="openAdd">新增任务</wd-button>
+      <wd-icon name="plus" size="24px"></wd-icon>
-    </view>
+    </liu-drag-button>
 
     <wd-popup
         v-model="popupVisible"
@@ -47,6 +47,7 @@
         :safe-area-inset-bottom="true"
         :close-on-click-modal="true"
         custom-style="border-radius: 32rpx 32rpx 0 0; padding: 40rpx 32rpx"
+        @close="handeClosePopup"
     >
       <view class="flex flex-col max-h-[70vh] overflow-y-auto">
         <!-- 标题 -->
@@ -131,6 +132,7 @@ import { calcEndTime } from "@/utils";
 
 const taskList = ref<ITask[]>([])
 const popupVisible = ref(false)
+const fabVisible = ref(true)
 const popupMode = ref<'add' | 'edit'>('add')
 const showTimePicker = ref(false)
 
@@ -166,6 +168,7 @@ function loadData() {
 }
 
 function openAdd() {
+  fabVisible.value = false
   popupMode.value = 'add'
   data.form = {
     id: Date.now(),
@@ -178,6 +181,7 @@ function openAdd() {
 }
 
 function openEdit(task: ITask) {
+  fabVisible.value = false
   data.form = {
     id: task.id,
     title: task.title,
@@ -202,8 +206,16 @@ function onDelete(id: number) {
   })
 }
 
+function handeClosePopup() {
+  setTimeout(() => {
+    fabVisible.value = true
+  }, 300)
+}
+
+
 function cancelClick() {
   popupVisible.value = false
+  handeClosePopup()
 }
 
 function saveClick() {

src/uni_modules/liu-drag-button_1.0.5/changelog.md

@@ -0,0 +1,12 @@
+## 1.0.5（2023-07-13）
+优化
+## 1.0.4（2023-06-08）
+增加预览二维码
+## 1.0.3（2023-05-31）
+增加license
+## 1.0.2（2023-04-28）
+优化
+## 1.0.1（2023-04-26）
+增加示例
+## 1.0.0（2023-04-26）
+初始化发布

src/uni_modules/liu-drag-button_1.0.5/components/liu-drag-button/liu-drag-button.vue

@@ -0,0 +1,143 @@
+<template>
+	<view>
+		<movable-area class="movable-area" :scale-area="false">
+			<movable-view class="movable-view" :class="!isRemove?'animation-info':''" style="pointer-events: auto;"
+                    :style="{ background: background }"
+				@click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="all"
+				inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100">
+				<slot></slot>
+			</movable-view>
+		</movable-area>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+      background: {
+        type: String,
+        default: "#8b5cf6"
+      },
+			//是否禁用拖动
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			//是否自动停靠
+			canDocking: {
+				type: Boolean,
+				default: true
+			},
+			//按钮默认位置离底部距离（px）
+			bottomPx: {
+				type: Number,
+				default: 30
+			},
+			//按钮默认位置离右边距离（px）
+			rightPx: {
+				type: Number,
+				default: 0
+			},
+		},
+		data() {
+			return {
+				left: 0,
+				top: 0,
+				isRemove: true,
+				windowWidth: 0,
+				windowHeight: 0,
+				btnWidth: 0,
+				btnHeight: 0,
+				x: 10000,
+				y: 10000,
+				old: {
+					x: 0,
+					y: 0
+				}
+			};
+		},
+		mounted() {
+			this.getSysInfo()
+		},
+		methods: {
+			getSysInfo() {
+				let sysInfo = uni.getSystemInfoSync()
+				this.windowWidth = sysInfo.windowWidth
+				this.windowHeight = sysInfo.windowHeight
+				let view = uni.createSelectorQuery().in(this).select(".movable-view")
+				view.boundingClientRect(rect => {
+					this.btnWidth = rect.width
+					this.btnHeight = rect.height
+					this.x = this.old.x
+					this.y = this.old.y
+					this.$nextTick(res => {
+						this.x = this.windowWidth - this.btnWidth - this.rightPx
+						this.y = this.windowHeight - this.btnHeight - this.bottomPx
+					})
+				}).exec()
+			},
+			//移动按钮
+			onChange(e) {
+				this.old.x = e.detail.x
+				this.old.y = e.detail.y
+			},
+			//开始移动
+			touchstart(e) {
+				this.isRemove = true
+			},
+			//结束移动
+			touchend(e) {
+				if (this.canDocking && this.old.x) {
+					this.x = this.old.x
+					this.y = this.old.y
+					let bWidth = (this.windowWidth - this.btnWidth) / 2
+					if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
+						this.$nextTick(res => {
+							this.x = 0
+						})
+					} else {
+						this.$nextTick(res => {
+							this.x = this.windowWidth - this.btnWidth
+						})
+					}
+					this.isRemove = false
+				}
+			},
+			//点击按钮
+			clickBtn() {
+				this.$emit('clickBtn')
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.movable-view {
+		width: 100rpx;
+		height: 100rpx;
+    box-shadow: 0px 4rpx 12rpx 0px rgba(15, 23, 42, 0.08);
+		border-radius: 50rpx;
+		color: #FFFFFF;
+		font-size: 26rpx;
+		touch-action: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.animation-info {
+		transition: left .25s ease;
+	}
+
+	.movable-area {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999999 !important;
+		pointer-events: none;
+	}
+</style>

src/uni_modules/liu-drag-button_1.0.5/license.md

@@ -0,0 +1,6 @@
+### 1、本插件可免费下载使用；
+### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
+### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
+### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
+
+

src/uni_modules/liu-drag-button_1.0.5/package.json

@@ -0,0 +1,85 @@
+{
+	"id": "liu-drag-button",
+	"displayName": "可拖动悬浮按钮",
+	"version": "1.0.5",
+	"description": "可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，使用相当简单，源码简单易修改。",
+	"keywords": [
+        "悬浮按钮",
+        "拖拽按钮",
+        "拖动",
+        "按钮",
+        "拖拽"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.1.0"
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "u"
+				},
+				"App": {
+					"app-vue": "u",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "u",
+					"IE": "u",
+					"Edge": "u",
+					"Firefox": "u",
+					"Safari": "u"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

src/uni_modules/liu-drag-button_1.0.5/readme.md

@@ -0,0 +1,36 @@
+# liu-drag-button适用于uni-app项目的可拖动悬浮按钮组件
+### 本组件目前兼容微信小程序、H5
+### 本组件是可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，源码简单易修改
+# --- 扫码预览、关注我们 ---
+
+## 扫码关注公众号，查看更多插件信息，预览插件效果！ 
+
+![](https://uni.ckapi.pro/uniapp/publicize.png)
+
+### 使用方式	
+``` html
+<liu-drag-button @clickBtn="clickBtn">按钮</liu-drag-button>
+```
+``` javascript
+export default {
+	data() {
+		return {
+			
+		};
+	},
+	methods: {
+		//点击按钮
+		clickBtn(){
+			console.log('按钮被点击了')
+		},
+	}
+}
+```
+
+### 属性说明
+| 名称                         | 类型            | 默认值                | 描述             |
+| ----------------------------|--------------- | ------------------ | ---------------|
+| disabled                    | Boolean        | false              | 是否禁用拖动
+| canDocking                  | Boolean        | true               | 是否自动停靠
+| bottomPx                    | Number         | 30                 | 按钮默认位置离底部距离（px）
+| rightPx                     | Number         | 0                  | 按钮默认位置离右边距离（px）

src/utils/share.ts

@@ -0,0 +1,12 @@
+export function share(title = '一起来记录打卡') {
+  return {
+    onShareAppMessage() {
+      const pages = getCurrentPages()
+      return {
+        title,
+        path: `/${pages[pages.length - 1].route}`,
+        imageUrl: '/static/logo.png'
+      }
+    }
+  }
+}