仿爱鲜蜂微信小程序

2019年12月28日

一.首页

1.动态显示数据

image.png

同步方式获取 和存取数据

var app = getApp()
Page({
  data: {
    goods: []
  },
  onLoad: function() {
    this.loadGoods();
  },
  loadGoods: function() {
    var goods = wx.getStorageSync('goods');
    var result = [];
    for (var i = 0; i < goods.length; i++) {
      var good = goods[i];
      var type = good.type;
      if (type.indexOf('milk') > -1) 
      {
        result.push(good);
      }
    }
    this.setData({
      goods: result
    });
  },
  addGoods: function(e) {
    var goods = wx.getStorageSync('goods');
    var id = e.currentTarget.id;
    var good = {};
    for (var i = 0; i < goods.length; i++) {
      var oldGood = goods[i];
      if (oldGood.id == id) {
        good = oldGood;
        break;
      }
    }
    var orders = wx.getStorageSync('orders');
    var addOrders = new Array();
    var add = true;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      if (order.id == good.id) {
        var count = order.count;
        order.count = count + 1;
        add = false;
      }
      addOrders[i] = order;
    }
    var len = orders.length;
    if (add) {
      good.count = 1;
      addOrders[len] = good;
    }
    wx.setStorageSync('orders', addOrders);
    wx.showToast({
      title: '添加成功',
      icon: 'success',
      duration: 1000
    });
  }
})

二.超市

1.通用纵向导航实现

image.png

.left {
  width: 25%;
  font-size: 15px;
}

.left view {
  text-align: center;
  height: 45px;
  line-height: 45px;
}

.select {
  background-color: #fff;
  border-left: 5px solid #ffd600;
  font-weight: bold;
}

.normal {
  background-color: #f8f8f8;
  border-bottom: 1px solid #f2f2f2;
}

右边区域通过currentTab实现动态替换

image.png

  switchNav: function(e) {
    var page = this;
    var id = e.target.id;
    if (this.data.currentTab == id) {
      return false;
    } else {
      page.setData({
        currentTab: id
      });
    }
    page.setData({
      flag: id
    });
  },

三.购物车页面

image.png

主要思路，定义变量，每次点击按钮对变量重新赋值（可以在model里定义一个选中属性select，有时间修改）

Page({
  data: {
    orders: [],
    selectedAll: true,
    totalPrice: 0
  },

  onShow: function() {
    this.loadOrders();
  },
  loadOrders: function() { //加载购物车商品订单信息
    var orders = wx.getStorageSync('orders');
    this.setData({
      orders: orders
    });
    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      totalPrice += order.price * order.count;
    }
    this.setData({
      totalPrice: totalPrice
    });
  },
  checkboxChange: function(e) { //商品行内复选框
    console.log(e);
    var ids = e.detail.value;
    
    var orders = wx.getStorageSync('orders');

    if (ids.length != orders.length) {
      this.setData({
        selectedAll: false
      });
    } else {
      this.setData({
        selectedAll: true
      });
    }

    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      for (var j = 0; j < ids.length; j++) {
        if (order.id == ids[j]) {
          totalPrice += order.price * order.count
        }
      }
    }
    this.setData({
      totalPrice: totalPrice
    });
  },
  checkAll: function(e) { //全选复选框
    var selected = this.data.selected;
    var result = selected == true ? false : true;
    this.setData({
      selected: result
    });
    if (result == false) {
      this.setData({
        totalPrice: 0
      });
      this.setData({
        selectedAll: false
      });
    } else {
      this.loadOrders();
      this.setData({
        selectedAll: true
      });
    }

  },
  addGoods: function(e) { //添加商品
    var goods = wx.getStorageSync('goods');
    var id = e.currentTarget.id;
    var good = {};
    for (var i = 0; i < goods.length; i++) {
      var oldGood = goods[i];
      if (id == oldGood.id) {
        good = oldGood;
        break;
      }
    }
    console.log(good);
    var orders = wx.getStorageSync('orders');
    var addOrders = new Array();
    var add = true;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      if (order.id == good.id) {
        var count = order.count;
        order.count = count + 1;
        add = false;
      }
      addOrders[i] = order;
    }
    var len = orders.length;
    if (add) {
      good.count = 1;
      addOrders[len] = good;
    }
    wx.setStorageSync('orders', addOrders);
    this.loadOrders();
  },
  minusGoods: function(e) { //减少商品
    var goods = wx.getStorageSync('goods');
    var id = e.currentTarget.id;
    var good = {};
    for (var i = 0; i < goods.length; i++) {
      var oldGood = goods[i];
      if (id == oldGood.id) {
        good = oldGood;
        break;
      }
    }
    console.log(good);
    var orders = wx.getStorageSync('orders');
    var addOrders = new Array();
    var add = true;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      if (order.id == good.id) {
        var count = order.count;
        if (count >= 2) {
          order.count = count - 1;
        }
      }
      addOrders[i] = order;
    }

    wx.setStorageSync('orders', addOrders);
    this.loadOrders();
  }
})

四.新增地址界面

1.form表单提交

image.png

2.添加成功后，返回指定页面，当前页面销毁

  formSubmit: function(e) {
    var address = e.detail.value;
    var cityNum = address.city;
    var cities = this.data.cities;
    address.city = cities[cityNum];
    var addresses = wx.getStorageSync('addresses');
    if (!addresses) {
      addresses = new Array();
    }
    addresses.push(address);
    wx.setStorageSync('addresses', addresses);
    wx.redirectTo({
      url: '../address/address'
    })
  }

3.picker实现一般类型选择功能

image.png

.item {
  display: flex;
  flex-direction: row;
  height: 60px;
  line-height: 60px;
  align-items: center;
}

.name {
  width: 20%;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.value {
  width: 80%;
  line-height: 60px;
  margin-left: 10px;
  font-size: 16px;
}

  data: {
    cities: [
      '北京市',
      '上海市',
      '天津市',
      '成都市',
      '重庆市'
    ],
    index: 0
  },
  bindPickerChange: function(e) {
    this.setData({
      index: e.detail.value
    });
  },

4.地址查询页面 这个点击要把相关参数传入下一个页面（有时间在优化）

image.png