78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
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'
|
|
}
|
|
|
|
// 标题映射
|
|
const titleMap = {
|
|
report_calculation: '推广报告的收益是如何计算的?',
|
|
report_efficiency: '报告推广效率飙升指南',
|
|
report_cost: '推广报告的成本是如何计算的？',
|
|
report_types: '真爱查有哪些大数据报告类型',
|
|
report_push: '如何推广报告',
|
|
report_secret: '报告推广秘籍大公开',
|
|
invite_earnings: '如何邀请下级成为代理',
|
|
direct_earnings: '如何成为真爱查代理'
|
|
}
|
|
|
|
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> |