sunlupeng
/
pointsMall


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>转盘抽奖</title>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #app {
      background: url('https://xiaoyou.dgtis.com/images/image/2023/08/16/obnd1td7k6c65ehxciz6.png') no-repeat;
      background-size: 100% 100%;
      width: 720px;
      height: 480px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 20px;
    }

    [v-cloak] {
      display: none;
    }

    .container {
      overflow: hidden;
      width: 352px;
      height: 352px;
      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: 80px;
      height: 80px;
      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: -30px;
      margin: auto;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak class="app">
    <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.imgUrl" alt="">
          <p>{{ item.prizeName }}</p>
        </div>
      </div>
      <div class="btn" @click="start"></div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="//unpkg.com/element-plus"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.js"></script>
  <script>
    const {
      createApp,
      onMounted,
      onUnmounted,
      ref,
      reactive,
      toRefs,
      computed,
      nextTick
    } = Vue
    createApp({
      setup() {
        const state = reactive({
          token: '',
          actId: '',
          prizeList: [
            // {
            //   prizeName: '手机',
            //   imgUrl: 'https://xiaoyou.dgtis.com/images/image/2023/08/15/6b8jfssjhybfj572ybs3.jpg'
            // },
            // {
            //   prizeName: '手表',
            //   imgUrl: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG'
            // },
            // {
            //   prizeName: '苹果',
            //   imgUrl: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG'
            // },
            // {
            //   prizeName: '棒棒糖',
            //   imgUrl: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG'
            // },
            // {
            //   prizeName: '娃娃',
            //   imgUrl: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG'
            // },
            // {
            //   prizeName: '木马',
            //   imgUrl: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG'
            // },
            // {
            //   prizeName: '德芙',
            //   imgUrl: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG'
            // },
            // {
            //   prizeName: '玫瑰',
            //   imgUrl: '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 * 176 * Math.sin(_degree / 2 * Math.PI / 180)}px;
              height: 176px;
              transform: rotate(${_degree * i + _degree / 2}deg);
              transform-origin: 50% 100%;
            `
          }
        })

        onMounted(() => {
          window.addEventListener('message', function (e) {
            console.log("接收值：", e.data)
            state.token = e.data.token;
            state.actId = e.data.actId;
            getTurntableInfo();
          })
          prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`;
        })

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

        // 获取大转盘信息
        async function getTurntableInfo() {
          const postData = {
            actId: state.actId,
          };
          let res = await httpAjax('get', '/mall-prize/prize/info', postData)
          if (res.errno === 0) {
            console.log('获取大转盘信息',res.data);
            state.prizeList = res.data.pool;
          } else {
            ElementPlus.ElMessage({
              showClose: true,
              message: res.errmsg,
              type: 'error',
            });
          }
        };

        // 大转盘抽奖按钮
        async function starDraw() {
          const postData = {
              actId: state.actId,
            };
            let res = await httpAjax('post', '/mall-prize/prize', getFormData(postData));
            if (res.errno === 0) {
              console.log('抽奖',res.data);
              state.prizeId = res.data.index;
              startRun();
            } else {
              ElementPlus.ElMessage({
                showClose: true,
                message: res.errmsg,
                type: 'error',
              });
            }  
          
        };

        // 简单封装ajax
        const httpAjax = (type, url, data) => {
          ajaxHeaders = {
            "Authorization": state.token
          }
          return new Promise((resolve, reject) => {
            $.ajax({
              type: type,
              url: 'http://192.168.100.208:9083/admin' + url, //本地
              // url: "http://47.103.79.143:9085" + url,//测试环境
              // url:"https://xiaoyou.dgtis.com"+ url,//正式环境
              data: data,
              contentType: type === 'post' ? false : true,
              processData: type === 'post' ? false : true,
              headers: ajaxHeaders,
              success: function (res) {
                if (res.errno == 503) {
                  window.location.href = 'https://dgt.dgtis.com/oneportal/login'
                } else {
                  resolve(res);
                }
              },
              error: function (error) {
                reject(error);
                ElementPlus.ElMessage({
                  showClose: true,
                  message: '网络错误，请稍后再试！',
                  type: 'error',
                });
              }
            })

          })
        }

        // 处理formData数据格式
        const getFormData = (datas) => {
          let formData = new FormData();
          for (let key in datas) {
            formData.append(key, datas[key]);
          }
          return formData;
        }

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

        const start = () => {
          debugger
          // ElementPlus.ElMessage({
          //   showClose: true,
          //   message: '已无抽奖次数！',
          //   type: 'warning',
          // })
          // return
          if (!state.isRunning) {
            state.isRunning = true;
            starDraw();
            // console.log('开始抽奖，后台请求中奖奖品')
            // // 请求返回的奖品编号 这里使用随机数
            // const prizeId = getRandomNum()
            // console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
            // state.prizeId = prizeId
            
          }
        }

        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);
          `

          ElementPlus.ElMessage({
            showClose: true,
            message: "恭喜抽中" + state.prizeList[state.prizeId].prizeName + "," + "请到个人中心查看。",
            type: 'success',
          })
        }

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

</html>