最終效果圖
<view class="activitymain"><!-- 中獎(jiǎng)用戶提示 --><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><!-- 轉(zhuǎn)盤(pán) --><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}}次抽獎(jiǎng)機(jī)會(huì)</view></view><!-- 活動(dòng)商品 --><view class="goodslist"><view class="result_title">活動(dòng)商品</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">測(cè)試商品</text><view class="price"><text>價(jià)格 $90</text><button plain="true" type="warn" size="mini">立即購(gòu)買</button></view></view></view></view></view><!-- 抽獎(jiǎng)規(guī)則 --><view class="resultrule"><view class="result_title">抽獎(jiǎng)規(guī)則</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><!-- 抽獎(jiǎng)記錄 --><view class="result"><view class="result_title">我的抽獎(jiǎng)記錄</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>
.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;}
// 獲取應(yīng)用實(shí)例const app = getApp()//計(jì)數(shù)器var interval = null;//值越大旋轉(zhuǎn)時(shí)間越長(zhǎng) 即旋轉(zhuǎn)速度var intime = 50;Page({data: {resultList:[],luckPosition:5,drawLuck:true,list:[{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品"},{phone: "188****3434", name: "抽中半價(jià)商品抽中半價(jià)商品抽中半價(jià)商品抽中半價(jià)商品"},],turnplateList:[{id: "1", name: "測(cè)試商品1", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "2", name: "測(cè)試商品2", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "3", name: "測(cè)試商品3", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "4", name: "測(cè)試商品4", img:'/img/test.png',is_turnplateList:'0',status:false},{id: "5", name: "測(cè)試商品5", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "6", name: "測(cè)試商品6", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "7", name: "測(cè)試商品7", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "8", name: "測(cè)試商品8", img:'/img/test.png',is_turnplateList:'0',status:false},],draw_count:'5',},// 事件處理函數(shù)onLoad() {},drawLuck(){if(this.data.draw_count==0){wx.showToast({title: '您的抽獎(jiǎng)次數(shù)已經(jīng)用光了',icon:'none'})return false}this.setData({drawLuck:false})let that=this;//定時(shí)器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 = truethat.setData({turnplateList: that.data.turnplateList,})index++;},intime)console.log(this.data.turnplateList)//模擬網(wǎng)絡(luò)請(qǐng)求時(shí)間 設(shè)為兩秒var stoptime = 2000;setTimeout(function () {that.stop(that.data.luckPosition);}, stoptime)},stop: function (which){var e = this;//清空計(jì)數(shù)器clearInterval(interval);//初始化當(dāng)前位置var current = -1;var turnplateList = e.data.turnplateList;for (var i = 0; i < turnplateList.length; i++) {if (turnplateList[i] == 1) {current = i;}}//下標(biāo)從1開(kāi)始var index = current + 1;e.stopLuck(which, index, intime, 10);},stopLuck: function (which, index, time, splittime) {var that = this;//值越大出現(xiàn)中獎(jiǎng)結(jié)果后減速時(shí)間越長(zhǎng)var turnplateList = that.data.turnplateList;setTimeout(function () {//重置前一個(gè)位置if (index > 7) {index = 0;turnplateList[7].status = false} else if (index != 0) {turnplateList[index - 1].status = false}//當(dāng)前位置為選中狀態(tài)turnplateList[index].status = truethat.setData({turnplateList: turnplateList,})//如果旋轉(zhuǎn)時(shí)間過(guò)短或者當(dāng)前位置不等于中獎(jiǎng)位置則遞歸執(zhí)行//直到旋轉(zhuǎn)至中獎(jiǎng)位置if (time < 400 || index != which) {//越來(lái)越慢splittime++;time += splittime;//當(dāng)前位置+1index++;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 = '很遺憾未中獎(jiǎng)';}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})},})
聯(lián)系客服
