8e17762510
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
532 lines
13 KiB
Vue
532 lines
13 KiB
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>
|