education_mp/pages/car/index.vue

<template>
  <view>
    <view class="to_bottom" v-if="!cartList.length"> -----还没有产品啦-----</view>
    <view class="car_list">
      <view class="car_item" @longpress="deleteCar(index)" v-for="(item,index) in cartList" :key="index">
        <view class="check_label"  @click="checkedItem(index)" >
          <image class="checkbox" :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'"></image>
        </view>
        <view class="box_left">
          <image class="car_image" :src="item.thumb" mode=""></image>
        </view>
        <view class="box_center">
          <view class="car_name">{{item.name}}</view>
          <view class="car_spec">{{item.spec}}</view>
          <view class="car_price">
            <text class="price">￥{{item.price}}</text>
            <text class="market_price">￥{{item.market_price}}</text>
          </view>
        </view>
        <view class="box_right">
          <view class="buy_num_box">
            <button class="buy_num_sub" @click="changeQuantity(index,-1)" data-eventsync="true">
              <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
            </button>
            <input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(index,0)" ></input>
            <button class="buy_num_add" @click="changeQuantity(index,+1)" data-eventsync="true">
              <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="to_bottom" > -----到底啦-----</view>
    <view class="bottom_box">
      <view class="check_all_label" @click="checkAll()">
        <image class="checkbox" :src="checkedAll?'../../static/icon/checked.png':'../../static/icon/checkbox.png'" ></image>
        <text class="checkall">全选</text>
      </view>
      <view class="price_box">
        合计：<text class="price_total">￥{{priceTotal}}</text>
      </view>
      <view class="to_order" @click="toOrder()" >下单</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 购物车列表
      cartList:[],
      // 请求参数
      requestParam:{},
      // 是否全选
      checkedAll:false,
      // 总价
      priceTotal:'0.00',
      // 是否请求中
      isReqing:false,
    }
  },
  onLoad() {

  },
  onShow() {
    // 登录提示
    if( !this.$checkAccess.alterLogin() )  return ;
    // 请求中，不允许刷新
    if( this.isReqing )		return ;
    // 设置请求中
    this.isReqing			= true;
    // 非全选
    this.checkedAll			= 0;
    // 请求列表
    this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
      // 设置非请求中
      this.isReqing		= false;
      // 成功结果
      if( re.code == 'success' ){
        // 赋值
        this.cartList = re.data;
        // 计算价格
        this.priceHandler();
      }
    });
  },
  onPullDownRefresh() {
    // 登录提示
    if( !this.$checkAccess.alterLogin() )  return ;
    // 请求列表
    this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
      if( re.code == 'success' ){
        // 赋值
        this.cartList = re.data;
        // 计算价格
        this.priceHandler();
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {

  },
  methods: {
    // 数量调整
    changeQuantity(index,number){
      // 如果不是0.表示两侧按钮点击，0表示输入的修改
      if( number != 0 ) {
        // 计算个数
        this.cartList[index].buy_num = this.cartList[index].buy_num + number;
      }
      // 如果大于库存
      if( this.cartList[index].buy_num > this.cartList[index].stock ) {
        // 设置为库存
        this.cartList[index].buy_num = this.cartList[index].stock;
        // 提示
        uni.showToast({
          title:"购买数量不能大于库存",
          icon:"none",
        })
        return ;
      }
      // 如果小于1.设置为1
      if( this.cartList[index].buy_num < 1 ) {
        // 恢复1
        this.cartList[index].buy_num = 1;
        // 提示
        uni.showToast({
          title:"数量不可小于1",
          icon:"none",
        })
        return ;
      }
      // 请求列表
      this.$http.request('api/shop_cart/edit',{id:this.cartList[index].id,buy_num:this.cartList[index].buy_num}).then((re)=>{
        if( re.code == 'success' ){
          // 计算价格
          this.priceHandler();
        }else{
          uni.showToast({
            title: re.msg,
            icon:"none"
          })
        }
      });
    },
    // 删除购物车
    deleteCar(index){
      uni.showModal({
        title:"是否删除？",
        success: (re) => {
          if(re.confirm){
            // 请求列表
            this.$http.request('api/shop_cart/del',{id:this.cartList[index].id}).then((re)=>{
              // 如果删除成功的话
              if( re.code == 'success' ){
                this.cartList.splice(index,1);
                // 计算价格
                this.priceHandler();
              }
            });
          }
        }
      })
    },
    checkedItem(index){
      // 默认全选
      let checkedAll = 1;
      // 单个设置选中/未选
      this.cartList[index].checked = this.cartList[index].checked ? 0 : 1;
      // 循环处理
      for (let i in this.cartList) {
        // 有未选的就不做全选
        if( !this.cartList[i].checked ) checkedAll = 0;
      }
      // 全选赋值
      this.checkedAll  = checkedAll;
      // 计算价格
      this.priceHandler();
    },
    checkAll(){
      // 设置全选/单选
      this.checkedAll  = this.checkedAll ? 0 : 1;
      // 循环处理
      for (let index in this.cartList) {
        this.cartList[index].checked = this.checkedAll;
      }
      // 计算价格
      this.priceHandler();
    },
    priceHandler(){
      // 总价格
      let priceTotal 	= 0;
      // 循环处理
      for (let index in this.cartList) {
        // 如果选中的
        if( this.cartList[index].checked ){
          priceTotal = this.$decimal.add(priceTotal,this.$decimal.mul(this.cartList[index].price,this.cartList[index].buy_num));
        }
      }
      // 小数点处理
      this.priceTotal = priceTotal.toFixed(2);
    },
    toOrder(){
      // 等待支付的信息
      let waitList = [];
      // 循环处理
      for (let index in this.cartList) {
        // 如果选中的
        if( this.cartList[index].checked ){
          // 如果库存不足
          if( this.cartList[index].buy_num < 1 ){
            uni.showToast({icon:"none",title:"选择的产品至少需要1个"})
            return ;
          }
          // 如果库存不足
          if( this.cartList[index].buy_num > this.cartList[index].stock  ){
            uni.showToast({icon:"none",title:"产品库存不足"})
            return ;
          }
          waitList.push(this.cartList[index].id);
        }
      }
      // 如果没有选择
      if( !waitList.length ) {
        uni.showToast({icon:"none",title:"请选择需要结算的产品"})
        return ;
      }
      // 如果没有选择
      if( waitList.length > 99 ) {
        uni.showToast({icon:"none",title:"这么多产品一个预约单写不下哦"})
        return ;
      }
      uni.navigateTo({
        url:"/pages/car/order?cart_ids="+waitList.join(',')
      })
    }
  }
}
</script>

<style lang="less">
.car_list{
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  margin-top: 20rpx;
  .car_item{
    height: 180rpx;
    display: block;
    background: #FFFFFF;
    margin: 0rpx auto;
    margin-bottom: 20rpx;
    padding: 20rpx 0rpx;
    .check_label{
      float: left;
      width: 40rpx;
      height: 40rpx;
      display: block;
      margin-top: 10rpx;
      padding: 50rpx 20rpx;
      .checkbox{
        float: left;
        width: 40rpx;
        height: 40rpx;
      }
    }
    .box_left{
      float: left;
      width: 140rpx;
      height: 200rpx;
      margin-top: 10rpx;
      .car_image{
        width: 140rpx;
        height: 140rpx;
        border-radius: 5rpx;
      }
    }
    .box_center{
      float: left;
      width: 300rpx;
      margin-left: 25rpx;
      .car_name{
        max-height: 80rpx;
        font-size: 30rpx;
        line-height: 50rpx;
        overflow: hidden;
      }
      .car_spec{
        color: #999999;
        font-size: 24rpx;
        line-height: 60rpx;
      }
      .car_price{
        font-size: 30rpx;
        line-height: 60rpx;
        .price{
          color: red;
        }
        .market_price{
          font-size: 24rpx;
          color: #999999;
          margin-left: 10rpx;
          padding-left: 10rpx;
          text-decoration: line-through;
          border-left: 2rpx solid #DDDDDD;
        }
      }
    }
    .box_right{
      float: right;
      padding-right: 25rpx;
      width: 185rpx;
      .buy_num_box{
        float: right;
        color: #333333;
        overflow: hidden;
        font-size: 24rpx;
        margin-top: 70rpx;
        text-align: center;
        .buy_num_sub{
          float: left;
          border: none;
          height: 36rpx;
          background: none;
          text-align: center;
          line-height: 36rpx;
          padding: 10rpx 10rpx;
          padding-right: 15rpx;
          .sub_icon{
            width: 22rpx;
            height: 22rpx;
            display: block;
          }
        }
        .buy_num_sub::after{
          border: none;
          background: none;
        }
        .buy_num{
          float: left;
          width: 90rpx;
          height: 36rpx;
          font-size: 24rpx;
          min-height: 36rpx;
          line-height: 36rpx;
          padding: 0rpx 0rpx;
          border-radius: 8rpx;
          border: 2rpx solid #dddddd;
        }
        .buy_num_add{
          float: left;
          border: none;
          height: 36rpx;
          background: none;
          text-align: center;
          padding: 10rpx 10rpx;
          padding-left: 15rpx;
          line-height: 36rpx;
          .add_icon{
            width: 22rpx;
            height: 22rpx;
            display: block;
          }
        }
        .buy_num_add::after{
          border: none;
          background: none;
        }
      }
    }
  }
}
.bottom_box{
  left: 0rpx;
  width: 100%;
  height: 100rpx;
  display: block;
  position: fixed;
  overflow: hidden;
  background: #FFFFFF;
  padding: 0rpx 35rpx;
  bottom: var(--window-bottom);
  .check_all_label{
    float: left;
    width: 120rpx;
    height: 40rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    padding: 30rpx 0rpx;
    .checkbox{
      float: left;
      width: 40rpx;
      height: 40rpx;
    }
    .checkbox.active{
      border: 2rpx solid red;
      .checkbox_active{
        background-color: #E03519;
      }
    }
    .checkall{
      float: left;
      height: 40rpx;
      display: block;
      margin-left: 10rpx;
      line-height: 40rpx;
    }
  }
  .price_box{
    float: left;
    width: 400rpx;
    display: block;
    color: #666666;
    font-size: 26rpx;
    text-align: right;
    line-height: 100rpx;
    margin-right: 20rpx;
    .price_total{
      color: red;
      font-size: 30rpx;
    }
  }
  .to_order{
    float: left;
    width: 140rpx;
    height: 60rpx;
    display: block;
    color: #FFFFFF;
    font-size: 28rpx;
    margin-top: 20rpx;
    line-height: 60rpx;
    padding: 0rpx 0rpx;
    text-align: center;
    border-radius: 30rpx;
    background-color: #E03519;
  }
}
</style>