sunlupeng
/
pointsMall


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>转盘抽奖</title>
	<style>
		* { margin: 0; padding: 0; box-sizing: border-box; }
		[v-cloak] {
			display: none;
		}
		.container {
      overflow: hidden;
			width: 440px;
			height: 440px;
			/* background: #98d3fc url('https://www.jq22.com/demo/vue-luck-draw-pdmm202010260015/img/bg.a4b976d5.png') no-repeat center / 100% 100%;
      background: conic-gradient( 
       red 6deg, orange 6deg 18deg, yellow 18deg 45deg, 
       green 45deg 110deg, blue 110deg 200deg, purple 200deg); */
			margin: 0 auto;
      position: relative;
		}
    .prize-list {
      width: 100%;
      height: 100%;
      border-radius: 50%;
			border: 10px solid #98d3fc;
      overflow: hidden;
    }
		.prize-item {
			/*border: 2px solid red;*/
			position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      margin: auto;
		}
		.prize-item img {
			width: 30%;
			height: 20%;
      margin: 40px auto 10px;
      display: block;
		}
		.prize-item p {
			color: #fff;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
		}
    .btn {
      width: 100px;
      height: 100px;
      background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/wwn4p7lua9t5h0rx8tlz.png') no-repeat center / 100% 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;
    }
    .btn::before {
      content: "";
      width: 41px;
      height: 39px;
      background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/2vac6uuqd3gpbl35l8e1.png') no-repeat center / 100% 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: -33px;
      margin: auto;
    }
	</style>
</head>
<body>
	<div id="app" v-cloak>
    <div class="container">
  		<div class="prize-list" ref="prizeWrap" :style="bgColor">
  			<div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
  				<img :src="item.pic" alt="">
  				<p>{{ item.name }}</p>
  			</div>
  		</div>
  		<div class="btn" @click="start"></div>
    </div>
	</div>

	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script>
	  const { createApp, onMounted, onUnmounted, ref, reactive, toRefs, computed, nextTick } = Vue
	  
	  createApp({
	  	setup () {
	  		const state = reactive({
		      prizeList: [
	        	{ name: '手机', pic: 'https://xiaoyou.dgtis.com/images/image/2023/08/15/6b8jfssjhybfj572ybs3.jpg' },
	        	{ name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },
	        	{ name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },
	        	{ name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },
	        	{ name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },
	        	{ name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },
	        	{ name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },
	        	{ name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' },
	        ], // 后台配置的奖品数据
	        isRunning: false, // 是否正在抽奖
	        baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
	        prizeId: 0, // 中奖id
	  		})
        const prizeWrap = ref(null)


        // 平均每个奖品角度
        const rotateAngle = computed(() => {
          const _degree = 360 / state.prizeList.length
          return _degree
        })

        // 要执行总角度数
        const totalRunAngle = computed(() => {
        	return state.baseRunAngle + 360 - state.prizeId * rotateAngle.value - rotateAngle.value / 2
        })

        // 计算绘制转盘背景
        const bgColor = computed(() => {
          const _len = state.prizeList.length
          const colorList = ['#5352b3', '#363589']
          let colorVal = ''
          for (let i = 0; i < _len; i++) {
            colorVal += `${colorList[i % 2]} ${rotateAngle.value * i}deg ${rotateAngle.value * (i + 1)}deg,`
          }
          return `
            background: conic-gradient(${colorVal.slice(0, -1)});
          `
        })
        // 每个奖品布局
        const prizeStyle = computed(() => {
          const _degree = rotateAngle.value
          return (i) => {
            return `
              width: ${2 * 220 * Math.sin(_degree / 2 * Math.PI / 180)}px;
              height: 220px;
              transform: rotate(${_degree * i + _degree / 2}deg);
              transform-origin: 50% 100%;
            `
          }
        })

        onMounted(() => {
          prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`
        })

        onUnmounted(() => {
          prizeWrap.value.removeEventListener('transitionend', stopRun)
        })

        // 获取随机数
        const getRandomNum = () => {
        	const num = Math.floor(Math.random() * state.prizeList.length)
      		return num    		
        }

        const start = () => {
        	if (!state.isRunning) {
        		state.isRunning = true

        		console.log('开始抽奖，后台请求中奖奖品')
        		// 请求返回的奖品编号 这里使用随机数
        		const prizeId = getRandomNum()
        		console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
        		state.prizeId = prizeId
        		startRun()
        	}
        }

        const startRun = () => {
          console.log(state.isRunning, totalRunAngle.value)
          // 设置动效
          prizeWrap.value.style = `
            ${bgColor.value}
            transform: rotate(${totalRunAngle.value}deg);
            transition: all 4s ease;
          `
          // 监听transition动效停止事件
          prizeWrap.value.addEventListener('transitionend', stopRun)
        }

        const stopRun = (e) => {
          console.log(e)
          state.isRunning = false
        	prizeWrap.value.style = `
            ${bgColor.value}
            transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
          `
        }

        return {
        	...toRefs(state),
          bgColor,
          prizeStyle,
          prizeWrap,
        	start
        }
	  	}
	  }).mount('#app')
	</script>
</body>
</html>