base

src/views/Help.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="help-center">
+        <van-tabs v-model:active="activeTab" sticky :offset-top="46">
+            <van-tab v-for="(category, index) in categories" :key="index" :title="category.title" :name="category.name">
+                <van-cell-group inset class="help-list" size="large">
+                    <van-cell v-for="item in category.items" :key="item.id" :title="item.title" is-link
+                        @click="goToDetail(item.id, item.type)" class="help-item">
+                        <template #label>
+                            <van-tag v-if="item.type === 'guide'" type="primary" size="small"
+                                class="guide-tag" style="background-color: var(--van-theme-primary); color: white;">引导指南</van-tag>
+                        </template>
+                    </van-cell>
+                </van-cell-group>
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const activeTab = ref('report')
+
+const categories = [
+    {
+        title: '推广报告',
+        name: 'report',
+        items: [
+            { id: 'report_guide', title: '直推报告页面引导', type: 'guide' },
+            { id: 'invite_guide', title: '邀请下级页面引导', type: 'guide' },
+            { id: 'direct_earnings', title: '如何成为天远数据代理' },
+            { id: 'report_push', title: '如何推广报告' },
+            { id: 'report_calculation', title: '推广报告的收益是如何计算的?' },
+            { id: 'report_cost', title: '推广报告的成本是如何计算的？' },
+            { id: 'report_efficiency', title: '报告推广效率飙升指南' },
+            { id: 'report_secret', title: '报告推广秘籍大公开' },
+            { id: 'report_types', title: '天远数据有哪些大数据报告类型' },
+        ]
+    },
+    {
+        title: '邀请下级',
+        name: 'invite',
+        items: [
+            { id: 'invite_earnings', title: '邀请下级赚取收益' }
+        ]
+    },
+    {
+        title: '其他',
+        name: 'other',
+        items: [
+            { id: 'vip_guide', title: '如何成为VIP代理和SVIP代理?' }
+        ]
+    }
+]
+
+const goToDetail = (id, type) => {
+    if (type === 'guide') {
+        router.push({
+            path: '/help/guide',
+            query: { id }
+        })
+    } else {
+        router.push({
+            path: '/help/detail',
+            query: { id }
+        })
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.help-center {
+    min-height: 100vh;
+    background-color: #f7f8fa;
+
+    .help-list {
+        margin-top: 12px;
+
+        .guide-tag {
+            margin-top: 4px;
+        }
+    }
+
+    :deep(.help-item) {
+        .van-cell__title {
+            font-size: 16px;
+        }
+    }
+}
+
+.help-detail {
+    padding: 20px;
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+
+        h3 {
+            margin: 0;
+            font-size: 18px;
+        }
+    }
+
+    &-content {
+        white-space: pre-line;
+        line-height: 1.6;
+        color: #666;
+    }
+}
+</style>