微信小程序-购物车

<view>
  <view class="maybe" wx:if="{{ if_show }}">
    <image src="../../imgs/no-shopping.png" style="width:130rpx;height:130rpx"></image>
    <view style="margin-top:30rpx">购物车还是空的</view>
    <view style="color:		#A9A9A9">赶紧买点宝贝慰劳下自己吧</view>
    <view style="color:red;width:150rpx;margin:0 auto;border: 1px solid red;border-radius:50px;margin-top:20rpx">去逛逛
    </view>
  </view>
  <view wx:if="{{ !if_show }}">
    <view class="first">
      <view style="height:50rpx;display:flex">
        <image src="../../imgs/store.png" style="width:50rpx;height:50rpx;" />朵妈严选 ></view>
      <view bindtap="redact">编辑</view>
    </view>
    <view class="bottom">
      <label style="margin-right:30%">
        <checkbox style="margin-right:10rpx;" bindtap="check_all"/> 全选</label>
      <view wx:if="{{exist}}" style="display:flex;flex-direction:column;font-size:26rpx;margin-left:50rpx">
        <view style="height:30rpx;margin-top:-10rpx;font-weight: bold;">合计：<text style="color:red">￥{{ price }}</text>
        </view>
        <view style="font-size:20rpx">不含运费</view>
      </view>
      <view style="" class="{{ redact_state ? 'set_over' : 'over'}}">{{ redact_text }}</view>
    </view>
    <view class="baby" wx:for="{{ baby_li }}">
      <checkbox bindtap="pick"  checked="{{item.state}}" data-index="{{index}}" style="line-height:170rpx" />
      <image style="margin-left:20rpx;width:280rpx;height:188rpx;border-radius:10px" src="{{ item.img }}"></image>
      <view style="margin-left:10rpx">
        <text>{{ item.name }}</text>
        <view style="font-size:25rpx;background:#F5F5F5;width:90%;color:#A9A9A9;padding:3rpx 10rpx">{{ item.property }}
          <image src="../../imgs/xiala.png" style="width:30rpx;height:30rpx;padding-top:5rpx"></image>
        </view>
        <view style="display:flex;justify-content:space-between;padding:0 20rpx;margin-top:20rpx;">
          <view style="font-weight:bold;color:red">￥{{ item.price }}</view>
          <view style="display:flex">	
            <view bindtap="jian" data-index="{{ index }}" style="width:60rpx;height:60rpx;line-height:60rpx;text-align:center;background:#f5f5f5;font-size:25rpx;">—</view>
            <view style="font-size:30rpx;width:60rpx;height:60rpx;line-height:60rpx;background:#f5f5f5;text-align:center;margin:0 5rpx;">{{item.number}}</view>
            <view bindtap="jia" data-index="{{ index }}" style="font-size:40rpx;width:60rpx;height:60rpx;line-height:60rpx;background:#f5f5f5;text-align:center">+</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

// pages/shop/shop.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    price: 0,
    redact_state: false,
    redact_text: '结算',
    pick_all_state: false,
    compile_state: false,
    if_show: false,
    exist: true,
    baby_li: [{
        name: '西蒙日记 竖条纹儿童加厚打底裤秋冬女童保暖长裤',
        img: '../../imgs/baby_1j.jpg',
        price: 59,
        property: '粉色，M【推荐身高110-130cm】',
        number: 1,
        state: false
      },
      {
        name: '西蒙日记 竖条纹儿童加厚打底裤秋冬女童保暖长裤',
        img: '../../imgs/baby_1j.jpg',
        price: 59,
        property: '粉色，M【推荐身高110-130cm】',
        number: 1,
        state: false
      }
    ]
  },
  start(){
    let cop_array = this.data.baby_li
    //删掉全部
    if(this.data.pick_all_state){
        cop_array = []
    }
    //删掉选中的
    if(this.data.compile_state){
        for(let x in cop_array){
          if(cop_array[x]['state']){
            cop_array.splice(x,1)
          }
        }
    }
    this.setData({
      price : 0,
      baby_li : cop_array
    })
  },
  redact() {
    if(this.data.compile_state){
      this.setData({
        compile_state : false
      })
    }else{
      this.setData({
        compile_state : true
      })
    }
    if (this.data.redact_text == '结算') {
      this.setData({
        redact_text: '删除',
        exist: false
      })
    } else {
      this.setData({
        redact_text: '结算',
        exist: true
      })
    }

  },
  pick(e) {
    let zhi = e.target.dataset.index
    let playStatus = "baby_li[" + zhi + "].state";
    let sim = this.data.baby_li[zhi]
    var sum;
    if (this.data.baby_li[zhi]['state']) {
      this.setData({
        [playStatus]: false
      })
      sum = this.data.price - sim.price * sim.number
    } else {
      this.setData({
        [playStatus]: true
      })
      sum = this.data.price + sim.price * sim.number
    }
    //选中后计算总价
    this.setData({
      price: sum
    })
    //选中后更改redact_text状态
    for (let x in this.data.baby_li) {
      if (this.data.price == 0) {
        this.setData({
          redact_state: false
        })
      } else {
        this.setData({
          redact_state: true
        })
      }
    }
  },
  jia(e) {
    //数量加1
    let zhi = e.target.dataset.index
    let number = this.data.baby_li[zhi]['number'] + 1
    let playStatus = "baby_li[" + zhi + "].number";
    this.setData({
      [playStatus]: number
    })
    //选中之后价格增加
    if (this.data.baby_li[zhi]['state']) {
      let sum = this.data.price + this.data.baby_li[zhi]['price']
      this.setData({
        price: sum
      })
    }
  },
  jian(e) {
    //数量减1
    let zhi = e.target.dataset.index
    if (this.data.baby_li[zhi]['number'] > 1) {
      let number = this.data.baby_li[zhi]['number'] - 1
      let playStatus = "baby_li[" + zhi + "].number";
      this.setData({
        [playStatus]: number
      })
      if (this.data.baby_li[zhi]['state']) {
        let sum = this.data.price - this.data.baby_li[zhi]['price']
        this.setData({
          price: sum
        })
      }
    }
  },
  check_all() {
    if (this.data.pick_all_state) {
      this.setData({
        pick_all_state: false,
        redact_state: false,
        price: 0
      })
      for (let x in this.data.baby_li) {
        let playStatus = "baby_li[" + x + "].state";
        this.setData({
          [playStatus]: false
        })
      }
    } else {
      this.setData({
        pick_all_state: true,
        redact_state: true
      })
      let sum = 0;
      for (let x in this.data.baby_li) {
        sum = sum + this.data.baby_li[x]['number'] * this.data.baby_li[x]['price']
        let playStatus = "baby_li[" + x + "].state";
        this.setData({
          [playStatus]: true
        })
      }
      this.setData({
        price: sum
      })
    }
  }
})

/* pages/shop/shop.wxss */
.maybe {
  margin-top: 20%;
  text-align: center;
}
.maybe view{
  height: 50rpx;
}
.first {
  display: flex;
  justify-content: space-between;
  padding:10rpx;
  height: 70rpx;
  line-height: 50rpx;
  background: white;
}
.bottom{
  background: white;
  height: 80rpx;
  line-height: 80rpx;
  width: 100vw;
  position: fixed;
  bottom: 0;
  padding: 0 10rpx;
  display: flex;
  justify-content: space-between;
}
.over{
  margin-left: 20rpx;
  margin-top: 10rpx;
  font-weight: bold;
  font-size: 32rpx;
  color:	#C0C0C0;
  text-align: center;
  width: 180rpx;
  height:60rpx;
  line-height: 60rpx;
  background:	#F5F5F5;
  border-radius: 20px;
}
.set_over{
  margin-left: 20rpx;
  margin-top: 10rpx;
  font-weight: bold;
  font-size: 32rpx;
  color:	white;
  text-align: center;
  width: 180rpx;
  height:60rpx;
  line-height: 60rpx;
  background:	red;
  border-radius: 20px;
}
.baby{
  margin:20rpx;
  padding:20rpx;
  background: white;
  height: 290rpx;
  border-radius: 10px;
  display: flex;
}
checkbox .wx-checkbox-input {
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: red;
  border-color:red;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 20rpx;
  height: 20rpx;  
  line-height: 20rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: red;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}