huangjingfen/pro_v3.5.1/view/uniapp/components/HjfQueueProgress.vue

<template>
  <view class="hjf-brokerage-progress">
    <!-- 环形进度 -->
    <view class="progress-ring-wrap">
      <view class="progress-ring" :style="ringStyle">
        <view class="progress-ring-inner">
          <text class="progress-text">{{ cycleCurrent }}/{{ cycleTotal }}</text>
          <text class="progress-subtext">本周期</text>
        </view>
      </view>
    </view>
    <!-- 周期佣金比例说明 -->
    <view v-if="cycleRates && cycleRates.length" class="cycle-rates-wrap">
      <view
        v-for="(rate, idx) in cycleRates"
        :key="idx"
        class="cycle-rate-item"
        :class="{ 'cycle-rate-item--active': idx === cycleCurrent % cycleRates.length }"
      >
        <text class="cycle-rate-item__pos">第{{ idx + 1 }}位</text>
        <text class="cycle-rate-item__rate">{{ rate }}%</text>
      </view>
    </view>
    <!-- 条形进度 -->
    <view class="progress-bar-wrap">
      <view class="progress-bar-track">
        <view class="progress-bar-fill" :style="barStyle" />
      </view>
      <view class="progress-label">
        <text>本周期推荐进度</text>
        <text class="progress-value">{{ cycleCurrent }}/{{ cycleTotal }}</text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * @file HjfQueueProgress.vue
 * @description 推荐佣金周期进度组件：环形/条形进度条展示当前周期进度（如 1/3），并显示各档佣金比例。
 * Props 已更新为 cycleCurrent/cycleTotal/cycleRates，与 /api/hjf/brokerage/progress 接口对齐。
 */
export default {
  name: 'HjfQueueProgress',
  props: {
    /**
     * 当前周期内已推荐人数（对应接口 cycle_current）
     * @type {number}
     */
    cycleCurrent: {
      type: Number,
      default: 0
    },
    /**
     * 每个周期的总人数（对应接口 cycle_total）
     * @type {number}
     */
    cycleTotal: {
      type: Number,
      default: 3
    },
    /**
     * 各档佣金比例数组（百分比整数，对应接口 cycle_rates）
     * @type {number[]}
     */
    cycleRates: {
      type: Array,
      default: () => [20, 30, 50]
    }
  },
  computed: {
    progressPercent() {
      const total = this.cycleTotal;
      if (!total || total <= 0) return 0;
      const p = Math.min(100, (this.cycleCurrent / total) * 100);
      return Math.round(p * 10) / 10;
    },
    ringStyle() {
      return {
        '--progress-percent': this.progressPercent,
        '--progress-color': 'var(--view-theme)'
      };
    },
    barStyle() {
      return {
        width: this.progressPercent + '%',
        backgroundColor: 'var(--view-theme)'
      };
    }
  }
};
</script>

<style scoped lang="scss">
.hjf-brokerage-progress {
  padding: 24rpx;
}

.progress-ring-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 32rpx;
}

.progress-ring {
  --progress-percent: 0;
  --progress-color: var(--view-theme);
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background: conic-gradient(
    var(--progress-color) 0deg,
    var(--progress-color) calc(var(--progress-percent) * 3.6deg),
    #eee calc(var(--progress-percent) * 3.6deg),
    #eee 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-inner {
  width: 136rpx;
  height: 136rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
}

.progress-subtext {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

.cycle-rates-wrap {
  display: flex;
  justify-content: center;
  gap: 24rpx;
  margin-bottom: 28rpx;
}

.cycle-rate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 20rpx;
  border-radius: 12rpx;
  background: #f7f7f7;
  min-width: 100rpx;

  &--active {
    background: var(--view-theme, #e93323);

    .cycle-rate-item__pos,
    .cycle-rate-item__rate {
      color: #fff;
    }
  }
}

.cycle-rate-item__pos {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.cycle-rate-item__rate {
  font-size: 30rpx;
  font-weight: 700;
  color: #333;
}

.progress-bar-wrap {
  padding: 0 8rpx;
}

.progress-bar-track {
  height: 16rpx;
  border-radius: 8rpx;
  background: #eee;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.25s ease;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #666;
}

.progress-value {
  font-weight: 600;
  color: var(--view-theme);
}
</style>