uniapp做一个抽奖系统前端代码

以下是一个简单的抽奖系统前端代码示例，使用uniapp框架：

<template>
  <view class="container">
    <view class="title">抽奖系统</view>
    <view class="lottery" :class="{active: rolling}">
      <view class="pointer" @click="start">开始</view>
      <view class="wheel">
        <view v-for="(item, index) in lotteryList" :key="index" class="item" :class="'item-' + index">
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lotteryList: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', '奖品7'], // 奖品列表
      rolling: false, // 是否正在抽奖
      prizeIndex: -1, // 中奖索引
      rollingInterval: null, // 抽奖定时器
    }
  },
  methods: {
    start() {
      if (this.rolling) {
        return
      }
      this.rolling = true
      this.rollingInterval = setInterval(() => {
        this.prizeIndex = Math.floor(Math.random() * this.lotteryList.length)
      }, 50)
      setTimeout(() => {
        clearInterval(this.rollingInterval)
        this.rolling = false
        uni.showToast({
          title: `恭喜你中了${this.lotteryList[this.prizeIndex]}`,
          icon: 'none',
        })
      }, 3000)
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.lottery {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 3s ease-in-out;
}

.lottery.active {
  transform: rotate(-720deg);
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  position: relative;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  background-color: #f00;
  margin: 10px;
  transform: rotate(0deg);
  transition: transform 3s ease-in-out;
}

.item-0 {
  transform: rotate(51.43deg);
}

.item-1 {
  transform: rotate(128.57deg);
}

.item-2 {
  transform: rotate(205.71deg);
}

.item-3 {
  transform: rotate(282.86deg);
}

.item-4 {
  transform: rotate(360deg);
}

.item-5 {
  transform: rotate(77.14deg);
}

.item-6 {
  transform: rotate(154.29deg);
}
</style>

这个示例中，有一个奖品列表`lotteryList`，点击开始按钮后，会启动抽奖定时器，每50毫秒随机一个中奖索引`prizeIndex`，最终停在这个索引对应的奖品上，并弹出中奖提示框。同时，整个抽奖转盘也会旋转一定角度（720度），让用户感受到正在进行抽奖的过程。