uni-Identify-quality/tm-vuetify/components/tm-choujiangGame/tm-choujiangGame.vue

<template>
	<view class="tm-choujiangGame  py-32">
		<view class="tm-choujiangGame-theme-1 flex-center flex-col">
			<view class="tm-choujiangGame-bg ">
				<view
					 @click="clickImgPlay"
					class="tm-choujiangGame-bg-image"
					:style="{
						backgroundImage: `url(${them_data.bg})`
					}"
				></view>
				<view  class="tm-choujiangGame-bg-prod  ">
					<view
						class="tm-choujiangGame-bg-cp text-red  text-align-center "
						:style="{
							width: '25%',
							height: '100%',
							transform: `translateY(${reisetInitTop}px)`
						}"
						:animation="animationData0"
					>
						<view
						v-for="(item, index) in listData"
						:key="index"
						style="height: 100%;"
						class="flex-center flex-col"
						>
							<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
							{{item.name}}
						</view>
					</view>
					<view
						class="tm-choujiangGame-bg-cp text-red  text-align-center "
						:style="{
							width: '25%',
							height: '100%',
							transform: `translateY(${reisetInitTop}px)`
						}"
						:animation="animationData1"
					>
						<view
						v-for="(item, index) in listData"
						:key="index"
						style="height: 100%;"
						class="flex-center flex-col"
						>
							<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
							{{item.name}}
						</view>
					</view>
					<view
						class="tm-choujiangGame-bg-cp text-red  text-align-center "
						:style="{
							width: '25%',
							height: '100%',
							transform: `translateY(${reisetInitTop}px)`
						}"
						:animation="animationData2"
					>
						<view
						v-for="(item, index) in listData"
						:key="index"
						style="height: 100%;"
						class="flex-center flex-col"
						>
							<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
							{{item.name}}
						</view>
					</view>
					<view
						class="tm-choujiangGame-bg-cp text-red  text-align-center "
						:style="{
							width: '25%',
							height: '100%',
							transform: `translateY(${reisetInitTop}px)`
						}"
						:animation="animationData3"
					>
						<view
						v-for="(item, index) in listData"
						:key="index"
						style="height: 100%;"
						class="flex-center flex-col"
						>
							<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
							{{item.name}}
						</view>
					</view>
				</view>
				
				<view   class="flex-end tm-choujiangGame-point">
					<view class="tm-choujiangGame-point-bar"
					:style="{
						transform:  aniOff?'rotate(0)':'rotate(25deg)'
					}"
					>
						<tm-images :previmage="false" :width="120" :src="them_data.point"></tm-images>
					</view>
				</view>
			</view>
			<!-- transform: choujiangJieGuo==null?`translateY(-100%)`:`translateY(0)` -->
			<view class="tm-choujiangGame-pingtai flex-center">
				<view class="tm-choujiangGame-pingtai-coll" :style="{
					transition: 'all 0.5s',
					transform: choujiangJieGuo==null?`translateY(-100%)`:`translateY(0)`
				}">
					<view class="tm-choujiangGame-pingtai-text">中奖啦~</view>
					<tm-images :previmage="false" :width="380" :height="200" :src="them_data.dizuo"></tm-images>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 转盘抽奖
 * @property {Number} theme-index = [] 默认0，主题索引，我已内置两套皮肤。
 * @property {Array} theme-list = [] 默认[已内置两套]，主题列表数据，已有两套。
 * @property {Boolean} disabled = [] 默认 false，是否禁用
 * @property {Boolean} disabledCenter = [] 默认 false，是否禁用点中间图片开始。
 * @property {Number} duration = [] 默认 3000，动画时长
 * @property {Array} list = [] 默认 [测试的数据]，奖品数据。
 * @property {Function} start 游戏开始时触发。
 * @property {Function} end 游戏结束触发，并返回奖品数据。
 * @example <tm-choujiangGame ></tm-choujiangGame>
 */
import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	export default {
		components:{tmImages},
	name: 'tm-choujiangGame',
	props: {
		themeIndex: {
			type: Number,
			default: 0
		},
		themeList: {
			type: Array,
			default: () => {
				return [
					{
						bg: 'https://jx2d.cn/yuwuimages/choujiangGame_1.png?k=9',
						point: 'https://jx2d.cn/yuwuimages/choujiangGame_1_0.png',
						dizuo: 'https://jx2d.cn/yuwuimages/choujiangGame_2_1.png'
					},
					{
						bg: 'https://jx2d.cn/yuwuimages/choujiangGame_2.png?k=9',
						point: 'https://jx2d.cn/yuwuimages/choujiangGame_2_0.png',
						dizuo: 'https://jx2d.cn/yuwuimages/choujiangGame_2_1.png'
					}
				];
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		//是否禁用点中间图片开始。
		disabledCenter:{
			type: Boolean,
			default: false
		},
		// 动画时长
		duration: {
			type: Number,
			default: 150
		},
		list: {
			type: Array,
			default: () => {
				return [
					{ name: '1', gailv: 30, id: 1, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
					{ name: '2', gailv: 10, id: 2, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
					{ name: '3', gailv: 10, id: 3, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
					{ name: '4', gailv: 10, id: 4, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
					{ name: '5', gailv: 10, id: 5, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
					{ name: '7', gailv: 10, id: 7, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
					{ name: '8', gailv: 10, id: 8, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
					{ name: '9', gailv: 10, id: 9, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' }
				
				];
			}
		}
	},
	data() {
		return {
			animationData0: '',
			animationData1: '',
			animationData2: '',
			animationData3: '',
			aniOff: true,
			choujiangJieGuo:null,
			listData: [],
			
			
		};
	},
	mounted() {
		this.listData = this.list;
		
	},
	computed: {
		reisetInitTop:function(){
			return -(this.listData.length-1)*uni.upx2px(160)
		},
		them_index: function() {
			return this.themeIndex;
		},
		them_data: function() {
			return this.themeList[this.them_index];
		}
	},
	methods: {
		clickImgPlay(){
			if (this.disabledCenter) return;
			this.play();
		},
		chuliganlv() {
			var ml = new this.$tm.choujiang(this.listData);
			let zhongle = [];
			let xh = [
				ml.getResult(),
				ml.getResult(),
				ml.getResult(),
				ml.getResult()
			]
			
			for(let i=0 ;i<xh.length;i++){
			
				let index = 0
				for(let j=0;j<this.listData.length;j++){
					if(this.listData[j].id === xh[i].id){
						index = j;
						
						break;
					}
				}
				//(this.listData.length-1)*2
				let cisu = (this.listData.length-1)*2+1 + (this.listData.length - index);
				zhongle.push({
					index:index,
					data:xh[i],
					playNum:cisu
				})
			}
			
			return zhongle;
		},
		async play() {
			let t = this;
			if (this.disabled) return;
			if (!this.aniOff) {
				console.warn('未结束动画,不能连续点击.');
				return;
			}
			// 开始动画.
			this.$emit('start');
			this.choujiangJieGuo = null;
			let zhongjiang = this.chuliganlv();
			
			this.$nextTick(async function() {
				await this.resetInit();
				
				this.aniOff = false;
				let duration = this.duration;
				let dhIndex=[0,0,0,0];//内部播放次数。
				let ydIndex =[0,0,0,0] ; //达到长度时，要循环。
				let isok = [false,false,false,false]
				async function aniOpen(ix){
					if(ydIndex[ix]>t.listData.length-1){
						
						
						if(ix==0){
							var animation0 = uni.createAnimation({
								duration: 0
							});
							t.animationData0 = animation0;
							animation0.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
							t.animationData0 = animation0.export();
						}else if(ix==1){
							var animation1 = uni.createAnimation({
								duration: 0
							});
							t.animationData1 = animation1;
							animation1.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
							t.animationData1 = animation1.export();
						}else if(ix==2){
							var animation2 = uni.createAnimation({
								duration: 0
							});
							t.animationData2 = animation2;
							animation2.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
							t.animationData2 = animation2.export();
						}else if(ix==3){
							var animation3 = uni.createAnimation({
								duration: 0
							});
							t.animationData3 = animation3;
							animation3.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
							t.animationData3 = animation3.export();
						}
						await uni.$tm.sleep(50);
						ydIndex[ix] = 0;
					}else{
						var animation = uni.createAnimation({
							duration: duration,
							timingFunction: 'linear'
						});
						
						
						if(ix==0){
							t.animationData0 = animation;
							let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
							animation.translateY(uni.upx2px(jl)).step();
							t.animationData0 = animation.export();
						}else if(ix==1){
							t.animationData1 = animation;
							let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
							animation.translateY(uni.upx2px(jl)).step();
							t.animationData1 = animation.export();
						}else if(ix==2){
							t.animationData2 = animation;
							let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
							animation.translateY(uni.upx2px(jl)).step();
							t.animationData2 = animation.export();
						}else if(ix==3){
							let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
							animation.translateY(uni.upx2px(jl)).step();
							t.animationData3 = animation.export();
							
						}
						
						await uni.$tm.sleep(duration);
						
						
					}
					
					dhIndex[ix] = dhIndex[ix]+1;
					ydIndex[ix] = ydIndex[ix]+1;
				
					if(dhIndex[ix] > zhongjiang[ix].playNum){
						isok[ix] = true;
						if(isok[0]&&isok[1]&&isok[2]&&isok[3]){
							// 结束动画.
							t.aniOff = true;
							t.$emit('end',zhongjiang)
							t.choujiangJieGuo = zhongjiang;
						}
					}else{
						await aniOpen(ix);
					}
					
				}
				
				
				for(let i =0;i<zhongjiang.length;i++){
					aniOpen(i);
				}
				
				
			});
		},
		// 重置 角度。
		async resetInit() {
			this.animationData0 = '';
			var animation0 = uni.createAnimation({duration: 0});
			this.animationData0 = animation0;
			animation0.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
			this.animationData0 = animation0.export();
			
			this.animationData1 = '';
			var animation1 = uni.createAnimation({duration: 0});
			this.animationData1 = animation1;
			animation1.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
			this.animationData1 = animation1.export();
			
			this.animationData2 = '';
			var animation2 = uni.createAnimation({duration: 0});
			this.animationData2 = animation2;
			animation2.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
			this.animationData2 = animation2.export();
			
			this.animationData3 = '';
			var animation3 = uni.createAnimation({duration: 0});
			this.animationData3 = animation3;
			animation3.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
			this.animationData3 = animation3.export();
			await uni.$tm.sleep(50);
			
		}
	}
};
</script>

<style lang="less" scoped>
.tm-choujiangGame {
	overflow: hidden;
	.tm-choujiangGame-theme-1 {
		.tm-choujiangGame-bg {
			width: 600upx;
			height: 600upx;
			position: relative;

			z-index: 2;
			.tm-choujiangGame-bg-image {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 3;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.tm-choujiangGame-point {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				right: 0;
				.tm-choujiangGame-point-bar{
					position: relative;
					right: 0;
					z-index: 0;
					top: -50upx;
					transform-origin: left right;
					transition:all 0.5s;
				}
			}
			.tm-choujiangGame-bg-prod {
				position: absolute;
				overflow: hidden;
				width: 370upx;
				height: 160upx;
				top: 95upx;
				left: 103upx;
				display: flex;
				z-index: 4;
				.tm-choujiangGame-bg-cp {
					transform-origin: center bottom;
					
				}
			}
		}
		.tm-choujiangGame-pingtai {
			position: relative;
			z-index: 2;
			margin-left: -20upx;
			margin-top: -140upx;
			overflow: hidden;
			height: 190upx;
			.tm-choujiangGame-pingtai-coll{
				position: relative;
				.tm-choujiangGame-pingtai-text{
					position: absolute;
					z-index: 3;
					font-size: 48upx;
					text-align: center;
					width: 100%;
					top: 10upx;
					color: red;
					font-weight: bold;
				}
			}
		}
	}
}
</style>