qidian/pages/marketdetails/marketdetails.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 :class="ykwz?'img1':'img2'" :src="list.tupian" />
		</view>
	</view>
	<view class="zuoping">
		<view>
			<!-- <view>￥</view> -->
			<view v-show="Number(details.list.copyright)==1">版</view>
			<view>{{details.list.collectionName}}</view>
		</view>
		<view>
			<view>
				<image :src="list.headPhoto"></image>
				<view>{{list.artistName}}</view>
			</view>
			<view>{{list.collectorNumber}}</view>
		</view>
		<view v-if="list.price" class="pric">￥{{list.price}}</view>
	</view>
	<view class="prices">
		<view>
			<view>收藏者</view>
			<view>{{list.nickname}}</view>
		</view>
		<view>
			<view>合约地址</view>
			<view>{{list.contractAddress}}</view>
		</view>
		<view>
			<view>{{list.islj?'哈希值':'哈希值'}}</view>
			<view>{{list.tokenid}}</view>
		</view>
	</view>
	<view class="qysm" v-if="list.equity">
		<view>权益说明</view>
		<view v-html="list.equity"></view>
	</view>
	<view class="zhuanzhen" :style="list.own?'background: #8D8C9F;':''" @click="goumai" v-if="true">
		<view>购买</view>
	</view>
</template>

<script>
	import {
		secondHandAreaDealid,
		secondHandAreapurchase,
		progressionEquity
	} from '@/api/user.js'
	import {
		reactive,
		toRefs,
		ref
	} from 'vue'
	export default {
		props: ['id'],
		setup(props) {
			let details = reactive({
				list: {},
				qycone:''
			})
			let ykwz=ref(true)
			secondHandAreaDealid({
				id: props.id
			}).then(res => {
				console.log(res);
				details.list = res.data
				if(details.list.nftUrl.indexOf('http')!=-1){
					details.list.islj=true
				}else{
					details.list.islj=false
				}
				details.list.tupian=details.list.imagePath
				uni.getImageInfo({
					src: details.list.tupian,
					success: function (image) {
						console.log(image.width);
						console.log(image.height);
						if(image.width>image.height){
							ykwz.value=true
						}else if(image.width<image.height){
							ykwz.value=false
						}
					}
				});
				progressionEquity({type:Number(details.list.copyright)==1?4:11}).then(res=>{
					details.qycone=res.data[0].content
				})
			})
			function goshangliasn(){
				// if(details.list.islj){
				// 	location.href=details.list.nftUrl
				// }
			}
			function goumai(){
				if(details.list.own){
					return
				}
				secondHandAreapurchase({
					agora:props.id
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						if(res.data.stateBool){
							uni.navigateTo({
								url: '../payorder/payorder?id=' + res.data.id
							})
						}else{
							uni.showToast({
								title:'您有订单未支付，支付成功后再进行下单哟',
								icon:'none',
								duration:2000
							})
							setTimeout(()=>{
								uni.navigateTo({
									url: '../payorder/payorder?id=' + res.data.id
								})
							},2000)
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
			function fanhui() {
				uni.navigateBack({

				})
			}
			return {
				goumai,
				ykwz,
				fanhui,
				goshangliasn,
				details,
				...toRefs(details)
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 150upx;
	}
	.pric{
		margin-top: 30upx;
		font-size: 32upx;
	}
	.qysm{
		width: 686upx;
		// height: 370upx;
		background: #23262F;
		border-radius: 12upx;
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		margin: auto;
		margin-bottom: 24upx;
		margin-top: 50upx;
		padding: 40upx 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		>view:nth-of-type(1){
			margin-bottom: 20upx;
		}
	}
	.zuoping{
		width: 686upx;
		// height: 370upx;
		background: #23262F;
		border-radius: 12upx;
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		margin: auto;
		margin-bottom: 24upx;
		margin-top: 50upx;
		padding: 25upx 30upx;
		box-sizing: border-box;
		>view:nth-of-type(1){
			display: flex;
			align-items: center;
			// padding: 20upx 32upx 26upx 32upx;
			padding-bottom: 32upx;
			// border-bottom: 1upx solid #373737;
			
			// >view:nth-of-type(1) {
			// 	font-size: 32upx;
			// 	font-weight: bold;
			// 	color: #FFFFFF;
			// }
			>view:nth-of-type(1){
				font-size: 25upx;
				background-color: #ffffff;
				padding:6upx 10upx;
				color: #2F79FF;
				margin-right: 20upx;
				border-radius: 10upx;
			}
			>view:nth-of-type(2) {
				font-size: 40upx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
		>view:nth-of-type(2){
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view:nth-of-type(1){
				display: flex;
				align-items: center;
				font-size: 30upx;
				>image{
					width: 55upx;
					height: 55upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
			}
			>view:nth-of-type(2){
				
			}
		}
	}
	
	.prices {
		width: 686upx;
		// height: 370upx;
		background: #23262F;
		border-radius: 12upx;
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		margin: auto;
		margin-bottom: 24upx;
		margin-top: 50upx;
		padding: 40upx 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		>view{
			display: flex;
			&:nth-of-type(1){
				margin-bottom: 20upx;
			}
			&:nth-of-type(2){
				margin-bottom: 20upx;
			}
			>view:nth-of-type(1){
				width: 140upx;
			}
			>view:nth-of-type(2){
				width: 480upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	
	.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: 48upx;
			height: 48upx;
		}
	}
	.zhuanzhen{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750upx;
		height: 116upx;
		background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		color: #FFFFFF;
		>view{
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1upx solid #FFFFFF50;
			&:nth-last-child(1){
				border-right: none;
			}
		}
	}
</style>