ProAdvanced/components/fruitMachine/fruitMachine.vue

<template>
	<view >
		<view class="fruit-container">
			<view class="fruitBg-container">
				<view class="fruitBg"></view>
				<view class="fruitBg"></view>
				<view class="fruitBg"></view>
			</view>
			<view class="fruit" :class="runing1?'fruitPlay':'fruitPaused'" :style="{backgroundImage:`url(${imageSrc})`,'--i':fruitIndex[0]}"></view>
			<view class="fruit" :class="runing2?'fruitPlay':'fruitPaused'" :style="{backgroundImage:`url(${imageSrc})`,'--i':fruitIndex[1]}"></view>
			<view class="fruit" :class="runing3?'fruitPlay':'fruitPaused'" :style="{backgroundImage:`url(${imageSrc})`,'--i':fruitIndex[2]}"></view>
		</view>
	</view>
</template>

<script>
	import imageSrc from "@/static/fruitMachine/fruitMachine.png"
	import fruit from "./fruit.js"
	
	export default {
		props: {
			calorie: {
				type: Number,
				default: 10
			},

		
		},
		data() {
			return {
				
				runing1: false,
				runing2: false,
				runing3: false,
				imageSrc: imageSrc,
				fruitIndex: [0, 0, 0],
				// 水果卡路里数组，对应图片
				// 问号，花生，虾饺，煎蛋，火腿，冰淇淋，中薯，炸鸡，可乐，奶油，炒饭，汉堡，东陂肉
				// fruitArray: [{
				// 	name: '问号',
				// 	value: 0
				// }, {
				// 	name: '花生',
				// 	value: 10
				// }, {
				// 	name: '虾饺',
				// 	value: 50
				// }, {
				// 	name: '煎蛋',
				// 	value: 100
				// }, {
				// 	name: '火腿',
				// 	value: 150
				// }, {
				// 	name: '冰淇淋',
				// 	value: 200
				// }, {
				// 	name: '中薯',
				// 	value: 250
				// }, {
				// 	name: '炸鸡',
				// 	value: 300
				// }, {
				// 	name: '可乐',
				// 	value: 350
				// }, {
				// 	name: '奶油',
				// 	value: 400
				// }, {
				// 	name: '炒饭',
				// 	value: 450
				// }, {
				// 	name: '汉堡',
				// 	value: 500
				// }, {
				// 	name: '东陂肉',
				// 	value: 550
				// }],
				// currentCalorie: this.calorie
				
				//击打状态音效
				fruitRuningUrl: "/static/elect/hit-ten.mp3",
				fruitAudioContext:null,
				bCanPlay:false,
			};
		},
		watch: {
			calorie(newVal,oldVal) {
				// console.log("fruitMachine",newVal,oldVal);
				// let _temp = Number(newVal).sub(oldVal);
				// if(Number(_temp)>=10)
				// {
				this.onPlayAudio();
				// }
				this.onPlay();
			}
		},
		created() {
			this.onPlay();
			// console.log("=======",imageSrc);
			
			this.fruitAudioContext = uni.createInnerAudioContext();
			this.fruitAudioContext.autoplay = false;
			this.fruitAudioContext.src = this.fruitRuningUrl;
			this.fruitAudioContext.volume = 0.5;

		},
		methods: {
			onPersonalHide(){
			},
			onPersonalShow(){
			},
			onCanPlay(){
				this.bCanPlay = true;
			},
			onPlayAudio(){
				if(this.fruitAudioContext && this.bCanPlay){
					this.bCanPlay = false;
					this.fruitAudioContext.stop();
					this.fruitAudioContext.play();
				}
			
			},
			onUpdateCalorie() {
				this.fruitIndex = [0, 0, 0];
				this.fruitIndex=fruit.getFruitIndex(this.calorie);
				// console.log("this.fruitIndex:",this.fruitIndex);
			},
			onPlay() {
				if (!this.runing1 && !this.runing2 && !this.runing3) {
					
					if(this.calorie < 10  )
						return;
					
					// this.onPlayAudio();
					
					this.runing1 = true
					setTimeout(() => {
						this.runing2 = true;
					}, 500)
					setTimeout(() => {
						this.runing3 = true;
					}, 1000)
					setTimeout(() => {
						this.onUpdateCalorie();
						this.onPaused();
					}, 2000)
				}
			},
			onPaused() {

				if (this.runing1 && this.runing2 && this.runing3) {
					this.runing1 = false
					setTimeout(() => {
						this.runing2 = false;
					}, 1000)
					setTimeout(() => {
						this.runing3 = false;
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">


	.fruit-container {
		width: 400px;
		height: 100px;
		margin-top: 60px;
		// border: 1rpx solid #000000;
		position: relative;
		overflow: hidden;
		display: flex;
		transform: scale(0.3);
		justify-content: center;
		flex-direction: row;
	}

	.fruitBg-container {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.fruitBg {
		width: 100px;
		height: 100px;
		position: relative;
		// background-color: #007AFF;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba($color: #FFFFFF, $alpha: 0.3), rgba(0, 0, 0, 0));
		margin: 5px;
	}

	.fruit {
		background-repeat: no-repeat;
		width: 100px;
		height: 100px;
		position: relative;
		margin: 5px;
		// animation: fruit-run 10s infinite;
		// background-color: #007AFF;

	}

	.fruitPlay {
		animation-name: fruit-run;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-play-state: running;
	}

	.fruitPaused {
		background-position: 0 calc(-100px * var(--i));
		transition: background-position 2s;
	}

	@keyframes fruit-run {
		0% {
			background-position: 0 0;
		}

		@for $i from 1 through 11 {

			#{$i*9.09}% {
				background-position: 0 -100px*$i;
			}
		}

		100% {
			background-position: -0px -1200px;
		}
	}
</style>