base

src/views/HelpDetail.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="help-detail">
+        <h2>{{ currentHelp.title }}</h2>
+        <template v-if="Array.isArray(currentHelp.images)">
+            <img v-for="(image, index) in currentHelp.images" :key="index" :src="image" :alt="currentHelp.title"
+                class="help-image">
+        </template>
+        <img v-else-if="currentHelp.image" :src="currentHelp.image" :alt="currentHelp.title" class="help-image">
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const currentHelp = ref({
+    title: '',
+    image: '',
+    images: null
+})
+
+// 图片路径映射
+const imageMap = {
+    report_calculation: '/image/help/report-calculation.jpg',
+    report_efficiency: '/image/help/report-efficiency.jpg',
+    report_cost: '/image/help/report-cost.jpg',
+    report_types: '/image/help/report-types.jpg',
+    report_push: '/image/help/report-push.jpg',
+    report_secret: ['/image/help/report-secret-1.jpg', '/image/help/report-secret-2.jpg'],
+    invite_earnings: '/image/help/invite-earnings.jpg',
+    direct_earnings: '/image/help/direct-earnings.jpg',
+    vip_guide: '/image/help/vip-guide.jpg'
+}
+
+// 标题映射
+const titleMap = {
+    report_calculation: '推广报告的收益是如何计算的?',
+    report_efficiency: '报告推广效率飙升指南',
+    report_cost: '推广报告的成本是如何计算的？',
+    report_types: '天远数据有哪些大数据报告类型',
+    report_push: '如何推广报告',
+    report_secret: '报告推广秘籍大公开',
+    invite_earnings: '如何邀请下级成为代理',
+    direct_earnings: '如何成为天远数据代理',
+    vip_guide: '如何成为VIP代理和SVIP代理?'
+}
+
+onMounted(() => {
+    const id = route.query.id
+    if (id && titleMap[id]) {
+        currentHelp.value = {
+            title: titleMap[id],
+            image: Array.isArray(imageMap[id]) ? null : imageMap[id],
+            images: Array.isArray(imageMap[id]) ? imageMap[id] : null
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.help-detail {
+    min-height: 100vh;
+    padding: 20px;
+    background-color: #fff;
+
+    h2 {
+        margin: 0 0 20px;
+        font-size: 22px;
+        color: #323233;
+        font-weight: 500;
+    }
+
+    .help-image {
+        width: 100%;
+        border-radius: 8px;
+        margin-bottom: 12px;
+    }
+}
+</style>