九宫格翻纸牌会有翻不开的情况
yzqiang opened this issue · comments
出现频率大概有15%左右，跟iOS版本、微信版本没有关系。
@yzqiang demo例子我这边针对 iOS 和 大部分 Andriod 测试过，每次都可以翻开，至于你使用过程中存在 15% 翻不开情况，猜测有可能是你使用过程中其他部分共同影响导致，能否把你使用过程中的代码贴出来具体看一下排查看
import card from '../components/card/card.js'
var config = require('../config')
var wxParse = require('../wxParse/wxParse')
var app = getApp()
var event = {
getEvent(that, id) {
var event = this
wx.request({
url: config.wp.domain + '/events/' + id,
success(res) {
if (res.data.code) {
return
}
// 有可能商品不存在
if (!that.data.id) {
return
}
// 如果活动未开始或者已结束则返回
var startDate = Date.parse(new Date(res.data.meta.start_date))
var endDate = Date.parse(new Date(res.data.meta.end_date))
var timestamp = Date.parse(new Date())
if (timestamp < startDate || timestamp > endDate) {
return
}
// 获取加入活动的店面列表
var shops = res.data.meta.shops.split(',')
// 如果设置了活动店面，并且当前店面中没有则返回
if (shops.length > 0 && shops.indexOf(that.data.shop.id)) {
return
}
// 该店面有活动，需要显示提示
that.setData({
'event.id': res.data.id,
'event.name': res.data.title.rendered,
'event.meta': res.data.meta
})
// 获取加入活动的商品列表
var products = res.data.meta.products.split(',')
// 如果设置了活动店面，并且当前店面中没有则返回
// split之后如果没有上会是空白字符串，场地为1
if (products.length > 1 && -1 == ('|' + products.join('|') + '|').indexOf('|' + that.data.id + '|')) {
return
}
// 该商品是否参与活动，如果有该设置表示为活动商品
that.setData({
'event.product': id
})
that.card = new card(that, {
data: res.data.meta.prizes,
callback(idx, award) {
that.card.show(function () {
wx.showModal({
title: '获奖提示',
content: '您获得的是' + award,
showCancel: false,
success(res) {
// 保存获奖记录，自动刷新页面
event.addPrize(that, award)
}
})
})
}
})
that.card.start()
// 解析文章HTML
wxParse.wxParse('event.content', 'html', res.data.content.rendered, that)
},
complete(res) {
wx.hideLoading()
}
})
},
getPrizes(that) {
wx.getStorage({
key: 'prizes',
success(res) {
var prizes = res.data
that.setData({
prizes: prizes,
'event.prize': prizes[that.data.id]
})
}
})
},
addPrize(that, prize) {
var prizes = that.data.prizes
prizes[that.data.id] = prize
wx.setStorage({
key: 'prizes',
data: prizes,
success(res) {
that.setData({
prizes: prizes,
'event.prize': prize
})
}
})
}
}
module.exports = event
/**
-
Class Card
-
@classdesc 九宫格翻纸牌组件逻辑部分
-
@author pfan
-
@todo 注意：移动端真机，不支持requestAnimationFrame.
-
new Card(this,{
-
data: [ //宫格信息，内联样式、是否是反面、是否运动、对应奖项
-
{isBack: false, isMove: false, award: "一等奖"}, -
{isBack: false, isMove: false, award: "二等奖"}, -
{isBack: false, isMove: false, award: "三等奖"}, -
{isBack: false, isMove: false, award: "四等奖"}, -
{isBack: false, isMove: false, award: "五等奖"}, -
{isBack: false, isMove: false, award: "六等奖"}, -
{isBack: false, isMove: false, award: "七等奖"}, -
{isBack: false, isMove: false, award: "八等奖"}, -
{isBack: false, isMove: false, award: "九等奖"} -
],
-
callback: (idx, award) => {
-
//结束回调， 参数对应宫格索引，对应奖项 -
}
-
})
*/
class Card {/**
- @constructs Card构造函数
- @param {Object} pageContext page路由指针
- @param {Object} opts 组件所需参数
- @param {String} opts.inlineStyle 组件所需参数
- @param {Boolean} opts.isBack 是否是反面
- @param {Boolean} opts.isMove 是否运动
- @param {String} opts.award 对应奖项
- @param {Function} opts.callback 结束回调
*/
constructor (pageContext, opts) {
this.page = pageContext
this.isFlip = false
this.card = opts.data || []
this.init()
this.endCallBack = opts.callback
this.page.start = this.start.bind(this)
this.page.onClick = this.onClick.bind(this)
}init () {
let {card} = thisfor(let i = 0; i < 9; i++) { var existed = 'undefined' != typeof(card[i]) var rate = existed ? card[i].rate : 0 var image = existed ? card[i].image : '' var award = existed ? card[i].award : '' card[i] = { isBack: false, isMove: false, rate: rate ? rate : 0, image: image ? image : '/images/thankyou.png', award: award ? award : '感谢惠顾' } } this.page.setData({card}) this.card = card}
// 显示牌面
show(callback) {
let {card} = thisrunAsync(100).then( () => { // 掀开第一行牌 for(let i = 0; i < 3; i++){ card[i].isBack = true } this.page.setData({card}) return runAsync(300) }).then( () => { // 掀开第二行牌 for(let i = 3; i < 6; i++){ card[i].isBack = true } this.page.setData({card}) return runAsync(300) }).then( () => { // 掀开第三行牌 for(let i = 6; i <= 8; i++){ card[i].isBack = true } this.page.setData({card}) return runAsync(800) }).then( () => { callback() })}
start () {
let {card} = this
var that = thisthis.show(function () { runAsync(100).then( () => { // 重新将牌盖上 for(let i = 0; i < 9; i++){ card[i].isBack = false } that.page.setData({card}) return runAsync(300) }).then( () => { // 洗牌 for(let i = 0; i < 9; i++){ card[i].isMove = true } that.page.setData({card}) return runAsync(300) }).then( () => { // 将牌恢复位置 for(let i = 0; i < 9; i++){ card[i].isMove = false } that.page.setData({ card }) that.isFlip = true that.card = card }) })}
// 根据每个商品的概率进行洗牌
shuffle(click, data) {
// 当前抽中了第几号奖品
var getPrize = function () {
// 获取随机数
var random = Math.random()
var total = 0
// 按照中奖概率进行排序
var orders = dataorders.sort(function (a, b) { return parseFloat(b.rate) - parseFloat(a.rate) }) for (var i = 0; i < 9; i++) { total += orders[i].rate if (random <= total) { return i } } } var index = getPrize() // 保存已中奖卡片 // 如果用下标方式获取会出现错误 var card = data.splice(index, 1) // 对未中奖卡片进行洗牌 data = shuffle(data) // 将中奖卡片从数组中插回点击位置 data.splice(click, 0, card[0]) return data}
reset () {
let {card} = this
this.isFlip = false
for(let i = 0; i < 9; i++){
card[i].isBack = false,
card[i].isMove = false
}
this.card = card
this.page.setData({card})runAsync(800).then( () => { this.start() })}
onClick (event) {
let {card, isFlip, endCallBack} = this
if(!isFlip) {
return
}let idx = parseInt(event.currentTarget.id) // 获取洗后的牌 card = this.shuffle(idx, card) // 将洗后的牌进行赋值 var award = card[idx].award card[idx].isBack = !card[idx].isBack this.page.setData({card}) runAsync(600).then( () => { endCallBack(idx, award) })}
}
/**
- runAsync 延迟返回 promise 方法
- @param {Number} time 延迟时间
- @return {type} 返回Promise对象
*/
function runAsync(time) {
return new Promise(function(resolve, reject) {
let timer = setTimeout(function(){
resolve()
clearTimeout(timer)
}, time)
})
}
// 洗牌函数
function shuffle(arr) {
var j, temp
for (var i = arr.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr
}
export default Card