小程序版九宫格抽奖

上代码：
axml

<view class="fruit-slots ">
  <view class="title">今日还剩{{isDrawVO.remainingCount||0}}次抽奖机会</view>
  <view class="lt-item-list">
    <block a:for="{{prizeBox}}">
      <view key="{{index}}" class="lt-item {{index === activeIndex ? 'lt-active' : ''}}">
        <image src="{{item.icon}}" mode="widthFix" style="width:100%;height:100%;" />
      </view>
      <!-- <view key="btn" a:if="{{index==3}}" class="lt-item lt-button {{disabled ? 'disabled' : (isRolling ? 'pause' : '')}}" 
        onTap="startClick" /> -->
      <view key="btn" a:if="{{index==3}}" class="lt-item {{disabled ? 'disabled' : (isRolling ? 'pause' : '')}}"
      style="background:url('{{drawBtnImg}}') no-repeat center / cover"
        onTap="startClick" />
    </block>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

acss

.lt-item-list {
  margin: 20rpx auto;
  background: url("https://xiaojinhe-cdn.iyoudui.com/activity/lottert-bg.png")
    no-repeat center / 100%;
  width: 702rpx;
  height: 576rpx;
  padding: 20rpx;
  padding-top: 80rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  /* border: 1rpx solid red; */
}
.fruit-slots {
  /* border: 1rpx solid green; */
  position: relative;
}
.title {
  position: absolute;
  top: 17rpx;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 28rpx;
  line-height: 42rpx;
  color: #fff;
}

.lt-item {
  margin: 16rpx 0 0 16rpx;
  width: 210rpx;
  height: 145rpx;
  padding: 0;
  float: left;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left top;
  box-sizing: border-box;
  border-radius: 20rpx;
  background-color: #eff1dd;
  overflow: hidden;
}
/* .lt-item:nth-child(1) {
  background-color: #c3ebfa;
}
.lt-item:nth-child(2) {
  background-color: #eff1dd;
}
.lt-item:nth-child(3) {
  background-color: #f1d6dc;
}
.lt-item:nth-child(4) {
  background-color: #f1d6dc;
} */
.lt-item:nth-child(5) {
  background-color: #2683fc;
  border: none;
}
/* .lt-item:nth-child(6) {
  background-color: #c3ebfa;
}
.lt-item:nth-child(7) {
  background-color: #eff1dd;
}
.lt-item:nth-child(8) {
  background-color: #c3ebfa;
}
.lt-item:nth-child(9) {
  background-color: #f1d6dc;
} */
.lt-item:nth-child(1),
.lt-item:nth-child(4),
.lt-item:nth-child(7) {
  margin-left: 0 !important;
}
.lt-item:nth-child(1),
.lt-item:nth-child(2),
.lt-item:nth-child(3) {
  margin-top: 0 !important;
}
.lt-active {
  background-repeat: no-repeat;
  background-position: left top;
  box-sizing: border-box;
  /* filter: contrast(50%); */
  filter: brightness(50%);
}
.lt-button {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://zos.alipayobjects.com/rmsportal/CNzFiofsxZsEPuzbORIA.png);
}
.lt-button.disabled {
  background-image: url(https://zos.alipayobjects.com/rmsportal/JbBzEiibIXRGxXPRzJIg.png);
}
.lt-button.pause {
  background-image: url(https://zos.alipayobjects.com/rmsportal/eGLmgGZHTDBjtzwhxNkJ.png);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

js

Component({
  data: {
    activeOrder: [0, 1, 2, 4, 7, 6, 5, 3], // 九宫格除按钮外的8个格子自左上角顺时针的下标顺序
    activeIndex: NaN,
    itemWidth: 0,
    isRolling: false,
  },
  props: {
    width: 700, // 组件宽度，单位 rpx
    margin: 20, // 奖项之间的外边距，单位 rpx
    prizeBox: [], // 奖项列表，个数限定为8
    prizeName: "", // 获奖项名称
    rollTimes: 3, // 转动圈数
    mode: "pre", // 抽奖模式：pre(默认) | realtime
    currentIndex: 0, // 转动开始的下标
    speed: 100, // 转动速度, 单位 ms
    isDrawVO: {},
    drawBtnImg: "",
    disabled: false, // 按钮是否可点击
    onStart: function onStart() {}, // 开始的回调
    onFinish: function onFinish() {}, // 结束的回调
    onClickDraw: () => {},
  },
  didMount: function didMount() {
    this.prizeLength = 8;
    // 必须要取整，否则部分机型下有适配问题
    this.setData({
      itemWidth: parseInt((this.props.width - 4 * this.props.margin) / 3),
    });
  },
  didUpdate: function didUpdate(prevProps) {
    var _props = this.props,
      mode = _props.mode,
      prizeName = _props.prizeName;

    if (mode === "realtime" && prizeName && prevProps.prizeName !== prizeName) {
      var prizeIndex = this.findPrizeIndex(prizeName);
      if (prizeIndex === -1) {
        console.error(
          "请传入正确的获奖项name，其值必须存在于 prizeBox name 字段中"
        );
        return;
      }
      // 总转动步数 = 默认圈数 x 奖品个数 + 结束位置索引 + 当前位置到一圈结束还剩下的步数
      var activeIndex = this.currentStep % this.prizeLength;
      this.totalSteps =
        1 * this.prizeLength +
        this.currentStep +
        (this.prizeLength - activeIndex) +
        prizeIndex;
    }
  },

  methods: {
    next: function next(activeIndex) {
      var _this = this;

      activeIndex = activeIndex % this.prizeLength;
      this.setData({ activeIndex: this.data.activeOrder[activeIndex] });
      if (this.currentStep === this.totalSteps) {
        this.done(activeIndex);
        return;
      }
      this.currentStep += 1;
      setTimeout(function () {
        _this.next(++activeIndex);
      }, this.speedCtl());
    },

    /**
      模拟速度变化，分为四档
      当走过格子数 < 总步数 - 2圈格子数时，速度为speed
      以此线性递增
    */
    speedCtl: function speedCtl() {
      var steps = this.totalSteps;
      var size = this.prizeLength;
      var currentStep = this.currentStep;
      if (currentStep < steps - size * 2) {
        return this.props.speed;
      } else if (
        steps - size * 2 <= currentStep &&
        currentStep <= steps - size
      ) {
        return this.props.speed * 2;
      } else if (steps - currentStep > 3) {
        return this.props.speed * 3;
      } else {
        return this.props.speed * 4;
      }
    },

    /**
      通过名称获取奖品项在顺时针格子中对应的下标
      未找到返回-1
    */
    findPrizeIndex: function findPrizeIndex(name) {
      var prizeBox = this.props.prizeBox;
      var order = this.data.activeOrder;
      for (var i = 0; i < this.prizeLength; i++) {
        if (prizeBox[order[i]].name == name) {
          return i;
        }
      }
      return -1;
    },
    startClick() {
      if (this.props.disabled || this.data.isRolling) return;
      this.props.onClickDraw();
    },
    start: function start(position) {
      var _props2 = this.props,
        disabled = _props2.disabled,
        prizeBox = _props2.prizeBox,
        currentIndex = _props2.currentIndex,
        prizeName = _props2.prizeName,
        mode = _props2.mode;

      if (disabled || this.data.isRolling) return;
      this.currentStep = 0;
      if (prizeBox.length !== 8) {
        console.error("奖品项列表 prizeBox 长度不为8");
      }
      var activeIndex = +currentIndex || 0;
      if (mode === "realtime") {
        this.totalSteps = Infinity;
      } else {
        // 奖品项下标
        var prizeIndex = this.findPrizeIndex(prizeName);
        if (prizeIndex === -1) {
          console.error(
            "请传入正确的获奖项name，其值必须存在于 prizeBox name 字段中"
          );
        }
        // 总转动步数 = 默认圈数 x 奖品个数 + 结束位置索引 + 当前位置到一圈结束还剩下的步数
        this.totalSteps =
          this.props.rollTimes * this.prizeLength +
          prizeIndex +
          (this.prizeLength - activeIndex);
      }
      this.setData({ isRolling: true });
      this.next(activeIndex);
      this.props.onStart(position);
    },
    done: function done(activeIndex) {
      var _this2 = this;

      // setTimeout防止抽奖结束后父组件设置disabled=true的过程中用户马上再次点击抽奖 此时 disabled 和 isRolling
      // 状态还没来得及更新，start 函数可能被执行
      setTimeout(function () {
        _this2.setData({ isRolling: false });
      }, 50);
      this.props.onFinish(activeIndex, this.props.prizeName);
      // 中奖后清除遮罩
      setTimeout(() => {
        this.setData({ activeIndex: NaN });
      }, 1000);
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

html使用

<fruit-slots
    ref="fruitRef"
    mode="realtime"
    prizeBox="{{prizeBox}}"
    prizeName="{{prizeName}}"
    disabled="{{disabled}}"
    isDrawVO="{{isDrawVO}}"
    drawBtnImg="{{drawBtnImg}}"
    rollTimes="3"
    onClickDraw="onClickDraw"
    onStart="onStart"
    onFinish="onFinish"
    speed="50"
  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14