1
This commit is contained in:
230
pages/xieyi/[id].vue
Normal file
230
pages/xieyi/[id].vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
// 引入状态管理
|
||||
import { getCmsArticle } from '~/api/cms/cmsArticle';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
import { getNavIdByParamsId } from '~/utils/common';
|
||||
import { listCmsNavigation } from '~/api/cms/cmsNavigation';
|
||||
import useFormData from '~/utils/use-form-data';
|
||||
import type { CmsArticle } from '~/api/cms/cmsArticle/model';
|
||||
import Content from '~/components/Content.vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: false
|
||||
});
|
||||
|
||||
const articleId = ref();
|
||||
|
||||
// 配置信息
|
||||
const { form, assignFields } = useFormData<CmsArticle>({
|
||||
// 文章id
|
||||
articleId: undefined,
|
||||
// 文章模型
|
||||
model: undefined,
|
||||
// 文章标题
|
||||
title: undefined,
|
||||
// 分类类型
|
||||
type: undefined,
|
||||
// 展现方式
|
||||
showType: undefined,
|
||||
// 文章类型
|
||||
categoryId: undefined,
|
||||
// 文章分类
|
||||
categoryName: undefined,
|
||||
parentId: undefined,
|
||||
// 封面图
|
||||
image: undefined,
|
||||
// 附件
|
||||
files: undefined,
|
||||
// 附件
|
||||
fileList: [],
|
||||
// 缩列图
|
||||
thumbnail: undefined,
|
||||
// 视频地址
|
||||
video: undefined,
|
||||
// 上传的文件类型
|
||||
accept: undefined,
|
||||
// 来源
|
||||
source: undefined,
|
||||
// 标签
|
||||
tags: undefined,
|
||||
// 文章内容
|
||||
content: undefined,
|
||||
// 文章编辑器
|
||||
editor: undefined,
|
||||
// 虚拟阅读量
|
||||
virtualViews: undefined,
|
||||
// 实际阅读量
|
||||
actualViews: undefined,
|
||||
// 访问权限
|
||||
permission: undefined,
|
||||
// 访问密码
|
||||
password: undefined,
|
||||
password2: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 用户昵称
|
||||
nickname: undefined,
|
||||
// 账号
|
||||
username: undefined,
|
||||
// 用户头像
|
||||
// userAvatar: undefined,
|
||||
author: undefined,
|
||||
// 所属门店ID
|
||||
shopId: undefined,
|
||||
//
|
||||
likes: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 更新时间
|
||||
updateTime: undefined,
|
||||
// 租户ID
|
||||
tenantId: undefined,
|
||||
// 租户名称
|
||||
tenantName: undefined,
|
||||
// 租户logo
|
||||
logo: undefined,
|
||||
// 详情页路径
|
||||
detail: undefined
|
||||
});
|
||||
|
||||
// 请求数据
|
||||
const reload = async () => {
|
||||
await getCmsArticle(articleId.value)
|
||||
.then(data => {
|
||||
assignFields(data);
|
||||
})
|
||||
.catch(() => {
|
||||
navigateTo('/404');
|
||||
});
|
||||
|
||||
// seo
|
||||
useSeoMeta({
|
||||
description: form?.comments,
|
||||
keywords: form.title,
|
||||
titleTemplate: `${form?.title}` + ' - %s'
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
id => {
|
||||
articleId.value = getNavIdByParamsId(id);
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="title">{{ form?.title }}</h1>
|
||||
<div class="head"></div>
|
||||
<!-- 内容组件 -->
|
||||
<Content class="content text-lg py-5" :editor="form?.editor" :data="form.content" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
background-color: #999;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #27ae60;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #aaa;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #d5d5d5;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 15px 5px 6px;
|
||||
text-align: left;
|
||||
vertical-align: baseline;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
table td {
|
||||
background-color: #efefef;
|
||||
border: 1px solid #aaa;
|
||||
padding: 6px 15px 6px 6px;
|
||||
vertical-align: text-top;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: #fff;
|
||||
padding: 20px 40px;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px 0;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
font-weight: 100;
|
||||
font-family:
|
||||
PingFang SC,
|
||||
Verdana,
|
||||
Helvetica Neue,
|
||||
Microsoft Yahei,
|
||||
Hiragino Sans GB,
|
||||
Microsoft Sans Serif,
|
||||
WenQuanYi Micro Hei,
|
||||
sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head {
|
||||
line-height: 50px;
|
||||
margin: 0 0 40px 0;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.foot {
|
||||
padding: 20px 0;
|
||||
line-height: 24px;
|
||||
border-top: 1px dashed #ccc;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
230
pages/xieyi/detail/[id].vue
Normal file
230
pages/xieyi/detail/[id].vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
// 引入状态管理
|
||||
import { getCmsArticle } from '~/api/cms/cmsArticle';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
import { getNavIdByParamsId } from '~/utils/common';
|
||||
import { listCmsNavigation } from '~/api/cms/cmsNavigation';
|
||||
import useFormData from '~/utils/use-form-data';
|
||||
import type { CmsArticle } from '~/api/cms/cmsArticle/model';
|
||||
import Content from '~/components/Content.vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: false
|
||||
});
|
||||
|
||||
const articleId = ref();
|
||||
|
||||
// 配置信息
|
||||
const { form, assignFields } = useFormData<CmsArticle>({
|
||||
// 文章id
|
||||
articleId: undefined,
|
||||
// 文章模型
|
||||
model: undefined,
|
||||
// 文章标题
|
||||
title: undefined,
|
||||
// 分类类型
|
||||
type: undefined,
|
||||
// 展现方式
|
||||
showType: undefined,
|
||||
// 文章类型
|
||||
categoryId: undefined,
|
||||
// 文章分类
|
||||
categoryName: undefined,
|
||||
parentId: undefined,
|
||||
// 封面图
|
||||
image: undefined,
|
||||
// 附件
|
||||
files: undefined,
|
||||
// 附件
|
||||
fileList: [],
|
||||
// 缩列图
|
||||
thumbnail: undefined,
|
||||
// 视频地址
|
||||
video: undefined,
|
||||
// 上传的文件类型
|
||||
accept: undefined,
|
||||
// 来源
|
||||
source: undefined,
|
||||
// 标签
|
||||
tags: undefined,
|
||||
// 文章内容
|
||||
content: undefined,
|
||||
// 文章编辑器
|
||||
editor: undefined,
|
||||
// 虚拟阅读量
|
||||
virtualViews: undefined,
|
||||
// 实际阅读量
|
||||
actualViews: undefined,
|
||||
// 访问权限
|
||||
permission: undefined,
|
||||
// 访问密码
|
||||
password: undefined,
|
||||
password2: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 用户昵称
|
||||
nickname: undefined,
|
||||
// 账号
|
||||
username: undefined,
|
||||
// 用户头像
|
||||
// userAvatar: undefined,
|
||||
author: undefined,
|
||||
// 所属门店ID
|
||||
shopId: undefined,
|
||||
//
|
||||
likes: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 更新时间
|
||||
updateTime: undefined,
|
||||
// 租户ID
|
||||
tenantId: undefined,
|
||||
// 租户名称
|
||||
tenantName: undefined,
|
||||
// 租户logo
|
||||
logo: undefined,
|
||||
// 详情页路径
|
||||
detail: undefined
|
||||
});
|
||||
|
||||
// 请求数据
|
||||
const reload = async () => {
|
||||
await getCmsArticle(articleId.value)
|
||||
.then(data => {
|
||||
assignFields(data);
|
||||
})
|
||||
.catch(() => {
|
||||
navigateTo('/404');
|
||||
});
|
||||
|
||||
// seo
|
||||
useSeoMeta({
|
||||
description: form?.comments,
|
||||
keywords: form.title,
|
||||
titleTemplate: `${form?.title}` + ' - %s'
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
id => {
|
||||
articleId.value = getNavIdByParamsId(id);
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="title">{{ form?.title }}</h1>
|
||||
<div class="head"></div>
|
||||
<!-- 内容组件 -->
|
||||
<Content class="content text-lg py-5" :editor="form?.editor" :data="form.content" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
background-color: #999;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #27ae60;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #aaa;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #d5d5d5;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 15px 5px 6px;
|
||||
text-align: left;
|
||||
vertical-align: baseline;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
table td {
|
||||
background-color: #efefef;
|
||||
border: 1px solid #aaa;
|
||||
padding: 6px 15px 6px 6px;
|
||||
vertical-align: text-top;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: #fff;
|
||||
padding: 20px 40px;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px 0;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
font-weight: 100;
|
||||
font-family:
|
||||
PingFang SC,
|
||||
Verdana,
|
||||
Helvetica Neue,
|
||||
Microsoft Yahei,
|
||||
Hiragino Sans GB,
|
||||
Microsoft Sans Serif,
|
||||
WenQuanYi Micro Hei,
|
||||
sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head {
|
||||
line-height: 50px;
|
||||
margin: 0 0 40px 0;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.foot {
|
||||
padding: 20px 0;
|
||||
line-height: 24px;
|
||||
border-top: 1px dashed #ccc;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user