|
|
<template>
|
|
|
<view>
|
|
|
<navBar
|
|
|
:navTitle="collectionsDetail.name"
|
|
|
:stickyShow="stickyShow"
|
|
|
:color="'#000000'"
|
|
|
:backBackGroundColor="'#699A70'"
|
|
|
:sfBack="true"
|
|
|
@triggerSfBack="back"
|
|
|
></navBar>
|
|
|
|
|
|
<view>
|
|
|
<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="item">
|
|
|
<text class="label">{{ $t("series.name") }}</text>
|
|
|
<text class="value">{{ collectionsDetail.seriesName }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("series.issuer") }}</text>
|
|
|
<text class="value">{{ collectionsDetail.brandName }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("series.hash") }}</text>
|
|
|
<text class="des">{{ collectionsDetail.hash }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view
|
|
|
class="title-t"
|
|
|
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
|
|
>{{ $t("collection.info") }}
|
|
|
</view>
|
|
|
<view class="info-box" style="padding: 28rpx 32rpx; background: #ffffff">
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.name") }}</text>
|
|
|
<text class="value">{{ this.collectionsDetail.name || "-" }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.type") }}</text>
|
|
|
<text class="value">{{
|
|
|
this.collectionsDetail.collectionType || "-"
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.size") }}</text>
|
|
|
<text class="value">{{ this.collectionsDetail.size || "-" }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.specs") }}</text>
|
|
|
<text class="value">{{ this.collectionsDetail.specs || "-" }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.address") }}</text>
|
|
|
<text class="value">{{ this.collectionsDetail.address || "-" }}</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="label">{{ $t("collection.intro") }}</text>
|
|
|
<view class="des">{{ this.collectionsDetail.intro || "-" }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
class="title-t"
|
|
|
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
|
|
>{{ $t("collection.detail") }}
|
|
|
</view>
|
|
|
<view class="detail-info">
|
|
|
<view v-if="detailImgList.length > 0" class="box">
|
|
|
<image
|
|
|
v-for="(img, index) in detailImgList"
|
|
|
:src="img"
|
|
|
:key="index"
|
|
|
mode="widthFix"
|
|
|
class="img"
|
|
|
></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="" style="text-align: center; margin-top: 30rpx">
|
|
|
<image
|
|
|
src="@/static/image/home/fontree.png"
|
|
|
mode=""
|
|
|
class="logo"
|
|
|
></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view style="height: 180rpx"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
stickyShow: false,
|
|
|
showVerfy: false,
|
|
|
collectionsUID: "",
|
|
|
collectionsDetail: {},
|
|
|
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;
|
|
|
},
|
|
|
|
|
|
back() {
|
|
|
let routesRecord = getCurrentPages();
|
|
|
if (routesRecord.length > 1) {
|
|
|
this.$common.navigateBack();
|
|
|
} else {
|
|
|
uni.reLaunch({
|
|
|
url: "/pages/index/index",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
async getCollectionDetail() {
|
|
|
let data = {
|
|
|
collectionsUID: this.collectionsUID,
|
|
|
};
|
|
|
let res = await this.$api.usa.collectionsInfo(data);
|
|
|
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>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: url("../../../static/image/start/new_bg.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
.video-btn {
|
|
|
width: 92%;
|
|
|
}
|
|
|
.active {
|
|
|
position: relative;
|
|
|
|
|
|
.head {
|
|
|
position: absolute;
|
|
|
top: 30rpx;
|
|
|
left: 26rpx;
|
|
|
display: flex;
|
|
|
height: 110rpx;
|
|
|
align-items: center;
|
|
|
font-size: 32rpx;
|
|
|
z-index: 1;
|
|
|
|
|
|
.back {
|
|
|
width: 128rpx;
|
|
|
height: 56rpx;
|
|
|
color: #ffffff;
|
|
|
border-radius: 40rpx;
|
|
|
line-height: 56rpx;
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
margin-right: 78rpx;
|
|
|
border: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.drawing-board {
|
|
|
width: 100%;
|
|
|
height: 6986rpx;
|
|
|
}
|
|
|
|
|
|
.fixed-box {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
height: 172rpx;
|
|
|
// background: #3e3e3e;
|
|
|
background: #ffffff;
|
|
|
z-index: 10;
|
|
|
|
|
|
.btn {
|
|
|
display: flex;
|
|
|
padding: 42rpx 38rpx;
|
|
|
}
|
|
|
|
|
|
.back {
|
|
|
width: 172rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
// background: #efba42;
|
|
|
background: #efba42;
|
|
|
border-color: aliceblue;
|
|
|
margin-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.back-active {
|
|
|
width: 172rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
// background: #efba42;
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
border-color: aliceblue;
|
|
|
margin-right: 30rpx;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.buyer {
|
|
|
width: 484rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
// background: #558bf2;
|
|
|
background: #699a70;
|
|
|
border-color: aliceblue;
|
|
|
}
|
|
|
|
|
|
.sell-out {
|
|
|
width: 484rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
// background: #558bf2;
|
|
|
background: #fc4947;
|
|
|
border-color: #fc4947;
|
|
|
}
|
|
|
|
|
|
.disBtn {
|
|
|
width: 484rpx;
|
|
|
height: 56rpx;
|
|
|
line-height: 56upx;
|
|
|
border-radius: 40rpx;
|
|
|
background: rgba(65, 0, 0, 1);
|
|
|
border: 1upx #fff solid;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.top-img {
|
|
|
background-size: contain;
|
|
|
width: 660rpx;
|
|
|
height: 660rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin: 44rpx 44rpx 32rpx 46rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* .box-item {
|
|
|
// background: rgba(255, 255, 255, 0.3);
|
|
|
// background: rgba(11, 0, 0, 0.4);
|
|
|
// margin: 0 44rpx 0 46rpx;
|
|
|
image {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
// height: 198rpx;
|
|
|
}
|
|
|
} */
|
|
|
|
|
|
.detail-info {
|
|
|
// background: rgba(0, 0, 0, 0.8);
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 8rpx;
|
|
|
margin: 30rpx;
|
|
|
padding: 23rpx;
|
|
|
|
|
|
.box {
|
|
|
// margin: 0 44rpx 0 46rpx;
|
|
|
margin-bottom: 46rpx;
|
|
|
// background: url('@/static/image/home/bg-info.png') no-repeat; // rgba(255, 255, 255, 0.3);
|
|
|
border-radius: 15rpx;
|
|
|
// padding: 38rpx 32rpx;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.title-t {
|
|
|
text-align: center;
|
|
|
margin: 40rpx 0 30rpx 0;
|
|
|
color: #494949;
|
|
|
}
|
|
|
|
|
|
.info-box {
|
|
|
margin: 0 44rpx 0 46rpx;
|
|
|
margin-bottom: 46rpx;
|
|
|
// background: rgba(255, 255, 255, 0.3);
|
|
|
background: rgba(11, 0, 0, 0.3);
|
|
|
// background: url('@/static/image/home/bg-info.png') no-repeat;
|
|
|
border-radius: 8rpx;
|
|
|
// padding: 38rpx 32rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.title-img {
|
|
|
width: 300upx;
|
|
|
height: 50upx;
|
|
|
margin-bottom: 32upx;
|
|
|
}
|
|
|
|
|
|
.content-img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.from-img {
|
|
|
width: 356upx;
|
|
|
height: 44upx;
|
|
|
margin-top: 20upx;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
margin-bottom: 20rpx;
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
.label {
|
|
|
padding-right: 40rpx;
|
|
|
width: 130rpx;
|
|
|
color: #434343;
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
color: #878787;
|
|
|
// 超出部分显示省略号
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
max-width: 400rpx;
|
|
|
}
|
|
|
|
|
|
.des {
|
|
|
width: 450rpx;
|
|
|
/* display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 3;
|
|
|
overflow: hidden; */
|
|
|
word-break: break-all;
|
|
|
white-space: normal;
|
|
|
color: #878787;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
margin-top: 10rpx;
|
|
|
width: 202rpx;
|
|
|
height: 56rpx;
|
|
|
}
|
|
|
|
|
|
.popup-box {
|
|
|
background: #ffffff;
|
|
|
height: 842rpx;
|
|
|
width: 698rpx;
|
|
|
overflow: hidden;
|
|
|
padding: 30rpx 38rpx;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.title {
|
|
|
font-size: 40rpx;
|
|
|
text-align: center;
|
|
|
margin-top: 96rpx;
|
|
|
margin-bottom: 152rpx;
|
|
|
color: #434343;
|
|
|
}
|
|
|
|
|
|
.input-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-bottom: 34rpx;
|
|
|
|
|
|
.label {
|
|
|
font-size: 22rpx;
|
|
|
color: #699a70;
|
|
|
}
|
|
|
|
|
|
.input {
|
|
|
background-color: rgba(135, 135, 135, 0.5);
|
|
|
width: 515rpx;
|
|
|
height: 60rpx;
|
|
|
border-radius: 40rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
/deep/ .input-placeholder {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
/deep/ .uni-input-input {
|
|
|
font-size: 24rpx;
|
|
|
padding: 0 20rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.flex-end {
|
|
|
padding: 0 34rpx 34rpx 38rpx;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
.fl-e {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cancel {
|
|
|
color: #878787;
|
|
|
font-size: 32rpx;
|
|
|
margin-top: 30rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|