qidian/pages/mydetils/mydetils.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="list.tupian" />
			<video v-if="!sftp" :class="ykwz?'img1':'img2'" :src="list.tupian" loop="true" autoplay="true" :enable-progress-gesture='false' :controls='false' object-fit="cover" :show-center-play-btn="false"></video>
		</view>
	</view>
	<view class="zuoping">
		<view>{{list.collectionName}}</view>
		<view>
			<view>
				<image :src="list.writerAvatar"></image>
				<view>{{list.artistName}}</view>
			</view>
			<view>{{list.collectorNumber}}</view>
		</view>
	</view>
	<view class="prices">
		<view>
			<view>收藏者</view>
			<view>{{list.nickname}}</view>
		</view>
		<view>
			<view>{{list.islj?'上链地址':'哈希值'}}</view>
			<view :style="list.islj?'color:#0b81ff':''" @click="goshangliasn">{{list.nftUrl}}</view>
		</view>
	</view>
	<view class="zhuanzhen" v-if="true" @click="gozhuan">
		转赠
	</view>
</template>

<script>
	import {
		criticismmydetails,
	} from '@/api/user.js'
	import {
		reactive,
		toRefs,
		ref
	} from 'vue'
	export default {
		props: ['id'],
		setup(props) {
			let details = reactive({
				list: {}
			})
			let sftp=ref(true)
			let ykwz=ref(true)
			criticismmydetails({
				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
				}
				// if(details.list.imagePath.indexOf('gif')<0){
				// 	details.list.tupian=details.list.imagePath
				// }else if(details.list.imagePath.indexOf('gif')>=0){
				// 	details.list.tupian=details.list.imagePath
				// }
				details.list.tupian=details.list.imagePath
				if(details.list.tupian.indexOf('mp4')!=-1){
					// sfsp=true
					sftp.value=false
				}else{
					sftp.value=true
					// sfsp=false
					uni.getImageInfo({
						src: 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
							}
						}
					});
				}
			})
			function goshangliasn(){
				if(details.list.islj){
					location.href=details.list.nftUrl
				}
			}

			function fanhui() {
				uni.navigateBack({

				})
			}
			function gozhuan(){
				uni.navigateTo({
					url:'../zhuanzhen/zhuanzhen?id='+props.id
				})
			}
			
			return {
				sftp,
				gozhuan,
				ykwz,
				fanhui,
				goshangliasn,
				details,
				...toRefs(details)
			}
		}
	}
</script>

<style lang="scss">
	.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){
			font-size: 35upx;
			margin-bottom: 20upx;
			font-weight: 600;
		}
		>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;
			}
			>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;
	}
</style>