|
@@ -7,12 +7,15 @@
|
|
|
<div class="look px-2" v-else @click="download">
|
|
|
<van-icon name="down" /> 点击下载
|
|
|
</div> -->
|
|
|
- <div class="look px-2" v-if="detailInfo.file_allow_preview_h5==1 && suffix=='mp4'">浏览量:{{detailInfo.kf_view_num}}</div>
|
|
|
+ <div class="look px-2" v-if="detailInfo.file_allow_preview_h5 == 1 && suffix == 'mp4'">浏览量:{{ detailInfo.kf_view_num
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
<!-- <div class="look px-2" v-else @click="download">
|
|
|
<van-icon name="down" /> 点击下载
|
|
|
</div> -->
|
|
|
|
|
|
- <div v-if="detailInfo.file_allow_preview_h5==2" style="height: 100px;line-height: 120px;text-align: center;font-size: 12px;color: #ccc;">
|
|
|
+ <div v-if="detailInfo.file_allow_preview_h5 == 2"
|
|
|
+ style="height: 100px;line-height: 120px;text-align: center;font-size: 12px;color: #ccc;">
|
|
|
<div class="flex items-center justify-center">
|
|
|
当前文件暂不支持预览
|
|
|
<div class="look1 px-2 ml-2" @click="download">
|
|
@@ -21,16 +24,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-else>
|
|
|
- <div v-if="suffix=='mp4'" class="videoDiv">
|
|
|
+ <div v-if="suffix == 'mp4'" class="videoDiv">
|
|
|
<div class="aliPlayerShow" id="J_prismPlayer"></div>
|
|
|
</div>
|
|
|
- <audio v-else-if="suffix=='mp3'" ref="urlResouce" controls :src="commonUrl">
|
|
|
+ <audio v-else-if="suffix == 'mp3'" ref="urlResouce" controls :src="commonUrl">
|
|
|
<source :src="commonUrl" type="audio/mp3">
|
|
|
</audio>
|
|
|
- <div v-else-if="suffix=='pdf'" style="height: calc(100% - 60px);">
|
|
|
+ <div v-else-if="suffix == 'pdf'" style="height: calc(100% - 60px);">
|
|
|
<iframe :src="commonUrl" frameborder="0" width="100%" height="100%"></iframe>
|
|
|
</div>
|
|
|
- <div v-else-if="suffix=='doc' || suffix=='docx'" style="height: 100px;line-height: 140px;text-align: center;font-size: 12px;color: #ccc;">
|
|
|
+ <div v-else-if="suffix == 'doc' || suffix == 'docx'"
|
|
|
+ style="height: 100px;line-height: 140px;text-align: center;font-size: 12px;color: #ccc;">
|
|
|
当前文件暂不支持预览
|
|
|
</div>
|
|
|
<div v-else style="height: calc(100% - 60px);">
|
|
@@ -39,15 +43,15 @@
|
|
|
</template>
|
|
|
|
|
|
<div class="flex justify-between items-center px-3 mt-2">
|
|
|
- <div style="font-size: 15px;">{{detailInfo.kf_name}}</div>
|
|
|
+ <div style="font-size: 15px;">{{ detailInfo.kf_name }}</div>
|
|
|
<div class="flex space-x-4 tip">
|
|
|
<div @click="handleFinger">
|
|
|
- <van-icon :name="detailInfo.is_like==0 ? 'good-job-o' : 'good-job'" />
|
|
|
- <span>{{detailInfo.kf_like_num}}</span>
|
|
|
+ <van-icon :name="detailInfo.is_like == 0 ? 'good-job-o' : 'good-job'" />
|
|
|
+ <span>{{ detailInfo.kf_like_num }}</span>
|
|
|
</div>
|
|
|
<div @click="handleLoveIcon">
|
|
|
- <van-icon :name="detailInfo.is_fav==0 ? 'like-o' : 'like'" />
|
|
|
- <span>{{detailInfo.kf_fav_num}}</span>
|
|
|
+ <van-icon :name="detailInfo.is_fav == 0 ? 'like-o' : 'like'" />
|
|
|
+ <span>{{ detailInfo.kf_fav_num }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -58,6 +62,7 @@
|
|
|
import { getFullUrl } from '@/utils/helper';
|
|
|
import { files_detail, likeApi_add, likeApi_del, collectApi_add, collectApi_del } from "./api.js";
|
|
|
import { useRouter } from 'vue-router';
|
|
|
+import { onMounted } from 'vue';
|
|
|
const router = useRouter();
|
|
|
const parentId = ref(router.currentRoute.value.params.id);
|
|
|
const parentKkId = ref("");
|
|
@@ -69,8 +74,9 @@ const sourceUrl = ref("");
|
|
|
|
|
|
const player = ref("");
|
|
|
const onClickLeft = () => history.back();
|
|
|
-
|
|
|
-initDetailData();
|
|
|
+onMounted(() => {
|
|
|
+ initDetailData();
|
|
|
+});
|
|
|
function initDetailData() {
|
|
|
detailLoad.value = true;
|
|
|
files_detail({ kf_id: parentId.value }).then((res) => {
|
|
@@ -90,7 +96,7 @@ function initDetailData() {
|
|
|
//示例设置清晰度为超清和高清的地址("OD": "<原画URL>","FD": "<流畅URL>","LD":"<标清URL>","SD": "<高清URL>","HD": "<超清URL>","2K": "<2K URL>","4K": "<4K URL>")
|
|
|
// source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'
|
|
|
|
|
|
- sourceUrl.value = { "OD": detailInfo.value.kf_path_od, "FD": detailInfo.value.kf_path_fd, "LD": detailInfo.value.kf_path_ld };
|
|
|
+ sourceUrl.value = { "OD": detailInfo.value.kf_path_od || detailInfo.value.kf_path, "FD": detailInfo.value.kf_path_fd, "LD": detailInfo.value.kf_path_ld };
|
|
|
let stringSourceUrl = JSON.stringify(sourceUrl.value)
|
|
|
// 初始换aliplayer
|
|
|
player.value = new Aliplayer({
|
|
@@ -217,6 +223,7 @@ const handleLoveIcon = () => {
|
|
|
.zyDetailContent {
|
|
|
height: 100vh;
|
|
|
background: #fcfeff;
|
|
|
+
|
|
|
.top {
|
|
|
position: absolute;
|
|
|
z-index: 10;
|
|
@@ -224,6 +231,7 @@ const handleLoveIcon = () => {
|
|
|
color: #fff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.look {
|
|
|
background: rgba($color: #050026, $alpha: 0.5);
|
|
|
border-radius: 5px;
|
|
@@ -235,6 +243,7 @@ const handleLoveIcon = () => {
|
|
|
color: #fff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.look1 {
|
|
|
background: rgba($color: #050026, $alpha: 0.5);
|
|
|
border-radius: 5px;
|
|
@@ -246,16 +255,19 @@ const handleLoveIcon = () => {
|
|
|
color: #fff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.videoDiv {
|
|
|
height: 220px;
|
|
|
}
|
|
|
+
|
|
|
video {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.tip {
|
|
|
color: #00a3ff;
|
|
|
font-size: 12px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|