<template>
<view class="container">
<Head @backto="backto()" title="作品详情"></Head>
<view class="zuopingxx">
<image :src="details.collectiondetails.avatar"></image>
<view class="zuozexinxi">
<image :src="collection.artist.avatar"></image>
<view>{{collection.artist.name}}</view>
<view>{{details.collectiondetails.name}}</view>
</view>
<view class="faxinxx">
<view>
<view>发行份数</view>
<view>{{details.collectiondetails.number}}</view>
</view>
<view>
<view>首发价格</view>
<view>{{details.collectiondetails.first_price}}</view>
</view>
<view>
<view>发行时间</view>
<view>{{details.collectiondetails.issue_date}}</view>
</view>
</view>
<view class="faxinbh">
<view>
<view>编号</view>
<view v-if="workerid.no">#{{workerid.no}}</view>
<view v-else>#{{details.collectiondetails.no}}</view>
</view>
<view>
<view>收集途径</view>
<view>{{details.collectiondetails.collection_way}}</view>
</view>
<view>
<view>获得日期</view>
<view>{{details.collectiondetails.get_date}}</view>
</view>
</view>
</view>
<view class="fuwenben">
<rich-text :nodes="details.describe"></rich-text>
</view>
<view class="qianggou " @click="comepay" v-if="collection.buy&&!workerid.no&&collection.number">
抢购
</view>
<view class="qianggou active" @click="comepay1" v-else>
抢购
</view>
</view>
</template>
<script>
import {
onLoad
} from "@dcloudio/uni-app";
import {
worksdetail,
orderplace
} from '@/api/api.js'
import {
reactive
} from "vue"
import Head from "../../components/head.vue"
export default {
components:{
Head
},
setup() {
let collection = reactive({
artist: {},
buy:false,
number:true
});
let details = reactive({
collectiondetails: {},
describe:''
})
let workerid = reactive({
id: "",
no:'',
})
onLoad((options) => {
// 如果拥有did 则存在本地
if(options.did){
uni.setStorageSync("id",options.did)
}
workerid.id = options.id;
options.no?workerid.no=options.no:workerid.no="";
// workerid.no=
worksdetail({
id: options.id
}).then((res) => {
console.log(res);
collection.artist = res.data.artist;
details.collectiondetails = res.data;
details.describe=res.data.describe
// 时间 发行时间是否到达
console.log(new Date(details.collectiondetails.start_time).getTime());
uni.getSystemInfo({
success: function (res) {
console.log(res)
if(res.osName=="ios"){
if(new Date().getTime()>new Date(details.collectiondetails.start_time.replace(/-/g,'/').replace(/T/g,' ')).getTime()){
collection.buy=true;
console.log(collection.buy);
}
}else{
if(new Date().getTime()>new Date(details.collectiondetails.start_time).getTime()){
collection.buy=true;
console.log(collection.buy);
}
}
}
});
// 发行的数量
if(details.collectiondetails.number<=0){
collection.number=false
}
})
})
function backto (){
let did=uni.getStorageSync("id")
uni.reLaunch({
url: `../index/index?did=${did}`
})
}
function comepay() {
orderplace({
works_id: workerid.id
}).then((res) => {
console.log(res);
if (res.code == 202) {
uni.showToast({
duration: 1000,
title: `${res.msg}`,
icon: "error"
})
} else {
uni.showToast({
duration: 1500,
title: "抢购成功",
icon: "success"
})
uni.navigateTo({
url: `../payorder/payorder?id=${res.data.order_id}&wokerid=${workerid.id}`
})
}
})
}
function comepay1(){
// uni.showToast({
// duration:1500,
// title:"不能购买",
// icon:"error"
// })
}
return {
collection,
details,
comepay,
workerid,
backto,
comepay1
}
}
}
</script>
<style lang="scss">
.container{
position: relative;
}
.zuopingxx {
width: 686upx;
// height: 1258upx;
background: #23262F;
border-radius: 32upx;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 24upx;
box-sizing: border-box;
padding-top: 150rpx;
>image {
width: 640rpx;
height: 640rpx;
border-radius: 24upx;
}
.zuozexinxi {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -49upx;
>image {
width: 98upx;
height: 98upx;
border-radius: 50%;
}
>view {
color: #ffffff;
&:nth-of-type(1) {
font-size: 28upx;
font-weight: 500;
margin-top: 20upx;
margin-bottom: 28upx;
}
&:nth-of-type(2) {
font-size: 32upx;
font-weight: bold;
}
}
}
.faxinxx {
display: flex;
align-items: center;
justify-content: space-between;
padding: 34upx;
font-size: 28upx;
font-weight: 400;
margin-top: 80upx;
color: #FFFFFF;
width: 642upx;
height: 146upx;
border-radius: 10upx;
opacity: 1;
border: 1upx solid #8D8C9F;
box-sizing: border-box;
>view {
display: flex;
flex-direction: column;
align-items: center;
min-width: 152upx;
>view:nth-of-type(1) {
margin-bottom: 15upx;
}
}
}
.faxinbh {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28upx;
font-weight: 400;
margin-top: 80upx;
color: #FFFFFF;
width: 642upx;
height: 146upx;
padding: 34upx;
border-radius: 10upx;
opacity: 1;
box-sizing: border-box;
>view {
display: flex;
flex-direction: column;
align-items: center;
min-width: 152upx;
>view:nth-of-type(1) {
margin-bottom: 15upx;
}
}
}
}
.fuwenben {
width: 686upx;
// height: 1064upx;
margin: auto;
box-sizing: border-box;
margin-top: 40upx;
margin-bottom: 140upx;
// padding-bottom: 150upx;
>image {
width: 686upx;
height: 1064upx;
}
}
.qianggou {
width: 668upx;
height: 84upx;
background: #3772FF;
border-radius: 12upx;
font-size: 28upx;
font-weight: 500;
color: #FFFFFF;
position: fixed;
bottom: 30upx;
left: 50%;
transform: translate(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.active{
background-color: #8D8C9F;
}
page {
// padding-top: 20upx;
}
</style>