qidian/pages/details/details.vue

<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">&nbsp;</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>