今天写一个 转盘活动的 记录一下

是由好几张背景图构成的

• 样式

<div class="one_big_header"
  <div id="app">
      <!-- //时间 -->
      <div class="activity-time">活动时间：{{activitiesData.activitiesStartTime|filterTime}}-{{activitiesData.activitiesEndTime|filterTime}}</div>
      <div class="activity-count">剩余{{count}}次机会</div>
      <!-- 转盘  -->
      <div class="wheel-wrapper">
        <div class="wheel-pointer" @click="onClickRotate"></div>
        <div
          class="wheel-bg"
          :class="{ freeze: freeze }"
          :style="`transform: rotate(${wheelDeg}deg)`"
        >

          <div class="prize-list">
            <div
              class="prize-item-wrapper"
              v-for="(item, index) in activitiesData.activitiesPrizeList"
              :key="index"
            >
              <div
                class="prize-item"
                :style="`transform: rotate(${
                  (360 / 8) * index
                }deg)`"
              >
                <div class="prize-name" :style="item.isPrize?'color:#a3873c':'color:#ea6a5d'">
                  {{ item.name }}
                </div>
                <div class="prize-icon">
                  <img :src="item.picture" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>

• 点击抽奖

   onClickRotate () {
      const that = this
      if (that.activitiesData.activitiesPrizeList.length != 8) {
        Toast('奖品还没有创建完成')
        return
      }
      if (!that.isNormal) {
        Toast('活动尚未开始')
        return
      }
      if (!wxUser.getActivitiesToken()) { // 判定活动token
        that.showPhoneDialog = true
        return
      }
      if (that.rolling) {
        return
      }

      if (!that.count) {
        Toast('抽奖次数已经用完')
        return
      }
      that.rolling = true
      const accountId = that.$route.query.accountId
      const activitiesId = that.$route.query.activitiesId
      luckDraw(accountId, activitiesId).then(
        (response) => {
          const resultId = response.data.id
          const resultIndex = that.activitiesData.activitiesPrizeList.findIndex(item => item.id === resultId)
          if (resultIndex == -1) {
            Toast('中奖信息有误')
            that.rolling = false
          } else {
            const result = response.data
            that.roll(result, resultIndex)
          }
        },
        (error) => {
          that.rolling = false
        }
      )
    },
    roll (result, resultIndex) {
      const that = this
      const { wheelDeg } = this
      that.wheelDeg =
        wheelDeg -
        (wheelDeg % 360) +
        6 * 360 +
        (360 - (360 / 8) * resultIndex)
      setTimeout(() => {
        that.rolling = false
        that.awardStr = result.name
        if (result.isWinning == 'NOT_WON') { // 谢谢参与
          that.showThanksDialog = true
        } else { // 中奖
          that.showAwardDialog = true
        }
        that.getCount()
      }, 4500)
    },

• 样式

<style lang="scss" scoped>

.one_big_header {
  min-height: 100% ;
  height: auto !important;
  background-color: #f4f4f4;
  text-align: center;
  font-size: 14px;
  background: url('../../../assets/prize/bg-1.png') no-repeat;
  background-size: 100% auto;
  margin: auto;
  width: 7.5rem;
  padding-top: 2.5rem;
  overflow: visible !important;
  .activity-time{
    color: #fff;
    text-align: center;
    background: url('../../../assets/prize/activity-bg-1.png') no-repeat;
    background-size:4.24rem 0.64rem;
    margin: auto;
    width: 4.24rem;
    height: 0.64rem;
    font-size: 0.2rem;
    line-height: 0.64rem;
  }
  .activity-count{
    margin: 0.64rem 0.8rem 0.68rem;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 0.36rem;

  }
  .free-title {
    color: #333;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  .explain-box {
    background: url('../../../assets/prize/bottom-title-bg.png') no-repeat;
    background-size: 2.87rem 0.27rem;
    margin: auto;
    width: 2.87rem;
    height: 0.27rem;
    margin-top: 3rem;
  }
  .explain-image-box{
    background: url('../../../assets/prize/bottom-box.png') no-repeat;
    background-size: 7rem 100%;
    width: 7rem;
    margin: 0.3rem auto 0 auto;
    padding: 0.1rem;
  }
  .explain-detail {
    margin: 0.2rem;
    text-align: left;
    color: #999;
    background: #fff;
    padding: 0.4rem;
    border-radius: 5px;
    word-break: break-word;
  }
  .my-prize {
    position: fixed;
    bottom: 2rem;
    right: -0.6rem;
    width: 2.16rem;
    height: 2.26rem;
    background-size: 2.16rem 2.26rem;
    background-image: url('../../../assets/prize/my-prize.png');
  }
}

.wheel-wrapper {
  width: 5.43rem;
  height: 5.43rem;
  position: relative;
  margin: 0 auto 1rem;
}

.wheel-pointer {
  background-image: url('../../../assets/prize/point-1.png');
  width: 2.12rem;
  height: 2.22rem;
  background-size:2.12rem 2.22rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}
.wheel-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 4s ease-in-out;
  background-image: url('../../../assets/prize/zhuan.png');
  width: 5.43rem;
  height: 5.43rem;
  background-size:5.43rem 5.43rem ;
  &.freeze {
    transition: none;
    background: red;
  }
}

.prize-list {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.prize-item-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.716rem;
  height: 2.716rem;
}

.prize-item {
  width: 100%;
  height: 100%;
  transform-origin: bottom;

  .prize-name {
    padding: 16px 0;
    font-size: 10px;
    font-weight: 600;
  }

  .prize-icon {
    img{
      height: 0.5rem;
    }
  }
}
</style>