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.
418 lines
9.1 KiB
418 lines
9.1 KiB
<template> |
|
<!-- 别动这个 --> |
|
<view class="fanhui"> |
|
<image @click="fanh" src="../../static/fanhui.png"></image> |
|
<view>作品列表</view> |
|
<view></view> |
|
</view> |
|
<!-- <view class="liebiaotop"> |
|
<view @click="gaixuanz(index,item)" v-for="(item,index) in fenglei" :class="xuanzhon==index?'xz':''"> |
|
{{item.seriesName}}</view> |
|
</view> --> |
|
<scroll-view scroll-x="true" class="Collections_biaoqian"> |
|
<view style="display: flex;"> |
|
<view class="neir" @click="gaixuanz(index,item)" v-for="(item,index) in fenglei" :class="xuanzhon==index?'xz':''"> |
|
{{item.seriesName}} |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="lists"> |
|
<view @click="godetails(item)" v-for="item in changplist"> |
|
<image :src="item.tupian"></image> |
|
<view class="djs" v-if="item.isdjs"> |
|
<view v-if="item.day>0">{{item.day}}</view><text v-if="item.day>0">天</text> |
|
<view>{{item.hours}}</view>: |
|
<view>{{item.minutes}}</view>: |
|
<view>{{item.seconds}}</view> |
|
</view> |
|
<view class="neiron"> |
|
<view>{{item.collectionName}}</view> |
|
<view> |
|
<view> |
|
<image :src="item.writerAvatar"></image> |
|
<view>{{item.artistName}}</view> |
|
</view> |
|
<view :class="item.state==7||item.numberRemaining==0||!item.sfgm||item.ismw?'':'yjxz'"> |
|
￥{{item.price}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
progressionclassification, |
|
progressionnewWorks, |
|
} from '@/api/user.js' |
|
import { |
|
ref |
|
} from 'vue' |
|
export default { |
|
onUnload() { |
|
clearInterval(this.qbdjs) |
|
}, |
|
setup() { |
|
let xuanzhon = ref(0) |
|
let fenglei = ref([]) |
|
let changplist = ref([]) |
|
let qbdjs=ref(null) |
|
progressionclassification({}).then(res => { |
|
console.log(res); |
|
fenglei.value = res.data |
|
progressionnewWorks({ |
|
id: fenglei.value[xuanzhon.value].id |
|
}).then(res => { |
|
console.log(res); |
|
changplist.value = res.data.list |
|
changplist.value.map(item=>{ |
|
if(item.state==2||item.state==3){ |
|
let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime() |
|
let nowTime = new Date().getTime() |
|
if(deadTime>nowTime){ |
|
item.ismw=true |
|
}else{ |
|
item.ismw=false |
|
} |
|
}else{ |
|
item.ismw=false |
|
} |
|
let user=uni.getStorageSync('users') |
|
let uti=new Date(res.data.utime.replace(/-/g, "/")).getTime() |
|
let tim='' |
|
if(user){ |
|
tim=new Date(user.createdTime.replace(/-/g, "/")).getTime() |
|
} |
|
if(!user){ |
|
item.sfgm=false |
|
}else if(item.newcomer&&uti>tim){ |
|
item.sfgm=false |
|
}else{ |
|
item.sfgm=true |
|
} |
|
if(item.surfacePlot){ |
|
item.tupian=item.surfacePlot |
|
}else{ |
|
item.tupian=item.thumbnail |
|
} |
|
return item |
|
}) |
|
qbdjs.value=setInterval(()=>{ |
|
changplist.value.map((item, index) => { |
|
if (item.state == 2 || item.state == 3) { |
|
daojishi(item, index) |
|
} else { |
|
changplist.value[index].isdjs = false |
|
} |
|
}) |
|
},1000) |
|
}) |
|
}) |
|
|
|
function gaixuanz(index, item) { |
|
xuanzhon.value = index |
|
changplist.value = [] |
|
chushihua() |
|
} |
|
|
|
function chushihua() { |
|
progressionnewWorks({ |
|
id: fenglei.value[xuanzhon.value].id |
|
}).then(res => { |
|
console.log(res); |
|
changplist.value = res.data.list |
|
changplist.value.map(item=>{ |
|
if(item.surfacePlot){ |
|
item.tupian=item.surfacePlot |
|
}else{ |
|
item.tupian=item.thumbnail |
|
} |
|
if(item.state==2||item.state==3){ |
|
let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime() |
|
let nowTime = new Date().getTime() |
|
if(deadTime>nowTime){ |
|
item.ismw=true |
|
}else{ |
|
item.ismw=false |
|
} |
|
}else{ |
|
item.ismw=false |
|
} |
|
let user=uni.getStorageSync('users') |
|
let uti=new Date(res.data.utime.replace(/-/g, "/")).getTime() |
|
let tim='' |
|
if(user){ |
|
tim=new Date(user.createdTime.replace(/-/g, "/")).getTime() |
|
} |
|
if(!user){ |
|
item.sfgm=false |
|
}else if(item.newcomer&&uti>tim){ |
|
item.sfgm=false |
|
}else{ |
|
item.sfgm=true |
|
} |
|
return item |
|
}) |
|
changplist.value.map((item, index) => { |
|
if (item.state == 2 || item.state == 3) { |
|
daojishi(item, index) |
|
} else { |
|
changplist.value[index].isdjs = false |
|
} |
|
}) |
|
qbdjs.value=setInterval(()=>{ |
|
changplist.value.map((item, index) => { |
|
if (item.state == 2 || item.state == 3) { |
|
daojishi(item, index) |
|
} else { |
|
changplist.value[index].isdjs = false |
|
} |
|
}) |
|
},1000) |
|
|
|
}) |
|
} |
|
|
|
function daojishi(item, index) { |
|
let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime() |
|
let nowTime = new Date().getTime() |
|
// console.log(deadTime>nowTime); |
|
let djs = deadTime - nowTime |
|
if (deadTime > nowTime) { |
|
changplist.value[index].isdjs = true |
|
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(hours<10){ |
|
hours='0'+hours |
|
} |
|
if(minutes<10){ |
|
minutes='0'+minutes |
|
} |
|
if(seconds<10){ |
|
seconds='0'+seconds |
|
} |
|
changplist.value[index].day = day |
|
changplist.value[index].hours = hours |
|
changplist.value[index].minutes = minutes |
|
changplist.value[index].seconds = seconds |
|
} else { |
|
changplist.value[index].isdjs = false |
|
} |
|
} |
|
|
|
function fanh() { |
|
uni.navigateBack({ |
|
|
|
}) |
|
} |
|
|
|
function godetails(item) { |
|
uni.navigateTo({ |
|
url: '../details/details?id='+item.id |
|
}) |
|
} |
|
return { |
|
qbdjs, |
|
fanh, |
|
godetails, |
|
fenglei, |
|
xuanzhon, |
|
gaixuanz, |
|
changplist |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.Collections_biaoqian { |
|
width: 100%; |
|
display: flex; |
|
margin-top: 115upx; |
|
white-space: nowrap; |
|
padding:0 30rpx; |
|
box-sizing: border-box; |
|
|
|
.xz { |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%) !important; |
|
} |
|
|
|
.neir { |
|
// width: 144upx; |
|
padding: 10upx 30upx; |
|
// height: 56upx; |
|
border-radius: 44upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 28upx; |
|
color: #ffffff; |
|
background-color: #23262F; |
|
margin-right: 22upx; |
|
|
|
&:nth-last-child(1) { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
.fanhui { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
color: #ffffff; |
|
font-size: 28upx; |
|
position: fixed; |
|
top: 40upx; |
|
left: 0; |
|
z-index: 1; |
|
padding: 0 24upx; |
|
|
|
>image { |
|
width: 30upx; |
|
height: 30upx; |
|
} |
|
} |
|
|
|
.lists { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
margin-top: 50upx; |
|
|
|
// margin-top: -210upx; |
|
>view { |
|
width: 686upx; |
|
height: 740upx; |
|
border-radius: 24upx; |
|
position: relative; |
|
margin-bottom: 38upx; |
|
|
|
>image { |
|
width: 686upx; |
|
height: 740upx; |
|
border-radius: 24upx; |
|
} |
|
|
|
>.djs { |
|
position: absolute; |
|
right: 30upx; |
|
top: 20upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #ffffff; |
|
|
|
>view { |
|
width: 56upx; |
|
height: 56upx; |
|
background: rgba(255, 255, 255, 0.4); |
|
border-radius: 8upx; |
|
margin: 0 10upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #ffffff; |
|
} |
|
} |
|
|
|
>.neiron { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 192upx; |
|
display: flex; |
|
flex-direction: column; |
|
background: rgba(255, 255, 255, 0.4); |
|
padding: 32upx 36upx; |
|
box-sizing: border-box; |
|
border-radius: 24upx; |
|
color: #333333; |
|
font-size: 40upx; |
|
font-weight: 500; |
|
color: #333333; |
|
.yjxz{ |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%) !important; |
|
} |
|
>view { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 15upx; |
|
|
|
>view { |
|
&:nth-of-type(2) { |
|
width: 196upx; |
|
height: 74upx; |
|
background: #8D8C9F; |
|
border-radius: 12upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #ffffff; |
|
font-size: 40upx; |
|
font-weight: bold; |
|
} |
|
|
|
display: flex; |
|
align-items: center; |
|
|
|
>image { |
|
width: 78upx; |
|
height: 78upx; |
|
border-radius: 50%; |
|
margin-right: 10upx; |
|
} |
|
|
|
>view { |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #333333; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.liebiaotop { |
|
width: 100%; |
|
padding: 0 32upx; |
|
box-sizing: border-box; |
|
display: flex; |
|
padding-top: 140upx; |
|
|
|
>view { |
|
width: 162upx; |
|
height: 56upx; |
|
background-color: #23262F; |
|
border-radius: 44upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
margin-right: 15upx; |
|
|
|
&:nth-last-child(1) { |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.xz { |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%) !important; |
|
} |
|
} |
|
|
|
page { |
|
background-image: url('../../static/liebiao.png'); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
} |
|
</style>
|
|
|