|
最终效果图 
1 wxml 布局文件<view class="activitymain">
<!-- 中奖用户提示 --> <view class="container_act"> <view class="news flex-row"> <image src="/img/draw_notice.png" class="img-35 notice-img"></image> <swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'> <block wx:for-index="idx" wx:for='{{list}}' wx:key="index"> <swiper-item> <view class='content-item'> <text class="ml30" decode="{{true}}">恭喜用户 </text> <text class="high-light">{{item.phone}}</text> <text decode="{{true}}"> {{item.name}}</text> </view> </swiper-item> </block> </swiper> </view>
<!-- 转盘 --> <view class="draw"> <view class="draw_view flex-row jb"> <view class="item {{turnplateList[0].status ? 'op1' : ''}}"> <image src="{{turnplateList[0].img}}" class="item-img"></image> <view>{{turnplateList[0].name}}</view> </view> <view class="item {{turnplateList[1].status ? 'op1' : ''}}"> <image src="{{turnplateList[1].img}}" class="item-img"></image> <view>{{turnplateList[1].name}}</view> </view> <view class="item {{turnplateList[2].status ? 'op1' : ''}}"> <image src="{{turnplateList[2].img}}" class="item-img"></image> <view>{{turnplateList[2].name}}</view> </view> <view class="item {{turnplateList[3].status ? 'op1' : ''}}"> <image src="{{turnplateList[3].img}}" class="item-img"></image> <view>{{turnplateList[3].name}}</view> </view> <view class="item no-bg"> <image wx:if="{{drawLuck}}" src="/img/chose.png" class="draw-img" bindtap="drawLuck"></image> <image wx:else src="/img/chosed.png" class="draw-img"></image> </view>
<view class="item {{turnplateList[4].status ? 'op1' : ''}}"> <image src="{{turnplateList[4].img}}" class="item-img"></image> <view>{{turnplateList[4].name}}</view> </view>
<view class="item {{turnplateList[5].status ? 'op1' : ''}}"> <image src="{{turnplateList[5].img}}" class="item-img"></image> <view>{{turnplateList[5].name}}</view> </view> <view class="item {{turnplateList[6].status ? 'op1' : ''}}"> <image src="{{turnplateList[6].img}}" class="item-img"></image> <view>{{turnplateList[6].name}}</view> </view> <view class="item {{turnplateList[7].status ? 'op1' : ''}}"> <image src="{{turnplateList[7].img}}" class="item-img"></image> <view>{{turnplateList[7].name}}</view> </view> </view> </view>
<view class="choice"> 您还有{{draw_count}}次抽奖机会 </view> </view> <!-- 活动商品 --> <view class="goodslist"> <view class="result_title">活动商品</view> <view class="shop_info" wx:for="{{3}}"> <view class="item"> <image src="https://i./NGN7JqRB/222.webp" class="item-img"></image> <view class="goods_info"> <text class="title">测试商品</text> <view class="price"> <text>价格 $90</text> <button plain="true" type="warn" size="mini">立即购买</button> </view> </view> </view> </view> </view> <!-- 抽奖规则 --> <view class="resultrule"> <view class="result_title">抽奖规则</view> <view class="result_info"> <scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <block wx:for="{{resultList}}" wx:key="index"> <view class="goods_name">{{item.name}}</view> </block> </scroll-view> </view> </view>
<!-- 抽奖记录 --> <view class="result"> <view class="result_title">我的抽奖记录</view> <view class="result_info"> <scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <block wx:for="{{resultList}}" wx:key="index"> <view class="goods_name">{{item.name}}</view> </block> </scroll-view> </view> </view>
</view>
2 wxss 样式文件.activitymain { background-image: linear-gradient(#eb1c1c, #b92b2b); padding: 22rpx;}
.container_act { border: 1px solid #FF9800; border-radius: 20rpx; color: #fff; box-shadow: 0px 4px 4px 0 #FF5722; /* height: 300px; */ padding: 30rpx;}
.news { margin: 20rpx auto; width: 100%; /* border: 1px solid black; */ height: 30px; line-height: 30px; border-radius: 30rpx; background-color: rgb(229, 149, 149);}
.notice-img { padding: 0 30rpx;}
.swiper { width: 90%; height: 100%; font-size: 25rpx;}
.content-item { max-width: 600rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.high-light { color: #eccb39;}
.draw { /* border: 1px solid black; */ margin-top: 50rpx; width: 100%; /* height: 350px; */ border-radius: 20rpx; box-shadow: 0 0 7rpx 0 rgba(0, 137, 254, 0.45), 0 0 18rpx 0 #FFFFFF;}
.draw_view { flex-wrap: wrap; padding: 30rpx;}
.item { width: 31%; /* border: 1px solid black; */ height: 90px; margin-bottom: 30rpx; background-color: #fff; color: #b90c0c; border-radius: 20rpx; font-size: 26rpx; text-align: center;}
.item-img { margin-top: 10rpx; width: 60px; height: 60px; border-radius: 10rpx;}
.choice { margin-top: 30rpx; text-align: center; font-size: 28rpx;}
.draw-img { height: 100%; width: 100%;}
.no-bg { background: none;}
.op1 { border: 5rpx solid #ac1010; box-shadow: inset -4rpx -23rpx 20rpx 20rpx #ce1e1e; border-radius: 20rpx; box-sizing: border-box;}
.result { /* border: 1px solid rebeccapurple; */ margin: 60rpx 20rpx; border-radius: 20rpx; height: 200px; box-shadow: 0 0 98rpx 0 #FFFFFF inset; text-align: center;}
.resultrule { /* border: 1px solid rebeccapurple; */ margin: 60rpx 20rpx; border-radius: 20rpx; height: 200px; box-shadow: 0 0 8rpx 0 #FFFFFF inset; text-align: center;}
.goodslist { /* border: 1px solid rebeccapurple; */ margin: 60rpx 20rpx; border-radius: 20rpx; height: auto; box-shadow: 0 0 8rpx 0 #FFFFFF inset; text-align: center;}.goodslist .result_title{ color: white; font-weight: 600; padding-top: 30rpx; margin-bottom: 20rpx;}
.result_title { color: white; font-weight: 600; padding-top: 30rpx;}
.result_info { /* border: 1px solid red; */ margin: 20rpx; height: 200rpx;}
.goods_name { color: #fff; padding: 10rpx; font-size: 28rpx;}
/**app.wxss**/.flex-row { display: flex; flex-direction: row; align-items: center;}
.flex-column { display: flex; flex-direction: column; align-items: center;}
.jb { justify-content: space-between;}
.img-35 { width: 35rpx; height: 35rpx;}
.shop_info { margin-left: 22rpx; margin-right: 22rpx; display: flex; flex-direction: row; justify-content: start;}
.shop_info .item { width: 100%; height: auto; justify-content: start; display: flex; margin-bottom: 30rpx; padding: 12rpx; background-color: #fff; color: #b90c0c; border-radius: 20rpx; font-size: 26rpx; text-align: center;}
.shop_info .goods_info { justify-content: start; display: flex; margin-top: 10rpx; flex-direction: column; align-items: start; /* width: 100%; */ padding-left: 12rpx; flex: 1;}
.shop_info .goods_info .title { font-weight: 500; font-size: 32rpx; color: #000;}
.shop_info .item-img { FONT-VARIANT: JIS78; FONT-WEIGHT: 600; margin-top: 10rpx; width: 85rpx; height: 85rpx; border-radius: 10rpx;}
.shop_info .goods_info .price { font-size: 22; color: #ac1010; display: flex; justify-content: left; width: 100%;}
.shop_info .goods_info .price text { flex: 1; text-align: start;}
.shop_info .goods_info .price button{ width: 160rpx; font-size: 22rpx;}
3 JS 文件// 获取应用实例const app = getApp()//计数器var interval = null;//值越大旋转时间越长 即旋转速度var intime = 50;Page({ data: { resultList:[], luckPosition:5, drawLuck:true, list:[ {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品"}, {phone: "188****3434", name: "抽中半价商品抽中半价商品抽中半价商品抽中半价商品"}, ], turnplateList:[ {id: "1", name: "测试商品1", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "2", name: "测试商品2", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "3", name: "测试商品3", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "4", name: "测试商品4", img:'/img/test.png',is_turnplateList:'0',status:false}, {id: "5", name: "测试商品5", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "6", name: "测试商品6", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "7", name: "测试商品7", img:'/img/test.png',is_turnplateList:'1',status:false}, {id: "8", name: "测试商品8", img:'/img/test.png',is_turnplateList:'0',status:false}, ], draw_count:'5', }, // 事件处理函数 onLoad() { }, drawLuck(){ if(this.data.draw_count==0){ wx.showToast({ title: '您的抽奖次数已经用光了', icon:'none' }) return false } this.setData({ drawLuck:false }) let that=this; //定时器 clearInterval(interval) var index=0; interval=setInterval(function(){ if(index>7){ index=0; that.data.turnplateList[7].status = false }else if (index != 0) { that.data.turnplateList[index - 1].status = false } that.data.turnplateList[index].status = true that.setData({ turnplateList: that.data.turnplateList, }) index++; },intime) console.log(this.data.turnplateList) //模拟网络请求时间 设为两秒 var stoptime = 2000; setTimeout(function () { that.stop(that.data.luckPosition); }, stoptime) }, stop: function (which){ var e = this; //清空计数器 clearInterval(interval); //初始化当前位置 var current = -1; var turnplateList = e.data.turnplateList; for (var i = 0; i < turnplateList.length; i++) { if (turnplateList[i] == 1) { current = i; } } //下标从1开始 var index = current + 1; e.stopLuck(which, index, intime, 10); }, stopLuck: function (which, index, time, splittime) { var that = this; //值越大出现中奖结果后减速时间越长 var turnplateList = that.data.turnplateList; setTimeout(function () { //重置前一个位置 if (index > 7) { index = 0; turnplateList[7].status = false } else if (index != 0) { turnplateList[index - 1].status = false } //当前位置为选中状态 turnplateList[index].status = true that.setData({ turnplateList: turnplateList, }) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行 //直到旋转至中奖位置 if (time < 400 || index != which) { //越来越慢 splittime++; time += splittime; //当前位置+1 index++; that.stopLuck(which, index, time, splittime); } else { //1秒后显示弹窗 setTimeout(function () { let turnplateList_info = that.data.turnplateList[which]; let title = ''; if (turnplateList_info.is_turnplateList == 1) { title = '恭喜你抽中了' + turnplateList_info.name; let resultList=[] resultList.push(turnplateList_info) that.setData({ resultList:that.data.resultList.concat(resultList) }) console.log(that.data.resultList) } else { title = '很遗憾未中奖'; } wx.showModal({ title: '提示', content: title, showCancel: false, success: function (res) { if (res.confirm) { let draw_count=that.data.draw_count; draw_count--; console.log(draw_count) that.setData({ drawLuck: true, luckPosition: 0, draw_count:draw_count }) } } }) }, 1000); } }, time); },
upper(e) { console.log(e) },
lower(e) { console.log(e) },
scroll(e) { console.log(e) },
scrollToTop() { this.setAction({ scrollTop: 0 }) },})
|
