You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
6.8 KiB
348 lines
6.8 KiB
<template> |
|
<view class="head_top"> |
|
<image @click="fanhui" src="../../static/fanhui.png"></image> |
|
<view>作品详情</view> |
|
<view></view> |
|
</view> |
|
<view class="details_top"> |
|
<view class="max_box"> |
|
<img :class="ykwz?'img1':'img2'" :src="list.tupian" /> |
|
</view> |
|
</view> |
|
<view class="zuoping"> |
|
<view> |
|
<!-- <view>￥</view> --> |
|
<view v-show="Number(details.list.copyright)==1">版</view> |
|
<view>{{details.list.collectionName}}</view> |
|
</view> |
|
<view> |
|
<view> |
|
<image :src="list.headPhoto"></image> |
|
<view>{{list.artistName}}</view> |
|
</view> |
|
<view>{{list.collectorNumber}}</view> |
|
</view> |
|
<view v-if="list.price" class="pric">￥{{list.price}}</view> |
|
</view> |
|
<view class="prices"> |
|
<view> |
|
<view>收藏者</view> |
|
<view>{{list.nickname}}</view> |
|
</view> |
|
<view> |
|
<view>合约地址</view> |
|
<view>{{list.contractAddress}}</view> |
|
</view> |
|
<view> |
|
<view>{{list.islj?'哈希值':'哈希值'}}</view> |
|
<view>{{list.tokenid}}</view> |
|
</view> |
|
</view> |
|
<view class="qysm" v-if="list.equity"> |
|
<view>权益说明</view> |
|
<view v-html="list.equity"></view> |
|
</view> |
|
<view class="zhuanzhen" :style="list.own?'background: #8D8C9F;':''" @click="goumai" v-if="true"> |
|
<view>购买</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
secondHandAreaDealid, |
|
secondHandAreapurchase, |
|
progressionEquity |
|
} from '@/api/user.js' |
|
import { |
|
reactive, |
|
toRefs, |
|
ref |
|
} from 'vue' |
|
export default { |
|
props: ['id'], |
|
setup(props) { |
|
let details = reactive({ |
|
list: {}, |
|
qycone:'' |
|
}) |
|
let ykwz=ref(true) |
|
secondHandAreaDealid({ |
|
id: props.id |
|
}).then(res => { |
|
console.log(res); |
|
details.list = res.data |
|
if(details.list.nftUrl.indexOf('http')!=-1){ |
|
details.list.islj=true |
|
}else{ |
|
details.list.islj=false |
|
} |
|
details.list.tupian=details.list.imagePath |
|
uni.getImageInfo({ |
|
src: details.list.tupian, |
|
success: function (image) { |
|
console.log(image.width); |
|
console.log(image.height); |
|
if(image.width>image.height){ |
|
ykwz.value=true |
|
}else if(image.width<image.height){ |
|
ykwz.value=false |
|
} |
|
} |
|
}); |
|
progressionEquity({type:Number(details.list.copyright)==1?4:11}).then(res=>{ |
|
details.qycone=res.data[0].content |
|
}) |
|
}) |
|
function goshangliasn(){ |
|
// if(details.list.islj){ |
|
// location.href=details.list.nftUrl |
|
// } |
|
} |
|
function goumai(){ |
|
if(details.list.own){ |
|
return |
|
} |
|
secondHandAreapurchase({ |
|
agora:props.id |
|
}).then(res=>{ |
|
console.log(res); |
|
if(res.code==200){ |
|
if(res.data.stateBool){ |
|
uni.navigateTo({ |
|
url: '../payorder/payorder?id=' + res.data.id |
|
}) |
|
}else{ |
|
uni.showToast({ |
|
title:'您有订单未支付，支付成功后再进行下单哟', |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
setTimeout(()=>{ |
|
uni.navigateTo({ |
|
url: '../payorder/payorder?id=' + res.data.id |
|
}) |
|
},2000) |
|
} |
|
}else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none' |
|
}) |
|
} |
|
}) |
|
} |
|
function fanhui() { |
|
uni.navigateBack({ |
|
|
|
}) |
|
} |
|
return { |
|
goumai, |
|
ykwz, |
|
fanhui, |
|
goshangliasn, |
|
details, |
|
...toRefs(details) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
page{ |
|
padding-bottom: 150upx; |
|
} |
|
.pric{ |
|
margin-top: 30upx; |
|
font-size: 32upx; |
|
} |
|
.qysm{ |
|
width: 686upx; |
|
// height: 370upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
color: #FFFFFF; |
|
margin: auto; |
|
margin-bottom: 24upx; |
|
margin-top: 50upx; |
|
padding: 40upx 30upx; |
|
box-sizing: border-box; |
|
font-size: 28upx; |
|
>view:nth-of-type(1){ |
|
margin-bottom: 20upx; |
|
} |
|
} |
|
.zuoping{ |
|
width: 686upx; |
|
// height: 370upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
color: #FFFFFF; |
|
margin: auto; |
|
margin-bottom: 24upx; |
|
margin-top: 50upx; |
|
padding: 25upx 30upx; |
|
box-sizing: border-box; |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
// padding: 20upx 32upx 26upx 32upx; |
|
padding-bottom: 32upx; |
|
// border-bottom: 1upx solid #373737; |
|
|
|
// >view:nth-of-type(1) { |
|
// font-size: 32upx; |
|
// font-weight: bold; |
|
// color: #FFFFFF; |
|
// } |
|
>view:nth-of-type(1){ |
|
font-size: 25upx; |
|
background-color: #ffffff; |
|
padding:6upx 10upx; |
|
color: #2F79FF; |
|
margin-right: 20upx; |
|
border-radius: 10upx; |
|
} |
|
>view:nth-of-type(2) { |
|
font-size: 40upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
font-size: 30upx; |
|
>image{ |
|
width: 55upx; |
|
height: 55upx; |
|
border-radius: 50%; |
|
margin-right: 20upx; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
|
|
} |
|
} |
|
} |
|
|
|
.prices { |
|
width: 686upx; |
|
// height: 370upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
color: #FFFFFF; |
|
margin: auto; |
|
margin-bottom: 24upx; |
|
margin-top: 50upx; |
|
padding: 40upx 30upx; |
|
box-sizing: border-box; |
|
font-size: 28upx; |
|
>view{ |
|
display: flex; |
|
&:nth-of-type(1){ |
|
margin-bottom: 20upx; |
|
} |
|
&:nth-of-type(2){ |
|
margin-bottom: 20upx; |
|
} |
|
>view:nth-of-type(1){ |
|
width: 140upx; |
|
} |
|
>view:nth-of-type(2){ |
|
width: 480upx; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
|
|
|
|
.details_top { |
|
width: 750upx; |
|
height: 812upx; |
|
background-image: url('@/static/detailstop.png'); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 66upx; |
|
.max_box{ |
|
width: 520upx; |
|
height: 520upx; |
|
position: relative; |
|
// display: flex; |
|
// align-content: center; |
|
// justify-content: center; |
|
} |
|
.img1 { |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-width: 100%; |
|
} |
|
.img2 { |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-height: 100%; |
|
} |
|
} |
|
|
|
.head_top { |
|
width: 100%; |
|
height: 50upx; |
|
position: absolute; |
|
top: 50upx; |
|
left: 0; |
|
display: flex; |
|
z-index: 10; |
|
font-size: 43upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
justify-content: space-between; |
|
|
|
>image { |
|
width: 48upx; |
|
height: 48upx; |
|
} |
|
} |
|
.zhuanzhen{ |
|
position: fixed; |
|
left: 0; |
|
bottom: 0; |
|
width: 750upx; |
|
height: 116upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 32upx; |
|
color: #FFFFFF; |
|
>view{ |
|
width: 50%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-right: 1upx solid #FFFFFF50; |
|
&:nth-last-child(1){ |
|
border-right: none; |
|
} |
|
} |
|
} |
|
</style>
|
|
|