這個想法來自看直播時看主播鬥地主時經常由於沒有記牌器,判斷失誤導致輸豆,所以做了這個記牌器。估計不會有人用 ?,就當作練手,熟悉小程式的整個開發流程哈哈。 沒想到提交第二天就稽核通過了
截圖
思路比較簡單隻有一個頁面
1.可選一副牌或兩副牌
2.點選相應牌減少對應牌的數量, 數量為0時該圖示變灰
3.可撤銷,撤銷操作僅保留最近100個點選操作
4.重置操作會清空所有操作記錄
開發上選擇的是 mpvue mpvue.com/
然後直接使用grid佈局對卡牌進行排列
<div class="gird-container">
<div class="gird-item" v-for="(poker, index) in pokers" :key="index">
<card :poker="poker" :index="index" @handleHuase="handleHuase" @handleWang="handleWang">
</card>
</div>
</div>
複製程式碼
操作方法
// 點選操作
handleHuase (obj) {
// 這裡用來記錄操作歷史
this.updateHistory.push(JSON.parse(JSON.stringify(this.pokers)))
if (this.pokers[obj.index][obj.huase] > 0) {
this.pokers[obj.index][obj.huase] -= 1
this.pokers[obj.index].count -= 1
} else {
this.pokers[obj.index][obj.huase] = this.defaultCount
this.pokers[obj.index].count += 1
}
}
複製程式碼
// 撤銷操作
rollback () {
let pokers = this.updateHistory[this.updateHistory.length - 1]
this.pokers = pokers
this.updateHistory.pop(this.updateHistory.length - 1)
}
複製程式碼