新版本官网优化完成
This commit is contained in:
@@ -1,41 +1,26 @@
|
||||
<!-- 文章详情 -->
|
||||
<template>
|
||||
<PageBanner :form="page" @done="reload"/>
|
||||
<div class="page-main md:w-screen-xl m-auto p-3">
|
||||
<el-row :gutter="24">
|
||||
<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">
|
||||
<!-- 主体部分 -->
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-20">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 产品详情 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="h-[32px]"></div>
|
||||
</template>
|
||||
<PageBanner :form="page" @done="reload"/>
|
||||
<el-divider />
|
||||
<AppInfo :form="form" />
|
||||
|
||||
<div class="screen-item my-6">
|
||||
<el-descriptions title="截屏" />
|
||||
<el-scrollbar>
|
||||
<div class="flex" v-if="form.files">
|
||||
<el-image
|
||||
:src="item"
|
||||
v-for="(item,index) in JSON.parse(form.files)"
|
||||
:key="index"
|
||||
class="scrollbar-item w-[240px] max-h-[625px] mr-4 mb-3"
|
||||
:src="item.url"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
@@ -43,161 +28,150 @@
|
||||
: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>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<p v-html="form?.content || '介绍'" class="content"></p>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<!-- 评分及评价 -->
|
||||
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
|
||||
<div class="h-[100px]"></div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {Cpu,Download,Star,Coin,Tickets} from '@element-plus/icons-vue'
|
||||
import { ArrowLeft,View, Monitor, Search,Cpu, Platform, Avatar } from '@element-plus/icons-vue'
|
||||
import type {ApiResult, PageResult} from "~/api";
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import {useLayout, usePage, useWebsite} from "~/composables/configState";
|
||||
import type {BreadcrumbItem} from "~/types/global";
|
||||
import {usePage} from "~/composables/configState";
|
||||
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
|
||||
import useFormData from "~/utils/use-form-data";
|
||||
import PageBanner from './components/PageBanner.vue';
|
||||
import AppInfo from './components/AppInfo.vue';
|
||||
import Comments from './components/Comments.vue';
|
||||
import type {Company} from "~/api/system/company/model";
|
||||
import type {CompanyComment} from "~/api/system/companyComment/model";
|
||||
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
|
||||
import {getCmsArticle, pageCmsArticle} from "~/api/cms/cmsArticle";
|
||||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
||||
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
|
||||
import {getCmsWebsiteAll} from "~/api/cms/cmsWebsite";
|
||||
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
||||
import {getCmsWebsite} from "~/api/cms/cmsWebsite";
|
||||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
||||
import Banner from "~/components/Banner.vue";
|
||||
|
||||
// 引入状态管理
|
||||
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<CmsWebsite>({
|
||||
// 文章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,
|
||||
//
|
||||
// 站点ID
|
||||
websiteId: undefined,
|
||||
// 网站名称
|
||||
websiteName: undefined,
|
||||
// 网站标识
|
||||
websiteCode: undefined,
|
||||
// 网站LOGO
|
||||
websiteIcon: undefined,
|
||||
// 网站LOGO
|
||||
websiteLogo: undefined,
|
||||
// 网站LOGO(深色模式)
|
||||
websiteDarkLogo: undefined,
|
||||
// 网站类型
|
||||
websiteType: undefined,
|
||||
// 评分
|
||||
rate: undefined,
|
||||
// 点赞数
|
||||
likes: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 访问量
|
||||
clicks: undefined,
|
||||
// 下载量
|
||||
downloads: undefined,
|
||||
// 网站截图
|
||||
files: undefined,
|
||||
// 网站关键词
|
||||
keywords: undefined,
|
||||
// 域名前缀
|
||||
prefix: undefined,
|
||||
// 绑定域名
|
||||
domain: undefined,
|
||||
// 全局样式
|
||||
style: undefined,
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 应用版本 10免费版 20专业版 30永久授权
|
||||
version: undefined,
|
||||
// 服务到期时间
|
||||
expirationTime: undefined,
|
||||
// 模版ID
|
||||
templateId: undefined,
|
||||
// 行业类型(父级)
|
||||
industryParent: undefined,
|
||||
// 行业类型(子级)
|
||||
industryChild: undefined,
|
||||
// 企业ID
|
||||
companyId: undefined,
|
||||
// 所在国家
|
||||
country: undefined,
|
||||
// 所在省份
|
||||
province: undefined,
|
||||
// 所在城市
|
||||
city: undefined,
|
||||
// 所在辖区
|
||||
region: undefined,
|
||||
// 经度
|
||||
longitude: undefined,
|
||||
// 纬度
|
||||
latitude: undefined,
|
||||
// 街道地址
|
||||
address: undefined,
|
||||
// 联系电话
|
||||
phone: undefined,
|
||||
// 电子邮箱
|
||||
email: undefined,
|
||||
// ICP备案号
|
||||
icpNo: undefined,
|
||||
// 公安备案
|
||||
policeNo: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 状态
|
||||
// 是否推荐
|
||||
recommend: undefined,
|
||||
// 运行状态
|
||||
running: undefined,
|
||||
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
||||
status: undefined,
|
||||
// 维护说明
|
||||
statusText: undefined,
|
||||
// 关闭说明
|
||||
statusClose: undefined,
|
||||
// 状态图标
|
||||
statusIcon: undefined,
|
||||
// 全局样式
|
||||
styles: undefined,
|
||||
content: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: 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
|
||||
// 网站配置
|
||||
config: undefined,
|
||||
topNavs: undefined,
|
||||
bottomNavs: undefined,
|
||||
loginUser: undefined
|
||||
});
|
||||
|
||||
const doComments = async (page: any) => {
|
||||
@@ -221,9 +195,13 @@ const reloadComments = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 读取导航详情
|
||||
const reload = async () => {
|
||||
getCmsWebsite(navId.value).then(data => {
|
||||
getCmsWebsiteAll(navId.value).then(data => {
|
||||
// 获取栏目信息
|
||||
assignFields(data)
|
||||
page.value = {
|
||||
@@ -231,7 +209,15 @@ const reload = async () => {
|
||||
title: data.websiteName,
|
||||
categoryName: '应用市场',
|
||||
...data,
|
||||
}
|
||||
}
|
||||
|
||||
// 应用截图
|
||||
if(data.files){
|
||||
const imgArr = JSON.parse(data.files);
|
||||
imgArr.map((item: any) => {
|
||||
srcList.value.push(item.url)
|
||||
})
|
||||
}
|
||||
|
||||
// 设置页面标题
|
||||
useSeoMeta({
|
||||
@@ -240,25 +226,6 @@ const reload = async () => {
|
||||
titleTemplate: `${data?.websiteName}` + ' - %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,'加载失败...')
|
||||
})
|
||||
@@ -281,4 +248,14 @@ watch(
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.scrollbar-flex-content {
|
||||
display: flex;
|
||||
}
|
||||
.scrollbar-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user