添加smh-countDown倒计时组件

uni_modules/smh-countDown/changelog.md

@@ -0,0 +1,29 @@
+## 1.0.10（2022-10-31）
+修复了APP的bug
+## 1.0.9（2022-10-28）
+修复了微信小程序无法从12点倒计时bug，增加文字动态提示功能
+## 1.0.8（2022-10-27）
+修复了倒计时的位置，从12点开始倒计时
+## 1.0.7（2022-10-25）
+修复了动态设置时间无效果bug，和初始化四分之一图形bug
+## 1.0.6（2021-09-27）
+bug修复
+## 1.0.5（2021-09-27）
+修改H5和APP端报错的问题
+## 1.0.4（2021-08-09）
+更新暂时和继续的功能，使用refs调用，定时器改为了一个，确保了时间倒计时和圆形倒计时的一致性
+
+## 1.0.1（2021-05-20）
+更新一些属性和事件的详细用法
+
+## 1.0.2（2021-07-20）
+增加了刷新组件重新开始的ref方法
+
+## 1.0.3（2021-07-23）
+更新了刷新的方法
+
+## 1.0.4（2021-08-09）
+更新暂时和继续的功能，使用refs调用，定时器改为了一个，确保了时间倒计时和圆形倒计时的一致性
+
+
+

uni_modules/smh-countDown/components/smh-countDown/smh-countDown.vue

@@ -0,0 +1,251 @@
+<template>
+	<view class="flex" :style="{width:radius+'rpx',height:radius+'rpx'}">
+		<text class="second" :style="{fontSize:fontSize+'rpx'}" :class="{font:classStatus}">{{second1}}</text>
+		<canvas type="2d" style="width: 100%;height:100%; " id="countDown" canvas-id="countDown"></canvas>
+	</view>
+</template>
+<script>
+	export default{
+		props:{
+			radius:{
+				type:Number,
+				default:100
+			},
+			second:{
+				type:Number,
+				default:10
+			},
+			fontSize:{
+				type:Number,
+				default:30
+			},
+			color:{
+				type:String,
+				default:'#0A84FF'
+			},
+			bgcolor:{
+				type:String,
+				default:'#f2f2f2'
+			},
+			lineWidth:{
+				type:Number,
+				default:5
+			}
+		},
+		watch:{
+			second:function(){
+				this.second1=this.second
+				this.millisecond = this.second1*5
+				this.process = 1/this.millisecond
+				clearInterval(this.time)
+				clearInterval(this.time1)
+				this.index=1
+				this.index1=1
+				this.pauseStatus=false
+				this.countDown()
+			}
+		},
+		data(){
+			return{
+				second1:this.second,
+				second_copy:this.second,
+				index:1,
+				time:null,
+				time1:null,
+				index1:1,
+				millisecond:null,
+				process:null,
+				pauseStatus:false,
+				ctx:null,
+				center:0,
+				classStatus:false,
+				width:null,
+				height:null,
+				dpr:null,
+				rorateStatus:false
+			}
+		},
+		// #ifdef H5 || APP-PLUS
+		onReady() {
+			this.millisecond = this.second1*5
+			this.process = 1/this.millisecond
+			this.init().then(res=>{
+				this.countDown()
+			})
+		},
+		// #endif
+		mounted(){
+			this.millisecond = this.second1*5
+			this.process = 1/this.millisecond
+			this.init().then(res=>{
+				this.countDown()
+			})
+		},
+		methods:{
+			init(){
+				return new Promise((resolve,reject)=>{
+					let that = this
+					// #ifdef APP-PLUS || H5
+					const query= uni.createSelectorQuery().in(this);
+					// #endif
+					
+					// #ifdef MP 
+					const query = this.createSelectorQuery()
+					// #endif
+					query.select('#countDown')
+					  .fields({ node: true, size: true})
+					  .exec((res) => {
+						 // #ifdef MP
+						 const canvas = res[0].node
+						 // #endif
+						
+						// #ifdef H5 || APP-PLUS
+						 const canvas = uni.createCanvasContext('countDown', that);
+						// #endif
+						
+						// #ifdef H5 || APP-PLUS
+						const ctx = uni.createCanvasContext('countDown', that);
+						// #endif
+						
+						// #ifdef MP
+						const ctx = canvas.getContext('2d')
+						// #endif
+						
+						let height = res[0].height
+						let width = res[0].width
+						let center = parseInt(width/2)
+						that.center=center
+						let dpr = uni.getSystemInfoSync().pixelRatio
+						// #ifdef H5
+						dpr=1
+						// #endif
+						canvas.width = res[0].width*dpr
+						canvas.height = res[0].height*dpr
+						that.width=width
+						that.height=height
+						that.dpr=dpr
+						ctx.scale(dpr, dpr)
+						that.ctx=ctx
+						resolve('1')
+					})
+				})
+			},
+			countDown(){
+				if(this.index1==1){
+					this.ctx.beginPath()
+					
+					this.ctx.translate(this.center,this.center)
+					// #ifdef MP || APP-PLUS
+					if(!this.rorateStatus){
+						this.ctx.rotate(-90 * Math.PI / 180)
+					}
+					// #endif
+					
+					// #ifdef H5
+					this.ctx.rotate(-90 * Math.PI / 180)
+					// #endif
+					
+					this.ctx.translate(-this.center,-this.center)
+					this.ctx.arc(this.center,this.center, this.center-5, 0, 2 * Math.PI,false)
+					this.rorateStatus=true
+					
+					// #ifdef MP
+					this.ctx.strokeStyle=this.color
+					this.ctx.lineWidth=this.lineWidth
+					this.ctx.stroke()
+					// #endif
+					
+					// #ifdef H5 || APP-PLUS
+					this.ctx.setStrokeStyle(this.color)
+					this.ctx.setLineWidth(this.lineWidth)
+					this.ctx.stroke()
+					this.ctx.draw()
+					// #endif
+				}
+				this.time = setInterval(()=>{
+					this.ctx.beginPath()
+					
+					this.ctx.arc(this.center,this.center, this.center-5, 0, (this.index*this.process) * Math.PI,false)
+					if((this.index*this.process)>1.5){
+						this.classStatus=true
+					}
+					// #ifdef MP
+					this.ctx.strokeStyle=this.bgcolor
+					this.ctx.lineWidth=this.lineWidth+1
+					this.ctx.stroke()
+					// #endif
+					
+					// #ifdef H5 || APP-PLUS
+					this.ctx.setStrokeStyle(this.bgcolor)
+					this.ctx.setLineWidth(this.lineWidth)
+					this.ctx.stroke()
+					this.ctx.draw(true)
+					// #endif
+					let number = this.index/10
+					this.second1=this.second-parseInt(number)
+					if(this.index*this.process>=2){
+						clearInterval(this.time)
+						this.classStatus=false
+						
+						this.$emit('end')
+					}else{
+						this.index++
+					}
+				},100)
+			},
+			refresh(){
+				clearInterval(this.time)
+				clearInterval(this.time1)
+				this.second1=this.second
+				this.index=1
+				this.index1=1
+				this.pauseStatus=false
+				this.classStatus=false
+				this.countDown()
+			},
+			pause(){
+				if(!this.pauseStatus){
+					clearInterval(this.time)
+					this.index1=this.index
+					clearInterval(this.time1)
+					this.second_copy=this.second1
+					this.second1=this.second_copy
+					this.pauseStatus=true
+				}
+			},
+			play(){
+				if(this.pauseStatus){
+					this.countDown()
+					this.pauseStatus=false
+				}
+			}
+		}
+	}
+</script>
+<style scoped>
+.flex{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+.second{
+	font-size: 28rpx;
+	color:#000000;
+	position: absolute;
+}
+#countDown{
+	/* transform: rotateX(-90deg); */
+}
+@keyframes scan {
+	from{
+		transform:scale(1);
+	}
+	to{
+		transform:scale(1.5);
+	}
+}
+.font{
+	animation: scan .9s infinite;
+}
+</style>

uni_modules/smh-countDown/package.json

@@ -0,0 +1,76 @@
+{
+  "id": "smh-countDown",
+  "displayName": "smh-countDown 倒计时 动画",
+  "version": "1.0.10",
+  "description": "基于canvas的圆形倒计时动画，可自定义大小，颜色，线条宽度等",
+  "keywords": [
+    "smh-countDown",
+    "canvas",
+    "倒计时",
+    "倒计时动画"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.2"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "n",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "n",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/smh-countDown/readme.md

@@ -0,0 +1,55 @@
+# smh-countDown
+
+用于倒计时展示的动画 。QQ：577094253
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+### 基本用法
+
+在 ``template`` 中使用组件
+注意：插件内部只监听了second的变化，可以动态改变。
+其他属性均是有关canvas的画图属性，不可动态改变，只能在初始化的时候使用固定值。
+
+```html
+<smh-countDown ref="countDown" :second="15" :radius="150" :fontSize="40" color="#0A84FF" bgcolor="#f2f2f2" :lineWidth="10" @end="end"></smh-countDown>
+
+methods: {
+	end(){
+		console.log('结束事件')
+		//重新执行
+		this.$refs.countDown.refresh()
+	},
+	pause(){
+		//暂停
+		this.$refs.countDown.pause()
+	},
+	play(){
+		//继续
+		this.$refs.countDown.play()
+	}
+}
+```
+
+
+## API
+
+### smh-countDown  Props
+
+|属性名	|类型		|默认值	|说明				|
+|:-:	|:-:		|:-:	|:-:				|
+|second	|Number		|10		|倒计时时间(可动态改变)			|
+|radius	|Number		|100		|圆形半径(rpx)	|
+|fontSize	|Number		|	30	|中间文字的字体大小(rpx)			|
+|color	|String		|	#0A84FF	|线条倒计时颜色			|
+|bgcolor	|String		|	#f2f2f2	|线条背景色			|
+|lineWidth	|Number		|	5	|线条宽度(rpx)			|
+
+### smh-countDown Events
+|事件名	|说明			|返回值|
+|:-:	|:-:			|:-:  |
+|@end|倒计时结束事件|-    |
+|@refresh|重新执行倒计时|-    |
+|@pause|暂停倒计时|-    |
+|@play|恢复倒计时|-    |