定义好奖品下标，计时器开始抽奖，请求接口，出现中奖奖品之后，获取中奖商品对应的奖品下标，再次计时器判断当前移动的小标是否为中奖商品的下标，并且是否转到3圈（防止转1圈就停止），如果时就清除两次计时器。
当前代码封装为九宫格的组件；
vue代码：
scss代码：
.page{ width: 750rpx; height: 100vh; position: relative; } .bg{ width: 750rpx; height: 100vh; } .content{ width: 750rpx; min-height: 100vh; height: 1448rpx; position: absolute; top: 0; left: 0; } .logo{ height: 60rpx; display: flex; justify-content: center; margin-top: 90rpx; image{ height: 60rpx; } } .box{ width: 680rpx; margin: 0 auto; margin-top: 330rpx; .awards{ width: 525rpx; height: 525rpx; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-content:space-between; .awardsItem{ width: 161rpx; height: 161rpx; background: linear-gradient(132deg, #FFCEA4 0%, #FFE6CB 100%); box-shadow: 0rpx 6rpx 0rpx 0rpx #E98F5D; border-radius: 15rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; image{ width: 132rpx; height: 132rpx; border-radius: 12rpx; } .play{ display: flex; flex-direction: column; align-items: center; justify-content: center; .go{ font-size: 68rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #A10B14; } .count{ font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #A10B14; } } } .awardsActive{ background: linear-gradient(132deg, #FFECBB 0%, #FFB100 100%); box-shadow: 0rpx 6rpx 0rpx 0rpx #E38800, inset 0rpx 2rpx 6rpx 0rpx rgba(255,255,255,0.65), inset 0rpx -2rpx 6rpx 0rpx rgba(255,255,255,0.3); } } .notification{ height: 40rpx; margin-top: 226rpx; display: flex; justify-content: center; align-items: center; image{ height: 32rpx; margin-right: 16rpx; } text{ font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FF8D3B; } } .btns{ display: flex; align-items: center; justify-content: space-between; margin-top: 38rpx; } .btn{ width: 332rpx; height: 110rpx; image{ width: 100%; height: 100%; } } } .win{ width: 750rpx; height: 100vh; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .win_box{ width: 662rpx; height: 60%; padding: 40rpx; box-sizing: border-box; border-radius: 24rpx; } .win_box_bg{ background: #FFCE2B; } .bg3{ background: #C3E5FE; } .iconcolseIcon{ font-size: 58rpx; margin-top: 98rpx; } .win_box1{ width: 630rpx; height: 922rpx; position: relative; } .win_bg{ width: 630rpx; height: 922rpx; } .win_content{ width: 630rpx; height: 922rpx; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; } .win_tips{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; margin-top: 290rpx; } .win_title{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; color: #FE6631; margin: 170rpx 0; } .win_btn{ width: 280rpx; height: 80rpx; line-height: 80rpx; text-align: center; background: #FFE047; border-radius: 46rpx; font-size: 32rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; color: #13112C; } .win_tit{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; margin-bottom: 32rpx; } .win_box2{ width: 662rpx; height: 900rpx; background: #FFFFFF; border-radius: 24rpx; display: flex; flex-direction: column; } .items{ width: 662rpx; height: 108rpx; background: #C3E5FE; border-radius: 24rpx 24rpx 0rpx 0rpx; display: flex; align-items: center; flex-shrink:0 } .left,.right{ width: 50%; text-align: center; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; } .i_title{ font-size: 36rpx; } .list{ height: 792rpx; padding-bottom: 20rpx; overflow: hidden; } .item{ width: 662rpx; height: 88rpx; display: flex; align-items: center; justify-content: space-around; } .item:nth-child(2n){ background-color: #F4F4F4; } .r_btn{ width: 160rpx; height: 60rpx; line-height: 60rpx; text-align: center; background: #FFC659; border-radius: 46rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; font-size: 32rpx; margin:0 auto; }效果:
