You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
7.7 KiB
256 lines
7.7 KiB
<!-- 文章详情 -->
|
|
<template>
|
|
<PageBanner :form="form" @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="hover:border-green-50 hover:border-2 mb-5">
|
|
<template #header>
|
|
<div class="card-header font-bold text-xl">
|
|
<span>应用介绍</span>
|
|
</div>
|
|
</template>
|
|
<el-descriptions title="应用参数" :column="2" border>
|
|
<el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<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>
|
|
<div class="h-[24px]"></div>
|
|
<el-descriptions title="安装说明" />
|
|
<p v-html="form.content" class="content"></p>
|
|
</el-card>
|
|
<el-card shadow="hover" v-if="form.files?.length" class="hover:border-green-50 hover:border-2 mb-5">
|
|
<template #header>
|
|
<div class="card-header font-bold text-xl">
|
|
<span>应用截图</span>
|
|
</div>
|
|
</template>
|
|
<div class="flex gap-xl">
|
|
<template v-for="(item,index) in form.files" :key="index" class="text item">
|
|
<el-image
|
|
:src="item.url"
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="srcList"
|
|
:initial-index="4"
|
|
fit="contain"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</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="hover:border-green-50 hover:border-2 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.companyLogo"/>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-bold text-lg text-gray-600">{{ form.companyName }}</span>
|
|
<span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>
|
|
</div>
|
|
</el-space>
|
|
<div class="flex flex-col text-gray-500 justify-between leading-7 mt-3">
|
|
<el-space class="flex items-center"><el-icon><Download /></el-icon>下载：6</el-space>
|
|
<el-space class="flex items-center"><el-icon><Star /></el-icon>收藏：0</el-space>
|
|
<el-space class="flex items-center"><el-icon><Coin /></el-icon>赞赏：0</el-space>
|
|
<el-space class="flex items-center"><el-icon><Tickets /></el-icon>文档：0</el-space>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {Cpu,Download,Star,Coin,Tickets} from '@element-plus/icons-vue'
|
|
import type {ApiResult, PageResult} from "~/api";
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import {useWebsite} from "~/composables/configState";
|
|
import type {BreadcrumbItem} from "~/types/global";
|
|
import {getIdBySpm} from "~/utils/common";
|
|
import useFormData from "~/utils/use-form-data";
|
|
import PageBanner from './components/PageBanner.vue';
|
|
import Comments from './components/Comments.vue';
|
|
import type {Company} from "~/api/system/company/model";
|
|
import type {CompanyComment} from "~/api/system/companyComment/model";
|
|
|
|
// 引入状态管理
|
|
const route = useRoute();
|
|
const website = useWebsite();
|
|
const breadcrumb = ref<BreadcrumbItem>();
|
|
const comments = ref<CompanyComment[]>([]);
|
|
const commentsTotal = ref(0);
|
|
const commentsPage = ref(1);
|
|
const activeName = ref();
|
|
const url =
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
const srcList = ref<any[]>([]);
|
|
|
|
// 配置信息
|
|
const {form, assignFields} = useFormData<Company>({
|
|
companyId: undefined,
|
|
type: undefined,
|
|
shortName: undefined,
|
|
companyName: undefined,
|
|
companyType: undefined,
|
|
companyTypeMultiple: undefined,
|
|
appType: undefined,
|
|
companyLogo: undefined,
|
|
image: undefined,
|
|
files: undefined,
|
|
content: undefined,
|
|
companyCode: undefined,
|
|
domain: undefined,
|
|
phone: undefined,
|
|
tel: undefined,
|
|
email: undefined,
|
|
InvoiceHeader: undefined,
|
|
startTime: undefined,
|
|
expirationTime: undefined,
|
|
version: undefined,
|
|
versionName: undefined,
|
|
versionCode: undefined,
|
|
members: undefined,
|
|
storage: undefined,
|
|
storageMax: undefined,
|
|
buys: undefined,
|
|
clicks: undefined,
|
|
users: undefined,
|
|
departments: undefined,
|
|
industryParent: undefined,
|
|
industryChild: undefined,
|
|
country: undefined,
|
|
province: undefined,
|
|
city: undefined,
|
|
region: undefined,
|
|
address: undefined,
|
|
latitude: undefined,
|
|
longitude: undefined,
|
|
businessEntity: undefined,
|
|
comments: undefined,
|
|
authentication: undefined,
|
|
industryId: undefined,
|
|
industryName: undefined,
|
|
status: undefined,
|
|
userId: undefined,
|
|
official: undefined,
|
|
price: undefined,
|
|
planId: undefined,
|
|
sortNumber: undefined,
|
|
authoritative: undefined,
|
|
merchantId: undefined,
|
|
tenantId: undefined,
|
|
tenantName: undefined,
|
|
tenantCode: undefined,
|
|
modules: undefined,
|
|
requestUrl: undefined,
|
|
socketUrl: undefined,
|
|
serverUrl: undefined,
|
|
modulesUrl: undefined,
|
|
merchantUrl: undefined,
|
|
websiteUrl: undefined,
|
|
mpWeixinCode: undefined,
|
|
mpAlipayCode: undefined,
|
|
h5Code: undefined,
|
|
androidUrl: undefined,
|
|
iosUrl: undefined,
|
|
avatar: undefined,
|
|
nickname: undefined,
|
|
code: undefined,
|
|
createTime: undefined,
|
|
updateTime: undefined,
|
|
password: undefined,
|
|
password2: undefined,
|
|
collection: undefined,
|
|
recommend: undefined,
|
|
title: undefined,
|
|
parentName: undefined,
|
|
categoryName: undefined,
|
|
parameters: undefined,
|
|
links: undefined,
|
|
gits: undefined
|
|
});
|
|
const doComments = async (page: any) => {
|
|
commentsPage.value = page;
|
|
await reloadComments();
|
|
}
|
|
|
|
|
|
// 加载评论
|
|
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 () => {
|
|
|
|
// 存在spm(优先级高)
|
|
const {data: item} = await useServerRequest<ApiResult<Company>>('/system/company/' + getIdBySpm(5))
|
|
if (item.value?.data) {
|
|
assignFields(item.value.data)
|
|
form.title = item.value?.data?.title;
|
|
form.parentName = '产品';
|
|
form.categoryName = '产品详情';
|
|
if (item.value.data.files) {
|
|
form.files = JSON.parse(item.value?.data?.files)
|
|
srcList.value = form.files?.map(d => d.url)
|
|
}
|
|
form.comments = item.value?.data?.comments;
|
|
}
|
|
|
|
await reloadComments();
|
|
|
|
// seo
|
|
useHead({
|
|
title: `${form.tenantName} - ${website.value.websiteName}`,
|
|
bodyAttrs: {
|
|
class: "page-container",
|
|
}
|
|
});
|
|
// 面包屑
|
|
breadcrumb.value = form
|
|
}
|
|
|
|
watch(
|
|
() => route.path,
|
|
(path) => {
|
|
console.log(path, '=>Path')
|
|
|
|
reload();
|
|
},
|
|
{immediate: true}
|
|
);
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.content {
|
|
img {
|
|
max-width: 100%;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
</style>
|