charge_miniapp/components/zs-half-ring-progress/half-ring-progress.vue

<template>
  <view class="progress-container">
    <!-- 半环进度容器 -->
    <view class="ring-wrapper">
      <!-- 背景环（半环底色） -->
      <view class="ring-bg"></view>
      <!-- 进度环（渐变+动态进度） -->
      <view class="ring-progress" :style="{ transform: `rotate(${progressDeg}deg)` }">
        <!-- 左侧环（青色渐变） -->

      </view>
      <!-- 进度原点（圆点） -->
      <view class="progress-dot" :style="{ transform: `rotate(${progressDeg}deg)` }"></view>
      <!-- 中间文字（百分比+提示） -->
      <view class="progress-text">
        <text class="percent">{{ progress }}%</text>
        <text class="tips">{{ tipText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "half-ring-progress",
  props: {
    // 进度值（0-100）
    progress: {
      type: Number,
      default: 30,
      validator: val => val >= 0 && val <= 100
    },
    // 底部提示文字
    tipText: {
      type: String,
      default: "充电枪正在充电中"
    },
    // 是否启用动画
    animated: {
      type: Boolean,
      default: true
    },
    // 主题颜色（用于渐变）
    themeColor: {
      type: String,
      default: '#49a6f4'
    }
  },
  computed: {
    // 计算进度对应的旋转角度（从左侧-90°开始，顺时针旋转）
    progressDeg() {
      return -90 + (this.progress * 1.8);
    },
    // 渐变颜色（从青色到蓝色）
    gradientColor() {
      return 'linear-gradient(99deg, #8FF8FB 0%, #47AEFF 100%)';
    }
  }
};
</script>

<style scoped>
.progress-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.ring-wrapper {
  position: relative;
  width: 400rpx;
  height: 200rpx;
  overflow: hidden;
}

/* 背景半环样式 */
.ring-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 16rpx solid #97DAFF;
  box-sizing: border-box;
  clip: rect(0rpx, 400rpx, 200rpx, 0rpx);
}

/* 进度半环容器（控制旋转） */
.ring-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 400rpx;
  height: 200rpx;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
}

/* 左侧半环（青色） */
.ring-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 16rpx solid #8FF8FB;
  box-sizing: border-box;
  clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
}

/* 中间过渡区 */
.ring-middle {
  position: absolute;
  top: 0;
  left: 150rpx;
  width: 100rpx;
  height: 400rpx;
  background: linear-gradient(to right, #8FF8FB, #5EC8FE);
  clip: rect(0rpx, 100rpx, 200rpx, 0rpx);
}

/* 右侧半环（蓝色） */
.ring-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 16rpx solid #47AEFF;
  box-sizing: border-box;
  clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
}

/* 进度原点（末端圆点） */
.progress-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 28rpx;
  height: 28rpx;
  background: #FFFFFF;
  border: 5rpx solid #47AEFF;
  border-radius: 50%;
  transform-origin: center 200rpx;
  margin-left: -14rpx;
  margin-top: -14rpx;
  box-shadow: 0 0 16rpx rgba(71, 174, 255, 0.8);
  transition: transform 0.6s ease-in-out;
  z-index: 10;
}

/* 中间文字样式 */
.progress-text {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.percent {
  display: block;
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.tips {
  display: block;
  font-size: 24rpx;
  color: #666;
}

/* 高亮文字（如“充电中”） */
.tips text {
  color: v-bind(themeColor);
}
</style>