也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。
最终效果图
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.postimg.cc/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
})
},
})
完毕
