huangjingfen/pro_v3.5.1/view/uniapp/pages/queue/rules.vue

<template>
  <view :style="colorStyle" class="queue-rules">

    <!-- 推荐佣金流程图示 -->
    <view class="section">
      <view class="section-title">推荐佣金流程</view>
      <view class="mechanism-card">
        <view class="mechanism-title">推荐3人周期佣金流程</view>
        <view class="flow-diagram">
          <!-- 第一步 -->
          <view class="flow-step">
            <view class="step-circle step-in">推</view>
            <view class="step-desc">您邀请用户A 购买报单商品</view>
            <view class="step-sub">您获得 20% 佣金（第1位比例）</view>
          </view>
          <view class="flow-arrow">↓</view>
          <!-- 第二步 -->
          <view class="flow-step">
            <view class="step-circle step-in">推</view>
            <view class="step-desc">您邀请用户B 购买报单商品</view>
            <view class="step-sub">您获得 30% 佣金（第2位比例）</view>
          </view>
          <view class="flow-arrow">↓</view>
          <!-- 第三步触发完整周期 -->
          <view class="flow-step trigger">
            <view class="step-circle step-in">推</view>
            <view class="step-desc">您邀请用户C 购买报单商品</view>
            <view class="step-sub">您获得 50% 佣金（第3位比例）</view>
            <view class="trigger-badge">完成一个周期！</view>
          </view>
          <view class="flow-arrow refund-arrow">↓</view>
          <!-- 新周期 -->
          <view class="flow-step refund-step">
            <view class="step-circle step-out">循</view>
            <view class="step-desc">进入下一推荐周期</view>
            <view class="step-sub">重新从 20% 开始计算</view>
          </view>
        </view>

        <!-- 循环说明 -->
        <view class="cycle-note">
          <text class="cycle-icon">🔄</text>
          <text class="cycle-text">如此循环：每推荐3人为一个周期，按比例获得佣金</text>
        </view>
      </view>

      <!-- 示例计算卡片 -->
      <view class="example-card">
        <view class="example-title">示例计算（报单商品 ¥3,600）</view>
        <view class="example-row">
          <text class="example-label">推荐第1人佣金（20%）</text>
          <text class="example-value">¥720.00</text>
        </view>
        <view class="example-row">
          <text class="example-label">推荐第2人佣金（30%）</text>
          <text class="example-value">¥1,080.00</text>
        </view>
        <view class="example-row">
          <text class="example-label">推荐第3人佣金（50%）</text>
          <text class="example-value highlight">¥1,800.00</text>
        </view>
        <view class="example-divider"></view>
        <view class="example-row">
          <text class="example-label">一个周期累计佣金</text>
          <text class="example-value highlight">¥3,600.00（100%）</text>
        </view>
        <view class="example-divider"></view>
        <view class="example-desc">
          佣金将在被推荐人支付订单后直接发放至您的佣金余额，可随时申请提现（手续费7%）。
        </view>
      </view>
    </view>

    <!-- 规则条款列表 -->
    <view class="section">
      <view class="section-title">规则条款</view>
      <view class="rules-card">
        <view
          class="rule-item"
          v-for="(rule, index) in ruleItems"
          :key="index"
        >
          <view class="rule-index">{{ index + 1 }}</view>
          <view class="rule-content">
            <view class="rule-title-text">{{ rule.title }}</view>
            <view class="rule-body">{{ rule.content }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 常见问题 FAQ 手风琴 -->
    <view class="section">
      <view class="section-title">常见问题</view>
      <view class="faq-list">
        <view
          class="faq-item"
          v-for="(item, index) in faqItems"
          :key="index"
          @click="toggleFaq(index)"
        >
          <view class="faq-header acea-row row-between-wrapper">
            <view class="faq-question">{{ item.question }}</view>
            <view class="faq-arrow" :class="{ 'arrow-up': item.open }">›</view>
          </view>
          <view class="faq-answer" v-if="item.open">{{ item.answer }}</view>
        </view>
      </view>
    </view>

    <!-- 底部声明 -->
    <view class="footer-note">
      <text>本平台推荐佣金规则最终解释权归范氏国香商城所有</text>
    </view>

  </view>
</template>

<script>
/**
 * @file pages/queue/rules.vue
 * @description P14 公排规则说明页 — 静态展示页面，无 API 调用
 *
 * 页面结构：
 *  1. 公排机制图示（进四退一流程图 + 示例计算）
 *  2. 规则条款列表（编号条款）
 *  3. 常见问题 FAQ 手风琴（点击展开/收起）
 *
 * @module pages/queue/rules
 * @requires mixin/color.js  — 提供 colorStyle 计算属性（主题色 CSS 变量注入）
 */
import { mapGetters } from 'vuex';

export default {
  name: 'QueueRules',

  data() {
    return {
      /**
       * @type {Array<{title: string, content: string}>}
       * @description 规则条款列表，静态数据
       */
      ruleItems: [
        {
          title: '推荐佣金机制',
          content: '购买报单商品（¥3,600）后，当您推荐好友购买时，您可获得对应周期位次的佣金比例（20%/30%/50%）。'
        },
        {
          title: '3人周期循环',
          content: '每推荐3人为一个完整周期，依次按第1人20%、第2人30%、第3人50%发放佣金。周期结束后自动进入下一轮。'
        },
        {
          title: '佣金自动到账',
          content: '佣金将在被推荐人支付订单后直接发放至您的佣金余额，无需手动申请，可在"推荐佣金"页查看。'
        },
        {
          title: '报单商品范围',
          content: '仅购买标注为"报单商品"的商品才参与佣金计算，普通商品按常规佣金比例计算。'
        },
        {
          title: '推荐关系绑定',
          content: '被推荐人须通过您的专属邀请链接/二维码注册并购买，方可绑定推荐关系并产生佣金。'
        },
        {
          title: '积分奖励叠加',
          content: '推荐佣金与积分奖励体系相互独立，获得佣金的同时可正常获得待释放积分奖励，每日自动释放0.4‰到可用积分。'
        },
        {
          title: '规则变更通知',
          content: '若平台对佣金规则进行调整，将提前通过公告及消息通知用户，变更后的规则不溯及既往订单。'
        }
      ],

      /**
       * @type {Array<{question: string, answer: string, open: boolean}>}
       * @description 常见问题列表，open 字段控制手风琴展开状态
       */
      faqItems: [
        {
          question: '推荐一个人能得多少佣金？',
          answer: '取决于您在当前周期的位次。第1人20%，第2人30%，第3人50%。以报单商品¥3,600为例，分别是¥720、¥1,080、¥1,800。',
          open: false
        },
        {
          question: '佣金会到哪里？',
          answer: '佣金将发放至您的佣金余额，可在"推荐佣金"页查看，并可随时申请提现（提现手续费7%）。',
          open: false
        },
        {
          question: '推荐超过3人怎么计算？',
          answer: '每满3人为一个周期，自动进入下一周期重新从第1位（20%）开始计算。如推荐第4人，其佣金比例与第1人相同（20%）。',
          open: false
        },
        {
          question: '我没有购买报单商品可以推荐别人吗？',
          answer: '可以推荐，但获得佣金需要您有对应的分销等级。建议先购买报单商品成为会员，再邀请好友。',
          open: false
        },
        {
          question: '待释放积分是什么？',
          answer: '每次获得佣金时，同步获得等额待释放积分（1元佣金=100积分）。积分每天自动释放0.4‰到可用积分，可用于平台消费抵扣。',
          open: false
        },
        {
          question: '佣金和积分可以同时获得吗？',
          answer: '可以。推荐好友购买报单商品后，您同时获得佣金和待释放积分，两套机制并行运作，互不影响。',
          open: false
        },
        {
          question: '如何查看我的佣金进度？',
          answer: '进入"推荐佣金"页可查看：当前周期推荐进度（X/3）、各档比例、累计佣金、佣金记录明细。',
          open: false
        }
      ]
    };
  },

  computed: {
    ...mapGetters(['colorStyle'])
  },

  methods: {
    /**
     * @description 切换 FAQ 手风琴展开/收起状态
     * @param {number} index - FAQ 条目的索引
     */
    toggleFaq(index) {
      this.faqItems[index].open = !this.faqItems[index].open;
    }
  }
};
</script>

<style scoped lang="scss">
.queue-rules {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 24rpx 0;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #282828;
  padding: 24rpx 0 16rpx;
}

/* ===== 机制图示卡片 ===== */
.mechanism-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.mechanism-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--view-theme, #e93323);
  text-align: center;
  margin-bottom: 30rpx;
}

/* 流程图 */
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step {
  width: 100%;
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 18rpx 24rpx;
  text-align: center;
  position: relative;

  &.trigger {
    background: #fff7f0;
    border: 2rpx solid #ff9d4d;
  }

  &.refund-step {
    background: #f0fff4;
    border: 2rpx solid #52c41a;
  }
}

.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10rpx;

  &.step-in {
    background: var(--view-theme, #e93323);
  }

  &.step-out {
    background: #52c41a;
  }
}

.step-desc {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.step-sub {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}

.trigger-badge {
  display: inline-block;
  background: #ff9d4d;
  color: #fff;
  font-size: 20rpx;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  margin-top: 10rpx;
}

.flow-arrow {
  font-size: 36rpx;
  color: #ccc;
  line-height: 50rpx;
  text-align: center;

  &.refund-arrow {
    color: #52c41a;
  }
}

/* 循环说明 */
.cycle-note {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24rpx;
  padding: 16rpx 20rpx;
  background: #f0f4ff;
  border-radius: 10rpx;
}

.cycle-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.cycle-text {
  font-size: 24rpx;
  color: #555;
}

/* 示例计算卡片 */
.example-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx;
  margin-top: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.example-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #282828;
  margin-bottom: 18rpx;
}

.example-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.example-label {
  font-size: 26rpx;
  color: #666;
}

.example-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;

  &.highlight {
    color: #52c41a;
    font-weight: 700;
  }
}

.example-divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 16rpx 0;
}

.example-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.8;
}

/* ===== 规则条款 ===== */
.rules-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.rule-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.rule-index {
  flex-shrink: 0;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: var(--view-theme, #e93323);
  color: #fff;
  font-size: 22rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.rule-content {
  flex: 1;
}

.rule-title-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.rule-body {
  font-size: 24rpx;
  color: #777;
  line-height: 1.7;
}

/* ===== FAQ 手风琴 ===== */
.faq-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.faq-item {
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.faq-header {
  padding: 28rpx;
  align-items: center;
}

.faq-question {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  line-height: 1.5;
  padding-right: 20rpx;
}

.faq-arrow {
  flex-shrink: 0;
  font-size: 40rpx;
  color: #ccc;
  transform: rotate(90deg);
  transition: transform 0.25s ease;
  line-height: 1;

  &.arrow-up {
    transform: rotate(-90deg);
    color: var(--view-theme, #e93323);
  }
}

.faq-answer {
  padding: 0 28rpx 24rpx;
  font-size: 24rpx;
  color: #888;
  line-height: 1.8;
  background: #fafafa;
}

/* ===== 底部声明 ===== */
.footer-note {
  margin: 30rpx 24rpx 0;
  text-align: center;
  font-size: 22rpx;
  color: #bbb;
}
</style>