From d3ad689af146d38959f8ef408d3aaa5b7745ed89 Mon Sep 17 00:00:00 2001
From: Iruka <1017819588@qq.com>
Date: Wed, 25 Sep 2024 11:31:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E5=BA=A6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../angle-progress-bar/angle-progress-bar.vue | 227 ++++++++++++++++++
 1 file changed, 227 insertions(+)
 create mode 100644 components/angle-progress-bar/angle-progress-bar.vue

diff --git a/components/angle-progress-bar/angle-progress-bar.vue b/components/angle-progress-bar/angle-progress-bar.vue
new file mode 100644
index 0000000..1548faf
--- /dev/null
+++ b/components/angle-progress-bar/angle-progress-bar.vue
@@ -0,0 +1,227 @@
+<template>
+	<u-popup :mode="mode" :show="showPopup" @close="close">
+		<view class="dialog-container">
+			<view class="dialog-title">
+				<view>{{ title }}</view>
+				<view>{{ extra }}</view>
+				<view class="close-btn" @click="close">
+					<u-icon name="close" color="#333" size="20"></u-icon>
+				</view>
+			</view>
+			<view class="dialog-body">
+				<view class="grid">
+					<view class="grid-time">
+						<view @click="subtraction">-</view>
+					</view>
+					<view class="grid-time">
+						<view class="logs-data-box">
+							<view class="content" style="height: 100%;">
+								<view>
+									<view style="text-align: center;"> {{ value }}% </view>
+									<view style="width: 100%;">
+										<u-slider :height="100" blockSize="28" min="0" max="100" activeColor="#15d99b"
+											:value="value" :step="step" :showValue="false" @changing="changing"
+											@change="change" />
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="grid-time">
+						<view @click="addition">+</view>
+					</view>
+				</view>
+				<view class="buttons">
+					<u-button type="success" size="large" text="确定" @click="confirm"></u-button>
+					<u-button type="info" size="large" text="取消" @click="close"></u-button>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		name: "angle-progress-bar",
+		emits: ['close', 'confirm'],
+		props: {
+			mode: { // left、top、right、bottom、center
+				type: String,
+				default: "bottom"
+			}
+		},
+		data() {
+			return {
+				showPopup: false,
+				step: 1,
+				title: "",
+				extra: "",
+				value: 0,
+				pagesObj: {
+					item: null,
+					index: null,
+				}
+			}
+		},
+		created() {},
+		mounted() {},
+		methods: {
+			show(title, extra, value, pagesObj) {
+				this.showPopup = true;
+				this.title = title;
+				this.extra = extra;
+				this.value = value;
+				this.pagesObj = pagesObj || {
+					item: null,
+					index: null,
+				};
+			},
+			close() {
+				this.showPopup = false;
+				this.$emit('close');
+			},
+			confirm() {
+				let obj = this.pagesObj;
+				obj.value = this.value
+				this.$emit('confirm', obj);
+				this.close();
+			},
+			subtraction() {
+				if (this.value >= this.step) {
+					this.value = this.value - this.step;
+				} else {
+					this.value = 0;
+				}
+			},
+			addition() {
+				let value = this.value + this.step;
+				if (value <= 100) {
+					this.value = value;
+				} else {
+					this.value = 100;
+				}
+			},
+			changing(e) {
+				this.value = e;
+			},
+			change(e) {
+				this.value = e;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/* 弹出进度条 */
+	.dialog-container {
+		min-width: 300px;
+
+		.dialog-title {
+			position: relative;
+			text-align: center;
+			height: 34px;
+			line-height: 34px;
+			border-bottom: 1px solid #ddd;
+
+			&>uni-view {
+				display: inline-block;
+				font-weight: bold;
+				font-size: 16px;
+			}
+
+			&>uni-view:nth-child(2) {
+				font-size: 14px;
+				color: #5bc724;
+				margin-left: 10px;
+			}
+
+			.close-btn {
+				position: absolute;
+				top: 50%;
+				right: 10px;
+				transform: translateY(-50%);
+			}
+
+
+		}
+
+		movable-area {
+
+			height: 30rpx;
+			width: 210px;
+			margin: auto;
+			border-radius: 5px;
+			background-color: #D8D8D8;
+			overflow: hidden;
+		}
+
+		movable-view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			width: 10px;
+			height: 100%;
+			background-color: #15d99b;
+			color: #fff;
+			text-align: center;
+		}
+
+		::v-deep .uni-slider-handle-wrapper {
+			height: 30px !important;
+		}
+
+
+		::v-deep .uni-slider-thumb {
+			width: 24px !important;
+			height: 24px !important;
+			box-shadow: 0 0 0px 4px #74ffd4 !important;
+			margin-top: -12px !important;
+		}
+
+		::v-deep uni-slider {
+			margin: 10px 18px 0 18px !important;
+		}
+
+		::v-deep uni-slider .uni-slider-tap-area {
+			padding: 0 !important;
+		}
+
+		.dialog-body {
+			.grid {
+				margin: 20px;
+				display: grid;
+				grid-template-columns: 0.5fr 2fr 0.5fr;
+
+				.grid-time:first-child,
+				.grid-time:last-child {
+					display: grid;
+					justify-items: end;
+					align-items: end;
+
+					&>uni-view {
+						width: 35px;
+						height: 30px;
+						background-color: #eaecf0;
+						text-align: center;
+						font-size: 30px;
+						line-height: 26px;
+						color: #564556;
+					}
+				}
+
+				.grid-time:last-child {
+					justify-items: left;
+
+				}
+			}
+
+			.buttons {
+				margin: 40px 10px 10px;
+				display: flex;
+				justify-content: center;
+
+			}
+		}
+	}
+</style>
\ No newline at end of file