小程序-商城思路開拓

引言

---

小程序商城類寫了比較多,想羅列一下寫法，由於一直是本身在思考，因此進步比較慢。還請海涵

本身的連接

小程序排坑

購物車

大概思路是經過更新機制去處理各個狀況，確保一個函數只作一件事。

1. 選擇商品

const { index,type } = e.currentTarget.dataset;
const goodsList = this.data.goodsList;
goodsList[index].isclick = !goodsList[index].isclick
this.updata(goodsList, type);   

複製代碼

2. 增長與減小商品數量

add_count(e) {
    const {
      index,
      type
    } = e.currentTarget.dataset;
    const goodsList = this.data.goodsList;
    if (goodsList[index].count <= 0) return
    goodsList[index].count--;
    this.updata(goodsList, type);
  },
  reduce_count(e) {
    const {
      index,
      type
    } = e.currentTarget.dataset;
    const goodsList = this.data.goodsList;
    if (goodsList[index].count === 99) return
    goodsList[index].count++;
    this.updata(goodsList, type);
  },

複製代碼

3. 全局更新

let total_price = 0;
let isall_status = false; //是否全選
let { isall}=this.data
if (!(list instanceof Array)) {
  //小程序原生點擊事件第一項爲event,默認點擊替換,vue則不會
  list = this.data.goodsList
  type = true
}
list.forEach(item => {
  if (type) {
    !isall ? item.isclick = true : item.isclick = false
  }
  if (item.isclick) {
    total_price += parseInt(item.price * item.count)
  }
})
isall_status = list.filter(item => item.isclick).length;
isall_status === list.length ? isall = true : isall = false
this.setData({
  goodsList: list,
  total_price,
  isall
})

複製代碼

4.刪除商品

let {
  goodsList,
} = this.data;
let delete_list = goodsList.filter(item => item.isclick);
let status_length = delete_list.length;
let Model_content = status_length === goodsList.length ? '是否刪除所有商品' : '是否刪除商品'
Model('舒適提示', Model_content).then(res => {
  goodsList.forEach((item, index, arr) => {
    if (item.isclick) {
      goodsList.splice(index, status_length)
    }
  })
  Toast('刪除成功')
  this.setData({
    goodsList,
    total_price: 0
  })
})

複製代碼