|
@@ -1,24 +1,33 @@
|
|
<script setup lang='ts'>
|
|
<script setup lang='ts'>
|
|
import playIcon from '@/assets/images/play.png';
|
|
import playIcon from '@/assets/images/play.png';
|
|
import pauseIcon from '@/assets/images/pause.png';
|
|
import pauseIcon from '@/assets/images/pause.png';
|
|
|
|
+import { showToast } from 'vant';
|
|
|
|
+import { TreasureApi } from '@/api/api/treasure';
|
|
|
|
|
|
|
|
|
|
// import { DynamicApi } from "@/api/api/dynamic/index";
|
|
// import { DynamicApi } from "@/api/api/dynamic/index";
|
|
// import { showToast } from "vant";
|
|
// import { showToast } from "vant";
|
|
|
|
|
|
-const router = useRouter()
|
|
|
|
-// const route = useRoute()
|
|
|
|
|
|
+const route = useRoute()
|
|
|
|
|
|
|
|
|
|
export type TreasureDetailType = {
|
|
export type TreasureDetailType = {
|
|
|
|
+ age: string,
|
|
|
|
+ createTime: string,
|
|
|
|
+ creatorId: number,
|
|
|
|
+ creatorName: string,
|
|
|
|
+ description: string,
|
|
|
|
+ dirCode: string,
|
|
|
|
+ fileIds: string,
|
|
|
|
+ fileTypes: string,
|
|
id: number,
|
|
id: number,
|
|
- title: string,
|
|
|
|
- type: string,
|
|
|
|
- era: string,
|
|
|
|
- character: string,
|
|
|
|
- info: string,
|
|
|
|
|
|
+ name: string,
|
|
|
|
+ publishDate: string,
|
|
size: string,
|
|
size: string,
|
|
- themb: string,
|
|
|
|
|
|
+ texture: string,
|
|
|
|
+ thumb: string,
|
|
|
|
+ type: string,
|
|
|
|
+ updateTime: string
|
|
files: {
|
|
files: {
|
|
images: string[],
|
|
images: string[],
|
|
moduleUrl: string,
|
|
moduleUrl: string,
|
|
@@ -26,7 +35,6 @@ export type TreasureDetailType = {
|
|
// 可能是单个可能是多个
|
|
// 可能是单个可能是多个
|
|
videos: string[],
|
|
videos: string[],
|
|
}
|
|
}
|
|
- releaseTime: string
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const dynamicDetail = ref({} as TreasureDetailType)
|
|
const dynamicDetail = ref({} as TreasureDetailType)
|
|
@@ -72,36 +80,7 @@ const audioChange = () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-onBeforeMount(async () => {
|
|
|
|
- // 获取活动详情
|
|
|
|
- // const res: any = await DynamicApi.getDetailById(Number(route.params.id))
|
|
|
|
- // if (res.code == 0) {
|
|
|
|
- // dynamicDetail.value = res.data
|
|
|
|
-
|
|
|
|
- // } else {
|
|
|
|
- // showToast('活动信息获取失败')
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- dynamicDetail.value = {
|
|
|
|
- id: 0,
|
|
|
|
- title: '《瓜洲马头新建石堤记》碑拓片',
|
|
|
|
- type: '全部',
|
|
|
|
- era: '朝代',
|
|
|
|
- character: '质地',
|
|
|
|
- info: '<p>八骏马图周器垒</p><p> 创造者、设计者:戴嘉林 高:38.8cm 口:12.1cm 足:14cm</p><p> 2017年11月8日,国家主席习近平和夫人彭丽媛陪同来华进行国事访问的美国总统特朗普和夫人梅拉尼娅一同参观故宫。宾主来到畅音阁,沿途欣赏了景泰蓝工艺精品和制作技艺展示,并尝试为景泰蓝《八骏马周器垒》,《国色天香》瓶点蓝,领略中华文化。</p><p></p>',
|
|
|
|
- size: '志盖边长 40.5 厘米、厚 8.5 厘米、志石边长 41 厘米、厚 9.5 厘米',
|
|
|
|
- themb: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
|
|
|
|
- files: {
|
|
|
|
- images: ['https://super.4dage.com/data/TEST/edit/20230407_114029890.jpg', 'https://super.4dage.com/data/TEST/edit/20230524_155459428.png'],
|
|
|
|
- moduleUrl: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HG01',
|
|
|
|
- audio: 'https://houseoss.4dkankan.com/project/bjfljtl/audio/bgMusic.mp3',
|
|
|
|
- // 可能是单个可能是多个
|
|
|
|
- videos: ['https://super.4dage.com/data/TEST/edit/20230228_161113155.mp4'],
|
|
|
|
- },
|
|
|
|
- releaseTime: '2023-12-27'
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 初始化显示状态
|
|
|
|
|
|
+const initShowState = () => {
|
|
if (dynamicDetail.value.files.moduleUrl != '') {
|
|
if (dynamicDetail.value.files.moduleUrl != '') {
|
|
initModule()
|
|
initModule()
|
|
} else if (dynamicDetail.value.files.images.length > 0) {
|
|
} else if (dynamicDetail.value.files.images.length > 0) {
|
|
@@ -109,8 +88,82 @@ onBeforeMount(async () => {
|
|
} else if (dynamicDetail.value.files.videos.length > 0) {
|
|
} else if (dynamicDetail.value.files.videos.length > 0) {
|
|
initVideos()
|
|
initVideos()
|
|
}
|
|
}
|
|
-
|
|
|
|
audioBgUrl.value = dynamicDetail.value.files.audio
|
|
audioBgUrl.value = dynamicDetail.value.files.audio
|
|
|
|
+
|
|
|
|
+ console.log(dynamicDetail.value)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const getDetailById = async () => {
|
|
|
|
+ const res: any = await TreasureApi.getDetailById(Number(route.params.id))
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ dynamicDetail.value = res.data.entity
|
|
|
|
+
|
|
|
|
+ dynamicDetail.value.files = {
|
|
|
|
+ images: [],
|
|
|
|
+ moduleUrl: '',
|
|
|
|
+ audio: '',
|
|
|
|
+ // 可能是单个可能是多个
|
|
|
|
+ videos: [],
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 视频集合
|
|
|
|
+ dynamicDetail.value.files.videos = res.data.file.filter((item: any) => {
|
|
|
|
+ return item.filePath.includes('.mp4')
|
|
|
|
+ })
|
|
|
|
+ // 图片集合
|
|
|
|
+ dynamicDetail.value.files.images = res.data.file.filter((item: any) => {
|
|
|
|
+ return item.filePath.includes('.png') || item.filePath.includes('.jpg') || item.filePath.includes('.jpeg')
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 音频链接
|
|
|
|
+ dynamicDetail.value.files.audio = res.data.file.filter((item: any) => {
|
|
|
|
+ return item.filePath.includes('.mp3') || item.type === 'audio'
|
|
|
|
+ })[0]
|
|
|
|
+
|
|
|
|
+ // 模型链接
|
|
|
|
+ dynamicDetail.value.files.moduleUrl = res.data.file.filter((item: any) => {
|
|
|
|
+ return item.type === 'model'
|
|
|
|
+ })[0]
|
|
|
|
+
|
|
|
|
+ initShowState()
|
|
|
|
+ } else {
|
|
|
|
+ showToast(res.msg)
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onBeforeMount(async () => {
|
|
|
|
+ getDetailById()
|
|
|
|
+
|
|
|
|
+ // dynamicDetail.value = {
|
|
|
|
+ // age: '唐朝',
|
|
|
|
+ // createTime: '2024-04-19 09:03:01',
|
|
|
|
+ // creatorId: 1,
|
|
|
|
+ // creatorName: '',
|
|
|
|
+ // description: '故明威将军大河卫指挥佥事许公墓志拓片故明威将军大河卫指挥佥事许公墓志拓片',
|
|
|
|
+ // dirCode: '',
|
|
|
|
+ // fileIds: '',
|
|
|
|
+ // fileTypes: '',
|
|
|
|
+ // id: 2,
|
|
|
|
+ // name: '故明威将军大河卫指挥佥事许公墓志拓片',
|
|
|
|
+ // publishDate: '2024-04-18',
|
|
|
|
+ // size: '志盖边长 40.5 厘米、厚 8.5 厘米、志石边长 41 厘米、厚 9.5 厘米',
|
|
|
|
+ // texture: '草',
|
|
|
|
+ // thumb:
|
|
|
|
+ // 'https://k.sinaimg.cn/n/spider20230919/11/w499h312/20230919/77f0-2a03ee3faecf423cf77b2a2a119a714e.png/w700d1q75cms.jpg?by=cms_fixed_width',
|
|
|
|
+ // type: '其他',
|
|
|
|
+ // updateTime: '2024-04-19 09:03:01',
|
|
|
|
+ // files: {
|
|
|
|
+ // images: ['https://super.4dage.com/data/TEST/edit/20230407_114029890.jpg', 'https://super.4dage.com/data/TEST/edit/20230524_155459428.png'],
|
|
|
|
+ // moduleUrl: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HG01',
|
|
|
|
+ // audio: 'https://houseoss.4dkankan.com/project/bjfljtl/audio/bgMusic.mp3',
|
|
|
|
+ // // 可能是单个可能是多个
|
|
|
|
+ // videos: ['https://super.4dage.com/data/TEST/edit/20230228_161113155.mp4'],
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // 初始化显示状态
|
|
|
|
+ // initShowState()
|
|
|
|
+
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -140,20 +193,20 @@ onBeforeMount(async () => {
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<div class="info-box">
|
|
- <div class="title">{{ dynamicDetail.title }}</div>
|
|
|
|
- <!-- <div class="era">{{ dynamicDetail.era + '·' + dynamicDetail.character }}</div> -->
|
|
|
|
- <div class="era">
|
|
|
|
- <div style="margin-right: 20px;">朝代:{{ dynamicDetail.era }}</div>
|
|
|
|
- <div>质地:{{ dynamicDetail.character }}</div>
|
|
|
|
|
|
+ <div class="title">{{ dynamicDetail.name }}</div>
|
|
|
|
+ <!-- <div class="age">{{ dynamicDetail.age + '·' + dynamicDetail.texture }}</div> -->
|
|
|
|
+ <div class="age">
|
|
|
|
+ <div style="margin-right: 20px;">朝代:{{ dynamicDetail.age }}</div>
|
|
|
|
+ <div>质地:{{ dynamicDetail.texture }}</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="size">尺寸: {{ dynamicDetail.size }}</div>
|
|
<div class="size">尺寸: {{ dynamicDetail.size }}</div>
|
|
- <div class="info" v-html="dynamicDetail.info"></div>
|
|
|
|
|
|
+ <div class="info">{{ dynamicDetail.description }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<audio id="audioBg" :src="audioBgUrl" style="display: none;"></audio>
|
|
<audio id="audioBg" :src="audioBgUrl" style="display: none;"></audio>
|
|
- <img v-if="audioBgUrl != null" class="playing-icon" :src="audioPlaying ? pauseIcon : playIcon" alt=""
|
|
|
|
|
|
+ <img v-if="audioBgUrl" class="playing-icon" :src="audioPlaying ? pauseIcon : playIcon" alt=""
|
|
@click="audioChange()">
|
|
@click="audioChange()">
|
|
<!-- <img class="back-icon" @click="() => { router.back() }" src="@/assets/images/back.png" alt=""> -->
|
|
<!-- <img class="back-icon" @click="() => { router.back() }" src="@/assets/images/back.png" alt=""> -->
|
|
</div>
|
|
</div>
|
|
@@ -162,6 +215,8 @@ onBeforeMount(async () => {
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
.detail-box {
|
|
.detail-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ min-height: 100%;
|
|
|
|
+ background: #F7F3E8;
|
|
|
|
|
|
.media-box {
|
|
.media-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -206,18 +261,19 @@ onBeforeMount(async () => {
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
bottom: 35px;
|
|
bottom: 35px;
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
|
|
+ justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
div {
|
|
div {
|
|
height: 25px;
|
|
height: 25px;
|
|
- padding: 0 20px;
|
|
|
|
|
|
+ padding: 0 15px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
line-height: 25px;
|
|
line-height: 25px;
|
|
border-radius: 15px;
|
|
border-radius: 15px;
|
|
background: #9F8E8E;
|
|
background: #9F8E8E;
|
|
color: #5B4848;
|
|
color: #5B4848;
|
|
font-size: 0.8em;
|
|
font-size: 0.8em;
|
|
|
|
+ margin: auto 2vw;
|
|
|
|
|
|
span {
|
|
span {
|
|
margin-left: 5px;
|
|
margin-left: 5px;
|
|
@@ -255,7 +311,7 @@ onBeforeMount(async () => {
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
- .era {
|
|
|
|
|
|
+ .age {
|
|
line-height: 1.5em;
|
|
line-height: 1.5em;
|
|
color: #9D4F0B;
|
|
color: #9D4F0B;
|
|
font-size: 1em;
|
|
font-size: 1em;
|
|
@@ -272,7 +328,7 @@ onBeforeMount(async () => {
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
- .info{
|
|
|
|
|
|
+ .info {
|
|
color: #88866F;
|
|
color: #88866F;
|
|
}
|
|
}
|
|
|
|
|