[애플릿] 구입한 사용자 팝업 알림

getEject:function(){
	var arr =[
	  {
		name: " ",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " ",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " ",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " ",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " 1",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " 2",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " 3",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " 4",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	  {
		name: " 5",
		imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132",
		state: " "
	  },
	] 
	var count = 0;
	var array = new Array();
	var that = this;
	var timer1 = setInterval(function(){
	  var time = Date.parse(new Date())
	  if(count<4){
		array.push(arr[count]);
		that.setData({
		  eject: array
		})
	  }else{
		clearInterval(timer1)
	  }
	  count++;
	},1000)
	var index = 4;
	var arrIndex = 0;
	var timer2 = setInterval(function () {
	  if (index >= arr.length&&count>4) {
		index = 0
		var eject = that.data.eject;
		eject[arrIndex] = arr[index]
		that.setData({
		  eject: eject
		})
		index++;
	  } else if (index < arr.length && count >4) {
		var eject = that.data.eject;
		eject[arrIndex] = arr[index]
		that.setData({
		  eject: eject
		})
		index++;
	  }
	  if (arrIndex<3){
		arrIndex++
	  }else{
		arrIndex = 0
	  }
	}, 1000)


},

	  
  {{item.name}}
  {{item.state}}

.eject-notice{
	height: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: 15px;
	background: rgba(0,0,0,0.6);
	position: fixed;
	left: 8px;
	bottom: 300rpx;
	z-index: 9999;
	color: #fff;
	font-size: 12px;
	animation: ejectIn 4s infinite;
	-webkit-animation: ejectIn 4s infinite;
  /* animation-iteration-count: 1; */
	animation-timing-function:linear;
	-webkit-animation-timing-function: linear;
	opacity: 0;
}
.eject-notice image{
	width: 25px;
	height: 25px;
	margin: 5px;
	border-radius: 50%;
	margin-right: 10px; 
}
.eject-notice .state{
	height: 30px;
	border-radius: 15px;
	background-color: #FF3545;
	color: #fff;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	margin-left: 5px;
}
@keyframes ejectIn{
	0%{
		left: -200px;
		bottom: 300px;
	}
	10%{
		left: 50px;
		bottom: 300px;
	}
	16%{
		left: -10px;
		opacity: 1;
	}
	18%{
		left: 10px;
	}
	60%{
		bottom:375px;
		opacity: 1;
	}
	80%{
		bottom: 412.5px;
		opacity: 0;
	}
	100%{
		left: 10px;
		bottom: 450px;
		opacity: 0;
	}
}
@-webkit-keyframes ejectIn{
	0%{
		left: -200px;
		bottom: 300px;
	}
	10%{
		left: 50px;
		bottom: 300px;
	}
	16%{
		left: -10px;
		opacity: 1;
	}
	18%{
		left: 10px;
	}
	60%{
		bottom: 375px;
		opacity: 1;
	}
	80%{
		bottom:412.5px;
		opacity: 0;
	}
	100%{
		left: 10px;
		bottom: 450px;
		opacity: 0;
	}
}