qidian/pages/liebiao/liebiao.vue

<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 class="banq" v-if="Number(item.copyright)==1">版</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.sellid
				})
			}
			return {
				qbdjs,
				fanh,
				godetails,
				fenglei,
				xuanzhon,
				gaixuanz,
				changplist
			}
		}
	}
</script>

<style lang="scss">
	.banq{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		width: 60upx;
		height: 60upx;
		background-color: #ffffff;
		color: #3772FF;
		border-radius:8upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.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>