488 lines
11 KiB
Vue
488 lines
11 KiB
Vue
<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>
|