29 changed files with 808 additions and 261 deletions
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div class="container md:w-3/4 m-auto"> |
|||
<div class="flex flex-col" v-if="!layout?.showLayout"> |
|||
<Breadcrumb :data="form" /> |
|||
<div :class="layout?.style" 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 class="mt-[60px]" v-if="!layout"> |
|||
<el-empty description="404 页面不存在"></el-empty> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
|
|||
withDefaults( |
|||
defineProps<{ |
|||
layout?: any; |
|||
form?: Navigation; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
</script> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<el-dialog v-model="showLogin" width="500" center> |
|||
<el-segmented v-model="loginType" :options="options" block /> |
|||
<el-form :model="form" label-width="auto" style="max-width: 600px" class="p-4"> |
|||
<el-form-item label="登录账号"> |
|||
<el-input v-model="form.name" /> |
|||
</el-form-item> |
|||
<el-form-item label="登录密码"> |
|||
<el-input v-model="form.name" type="password" /> |
|||
</el-form-item> |
|||
<el-form-item label="记住密码"> |
|||
<el-switch v-model="form.delivery" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button >取消</el-button> |
|||
<el-button type="primary" > |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import {useShowLogin, useToken} from "~/composables/configState"; |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
}>(); |
|||
|
|||
const form = reactive({ |
|||
name: '', |
|||
region: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '', |
|||
}) |
|||
|
|||
const showLogin = useShowLogin(); |
|||
const loginType = ref('账号登录'); |
|||
const options = [ |
|||
'账号登录', |
|||
'扫码登录', |
|||
] |
|||
const token = useToken(); |
|||
</script> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :layout="layout" /> |
|||
|
|||
<!-- 简单模式(常规单页面) --> |
|||
<PageContainer :form="form" :layout="layout" /> |
|||
|
|||
<!-- 高级模式(自定义组件) --> |
|||
<div class="flex flex-col" v-if="layout?.showLayout"> |
|||
{{ layout }} |
|||
</div> |
|||
|
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {ApiResult} from "~/api"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState"; |
|||
import type {BreadcrumbItem} from "~/types/global"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm} from "~/utils/common"; |
|||
import PageContainer from "~/components/PageContainer.vue"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
const layout = ref<any>(); |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const form = useForm(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
// 存在spm(优先级高) |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + getIdBySpm(5)) |
|||
if (nav.value?.data) { |
|||
form.value = nav.value.data |
|||
}else{ |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: route.path}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
} |
|||
// 页面布局 |
|||
if(form.value?.layout){ |
|||
layout.value = JSON.parse(form.value?.layout) |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: `console.log(${JSON.stringify(form.value)})`, |
|||
}, |
|||
], |
|||
}); |
|||
// 面包屑 |
|||
breadcrumb.value = form.value |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
console.log(path,'=>Path') |
|||
|
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
|
|||
<!-- 容器 --> |
|||
<div class="container md:w-3/4 m-auto"> |
|||
<div class="flex flex-col"> |
|||
<Breadcrumb :data="form" /> |
|||
<div :class="form.design?.style" 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 class="mt-[60px]" v-if="!form.design"> |
|||
<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, useWebsite} from "~/composables/configState"; |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
import type {BreadcrumbItem} from "~/types/global"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm} from "~/utils/common"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const form = useForm(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
// 存在spm(优先级高) |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + getIdBySpm(5)) |
|||
if (nav.value?.data) { |
|||
form.value = nav.value.data |
|||
} |
|||
|
|||
// 不存在spm的情况 |
|||
if(!form.value.navigationId){ |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: route.path}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: `console.log(${JSON.stringify(form.value)})`, |
|||
}, |
|||
], |
|||
}); |
|||
// 面包屑 |
|||
breadcrumb.value = form.value |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
if(path){ |
|||
reload(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -1,7 +1,7 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
{{ form }} |
|||
{{ form }}-- |
|||
<!-- 容器 --> |
|||
<div class="container md:w-3/4 m-auto" v-if="form"> |
|||
<div class="flex flex-col"> |
|||
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
|
|||
<div v-if="form" class="flex flex-col w-full md:w-3/4 m-auto my-3"> |
|||
|
|||
<Breadcrumb :data="form" /> |
|||
|
|||
<div class="p-4 mt-4 flex flex-col gap-xl"> |
|||
<div class="article-title-box p-4"> |
|||
<div class="text-3xl">{{ form.title }}</div> |
|||
<div class="text-sm pt-3 text-gray-4 flex gap-xl"> |
|||
<span>{{ form.createTime }}</span> |
|||
<span>浏览：{{ form.actualViews }}</span> |
|||
</div> |
|||
<el-divider style="height: 1px " /> |
|||
</div> |
|||
<div class="content leading-8 text-xl p-3 text-gray-8" v-html="form.content"></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 type {Goods} from "~/api/shop/goods/model"; |
|||
import type {Article} from "~/api/cms/article/model"; |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
|
|||
const route = useRoute(); |
|||
const { query, params } = route; |
|||
const { id } = params; |
|||
const activeName = ref('parameter'); |
|||
const rate = ref(4); |
|||
|
|||
|
|||
// 页面信息 |
|||
const form = ref<Article | any>(); |
|||
|
|||
// 请求数据 |
|||
const { data: info } = await useServerRequest<ApiResult<Article>>('/cms/article/' + id) |
|||
form.value = info.value?.data; |
|||
// form.value.files = JSON.parse(form.value.files); |
|||
form.value.num = 1; |
|||
form.value.radio = '0' |
|||
|
|||
const handleClick = (tab, event) => { |
|||
console.log(tab, event); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.content *{ |
|||
max-width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
|
|||
<!-- 容器 --> |
|||
<div class="container md:w-3/4 m-auto"> |
|||
<div class="flex flex-col"> |
|||
<Breadcrumb :data="form" /> |
|||
<div :class="form.design?.style" 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 class="mt-[60px]" v-if="!form.design"> |
|||
<el-empty description="404 页面不存在2"></el-empty> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {ApiResult} from "~/api"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState"; |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
import type {BreadcrumbItem} from "~/types/global"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm} from "~/utils/common"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const form = useForm(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
// 存在spm(优先级高) |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + getIdBySpm(5)) |
|||
if (nav.value?.data) { |
|||
form.value = nav.value.data |
|||
}else{ |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: route.path}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: `console.log(${JSON.stringify(form.value)})`, |
|||
}, |
|||
], |
|||
}); |
|||
// 面包屑 |
|||
breadcrumb.value = form.value |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
console.log(path,'=>Path') |
|||
|
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -1,11 +0,0 @@ |
|||
<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> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
|
|||
<div class="container flex flex-col w-full md:w-3/4 m-auto my-3"> |
|||
|
|||
<Breadcrumb :data="form" :title="form?.categoryName || '文章列表'" /> |
|||
|
|||
<!-- 左右结构 --> |
|||
<div class="news-box sm:mt-0 mt-2 flex sm:flex-row flex-col justify-between sm:space-x-4"> |
|||
<div class="left sm:w-18/24"> |
|||
<!-- 文章列表 --> |
|||
<div class="news-list"> |
|||
<ul class="infinite-list px-3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled"> |
|||
<li v-for="item in list"> |
|||
<div class="item flex py-3 px-4 gap-xl mb-5 rounded-lg mb-3 bg-white hover:shadow"> |
|||
<div class="item-info py-2 flex flex-col justify-between"> |
|||
<div class="title line-clamp-2 overflow-hidden text-ellipsis group-hover:group-hover:text-ellipsis"> |
|||
<a :href="openSpmUrl(`/product/detail/${item.goodsId}`,item,item?.goodsId)" target="_blank" class="text-xl">{{ item.goodsName }}</a> |
|||
</div> |
|||
<div class="desc max-w-22/24 text-gray-5 sm:block hidden" v-html="item.comments"></div> |
|||
<div class="actions text-gray-4 text-sm flex gap-2xl"> |
|||
<span href="#">{{ item.updateTime }}</span> |
|||
<span href="#">浏览：{{ item.actualViews }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="item-image flex items-center" @click="navigateTo(`/goods/detail/${item.goodsId}`)"> |
|||
<el-image :src="item.image" lazy class="sm:w-[140px] sm:h-[140px] w-[110px] h-[110px] bg-gray-50 cursor-pointer transition rounded-lg sm:rounded-lg ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" fit="contain" /> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
<div class="text-center text-gray-4"> |
|||
<text v-if="disabled">没有更多了</text> |
|||
<text @click="load" v-else>加载更多</text> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right sm:mt-0 mt-4 sm:w-6/24"> |
|||
<!-- 推荐文章 --> |
|||
<div class="category-item bg-white rounded-lg p-3 hover:shadow"> |
|||
<div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2"> |
|||
<el-icon> |
|||
<ElIconLink/> |
|||
</el-icon> |
|||
<text class="ml-2">推荐文章</text> |
|||
</div> |
|||
<div class="flex flex-wrap px-2 py-4"> |
|||
<!-- <div v-for="(item,index) in links" class="flex items-center">--> |
|||
<!-- <a :href="item.url" target="_blank">{{ item.name }}</a>--> |
|||
<!-- <el-divider v-if="index + 1 != links.length" direction="vertical" />--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="category-item mt-4 bg-white rounded-lg p-3 hover:shadow"> |
|||
<div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2"> |
|||
<el-icon> |
|||
<ElIconLink/> |
|||
</el-icon> |
|||
<text class="ml-2">点击排行</text> |
|||
</div> |
|||
<div class="flex flex-wrap px-2 py-4"> |
|||
<!-- <div v-for="(item,index) in links" class="flex items-center">--> |
|||
<!-- <a :href="item.url" target="_blank">{{ item.name }}</a>--> |
|||
<!-- <el-divider v-if="index + 1 != links.length" direction="vertical" />--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <el-divider />--> |
|||
<!-- <div v-if="!list">--> |
|||
<!-- <el-empty description="404 页面不存在"></el-empty>--> |
|||
<!-- </div>--> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {Article} from "~/api/cms/article/model"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
import {useForm, useWebsite} from "~/composables/configState"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm, getPath, openSpmUrl} from "~/utils/common"; |
|||
import type {Goods} from "~/api/shop/goods/model"; |
|||
|
|||
const route = useRoute(); |
|||
|
|||
// 页面信息 |
|||
const list = ref<Goods[]>([]); |
|||
const title = ref(); |
|||
const categoryName = ref(); |
|||
const count = ref() |
|||
const page = ref<number>(1); |
|||
const disabled = ref<boolean>(false); |
|||
const newList = ref<Article[]>(); |
|||
|
|||
// 获取状态 |
|||
const form = useForm(); |
|||
const website = useWebsite(); |
|||
|
|||
const load = () => { |
|||
if(!disabled.value){ |
|||
page.value++; |
|||
// reload(); |
|||
} |
|||
} |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: getPath()}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
|
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: "console.log('Hello World')", |
|||
}, |
|||
], |
|||
}); |
|||
|
|||
// 获取文章分页 |
|||
useServerRequest<ApiResult<PageResult<Goods>>>('/shop/goods/page',{ |
|||
params: { |
|||
page: page.value, |
|||
categoryId: route.query.id |
|||
} |
|||
}).then(res => { |
|||
const data = res.data.value?.data; |
|||
count.value = data?.count; |
|||
if (data?.list.length == 0) { |
|||
disabled.value = true; |
|||
return false; |
|||
} |
|||
if (page.value == 0) { |
|||
list.value = data?.list; |
|||
}else { |
|||
list.value = list.value.concat(data?.list); |
|||
} |
|||
|
|||
// list.value = articleList.value.data?.list; |
|||
list.value.map((d,i)=>{ |
|||
if(i === 0){ |
|||
|
|||
} |
|||
}); |
|||
}) |
|||
|
|||
} |
|||
|
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
console.log(path,'=>Path') |
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
</script> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :layout="layout" /> |
|||
|
|||
<!-- 简单模式 --> |
|||
<PageContainer :form="form" :layout="layout" /> |
|||
|
|||
<!-- 高级模式 --> |
|||
<div class="flex flex-col" v-if="layout?.showLayout"> |
|||
{{ layout }} |
|||
</div> |
|||
|
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {ApiResult} from "~/api"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState"; |
|||
import Breadcrumb from "~/components/Breadcrumb.vue"; |
|||
import type {BreadcrumbItem} from "~/types/global"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm} from "~/utils/common"; |
|||
import PageContainer from "~/components/PageContainer.vue"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const form = useForm(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
const layout = ref<any>(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
// 存在spm(优先级高) |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + getIdBySpm(5)) |
|||
if (nav.value?.data) { |
|||
form.value = nav.value.data |
|||
}else{ |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: route.path}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
} |
|||
// 页面布局 |
|||
if(form.value?.layout){ |
|||
layout.value = JSON.parse(form.value?.layout) |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: `console.log(${JSON.stringify(form.value)})`, |
|||
}, |
|||
], |
|||
}); |
|||
// 面包屑 |
|||
breadcrumb.value = form.value |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
console.log(path,'=>Path') |
|||
|
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -1,67 +0,0 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :data="form" /> |
|||
|
|||
<!-- 容器 --> |
|||
<div class="container md:w-3/4 m-auto"> |
|||
<div class="flex flex-col"> |
|||
<Breadcrumb /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="!form"> |
|||
<el-empty description="404 页面不存在"></el-empty> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {Design} from "~/api/cms/design/model"; |
|||
import type {ApiResult} from "~/api"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import {useConfigInfo, 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 { params } = route; |
|||
const { custom: path } = params; |
|||
|
|||
// 网站配置信息 |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
// 页面信息 |
|||
const form = ref<Navigation | any>(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
|
|||
// 请求数据 |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{ |
|||
query: { |
|||
path: '/' + path |
|||
} |
|||
}) |
|||
|
|||
if (nav.value) { |
|||
// seo |
|||
form.value = nav.value.data |
|||
if(form.value){ |
|||
useHead({ |
|||
title: `${form.value.title} - 网宿软件`, |
|||
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.breadcrumb |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue