From fe4b5e8c859be1b67bfcb16fed9ca1db003213be Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Sat, 2 Apr 2022 09:42:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88=E6=88=91=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=9C=86=E5=BD=A2=E8=BF=9B=E5=BA=A6=E6=9D=A1=E7=9A=84?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E5=8E=9F=E5=9B=A0?=
 =?UTF-8?q?=EF=BC=9AApp=E5=8A=A8=E7=94=BB=E6=97=B6=E4=BC=9A=E6=8A=96?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                 |   8 +-
 components/ar-circle-progress/index.vue | 298 +++++++++++-------------
 2 files changed, 146 insertions(+), 160 deletions(-)

diff --git a/App.vue b/App.vue
index faaa40c..99eac60 100644
--- a/App.vue
+++ b/App.vue
@@ -10,15 +10,15 @@
 		onLaunch: function() {
 			// 配置全局域名
 			// #ifdef APP-PLUS
-				getApp().globalData.hostapi = 'https://7and5.cn';
+				this.globalData.hostapi = 'https://7and5.cn';
 			// #endif
 			// #ifdef MP-WEIXIN
 				this.globalData.hostapi = 'https://7and5.cn';
 			// #endif
 			// #ifdef H5
-				// uni.setStorageSync('hostapi','/web'); 
-				getApp().globalData.hostapi = '/web';
-			// #endif
+				this.globalData.hostapi = 'https://7and5.cn';
+				// this.globalData.hostapi = '/web';
+			// #endif 
 		},
 		onShow: function() {
 			// if(uni.getStorageSync('token')){
diff --git a/components/ar-circle-progress/index.vue b/components/ar-circle-progress/index.vue
index 35a4e4d..5093b4e 100644
--- a/components/ar-circle-progress/index.vue
+++ b/components/ar-circle-progress/index.vue
@@ -1,176 +1,162 @@
 <template>
-	<view
-		class="circle-progress"
-		:style="{
-			width: widthPx + 'px',
-			height: widthPx + 'px',
-			backgroundColor: bgColor
-		}"
-	>
+	<view class="circle-progress" 
+	:style="{width: widthPx + 'px',height: widthPx + 'px',backgroundColor: bgColor}">
 		<!-- 有的不支持canvas-id属性，必须用id属性 -->
-		<canvas v-if="canvasId"
-			class="canvas-bg"
-			:canvas-id="canvasId"
-			:id="canvasId"
-			:style="{
-				width: widthPx + 'px',
-				height: widthPx + 'px'
-			}"
-		></canvas>
-		<canvas v-if="elId"
-			class="canvas"
-			:canvas-id="elId"
-			:id="elId"
-			:style="{
-				width: widthPx + 'px',
-				height: widthPx + 'px'
-			}"
-		></canvas>
+		<canvas v-if="canvasId" class="canvas-bg" :canvas-id="canvasId" :id="canvasId" 
+		:style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
+		<canvas v-if="elId" class="canvas" :canvas-id="elId" :id="elId" 
+		:style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
 		<slot></slot>
 	</view>
 </template>
 
 <script>
-export default {
-	name: 'circle-progress',
-	props: {
-		// 圆环进度百分比值
-		percent: {
-			type: Number,
-			default: 0,
-			// 值在0到100之间
-			validator: val => {
-				return val >= 0 && val <= 100;
+	export default {
+		name: 'circle-progress',
+		props: {
+			// 圆环进度百分比值
+			percent: {
+				type: Number,
+				default: 0,
+				// 值在0到100之间
+				validator: val => {
+					return val >= 0 && val <= 100;
+				}
+			},
+			// 圆环底色（灰色的圆环）
+			inactiveColor: {
+				type: String,
+				default: '#ececec'
+			},
+			// 圆环激活部分的颜色
+			activeColor: {
+				type: String,
+				default: '#009dff'
+			},
+			// 圆环线条的宽度，单位rpx
+			borderWidth: {
+				type: [Number, String],
+				default: 14
+			},
+			// 整个圆形的宽度，单位rpx
+			width: {
+				type: [Number, String],
+				default: 200
+			},
+			// 整个圆环执行一圈的时间，单位ms
+			duration: {
+				type: [Number, String],
+				default: 1500
+			},
+			// 圆环进度区域的背景色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
 			}
 		},
-		// 圆环底色（灰色的圆环）
-		inactiveColor: {
-			type: String,
-			default: '#ececec'
+		data() {
+			return {
+				canvasId: this.randomId(), //一个页面多个圆形进度
+				elId: this.randomId(),
+				widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
+				borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
+				startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+				progressContext: null, // 活动圆的canvas上下文
+				newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+				oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+			};
 		},
-		// 圆环激活部分的颜色
-		activeColor: {
-			type: String,
-			default: '#009dff'
+		watch: {
+			percent(nVal, oVal = 0) {
+				if (nVal > 100) nVal = 100;
+				if (nVal < 0) oVal = 0;
+				this.newPercent = nVal;
+				this.oldPercent = oVal;
+				setTimeout(() => {
+					this.drawCircleByProgress(oVal);
+				}, 50);
+			}
 		},
-		// 圆环线条的宽度，单位rpx
-		borderWidth: {
-			type: [Number, String],
-			default: 14
+		created() {
+			// 赋值，用于加载后第一个画圆使用
+			this.newPercent = this.percent;
+			this.oldPercent = 0;
 		},
-		// 整个圆形的宽度，单位rpx
-		width: {
-			type: [Number, String],
-			default: 200
-		},
-		// 整个圆环执行一圈的时间，单位ms
-		duration: {
-			type: [Number, String],
-			default: 1500
-		},
-		// 圆环进度区域的背景色
-		bgColor: {
-			type: String,
-			default: '#ffffff'
-		}
-	},
-	data() {
-		return {
-			canvasId: this.randomId(), //一个页面多个圆形进度
-			elId: this.randomId(),
-			widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
-			borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
-			startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
-			progressContext: null, // 活动圆的canvas上下文
-			newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
-			oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
-		};
-	},
-	watch: {
-		percent(nVal, oVal = 0) {
-			if (nVal > 100) nVal = 100;
-			if (nVal < 0) oVal = 0;
-			this.newPercent = nVal;
-			this.oldPercent = oVal;
-			setTimeout(() => {
-				this.drawCircleByProgress(oVal);
-			}, 50);
-		}
-	},
-	created() {
-		// 赋值，用于加载后第一个画圆使用
-		this.newPercent = this.percent;
-		this.oldPercent = 0;
-	},
 
-	mounted() {
-    this.drawProgressBg();
-    this.drawCircleByProgress(this.oldPercent);
-	},
-	methods: {
-    //一个页面多个progress时ID需不同
-    randomId(){
-      return 'progressId'+parseInt(Math.random()*1000000)
-    },
-		drawProgressBg() {
-			let ctx = uni.createCanvasContext(this.canvasId, this);
-			ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
-			ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
-			ctx.beginPath(); // 开始描绘路径
-			let radius = this.widthPx / 2;
-			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
-			ctx.stroke(); // 对路径进行描绘
-			ctx.draw();
+		mounted() {
+			this.drawProgressBg();
+			this.drawCircleByProgress(this.oldPercent);
 		},
-		drawCircleByProgress(progress) {
-			let ctx = this.progressContext;
-			if (!ctx) {
-				ctx = uni.createCanvasContext(this.elId, this);
-				this.progressContext = ctx;
+		methods: {
+			//一个页面多个progress时ID需不同
+			randomId() {
+				return 'progressId' + parseInt(Math.random() * 1000000)
+			},
+			drawProgressBg() {
+				let ctx = uni.createCanvasContext(this.canvasId, this);
+				ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
+				ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
+				ctx.beginPath(); // 开始描绘路径
+				let radius = this.widthPx / 2;
+				ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
+				ctx.stroke(); // 对路径进行描绘
+				ctx.draw();
+			},
+			drawCircleByProgress(progress) {
+				let ctx = this.progressContext;
+				if (!ctx) {
+					ctx = uni.createCanvasContext(this.elId, this);
+					this.progressContext = ctx;
+				}
+				// 表示进度的两端为圆形
+				ctx.setLineCap('round');
+				// 设置线条的宽度和颜色
+				ctx.setLineWidth(this.borderWidthPx);
+				ctx.setStrokeStyle(this.activeColor);
+				// 计算过渡时间
+				let time = Math.floor(this.duration / 200);
+				let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
+				ctx.beginPath();
+				// 半径为整个canvas宽度的一半
+				let radius = this.widthPx / 2;
+				ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
+				ctx.stroke();
+				ctx.draw();
+				// 有动画
+				// 增大了百分比
+				// if (this.newPercent > this.oldPercent) {
+				// 	progress++;
+				// 	if (progress > this.newPercent) return;
+				// } else {
+				// 	// 减少百分比
+				// 	progress--;
+				// 	if (progress < this.newPercent) return;
+				// }
+				// 无动画
+				progress = this.newPercent;
+				setTimeout(() => {
+					// 定时器，为了让进度条有动画效果
+					this.drawCircleByProgress(progress);
+				// }, time);
+				}, 0);
 			}
-			// 表示进度的两端为圆形
-			ctx.setLineCap('round');
-			// 设置线条的宽度和颜色
-			ctx.setLineWidth(this.borderWidthPx);
-			ctx.setStrokeStyle(this.activeColor);
-			// 计算过渡时间
-			let time = Math.floor(this.duration / 200);
-			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
-			ctx.beginPath();
-			// 半径为整个canvas宽度的一半
-			let radius = this.widthPx / 2;
-			ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
-			ctx.stroke();
-			ctx.draw();
-			// 增大了百分比
-			if (this.newPercent > this.oldPercent) {
-				progress++;
-				if (progress > this.newPercent) return;
-			} else {
-				// 减少百分比
-				progress--;
-				if (progress < this.newPercent) return;
-			}
-			setTimeout(() => {
-				// 定时器，为了让进度条有动画效果
-				this.drawCircleByProgress(progress);
-			}, time);
 		}
-	}
-};
+	};
 </script>
 
 <style scoped>
-  .circle-progress {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .canvas-bg {
-    position: absolute;
-  }
-  .canvas {
-    position: absolute;
-  }
+	.circle-progress {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.canvas-bg {
+		position: absolute;
+	}
+
+	.canvas {
+		position: absolute;
+	}
 </style>