微信小程序空购物车灰色扫商品条码设计制作开发教程

本文给大家带来的是微信小程序空购物车灰色扫商品条码设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="main">
    <view wx:if="{{hasList}}">
        <view class="cart-box">
            <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
                <icon wx:if="{{item.selected}}" type="success" color="#FF8601" data-index="{{index}}"  class="cart-pro-select" bindtap="selectList"/>
                <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
                <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"></image></navigator>
                <text class="cart-pro-name">{{item.title}}</text>
                <text class="cart-pro-price">￥{{item.price}}</text>
                <view class="cart-count-box">
                    <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
                    <text class="cart-count-num">{{item.num}}</text>
                    <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
                </view>
                <image class="cart-del" bindtap="deleteList" data-index="{{index}}" src="/image/del.png"></image>
            </view>
        </view>
<image class="saoyisaofoot" bindtap="scanCode"  src="../../image/saoyisao.png"></image>
        <view class="cart-footer">
            <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#FF8601" class="total-select" bindtap="selectAll"/>
            <icon wx:else type="circle" color="#FF8601" class="total-select" bindtap="selectAll"/>
            <view class="order-icon" bindtap="pay">
               去结算
            </view>
            <text class='hei'>全选</text>
            <text class="cart-toatl-price">￥{{totalPrice}}</text>
        </view>
    </view>
    <view wx:else>
    <view class="container">
    <image class="ku" src="../../image/ku.png"></image>
      <view class="page-body">
      <view class="classname">
        <text>购物车还是空的...</text>
        </view>
        <view class="btn-area" >
        
        <image wx:if="{{saoyisao}}" class="saoyisao" bindtap="scanCode"  src="../../image/saoyisao.png"></image>
        <image wx:else class="saoyisao" src="../../image/huisaoyisao.png"></image>
        </view>
      </view>
    </view>
    </view>
</view>

二、wxss样式文件代码如下：


.cart-box{
    padding-bottom: 100rpx;
}
.cart-list{
    position: relative;
    padding: 20rpx 20rpx 20rpx 285rpx;
    height: 185rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.cart-list .cart-pro-select{
    position: absolute;
    left: 20rpx;
    top: 82rpx;
    color: #000;
    width: 45rpx;
    height: 45rpx;
}

.cart-list .cart-thumb{
    position: absolute;
    top: 20rpx;
    left: 85rpx;
    width: 185rpx;
    height: 185rpx;
}
.cart-list .cart-pro-name{
    display: inline-block;
    width: 300rpx;
    height: 105rpx;
    line-height: 50rpx;
    overflow: hidden;
    font-size:26rpx; 
}
.cart-list .cart-pro-price{
    display: inline-block;
    float: right;
    color: #FF8601;
    height: 105rpx;
    line-height: 50rpx;
}
.cart-list .cart-count-box{
    position: absolute;
    left: 285;
    bottom: 20rpx;
    width: 250rpx;
    height: 80rpx;
}
.cart-list .cart-count-box text{
  font-size:42rpx; 
    display: inline-block;
    line-height: 80rpx;
    text-align: center;
}
.cart-count-down,.cart-count-add{
    font-size: 44rpx;
    width: 50rpx;
    height: 100%;
}
.cart-count-num{
    width: 150rpx;
}
.cart-del{
    position: absolute;
    right: 30rpx;
    bottom:40rpx;
    width: 25.5px;
    height: 31.5px;
    line-height: 80rpx;
    text-align: center;
    font-size: 44rpx;
}
.cart-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    padding:0 200rpx 0 80rpx;
    box-sizing: border-box;
    background: #fff;
    color: #FF8601;
    border-top: 1px #E2E2E2 solid;
    border-bottom: 1px #E2E2E2 solid;
    
}
.total-select{
    position: absolute;
    left: 20rpx;
    top: 25rpx;
    width: 45rpx;
    height: 45rpx;
}
.order-icon{
    position:absolute;
    right:30rpx;
    padding-left:20px;
    padding-right:20px;
    height:70rpx;
    font-size:24rpx;
    background:#FF8601;
    color:#fff;
    line-height:70rpx;
    top:10rpx;
    border-radius:5px;
}
.order-icon image,.order-icon navigator{
  display: block;
  width: 45rpx;
  height: 45rpx;
}
.cart-toatl-price{
    float: right;
    width: 120rpx;
}

.cart-no-data{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}

.saoma{  
  height: 40px;  
  width:110px;  
  line-height: 40px;  
  margin-left: auto;  
  margin-right: auto;  
  color: #fff;  
  background-color: #999;  
  text-align: center;  
}  
.show{  
  width: 100%;  
  color: #666;  
  background-color: #fff;  
  height: auto;  
  
}
.ku{  
  width: 110px;  
  height: 114.5px;
  margin-left: auto;  
  margin-right: auto;  
}
.saoyisao{
  width: 290.5px;
 height: 44.5px;
 margin-left: auto;  
 margin-right: auto;  
}
.saoyisaofoot{
  margin-left:15vw;
  width: 70vw;
  height: 10.74vw;
  position:fixed;
  bottom: 135rpx;
}
.classname{
  height: 100%;
  width: 100%;
  margin-top:40px;  
  margin-bottom:40px;  
  display:flex;
  flex-direction:column;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}
.hei{
  color: #333333;
}

三、js页面代码如下：

// page/component/new-pages/cart/cart.js

Page({
  data: {
    carts: getApp().data.carts  ,               // 购物车列表
    hasList: getApp().data.hasList  ,          // 列表是否有数据
    totalPrice:0,           // 总价，初始为0
    selectAllStatus:true,    // 全选状态，默认全选
    saoyisao: false,    // 是否能扫码
    obj:{
        name:"hello"
    }
  },
  scanCode: function () {
    var that = this
    wx.scanCode({
      success: function (res) {


        wx.request({
          url: "https://erp.mod-softs.com/wxapi.php",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
          data: { fun: "findGoodsByNo", customerNo: getApp().data.customerNo, goodsNo: res.result },
          complete: function (res) {

            if (res == null || res.data == null) {
              console.error('网络请求失败');
              that.setData({
                count: 1500,
                toastText: '网络请求失败',
                isShowToast: true
              });
              that.showToast();
              return;
            }
            if (res.data.success == 0) {
              that.setData({
                count: 1500,
                toastText: '没有找到该商品',
                isShowToast: true
              });
              that.showToast();
              return;
            }
            getApp().data.goodsNo = res.data.goodsNo

            for (var i = 0; i < getApp().data.carts.length; i++) {
              if (getApp().data.carts[i].id == res.data.goodsNo) {
                getApp().data.carts[i].num = getApp().data.carts[i].num + 1;
                wx.showToast({
                  title: '已添加购物车',
                  icon: 'success',
                  duration: 2000
                })
                return;
              }
            }

            //保存商品编码，全局变量
            var newarray = [
              {
                id: res.data.goodsNo, title: res.data.name, image: res.data.img, num: 1, price: res.data.price, selected: true, customerNo: res.data.customerNo, goodsNo: res.data.goodsNo
              }
            ]
            getApp().data.carts = getApp().data.carts.concat(newarray);
            getApp().data.hasList = true
            wx.showToast({
              title: '已添加购物车',
              icon: 'success',
              duration: 2000
            })

            that.setData({
              carts: getApp().data.carts,
              hasList: getApp().data.hasList
            });
            that.getTotalPrice();

          }
        })


      },
      fail: function (res) {
      }
    })


  },
  pay: function () {
    var that = this
    var m = that.data.totalPrice;
    var arr = [
      {
        userId: getApp().data.openId
      },
      {
        goodsAmount: m
      },
      {
        carts: getApp().data.carts
      }
    ]
    var json = JSON.stringify(arr);
    wx.request({
      url: "https://erp.mod-softs.com/wxapi.php",
             header: {
               "Content-Type": "application/x-www-form-urlencoded"
             },
      method: "POST",
      data: { fun: "addOrder", json: json},
      success: function (response) {
        console.log(response.data);
        // 发起支付  
        wx.requestPayment({
          'appId': response.data.appId,
          'timeStamp': response.data.timeStamp,
          'nonceStr': response.data.nonceStr,
          'package': response.data.package,
          'signType': 'MD5',
          'paySign': response.data.paySign,
          'success': function (res) {
            wx.showToast({
              title: '支付成功'
            });
            wx.request({
              url: "https://erp.mod-softs.com/wxapi.php?Notify=1",
              header: {
                "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              data: { paySign: response.data.paySign },
              success: function (r) {

              }
            });
            getApp().data.carts = []
            getApp().data.hasList = false
            that.setData({
               carts: getApp().data.carts,               // 购物车列表
               hasList: getApp().data.hasList
            });
            that.getTotalPrice();
            console.log(res);
          },
          'fail': function (res) {
            console.log(res)
          }
        });
      }
    })
      //wx.showModal({
      // title: '支付提示',
      // content: m+'元',
      // success: function (res) {
      //   if (res.confirm) {

      //     wx.request({
      //       url: "https://erp.mod-softs.com/wxapi.php",
      //       header: {
      //         "Content-Type": "application/x-www-form-urlencoded"
      //       },
      //       method: "POST",
      //       data: { fun: "addOrder", json: json},
      //       complete: function (res) {

      //         wx.showToast({
      //           title: "支付成功",
      //           icon: 'success',
      //           duration: 2000
      //         })

      //         if (res == null || res.data == null) {
      //           console.error('网络请求失败');
      //           that.setData({
      //             count: 1500,
      //             toastText: '网络请求失败',
      //             isShowToast: true
      //           });
      //           that.showToast();
      //           return;
      //         }
      //       }
      //     })
      //     getApp().data.carts = []
      //     getApp().data.hasList = false
      //     that.setData({
      //       carts: getApp().data.carts,               // 购物车列表
      //       hasList: getApp().data.hasList
      //     });
      //     that.getTotalPrice();
      //     console.log('用户点击确定')
      //   }
      // }
      
      //})


  },
 onShow(){
    this.setData({
      carts: getApp().data.carts,               // 购物车列表
      hasList: getApp().data.hasList,
      saoyisao: getApp().data.cartsao,
    });
    this.getTotalPrice();
  },
  /**
   * 当前商品选中事件
   */
  selectList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    const selected = carts[index].selected;
    carts[index].selected = !selected;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },

  /**
   * 删除购物车当前商品
   */
  deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = getApp().data.carts;
    carts.splice(index,1);
    getApp().data.carts = carts;
    this.setData({
      carts: getApp().data.carts
    });
    if(!carts.length){
      getApp().data.hasList = false
      this.setData({
        hasList: false
      });
    }else{
      this.getTotalPrice();
    }
  },

  /**
   * 购物车全选事件
   */
  selectAll(e) {
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    let carts = this.data.carts;

    for (let i = 0; i < carts.length; i++) {
      carts[i].selected = selectAllStatus;
    }
    this.setData({
      selectAllStatus: selectAllStatus,
      carts: carts
    });
    this.getTotalPrice();
  },

  /**
   * 绑定加数量事件
   */
  addCount(e) {
    const index = e.currentTarget.dataset.index;
    let carts = getApp().data.carts;
    let num = carts[index].num;
    num = num + 1;
    carts[index].num = num;
    getApp().data.carts = carts;
    this.setData({
      carts: getApp().data.carts
    });
    this.getTotalPrice();
  },

  /**
   * 绑定减数量事件
   */
  minusCount(e) {
    const index = e.currentTarget.dataset.index;
    const obj = e.currentTarget.dataset.obj;
    let carts = getApp().data.carts
    let num = carts[index].num;
    if(num <= 1){
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    getApp().data.carts = carts
    this.setData({
      carts: getApp().data.carts
    });
    this.getTotalPrice();
  },

  /**
   * 计算总价
   */
  getTotalPrice() {
    let carts = this.data.carts;                  // 获取购物车列表
    let total = 0;
    for(let i = 0; i<carts.length; i++) {         // 循环列表得到每个数据
      if(carts[i].selected) {                     // 判断选中才会计算价格
        total += carts[i].num * carts[i].price;   // 所有价格加起来
      }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
      carts: carts,
      totalPrice: total.toFixed(2)
    });
  }
 
})
// 可以使用的支付代码
// wx.request({
//   url: 'https://erp.mod-softs.com/pay.php',
//   header: {
//     'Content-Type': 'application/x-www-form-urlencoded'
//   },
//   data: {
//     code: getApp().data.openId,
//   },
//   method: 'POST',
//   success: function (response) {
//     console.log(response.data);
//     // 发起支付  
//     wx.requestPayment({
//       'appId': response.data.appId,
//       'timeStamp': response.data.timeStamp,
//       'nonceStr': response.data.nonceStr,
//       'package': response.data.package,
//       'signType': 'MD5',
//       'paySign': response.data.paySign,
//       'success': function (res) {
//         wx.showToast({
//           title: '支付成功'
//         });
//         console.log(res);
//       },
//       'fail': function (res) {
//         console.log(res)
//       }
//     });
//   }
// })

模板简介：该模板名称为【微信小程序空购物车灰色扫商品条码设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。