share_activity/pages/luckDraw/detail.js

// pages/luckDraw/detail.js
import LuckDraw from '../../api/luck-draw'
import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../utils/user'
const app = getApp();

const DEFAULT_GIFTS = [
    { icoUrl: '', text: '' }, { iconUrl: '', text: '' },{ icoUrl: '', text: '' }, { icoUrl: '', text: ''},
    { icoUrl: '', text: ''}, { icoUrl: '', text: '' }, { icoUrl: '', text: ''}, { icoUrl: '', text: '' }
];
Page({

    /**
     * 页面的初始数据
     */
    data: {
        pointerPos: 0,
        hitPos: null,
        isHit: null,
        activityId: 0,
        forbidTurn: false,
        giftList: DEFAULT_GIFTS,
        allNum: 1000,
        remainNum: 128,
        remainNumSplits: [],
        showHitPrizeDlg: false,
        showNoHitPrizeDlg: false,
        showNeedShareDlg: false,
        showPage: true,
        isLogin: false,
        hitResult: null,
        noHitResult: null
    },

    popMessage(message) {
        app.showToast(message, "none")
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (!options.id) {
            this.popMessage ('入参错误');
            wx.navigateTo({
              url: './index',
            })
            return
        }
        this.setData({
            isLogin: getMobileCache() != ''
        })
        this.data.activityId = options.id
        this.loadActivity()
        this.getDrawTimes()
    },
    loadActivity: function() {
        LuckDraw.getActivityDetail(this.data.activityId).then(resp => {
            if (resp.code == 200 && resp.data != null) {
                this.mapDataToView(resp.data)
            }
       }).catch(_ => {
           console.log(_)
           this.popMessage('活动不存在');
           wx.navigateTo({
             url: './index',
           })
           return
       })
    },

    /**
     * 获取次数
     */
    getDrawTimes: function() {
        LuckDraw.getTimes(this.data.activityId, getMobileCache()).then(res => {
            if (res.code == 200) {
                this.setData({
                    remainNum: res.data.remainTimes,
                    allNum: res.data.allTimes,
                })
                this.setRemainNumSplits()
            }
        }).catch(_ => {})
    },

    /**
     * 活动数据映射
     */
    mapDataToView: function(activity) {
        activity.goodsItemList.forEach(v => {
            const pos = parseInt(v.pos || 0)
            if (pos > 0) {
                if (this.data.giftList[pos-1].isLoaded) {
                    return true
                }
                this.data.giftList[pos - 1].isLoaded = true
                this.data.giftList[pos - 1].text = v.goodsName
                this.data.giftList[pos - 1].iconUrl = v.goodsSmallImage
                this.data.giftList[pos - 1].hitIconUrl = v.goodsBigImage
                this.data.giftList[pos - 1].goodsId = v.goodsId
                this.data.giftList[pos - 1].couponId = v.couponId
                this.data.giftList[pos - 1].isSpecial = v.isSpecial
                this.data.giftList[pos - 1].hitDesc = v.hitDesc
                this.data.giftList[pos - 1].active = false
            }
        })
        this.setData({
            activityTitle: activity.activityTitle,
            showBeginTime: activity.showBeginTime,
            showEndTime: activity.showEndTime,
            beginTime: activity.beginTime,
            endTime: activity.endTime,
            timeType: activity.timeType,
            dayBeginTime: activity.dayBeginTime,
            dayEndTime: activity.dayEndTime,
            giftList: this.data.giftList,
            ruleDesc: activity.ruleDesc || '',
            forbidTurn: activity.status != 2,
            opptyInitialVal: activity.opptyInitialVal || 0,
            opptyMaxVal: activity.opptyMaxVal || 0,
            status: activity.status
        })
    },

    /**
     * 开始转动奖品，抽奖
     */
    turnPrize: function() {
        console.log("开始抽奖")
        if (this.isLock || !this.data.isLogin) {
            return
        }
        // 预处理
        if (this.data.remainNum <= 0) {
            if (this.data.noHitResult != null ) {
                // 可以通过分享获取
                if (this.data.noHitResult.canShareGetTimes == 1) {
                    this.popNeedShareDlg()
                    return
                } 
                if (this.isSniffAgain) {
                    this.popMessage('抱歉，您的抽奖机会已用完');
                    return
                }
            }
        }
        this.isLock = true
        this.isSniffAgain = false
        let remainNum = this.data.remainNum - 1
        if (remainNum < 0) {
            this.isSniffAgain = true
            remainNum = 0
        }
        this.setData({ remainNum })
        // 开始动画，开始是快阶段
        this.data.duration = 80
        this.data.hitPos = -1
        this.data.hitTime = 0
        this.data.isHit = null;
        this.data.stopNotify = false
        this.startTurnAnimationFast()
        // 开始调用后台
        setTimeout(_ => {
            this.data.hitTime = new Date().getTime()
            this.requestDrawPrize()
        }, 2000)
    },
    
    requestDrawPrize: function() {
        LuckDraw.drawPrize(this.data.activityId, getMobileCache()).then(res => {
            if (res.code == 200) {
                this.hitPrizeMapData(res.data)
            }
        }).catch(_ => {
            this.data.stopNotify = true
            console.log(_)
        })
    },

    hitPrizeMapData: function(hitData) {
        if (hitData.isHit == 1) {
            // 中奖
            const hitResult = hitData.hitResult;
            this.data.giftList.forEach((v, i) => {
                if (v.goodsId == hitResult.goodsId) {
                    // 设置中奖
                    this.data.hitPos = i
                    return false
                }
            })
            this.setData({
                hitResult,
                isHit: 1,
            })
        } else {
            // 未中奖
            const noHitResult = hitData.noHitResult || {};
            if (noHitResult.canShareGetTimes == 1) {
                // 分享可获取抽奖机会，停止转动
                this.data.stopNotify = true
                this.setData({
                    noHitResult,
                    isHit: 0
                })
                this.isLock = false
                this.popNeedShareDlg()
            } else {
                this.data.giftList.forEach((v, i) => {
                    if (v.goodsId == noHitResult.goodsId) {
                        // 设置中奖
                        this.data.hitPos = i
                        return false
                    }
                })
                this.setData({
                    noHitResult,
                    isHit: 0,
                })
            }
        }
        // 重刷次数
        this.getDrawTimes()
    },

    popNeedShareDlg: function() {
        this.setData({
            showNeedShareDlg: true
        })
    },

    // 授权手机号
    getPhoneNumber(e) {
        getPhoneNumberSync(e, _ => {
            this.getDrawTimes()
        })
    },

    nextPos() {
        let pos = 0
        switch(this.data.pointerPos) {
            case 0:
                pos = 1
                break
            case 1:
                pos = 2
                break
            case 2:
                pos = 4
                break
            case 4:
                pos = 7
                break
            case 7:
                pos = 6
                break  
            case 6:
                pos = 5
                break
            case 5:
                pos = 3
                break
            case 3:
                pos = 0
                break                 
        }
        this.data.pointerPos = pos
    },

    startTurnAnimationFast: function() {
        if (this.data.stopNotify) {
            // 异常停止转动
            this.setActiveGift(-1)
            this.timer&&clearTimeout(this.timer)
            return
        }
        const endTime = new Date().getTime()
        const step = 10
        this.timer = setTimeout(_ => {
            this.setActiveGift(this.data.pointerPos)
            if (this.data.hitPos == -1) {
                this.nextPos()
                this.startTurnAnimationFast()
            } else {
                // 收到抽中信号了，依然需要跑一段时间
                if (endTime - this.data.hitTime < 3000) {
                    this.data.duration += step
                    this.nextPos()
                    this.startTurnAnimationFast()
                } else {
                    // 可以定位了
                    if (this.data.hitPos == this.data.pointerPos) {
                        // 删除定时器，抽奖动作结束，开始回调
                        this.timer && clearTimeout(this.timer)
                        this.setActiveGift(this.data.pointerPos)
                        this.dealHitResult()
                    } else {
                        this.data.duration += (step * 2)
                        this.nextPos()
                        this.startTurnAnimationFast()
                    }
                }
            }
        }, this.data.duration)
    },

    setActiveGift(pos) {
        this.data.giftList.forEach((v, i) => {
            if (i == pos) {
                v.active = true
            } else {
                v.active = false
            }
        })
        this.setData({
            giftList: this.data.giftList
        })
    },

    dealHitResult: function() {
        setTimeout(_ => {
            if (this.data.isHit == 1) {
                this.setData({
                    showHitPrizeDlg: true
                })
            } else {
                this.setData({
                    showNoHitPrizeDlg: true
                })
            }
            this.isLock = false
        }, 300)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },

    setRemainNumSplits: function() {
        this.setData({
            remainNumSplits: (this.data.remainNum || 0).toString().split("")
        })
    },

    closeDlg: function() {
        this.setData({
            showHitPrizeDlg: false,
            showNoHitPrizeDlg: false,
            showNeedShareDlg: false,
        })
    }
})