購物車-小程序

 wxml部分

<!-- 最外層視圖pages -->
<view class="pages">
 
  <view wx:if="{{hasList}}">
  <!-- 編輯 -->
  <view class='edit'>
  <label class='edit_btn' bindtap='btn_edit'>{{edit_name}}</label>
  </view>
      <!-- 列表 -->
      <view class="list" wx:for="{{list}}" wx:key="{{index}}">
        <!-- radio選擇IOCN -->
        <!-- <icon wx:if="{{item.selected}}"   type="success" color="#405A8F;" data-index="{{index}}" class="radio_chek" bindtap="selectList" /> -->
        <image class='dele_edit' bindtap='deletes' data-index='{{index}}' style='display:{{edit_show}}' src='../../image/dele.png'></image>
        <image  wx:if="{{item.selected}}"  data-index="{{index}}" class="radio_chek" bindtap="selectList" src='../../image/radio_show.png'></image>
        <!-- <icon wx:else type="circle" class="radio_chek" data-index="{{index}}" bindtap="selectList" /> -->
<!-- else -->
                <image wx:else src='../../image/radio_none.png'  class="radio_chek" data-index="{{index}}" bindtap="selectList"></image>
        <!-- 列表標題 -->
        <text class="list_name">{{item.title}}</text>
        <!-- 列表商品圖片 -->
        <image class="list_img" src="{{item.image}}"></image>
        <!-- 規格 -->
        <text class="cart_g_name">規格 : {{item.pro_name}}</text>
        <!-- 收藏 -->
        <label class='collert' bindtap='btn_collert'>
          <image class='collert_img'src='../../image/shop_car/collert.png'></image> 收藏</label>
        <!-- 價格 -->
        <text class="list_price">￥{{item.price}}</text>
        <!-- 商品數量加減  style='display:{{show_edit}}'-->
        <view style='display:{{show_edit}}'>
        <view class="carts-num">
          <!--減按鈕  -->
          <lable class="minus" bindtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">-</lable>
          <!-- 文本框值 -->
          <!-- <input class="view_text_center" disabled='disabled' value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input> -->
          <label class="view_text_center"  bindinput='input_num' data-index="{{index}}">{{item.num}}</label>
          <!-- <text class="cart-count-num">{{item.num}}</text> -->
          <!-- 加按鈕-->
          <lable class="plus" bindtap="btn_add" data-index="{{index}}">+</lable>
        </view></view>
        <!-- 刪除 -->
        <!-- <text class="list_del" bindtap="deleteList" data-index="{{index}}">×</text> -->
    </view>
<!-- 固定底部 -->
    <view class="cont_bot">
    <!-- 全選ICON -->
    <image wx:if="{{selectAllStatus}}"  class="total-select" bindtap="selectAll" src='../../image/radio_show.png'></image>
 
      <!-- <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#999" class="total-select" bindtap="selectAll" /> -->
      <!-- else -->
          <image  wx:else  class="total-select" bindtap="selectAll"src='../../image/radio_none.png'></image>
      <!-- <icon wx:else type="circle" color="#999" class="total-select" bindtap="selectAll" /> -->
         <!-- 全選標題 -->
      <text class='sel_count_name'>全選</text>
      <!-- 合計金額 -->
      <lable class="count_price">合計：<text>￥{{totalPrice}}</text></lable>
      <!-- 提交訂單 -->
      <label class='submit' bindtap='btn_submit_order'>提交訂單</label>
      </view>
     
  </view>
  <view wx:else>
    <view class="list_none">購物車是空的哦~</view>
  </view>
 
</view>
 

wxss部分：

 
/* 列表 */
.list{
    position: relative;
   width: 100%;
    height: 185rpx;
    /* background-color: red; */
    border-bottom: 1rpx solid #e9e9e9;
}
/* 編輯 */
.edit{
  position: relative;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f6f6f6;
}
/* 刪除 */
.dele_edit{
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right: 30rpx;
  bottom: 25rpx;
}
/* 編輯標題 */
.edit_btn{
  position: absolute;
  font-size: 26rpx;
  color: #888;
  right: 30rpx;
}
/* 單選狀態 */
.radio_chek{
    position: absolute;
    left: 30rpx;
    top: 70rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 列表商品圖片 */
.list_img{
    position: absolute;
    top: 20rpx;
    left: 100rpx;
    width: 144rpx;
    height: 144rpx;
}
/* 列表規格 */
.cart_g_name{
  position: absolute;
  left: 280rpx;
  font-size: 26rpx;
  color: #aaa;
  top: 75rpx;
}
/* 收藏 */
.collert{
  position: absolute;
  font-size: 28rpx;
  right: 40rpx;
 top: 30rpx;
}
/* 收藏圖標 */
.collert_img{
  position: relative;
  top: 2rpx;
width: 28rpx;
height: 28rpx;
}
/* 列表商品名稱 */
.list_name{
  position: absolute;
  left: 280rpx;
  top: 30rpx;
  width: 300rpx;
  /* background-color: red; */
    font-size: 30rpx;
    overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;
}
/* 列表商品價格 */
 .list_price{
position: absolute;
font-size: 32rpx;
color:  #D66058;
left: 280rpx;
bottom: 20rpx;
}
 
/* 列表商品刪除 */
.list_del{
    position: absolute;
    right: 220rpx;
    bottom: 20rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 44rpx;
}
/* 固定底部 */
.cont_bot{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    line-height:104rpx;
    background: #fff;
    border-top: 2rpx solid #ebebeb;
}
/* 全選ICON */
.total-select{
    position: absolute;
    left: 30rpx;
    top: 34rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 全選標題 */
.sel_count_name{
  position: absolute;
  left: 90rpx;
  top: 6rpx;
  font-size: 30rpx;
  color: #333;
}
 
/* 合計金額 */
.count_price{
 position: absolute;
 font-size:28rpx;
 left: 200rpx;
 color: #aaa;
}
.count_price text{
  font-size: 34rpx;
  color: #D66058;
}
/* 購物車爲空 */
.list_none{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}
/* 提交 */
.submit{
position: absolute;
width: 232rpx;
height: 104rpx;
line-height: 104rpx;
right: 0rpx;
font-size: 30rpx;
text-align: center;
color:#fff;
background-color:#495A8F;
}
.navigator-hover{
    background: none;
}
 
 
 
 
/*數量加減*/
.carts-num{
  position: absolute;
  right: 30rpx;
  bottom: 23rpx;
  /* background-color: red; */
  display: flex; align-items: center; text-align: center; height: 50rpx;}
.view_text_center{border: 1rpx solid #ebebeb;font-size: 30rpx;  
display: inline-block;color: #333;height: 50rpx;line-height: 50rpx; width: 76rpx;}
.carts-num .minus, .carts-num .plus{margin: 10rpx; border: 1rpx solid #ebebeb;color: #000; text-align: center;height: 50rpx;  line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 34rpx;}
/* .carts-num .minus.disabled{color: red;} */
.carts-num .plus{font-size: 34rpx;}
 

 

js部分：

// page/component/new-pages/cart/cart.js
// 默認請求第一頁
var numbers = 1;
var bool=true;
Page({
  data: {
    show_edit: "block",
    edit_name:"編輯",
    edit_show: "none",
    // list: [],               // 購物車列表
    // hasList: false,          // 列表是否有數據
    // 默認展現數據
    hasList: true,
    // 商品列表數據
    list: [{
      id: 1,
      title: '園藝大師抗皺精華露',
      image: '../../image/shop_car/list_img.png',
      pro_name: "30ml",
      num: 1,
      price: 180,
      selected: true
    },
    {
      id: 2,
      title: '伊芙琳玫瑰護手霜',
      image: '../../image/shop_car/list_tab1.png',
      pro_name: "25g",
      num: 1,
      price: 62,
      selected: true
    },
    {
      id: 2,
      title: '燕麥山羊乳舒緩護手霜',
      image: '../../image/shop_car/list_tab2.png',
      pro_name: "75ml",
      num: 1,
      price: 175,
      selected: true
    }
    ],
    // 金額
    totalPrice: 0, // 總價，初始爲0
    // 全選狀態
    selectAllStatus: true, // 全選狀態，默認全選
  },
  
  onShow() {
    wx.showToast({
      title: '加載中',
      icon: "loading",
      duration: 1000
    })
 
    // 價格方法
    this.count_price();
  },
  /**
   * 當前商品選中事件
   */
  selectList(e) {
    var that=this;
    // 獲取選中的radio索引
    var index = e.currentTarget.dataset.index;
    // 獲取到商品列表數據
    var list = that.data.list;
    // 默認全選
    that.data.selectAllStatus = true;
// 循環數組數據，判斷----選中/未選中[selected]
    list[index].selected = !list[index].selected;
    // 若是數組數據所有爲selected[true],全選
    for (var i = list.length - 1; i >= 0; i--) {
      if (!list[i].selected) {
        that.data.selectAllStatus =false;
        break;
      }
    }
    // 從新渲染數據
    that.setData({
      list: list,
      selectAllStatus: that.data.selectAllStatus
    })
    // 調用計算金額方法
    that.count_price();
  },
  // 編輯
  btn_edit: function () {
    var that = this;
    if(bool){
      that.setData({
        edit_show: "block",
        edit_name: "取消",
        show_edit:"none"
      })
      bool=false;
    }else{
      that.setData({
        edit_show: "none",
        edit_name: "編輯",
        show_edit: "block"
      })
      bool = true;
    }
 
  },
  // 刪除
  deletes:function(e){
    var that=this;
    // 獲取索引
    const index = e.currentTarget.dataset.index;
    // 獲取商品列表數據
    let list = this.data.list;
    wx.showModal({
      title: '提示',
      content: '確認刪除嗎',
      success: function (res) {
        if (res.confirm) {
          // 刪除索引從1
          list.splice(index, 1);
          // 頁面渲染數據
          that.setData({
            list: list
          });
          // 若是數據爲空
          if (!list.length) {
            that.setData({
              hasList: false
            });
          } else {
            // 調用金額渲染數據
            that.count_price();
          }
        } else {
          console.log(res);
        }
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },
 
       
 
  /**
   * 購物車全選事件
   */
  selectAll(e) {
    // 全選ICON默認選中
    let selectAllStatus = this.data.selectAllStatus;
    // true  -----   false
    selectAllStatus = !selectAllStatus;
    // 獲取商品數據
    let list = this.data.list;
    // 循環遍歷判斷列表中的數據是否選中
    for (let i = 0; i < list.length; i++) {
      list[i].selected = selectAllStatus;
    }
    // 頁面從新渲染
    this.setData({
      selectAllStatus: selectAllStatus,
      list: list
    });
    // 計算金額方法
    this.count_price();
  },
 
  /**
   * 綁定加數量事件
   */
  btn_add(e) {
    // 獲取點擊的索引
    const index = e.currentTarget.dataset.index;
    // 獲取商品數據
    let list = this.data.list;
    // 獲取商品數量
    let num = list[index].num;
    // 點擊遞增
    num = num + 1;
    list[index].num = num;
    // 從新渲染 ---顯示新的數量
    this.setData({
      list: list
    });
    // 計算金額方法
    this.count_price();
  },
  canvas: function (object) {
    let _this = this;
    let realWidth, realHeight;
    //建立節點選擇器
    var query = wx.createSelectorQuery();
    //選擇id
    query.select('#mycanvas').boundingClientRect()
    query.exec(function (res) {
      //res就是 該元素的信息 數組
      realWidth = res[0].width;
      realHeight = res[0].height;
      console.log('realHeight', realHeight);
      console.log('realWidth', realWidth);
      const ctx = wx.createCanvasContext('mycanvas');
      ctx.drawImage("../../images/ctx-bg.jpg", 0, 0, realWidth, realHeight);
      ctx.drawImage(_this.data.canvasUserPic, (realWidth * 0.099), (realHeight * 0.052), (realWidth * 0.091), (realWidth * 0.091));
      ctx.setFontSize(12);
      ctx.setFillStyle("#a38874");
      ctx.fillText(object.date, (realWidth * 0.201), (realHeight * 0.076));
      ctx.setFontSize(14);
      ctx.setFillStyle("#a38874");
      ctx.fillText("農曆" + object.lunar, (realWidth * 0.201), (realHeight * 0.099));
      ctx.drawImage("../../images/swiper-bg.png", (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.60));
      ctx.drawImage(_this.data.canvasShowImg, (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.30));
      ctx.drawImage("../../images/swiper-detail.png", (realWidth * 0.099), (realHeight * 0.395), (realWidth * 0.8), (realHeight * 0.03));
      ctx.setFontSize(16);
      ctx.setFillStyle("#8d7665");
 
      ctx.setTextAlign('center')
      ctx.fillText(object.title1, realWidth / 2, _this.calculateWH(2, 620, realWidth, realHeight));
      ctx.fillText(object.title2, realWidth / 2, _this.calculateWH(2, 666, realWidth, realHeight));
 
      ctx.drawImage("../../images/swiper-line.png", (realWidth - realWidth * 0.71) / 2, (realHeight * 0.528), (realWidth * 0.71), (realHeight * 0.0195));
      ctx.drawImage("../../images/luckpic.png", _this.calculateWH(1, 267, realWidth, realHeight), _this.calculateWH(2, 763, realWidth, realHeight), _this.calculateWH(1, 204, realWidth, realHeight), _this.calculateWH(2, 60, realWidth, realHeight));
      ctx.setFontSize(12);
      ctx.fillText(object.luck_title, realWidth / 2, _this.calculateWH(2, 880, realWidth, realHeight));
      ctx.drawImage("../../images/code.jpg", _this.calculateWH(1, 229, realWidth, realHeight), _this.calculateWH(2, 989, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight))
      ctx.draw();
 
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            _this.setData({
              canvasUrl: tempFilePath
            })
            if (tempFilePath !== '') {
              _this.setData({
                isShowCav: false
              });
              wx.hideLoading();
              wx.previewImage({
                current: _this.data.canvasUrl, // 當前顯示圖片的http連接  
                urls: [_this.data.canvasUrl], // 須要預覽的圖片http連接列表  
              })
            }
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }, 500);
    })
  },//下載圖片
  onShow1: function (object) {
    let _this = this;
    _this.setData({
      isShowCav: true
    })
    wx.downloadFile({
      url: object.avatarurl,
      success: function (sres) {
        _this.setData({
          canvasUserPic: sres.tempFilePath
        });
        wx.downloadFile({
          url: object.show_img,
          success: function (sres1) {
            _this.setData({
              canvasShowImg: sres1.tempFilePath
            });
            _this.canvas(object);
          }
        })
      }
    })
  },  
  /**
   * 綁定減數量事件
   */
  btn_minus(e) {
    //   // 獲取點擊的索引
    const index = e.currentTarget.dataset.index;
    // const obj = e.currentTarget.dataset.obj;
    // console.log(obj);
    // 獲取商品數據
    let list = this.data.list;
    // 獲取商品數量
    let num = list[index].num;
    // 判斷num小於等於1  return; 點擊無效
    if (num <= 1) {
      return false;
    }
    // else  num大於1  點擊減按鈕  數量--
    num = num - 1;
    list[index].num = num;
    // 渲染頁面
    this.setData({
      list: list
    });
    // 調用計算金額方法
    this.count_price();
  },
  // 提交訂單
  btn_submit_order: function () {
    var that = this;
    console.log(that.data.totalPrice);
 
    // 調起支付
    // wx.requestPayment(
    //   {
    //     'timeStamp': '',
    //     'nonceStr': '',
    //     'package': '',
    //     'signType': 'MD5',
    //     'paySign': '',
    //     'success': function (res) { },
    //     'fail': function (res) { },
    //     'complete': function (res) { }
    //   })
    wx.showModal({
      title: '提示',
      content: '合計金額-' + that.data.totalPrice + "暫未開發",
    })
  },
  // 收藏
  btn_collert: function () {
    wx.showToast({
      title: '收藏暫未開發',
      duration: 2000
    })
  },
  /**
   * 計算總價
   */
  count_price() {
    // 獲取商品列表數據
    let list = this.data.list;
    // 聲明一個變量接收數組列表price
    let total = 0;
    // 循環列表獲得每一個數據
    for (let i = 0; i < list.length; i++) {
      // 判斷選中計算價格
      if (list[i].selected) {
        // 全部價格加起來 count_money
        total += list[i].num * list[i].price;
      }
    }
    // 最後賦值到data中渲染到頁面
    this.setData({
      list: list,
      totalPrice: total.toFixed(2)
    });
  },
  // 下拉刷新
  // onPullDownRefresh: function () {
  //   // 顯示頂部刷新圖標  
  //   wx.showNavigationBarLoading();
  //   var that = this;
 
  //   console.log(that.data.types_id);
  //   console.log(that.data.sel_name);
  //   wx.request({
  //     url: host + '請求後臺數據地址',
  //     method: "post",
  //     data: {
  //       // 刷新顯示最新數據
  //       page: 1,
  //     },
  //     success: function (res) {
 
  //       // console.log(res.data.data.datas);
  //       that.setData({
  //         list: res.data.data.datas
  //       })
  //     }
  //   })
 
  //   // 隱藏導航欄加載框  
  //   wx.hideNavigationBarLoading();
  //   // 中止下拉動做  
  //   wx.stopPullDownRefresh();
 
  // },
 
  // 加載更多
  // onReachBottom: function () {
  //   var that = this;
  //   // 顯示加載圖標  
  //   wx.showLoading({
  //     title: '正在加載中...',
  //   })
  //   numbers++;
 
  //   // 頁數+1  
  //   wx.request({
  //     url: host + '後臺數據地址',
  //     method: "post",
  //     data: {
  //     // 分頁
  //       page: numbers,
  //     },
  //     // 請求頭部  
  //     header: {
  //       'content-type': 'application/json'
  //     },
  //     success: function (res) {
  //       // 回調函數 
 
  //       var num = res.data.data.datas.length;
  //       // console.log(num);
  //       // 判斷數據長度若是不等於0，前臺展現數據，false顯示暫無訂單提示信息
  //       if (res.data.data.status == 0) {
 
  //         for (var i = 0; i < res.data.data.datas.length; i++) {
  //           that.data.list.push(res.data.data.datas[i]);
  //         }
  //         // 設置數據  
  //         that.setData({
  //           list: that.data.list
  //         })
 
  //       } else {
  //         wx.showToast({ title: '沒有更多了', icon: 'loading', duration: 2000 })
  //       }
 
 
  //       // 隱藏加載框  
  //       wx.hideLoading();
  //     }
  //   })
 
  // },
 
})