287 lines
9.0 KiB
Vue
287 lines
9.0 KiB
Vue
<!-- 文章详情 -->
|
|
<template>
|
|
<div class="xl:w-screen-xl m-auto py-4 mt-20">
|
|
<el-page-header :icon="ArrowLeft" @back="goBack">
|
|
<!-- <template #breadcrumb>-->
|
|
<!-- <Breadcrumb :data="form" :categoryName="form?.categoryName" />-->
|
|
<!-- </template>-->
|
|
<template #content>
|
|
<span class="text-large font-600"> {{ page.title }} </span>
|
|
</template>
|
|
<el-row :gutter="24" class="mt-5">
|
|
<el-col :span="18" :xs="24">
|
|
<el-card shadow="hover" class="mb-5">
|
|
<el-descriptions title="参数信息" :column="2" border>
|
|
<el-descriptions-item :span="2" label="产品名称">{{page.title}}</el-descriptions-item>
|
|
<el-descriptions-item v-if="form.isBuy" label="租户ID"><span class="text-orange-500">{{form.title}}</span></el-descriptions-item>
|
|
<el-descriptions-item v-if="form.isBuy" label="插件ID"><span class="text-orange-500">{{form.menuId || '-'}}</span></el-descriptions-item>
|
|
<el-descriptions-item label="控制台"><a class="cursor-pointer" @click="openUrl(`https://${form.domain}`)">{{form.domain}}</a></el-descriptions-item>
|
|
<el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<template v-if="form.accounts && form.accounts.length > 0">
|
|
<div class="h-[24px]"></div>
|
|
<el-descriptions title="登录账号" :column="1" border>
|
|
<template v-for="(item,index) in form.accounts" :key="index">
|
|
<el-descriptions-item :label="item.type" v-if="item.account">
|
|
还没有账号? <el-button type="text" @click="openSpmUrl(`/passport/regis`)">立即注册</el-button>
|
|
</el-descriptions-item>
|
|
</template>
|
|
</el-descriptions>
|
|
</template>
|
|
<template v-if="form.gits && form.gits.length > 0">
|
|
<div class="h-[24px]"></div>
|
|
<el-descriptions title="代码仓库" :column="1" border>
|
|
<el-descriptions-item v-for="(item,index) in form.gits" :key="index" :label="item.title">
|
|
<el-input v-model="item.domain" readonly />
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</template>
|
|
<template v-if="form.files && form.files.length > 0">
|
|
<div class="h-[24px]"></div>
|
|
<el-descriptions title="图文详情" />
|
|
<div v-for="(item,index) in JSON.parse(form.files)" :key="index" class="text item">
|
|
<el-image
|
|
:src="item"
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="srcList"
|
|
:initial-index="4"
|
|
fit="contain"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template v-if="form.content">
|
|
<p v-html="form.content" class="content"></p>
|
|
</template>
|
|
</el-card>
|
|
<!-- 产品评论 -->
|
|
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
|
|
</el-col>
|
|
<el-col :span="6" :xs="24">
|
|
<el-card shadow="hover" class="mb-5">
|
|
<template #header>
|
|
<div class="card-header font-bold text-xl">
|
|
<span>推荐产品</span>
|
|
</div>
|
|
</template>
|
|
<!-- <el-space class="flex items-center">-->
|
|
<!-- <div class="avatar">-->
|
|
<!-- <el-avatar :size="55" :src="form.image"/>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="flex flex-col">-->
|
|
<!-- <span class="font-bold text-lg text-gray-600">{{ form.title }}</span>-->
|
|
<!-- <span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </el-space>-->
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-page-header>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {ApiResult, PageResult} from "~/api";
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import {useLayout, usePage, useWebsite} from "~/composables/configState";
|
|
import type {BreadcrumbItem} from "~/types/global";
|
|
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
|
|
import useFormData from "~/utils/use-form-data";
|
|
import Comments from './components/Comments.vue';
|
|
import type {CompanyComment} from "~/api/system/companyComment/model";
|
|
import {getCmsArticle, pageCmsArticle} from "~/api/cms/cmsArticle";
|
|
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
|
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
|
|
|
|
// 引入状态管理
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const page = usePage();
|
|
const layout = useLayout();
|
|
const category = ref<CmsNavigation[]>([]);
|
|
const i18n = useI18n();
|
|
const total = ref(0);
|
|
const list = ref<CmsArticle[]>([]);
|
|
const website = useWebsite();
|
|
const breadcrumb = ref<BreadcrumbItem>();
|
|
const comments = ref<CompanyComment[]>([]);
|
|
const commentsTotal = ref(0);
|
|
const commentsPage = ref(1);
|
|
const navId = ref();
|
|
const activeName = ref();
|
|
const url =
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
const srcList = ref<any[]>([]);
|
|
|
|
// 配置信息
|
|
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,
|
|
// 虚拟阅读量
|
|
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 where = reactive<CmsArticleParam>({
|
|
keywords: '',
|
|
page: 1,
|
|
limit: 20,
|
|
status: 0,
|
|
parentId: undefined,
|
|
categoryId: undefined,
|
|
lang: i18n.locale.value
|
|
});
|
|
|
|
const doComments = async (page: any) => {
|
|
commentsPage.value = page;
|
|
await reloadComments();
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.back(); // 返回上一页
|
|
}
|
|
|
|
// 加载评论
|
|
const reloadComments = async () => {
|
|
const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CompanyComment>>>('/system/company-comment/page', {
|
|
params: {
|
|
companyId: getIdBySpm(5),
|
|
page: commentsPage.value,
|
|
// status: 1
|
|
}
|
|
})
|
|
if(commentsResponse.value && commentsResponse.value?.data){
|
|
comments.value = commentsResponse.value?.data?.list
|
|
commentsTotal.value = commentsResponse.value?.data?.count;
|
|
}
|
|
}
|
|
|
|
// 读取导航详情
|
|
const reload = async () => {
|
|
getCmsArticle(navId.value).then(data => {
|
|
// 获取栏目信息
|
|
page.value = data
|
|
assignFields(data)
|
|
layout.value.banner = data.banner;
|
|
|
|
// 设置页面标题
|
|
useSeoMeta({
|
|
description: data.comments || data.title,
|
|
keywords: data.title,
|
|
titleTemplate: `${data?.title}` + ' - %s',
|
|
})
|
|
|
|
// 二级栏目分类
|
|
// listCmsNavigation({
|
|
// parentId: data.parentId == 0 ? data.navigationId : data.parentId
|
|
// }).then(categoryData => {
|
|
// category.value = categoryData;
|
|
// // 加载文章列表
|
|
// if(data.parentId == 0 && category.value.length > 0){
|
|
// where.parentId = data.navigationId;
|
|
// }else {
|
|
// where.categoryId = data.navigationId;
|
|
// }
|
|
// pageCmsArticle(where).then(response => {
|
|
// if(response){
|
|
// total.value = response?.count;
|
|
// list.value = response?.list;
|
|
// }
|
|
// })
|
|
// })
|
|
|
|
}).catch(err => {
|
|
console.log(err,'加载失败...')
|
|
})
|
|
}
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
(id) => {
|
|
navId.value = getNavIdByParamsId(id);
|
|
reload();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.content {
|
|
img {
|
|
max-width: 100%;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
</style>
|