a77/pages/collection/box_info/box_info.vue

<template>
	<view class="index">
		<view class="aa">

			<view class="indextop">
				<view class="" @click="back">
					<image src="@/static/2.png" mode="widthFix" style="width: 32rpx;"></image>
				</view>
				<view class="">
					<!-- <image src="@/static/index/9.png" mode="widthFix" style="width: 44rpx;"></image> -->
				</view>
			</view>

			<view class="">
				<view style="height: 50rpx;"></view>
				<view class="goods">
					<image :src="details.box_img" mode="widthFix">
					</image>
				</view>
			</view>


			<!-- 台子 -->
			<view class="Table">
				<image src="/static/index/details/table.png" mode="widthFix" style="width: 750rpx;"></image>
			</view>
			<!-- 台子 结束-->


			<!-- 限量 -->
		</view>
		<view class="name">
			<view class="list_title">
				<text>￥</text>{{ details.price }}
			</view>

			<view class="num-pric">
				<view class="">
					{{ details.box_name }}
				</view>
				<view>
					<view class="num_box">
						<view>限量</view>
						<view>{{ details.num }}份</view>
					</view>
					<!-- <view class="num_box">
						<view>剩余</view>
						<view>{{ details.sell_num || 0 }}份</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- <view class="brand">
			<view class="">
				<image src="/static/index/013.png" mode="widthFix" style="width: 100%;"></image>
			</view>
			<view class="">
				<view class="" v-for="(item,index) in coll" :key="index">
					<view class="">
						<view class="">
							<image :src="item.coll.cover" mode="" style="width: 188rpx;height: 124rpx;"></image>
						</view>
					</view>
					<view class="">
						<view class="">
							{{item.coll.name}}
						</view>
						<view class="">
							<view class="">
								概率{{item.virtual}}%
							</view>
							<view class="" style="margin-left: 20rpx;">
								原价 {{item.coll.price}}
							</view>
						</view>
					</view>
					<view class="">
						<image src="/static/index/014.png" mode="" style="width: 156rpx;height: 124rpx;"></image>
					</view>
				</view>
			</view>
		</view> -->




		<view class="desc">
			<view class="">
				藏品故事
			</view>
			<view class="" v-html="content" style="width: 100%;">

			</view>
		</view>

		<view class="desc">
			<view class="" style="color: #fff;">
				购买须知
			</view>
			<view class="">
				为更好服务平台的各位会员，特此公告数字藏品的二次交易细则。鉴于
				不同属性的数字艺术的二次交易细则各有不同，请各位用户务必审慎阅
				读并同意相关规则后进行相应操作，以免造成不必要损失。<br />
				1、依据我国法律要求，特定条件下的数宇藏品的二次交易不支持任何
				形式的变相炒作，我们坚决反对数字藏品炒作、场外交易、欺诈，或以
				任何其他非法、侵权方式使用的违法违规行为，请大家注意甄别上述涉
				嫌网络欺诈的行为及其相关风险。<br />
				2、数字藏品为虛拟数字商品，仅限20周岁（不含）以上，60周岁
				（含）以下，已实名认证的中国大陆用户购买。<br />
				3、本商品一经出售不支持退货。
			</view>
		</view>



		<view class="btn" @click="showRecharge=true">
			<view class="buy">
				<view class="" v-if="$store.state.is_send==1"
					@click="href('/pages/index/Details/passon/passon?id='+openid+'&goodsname='+name+'&img='+img+'&type=2')">
					转赠
				</view>
			</view>
			<!-- 价格 -->
			<!-- 可以购买状态 -->
			<view class="buy">
				<view class="" @click="openbox">
					开启
				</view>
			</view>

			<view class="buy" v-if="$store.state.is_mark==1">
				<view class="" @click="show_resale=true">
					转售
				</view>
			</view>
		</view>


		<u-popup :show="show_resale" mode="center" :round="10">
			<view class="">
				<view class="resale_box">
					<view class="resale_title">
						请输入转售价格
					</view>
					<view class="resale_input">
						<my-input :reserve="false" :ph="'请输入转售金额'" :type="'number'" :label="'元'"
							@input_content="changeMoney"></my-input>
					</view>
					<view class="resale_input" style="margin-top: 32rpx;">
						<my-input :reserve="false" :ph="'请输入支付密码'" :type="'password'" :label="''"
							@input_content="changePass"></my-input>
					</view>
					<view class="resale_btnbox">
						<view class="" @click="show_resale=false">
							取消
						</view>
						<view class="" @click="resale">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>




		<!-- //开盒子动画 -->
		<!-- v-show="showaction" -->
		<view class="action" v-show="showaction"></view>
		<!-- //开盒子动画 -->
		<!-- //开盒动画之后的背景 -->
		<view class="action_bcg colorBlack" @click="href('/pages/collection/collection')" v-if="showaction_bcg">
			<view class="action_title">
				恭喜获得
			</view>
			<view class="tips_head">
				<!-- <view class="line_left"></view> -->
				<view class="" style="text-align: center; margin-top: 30rpx;">{{result_name}}</view>
				<!-- <view class="line_right"></view> -->
			</view>
			<view class="box_img" style="width: 445rpx;margin: 30rpx auto;">
				<image :src="result_img" mode="" style="width:445rpx;height:445rpx;"></image>
			</view>
			<view class="tips_close" style="text-align: center;">
				按任意地方查看该藏品
			</view>
		</view>
		<!-- //开盒动画之后的背景 结束 -->
	</view>
</template>

<script>
	import myInput from "@/components/my/input_sz.vue"
	import navHeader from "@/components/my/nav_header.vue"
	export default {
		components: {
			myInput,
			navHeader
		},
		onLoad(e) {
			this.openid = e.openid
			this.id = e.id
		},
		onShow() {
			this.get_box_info()
		},
		data() {
			return {
				id: "", //藏品或者盲盒id
				name: "", //藏品或者盲盒详情
				img: "", //盲盒图片
				time: "", //盲盒获取时间
				showaction: false, //动画开启状态
				showaction_bcg: false, //动画背景状态
				openid: "", //开盲盒需要的id
				result_img: "", //开盲盒之后中奖的图片
				result_name: "", //开盲盒之后的名字
				content: "", //内容详情
				//藏品或者盲盒详情
				show_resale: false, //是否显示转售弹框
				resale_money: "", //转售金额
				pass: "",
				details: {}
			}
		},
		methods: {
			//提交转售
			resale() {
				this.$api.pop("提交中", "loading")
				// type1藏品 2盲盒
				this.api.resale(this.resale_money, 2, this.openid, this.pass).then(res => {
					if (res.code == 1) {
						this.$api.pop("转售成功")
						setTimeout(() => {
							this.$api.totabar("/pages/market/market")
						}, 500)

					}
					console.log(res)
				})
			},
			changeMoney(e) {
				this.resale_money = e
			},
			changePass(e) {
				this.pass = e;
			},
			//开盲盒子
			openbox() {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				})
				this.api.open_box(this.openid).then(res => {
					if (res.code == 1) {
						this.result_img = res.data.cover
						this.result_name = res.data.name
						uni.hideToast()
						this.showaction = true
						setTimeout(() => {
							this.showaction = false
							this.showaction_bcg = true
						}, 2000)
					}
					console.log(res)
				})
			},
			//获取盲盒详情
			get_box_info() {
				this.api.box_info(this.id).then(res => {
					this.details = res.data
					this.name = res.data.box_name
					this.img = res.data.box_img
					this.time = res.data.create_at
					this.id = res.data.id
					this.content = this.$api.turnhtml(res.data.desc)
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		padding-bottom: 200rpx;

		.name {
			width: 686rpx;
			font-size: 40rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			box-sizing: border-box;
			background: #1D1F1E;
			z-index: 9999;
			position: relative;
			padding-bottom: 24rpx;
			margin: 32rpx auto 24rpx;




			.num-pric {
				background: #171918;
				width: 590rpx;
				margin: auto;
				border-radius: 24rpx;
				padding-bottom: 24rpx;
				padding: 24rpx 0 24rpx 24rpx;

				>view:first-child {
					font-size: 32rpx;
					color: #fff;
					font-weight: 500;

				}

				>view:last-child {
					display: flex;
					font-size: 24rpx;
					text-align: center;
					line-height: 40rpx;

					.num_box {
						display: flex;
						margin-top: 24rpx;
						margin-right: 24rpx;

						>view:first-child {
							background: #F4E0BD;
							width: 72rpx;
							height: 40rpx;
							color: #000;
							border-radius: 8rpx;

						}

						>view:last-child {
							background: #4B4B4B;
							height: 40rpx;
							padding: 0 5rpx;
							color: #F4E0BD;
							border-radius: 8rpx;
							margin-left: 8rpx;
						}
					}
				}
			}

			.list_title {
				padding: 20rpx 0 20rpx 32rpx;
				font-size: 40rpx;
				font-family: Tahoma-Bold, Tahoma;
				font-weight: bold;
				background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}


		.desc {
			width: 622rpx;
			margin: auto;
			font-size: 32rpx;
			background: #1D1F1E;
			padding: 24rpx 32rpx 32rpx 32rpx;
			border-radius: 24rpx;
			margin-top: 24rpx;
			color: #fff;

			>view:first-child {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			>view:last-child {
				font-size: 26rpx;
				color: #fff;
				margin: auto;
			}
		}
	}

	/deep/.u-popup__content {
		background: #1D1F1E;
	}

	.resale_box {
		/* width: 540rpx; */
		/* padding: 0 10rpx; */
		background: #1D1F1E;
		border-radius: 20rpx;
	}

	.resale_title {
		text-align: center;
		margin: 65rpx auto;
		color: #fff;
	}

	.resale_btnbox {
		width: 710rpx;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 70rpx;
		margin-bottom: 70rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.resale_btnbox>view {
		width: 290rpx;
		height: 78rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 78rpx;
	}

	.resale_btnbox>view:first-child {
		color: #69FF60;
		border: 1px solid #69FF60;
	}

	.resale_btnbox>view:last-child {
		background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
		color: #000;
	}

	.action {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: url("@/static/openbox.gif");
		background-size: 100% 100%;
		z-index: 99999;
	}

	.action_bcg {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: url("@/static/openbox_bcg.gif");
		background-size: 100% 100%;
		z-index: 999999;
		box-sizing: border-box;
		padding-top: 200rpx;
	}

	.action_title {
		text-align: center;
		font-size: 60rpx;
		font-weight: bolder;

	}





	.indextop {
		display: flex;
		justify-content: space-between;
		padding: 50rpx 32rpx 0;
		align-items: center;
	}

	.goods {
		width: 580rpx;
		margin: 0 auto 50rpx;
		-webkit-animation: ud 2s linear infinite;
		animation: ud 2s linear infinite;
	}

	.goods image {
		left: 0;
		top: 0;
	}

	.goods image:nth-child(1) {
		width: 580rpx;
		height: 580rpx;
		// border: 2rpx solid #0C0E0D;
		transform: rotateY(0deg) translateZ(10rpx);
	}

	.goods image:nth-child(2) {
		width: 16rpx;
		height: 432rpx;
		// border-left: 2rpx solid #0C0E0D;
		// border-right: 2rpx solid #0C0E0D;
		transform: rotateY(90deg) translateZ(422rpx);
	}

	.goods image:nth-child(3) {
		width: 428rpx;
		height: 428rpx;
		// border: 2rpx solid #0C0E0D;
		transform: rotateY(180deg) translateZ(10rpx);
	}

	.goods image:nth-child(4) {
		width: 16rpx;
		height: 432rpx;
		// border-left: 2rpx solid #0C0E0D;
		// border-right: 2rpx solid #0C0E0D;
		transform: rotateY(270deg) translateZ(10rpx);
	}

	.goods view {
		position: absolute;
		left: -20rpx;
		top: -20rpx;
		width: 382rpx;
		height: 382rpx;
		padding: 20px;
		// border: 6rpx solid white;
		border-radius: 16rpx;
	}

	.goods_full {
		margin-top: 44rpx;
	}


	.Table {
		text-align: center;
		margin-top: -30rpx;
	}


	.collection_info {
		width: 622rpx;
		height: 208rpx;
		border: 1px solid #DDDDDD;
		border-radius: 40rpx;
		margin: auto;
		padding: 0 32rpx;

		>view {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view:first-child {
				color: #434343;
				font-size: 28rpx;
			}

			>view:last-child {
				color: #000;
				font-size: 30rpx;

				image {
					margin-left: 8rpx;
				}
			}
		}

		>view:last-child {
			margin-top: 16rpx;
		}
	}








	.brand {
		padding: 0 32rpx;
		margin: 40rpx 0;

		>view {

			>view {
				display: flex;
				justify-content: space-between;
				width: 678rpx;
				height: 140rpx;
				align-items: center;
				border: 1px solid #EFEFEF;
				padding-left: 8rpx;
				margin-bottom: 20rpx;

				>view:nth-child(2) {
					>view:first-child {
						font-weight: bold;
						font-size: 32rpx;
					}

					>view:last-child {
						display: flex;
						font-size: 24rpx;
						justify-content: space-between;
						margin-top: 12rpx;
					}
				}
			}
		}


	}





	.btn {
		position: fixed;
		bottom: 0;
		height: 128rpx;
		/* background: rgba(0, 0, 0, .6); */
		z-index: 9999;
		background: #000;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;

		.bom_price {
			text {
				font-size: 36rpx;
			}

			font-size: 56rpx;
		}

		>view {
			align-self: center;
		}

	}



	.buy {
		width: 222rpx;
		height: 92rpx;
		border-radius: 164rpx;
		text-align: center;
		line-height: 92rpx;
		color: #000;
		font-size: 28rpx;
		letter-spacing: 4rpx;
		text-align: center;
		display: flex;
		margin-right: 20rpx;
	}

	.buy>view {
		align-self: center;
		width: 444rpx;
		height: 92rpx;
		border-radius: 92rpx;
		margin-left: auto;
		text-align: center;
		background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
		color: #000;
	}

	.soldout {
		width: 240rpx;
		height: 84rpx;
		border-radius: 164rpx;
		margin-left: auto;
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		letter-spacing: 4rpx;
	}

	.soon {
		width: 240rpx;
		height: 84rpx;
		/* background: #1C1C1E; */
		border-radius: 164rpx;
		margin-left: auto;
		text-align: center;
		/* color: #fff; */
		font-size: 34rpx;
		letter-spacing: 4rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.soon>view:last-child {
		font-size: 24rpx;
		letter-spacing: 2rpx;
	}

	.passon {
		text-align: center;
		/* display: flex; */
		color: #fff;
		font-size: 30rpx;
	}

	@-webkit-keyframes ud {
		25% {
			-webkit-transform: translateY(-10rpx);
		}

		50%,
		100% {
			-webkit-transform: translateY(0);
		}

		75% {
			-webkit-transform: translateY(10rpx);
		}
	}

	@keyframes ud {
		25% {
			transform: translateY(-10rpx);
		}

		50%,
		100% {
			transform: translateY(0);
		}

		75% {
			transform: translateY(10rpx);
		}
	}
</style>