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> |
<template> |
||||
<!-- Banner --> |
<!-- Banner --> |
||||
<Banner :data="form" /> |
<Banner :data="form" /> |
||||
{{ 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"> |
||||
@ -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