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.
784 lines
17 KiB
784 lines
17 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 v-if="sftp" :class="ykwz?'img1':'img2'" :src="details.list.tupian" /> |
|
<video v-if="!sftp" :class="ykwz?'img1':'img2'" :src="details.list.tupian" :loop="true" :autoplay="true" :enable-progress-gesture='false'></video> |
|
</view> |
|
</view> |
|
<view class="prices"> |
|
<view> |
|
<!-- <view>￥</view> --> |
|
<view>{{details.list.collectionName}}</view> |
|
</view> |
|
<view> |
|
<view> |
|
<view> |
|
<image :src="details.list.writerAvatar"></image> |
|
<view>{{details.list.artistName}}</view> |
|
</view> |
|
<view class="tubiao" v-show="details.list.issueNumber"> |
|
<view>发行</view> |
|
<view>{{details.list.issueNumber}}份</view> |
|
</view> |
|
</view> |
|
<view class="usertx"> |
|
<view style="price"> |
|
<view>￥</view> |
|
<view>{{details.list.price}}</view> |
|
</view> |
|
<view class="xg" v-show="details.list.quota!=0">限购{{details.list.quota}}份</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="heyuedizhi"> |
|
<view>合约地址</view> |
|
<view>{{details.list.contractAddress}}</view> |
|
</view> |
|
<!-- <view class="faxingxinxi" v-if="!details.list.blindState"> --> |
|
<view class="faxingxinxi" v-if="false"> |
|
<view> |
|
<view> |
|
<view>发行份数</view> |
|
<view>{{details.list.issueNumber}}</view> |
|
</view> |
|
<view> |
|
<view>发售价格</view> |
|
<view>{{details.list.price}}</view> |
|
</view> |
|
<view> |
|
<view>发行日期</view> |
|
<view>{{details.list.fxsj}}</view> |
|
</view> |
|
</view> |
|
<view> |
|
<view> |
|
<view>编号</view> |
|
<view>暂无</view> |
|
</view> |
|
<view> |
|
<view>收集途径</view> |
|
<view>抢购</view> |
|
</view> |
|
<view> |
|
<view>获得日期</view> |
|
<view>暂无</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="fuwenben"> |
|
<view>作品描述</view> |
|
<rich-text class="ql-editor" :nodes="details.list.storyText||''"> |
|
</rich-text> |
|
</view> |
|
<view @click="guanb" v-if="piliang" class="maxbox"> |
|
<view class="tanchuangpiliang" @click.stop=""> |
|
<view> |
|
<view class="left"> |
|
<view>购买确认</view> |
|
<view><text class="text">￥</text>{{(details.list.price*suliang).toFixed(2)}}</view> |
|
</view> |
|
<view class="rigth"> |
|
<view v-if="details.list.quota==0"> </view> |
|
<view v-else>当前商品限购:{{details.list.quota}}份</view> |
|
<view class="jiajcc"> |
|
<view @click="dowm">-</view> |
|
<view>{{suliang}}</view> |
|
<view @click="up">+</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view @click="goum" class="button">提交订单</view> |
|
</view> |
|
</view> |
|
<view v-if="!piliang" @click="qiehuan" :class="details.list.numberRemaining==0||details.list.state==7||!details.sfgm?'qianggou shouqing':'qianggou'"> |
|
<view v-if="!details.list.isdjs&&details.list.numberRemaining>0&&details.list.state!=7&&details.sfgm" style="display: flex;align-items: center;"> |
|
<view class="time">{{details.list.day}}</view><text>天</text> |
|
<view class="time">{{details.list.hours}}</view>: |
|
<view class="time">{{details.list.minutes}}</view>: |
|
<view class="time">{{details.list.seconds}}</view> |
|
</view> |
|
<view v-if="details.list.isdjs&&details.list.numberRemaining>0&&details.list.state!=7&&details.sfgm"> |
|
购买 |
|
</view> |
|
<!-- <view v-if="!details.list.isdjs"> |
|
已售罄 |
|
</view> --> |
|
<view v-if="details.list.numberRemaining==0||(details.list.state==7&&details.sfgm)"> |
|
已售罄 |
|
</view> |
|
<view v-if="!details.sfgm&&details.list.numberRemaining>0">新人专享</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
controllerdetails, |
|
criticismsendDemoQueue |
|
} from '@/api/user.js' |
|
import { |
|
reactive, |
|
toRefs, |
|
ref |
|
} from 'vue' |
|
export default { |
|
props: ['id'], |
|
onShow() { |
|
let that=this |
|
this.details.users = uni.getStorageSync('users') |
|
controllerdetails({ |
|
frequency: '1', |
|
id: this.id |
|
}).then(res => { |
|
console.log(res); |
|
this.details.list = res.data |
|
this.details.list.fxsj = res.data.timeSale.split(' ')[0] |
|
// console.log(this.details.list.imagePath.indexOf('gif'),'判断'); |
|
// if(this.details.list.imagePath.indexOf('gif')<0){ |
|
// this.details.list.tupian=this.details.list.surfacePlot |
|
// }else if(this.details.list.imagePath.indexOf('gif')>=0){ |
|
// this.details.list.tupian=this.details.list.imagePath |
|
// } |
|
let user=uni.getStorageSync('users') |
|
let uti=new Date(res.data.utime.replace(/-/g, "/")).getTime() |
|
let tim=new Date(user.createdTime.replace(/-/g, "/")).getTime() |
|
|
|
if(res.data.newcomer&&uti>tim){ |
|
this.details.sfgm=false |
|
}else{ |
|
this.details.sfgm=true |
|
} |
|
this.details.list.tupian=this.details.list.imagePath |
|
if(this.details.list.tupian.indexOf('mp4')!=-1){ |
|
// sfsp=true |
|
this.sftp=false |
|
}else{ |
|
this.sftp=true |
|
// sfsp=false |
|
uni.getImageInfo({ |
|
src: this.details.list.tupian, |
|
success: function (image) { |
|
console.log(image.width); |
|
console.log(image.height); |
|
if(image.width>image.height){ |
|
that.ykwz=true |
|
}else if(image.width<image.height){ |
|
that.ykwz=false |
|
} |
|
} |
|
}); |
|
} |
|
let richtext = this.details.list.storyText |
|
if (!richtext) { |
|
this.details.list.isdjs = false |
|
this.daojishi(res.data) |
|
} else { |
|
let regex = new RegExp('<img', 'gi'); |
|
richtext = richtext.replace(regex, '<img style="max-width: 100%;"'); |
|
this.details.list.storyText = richtext |
|
// this.details.list.timeSale = this.details.list.timeSale.substring(0, 10) |
|
// if (res.data.state != 4) { |
|
// this.details.list.isdjs = false |
|
// }else{ |
|
this.details.list.isdjs = false |
|
// } |
|
// console.log(res.data, 'this'); |
|
this.daojishi(res.data) |
|
} |
|
}) |
|
}, |
|
onUnload() { |
|
clearInterval(this.daojs) |
|
}, |
|
setup(props) { |
|
let suliang=ref(1) |
|
let piliang=ref(false) |
|
let details = reactive({ |
|
list: {}, |
|
users: {}, |
|
sfgm:false, |
|
}) |
|
let ykwz=ref(true) |
|
let sftp=ref(true) |
|
let daojs=ref(null) |
|
details.users = uni.getStorageSync('users') |
|
console.log(details.users); |
|
function guanb(){ |
|
piliang.value=false |
|
} |
|
function dowm(){ |
|
if(suliang.value==1){ |
|
uni.showToast({ |
|
title:'已经最少了', |
|
icon:'none' |
|
}) |
|
}else{ |
|
suliang.value-- |
|
} |
|
} |
|
function up(){ |
|
if(suliang.value==details.list.quota){ |
|
uni.showToast({ |
|
title:'已经到了最大购买量', |
|
icon:'none' |
|
}) |
|
}else{ |
|
suliang.value++ |
|
} |
|
} |
|
function fanhui() { |
|
uni.navigateBack({ |
|
|
|
}) |
|
} |
|
|
|
function daojishi(item) { |
|
let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime() |
|
// let deadTime = new Date('2022-06-17 18:00:00').getTime() |
|
let nowTime = null |
|
let djs = null |
|
daojs.value=setInterval(() => { |
|
nowTime = new Date().getTime() |
|
// alert(nowTime) |
|
// alert(deadTime) |
|
djs = deadTime - nowTime |
|
if (deadTime > nowTime) { |
|
details.list.isdjs = false |
|
var day = parseInt(djs / (1000 * 60 * 60*24)); |
|
var hours = parseInt((djs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
|
var minutes = parseInt((djs % (1000 * 60 * 60)) / (1000 * 60)); |
|
var seconds = parseInt((djs % (1000 * 60)) / 1000); |
|
// console.log(hours,minutes,seconds,djs); |
|
// if (day < 10) { |
|
// day = '0' + day |
|
// } |
|
if (hours < 10) { |
|
hours = '0' + hours |
|
} |
|
if (minutes < 10) { |
|
minutes = '0' + minutes |
|
} |
|
if (seconds < 10) { |
|
seconds = '0' + seconds |
|
} |
|
details.list.day=day |
|
details.list.hours = hours |
|
details.list.minutes = minutes |
|
details.list.seconds = seconds |
|
} else { |
|
clearInterval(daojs.value) |
|
details.list.isdjs = true |
|
} |
|
}, 1000) |
|
} |
|
let sfdjgm=false |
|
function qiehuan(){ |
|
if (details.list.numberRemaining == 0) { |
|
return |
|
} |
|
if (!details.users.realNameState) { |
|
uni.navigateTo({ |
|
url: '../realname/realname' |
|
}) |
|
return |
|
} |
|
if (details.list.isdjs&&details.list.state!=7&&details.sfgm) { |
|
piliang.value=true |
|
} |
|
} |
|
function goum() { |
|
console.log(details.list.numberRemaining); |
|
if (details.list.numberRemaining == 0) { |
|
return |
|
} |
|
if (!details.users.realNameState) { |
|
uni.navigateTo({ |
|
url: '../realname/realname' |
|
}) |
|
return |
|
} |
|
if (details.list.isdjs) { |
|
if(sfdjgm){ |
|
return |
|
} |
|
uni.showLoading({ |
|
title:'抢购排队中' |
|
}) |
|
sfdjgm=true |
|
let data={} |
|
if(details.list.blindState){ |
|
data={ |
|
informationId: details.list.id, |
|
numberDeals:suliang.value, |
|
blindState:true |
|
} |
|
}else{ |
|
data={ |
|
informationId: details.list.id, |
|
numberDeals:suliang.value, |
|
} |
|
} |
|
criticismsendDemoQueue(data).then(res => { |
|
// console.log(res); |
|
sfdjgm=false |
|
uni.hideLoading() |
|
if(res.code==200){ |
|
if(res.data.ts){ |
|
uni.showToast({ |
|
title:'超过最大数量，已自动下降为最大购买数', |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
setTimeout(()=>{ |
|
uni.navigateTo({ |
|
url: '../payorder/payorder?id=' + res.data.id |
|
}) |
|
},2000) |
|
}else{ |
|
uni.navigateTo({ |
|
url: '../payorder/payorder?id=' + res.data.id |
|
}) |
|
} |
|
|
|
}else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none' |
|
}) |
|
} |
|
}) |
|
} else { |
|
|
|
} |
|
} |
|
return { |
|
sftp, |
|
dowm, |
|
guanb, |
|
up, |
|
qiehuan, |
|
suliang, |
|
piliang, |
|
ykwz, |
|
daojs, |
|
fanhui, |
|
details, |
|
goum, |
|
daojishi |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.shouqing { |
|
background: #8D8C9F !important; |
|
} |
|
|
|
.qianggou { |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 116upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #ffffff; |
|
|
|
.time { |
|
width: 56upx; |
|
height: 56upx; |
|
background: rgba(255, 255, 255, 0.4); |
|
border-radius: 8upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #ffffff; |
|
margin: 0 10upx; |
|
} |
|
} |
|
|
|
.fuwenben { |
|
width: 100%; |
|
background-color: #23262F; |
|
padding: 32upx; |
|
box-sizing: border-box; |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
padding-bottom: 150upx; |
|
|
|
>view { |
|
&:nth-of-type(1) { |
|
margin-bottom: 24upx; |
|
} |
|
|
|
>image { |
|
width: 686upx; |
|
height: 994upx; |
|
} |
|
} |
|
} |
|
|
|
.prices { |
|
width: 686upx; |
|
height: 370upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
color: #FFFFFF; |
|
margin: auto; |
|
margin-bottom: 24upx; |
|
|
|
>view:nth-of-type(1) { |
|
display: flex; |
|
align-items: center; |
|
padding: 20upx 32upx 26upx 32upx; |
|
// border-bottom: 1upx solid #373737; |
|
|
|
// >view:nth-of-type(1) { |
|
// font-size: 32upx; |
|
// font-weight: bold; |
|
// color: #FFFFFF; |
|
// } |
|
|
|
>view { |
|
font-size: 40upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
} |
|
|
|
>view:nth-of-type(2) { |
|
display: flex; |
|
flex-direction: column; |
|
padding: 32upx; |
|
box-sizing: border-box; |
|
.price{ |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
>view { |
|
&:nth-of-type(1) { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 36upx; |
|
} |
|
.xg{ |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
} |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.tubiao { |
|
height: 52upx; |
|
position: relative; |
|
|
|
>view:nth-of-type(1) { |
|
width: 230upx; |
|
height: 52upx; |
|
background: linear-gradient(177deg, #FFD760 0%, #FFA947 100%); |
|
border-radius: 38upx; |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 22upx; |
|
box-sizing: border-box; |
|
} |
|
>view:nth-of-type(2) { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 148upx; |
|
height: 52upx; |
|
background: linear-gradient(128deg, #5492FF 0%, #2F79FF 100%); |
|
border-radius: 38upx; |
|
font-size: 27upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
>view { |
|
display: flex; |
|
align-items: center; |
|
|
|
>image { |
|
width: 78upx; |
|
height: 78upx; |
|
border-radius: 50%; |
|
margin-right: 16upx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.faxingxinxi { |
|
margin: auto; |
|
width: 686upx; |
|
height: 390upx; |
|
background-color: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: space-around; |
|
margin-bottom: 24upx; |
|
|
|
>view { |
|
width: 642upx; |
|
height: 146upx; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
|
|
>view { |
|
width: 30%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
|
|
>view:nth-of-type(1) { |
|
margin-bottom: 14upx; |
|
} |
|
} |
|
|
|
&:nth-of-type(1) { |
|
border: 1upx solid #373737; |
|
border-radius: 10upx; |
|
} |
|
} |
|
} |
|
|
|
.heyuedizhi { |
|
width: 686upx; |
|
height: 118upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 32upx; |
|
box-sizing: border-box; |
|
margin: auto; |
|
margin-bottom: 24upx; |
|
|
|
>view { |
|
font-size: 27upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
|
|
&:nth-of-type(1) { |
|
margin-right: 40upx; |
|
width: 120upx; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
width: 460upx; |
|
font-weight: 400; |
|
overflow-wrap: anywhere; |
|
} |
|
} |
|
} |
|
|
|
.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: 50upx; |
|
height: 50upx; |
|
|
|
} |
|
} |
|
.tanchuangpiliang{ |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
padding: 20upx 30upx; |
|
background-color: #FFFFFF; |
|
display: flex; |
|
flex-direction: column; |
|
height: 364upx; |
|
background: #FFFFFF; |
|
border-radius: 16upx 16upx 0 0; |
|
// align-items: center; |
|
color: #333333; |
|
box-sizing: border-box; |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
// align-items: center; |
|
justify-content: space-between; |
|
margin-top: 10upx; |
|
.left{ |
|
>view:nth-of-type(1){ |
|
font-size: 28upx; |
|
} |
|
.text{ |
|
font-size: 32upx |
|
} |
|
>view:nth-of-type(2){ |
|
font-size:48upx; |
|
margin-top: 50rpx; |
|
font-weight: bold; |
|
} |
|
} |
|
.rigth{ |
|
>view:nth-of-type(1){ |
|
color: #8D8C9F; |
|
font-size: 28upx |
|
} |
|
} |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
.jiajcc{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 50upx; |
|
>view:nth-of-type(1){ |
|
width: 36upx; |
|
height: 36upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: 2upx solid #8D8C9F; |
|
border-radius: 4upx; |
|
} |
|
>view:nth-of-type(2){ |
|
margin-left: 20upx; |
|
margin-right: 20upx; |
|
} |
|
>view:nth-of-type(3){ |
|
width: 36upx; |
|
height: 36upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: 2upx solid #8D8C9F; |
|
border-radius: 4upx; |
|
} |
|
} |
|
} |
|
} |
|
>.button{ |
|
width: 668upx; |
|
height: 84upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
border-radius: 200upx; |
|
font-size: 28upx; |
|
color: #ffffff; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 90upx; |
|
} |
|
} |
|
.maxbox{ |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100vh; |
|
background-color: #00000050; |
|
z-index: 9999999; |
|
} |
|
/* 隐藏video 全屏按钮 */ |
|
.video::-webkit-media-controls-fullscreen-button { |
|
display: none; |
|
} |
|
/* 隐藏video 播放按钮 */ |
|
.video::-webkit-media-controls-play-button { |
|
display: none; |
|
} |
|
/* 隐藏video 进度条 */ |
|
.video::-webkit-media-controls-timeline { |
|
display: none; |
|
} |
|
/* 隐藏video 观看的当前时间 */ |
|
.video::-webkit-media-controls-current-time-display{ |
|
display: none; |
|
} |
|
/* 隐藏video 剩余时间 */ |
|
.video::-webkit-media-controls-time-remaining-display { |
|
display: none; |
|
} |
|
/* 隐藏video 音量按钮 */ |
|
.video::-webkit-media-controls-mute-button { |
|
display: none; |
|
} |
|
.video::-webkit-media-controls-toggle-closed-captions-button { |
|
display: none; |
|
} |
|
/* 隐藏video 音量的控制条 */ |
|
.video::-webkit-media-controls-volume-slider { |
|
display: none; |
|
} |
|
/* 隐藏video 所有控件 */ |
|
.video::-webkit-media-controls-enclosure{ |
|
display: none; |
|
} |
|
</style>
|
|
|