mh/components/show-result.bak.vue

<template>
	<uni-popup ref="prize" mode="top" :mask-click="false">
		<view v-show="!openLoading" class="prize ">
			<view class="prize_box">
				<view class="bj"></view>
				<view class="prize_close" @click="$refs.prize.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="prize-top" :class="'prize-top-' + mode"><image src="https://www.chaomangdao.com/image/result/gaizi@2x.png" mode="aspectFit"></image></view>
				<!-- 1开 -->
				<view :class="['prize_shop', 'center', 'onebox', 'tag-' + tag, scale && 'prize_shop_scale']" v-if="mode == 0">
					<view class="left-top-tag">
						<image class="tag-img" :src="tagImg" mode="aspectFit"></image>
						<text class="tag-text">{{ tagText }}</text>
					</view>
					<image class="one" v-if="prizedata && prizedata.prizeInfo" :src="prizedata.prizeInfo[0].image" mode="widthFix"></image>
					<text class="colorblack" v-if="prizedata && prizedata.prizeInfo">{{ prizedata.prizeInfo[0].goods_name }}</text>
				</view>
				<!-- 5开or10开 -->
				<view class="prize_ul" :class="'prize_ul-' + mode" v-else>
					<!-- <scroll-view scroll-x="true" class="scroll-view"> -->
					<view :class="['prize_ul_li', 'twobox', 'flex', 'tag-' + tagFun(item)]" v-for="(item, index) in prizedata.prizeInfo" :key="index">
						<view class="left-top-tag">
							<image class="tag-img" :src="tagImgFun(item)" mode="aspectFit"></image>
							<text class="tag-text">{{ tagTextFun(item) }}</text>
						</view>
						<image class="two" :src="item.image" mode="widthFix"></image>
						<text class="a">{{ item.goods_name }}</text>
					</view>
					<!-- </scroll-view> -->
				</view>
				<view class="prize_footer" :class="'prize_footer-' + mode" v-if="type == 0">
					<!-- 立即收下 -->
					<view class="btn btn-1" @click="$emit('accept')"></view>
					<!-- 一键回收 -->
					<view class="btn btn-0" @click="$emit('recycle', prizedata)"></view>
				</view>
				<view class="shiwan center" v-else>试玩结果仅供展示哦~</view>
			</view>
		</view>
		<view v-show="openLoading" class="loading-mask"><image class="loading-gif" src="https://www.chaomangdao.com/image/result/kh.gif" mode="aspectFit"></image></view>
	</uni-popup>
</template>

<script>
export default {
	name: 'show-result',
	props: {
		//数量
		num: Number,
		/**
		 * 类型 0：正式开盒 1：试玩
		 */
		type: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			//奖品列表
			prizedata: [],
			//特效
			scale: false,
			//开盒动画
			openLoading: true
		};
	},
	computed: {
		//开盒模式 0:1抽 1:5抽 2:9抽
		mode() {
			switch (this.num) {
				case 5:
					return 1;
				case 9:
					return 2;
			}
			return 0;
		},
		//当前单抽商品
		currPrizedata() {
			if (!this.prizedata) {
				return null;
			}
			if (!this.prizedata.prizeInfo || this.prizedata.length < 1) {
				return null;
			}
			return this.prizedata.prizeInfo[0];
		},
		//单抽商品品质
		tag() {
			return this.tagFun(this.currPrizedata);
		},
		//单抽品质文本
		tagText() {
			return this.tagTextFun(this.currPrizedata);
		},
		//单抽品质角标
		tagImg() {
			return this.tagImgFun(this.currPrizedata);
		}
	},
	methods: {
		open(prizedata) {
			//打开结果
			this.$refs.prize.open();
			//加载动画
			this.openLoading = true;
			this.prizedata = prizedata;
			setTimeout(() => {
				//关闭加载
				this.openLoading = false;
				//品质不等于普通
				if (this.tag != 'normal') {
					//开启震动
					try {
						uni.vibrate({
							success: function() {
								console.log('震动');
							}
						});
					} catch (e) {
						console.log(e);
					}
					//开启效果
					this.scale = true;
					setTimeout(() => {
						this.scale = false;
					}, 1000);
				}
			}, 3000);
		},
		//关闭
		close() {
			this.$refs.prize.close();
		},
		//商品品质
		tagFun(prizeInfo) {
			if (!prizeInfo) return null;
			return prizeInfo.tag;
		},
		//品质文本
		tagTextFun(prizeInfo) {
			if (!prizeInfo) return null;
			if (prizeInfo.tag == 'normal') {
				return '普通';
			}
			if (prizeInfo.tag == 'rare') {
				return '稀有';
			}
			if (prizeInfo.tag == 'supreme') {
				return '史诗';
			}
			if (prizeInfo.tag == 'legend') {
				return '传说';
			}
		},
		//品质角标
		tagImgFun(prizeInfo) {
			if (!prizeInfo) return null;
			if (prizeInfo.tag == 'normal') {
				return '/h5/pagesA/static/tag-1.png';
			}
			if (prizeInfo.tag == 'rare') {
				return '/h5/pagesA/static/tag-2.png';
			}
			if (prizeInfo.tag == 'supreme') {
				return '/h5/pagesA/static/tag-3.png';
			}
			if (prizeInfo.tag == 'legend') {
				return '/h5/pagesA/static/tag-3.png';
			}
		}
	}
};
</script>

<style lang="scss">
.bj {
	// background: url(../static/image/result/guang@2x.png) no-repeat;
	width: 100%;
	margin-top: 0rpx;
	height: 1000rpx;
	position: relative;
	flex-direction: column;
	background-size: 100% 100%;
	background-position: top;
	background-repeat: no-repeat;
	animation: donut-spin 2.2s linear infinite;
}
.onebox {
	height: 372rpx;
	width: 352rpx;
	border-radius: 26rpx;
	background-color: #fff;
}
.twobox {
	height: 186rpx;
	width: 176rpx;
	border-radius: 13rpx;
	background-color: #fff;
}
.prize {
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;
	.prize_box {
		width: 100%;
		margin-top: 00rpx;
		height: 1120rpx;
		position: relative;
		flex-direction: column;
		background: url(https://www.chaomangdao.com/image/bj.jpg);
		background-size: 100% 100%;
		background-position: top;
		background-repeat: no-repeat;
		.prize_close {
			width: 64rpx;
			height: 64rpx;
			top: 64rpx;
			right: 30rpx;
			position: absolute;
		}
		.prize-top {
			width: 528rpx;
			height: 170rpx;
			position: absolute;
			top: 120rpx;
			left: 118rpx;
			&-2 {
				top: 40rpx;
			}
		}
		.prize_footer {
			width: 100%;
			height: 472rpx;
			background-image: url(https://www.chaomangdao.com/image/btns@2x.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			bottom: -34rpx;
			&-2 {
				bottom: -114rpx;
			}
			.btn {
				width: 310rpx;
				height: 84rpx;
				border-radius: 16rpx;
				position: absolute;
				left: 220rpx;
			}
			.btn-1 {
				top: 210rpx;
			}
			.btn-0 {
				top: 316rpx;
			}
		}
	}
	.shiwan {
		background: url(https://www.chaomangdao.com/image/tanchuangbeijing@2x.png) no-repeat;
		background-size: cover;
	}
	.prize_ul {
		width: 566rpx;
		// padding: 0 92rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: absolute;
		top: 336rpx;
		left: 92rpx;
		&-2 {
			top: 226rpx;
		}
		&::after {
			content: '';
			width: 176rpx;
		}
	}
	// .scroll-view {
	// 	width: 522rpx;
	// 	white-space:nowrap;
	.prize_ul_li {
		margin-bottom: 16rpx;
		position: relative;
		width: 176rpx;
		height: 186rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
		padding: 8rpx 0;
		// margin-right: 20rpx;
		box-sizing: border-box;

		image {
			margin: 0 auto;
		}
		text {
			font-size: 24rpx;
			// font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			width: 146rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.left-top-tag {
			width: 3rem;
			height: 3rem;
			.tag-text {
				font-size: 0.6rem !important;
			}
		}
	}
	// }
	.prize_shop {
		transition: 1s;
		position: absolute;
		top: 336rpx;
		left: 198rpx;
		display: flex;
		flex-direction: column;
		image {
			width: 174rpx;
			height: 235rpx;
			margin-bottom: 20rpx;
		}
		text {
			width: 70%;
			font-size: 16rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
		}
		.colorblack {
			font-size: 32rpx !important;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
		}
		.left-top-tag {
			width: 5rem;
			height: 5rem;
			.tag-text {
				font-size: 1rem;
			}
		}
	}
	.tag-normal {
		box-shadow: 0 0 40rpx 18rpx #9d85ff;
	}
	.tag-rare {
		box-shadow: 0 0 40rpx 18rpx #47a8ff;
	}
	.tag-supreme {
		box-shadow: 0 0 40rpx 32rpx #feb337;
	}
	.tag-legend {
		box-shadow: 0 0 40rpx 32rpx #fe615e;
	}
	.shiwan {
		width: 399rpx;
		height: 48rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 40rpx;
		background: #000000;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
	}
}
.left-top-tag {
	z-index: 999999;
	position: absolute;
	left: -2px;
	top: -3px;
	.tag-img {
		height: 100% !important;
		width: 100% !important;
	}
	.tag-text {
		position: absolute;
		top: 30%;
		left: 30%;
		color: #fff !important;
		width: auto !important;
		transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	}
}
.prize_shop_scale {
	transform: scale(1.3);
}
.loading-mask {
	position: fixed;
	height: 100vh;
	width: 100vw;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #76767652;
	.loading-gif {
		width: 60%;
	}
}
//音乐背景旋转
@keyframes donut-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>