115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
|
<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>
|