wardrobe/tm-vuetify/components/tm-choujiangGrid/tm-choujiangGrid.vue

<template>
	<view class="tm-choujiangGrid">
		<view class="tm-choujiangGrid-bg"
		:style="{
			backgroundImage: `url(${them_data.bg})`
		}"
		>
			<view v-if="listData.length==8"  class="tm-choujiangGrid-con">
				<view v-for="(item,index) in 3" :key="index" class="tm-choujiangGrid-grid">
					<block  v-if="index==0">
						<view   class="tm-choujiangGrid-item">
							
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[0].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==0)||(choujiangJieGuo&&aniOff&&active==0)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[1].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==1)||(choujiangJieGuo&&aniOff&&active==1)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[2].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==2)||(choujiangJieGuo&&aniOff&&active==2)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
					</block>
					<block  v-if="index==1">
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[7].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==7)||(choujiangJieGuo&&aniOff&&active==7)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
						<view @click="clickImgPlay"  class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center tm-choujiangGrid-item-point">
								<tm-images :width="140" :src="them_data.point"></tm-images>
							</view>
							<view class="tm-choujiangGrid-item-hover"></view>
						</view>
						
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[3].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==3)||(choujiangJieGuo&&aniOff&&active==3)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
					</block>
					<block  v-if="index==2">
						
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[6].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==6)||(choujiangJieGuo&&aniOff&&active==6)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
						
						<view   class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :width="100" :src="listData[5].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==5)||(choujiangJieGuo&&aniOff&&active==5)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
						<view    class="tm-choujiangGrid-item">
							<view class="tm-choujiangGrid-item-img flex-center">
								<tm-images :previmage="false" :width="100" :src="listData[4].img"></tm-images>
							</view>
							<view :class="{on:(aniOff==false&&active==4)||(choujiangJieGuo&&aniOff&&active==4)}" class="tm-choujiangGrid-item-hover"></view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 转盘抽奖
 * @property {Number} theme-index = [] 默认0，主题索引，我已内置两套皮肤。
 * @property {Array} theme-list = [] 默认[已内置两套]，主题列表数据，已有两套。
 * @property {Boolean} disabled = [] 默认 false，是否禁用
 * @property {Number} duration = [] 默认 3000，动画时长
 * @property {Boolean} disabledCenter = [] 默认 false，是否禁用点中间图片开始。
 * @property {Number} turns = [] 默认 2，转的圈数
 * @property {Number} specify = [] 默认 null，为整数时，即可指定奖品，始终中奖保持在这个位置。
 * @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-choujiangGrid',
	props: {
		themeIndex: {
			type: Number,
			default: 0
		},
		themeList: {
			type: Array,
			default: () => {
				return [
					{
						bg: 'https://jx2d.cn/yuwuimages/choujiangGrid_1.png?k=9',
						point: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_0.png'
					},
					{
						bg: 'https://jx2d.cn/yuwuimages/choujiangGrid_2.png?k=9',
						point: 'https://jx2d.cn/yuwuimages/choujiangGrid_2_0.png'
					}
				];
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		//是否禁用点中间图片开始。
		disabledCenter:{
			type: Boolean,
			default: false
		},
		// 动画时长
		duration: {
			type: Number,
			default: 100
		},
		list: {
			type: Array,
			default: () => {
				return [
					{ name: '1', gailv: 30, id: 1, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
					{ name: '2', gailv: 10, id: 2, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
					{ name: '3', gailv: 10, id: 3, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
					{ name: '4', gailv: 10, id: 4, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
					{ name: '5', gailv: 10, id: 5, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
					{ name: '6', gailv: 10, id: 7, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
					{ name: '7', gailv: 10, id: 8, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
					{ name: '8', gailv: 10, id: 9, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' }
				];
			}
		},
		// 转的圈数。
		turns:{
			type:Number,
			default:2
		},
		//指定中奖的奖品数组索引，从0开始
		specify:{
			type:Number,
			default:null
		}
	},
	data() {
		return {
			
			aniOff: true,
			active:0,
			choujiangJieGuo:null,
			listData: [],
			timeid:8564
			
		};
	},
	mounted() {
		this.listData = this.list;
	},
	destroyed() {
		clearTimeout(this.timeid)
	},
	computed: {
		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();
			let index = 0
			for(let j=0;j<this.listData.length;j++){
				if(this.listData[j].id === xh.id){
					index = j;
					
					break;
				}
			}
			let cisu  =  (this.listData.length-1)*this.turns+this.turns*2 + (this.specify!==null?this.specify:index);
			zhongle = {
				index:index,
				data:xh,
				playNum:cisu
			}
			return zhongle;
		},
		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(function() {
				this.aniOff = false;
				let duration = this.duration;
				let playcCisu = 0; //总次数的序列。
				// 循环的内部索引.
				let nbIndex = 0;
				function aniOpen(){
					if(nbIndex>t.listData.length-1){
						nbIndex = 0;
						t.active = nbIndex;
					}else{
						t.active = nbIndex;
						nbIndex += 1;
					}
					clearTimeout(t.timeid);
					t.timeid = setTimeout(function() {
						playcCisu +=1;
						if(playcCisu > zhongjiang.playNum){
							t.$emit('end',{index:zhongjiang.index,data:zhongjiang.data})
							t.choujiangJieGuo = zhongjiang;
							t.aniOff = true;
						}else{
							aniOpen();
						}
					}, duration);
				}
				aniOpen();
			});
		},

	}
};
</script>

<style lang="less" scoped>
.tm-choujiangGrid {
	overflow: hidden;
	.tm-choujiangGrid-bg{
		width:600upx;
		height: 600upx;
		position: relative;
		margin: auto;
		background-repeat: no-repeat;
		background-size: cover;
		.tm-choujiangGrid-con{
			position: absolute;
			
			width: 450upx;
			height: 450upx;
			top: 75upx;
			left: 75upx;
			.tm-choujiangGrid-grid{
				display: flex;
				justify-content: space-between;
				.tm-choujiangGrid-item{
					width: 137upx;
					height: 130upx;
					border-radius: 20upx;
					overflow: hidden;
					margin-left: 10upx;
					position: relative;
					margin-bottom: 28upx;
					.tm-choujiangGrid-item-img{
						width: 100%;
						height: 100%;
						color: black;
						&.tm-choujiangGrid-item-point{
						animation: scalanit 1s linear infinite;	
						}
					}
					.tm-choujiangGrid-item-hover{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #ffaa17;
						opacity: 0;
						&.on{
							opacity: 0.6;
						}
					}
				}
			}
		}
	}
}
@keyframes  scalanit {
	0%{
		transform: scale(0.9);
	}
	50%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(0.9);
	}
}
</style>