10 changed files with 184 additions and 48 deletions
@ -1,69 +1,97 @@ |
|||||
<template> |
<template> |
||||
<!-- Banner --> |
<!-- Banner --> |
||||
<Banner :data="form" /> |
<Banner :data="form" /> |
||||
|
|
||||
|
{{ form }} |
||||
<!-- 容器 --> |
<!-- 容器 --> |
||||
<div class="container md:w-3/4 m-auto" v-if="form"> |
<div class="container md:w-3/4 m-auto" v-if="form"> |
||||
<div class="flex flex-col"> |
<div class="flex flex-col"> |
||||
<Breadcrumb :data="form" /> |
<Breadcrumb :data="form" /> |
||||
<div class="page-main w-full bg-white rounded-lg"> |
|
||||
<div class="p-4 leading-7" v-html="form.design.content"> |
|
||||
|
<div :class="form.design?.styles" class="page-main w-full bg-white rounded-lg"> |
||||
|
<div class="p-4 leading-7" v-html="form.design?.content"> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<div v-if="!form"> |
<div v-if="!form"> |
||||
<el-empty description="404 页面不存在"></el-empty> |
<el-empty description="404 页面不存在"></el-empty> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import type {Design} from "~/api/cms/design/model"; |
|
||||
import type {ApiResult} from "~/api"; |
import type {ApiResult} from "~/api"; |
||||
import {useServerRequest} from "~/composables/useServerRequest"; |
import {useServerRequest} from "~/composables/useServerRequest"; |
||||
import {useConfigInfo, useToken} from "~/composables/configState"; |
|
||||
|
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState"; |
||||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
import Breadcrumb from "~/components/Breadcrumb.vue"; |
||||
import type {BreadcrumbItem} from "~/types/global"; |
import type {BreadcrumbItem} from "~/types/global"; |
||||
import type {Navigation} from "~/api/cms/navigation/model"; |
import type {Navigation} from "~/api/cms/navigation/model"; |
||||
|
|
||||
|
// 引入状态管理 |
||||
const route = useRoute(); |
const route = useRoute(); |
||||
const { params } = route; |
|
||||
const { custom: path } = params; |
|
||||
|
|
||||
// 网站配置信息 |
|
||||
|
const website = useWebsite(); |
||||
const config = useConfigInfo(); |
const config = useConfigInfo(); |
||||
const token = useToken(); |
const token = useToken(); |
||||
// 页面信息 |
|
||||
const form = ref<Navigation | any>(); |
|
||||
|
const form = useForm(); |
||||
const breadcrumb = ref<BreadcrumbItem>(); |
const breadcrumb = ref<BreadcrumbItem>(); |
||||
|
|
||||
// 请求数据 |
// 请求数据 |
||||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{ |
|
||||
query: { |
|
||||
path: '/' + path |
|
||||
|
const reload = async () => { |
||||
|
// 都不存在 |
||||
|
if(!form.value.navigationId && !form.value.path){ |
||||
|
return ; |
||||
} |
} |
||||
}) |
|
||||
|
|
||||
|
// 存在spm(优先级高) |
||||
|
if(form.value.navigationId){ |
||||
|
console.log('11111') |
||||
|
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + form.value.navigationId) |
||||
if (nav.value?.data) { |
if (nav.value?.data) { |
||||
// seo |
|
||||
form.value = nav.value.data |
form.value = nav.value.data |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 不存在spm的情况 |
||||
|
if(!form.value.navigationId){ |
||||
|
console.log('2222') |
||||
|
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: form.value.path}}) |
||||
|
if(nav.value?.data){ |
||||
|
form.value = nav.value?.data; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// seo |
||||
useHead({ |
useHead({ |
||||
title: `${form.value.title} - 网宿软件`, |
|
||||
meta: [{ name: form.value.design.keywords, content: form.value.design.description }], |
|
||||
|
title: `${form.value.title} - ${website.value.websiteName}`, |
||||
|
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
||||
bodyAttrs: { |
bodyAttrs: { |
||||
class: "page-container", |
class: "page-container", |
||||
}, |
}, |
||||
script: [ |
script: [ |
||||
{ |
{ |
||||
children: "console.log('Hello World')", |
|
||||
|
children: `console.log(${JSON.stringify(form.value)})`, |
||||
}, |
}, |
||||
], |
], |
||||
}); |
}); |
||||
// 面包屑 |
// 面包屑 |
||||
breadcrumb.value = form.value.breadcrumb |
|
||||
|
breadcrumb.value = form.value |
||||
} |
} |
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
|
watch( |
||||
|
() => route.query.spm, |
||||
|
(spm) => { |
||||
|
// TODO 方案一(优先级高)：从spm参数提取商品ID |
||||
|
if(spm){ |
||||
|
const spmValue = String(spm).split('.') |
||||
|
if(spmValue[5]){ |
||||
|
form.value.navigationId = Number(spmValue[5]) |
||||
|
} |
||||
|
return reload(); |
||||
|
} |
||||
|
|
||||
|
// TODO 方案二：从params获取商品ID |
||||
|
const { custom } = route.params |
||||
|
form.value.path = `/${custom}`; |
||||
|
|
||||
</style> |
|
||||
|
reload(); |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
); |
||||
|
</script> |
||||
|
|||||
@ -0,0 +1,80 @@ |
|||||
|
<template> |
||||
|
<!-- Banner --> |
||||
|
<Banner :data="form" /> |
||||
|
|
||||
|
<!-- 容器 --> |
||||
|
<div class="container md:w-3/4 m-auto" v-if="form"> |
||||
|
<div class="flex flex-col"> |
||||
|
<Breadcrumb :data="form" /> |
||||
|
<div :class="form.design?.styles" class="page-main w-full bg-white rounded-lg"> |
||||
|
<div class="p-4 leading-7" v-html="form.design?.content"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="!form"> |
||||
|
<el-empty description="404 页面不存在"></el-empty> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import type {ApiResult} from "~/api"; |
||||
|
import {useServerRequest} from "~/composables/useServerRequest"; |
||||
|
import {useConfigInfo, useForm, useToken} from "~/composables/configState"; |
||||
|
import Breadcrumb from "~/components/Breadcrumb.vue"; |
||||
|
import type {BreadcrumbItem} from "~/types/global"; |
||||
|
import type {Navigation} from "~/api/cms/navigation/model"; |
||||
|
|
||||
|
// 引入状态管理 |
||||
|
const route = useRoute(); |
||||
|
const config = useConfigInfo(); |
||||
|
const token = useToken(); |
||||
|
const form = useForm(); |
||||
|
const breadcrumb = ref<BreadcrumbItem>(); |
||||
|
|
||||
|
// 请求数据 |
||||
|
const reload = async () => { |
||||
|
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + form.value.navigationId) |
||||
|
if (nav.value?.data) { |
||||
|
form.value = nav.value.data |
||||
|
// seo |
||||
|
useHead({ |
||||
|
title: `${form.value.title} - ${config.value.siteName}`, |
||||
|
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
||||
|
bodyAttrs: { |
||||
|
class: "page-container", |
||||
|
}, |
||||
|
script: [ |
||||
|
{ |
||||
|
children: "console.log('Hello World====')", |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
// 面包屑 |
||||
|
breadcrumb.value = form.value |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
watch( |
||||
|
() => route.query.spm, |
||||
|
(spm) => { |
||||
|
console.log(spm,'spm>>') |
||||
|
// TODO 方案一：从spm参数提取商品ID |
||||
|
const spmValue = String(spm).split('.') |
||||
|
if(spmValue[5]){ |
||||
|
form.value.navigationId = Number(spmValue[5]) |
||||
|
} |
||||
|
|
||||
|
// TODO 方案二(优先级更高)：从params获取商品ID |
||||
|
console.log(route.params.id,'sdfsd'); |
||||
|
// const str = String(custom).replaceAll(".html", ""); |
||||
|
// const split = str.split('-'); |
||||
|
// if(split[1]){ |
||||
|
// console.log('方案二：从params获取ID=' + split[1]) |
||||
|
// form.value.navigationId = Number(split[1]) |
||||
|
// } |
||||
|
|
||||
|
reload(); |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
); |
||||
|
</script> |
||||
@ -0,0 +1,11 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="h-[500px] w-[500px] m-auto text-3xl text-center justify-center bg-amber mt-[100px] items-center">a740a123740a123740a123740a123</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue