peiwan-uniapp/pages/user/detail/components/starList.vue

<template>
  <view>
	  <view v-if="isGift" class="star-box">
		 <view class="title-box">
			 <view class="title">礼物墙</view>
			 <view class="num">(已点亮：{{starNum}}/{{total}})</view>
		 </view>
		 
		 <view class="list-box">
			 <view @click="sendGift(item)" v-for="(item,index) in virtualList" :key="item.id" class="gift">
			 	<view class="img-box">
			 		<img class="img" :class="item.playStatus == 0 ? 'hui' : ''" :src="item.img"></img>
					<view class="tag" v-if="item.giftType == 1">
						<text>特效</text>
						<text v-if="item.tag">·{{item.tag}}</text>
					</view>
					<view class="tag" v-if="item.giftType == 0 && item.tag">
						<text>{{item.tag}}</text>
					</view>
			 	</view>
			 	<view class="name">{{item.name}}</view>
			 	<view class="price">x {{item.playNum}}</view>
				<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 0">点亮</view>
				<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 1">赠送</view>
				<view class="btn" v-if="item.playStatus == 2">已下架</view>
			 </view>
		 </view>
		 
	  </view>
	  
	  
	  <view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
	  	<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='0' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
	  	<view class="close-btn" @click="closeSvga">
	  		<view class="bottom-box">
	  			<view class="title">{{gift.name}}</view>
	  			<view class="price">{{ fen2yuan(gift.money) }} 钻石</view>
	  			<view class="btn-box">
	  				<view class="btn" @click="cannel">取消</view>
	  				<view v-if="gift.playStatus == 0" class="btn active" @click="ok">点亮</view>
					<view v-if="gift.playStatus == 1" class="btn active" @click="ok">赠送</view>
	  			</view>
	  		</view>
	  	</view>
	  </view>
  </view>
</template>

<script>
	import sheep from '@/sheep';
	export default {
		components: {
			
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				giftFlag: false,
				src: '',
				canvasId: 'myCanvas',
				
				gift: {},
			}
		},
		computed: {
			starNum() {
				var count = 0;
				this.virtualList.forEach(e => {
					if(e.playStatus > 0){
						count ++;
					}
				});
				return count;
			},
			total() {
				return this.virtualList.length;
			},
			isGift() {
				return sheep.$store('user').tradeConfig.giftEnabled;
			},
		},
		methods: {
			sendGift(e) {
				this.gift = e;
				
				if(e.giftType == 0){
					// 普通礼物不播放
					this.$emit('openGift', this.gift); 
					return;
				}
				
				this.src = e.pic;
				this.giftFlag = true;
			},
			onFinished() {
				this.giftFlag = false;
				console.log('动画停止播放时回调');
			},
			onFrame(frame) {//动画播放至某帧后回调
				// console.log(frame);
			},
			onPercentage(percentage) { //动画播放至某进度后回调
				// console.log(percentage);
			},
			onLoaded() {
				this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
				console.log('加载完成');
				this.$refs.cSvgaRef.call('startAnimation');
			},
			closeSvga() {
				this.src = "";
				this.$refs.cSvgaRef.call('stopAnimation');
				this.giftFlag = false;
			},
			fen2yuan(price) {
			  var f = 0;
			  var p = (price / 100.0).toFixed(0);
			  var p1 = (price / 100.0).toFixed(1);
			  var p2 = (price / 100.0).toFixed(2);
			  if(p*100 == price){
				f = 0;  
			  }else if(p1*100 == price){
				  f = 1;
			  }else if(p2*100 == price){
				  f = 2;
			  }
			  return (price / 100.0).toFixed(f)
			},
			cannel() {
				this.closeSvga();
			},
			ok() {
				this.closeSvga();
				this.$emit('openGift', this.gift);
			},
			openGift(e) {
				this.$emit('openGift', e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.star-box {
		padding: 30rpx 20rpx;
		
		.title-box {
			display: flex;
			align-items: center;
			
			.title {
				font-size: 28rpx;
				margin-right: 10px;
			}
			
			.num {
				font-size: 24rpx;
				color: var(--ui-BG-Main);
			}
		}
		
		.list-box {
			display: flex;
			flex-wrap: wrap;
			padding-top: 30rpx;
			
			.gift {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0px;
				
				.img-box {
					position: relative;
						
					.img{
						max-width: 150rpx;
						height: 150rpx;
					}
					
					.hui {
						filter: grayscale(100%);
					}
					
					.tag {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 16rpx;
						color: #fff;
						background-color: var(--ui-BG-Main);
						border-radius: 40px;
						padding: 2rpx 8rpx;
					}
				}
				
				.name {
					font-size: 24rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					max-width: 150rpx;
					margin-top: 2px;
					margin-bottom: 7px;
				}
				
				.price {
					font-size: 20rpx;
					color: var(--ui-BG-Main);
					margin-bottom: 7px;
				}
				
				.btn {
					border: 1px solid var(--ui-BG-Main);
					border-radius: 40px;
					color: var(--ui-BG-Main);
					padding: 8rpx 20rpx;
					font-size: 24rpx;
				}
			}
		}
		
		
		
	}
	
	.svga-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		width: 100%;
		height: 100%;
		background-color: black;
		
		.close-btn {
			color: #fff;
			position: absolute;
			z-index: 999999999;
			padding: 5px 10px;
			
			left: 0;
			right: 0;
			bottom: 100rpx;
			
			.bottom-box {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				
				.title {
					font-size: 28rpx;
					margin-bottom: 5px;
				}
				
				.price {
					font-size: 24rpx;
				}
				
				.btn-box {
					display: flex;
					align-items: center;
					margin-top: 10px;
					
					.btn {
						border: 1px solid #fff;
						font-size: 28rpx;
						padding: 20rpx 110rpx;
						border-radius: 40px;
						margin: 15px;
						color: #fff;
					}
					
					.active {
						border: 1px solid var(--ui-BG-Main);
						background-color: var(--ui-BG-Main);
					}
				}
			}
		}
	}
	
	.svga-hide {
		/* #ifdef MP */
		transform: translate(-100%, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: none;
		/* #endif */
	}
	
	.svga-show {
		/* #ifdef MP */
		transform: translate(0, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: block;
		/* #endif */
	}
</style>