小程序-商城思路开拓

引言

---

小程序商城类写了比较多,想罗列一下写法，由于一直是本身在思考，因此进步比较慢。还请海涵

本身的连接

小程序排坑

购物车

大概思路是经过更新机制去处理各个状况，确保一个函数只作一件事。

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
  })
})

复制代码