From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-circle-progress/u-circle-progress.vue |  220 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 220 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-circle-progress/u-circle-progress.vue b/uview-ui/components/u-circle-progress/u-circle-progress.vue
new file mode 100644
index 0000000..ef51c06
--- /dev/null
+++ b/uview-ui/components/u-circle-progress/u-circle-progress.vue
@@ -0,0 +1,220 @@
+<template>
+	<view
+		class="u-circle-progress"
+		:style="{
+			width: widthPx + 'px',
+			height: widthPx + 'px',
+			backgroundColor: bgColor
+		}"
+	>
+		<!-- 鏀粯瀹濆皬绋嬪簭涓嶆敮鎸乧anvas-id灞炴�э紝蹇呴』鐢╥d灞炴�� -->
+		<canvas
+			class="u-canvas-bg"
+			:canvas-id="elBgId"
+			:id="elBgId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<canvas
+			class="u-canvas"
+			:canvas-id="elId"
+			:id="elId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * circleProgress 鐜舰杩涘害鏉�
+ * @description 灞曠ず鎿嶄綔鎴栦换鍔＄殑褰撳墠杩涘害锛屾瘮濡備笂浼犳枃浠讹紝鏄竴涓渾褰㈢殑杩涘害鏉°�傛敞鎰忥細姝ょ粍浠剁殑percent鍊煎彧鑳藉姩鎬佸鍔狅紝涓嶈兘鍔ㄦ�佸噺灏戙��
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 鍦嗙幆杩涘害鐧惧垎姣斿�硷紝涓烘暟鍊肩被鍨嬶紝0-100
+ * @property {String} inactive-color 鍦嗙幆鐨勫簳鑹诧紝榛樿涓虹伆鑹�(璇ュ�兼棤娉曞姩鎬佸彉鏇�)锛堥粯璁�#ececec锛�
+ * @property {String} active-color 鍦嗙幆婵�娲婚儴鍒嗙殑棰滆壊(璇ュ�兼棤娉曞姩鎬佸彉鏇�)锛堥粯璁�#19be6b锛�
+ * @property {String Number} width 鏁翠釜鍦嗙幆缁勪欢鐨勫搴︼紝楂樺害榛樿绛変簬瀹藉害鍊硷紝鍗曚綅rpx锛堥粯璁�200锛�
+ * @property {String Number} border-width 鍦嗙幆鐨勮竟妗嗗搴︼紝鍗曚綅rpx锛堥粯璁�14锛�
+ * @property {String Number} duration 鏁翠釜鍦嗙幆鎵ц涓�鍦堢殑鏃堕棿锛屽崟浣峬s锛堥粯璁ゅ憿1500锛�
+ * @property {String} type 濡傝缃紝active-color鍊煎皢浼氬け鏁�
+ * @property {String} bg-color 鏁翠釜缁勪欢鑳屾櫙棰滆壊锛岄粯璁や负鐧借壊
+ * @example <u-circle-progress active-color="#497bff" :percent="80"></u-circle-progress>
+ */
+export default {
+	name: 'u-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: '#19be6b'
+		},
+		// 鍦嗙幆绾挎潯鐨勫搴︼紝鍗曚綅rpx
+		borderWidth: {
+			type: [Number, String],
+			default: 14
+		},
+		// 鏁翠釜鍦嗗舰鐨勫搴︼紝鍗曚綅rpx
+		width: {
+			type: [Number, String],
+			default: 200
+		},
+		// 鏁翠釜鍦嗙幆鎵ц涓�鍦堢殑鏃堕棿锛屽崟浣峬s
+		duration: {
+			type: [Number, String],
+			default: 1500
+		},
+		// 涓婚绫诲瀷
+		type: {
+			type: String,
+			default: ''
+		},
+		// 鏁翠釜鍦嗙幆杩涘害鍖哄煙鐨勮儗鏅壊
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		}
+	},
+	data() {
+		return {
+			// #ifdef MP-WEIXIN
+			elBgId: 'uCircleProgressBgId', // 寰俊灏忕▼搴忎腑涓嶈兘浣跨敤this.$u.guid()褰㈠紡鍔ㄦ�佺敓鎴恑d鍊硷紝鍚﹀垯浼氭姤閿�
+			elId: 'uCircleProgressElId',
+			// #endif
+			// #ifndef MP-WEIXIN
+			elBgId: this.$u.guid(), // 闈炲井淇＄鐨勬椂鍊欙紝闇�鐢ㄥ姩鎬佺殑id锛屽惁鍒欎竴涓〉闈㈠涓渾褰㈣繘搴︽潯缁勪欢鏁版嵁浼氭贩涔�
+			elId: this.$u.guid(),
+			// #endif
+			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;
+			// 姝ゅ�煎叾瀹炵瓑浜巘his.percent锛屽懡鍚嶄竴涓柊
+			this.newPercent = nVal;
+			this.oldPercent = oVal;
+			setTimeout(() => {
+				// 鏃犺鏄櫨鍒嗘瘮鍊煎鍔犺繕鏄噺灏戯紝闇�瑕佹搷浣滆繕鏄師鏉ョ殑鏃х殑鐧惧垎姣斿��
+				// 灏嗘鍊煎噺灏戞垨鑰呮柊澧炲埌鏂扮殑鐧惧垎姣斿��
+				this.drawCircleByProgress(oVal);
+			}, 50);
+		}
+	},
+	created() {
+		// 璧嬪�硷紝鐢ㄤ簬鍔犺浇鍚庣涓�涓敾鍦嗕娇鐢�
+		this.newPercent = this.percent;
+		this.oldPercent = 0;
+	},
+	computed: {
+		// 鏈塼ype涓婚鏃讹紝浼樺厛璧蜂綔鐢�
+		circleColor() {
+			if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
+			else return this.activeColor;
+		}
+	},
+	mounted() {
+		// 鍦╤5绔紝蹇呴』瑕佸仛涓�鐐瑰欢鏃舵墠璧蜂綔鐢紝this.$nextTick()鏃犳晥(HX2.4.7)
+		setTimeout(() => {
+			this.drawProgressBg();
+			this.drawCircleByProgress(this.oldPercent);
+		}, 50);
+	},
+	methods: {
+		drawProgressBg() {
+			let ctx = uni.createCanvasContext(this.elBgId, this);
+			ctx.setLineWidth(this.borderWidthPx); // 璁剧疆鍦嗙幆瀹藉害
+			ctx.setStrokeStyle(this.inactiveColor); // 绾挎潯棰滆壊
+			ctx.beginPath(); // 寮�濮嬫弿缁樿矾寰�
+			// 璁剧疆涓�涓師鐐�(110,110)锛屽崐寰勪负100鐨勫渾鐨勮矾寰勫埌褰撳墠璺緞
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
+			ctx.stroke(); // 瀵硅矾寰勮繘琛屾弿缁�
+			ctx.draw();
+		},
+		drawCircleByProgress(progress) {
+			// 绗竴娆℃搷浣滆繘搴︾幆鏃跺皢涓婁笅鏂囦繚瀛樺埌浜唗his.data涓紝鐩存帴浣跨敤鍗冲彲
+			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.circleColor);
+			// 灏嗘�昏繃娓℃椂闂撮櫎浠�100锛屽緱鍑烘瘡淇敼鐧惧垎涔嬩竴杩涘害鎵�闇�鐨勬椂闂�
+			let time = Math.floor(this.duration / 100);
+			// 缁撴潫瑙掔殑璁＄畻渚濇嵁涓猴細灏�2蟺鍒嗕负100浠斤紝涔樹互褰撳墠鐨勮繘搴﹀�硷紝寰楀嚭缁堟鐐圭殑寮у害鍊硷紝鍔犺捣濮嬭锛屼负鏁翠釜鍦嗕粠榛樿鐨�
+			// 3鐐归挓鏂瑰悜寮�濮嬬敾鍥撅紝杞负鏇村ソ鐞嗚В鐨�12鐐归挓鏂瑰悜寮�濮嬩綔鍥撅紝杩欓渶瑕佽捣濮嬭鍜岀粓姝㈣鍚屾椂鍔犱笂this.startAngle鍊�
+			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
+			ctx.beginPath();
+			// 鍗婂緞涓烘暣涓猚anvas瀹藉害鐨勪竴鍗�
+			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(() => {
+				// 瀹氭椂鍣紝姣忔鎿嶄綔闂撮殧涓簍ime鍊硷紝涓轰簡璁╄繘搴︽潯鏈夊姩鐢绘晥鏋�
+				this.drawCircleByProgress(progress);
+			}, time);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-circle-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+}
+
+.u-canvas-bg {
+	position: absolute;
+}
+
+.u-canvas {
+	position: absolute;
+}
+</style>

--
Gitblit v1.9.3