mh/components/show-result.vue

<template>
	<uni-popup class="cartoon-main" ref="prize" mode="top" :mask="false">
		<view class="cartoon">
			<view :class="['payMoney', explode && 'xianshi']">
				<view class="payMoneyBox">
					<view class="close-btn" @click="payclose()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
					>
					<!-- 1开 -->
					<view :class="['money-buniss', 'center', 'buy1', 'tag-' + tag, scale && 'money-buniss-balance']" v-if="mode == 0">
						<view class="xuanzhuan"></view>
						<view class="applybc">
							<image class="xuanzhuanBg" :src="tagImg" mode="aspectFit"></image>
							<text class="xuanzhuanFont">{{ tagText }}</text>
						</view>
						<image class="onlyone" v-if="prizedata && prizedata.prizeInfo" :src="prizedata.prizeInfo[0].image" mode="widthFix"></image>
						<text class="box-font" v-if="prizedata && prizedata.prizeInfo">{{ prizedata.prizeInfo[0].goods_name }}</text>
						<text class="box-font" v-if="prizedata && prizedata.prizeInfo">￥{{ prizedata.prizeInfo[0].coin_price }}</text>
					</view>
					<!-- 5开or10开 -->
					<view class="money-list" :class="'money-list-' + mode" v-else>
						<view :class="['money-list-item', 'buy2', 'flex', 'tag-' + tagFun(item)]" v-for="(item, index) in prizedata.prizeInfo" :key="index">
							<view class="applybc">
								<image class="xuanzhuanBg" :src="tagImgFun(item)" mode="aspectFit"></image>
								<text class="xuanzhuanFont">{{ tagTextFun(item) }}</text>
							</view>
							<image class="hengduo" :src="item.image" mode="widthFix"></image>
							<view class="name">{{ item.goods_name }}</view>
							<view class="money">￥{{ item.coin_price }}</view>
						</view>
					</view>
					<view class="money-btnBox" :class="'money-btnBox-' + mode" v-if="type == 0">
						<!-- 立即收下 -->
						<view class="money-btn goumai" @click="shouxia()">立即收下</view>
						<!-- 一键回收 -->
						<view class="money-btn huishou" @click="huishou()">一键回收</view>
					</view>
					<view class="tryplay center" v-else>试玩结果仅供展示哦~</view>
				</view>
			</view>
			<view v-show="!hide" class="donghua" @click="showAnimation">
				<view :class="['donghua-box', explode && 'explode']">
					<view :animation="boxAnimation"><image :src="boxImg" mode="heightFix" class="box"></image></view>
					<image src="https://www.chaomangdao.com/image/result/halo.png" mode="heightFix" class="halo"></image>
				</view>
				<view class="shouzhi" v-if="!isopen"><image src="https://www.chaomangdao.com/image/ss.gif" mode=""></image></view>
			</view>
		</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,
			boxImg: 'https://www.chaomangdao.com/image/result/box.png',
			//动画
			boxAnimation: {},
			animationTime: 100,
			explode: false,
			hide: false,
			isopen: false
		};
	},
	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: {
		//盒子抖动
		shake: function(animation) {
			let time = 0;
			const duration = 90;
			for (var i = 0; i < 20; i++) {
				let rotate = -10;
				let scaleY = 1.1;
				if (i % 2 != 0) {
					rotate = 0;
					scaleY = 1;
				}
				animation
					.rotate(rotate)
					.scaleY(scaleY)
					.step({
						duration
					});
				time += duration;
			}
			return time;
		},
		//盒子压缩
		compress: function(animation) {
			const duration = 100;
			animation
				.translateY('5vh')
				.scaleY(0.9)
				.scaleX(1.2)
				.step({
					duration
				});
			return duration;
		},
		//盒子跳跃
		jump: function(animation) {
			const duration = 150;
			animation
				.translateY('-50vh')
				.scaleY(1.1)
				.scaleX(0.9)
				.step({
					duration
				});
			return duration;
		},
		open(prizedata) {
			prizedata.boxImg && (this.boxImg = prizedata.boxImg);
			//打开结果
			this.$refs.prize.open();
			//加载动画
			this.prizedata = prizedata;
			// this.$nextTick(() => {
			// 	this.showAnimation();
			// });
		},
		showAnimation() {
			this.isopen = true;
			let animation = uni.createAnimation();
			this.animationTime += this.shake(animation);
			this.animationTime += this.compress(animation);
			this.animationTime += this.jump(animation);
			this.animation = animation;
			this.boxAnimation = animation.export();
			console.log(this.animationTime, '动画时长');
			setTimeout(() => {
				this.explode = true;
				this.hide = true;
				// this.hideAnimation();
				if (this.tag != 'normal') {
					//开启震动
					try {
						uni.vibrateShort({
							success: function() {
								console.log('震动');
							}
						});
					} catch (e) {
						console.log(e);
					}
					//开启效果
					// this.scale = true
					// setTimeout(() => {
					// 	this.scale = false
					// }, 1000)
				}
			}, this.animationTime);
		},
		hideAnimation() {
			setTimeout(() => {
				this.hide = true;
			}, 1300);
		},
		//关闭
		payclose() {
			this.animationTime = 0;
			this.explode = false;
			this.hide = false;
			this.isopen = false;
			this.$emit('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 'https://www.chaomangdao.com/image/tag-1.png';
			}
			if (prizeInfo.tag == 'rare') {
				return 'https://www.chaomangdao.com/image/tag-2.png';
			}
			if (prizeInfo.tag == 'supreme') {
				return 'https://www.chaomangdao.com/image/tag-3.png';
			}
			if (prizeInfo.tag == 'legend') {
				return 'https://www.chaomangdao.com/image/tag-4.png';
			}
		},
		shouxia() {
			this.$refs.prize.close();
			this.$emit('accept');
		},
		huishou() {
			this.$refs.prize.close();
			uni.showModal({
				cancelText: '取消',
				confirmText: '确认',
				title: '一键回收',
				content: '是否确认一键回收？',
				success: res => {
					if (res.confirm) {
						this.$emit('recycle', this.prizedata);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.buy1 {
	height: 372rpx;
	width: 352rpx;
	border-radius: 26rpx;
	background-color: #fff;
}

.buy2 {
	width: 176rpx;
	border-radius: 13rpx;
	background-color: #fff;
}

.cartoon-main {
	z-index: 9999;

	.cartoon {
		background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
		position: fixed;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
}

.payMoney {
	transform: scale(0);
	opacity: 0;
	transition: 0.2s;
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;

	&.xianshi {
		transform: scale(1);
		opacity: 1;
	}

	.payMoneyBox {
		width: 100%;
		height: 1120rpx;
		position: relative;
		flex-direction: column;
		// background: url(static/image/result/guang@2x.png) no-repeat;
		background-size: 100% auto;
		background-position: top;
		background-repeat: no-repeat;

		.close-btn {
			width: 64rpx;
			height: 64rpx;
			top: 280rpx;
			right: 30rpx;
			position: absolute;
			z-index: 999999;
		}

		.prize-top {
			width: 528rpx;
			height: 270rpx;
			position: absolute;
			top: 120rpx;
			left: 118rpx;

			&-2 {
				top: 40rpx;
			}
		}

		.money-btnBox {
			width: 100%;

			&-2 {
				bottom: -200rpx;
			}

			.money-btn {
				height: 84rpx;
				border-radius: 16rpx;
				position: absolute;
			}

			.goumai {
				bottom: 0rpx;
				background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
				font-size: 38rpx;
				text-align: center;
				line-height: 86rpx;
				width: 159px;
				border-radius: 8px;
				position: absolute;
				left: 40rpx;
				color: #ffffff;
				font-weight: bold;
			}

			.huishou {
				bottom: 0rpx;
				background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
				font-size: 38rpx;
				text-align: center;
				line-height: 86rpx;
				right: 40rpx;
				width: 159px;
				color: #ffffff;
				font-weight: bold;
			}
		}
	}

	.tryplay {
		background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
		background-size: cover;
	}

	.money-list {
		width: 566rpx;
		// padding: 0 92rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: absolute;
		top: 336rpx;
		left: 92rpx;

		&-2 {
			top: 360rpx;
		}

		&::after {
			content: '';
			width: 176rpx;
		}
	}

	// .scroll-view {
	// 	width: 522rpx;
	// 	white-space:nowrap;
	.money-list-item {
		margin-bottom: 16rpx;
		position: relative;
		width: 176rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
		padding: 8rpx;
		// margin-right: 20rpx;
		box-sizing: border-box;

		.hengduo {
			width: 176rpx;
			height: 176rpx;
		}

		.name {
			font-size: 24rpx;
			// font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			width: 146rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.money {
			margin-top: 6rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #171a20;
		}

		.applybc {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999999;
			width: 3rem;
			height: 3rem;

			.xuanzhuanBg {
				width: 100%;
				height: 100%;
			}

			.xuanzhuanFont {
				font-size: 0.6rem !important;
				position: absolute;
				position: absolute;
				top: 30%;
				left: 30%;
				color: #fff !important;
				width: auto !important;
				transform: translateX(-50%) translateY(-50%) rotate(-45deg);
			}
		}
	}

	// }
	.money-buniss {
		transition: 1s;
		position: absolute;
		top: 336rpx;
		left: 198rpx;
		display: flex;
		flex-direction: column;

		.xuanzhuan {
			z-index: -1;
			height: 150vh;
			width: 150vh;
			background-image: url(https://www.chaomangdao.com/image/result/spining.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
		}

		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;
		}

		.box-font {
			font-size: 32rpx !important;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
		}

		.applybc {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			z-index: 9999999;
			width: 5rem;
			height: 5rem;

			.xuanzhuanBg {
				width: 100%;
				height: 100%;
			}

			.xuanzhuanFont {
				font-size: 1rem;
				position: absolute;
				top: 30%;
				left: 30%;
				color: #fff !important;
				width: auto !important;
				transform: translateX(-50%) translateY(-50%) rotate(-45deg);
			}
		}
	}

	.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;
	}

	.tryplay {
		width: 399rpx;
		height: 48rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 40rpx;
		background: #000000;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
	}
}

.money-buniss-balance {
	transform: scale(1.3);
}

.donghua {
	z-index: 999;
	position: fixed;
	top: -180rpx;
	left: 0;
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	.shouzhi {
		position: absolute;
		bottom: 100rpx;
		width: 400rpx;
		height: 400rpx;
	}
	.donghua-box {
		margin-bottom: 10vh;

		image {
			height: 360rpx;
		}

		.halo {
			opacity: 1;
			transform: scale(0);
			position: absolute;
			top: 0;
		}

		&.explode {
			.box {
				transition: 0.3s;
				opacity: 0;
				transform: scale(0);
			}

			.halo {
				transition: 1.2s;
				opacity: 0;
				transform: scale(5);
			}
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.xuanzhuan {
	transition: 0.3s;
	animation: rotate 10s linear infinite;
	/*开始动画后无限循环，用来控制rotate*/
}
</style>