新增:开发者中心功能、md编辑器等。
This commit is contained in:
@@ -1,46 +1,43 @@
|
||||
<template>
|
||||
<!-- 主体部分 -->
|
||||
<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="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"/>
|
||||
<AppInfo :form="form" />
|
||||
|
||||
<div class="screen-item my-6">
|
||||
<el-descriptions title="截屏" />
|
||||
<el-scrollbar>
|
||||
<div class="flex" v-if="form.files">
|
||||
<div id="screen-item" class="screen-item my-6">
|
||||
<el-descriptions title="截屏" class="mt-5" />
|
||||
<el-scrollbar class="bg-white p-5">
|
||||
<div class="flex" v-if="form.files">
|
||||
<el-image
|
||||
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"
|
||||
:preview-src-list="srcList"
|
||||
:initial-index="4"
|
||||
fit="contain"
|
||||
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"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="srcList"
|
||||
:initial-index="4"
|
||||
fit="contain"
|
||||
/>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-descriptions title="详细介绍" class="mt-5" />
|
||||
<MdPreview id="preview-only" class="px-3" :modelValue="form.content" />
|
||||
</div>
|
||||
|
||||
<!-- 评分及评价 -->
|
||||
<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 { ArrowLeft,View, Monitor, Search,Cpu, Platform, Avatar } from '@element-plus/icons-vue'
|
||||
@@ -55,8 +52,9 @@ import Comments from './components/Comments.vue';
|
||||
import type {CompanyComment} from "~/api/system/companyComment/model";
|
||||
import {getCmsWebsiteAll} from "~/api/cms/cmsWebsite";
|
||||
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
||||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
||||
import Banner from "~/components/Banner.vue";
|
||||
import { MdPreview } from 'md-editor-v3';
|
||||
// preview.css相比style.css少了编辑器那部分样式
|
||||
import 'md-editor-v3/lib/preview.css';
|
||||
|
||||
// 引入状态管理
|
||||
const route = useRoute();
|
||||
@@ -199,7 +197,7 @@ const goBack = () => {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 读取导航详情
|
||||
// 读取项目详情
|
||||
const reload = async () => {
|
||||
getCmsWebsiteAll(navId.value).then(data => {
|
||||
// 获取栏目信息
|
||||
@@ -215,7 +213,7 @@ const reload = async () => {
|
||||
if(data.files){
|
||||
const imgArr = JSON.parse(data.files);
|
||||
imgArr.map((item: any) => {
|
||||
srcList.value.push(item.url)
|
||||
srcList.value.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user