gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版本官网优化完成

Browse Source
This commit is contained in:
赵忠林
2025-02-15 02:53:56 +08:00
parent 3e84bbba59
commit 4c601b31a2
55 changed files with 3046 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
pages/item/[id].vue
View File

@@ -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,159 +28,148 @@
: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";
// 引入状态管理
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,
//
const {form, assignFields} = useFormData<CmsWebsite>({
// 站点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) => {
@@ -219,40 +193,37 @@ const reloadComments = async () => {
}
}
const goBack = () => {
router.back();
}
// 读取导航详情
const reload = async () => {
getCmsArticle(navId.value).then(data => {
getCmsWebsiteAll(navId.value).then(data => {
// 获取栏目信息
page.value = data
assignFields(data)
layout.value.banner = data.banner;
page.value = {
image: data.websiteLogo,
title: data.websiteName,
categoryName: '应用市场',
...data,
}
// 应用截图
if(data.files){
const imgArr = JSON.parse(data.files);
imgArr.map((item: any) => {
srcList.value.push(item.url)
})
}
// 设置页面标题
useSeoMeta({
description: data.comments || data.title,
keywords: data.title,
titleTemplate: `${data?.title}` + ' - %s',
description: data.comments || data.websiteName,
keywords: data.websiteName,
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,'加载失败...')
})
@@ -275,4 +246,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>