|
|
|
|
@ -13,12 +13,29 @@
|
|
|
|
|
<view class="top-img">
|
|
|
|
|
<u-album :urls="[carouselFigureImg]" :singleSize="358"></u-album>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-show="videoPlay" style="text-align: center;">
|
|
|
|
|
<video
|
|
|
|
|
style="width: 92%;"
|
|
|
|
|
controls
|
|
|
|
|
id="myvideo"
|
|
|
|
|
:src="videoUrl"
|
|
|
|
|
@fullscreenchange="screenChange"
|
|
|
|
|
x5-video-player-type="h5"
|
|
|
|
|
x5-video-player-fullscreen="true"
|
|
|
|
|
></video>
|
|
|
|
|
</view>
|
|
|
|
|
<u-button class="video-btn" @click="playVideo" type="primary" v-if="videoUrl.length>0">{{
|
|
|
|
|
$t("series.play")
|
|
|
|
|
}}</u-button>
|
|
|
|
|
<view
|
|
|
|
|
class="title-t"
|
|
|
|
|
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
|
|
|
|
>{{ $t("basic.info") }}</view
|
|
|
|
|
>
|
|
|
|
|
<view class="info-box" style="padding: 28rpx 32rpx 4rpx 32rpx; background: #ffffff">
|
|
|
|
|
<view
|
|
|
|
|
class="info-box"
|
|
|
|
|
style="padding: 28rpx 32rpx 4rpx 32rpx; background: #ffffff"
|
|
|
|
|
>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<text class="label">{{ $t("series.name") }}</text>
|
|
|
|
|
<text class="value">{{ collectionsDetail.seriesName }}</text>
|
|
|
|
|
@ -29,7 +46,7 @@
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<text class="label">{{ $t("series.hash") }}</text>
|
|
|
|
|
<text class="value">{{ collectionsDetail.hash }}</text>
|
|
|
|
|
<text class="des">{{ collectionsDetail.hash }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
@ -72,8 +89,6 @@
|
|
|
|
|
>{{ $t("collection.detail") }}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="detail-info">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view v-if="detailImgList.length > 0" class="box">
|
|
|
|
|
<image
|
|
|
|
|
v-for="(img, index) in detailImgList"
|
|
|
|
|
@ -109,21 +124,36 @@ export default {
|
|
|
|
|
carouselFigureImg: "",
|
|
|
|
|
detailImgList: [],
|
|
|
|
|
containerWidth: 300, // 替换为你的图片容器宽度
|
|
|
|
|
|
|
|
|
|
videoPlay: false,
|
|
|
|
|
videoUrl: "",
|
|
|
|
|
videoContext: null,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
onLoad: function (option) {
|
|
|
|
|
this.collectionsUID = option.collectionUID;
|
|
|
|
|
this.getCollectionDetail();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
onReady() {
|
|
|
|
|
// 页面加载完毕后开始动画
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
//
|
|
|
|
|
screenChange(e) {
|
|
|
|
|
let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
|
|
|
|
|
console.log(e, "全屏");
|
|
|
|
|
if (!fullScreen) {
|
|
|
|
|
//退出全屏
|
|
|
|
|
this.videoPlay = false; // 隐藏播放盒子
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
playVideo() {
|
|
|
|
|
this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
|
|
|
|
|
this.videoContext.play();
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.videoContext.requestFullScreen();
|
|
|
|
|
}, 500);
|
|
|
|
|
this.videoPlay = true; // 显示播放盒子
|
|
|
|
|
},
|
|
|
|
|
onPageScroll(e) {
|
|
|
|
|
this.stickyShow = e.scrollTop > 5 ? true : false;
|
|
|
|
|
},
|
|
|
|
|
@ -146,12 +176,12 @@ export default {
|
|
|
|
|
if (res.status === 0) {
|
|
|
|
|
this.collectionsDetail = res.data;
|
|
|
|
|
this.carouselFigureImg = this.collectionsDetail.carouselFigureList[0];
|
|
|
|
|
this.videoUrl = this.collectionsDetail.carouselFigureList[1] || '';
|
|
|
|
|
this.detailImgList = this.collectionsDetail.detailImgList;
|
|
|
|
|
} else {
|
|
|
|
|
uni.$u.toast(this.$t("load.failed"));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -163,7 +193,9 @@ page {
|
|
|
|
|
background-attachment: fixed;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-btn {
|
|
|
|
|
width: 92%;
|
|
|
|
|
}
|
|
|
|
|
.active {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
@ -271,8 +303,6 @@ page {
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
scout
5 months ago