From 446bcf228e40807edd1a1fa335ee4643a1095fef Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Mon, 28 Mar 2022 11:21:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2:class=3D=E8=AF=AD=E6=B3=95=E9=97=AE=E9=A2=98,:class?=
 =?UTF-8?q?=3D[]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ar-circle-progress/index.vue | 176 ++++++++++++++++++++++++
 pages/tabbar/my/my.vue                  |  14 +-
 2 files changed, 187 insertions(+), 3 deletions(-)
 create mode 100644 components/ar-circle-progress/index.vue

diff --git a/components/ar-circle-progress/index.vue b/components/ar-circle-progress/index.vue
new file mode 100644
index 0000000..b76def0
--- /dev/null
+++ b/components/ar-circle-progress/index.vue
@@ -0,0 +1,176 @@
+<template>
+	<view
+		class="circle-progress"
+		:style="{
+			width: widthPx + 'px',
+			height: widthPx + 'px',
+			backgroundColor: bgColor
+		}"
+	>
+		<!-- 有的不支持canvas-id属性，必须用id属性 -->
+		<canvas
+			class="canvas-bg"
+			:canvas-id="canvasId"
+			:id="canvasId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<canvas
+			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;
+			}
+		},
+		// 圆环底色（灰色的圆环）
+		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'
+		}
+	},
+	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();
+		},
+		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;
+			}
+			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;
+  }
+</style>
diff --git a/pages/tabbar/my/my.vue b/pages/tabbar/my/my.vue
index bac7a82..14b972e 100644
--- a/pages/tabbar/my/my.vue
+++ b/pages/tabbar/my/my.vue
@@ -34,13 +34,20 @@
 				<!-- 预约及时率、上门准时率、项目报修率 -->
 				<view class="disja mar-s20">
 					<view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
-						<cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress>
+						<!-- <cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress> -->
+						<arprogress :percent="item.num" 
+						:inactiveColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" 
+						:activeColor="['#00a2e9','#e87c00','#0b56ec'][index]"
+						:borderWidth="7.8"
+						:width="120"
+						:duration="500"
+						bgColor="transparent"><text :style="{color: ['#00a2e9','#e87c00','#0b56ec'][index]}">{{item.num}}%</text></arprogress>
 						<view class="fon24 mar-s20">{{item.title}}</view>
 					</view>
 				</view>
 				<!-- 六宫格 --> 
 				<view class="disjbac fw bacf" style="margin: 30rpx -20rpx 0rpx -20rpx;">
-					<view @tap="chooseGridEv(index)" class="disjcac fc width50 pad-sx40" v-for="(item,index) in gridList" :key="index" :class="`${(index%2!=0) ? 'bleft' : ''} ${(index < gridList.length-2) ? 'bbot' : ''}`" style="box-sizing: border-box;">
+					<view @tap="chooseGridEv(index)" class="disjcac fc width50 pad-sx40" v-for="(item,index) in gridList" :key="index" :class="[`${(index%2!=0) ? 'bleft' : ''} ${(index < gridList.length-2) ? 'bbot' : ''}`]" style="box-sizing: border-box;">
 						<image :src="item.imgsrc" mode="widthFix" lazy-load :style="{width: [52,52,46,50,46,52][index] + 'rpx',height: [48,45,52,52,53,52][index] + 'rpx'}"></image>
 						<view class="fon26 col3 mar-s20">{{item.title}}</view>
 					</view>
@@ -60,8 +67,9 @@
 	import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
 	// 底部组件
 	import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
+	import arprogress from '@/components/ar-circle-progress/index.vue'
 	export default {
-		components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne},
+		components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne,arprogress},
 		data() {
 			return {
 				newHeight: uni.getSystemInfoSync().statusBarHeight + 50,