精华内容
下载资源
问答
  • vue实现九宫格抽奖

    2021-08-27 14:25:41
    九宫格结构模板jscss九宫格配置-nineConfig 结构模板 <div class="nineSquare_wrap"> <div class="nine-box"> <template v-for="(nine,index) of nineConfig.nineSort"> <template v-if=...

    结构模板

    	<div class="nineSquare_wrap">
          <div class="nine-box">
            <template v-for="(nine,index) of nineConfig.nineSort">
              <template v-if="nine.prizeRank == -1">
                <div class="nineItem drawBtn" :key="index" @click="draw">
                  <div class="prizeName">
                    {{nine.prizeName}}
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="nineItem" :class="{mask: currentBtn == nine.position}" :key="index">
                  <div class="prizeName">
                    {{nine.prizeRank | getRankName}}
                  </div>
                </div>
              </template>
            </template>
          </div>
          <div class="result" v-if="showResult">抽奖结果:{{winPrizeInfo.prizeName}}</div>
        </div>
    
    

    js

    	<script>
    	import {nineConfig} from './js/nineSquare'
    	export default {
    	  name: 'nineSquare',
    	  data () {
    	    return {
    	      nineConfig: nineConfig,
    	      winPrizeInfo: {}, // 中奖信息
    	      currentBtn: 0,
    	      winPrizeId: '', // 中奖id
    	      time: 50,
    	      interval: null,
    	      showResult: false
    	    }
    	  },
    	  filters: {
    	    getRankName (n) {
    	      let rankName = ''
    	      switch (parseInt(n)) {
    	        case 0:
    	          rankName = '谢谢参与'
    	          break
    	        case 1:
    	          rankName = '一等奖'
    	          break
    	        case 2:
    	          rankName = '二等奖'
    	          break
    	        case 3:
    	          rankName = '三等奖'
    	          break
    	      }
    	      return rankName
    	    }
    	  },
    	  methods: {
    	    draw () {
    	      // 以接口获取中奖ID,
    	      this.showResult = false
    	      this.interval = null
    	      this.time = 50
    	      this.winPrizeInfo = {}
    	      this.winPrizeId = Math.floor(Math.random() * 4)
    	      // 从配置表中遍历中奖的id及其位置
    	      let result = this.nineConfig.nineSort.filter((item) => {
    	        if (item.prizeId === this.winPrizeId) {
    	          return item
    	        }
    	      })
    	      // 当有多个相同的奖品时选择随机的一个
    	      let choose = Math.floor(Math.random() * result.length)
    	      this.winPrizeInfo = result[choose]
    	      this.startTurn()
    	    },
    	    startTurn () {
    	      this.interval = setTimeout(() => {
    	        this.currentBtn++
    	        if (this.time > 200) {
    	          this.time += 10
    	        } else {
    	          this.time += 5
    	        }
    	        if (this.currentBtn > 8) {
    	          this.currentBtn = 1
    	        }
    	        if (this.time >= 300 && this.winPrizeInfo.position === this.currentBtn) {
    	          clearTimeout(this.interval)
    	          this.showResult = true
    	        } else {
    	          this.startTurn()
    	        }
    	      }, this.time)
    	    }
    	  }
    	}
    	</script>
    
    

    css

    	.nineSquare_wrap {
    	  height: 100%;
    	}
    	.nine-box{
    	  width: 400px;
    	  height: 400px;
    	  background-color: #cccccc;
    	}
    	.nineItem{
    	  width: 32%;
    	  height: 32%;
    	  background-color: #fff;
    	  float: left;
    	  margin-left: 1%;
    	  margin-top: 1%;
    	  border-radius: 3%;
    	  display: flex;
    	}
    	.prizeName{
    	  margin: auto;
    	}
    	.drawBtn{
    	  cursor: pointer;
    	}
    	.mask{
    	  background-color: rgba(0,0,0,0.3);
    	}
    

    九宫格配置-nineConfig

    export const nineConfig = {
      nineBgImg: '', // 九宫格整体背景
      gridBgimg: '', // 格子背景
      nineSort: [
        {
          prizeName: '奖品一', // 奖品名称
          prizeRank: '1', // 奖品等级
          prizeImg: '', // 奖品图片
          prizeId: 1, // 奖品id
          position: 1 // 格子位置,从左上角第一个顺时针转一圈
        },
        {
          prizeName: '奖品二1',
          prizeRank: '2',
          prizeImg: '',
          prizeId: 2,
          position: 2
        },
        {
          prizeName: '奖品三1',
          prizeRank: '3',
          prizeImg: '',
          prizeId: 3,
          position: 3
        },
        {
          prizeName: '谢谢参与',
          prizeRank: '0',
          prizeImg: '',
          prizeId: 0,
          position: 8
        },
        {
          prizeName: '点击抽奖',
          prizeRank: '-1',
          prizeImg: '',
          prizeId: '',
          position: 9
        },
        {
          prizeName: '奖品三2',
          prizeRank: '3',
          prizeImg: '',
          prizeId: 3,
          position: 4
        },
        {
          prizeName: '奖品三3',
          prizeRank: '3',
          prizeImg: '',
          prizeId: 3,
          position: 7
        },
        {
          prizeName: '谢谢参与',
          prizeRank: '0',
          prizeImg: '',
          prizeId: 0,
          position: 6
        },
        {
          prizeName: '奖品二2',
          prizeRank: '2',
          prizeImg: '',
          prizeId: 2,
          position: 5
        }
      ]
    }
    
    展开全文
  • 使用vue2和vue3分别实现九宫格抽奖功能 关于九宫格抽奖的功能,想必大家都见过。外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能。 本demo使用技术:vue2/vue3,作用域插槽,定时器,递归...

    使用vue2和vue3分别实现九宫格抽奖功能

    关于九宫格抽奖的功能,想必大家都见过。外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能。

    本demo使用技术:vue2/vue3,作用域插槽,定时器,递归自调用,注册全局组件

    这里我就搭建个新vue3的项目,虽然是vue3,但也完全可以使用vue2的写法实现

    创建项目删除初始化代码省略…

    在这里我是写死的数据。首先我们在App组件里声明list数组,用来当做奖品。这里我们在list数组里写8个项,id从0到7,text可随意写(九宫格为什么写8个,是因为另一个是按钮,并不是奖品)

    list: [
            {
              id: 0,
              text: "腾讯100元",
            },
            {
              id: 1,
              text: "腾讯50元",
            },
            {
              id: 2,
              text: "腾讯10元",
            },
            {
              id: 3,
              text: "腾讯5元",
            },
            {
              id: 4,
              text: "腾讯一元",
            },
            {
              id: 5,
              text: "腾讯100积分",
            },
            {
              id: 6,
              text: "腾讯500元",
            },
            {
              id: 7,
              text: "腾讯1毛钱",
            },
          ],
    

    然后我们通过父子组件的传值,把list传给子组件。子组件使用props接收。代码省略

    然后写个li标签,并使用v-for把每一项循环渲染出来。
    九宫格的样式可随意写懒的可以直接复制,我这里cj_box类名写在了ul标签上
    完整样式:

    .cj_box {
      width: 800px;
      height: 800px;
      margin: auto;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        width: 251px;
        height: 251px;
        background-color: #eee;
        text-align: center;
        line-height: 251px;
        &:nth-child(5) {
          cursor: pointer;
        }
      }
      li.active {
        background-color: rgb(233, 159, 159);
      }
    }
    

    注意:我们这里给了九宫格的样式后,渲染li的顺序是从上往下,从左往右。然而正常的九宫格应该是顺时针围绕在外围一圈的,因为中间的按钮。 不一样的人,也可能会有不一样的思路
    在这里插入图片描述
    在这里我们对他进行更改下标即可,在计算属性里对list数组进行map处理,然后使用switch语句就能实现

    let ary = this.list.map((item, index) => {
            switch (index) {
              case 3:
                return {
                  ...this.list[7],
                  index: 7,
                };
              case 4:
                return {
                  ...this.list[3],
                  index: 3,
                };
              case 5:
                return {
                  ...this.list[6],
                  index: 6,
                };
              case 6:
                return {
                  ...this.list[5],
                  index: 5,
                };
              case 7:
                return {
                  ...this.list[4],
                  index: 4,
                };
    
              default:
                return {
                  ...item,
                  index: index,
                };
            }
          });
    

    以上代码,阅读起来可能会有点麻烦。但仔细看也并不难,只是把正常下标,改成了九宫格形式的下标。

    就比如第一个case的下标是3,那就是正常情况下的第二行第一个li;把他改成九宫格形式,那就是第八个li了,下标也自然是7了,以此类推。最后的default,也就是前三个li,他们不用改变

    在这里插入图片描述
    下面我们开始增加第五个li,点击按钮(计算属性完整代码如下)

    computed: {
        renderList() {
          let ary = this.list.map((item, index) => {
            switch (index) {
              case 3:
                return {
                  ...this.list[7],
                  index: 7,
                };
              case 4:
                return {
                  ...this.list[3],
                  index: 3,
                };
              case 5:
                return {
                  ...this.list[6],
                  index: 6,
                };
              case 6:
                return {
                  ...this.list[5],
                  index: 5,
                };
              case 7:
                return {
                  ...this.list[4],
                  index: 4,
                };
    
              default:
                return {
                  ...item,
                  index: index,
                };
            }
          });
          return ary
            .slice(0, 4)
            .concat({ id: "btn", text: "开始抽奖" })
            .concat(ary.slice(4));
        },
      },
    

    最下面的 return ary 就是给数组增加一个标签,赋予id和text

    基本搭建完成,如图:
    在这里插入图片描述

    接下来就给中间按钮添加点击事件了,不要迷惑
    这里直接在循环的li标签里,写@click就行,然后把循环的每一项当做参数,传递过去。
    这里循环遍历的不是list 而是renderList函数

    <li
      v-for="item in renderList"
      :key="item.id"
      @click="fn(item)"
    >
    {{ item.text }}
    </li>
    

    这样就把写了个点击事件,并传递了参数
    接着就在methods里写代码了


    注意看代码里的注释信息

    fn(item) {
    		// 在return ary那里 我们添加的点击li,赋予的id是btn
    		// 下面代码当不等于btn的时候,那就意味着不是点击按钮,直接return
          if (item.id !== "btn") return;
          // 然后在date里,定义一个下标赋值为null,初始值设为null是控制抽奖转动,不点击按钮的时候,就不会有显示中奖的高亮
          this.activeIndex = null;
          // 封装一个抽奖的函数,并在fn函数里调用  ,参数为执行的时间参数
          this.move(10);
        },
    

    注意看代码里的注释信息

    // 参数time,表示传入的时间数,每10毫秒执行一次
    move(time) {
    	this.timer = setTimeout(() => {
    	// 这里给空下标加1,每次执行累加 1
    	      let n = this.activeIndex + 1;
    	      // 把获取累加下标的值,对8进行取余,那么就会在下标为8里一直循环,永远不会出现下标为9的情况
    	      this.activeIndex = n % 8;
    	      // 这里是递归自调用一直循环,参数的设置代表了速度逐渐变慢,但并不会停下
    	      this.move(time + time * 0.1);
    	      // time时间值,
    	}, time);
    }
    

    表面上可以进行抽奖了,现在添加一下抽奖的样式
    绑定下面的class类即可,根据下标变动,

    <li
       v-for="item in renderList"
       :key="item.id"
       :class="{ active: activeIndex === item.index }"
       @click="fn(item)"
    >
        {{ item.text }}
    </li>
    

    现在是不是就有了表面效果了


    下面给个判断,让他停下来,不然会一直抽奖下去

    move(time) {
          if (time > 800) {
          	
          } else {
            this.timer = setTimeout(() => {
              let n = this.activeIndex + 1;
              this.activeIndex = n % 8;
              this.move(time + time * 0.1);
            }, time);
          }
        },
    

    添加if判断,把代码放在else里,当时间参数不大于800时就继续执行,这样就能停下来了。但有个问题是,他永远都抽中了同一个奖品


    更改:
    date里声明变量,

    data() {
        return {
          activeIndex: null,
          cj: 5, // 控制中奖为第五个下标
        };
      },
    

    这里的控制中奖,既可以设置为随机中奖,也可以设置为只种一个奖(就很棒!)我们这里的下标为五的奖品是100积分


    在上面空的if为true代码块里,再写个判断
    注意代码注释

    move(time) {
          if (time > 800) {
          // 当中奖下标不等于我设置的奖品下标时,继续执行,
            if (this.activeIndex !== this.cj) {
            // 定时器
              this.timer = setTimeout(() => {
                let n = this.activeIndex + 1;
                this.activeIndex = n % 8;
                // 这里时间参数要小,这样才不会看出来倪端,不然猛的停下来,一看就太假。这样就是慢慢停到你想让他中奖的那个li上
                this.move(time + time * 0.05);
              }, time);
            } else {
            // 中奖下标等于我设置的奖品下标时,中奖了
              console.log("中奖了", this.cj);
            }
          } else {
            this.timer = setTimeout(() => {
              let n = this.activeIndex + 1;
              this.activeIndex = n % 8;
              this.move(time + time * 0.1);
            }, time);
          }
        },
    

    太没人性了,下面我们写随机中奖
    注意代码注释

    fn(item) {
          if (item.id !== "btn") return;
          this.activeIndex = null;
          // 控制随机中奖,先清空写死的中奖下标
          this.cj = null
           setTimeout(()=>{
           // 使用Math.random 随机数 *8    然后赋值给我们的   this.cj 即可
              this.cj = Math.floor(Math.random()*8)   
              console.log(this.cj);
          },1000)
          this.move(10);
        },
    

    这样就很银杏化了!!!


    下面我们把item.text,写成作用域插槽

    在App的子组件标签里,写上作用域插槽

    <cj :list="list">
    	// 这里是奖品
    	<template #item='itemScope'>
    	    <p>
    	        {{itemScope.itemDate.text}}
    	    </p>
    	</template>
    	// 这里是按钮
    	<template #btn>
    	    <p>
    	       用户的按钮
    	    </p>
    	</template>
    </cj>
    

    然后在子组件里,更改 item.text

    // li标签里,先注释掉  {{ item.text }}
    // {{ item.text }}
    // 写上slot   把item数据传递过去,接着进行v-if判断一下,不写v-if的话九宫格就全是奖品,没有按钮了
      <slot name="item" :itemDate="item" v-if="item.id!=='btn'"></slot>
      <slot name="btn" v-else></slot>
    

    作用域插槽就完成了,下面我们改成vue3的写法


    VUE3 (不多做详细解释),有过了解的,一看便懂
    ps:vue3不需要data,因此没有this。使用的vue3内部的方法,都需要引入。函数和变量都写在一个函数里,都需要return出去。对于ref绑定的动态值做处理时,都需要写成 变量.value

    <template>
      <ul class="cj_box">
        <li
          v-for="item in renderList"
          :key="item.id"
          :class="{ active: activeIndex === item.index }"
          @click="fn(item)"
        >
          <slot name="item" :itemDate="item" v-if="item.id !== 'btn'"></slot>
          <slot name="btn" v-else></slot>
        </li>
      </ul>
    </template>
    
    <script>
    // 注册
    import { computed, ref } from "vue";
    export default {
      name: "cj",
      props: {
        list: Array,
      },
      // setup(),传入子组件信息
      setup(props) {
        // 下标
        let activeIndex = ref(null);
        // 默认中奖
        let cj = ref(5);
        // 时间值
        let timer = null;
    
        // 点击开始抽奖
        let fn = function (item) {
          if (item.id !== "btn") return;
          activeIndex.value = null;
          // 控制随机中奖
          cj.value = null;
          setTimeout(() => {
            cj.value = Math.floor(Math.random() * 8);
            console.log(cj);
          }, 1000);
          // 调用抽奖函数
          move(10);
        };
        // 抽奖函数
        let move = function (time) {
          if (time > 800) {
            // 若非随机,指定奖品
            if (activeIndex.value !== cj.value) {
              timer = setTimeout(() => {
                let n = activeIndex.value + 1;
                activeIndex.value = n % 8;
                move(time + time * 0.05);
              }, time);
            } else {
              // 中奖了
              console.log("中奖了", cj);
            }
          } else {
            // 抽奖
            timer = setTimeout(() => {
              let n = activeIndex.value + 1;
              activeIndex.value = n % 8;
              move(time + time * 0.1);
            }, time);
          }
        };
        // 更改下标,改成九宫格形式
        let renderList = computed(() => {
          let ary =
            // 对如果为空,做处理
            props.list &&
            props.list.map((item, index) => {
              switch (index) {
                case 3:
                  return {
                    ...props.list[7],
                    index: 7,
                  };
                case 4:
                  return {
                    ...props.list[3],
                    index: 3,
                  };
                case 5:
                  return {
                    ...props.list[6],
                    index: 6,
                  };
                case 6:
                  return {
                    ...props.list[5],
                    index: 5,
                  };
                case 7:
                  return {
                    ...props.list[4],
                    index: 4,
                  };
    
                default:
                  return {
                    ...item,
                    index: index,
                  };
              }
            });
          // 添加点击按钮
          return ary
            .slice(0, 4)
            .concat({ id: "btn", text: "开始抽奖" })
            .concat(ary.slice(4));
        });
        return {
          activeIndex,
          renderList,
          cj,
          fn,
          move,
          timer,
        };
      },
    };
    </script>
    
    <style scoped lang="less">
    .cj_box {
      width: 800px;
      height: 800px;
      margin: auto;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        width: 251px;
        height: 251px;
        background-color: #eee;
        text-align: center;
        line-height: 251px;
        &:nth-child(5) {
          cursor: pointer;
        }
      }
      li.active {
        background-color: rgb(233, 159, 159);
      }
    }
    </style>
    
    

    补充:
    可写个独立的js文件,引入vue组件并注册,然后把js文件,在mian.js里引入。使用时,直接组件名就行,不需要引入和注册

    // 独立js文件名字为 cj.js       cj3.vue组件为vue3的写法
    import cj3 from './cj3.vue'
    export default {
        install(_Vue) {
            console.log(_Vue);
            _Vue.component('cj', cj3)
        }
    }
    
    // main文件   引入 cj.js并注册
    import { createApp } from 'vue'
    import App from './App.vue'
    import cj from './abc/cj.js'
    
    createApp(App).use(cj).mount('#app')
    
    

    如下就是在App组件里,使用通过cj.js,全局注册的cj.vue组件。直接使用即可
    在这里插入图片描述


    结束!

    加油! Respect peace and love

    展开全文
  • vue实现九宫格抽奖游戏

    千次阅读 2019-09-25 10:09:22
    isRunning: false, //是否正在抽奖 imageAward: [ { name: "亞菲兒香水", img: "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift1.png" }, { name: "Gucci帽子", ...

    效果图如下

     

    页面代码如下

    由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律

    <template>
      <div class="Sudoku" v-wechat-title="$route.meta.title">
        <div class="container-out">
          <div
            class="circle"
            v-for="(item,index) in circleList"
            :key="index"
            :style="{'top':(item.topCircle)/100+'rem','left':(item.leftCircle)/100+'rem','background-color':(index%2==0)?colorCircleFirst:colorCircleSecond}"
          ></div>
    
          <div class="container-in">
            <div
              class="content-out"
              v-for="(item,index) in awardList"
              :key="index"
              :style="{top:(item.topAward)/100+'rem',left:(item.leftAward)/100+'rem','background-color': (index==indexSelect)?colorAwardSelect:colorAwardDefault}"
            >
              <img class="award-image" :src="item.imageAward" />
            </div>
            <div
              class="start-btn"
              @click="startGame"
              :style="{'background-color':isRunning?'#e7930a':'#ffe400'}"
            >START</div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Sudoku",
      data() {
        return {
          circleList: [], //圆点数组
          awardList: [], //奖品数组   真正渲染的列表  把每个奖品的偏移量也存放在一起
          colorCircleFirst: "#FFDF2F", //圆点颜色1
          colorCircleSecond: "#FE4D32", //圆点颜色2
          colorAwardDefault: "#F5F0FC", //奖品默认颜色
          colorAwardSelect: "#ffe400", //奖品选中颜色
          indexSelect: 0, //被选中的奖品index
          isRunning: false, //是否正在抽奖
          imageAward: [
            {
              name: "亞菲兒香水",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift1.png"
            },
            {
              name: "Gucci帽子",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift2.png"
            },
            {
              name: "再接再厉哦",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_fail1.png"
            },
            {
              name: "华为p20",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift3.png"
            },
            {
              name: "5元话费",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift4.png"
            },
            {
              name: "飞利浦剃须刀",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift5.png"
            },
            {
              name: "明日再战",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_fail2.png"
            },
            {
              name: "短柄伞",
              img:
                "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift6.png"
            }
          ] //奖品图片数组
        };
      },
    
      components: {},
      created() {},
    
      watch: {},
    
      mounted() {
        this.draw();
      },
    
      methods: {
        //画页面的原点以及每个奖品图片的位置
        draw() {
          var _this = this;
          //圆点设置的每一个位置的偏移量  总共24个原点
          var leftCircle = 7.5;
          var topCircle = 7.5;
          var circleList = [];
          for (var i = 0; i < 24; i++) {
            if (i == 0) {
              topCircle = 15;
              leftCircle = 15;
            } else if (i < 6) {
              topCircle = 7.5;
              leftCircle = leftCircle + 102.5;
            } else if (i == 6) {
              topCircle = 15;
              leftCircle = 620;
            } else if (i < 12) {
              topCircle = topCircle + 94;
              leftCircle = 620;
            } else if (i == 12) {
              topCircle = 565;
              leftCircle = 620;
            } else if (i < 18) {
              topCircle = 570;
              leftCircle = leftCircle - 102.5;
            } else if (i == 18) {
              topCircle = 565;
              leftCircle = 15;
            } else if (i < 24) {
              topCircle = topCircle - 94;
              leftCircle = 7.5;
            } else {
              return;
            }
            circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
          }
    
          _this.circleList = circleList; //原点
    
          //设置圆点闪烁
          setInterval(function() {
            if (_this.colorCircleFirst == "#FFDF2F") {
              _this.colorCircleFirst = "#FE4D32";
              _this.colorCircleSecond = "#FFDF2F";
            } else {
              _this.colorCircleFirst = "#FFDF2F";
              _this.colorCircleSecond = "#FE4D32";
            }
          }, 500); //设置圆点闪烁的效果
    
    
          //奖品item设置
          var awardList = [];
    
          //间距,怎么顺眼怎么设置吧.
          var topAward = 25;
          var leftAward = 25;
          for (var j = 0; j < 8; j++) {
            if (j == 0) {
              topAward = 25;
              leftAward = 25;
            } else if (j < 3) {
              topAward = topAward;
              //166.6666是宽.15是间距.下同
              leftAward = leftAward + 166.6666 + 15;
            } else if (j < 5) {
              leftAward = leftAward;
              //150是高,15是间距,下同
              topAward = topAward + 150 + 15;
            } else if (j < 7) {
              leftAward = leftAward - 166.6666 - 15;
              topAward = topAward;
            } else if (j < 8) {
              leftAward = leftAward;
              topAward = topAward - 150 - 15;
            }
    
            var imageAward = _this.imageAward[j];
            awardList.push({
              topAward: topAward,
              leftAward: leftAward,
              name: imageAward.name,
              imageAward: imageAward.img
            });
          }
    
          _this.awardList = awardList;
        },
    
        //开始抽奖
        startGame: function() {
          if (this.isRunning) return;
    
          this.isRunning = true; //静止点击
          var _this = this;
          var indexSelect = 0; //默认从0开始
          var i = 0; //控制速度的
    
          var timer = setInterval(function() {
            indexSelect++;
            //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
            i += 30;
            indexSelect = indexSelect % 8;
            _this.indexSelect = indexSelect;
    
            //固定下标停止,当满足转动时间并且奖品下标是3的时候停止定时器
            if (i > 1000 && indexSelect == 3) {
              //去除循环
              clearInterval(timer);
    
              vant.Dialog.alert({
                title: "恭喜",
                message: "获得了" + _this.awardList[3].name
                //当点击了弹框确定之后  重置开始按钮状态并且重置获奖下标从0开始
              }).then(() => {
                _this.isRunning = false;
                _this.indexSelect = 0;
              });
            }
          }, 200 + i);
        }
      },
    
      computed: {}
    };
    </script>
    
    
    <style  scoped lang="scss">
    @import "../../common/common";
    
    /**index.wxss**/
    
    .container-out {
      height: 6rem;
      width: 6.5rem;
      background-color: #b136b9;
      margin: 1rem auto;
      border-radius: 0.4rem;
      box-shadow: 0 0.1px 0 #871a8e;
      position: relative;
    }
    
    .container-in {
      width: 5.8rem;
      height: 5.3rem;
      background-color: #871a8e;
      border-radius: 0.4rem;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    
    /**小圆球
    box-shadow: inset 3px 3px 3px #fff2af;*/
    .circle {
      position: absolute;
      display: block;
      border-radius: 50%;
      height: 0.2rem;
      width: 0.2rem;
    }
    
    .content-out {
      position: absolute;
      height: 1.5rem;
      width: 1.666666rem;
      background-color: #f5f0fc;
      border-radius: 0.15rem;
      box-shadow: 0 0.05px 0 #d87fde;
    }
    
    /**居中 加粗*/
    
    .start-btn {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1.5rem;
      width: 1.666666rem;
      background-color: #ffe400;
      box-shadow: 0 0.05px 0 #e7930a;
      color: #f6251e;
      text-align: center;
      font-size: 0.4rem;
      font-weight: bolder;
      line-height: 1.5rem;
    }
    
    .award-image {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1.4rem;
      width: 1.3rem;
    }
    </style>
    

     

    展开全文
  • 今日还剩 1次 {{item.name}} {{list[3].name}} 立即抽奖 {{list[4].name}} {{key}} 256金转 分享领积分 活动规则 1、活动时间:2020年9月8日起; 2、活动期间,用户每次抽奖消耗20积分,抽奖次数不限 大概效果这样 ...
    <template>
        <div class="luckDraw">
            <div class="container">
                <div class="turntable-wrapper">
                    <div class="luck-wrapper">
                        <p class="integral">今日还剩 <span>1</span>次</p>
                        <ul class="nineGrid">
                            <li class="row">
                                <div
                                    v-for="(item, idx) in 3"
                                    :key="item.id"
                                    :class="index === idx ? `active` : ``"
                                    v-if="idx==0||idx==1||idx==2"
                                >
                                    <div class="wrapper">
                                        <img
                                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3655400338,545572208&fm=26&gp=0.jpg"
                                            alt=""
                                        >
                                        <p>{{item.name}}</p>
                                    </div>
                                    <div class="mask"></div>
                                </div>
                            </li>
                            <li class="row">
                                <div :class="index === 7 ? 'active': ''">
                                    <div class="wrapper">
                                        <img
                                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3655400338,545572208&fm=26&gp=0.jpg"
                                            alt=""
                                        >
                                        <p>{{list[3].name}}</p>
                                    </div>
                                    <div class="mask"></div>
                                </div>
                                <div
                                    class="getLuck"
                                    @click="startLottery"
                                >
                                    立即抽奖
                                </div>
                                <div :class="index === 3 ? 'active': ''">
                                    <div class="wrapper">
                                        <img
                                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3655400338,545572208&fm=26&gp=0.jpg"
                                            alt=""
                                        >
                                        <p>{{list[4].name}}</p>
                                    </div>
                                    <div class="mask"></div>
                                </div>
                            </li>
                            <li class="row">
                                <div
                                    v-for="(n, key) in 3"
                                    :key="n"
                                    :class="index === 6-key ? `active` : ``"
                                >
                                        {{key}}
                                    <div class="wrapper">
                                        <img
                                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3655400338,545572208&fm=26&gp=0.jpg"
                                            alt=""
                                        >
                                        <p>256金转</p>
                                    </div>
                                    <div class="mask"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
    
                    <p class="share">分享领积分 <i class="icon-go"></i></p>
    
                    <div class="rule">
                        <p class="rule-title">活动规则</p>
                        <ul class="rule-main">
                            <li>1、活动时间:2020年9月8日起;</li>
                            <li>2、活动期间,用户每次抽奖消耗20积分,抽奖次数不限</li>
                        </ul>
                    </div>
    
                    <div></div>
                </div>
            </div>
        </div>
    </template>
    <script>
    export default {
        name: "luckDraw",
        data() {
            return {
                title: "积分转盘",
                index: -1, // 当前转动到哪个位置,起点位置
                count: 8, // 总共有多少个位置
                timer: 0, // 每次转动定时器
                speed: 200, // 初始转动速度
                times: 0, // 转动次数
                cycle: 50, // 50转动基本次数:即至少需要转动多少次再进入抽奖环节
                prize: -1, // 中奖位置
                click: true,
                showToast: false,
                toastType: "luck",
            };
        },
        created() {},
        methods: {
            // 开始抽奖
            startLottery() {
                if (!this.click) {
                    return;
                }
                this.closeToast();
                this.speed = 200;
                this.click = false;
                this.startRoll();
            },
    
            // 开始转动
            startRoll() {
                this.times += 1; // 转动次数
                this.oneRoll(); // 转动过程调用的每一次转动方法,这里是第一次调用初始化
    
                // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
                if (this.times > this.cycle + 10 && this.prize === this.index) {
                    clearTimeout(this.timer); // 清除转动定时器,停止转动
                    this.prize = -1;
                    this.times = 0;
                    this.click = true;
                    this.showToast = true;
                    this.toastType = "comeOn";
                    console.log("你已经中奖了");
                } else {
                    if (this.times < this.cycle) {
                        this.speed -= 10; // 加快转动速度
                    } else if (this.times === this.cycle) {
                        // 随机获得一个中奖位置
                        const index = parseInt(Math.random() * 10, 0) || 0;
                        this.prize = index;
                        if (this.prize > 7) {
                            this.prize = 7;
                        }
                        console.log(`中奖位置${this.prize}`);
                    } else if (
                        this.times > this.cycle + 10 &&
                        ((this.prize === 0 && this.index === 7) ||
                            this.prize === this.index + 1)
                    ) {
                        this.speed += 110;
                    } else {
                        this.speed += 20;
                    }
    
                    if (this.speed < 40) {
                        this.speed = 40;
                    }
                    this.timer = setTimeout(this.startRoll, this.speed);
                }
            },
    
            // 每一次转动
            oneRoll() {
                let index = this.index; // 当前转动到哪个位置
                const count = this.count; // 总共有多少个位置
                index += 1;
                if (index > count - 1) {
                    index = 0;
                }
                this.index = index;
            },
    
            // 关闭弹出框
            closeToast() {
                this.showToast = false;
            },
        },
    };
    </script>
    
    <style lang="scss" scoped>
    .luckDraw {
        .turntable-wrapper {
            padding: 0 38px;
            position: relative;
            // @include background-cover("background-luck.png"px;
            padding-top: 121px;
    
            .luck-wrapper {
                width: 300px;
                height: 377px;
                margin: 0 auto;
                position: relative;
                // @include background-cover("background-turntable.png"px;
    
                .integral {
                    width: 100%;
                    color: #6d2d00;
                    font-size: 16px;
                    font-weight: normal;
                    text-align: center;
                    position: absolute;
                    top: 58px;
    
                    span {
                        font-weight: 600;
                        color: #ff2f4d;
                    }
                }
    
                .nineGrid {
                    position: absolute;
                    top: 86px;
                    left: 50%;
                    margin-left: -130px;
                    width: 260px;
                    height: 260px;
    
                    li {
                        height: 80px;
                        display: flex;
                        margin-top: 5px;
    
                        > div {
                            flex: 1;
                            margin-right: 5px;
                            height: 100%;
                            text-align: center;
                            position: relative;
    
                            .wrapper {
                                width: 100%;
                                height: 100%;
                                margin: 0;
                                // @include background-cover("background-grid.png"px;
                            }
    
                            img {
                                width: 46px;
                                height: 38px;
                                vertical-align: middle;
                                margin-top: 8px;
                            }
    
                            .mask {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                opacity: 0.5;
                                border-radius: 10px;
                                background-color: #000;
                                display: none;
                            }
                        }
    
                        > div.active {
                            .mask {
                                display: block;
                            }
                        }
    
                        > div:first-child {
                            margin-left: 5px;
                        }
    
                        > div.getLuck {
                            // @include background-cover("background-getLuck.png"px;
                            font-size: 13px;
                            background-color: pink;
    
                            p {
                                font-size: 20px;
                                font-weight: 600;
                                color: #fff;
                                line-height: 1.1;
                                margin-top: 11px;
                            }
                        }
                    }
    
                    li:last-child {
                        margin-bottom: 5px;
                    }
                }
            }
    
            .share {
                width: 160px;
                height: 42px;
                margin: 0 auto;
                text-align: center;
                line-height: 42px;
                // @include background-cover("luckShrae.png"px;
                margin-top: 22px;
                color: #6d2d00;
                font-size: 16px;
                font-weight: 600;
    
                .icon-go {
                    // @include size(30px;
                    // @include background-cover("goShare-icon.png"px;
    
                    display: inline-block;
                    vertical-align: middle;
                    margin-bottom: 2px;
                }
            }
    
            .rule {
                margin-top: 14px;
                color: #fff;
                font-size: 14px;
                padding-bottom: 39px;
    
                .rule-title {
                    text-align: center;
                    position: relative;
                    font-size: 16px;
                    margin-bottom: 14px;
                }
    
                .rule-title:before,
                .rule-title:after {
                    content: "";
                    position: absolute;
                    top: 52%;
                    background: #fff;
                    width: 30%;
                    height: 1px;
                }
    
                .rule-title:before {
                    left: 0;
                }
    
                .rule-title:after {
                    right: 0;
                }
            }
        }
    }
    </style>
    

    大概效果这样 可以自行改样式

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 219
精华内容 87
关键字:

vue实现九宫格抽奖

vue 订阅