注：此篇文章跟我写的原生小程序所需素材还有数据是一致的，所以这边就不在重复写了，只写主要的布局以及逻辑实现。

 <div class="container">
    <div class="table-container">
      <div class="table-content" id="dish_bg">
        <div class="table-list">
          <div
            class="table-item"
            v-for="(item, index) in prizeList"
            :key="index"
          >
            <div
              class="table-item-text"
              :style="`-webkit-transform: rotate(${item.turn});transform: rotate(${item.turn})`"
            >
              <div class="title">{{ item.title || "" }}</div>
              <div class="award">{{ item.award || "" }}</div>
              <img class="awardImg" :src="item.icon || ''" />
            </div>
          </div>
        </div>
      </div>
      <div @click="getLottery" class="table-btn"></div>
      <!-- <view wx:else class="table-btn1"></view> -->
    </div>
  </div>

rotate:0,
runDegs: 0,
prizeList: [
            {
                id: "1678684429869957122",
                title: '一等奖',
                name: '纯金50G金元宝',
                icon: 'xxx'
            },
            {
                id: "1678684592919330818",
                title: '二等奖',
                name: '0.58现金红包',
                icon: 'xxx'
            },
            {
                id: "1678684695847550977",
                // title:'三等奖',
                title: '更多好礼',
                icon: 'xxx'
            },
            {
                id: "1678684847689744385",
                title: '四等奖',
                name: '华为运动手环',
                icon: 'xxx'
            },
            {
                id: "1678686592151109634",
                title: '五等奖',
                name: '1.18现金红包',
                icon: 'xxx'
            },
            {
                id: "1678686724460429314",
                title: '特等奖',
                name: '京东优惠券',
                icon: 'xxx'
            },
            {
                id: "1678686818400256002",
                title: '六等奖',
                name: '0.18现金红包',
                icon: 'xxx'
            }
        ]

 mounted() {
    var awardsConfig = this.prizeList,
      len = awardsConfig.length,
      awardsList = [];
    var turnNum = (1 / awardsConfig.length) * 360; // 文字旋转 turn 值
    for (var i = 0; i < len; i++) {
      // 奖项列表
      awardsList.push({
        ...awardsConfig[i],
        // turn: i * turnNum + 'turn',  // 文字旋转turn 值
        turn: i * turnNum + "deg", // 文字旋转turn 值
        turn1:i*turnNum,
        lineTurn: i * turnNum + turnNum / 2 + "turn", // 线条旋转turn 值
        award: awardsConfig[i].name.split("|")[0] || "", // 文字
        title: awardsConfig[i].name.split("|")[1] || "",
        icon: awardsConfig[i].icon,
      });
    }
    this.prizeList = awardsList;
  },

 getLottery() {
      const { prizeList } = this;
       var runNum = 8
      var awardIndex = prizeList.findIndex((item) => {
        if (item.prizeId === "1681140439781818369") {
          return true;
        }
      });
      let runDegs = this.runDegs || 0
      runDegs = runDegs + (360 - runDegs % 360) + (360 * runNum - awardIndex * (360 / prizeList.length))
      var dish_bg = document.getElementById("dish_bg");
      dish_bg.style.transform = "rotate(" + runDegs + "deg)";
      dish_bg.style.transition = "transform 2s ease-in-out";
      setTimeout(()=>{
        alert(prizeList[awardIndex].award)
      },2500)
    },

最后成品图

image.png