You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
10 KiB
Vue
406 lines
10 KiB
Vue
5 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<navBar
|
||
|
|
:navTitle="collectionsDetail.name"
|
||
|
|
:stickyShow="stickyShow"
|
||
|
|
:color="'#000000'"
|
||
|
|
:backBackGroundColor="'#699A70'"
|
||
|
|
></navBar>
|
||
|
|
|
||
|
|
<view class="top-img">
|
||
|
|
<image :src="collectionsDetail.coverImg"></image>
|
||
|
|
</view>
|
||
|
|
<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">
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("series.name") }}</text>
|
||
|
|
<text class="value">{{ payDetail.seriesName }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("series.issuer") }}</text>
|
||
|
|
<text class="value">{{ payDetail.senderName }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("series.time") }}</text>
|
||
|
|
<text class="value">{{ payDetail.createdAt }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("series.price") }}</text>
|
||
|
|
<text class="value">
|
||
|
|
<text v-if="collectionsDetail.currencyType === 'normal'">{{
|
||
|
|
symbol
|
||
|
|
}}</text>
|
||
|
|
<image
|
||
|
|
src="@/static/image/home/jifen.png"
|
||
|
|
mode="scaleToFill"
|
||
|
|
style="width: 24rpx; height: 24rpx"
|
||
|
|
v-else
|
||
|
|
/>
|
||
|
|
{{ payDetail.price }}
|
||
|
|
<!-- <text v-if="payDetail.payType === 6">{{
|
||
|
|
$t("airdrop")
|
||
|
|
}}</text> -->
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="item">
|
||
|
|
<text class="label">{{$t('series.No')}}</text>
|
||
|
|
<text class="value">{{payDetail.payNum}}</text>
|
||
|
|
</view> -->
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("series.hash") }}</text>
|
||
|
|
<text class="value">{{ payDetail.artworkHash }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="title-t">{{ $t("collection.info") }}</view>
|
||
|
|
<view class="info-box" style="padding: 28rpx 32rpx">
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.name") }}</text>
|
||
|
|
<text class="value">{{ collectionsDetail.name || "-" }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.type") }}</text>
|
||
|
|
<text class="value">{{ collectionsDetail.collectionType || "-" }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.size") }}</text>
|
||
|
|
<text class="value">{{ collectionsDetail.size || "-" }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.specs") }}</text>
|
||
|
|
<text class="value">{{ collectionsDetail.specs || "-" }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.address") }}</text>
|
||
|
|
<text class="value">{{ collectionsDetail.address || "-" }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">{{ $t("collection.intro") }}</text>
|
||
|
|
<view class="des">{{ 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 class="title-t">{{$t('collection.sell')}}</view>
|
||
|
|
<view class="box-item">
|
||
|
|
<image v-for="item in sellPoint" :key="item" :src="item" mode="widthFix"></image>
|
||
|
|
</view> -->
|
||
|
|
<view v-if="collDetails.length > 0" class="title-t">{{
|
||
|
|
$t("collection.sellDec")
|
||
|
|
}}</view>
|
||
|
|
<view v-if="collDetails.length > 0" class="box">
|
||
|
|
<image
|
||
|
|
v-for="item in collDetails"
|
||
|
|
:src="item"
|
||
|
|
:key="item"
|
||
|
|
mode="widthFix"
|
||
|
|
class="img"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
<view v-if="companyInfo.length > 0" class="title-t">{{
|
||
|
|
$t("collection.company")
|
||
|
|
}}</view>
|
||
|
|
<view v-if="companyInfo.length > 0" class="box">
|
||
|
|
<image
|
||
|
|
v-for="item in companyInfo"
|
||
|
|
:src="item"
|
||
|
|
:key="item"
|
||
|
|
mode="widthFix"
|
||
|
|
class="img"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
<view v-if="copyright.length > 0" class="title-t">{{
|
||
|
|
$t("collection.copyight")
|
||
|
|
}}</view>
|
||
|
|
<view v-if="copyright.length > 0" class="box">
|
||
|
|
<image
|
||
|
|
v-for="item in copyright"
|
||
|
|
:src="item"
|
||
|
|
:key="item"
|
||
|
|
mode="widthFix"
|
||
|
|
class="img"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
<view v-if="Blockchain.length > 0" class="title-t">{{
|
||
|
|
$t("collection.blockchain")
|
||
|
|
}}</view>
|
||
|
|
<view v-if="Blockchain.length > 0" class="box">
|
||
|
|
<image
|
||
|
|
v-for="item in Blockchain"
|
||
|
|
:src="item"
|
||
|
|
:key="item"
|
||
|
|
mode="widthFix"
|
||
|
|
class="img"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="" style="text-align: center; margin-top: 30rpx">
|
||
|
|
<image
|
||
|
|
src="@/static/image/home/fontree.png"
|
||
|
|
mode="aspectFit"
|
||
|
|
class="logo"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
<image
|
||
|
|
src="../../../static/image/mine/cert.png"
|
||
|
|
@click="goCert"
|
||
|
|
mode=""
|
||
|
|
class="cert-img"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
stickyShow: false,
|
||
|
|
ID: 0,
|
||
|
|
collectionsDetail: {},
|
||
|
|
sellPoint: [],
|
||
|
|
collDetails: [],
|
||
|
|
companyInfo: [],
|
||
|
|
copyright: [],
|
||
|
|
Blockchain: [],
|
||
|
|
payDetail: {},
|
||
|
|
allImgList: [],
|
||
|
|
symbol:
|
||
|
|
uni.getLocale() === "en"
|
||
|
|
? "$"
|
||
|
|
: uni.getLocale() === "zh-Hant"
|
||
|
|
? "HK$"
|
||
|
|
: "￥",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
this.stickyShow = e.scrollTop > 5 ? true : false;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goCert() {
|
||
|
|
console.log(this.collectionsDetail.coverImg);
|
||
|
|
let data = {
|
||
|
|
CollectionsUID: this.collectionsDetail.collectionUID,
|
||
|
|
collectionImg: this.collectionsDetail.coverImg,
|
||
|
|
seriesName: this.collectionsDetail.name,
|
||
|
|
physical: this.collectionsDetail.physical,
|
||
|
|
payDetail: this.payDetail,
|
||
|
|
};
|
||
|
|
uni.navigateTo({
|
||
|
|
url:
|
||
|
|
"/pages/mine/cert/cert?data=" +
|
||
|
|
encodeURIComponent(JSON.stringify(data)),
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async getDetail() {
|
||
|
|
let data = {
|
||
|
|
ID: Number(this.ID),
|
||
|
|
};
|
||
|
|
let res = await this.$api.mine.paymentDetail(data);
|
||
|
|
if (res.status === 0) {
|
||
|
|
this.collectionsDetail = res.data.collections;
|
||
|
|
this.payDetail = res.data.pay;
|
||
|
|
(this.allImgList = this.collectionsDetail.cutImg
|
||
|
|
? JSON.parse(this.collectionsDetail.cutImg)
|
||
|
|
: []),
|
||
|
|
this.cutImg();
|
||
|
|
} else {
|
||
|
|
uni.$u.toast(this.$t("load.failed"));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
cutImg() {
|
||
|
|
this.allImgList.forEach((v) => {
|
||
|
|
if (Array.isArray(v.imgs)) {
|
||
|
|
v.imgs = v.imgs.filter((img) => {
|
||
|
|
if (img) {
|
||
|
|
return img;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.allImgList.forEach((v) => {
|
||
|
|
if (v.label === "卖点") {
|
||
|
|
this.sellPoint = v.imgs;
|
||
|
|
} else if (v.label === "藏品细节") {
|
||
|
|
this.collDetails = v.imgs;
|
||
|
|
} else if (v.label === "工艺/公司介绍") {
|
||
|
|
this.companyInfo = v.imgs;
|
||
|
|
} else if (v.label === "版权声明") {
|
||
|
|
this.copyright = v.imgs;
|
||
|
|
} else if (v.label === "区块链说明") {
|
||
|
|
this.Blockchain = v.imgs;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.ID = option.ID;
|
||
|
|
this.artworkUid = option.artworkUid;
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getDetail();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background: url("@/static/image/home/detail-kind-bg.png") no-repeat;
|
||
|
|
// background-size: 100% 100%;
|
||
|
|
// background-attachment:fixed;
|
||
|
|
// height: 100vh;
|
||
|
|
}
|
||
|
|
.fixed-box {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 172rpx;
|
||
|
|
background: #3e3e3e;
|
||
|
|
z-index: 10;
|
||
|
|
.btn {
|
||
|
|
display: flex;
|
||
|
|
padding: 42rpx 38rpx;
|
||
|
|
}
|
||
|
|
.back {
|
||
|
|
width: 172rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
background: #efba42;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
}
|
||
|
|
.buyer {
|
||
|
|
width: 484rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
background: #558bf2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.top-img {
|
||
|
|
// background: url('../../../static/image/home/box.png') no-repeat;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
width: 660rpx;
|
||
|
|
height: 660rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 44rpx 44rpx 32rpx 46rpx;
|
||
|
|
position: relative;
|
||
|
|
.price {
|
||
|
|
font-size: 48rpx;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box-item {
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
// margin: 0 44rpx 0 46rpx;
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
// height: 198rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.detail-info {
|
||
|
|
// background: rgba(0,0,0,0.8);
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 30rpx;
|
||
|
|
padding: 23rpx;
|
||
|
|
.box {
|
||
|
|
// margin: 0 44rpx 0 46rpx;
|
||
|
|
margin-bottom: 46rpx;
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
border-radius: 8rpx;
|
||
|
|
// padding: 38rpx 32rpx;
|
||
|
|
position: relative;
|
||
|
|
.item-img {
|
||
|
|
width: 234rpx;
|
||
|
|
height: 234rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
position: absolute;
|
||
|
|
top: 38rpx;
|
||
|
|
right: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title-t {
|
||
|
|
text-align: center;
|
||
|
|
margin: 40rpx 0 16rpx 0;
|
||
|
|
color: #434343;
|
||
|
|
}
|
||
|
|
.info-box {
|
||
|
|
margin: 0 44rpx 0 46rpx;
|
||
|
|
margin-bottom: 46rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
// background: rgba(11, 0, 0, 0.3);
|
||
|
|
border-radius: 8rpx;
|
||
|
|
// padding: 38rpx 32rpx;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
font-size: 20rpx;
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
.label {
|
||
|
|
color: #434343;
|
||
|
|
padding-right: 40rpx;
|
||
|
|
width: 130rpx;
|
||
|
|
}
|
||
|
|
.value {
|
||
|
|
color: #878787;
|
||
|
|
width: 450rpx;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 3;
|
||
|
|
overflow: hidden;
|
||
|
|
word-break: break-all;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
.des {
|
||
|
|
color: #878787;
|
||
|
|
width: 450rpx;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 3;
|
||
|
|
overflow: hidden;
|
||
|
|
word-break: break-all;
|
||
|
|
white-space: normal;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.logo {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
width: 202rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
.cert-img {
|
||
|
|
position: fixed;
|
||
|
|
right: 40rpx;
|
||
|
|
bottom: 25vh;
|
||
|
|
width: 84rpx;
|
||
|
|
height: 84rpx;
|
||
|
|
}
|
||
|
|
</style>
|