小程序实现购物车完整版

<view wx:if="{{hasList}}">  <view class="order_list">    <view class="order" wx:for="{{list}}" wx:key="{{index}}">      <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">        <image src="/images/serch/xuanze.png" />      </view>      <view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>        <image src="/images/serch/gouxuan.png" />      </view>      <!--列表商品图片-->      <view class="order_img">        <image src="{{item.image}}" />      </view>      <view class="order_text">        <view class="text_top">          <!--列表标题-->          <view class="title">{{item.title}}</view>          <view class="detel" catchtap="deletes" data-index="{{index}}">            <image src="/images/serch/detel.png" />          </view>        </view>        <!--规格-->        <view class="size">规格：{{item.pro_name}}</view>        <view class="text_bottom">          <!--价格-->          <view class="money">￥{{item.price}}</view>          <!--商品数量加减-->          <view class="number">            <!--减按钮-->            <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">              <!--按钮图片-->              <image src="/images/serch/jian-1.png" />            </view>            <!--数量-->            <view class="numb">{{item.num}}</view>            <!--加按钮-->            <view class="add" catchtap="btn_add" data-index="{{index}}">              <!--按钮图片-->              <image src="/images/serch/add-1.png" />            </view>          </view>        </view>      </view>    </view>  </view>  <!--固定底部-->  <view class="buy">    <view class="buy_top">      <view class="top_left">        <view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">          <image src="/images/serch/gouxuan.png" />        </view>        <view class="left_img" catchtap="selectAll" wx:else>          <image src="/images/serch/gouxuan.png" />        </view>        <view class="left_name">全选</view>      </view>      <view class="top_left">        <view class="left_img">          <image src="/images/serch/fenxiang.png" />        </view>        <view class="left_name">分享</view>      </view>    </view>    <view class="buy_bottom">      <view class="buy_left">        <view class="heji">合计：￥{{totalPrice}}</view>      </view>      <view class="buy_right">        <!--提交订单-->        <view class="liji " catchtap="btn_submit_order">立即购买</view>        <view class="liji two active">预约试衣</view>      </view>    </view>  </view></view><!--购物车没订单--><view wx:else>  <view class="list_none">购物车是空的哦~</view></view>

page {  background-color: rgba(238, 238, 238, 0.5);}.order {  height: 238rpx;  background-color: #fefeff;  margin: 27rpx;  border-radius: 4rpx;  display: flex;  align-items: center;}.xuanze {  width: 40rpx;  height: 40rpx;  /* background-color: darkgoldenrod; */  border-radius: 50%;  margin: 0 11rpx;}.xuanze image {  width: 100%;  height: 100%;  display: block;  border-radius: 50%;}.order_img {  width: 180rpx;  height: 180rpx;}.order_img image {  width: 100%;  height: 100%;  display: block;}.order_text {  margin-left: 20rpx;  width: 58%;  height: 180rpx;}.text_top {  display: flex;  justify-content: space-between;  align-items: center;}.title {  width: 70%;  font-size: 28rpx;  color: #4b5248;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1;  overflow: hidden;}.detel {  width: 30rpx;  height: 30rpx;}.detel image {  width: 100%;  height: 100%;  display: block;}.size {  font-size: 24rpx;  color: #a8ada6;}.text_bottom {  display: flex;  margin-top: 50rpx;  align-items: center;  justify-content: space-between;}.money {  font-size: 30rpx;  color: #a5937f;}.number {  display: flex;  justify-content: space-around;  align-items: center;  width: 170rpx;}.reduce {  width: 46rpx;  height: 46rpx;}.reduce image {  width: 100%;  height: 100%;  display: block;}.numb {  font-size: 30rpx;  color: #a5937f;}.add {  width: 46rpx;  height: 46rpx;}.add image {  width: 100%;  height: 100%;  display: block;}/*购买按钮*/.buy {  height: 180rpx;  width: 696rpx;  position: fixed;  left: 27rpx;  bottom: 41rpx;  background-color: #555555f3;  border-radius: 4rpx;}.buy_top {  border-bottom: 1px solid rgb(98, 98, 99);  height: 75rpx;  display: flex;  align-items: center;  justify-content: space-between;}.top_left {  display: flex;  align-items: center;}.left_img {  width: 37rpx;  height: 37rpx;  margin: 11rpx;}.left_img image {  width: 100%;  height: 100%;  display: block;}.left_name {  font-size: 24rpx;  color: #fefeff;  margin-right: 29rpx;}.buy_bottom {  display: flex;  height: 104rpx;  justify-content: space-between;  align-items: center;  padding: 0rpx 30rpx 0rpx 12rpx;}.buy_left {  font-size: 26rpx;  color: #fff;}.buy_right {  display: flex;  align-items: center;}.liji {  width: 180rpx;  height: 70rpx;  border: 2rpx solid rgba(248, 248, 248, 1);  box-sizing: border-box;  border-radius: 4rpx;  line-height: 70rpx;  text-align: center;  font-size: 26rpx;  color: #FEFEFF;}.two{  margin-left: 12rpx;}.active{  background-color: #A5937F;  border: none;}

Page({  /**   * 页面的初始数据   */  data: {    hasList: true, //默认展示列表数据    //商品列表数据    list: [{        id: 1,        title: '园艺大师抗皱精华露',        image: '/images/serch/2.png',        pro_name: "30ml",        num: 1,        price: 180,        selected: true      },      {        id: 2,        title: '伊芙琳玫瑰护手霜',        image: '/images/serch/1.png',        pro_name: "25g",        num: 1,        price: 62,        selected: true      },      {        id: 2,        title: '燕麦山羊乳舒缓护手霜',        image: '/images/serch/2.png',        pro_name: "75ml",        num: 1,        price: 175,        selected: true      }    ],    //金额    totalPrice: 0, //总价，初始为0    //全选状态    selectAllStatus: true, // 全选状态，默认全选  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {    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();  },  // 删除  deletes(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();  },  /**   * 绑定减数量事件   */  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() {    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 + "暂未开发",    })  },  /**   * 计算总价   */  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)    });  },})