f6227c0253
主要改动: - 个人中心: 去除HjfMemberBadge徽章, 会员等级改显示vip_name, "我的资产"/"公排查询"导航项改为与member-points一致风格 - 我的资产页面: 去除HjfMemberBadge, 美化卡片圆角和阴影 - 公排查询页面: 美化顶部渐变和订单卡片样式 - Admin登录页和后台布局: 彻底删除footer copyright信息 - 新增黄精粉业务页面/组件/API/Mock数据(Phase 1) - 新增PHP环境配置文档和启动脚本 Made-with: Cursor
535 lines
14 KiB
Vue
535 lines
14 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">进四退一流程</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">¥3,600 → 自动入队（#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">¥3,600 → 自动入队（#2）</view>
|
||
</view>
|
||
<view class="flow-arrow">↓</view>
|
||
<!-- 第三步 -->
|
||
<view class="flow-step">
|
||
<view class="step-circle step-in">进</view>
|
||
<view class="step-desc">用户C 购买报单商品</view>
|
||
<view class="step-sub">¥3,600 → 自动入队（#3）</view>
|
||
</view>
|
||
<view class="flow-arrow">↓</view>
|
||
<!-- 第四步触发退款 -->
|
||
<view class="flow-step trigger">
|
||
<view class="step-circle step-in">进</view>
|
||
<view class="step-desc">用户D 购买报单商品</view>
|
||
<view class="step-sub">¥3,600 → 自动入队（#4）</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">用户A 全额退款</view>
|
||
<view class="step-sub">¥3,600 → 返还至现金余额</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 循环说明 -->
|
||
<view class="cycle-note">
|
||
<text class="cycle-icon">🔄</text>
|
||
<text class="cycle-text">如此循环：每进入4单，最早的1单全额退款</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 示例计算卡片 -->
|
||
<view class="example-card">
|
||
<view class="example-title">示例计算</view>
|
||
<view class="example-row">
|
||
<text class="example-label">报单金额</text>
|
||
<text class="example-value">¥3,600.00</text>
|
||
</view>
|
||
<view class="example-row">
|
||
<text class="example-label">退款金额</text>
|
||
<text class="example-value highlight">¥3,600.00（全额）</text>
|
||
</view>
|
||
<view class="example-row">
|
||
<text class="example-label">平均等待单数</text>
|
||
<text class="example-value">约 3 单（即约3倍报单量）</text>
|
||
</view>
|
||
<view class="example-divider"></view>
|
||
<view class="example-desc">
|
||
假设公排池每天新增20单，您的排队序号为第14位，预计约需等待 3 天可触发退款。
|
||
实际等待时间取决于整体报单速度，报单越活跃退款越快。
|
||
</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，退款时按原金额全额返还至您的现金余额，不收取任何手续费。'
|
||
},
|
||
{
|
||
title: '进四退一机制',
|
||
content: '公排池按照入队时间先后排队。每当新入队单数达到当前最早排队单数的4倍时，最早的1单自动触发退款。'
|
||
},
|
||
{
|
||
title: '退款自动到账',
|
||
content: '退款金额将在触发退款后立即到账至您的现金余额，无需手动申请，可在"我的资产"中查看。'
|
||
},
|
||
{
|
||
title: '入队资格',
|
||
content: '购买报单商品（黄精粉套餐 ¥3,600）后，系统自动为该订单分配全局唯一的排队序号，按购买时间先后排序。'
|
||
},
|
||
{
|
||
title: '多单独立排队',
|
||
content: '同一用户购买多单报单商品，每单独立分配排队序号，各自独立参与公排循环，互不影响。'
|
||
},
|
||
{
|
||
title: '积分奖励叠加',
|
||
content: '公排退款与积分奖励体系相互独立，参与公排的同时可正常获得推荐积分奖励，两者并行不悖。'
|
||
},
|
||
{
|
||
title: '规则变更通知',
|
||
content: '若平台对公排规则进行调整，将提前通过公告及消息通知用户，变更后的规则不溯及既往订单。'
|
||
}
|
||
],
|
||
|
||
/**
|
||
* @type {Array<{question: string, answer: string, open: boolean}>}
|
||
* @description 常见问题列表，open 字段控制手风琴展开状态
|
||
*/
|
||
faqItems: [
|
||
{
|
||
question: '参与公排后多久能收到退款？',
|
||
answer: '等待时间取决于公排池的整体报单速度。每进入4单触发最早1单退款。若每天新增约20单，一般约3-5天可收到退款。您可在"公排状态"页查看实时进度和预估等待时间。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '退款会到哪里？',
|
||
answer: '退款金额将全额返还至您在平台的现金余额，可在"我的资产"中查看，并可随时申请提现（提现手续费7%）。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '一个人可以参与多次公排吗？',
|
||
answer: '可以。每次购买报单商品均会独立进入公排队列，获得新的排队序号。多单独立排队，各自触发退款，相互不影响。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '公排退款后还能继续参与吗？',
|
||
answer: '可以。退款到账后您可以再次购买报单商品重新入队，循环享受公排返利。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '为什么我的排队序号不是第1位？',
|
||
answer: '公排池是全平台共享队列，您的排队序号代表全局位置。序号前面的用户将优先触发退款，请耐心等待。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '公排和积分奖励可以同时获得吗？',
|
||
answer: '可以。购买报单商品后，您的直接推荐人可获得积分奖励，同时该订单进入公排队列。两套机制并行运作，互不影响。',
|
||
open: false
|
||
},
|
||
{
|
||
question: '如何查看我的排队进度？',
|
||
answer: '进入"公排状态"页可查看：您的排队序号、当前批次进度（X/4）、预计等待时间。页面实时展示全局公排进度。',
|
||
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>
|