一步一步实现商城微信小程序（四）

订单页面

需要用到js交互

首先在json文件中将页面的标题修改为“购物车”

data: {
    'goodList': [
      {
        'name': '孤独是生命的礼物',
        'author': '余光中，林清玄，白先勇 等 著',
        'isbn': '9787535482051',
        'cover': '/images/cover_1.jpg',
        'desc': '缅怀乡愁诗人余光中。余光中、林清玄、白先勇联手巨献，重温经典，送别先生。总有一天，你会明白，孤独才是生命的常态。一部直击现代人孤独的精神献礼。中国散文协会推荐！',
        'press': '长江文艺出版社',
        'price': 25.9,
        'count': 1,
        'checked': false
      },
      {
        'name': '偷影子的人',
        'author': '[法] 马克·李维 著；段韵灵 译',
        'isbn': '9787540455958',
        'cover': '/images/cover_2.jpg',
        'desc': '数百万中文读者口口相传外国文学畅销经典',
        'press': ' 湖南文艺出版社',
        'price': 20.5,
        'count': 1,
        'checked': false
      },
      {
        'name': '无声告白',
        'author': '[美] 伍绮诗 著；孙璐 译',
        'isbn': '9787539982830',
        'cover': '/images/cover_3.jpg',
        'desc': '我们终此一生，就是要摆脱他人的期待，找到真正的自己。',
        'press': ' 江苏凤凰文艺出版社',
        'price': 24.1,
        'count': 1,
        'checked': false
      },
      {
        'name': '摆渡人',
        'author': '[英] 克莱儿·麦克福尔 著；付强 译',
        'isbn': '9787550013247',
        'cover': '/images/cover_4.jpg',
        'desc': '或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。',
        'press': ' 百花洲文艺出版社',
        'price': 17.2,
        'count': 1,
        'checked': false
      },
      {
        'name': '追风筝的人',
        'author': '[美] 卡勒德·胡赛尼 著；李继宏 译',
        'isbn': '9787208061644',
        'cover': '/images/cover_5.jpg',
        'desc': '快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物。为你，千千万万遍！',
        'press': '上海人民出版社',
        'price': 17.7,
        'count': 1,
        'checked': false
      }
    ],
    'checkAll': false,
    'totalCount': 0,
    'totalPrice': 0
  },

之后将上面data中的json数据复制到js文件的data目录下，用来模拟购物车中国呢显示的数据，在实际开发中，我们用到的基本都是网络请求数据

之后 我们来编写页面

首先我们在wxss文件中设置一个最外层的样式

.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

并且在wxml最外层的view中引用class属性 

除此之外还有 每一个条目 ，单选框样式

.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.section {
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-bottom: 30rpx;
}

.section-good {
  margin-bottom: 100rpx;
}

.good {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 250rpx;
  border-bottom: 1px solid #ccc;
}

.good:last-child {
  border-bottom: none;
}

.checkbox {
  width: 48rpx;
  height: 48rpx;
}

 加减号，字体等样式

.cover {
  width: 142rpx;
  height: 214rpx;
  margin-left: 20rpx;
}

.content {
  flex: 1;
  margin-left: 20rpx;
}

.content .text {
  color: #363636;
  width: 450rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content .name {
  color: #333;
  font-size: 36rpx;
}

.content .author {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .desc {
  color: #363636;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.content .press {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .price {
  font-size: 36rpx;
  color: #e4452a;
  margin-top: 10rpx;
}

.good .stepper {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 20rpx;
  flex-direction: row;
  text-align: center;
}

.stepper .add, .stepper .subtract {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.stepper .disabled {
  color: #eee;
}

.stepper .count {
  width: 60rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
  min-height: 1rem;
  font-size: 28rpx;
}

.section-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 99;
}

.section-bottom .btn {
  width: 160rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fdfffd;
  background-color: #fbb304;
}

.section-bottom .btn-default {
  color: #363636;
  background-color: #eee;
}

.section-bottom .btn-primary {
  color: #fdfffd;
  background-color: #fbb304;
}

.section-bottom .checkbox-allcheck {
  display: inline-block;
  margin-left: 30rpx;
  vertical-align: top;
  font-size: 0px;
}

.section-bottom .check-all-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 10rpx;
  height: 23px;
  line-height: 23px;
  font-size: 28rpx;
}

.section-bottom .total {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
}

.total .totalCount {
  font-size: 26rpx;
  display: inline-block;
  vertical-align: middle;
}

.total .totalPrice {
  display: inline-block;
  font-size: 26rpx;
  margin-left: 20rpx;
  vertical-align: middle;
}

.total .totalCount text {
  color: #e4452a;
  vertical-align: middle;
}

.total .totalPrice text {
  color: #e4452a;
  font-size: 36rpx;
  vertical-align: middle;
}

全部设置完成之后，在wxml中引用 并且引用js中data的数据，和绑定点击事件

<view class='container'>
  <view class='section section-good'>
    <checkbox-group bindchange="checkboxChange">
      <view class='good' wx:for='{{goodList}}' wx:for-item="good" wx:key="good.name">
        <label class="checkbox">
          <checkbox value="{{good.isbn}}" checked="{{good.checked}}" hidden='hidden' />
          <icon type="circle" size="23" wx:if="{{!good.checked}}"></icon>
          <icon type="success" size="23" wx:if="{{good.checked}}"></icon>
        </label>
        <image class='cover' src='{{good.cover}}'></image>
        <view class='content'>
          <view class='text name'>{{good.name}}</view>
          <view class='text author'>{{good.author}}</view>
          <view class='text desc'>{{good.desc}}</view>
          <view class='text price'>¥{{good.price}}</view>
        </view>
        <view class='stepper'>
          <view class='subtract {{good.count == 1 ? "disabled": ""}}' data-index='{{index}}' catchtap='subtracttap'>-</view>
          <input class='count' type='number' value='{{good.count}}'></input>
          <view class='add' data-index="{{index}}" catchtap='addtap'>+</view>
        </view>
      </view>
    </checkbox-group>
  </view>
  <view class='section-bottom'>
    <checkbox-group bindchange="selectalltap">
      <label class='checkbox-allcheck'>
        <checkbox value="{{!checkAll}}" checked="{{checkAll}}" hidden='hidden' />
        <icon type="circle" size="23" wx:if="{{!checkAll}}"></icon>
        <icon type="success" size="23" wx:if="{{checkAll}}"></icon>
        <text class='check-all-text'>全选</text>
      </label>
    </checkbox-group>
    <view class="total">
      <view class='totalCount'>已选择
        <text>{{totalCount}}</text>件商品
      </view>
      <view class='totalPrice'>总价：
        <text>¥{{totalPrice}}</text>
      </view>
    </view>
    <view class='btn {{totalCount > 0 ? "btn-primary" : "btn-default"}}'>去结算</view>
  </view>
</view>

在wxml中我们绑定了一下几个点击事件

subtracttap 用户点击减号

addtap 用户点击加号

checkboxChange 商品单选按钮的点击

selectalltap  点击全选

之后 我们在js文件中对这些点击事件进行处理，并且添加其他操作

.js

// pages/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    'goodList': [
      {
        'name': '孤独是生命的礼物',
        'author': '余光中，林清玄，白先勇 等 著',
        'isbn': '9787535482051',
        'cover': '/images/cover_1.jpg',
        'desc': '缅怀乡愁诗人余光中。余光中、林清玄、白先勇联手巨献，重温经典，送别先生。总有一天，你会明白，孤独才是生命的常态。一部直击现代人孤独的精神献礼。中国散文协会推荐！',
        'press': '长江文艺出版社',
        'price': 25.9,
        'count': 1,
        'checked': false
      },
      {
        'name': '偷影子的人',
        'author': '[法] 马克·李维 著；段韵灵 译',
        'isbn': '9787540455958',
        'cover': '/images/cover_2.jpg',
        'desc': '数百万中文读者口口相传外国文学畅销经典',
        'press': ' 湖南文艺出版社',
        'price': 20.5,
        'count': 1,
        'checked': false
      },
      {
        'name': '无声告白',
        'author': '[美] 伍绮诗 著；孙璐 译',
        'isbn': '9787539982830',
        'cover': '/images/cover_3.jpg',
        'desc': '我们终此一生，就是要摆脱他人的期待，找到真正的自己。',
        'press': ' 江苏凤凰文艺出版社',
        'price': 24.1,
        'count': 1,
        'checked': false
      },
      {
        'name': '摆渡人',
        'author': '[英] 克莱儿·麦克福尔 著；付强 译',
        'isbn': '9787550013247',
        'cover': '/images/cover_4.jpg',
        'desc': '或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。',
        'press': ' 百花洲文艺出版社',
        'price': 17.2,
        'count': 1,
        'checked': false
      },
      {
        'name': '追风筝的人',
        'author': '[美] 卡勒德·胡赛尼 著；李继宏 译',
        'isbn': '9787208061644',
        'cover': '/images/cover_5.jpg',
        'desc': '快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物。为你，千千万万遍！',
        'press': '上海人民出版社',
        'price': 17.7,
        'count': 1,
        'checked': false
      }
    ],
    'checkAll': false,
    'totalCount': 0,
    'totalPrice': 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.calculateTotal();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 计算商品总数
   */
  calculateTotal: function () {
    var goodList = this.data.goodList;
    var totalCount = 0;
    var totalPrice = 0;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      if (good.checked) {
        totalCount += good.count;
        totalPrice += good.count * good.price;
      }
    }
    totalPrice = totalPrice.toFixed(2);
    this.setData({
      'totalCount': totalCount,
      'totalPrice': totalPrice
    })
  },

  /**
   * 用户点击商品减1
   */
  subtracttap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    if (count <= 1) {
      return;
    } else {
      goodList[index].count--;
      this.setData({
        'goodList': goodList
      });
      this.calculateTotal();
    }
  },

  /**
   * 用户点击商品加1
   */
  addtap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    goodList[index].count++;
    this.setData({
      'goodList': goodList
    });
    this.calculateTotal();
  },
  /**
   * 用户选择购物车商品
   */
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value);
    var checkboxItems = this.data.goodList;
    var values = e.detail.value;
    for (var i = 0; i < checkboxItems.length; ++i) {
      checkboxItems[i].checked = false;
      for (var j = 0; j < values.length; ++j) {
        if (checkboxItems[i].isbn == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }

    var checkAll = false;
    if (checkboxItems.length == values.length) {
      checkAll = true;
    }

    this.setData({
      'goodList': checkboxItems,
      'checkAll': checkAll
    });
    this.calculateTotal();
  },

  /**
   * 用户点击全选
   */
  selectalltap: function (e) {
    console.log('用户点击全选，携带value值为：', e.detail.value);
    var value = e.detail.value;
    var checkAll = false;
    if (value && value[0]) {
      checkAll = true;
    }

    var goodList = this.data.goodList;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      good['checked'] = checkAll;
    }

    this.setData({
      'checkAll': checkAll,
      'goodList': goodList
    });
    this.calculateTotal();
  }


})

以上就实现了 单选，计算总价，等功能