IHG/components/q-turntable/index.vue

<template>
	<view class="q-t-main">
		<view :class="{'q-t-rotation':true, 'isEnd': isEnd, 'isReset': isReset}" :style="{transform: `rotate(${rotation}deg)`}">
			<view class="item"
				v-for="(item,index) in content" :key="item.id"
				:style="{transform: `rotate(${itemDeg*index}deg) translateX(${leftParam}rpx)`}"
			>
				<view :style="{border: `${borderParam}rpx solid transparent`}">
					<image :src="item.prize_img"/>
					<text>{{item.name}}</text>
				</view>
			</view>
			<image class="circle" :src="big_wheel_disc"/>
		</view>
		<image class="button" :src="big_wheel_button" @click="start"/>
	</view>
</template>

<script>
	export default{
		components:{
		},
		props:["drawProducts", "big_wheel_disc", "big_wheel_button", "isValid"],
		data(){
			return {
				content: [],
				rotation: 0,
				timer: 0,
				isEnd: false,
				isRotation:false,
				isReset: false
			}
		},
		computed:{
			itemDeg(){
				if(!this.content.length) return 0;
				return 360 / this.content.length;
			},
			borderParam(){
				return Math.tan(this.itemDeg/2 * Math.PI / 180)*250
			},
			leftParam(){
				return 250 - this.borderParam;
			}
		},
		methods:{
			init(list){
				this.content = [...list];
			},
			start(){
				if(this.isEnd||this.isRotation || !this.isValid) return;
				this.$emit("start");
				this.rotation = -360;
				this.isRotation = true;
				this.timer = setInterval(()=>{
					this.rotation -= 360;
				}, 900)
			},
			end(index){
				const endDeg = this.rotation - this.itemDeg * index - 360
				clearInterval(this.timer);
				this.isEnd = true;
				this.rotation = endDeg;
				this.isRotation = false;
				return new Promise((resolve,reject)=>{
					setTimeout(()=>{
						resolve(true);
					}, 2500)
				})
			},
			reset(){
				this.isEnd = false;
				this.isReset = true;
				this.rotation = 0;
				
				setTimeout(()=>{
					this.isReset = false;
				},100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.q-t-main{
		width: 100%;
		height:500rpx;
		text-align: center;
		overflow: hidden;
		
		.q-t-rotation{
			margin:0 auto;
			width: 500rpx;
			height:500rpx;
			overflow: hidden;
			border-radius: 100%;
			transition: 1s all linear;
			// animation: rotation 1s linear infinite;
			>image{
				&.circle{
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
				}				
			}
			&.isEnd{
				transition: 2.5s all ease-out;
			}
			&.isReset{
				transition: 0s all!important;
			}

			
			.item{
				transform-origin: 250rpx 250rpx;
				width: 0px;
				height:0px;
				overflow: visible;
				> view {
					border-bottom: 250rpx solid transparent!important;
					image{
						width: 72rpx;
						height: 86rpx;
						-webkit-transform: translate(-36rpx, -207rpx);
						transform: translate(-36rpx, -207rpx);
					}
					text{
						width: 80rpx;
						-webkit-transform: translate(-40rpx, -214rpx);
						transform: translate(-40rpx, -214rpx);
						color: #A8872A;
						display: block;
						font-size: 22rpx;
						font-weight: bold;
						line-height: 25rpx;
					}
				}
			}
			
			.item:nth-of-type(odd) > view{
				width: 0px;
				height:0px;
				border-top: 250rpx solid #F9EABA!important;
			}
			.item:nth-of-type(even) > view{
				width: 0px;
				height:0px;
				border-top: 250rpx solid #FBF9F3!important;
			}
		}
	}
	image.button{
		position: relative;
		z-index: 2;
		width: 100rpx;
		height: 113rpx;
		top: -316rpx;
	}
	
	@keyframes rotation {
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>