仿京东购物微信小程序

2019年12月28日

一.首页略

image.png

二.通用搜索界面

1.搜索框设置

image.png

.search {
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.searchBg {
  background-color: #e8e8ed;
  width: 80%;
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
}

.searchBg image {
  margin-left: 10px;
  margin-top: 5px;
}

.search input {
  height: 30px;
  line-height: 30px;
}

.holder {
  font-size: 13px;
}

.btn {
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  margin-left: 10px;
  border: 1px solid #ccc;
  width: 50px;
  text-align: center;
  background-color: #e8e8ed;
  border-radius: 3px;
}

2.输入内容后样式

image.png

Page({
  data: {
    result: [],
    name: ''
  },
  loadGoods: function() {
    var goods = ['奶粉成人', '奶粉3段', '奶粉1段', '奶粉2段', '奶粉京东自营', '奶粉4段', '奶粉盒', '咖啡机', '咖啡杯', '咖啡豆', '咖啡伴侣', '咖啡机家用'];
    return goods;
  },
  searchGoods: function(e) {
    var name = e.detail.value;
    var goods = this.loadGoods();
    var result = new Array();
    if (name != '') {
      for (var i = 0; i < goods.length; i++) {
        var good = goods[i];
        if (good.indexOf(name) > -1) {
          result.push(good);
        }
      }
    }
    this.setData({
      result: result
    });
  },
  resetSearch: function() {
    var result = new Array();
    this.setData({
      result: result,
      name: ''
    });
  }
})

如果有搜索记录返回，用如下样式

image.png

三.购物车页面

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

1.列表界面

image.png

.item {
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;
}

.order {
  width: 100%;
  height: 87px;
}

.title {
  font-size: 15px;
}

.desc {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  color: #ccc;
}

.desc view {
  margin-right: 10px;
}

.priceInfo {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.price {
  width: 65%;
  font-size: 15px;
  color: #f00;
  text-align: left;
}

.minus, .add {
  border: 1px solid #ccc;
  width: 25px;
  text-align: center;
}

.count {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 40px;
  text-align: center;
}

2.总计模块

image.png

.totalInof {
  display: flex;
  flex-direction: row;
  height: 60px;
}

.all {
  align-items: center;
  padding-left: 10px;
  width: 20%;
  font-size: 12px;
  margin-top: 10px;
}

.amount {
  width: 50%;
  font-size: 13px;
  text-align: right;
}

.total {
  font-size: 16px;
  color: #f00;
  font-weight: bold;
  margin-bottom: 10px;
}

.opr {
  position: absolute;
  right: 0px;
  width: 92px;
  background-color: #e4393c;
  font-size: 15px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

3.按钮点击逻辑模块 【可以在model里定义一个选中属性select，有时间修改】

Page({
  data: {
    goods: [],
    selected: true,
    selectedAll: true,
    totalPrice: 0
  },
  onLoad: function() {
    this.loadGoods();
  },
  loadGoods: function() {
    var goods = wx.getStorageSync("goods");
    console.log('goods'+goods);
    var totalPrice = 0;
    for (var i = 0; i < goods.length; i++) {
      var good = goods[i];
      totalPrice += good.price * good.count;
    }
    this.setData({
      goods: goods,
      totalPrice: totalPrice
    });
  },
  checkboxChange: function(e) {
    var ids = e.detail.value;
    if (ids.length == 0) {
      this.setData({
        selectedAll: false,
        totalPrice: 0
      });
    } else {
      var goods = wx.getStorageSync("goods");
      var totalPrice = 0;
      for (var i = 0; i < goods.length; i++) {
        var good = goods[i];
        for (var j = 0; j < ids.length; j++) {
          if (good.id == ids[j]) {
            totalPrice += good.price * good.count;
          }
        }
      }
      this.setData({
        selectedAll: true,
        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
      });
    } else {
      this.loadGoods();
    }
  },
  addGoods: function(e) {
    var id = e.currentTarget.id;
    var goods = wx.getStorageSync("goods");
    var addGoods = new Array();
    for (var i = 0; i < goods.length; i++) {
      var good = goods[i];
      if (good.id == id) {
        good.count = good.count + 1;
      }
      addGoods.push(good);
    }
    wx.setStorageSync("goods", addGoods);
    this.loadGoods();
  },
  minusGoods: function(e) {
    var id = e.currentTarget.id;
    var goods = wx.getStorageSync("goods");
    var addGoods = new Array();
    for (var i = 0; i < goods.length; i++) {
      var good = goods[i];
      if (good.id == id) {
        var count = good.count;
        if (count >= 2) {
          good.count = good.count - 1;
        }
      }
      addGoods.push(good);
    }
    wx.setStorageSync("goods", addGoods);
    this.loadGoods();
  }
})

四.我的订单模块

image.png

1.通用固定tab切换样式

image.png

.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}

.menu view {
  margin: 0 auto;
}

.select {
  font-size: 15px;
  color: red;
  width: 33%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-bottom: 5rpx solid red;
}

.default {
  width: 33%;
  font-size: 15px;
  text-align: center;
  height: 45px;
  line-height: 45px;
}

2.底部切换部分，可以用swiper做。也可以用block if else 做 ，此处略

image.png