tydata-webview-v2/src/views/HelpDetail.vue

<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>