抽奖转盘

1.组件实现

<!-- 组件模板 -->
<template>
  <div class="draw">
    <div
      class="light"
      :class="item % 2 == 0 ? 'lightbgcolor1' : 'lightbgcolor2'"
      v-for="item in 10"
      :key="item"
      :style="'transform: rotate(' + 36 * (item - 1) + 'deg);'"
    ></div>
    <div class="panel">
      <div
        class="prize"
        v-for="(item, index) in list"
        :key="index"
        :style="
          'transform: rotate(' +
          (-(360 / listCount) / 2 + (360 / listCount) * index) +
          'deg);'
        "
      >
        <div
          class="item"
          :class="index % 2 == 0 ? 'bgcolor1' : 'bgcolor2'"
          :style="'transform: translateX(-100px) rotate(' + 360 / listCount + 'deg);'"
        >
          <span :style="'transform: rotate(' + -(360 / listCount) / 2 + 'deg);'"
            >{{ item.id }},{{ item.title }}</span
          >
        </div>
      </div>
      <div
        class="pointer"
        @click="tapBegin"
        :style="'transform:rotateZ(' + state.pointerDeg + 'deg)'"
      >
        <span>开始抽奖</span>
      </div>
    </div>
  </div>
</template>

<script>
import {} from "vant";
import { reactive } from "vue";
export default {
  components: {},
  props: {},
  setup() {
    const state = reactive({
      endPoint: 1,
      beforeEndPint: 1,
      pointerDeg: 0,
      isRotating: false, //是否旋转
    });
    let list = [
      {
        id: 1,
        title: "谢谢参与",
      },
      {
        id: 2,
        title: "50积分",
      },
      {
        id: 3,
        title: "谢谢参与",
      },
      {
        id: 4,
        title: "100元话费",
      },
      {
        id: 5,
        title: "谢谢参与",
      },
      {
        id: 6,
        title: "谢谢参与",
      },
      {
        id: 7,
        title: "谢谢参与",
      },
      {
        id: 8,
        title: "谢谢参与",
      },
      {
        id: 9,
        title: "谢谢参与",
      },
      {
        id: 10,
        title: "谢谢参与",
      },
    ];
    let listCount = list.length;
    const tapBegin = () => {
      if (!state.isRotating) {
        console.log("开始抽奖");
        let random = Math.floor(Math.random() * 10) + 1;
        console.log(random);
        state.isRotating = true;
        state.pointerDeg =
          state.pointerDeg +
          (360 / listCount) * (listCount - (state.beforeEndPint - 1)) +
          360 * 3 +
          (360 / listCount) * (random - 1);

        setTimeout(() => {
          console.log("结束抽奖");
          state.isRotating = false;
          state.beforeEndPint = random;
        }, 4000);
      }
    };
    return { list, listCount, tapBegin, state };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.bgcolor1 {
  background: #fef6e0;
}
.bgcolor2 {
  background: #ffffff;
}
.lightbgcolor1 {
  background: #fafce7;
}
.lightbgcolor2 {
  background: #ffe58b;
}
.draw {
  position: relative;
  height: 200px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  background-color: #c0381f;
  box-shadow: #7a8fae 0px 0px 10px;
  border-radius: 50%;
  .light {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    top: 5px;
    left: 115px;
    transform-origin: 5px 115px;
  }
  .panel {
    position: relative;
    height: 200px;
    width: 200px;
    background-color: #eee;
    border-radius: 50%;
    .prize {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 100px;
      height: 200px;
      font-size: 14px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      transform-origin: left center;
      .item {
        text-align: center;
        display: block;
        width: 40px;
        padding: 10px 3px 0 57px;
        height: 195px;
        transform-origin: right center;
        border-radius: 100px 0 0 100px;

        span {
          display: block;
          transform-origin: center;
          font-size: 10px;
          color: #d46854;
        }
      }
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #dc5b5b;
      transition: transform 3s cubic-bezier(0.2, 0.93, 0.43, 1);
    }
    .pointer::after {
      content: "";
      position: absolute;
      left: 15px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #dc5b5b;
    }
  }
}
</style>

2. 组件使用

<template>
  <van-nav-bar title="测试页面" fixed placeholder safe-area-inset-top></van-nav-bar>
  <div class="test">
    <my-lucky-draw />
  </div>
</template>

<script>
import { NavBar } from "vant";
import MyLuckyDraw from '../../components/example/MyLuckyDraw.vue';

export default {
  components: {
    MyLuckyDraw,
    [NavBar.name]: NavBar,
  },
  setup() {
    return {};
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.test{
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>