yunshengtai-uniapp/pages/shop/ShoppingCart/index.vue

<template>
  <view class="shoppingCart">
    <view v-if="$store.getters.token||userInfo.uid">
      <!-- <view class="labelNav acea-row row-around row-middle">
        <view class="item">
          <text class="iconfont icon-xuanzhong"></text>100%正品保证
        </view>
        <view class="item">
          <text class="iconfont icon-xuanzhong"></text>所有商品精挑细选
        </view>
        <view class="item">
          <text class="iconfont icon-xuanzhong"></text>售后无忧
        </view>
      </view> -->
      <view class="nav acea-row row-between-wrapper">
        <view>
          购物数量 <text class="num font-color-red">({{ count }})</text>
        </view>
        <view v-if="cartList.valid.length > 0" class="administrate acea-row row-center-wrapper" @click="manage">
          {{ footerswitch ? '取消' : '管理' }}</view>
      </view>
      <view v-if="validList.length > 0 || cartList.invalid.length > 0">
        <view class="list">
          <view class="item acea-row row-between-wrapper" v-for="(item, cartListValidIndex) in validList"
            :key="cartListValidIndex">
            <view class="select-btn">
              <view class="checkbox-wrapper">
                <checkbox-group @change="switchSelect(cartListValidIndex)">
                  <label class="well-check">
                    <checkbox style="transform: scale(0.9);" value :checked="item.checked"></checkbox>
                  </label>
                </checkbox-group>
              </view>
            </view>
            <view class="picTxt acea-row row-between-wrapper">
              <view class="pictrue" @click="goGoodsCon(item)">
                <image :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo" />
                <image :src="item.productInfo.image" v-else />
              </view>
              <view class="text">
                <view class="line1">{{ item.productInfo.storeName }}</view>
                <view class="infor line1" v-if="item.productInfo.attrInfo">属性：{{ item.productInfo.attrInfo.sku }}</view>
                <view class="money">￥{{ item.truePrice }}</view>
              </view>
              <view class="carnum acea-row row-center-wrapper">
                <view class="reduce" :class="validList[cartListValidIndex].cartNum <= 1 ? 'on' : ''"
                  @click.prevent="reduce(cartListValidIndex)">-</view>
                <view class="num">{{ item.cartNum }}</view>
                <view class="plus" v-if="validList[cartListValidIndex].attrInfo"
                  :class="validList[cartListValidIndex].cartNum >= validList[cartListValidIndex].attrInfo.stock ? 'on' : ''"
                  @click.prevent="plus(cartListValidIndex)">+</view>
                <view class="plus" v-else
                  :class="validList[cartListValidIndex].cartNum >= validList[cartListValidIndex].stock ? 'on' : ''"
                  @click.prevent="plus(cartListValidIndex)">+</view>
              </view>
            </view>
          </view>
        </view>
        <view class="invalidGoods" v-if="cartList.invalid.length > 0">
          <view class="goodsNav acea-row row-between-wrapper">
            <view @click="goodsOpen">
              <text class="iconfont" :class="goodsHidden === true ? 'icon-xiangyou' : 'icon-xiangxia'"></text>失效商品
            </view>
            <view class="del" @click="delInvalidGoods">
              <text class="iconfont icon-shanchu1"></text>清空
            </view>
          </view>
          <view class="goodsList" :hidden="goodsHidden">
            <view v-for="(item, cartListinvalidIndex) in cartList.invalid" :key="cartListinvalidIndex">
              <view @click="goGoodsCon(item)" class="item acea-row row-between-wrapper" v-if="item.productInfo">
                <view class="invalid acea-row row-center-wrapper">失效</view>
                <view class="pictrue">
                  <image :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo" />
                  <image :src="item.productInfo.image" v-else />
                </view>
                <view class="text acea-row row-column-between">
                  <view class="line1">{{ item.productInfo.storeName }}</view>
                  <view class="infor line1" v-if="item.productInfo.attrInfo">属性：{{ item.productInfo.attrInfo.sku }}
                  </view>
                  <view class="acea-row row-between-wrapper">
                    <view class="end">该商品已下架</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--购物车暂无商品-->
      <view class="noCart" v-if="cartList.valid.length === 0 && cartList.invalid.length === 0">
        <view class="pictrue">
          <image src="https://download.cyjyyjy.com/no-goods.png" />
        </view>
				<view class="toBuy-btn" @click="toGoodsClass()">去选购</view>
      </view>
      <view style="height:210rpx"></view>
      <view :class="{'footer acea-row row-between-wrapper':true,'footer-h5':isH5}" v-if="cartList.valid.length > 0">
        <view>
          <view class="select-btn">
            <view class="checkbox-wrapper">
              <!-- <label class="well-check">
              <input
                type="checkbox"
                name
                value
                :checked="isAllSelect && cartCount > 0"
                @click="allChecked"
              />
              <i class="icon"></i>
              <text class="checkAll">全选 ({{ cartCount }})</text>
              </label>-->

              <checkbox-group @change="allChecked">
                <label class="well-check">
                  <checkbox  style="transform: scale(0.9);" value="allSelect" :checked="isAllSelect && cartCount > 0"></checkbox>
                  <text class="checkAll">全选 ({{ cartCount }})</text>
                </label>
              </checkbox-group>
            </view>
          </view>
        </view>
        <view class="money acea-row row-middle" v-if="footerswitch === false">
          <text class="font-color-red">￥{{ countmoney }}</text>
          <view class="placeOrder bg-color-red" @click="placeOrder">立即下单</view>
        </view>
        <view class="button acea-row row-middle" v-else>
          <!-- <view class="bnt cart-color" @click="collectAll">收藏</view> -->
          <view class="bnt" @click="delgoods">删除</view>
        </view>
      </view>
    </view>
    <Authorization v-else />
  </view>
</template>
<script>
  import Recommend from "@/components/Recommend";
  import Authorization from "@/pages/authorization/index";
  import { mapGetters } from "vuex";

  import {
    getCartList,
    postCartDel,
    changeCartNum,
    getCartCount
  } from "@/api/store";
  import {
    postCollectAll
  } from "@/api/user";
  import {
    mul,
    add
  } from "@/utils/bc";
  import cookie from "@/utils/store/cookie";

  const CHECKED_IDS = "cart_checked";

  export default {
    name: "ShoppingCart",
    components: {
      Recommend,
      Authorization
    },
    props: {},
    data: function () {
      return {
        cartList: {
          invalid: [],
          valid: []
        },
        isH5: false,
        validList: [],
        isAllSelect: false,
        cartCount: 0,
        countmoney: 0,
        goodsHidden: true,
        footerswitch: false,
        count: 0,
        checkedIds: [],
        loaded: false
      };
    },
    computed: mapGetters(["userInfo", "token"]),
    //   watch: {
    //     $yroute(n) {
    //       if (n.name === "ShoppingCart") {
    //         this.carnum();
    //         this.countMoney();
    //         this.getCartList();
    //         this.gainCount();
    //         this.goodsHidden = true;
    //         this.footerswitch = false;
    //       }
    //     },
    //     cartList(list) {
    //       this.validList = list.valid;
    //     }
    //   },
    watch: {
      userInfo(user) {
        if (user.uid) {
          this.carnum();
          this.countMoney();
          this.getCartList();
          this.gainCount();
        }
      },
      token(token) {
        if (this.userInfo.uid) {
          this.carnum();
          this.countMoney();
          this.getCartList();
          this.gainCount();
        }
      },
      cartList(list) {
        this.validList = list.valid;
      }
    },
    onShow: function () {
      // #ifdef H5
      this.isH5 = true
      // #endif
      console.log(this.userInfo)
      if (this.userInfo.uid) {
        this.carnum();
        this.countMoney();
        this.getCartList();
        this.gainCount();
      }
    },
    methods: {
			// toGoodsClass(){
			// 	uni.switchTab({
			// 		url:'/pages/shop/GoodsClass/index'
			// 	})
			// },
			toGoodsClass(){
				uni.switchTab({
					url:'/pages/life/index'
				})
			},
      goGoodsCon(item) {
        this.$yrouter.push({
          path: "/pages/shop/GoodsCon/index",
          query: {
            id: item.productId
          }
        });
      },
      getCartList: function () {
        let that = this;
        getCartList().then(res => {
          that.cartList = res.data;
          let checkedIds = cookie.get(CHECKED_IDS) || [];
          if (!Array.isArray(checkedIds)) checkedIds = [];
          this.cartList.valid.forEach(cart => {
            if (checkedIds.indexOf(cart.id) !== -1) cart.checked = true;
          });
          if (checkedIds.length) {
            that.checkedIds = checkedIds;
            that.isAllSelect = checkedIds.length === this.cartList.valid.length;
            that.carnum();
            that.countMoney();
          }
          this.loaded = true;
        });
      },
      //删除商品；
      delgoods: function () {
        let that = this,
          id = [],
          valid = [],
          list = that.cartList.valid;
        list.forEach(function (val) {
          if (val.checked === true) {
            id.push(val.id);
          }
        });
        if (id.length === 0) {
          uni.showToast({
            title: "请选择产品",
            icon: "none",
            duration: 2000
          });
          return;
        }
        postCartDel(id).then(function () {
          list.forEach(function (val, i) {
            if (val.checked === false || val.checked === undefined)
              valid.push(list[i]);
          });
          that.$set(that.cartList, "valid", valid);
          that.carnum();
          that.countMoney();
          that.gainCount();
          that.getCartList();
        });
      },
      // //获取数量
      gainCount: function () {
        let that = this;
        getCartCount().then(res => {
          that.count = res.data.count;
        });
      },
      //清除失效产品；
      delInvalidGoods: function () {
        let that = this,
          id = [],
          list = that.cartList.invalid;
        list.forEach(function (val) {
          id.push(val.id);
        });
        postCartDel(id).then(function () {
          list.splice(0, list.length);
          that.gainCount();
          that.getCartList();
        });
      },
      //批量收藏;
      collectAll: function () {
        let that = this,
          data = {
            id: [],
            category: ""
          },
          list = that.cartList.valid;
        list.forEach(function (val) {
          if (val.checked === true) {
            data.id.push(val.product_id);
            data.category = val.type;
          }
        });
        if (data.id.length === 0) {
          uni.showToast({
            title: "请选择产品",
            icon: "none",
            duration: 2000
          });
          return;
        }
        postCollectAll(data).then(function () {
          uni.showToast({
            title: "收藏成功!",
            icon: "none",
            duration: 2000
          });
        });
      },
      //立即下单；
      placeOrder: function () {
        let that = this,
          list = that.cartList.valid,
          id = [];
        list.forEach(function (val) {
          if (val.checked === true) {
            id.push(val.id);
          }
        });
        if (id.length === 0) {
          uni.showToast({
            title: "请选择产品",
            icon: "none",
            duration: 2000
          });
          return;
        }
        this.$yrouter.push({
          path: "/pages/order/OrderSubmission/index",
          query: {
            id: id.join(",")
          }
        });
      },
      manage: function () {
        let that = this;
        that.footerswitch = !that.footerswitch;
      },
      goodsOpen: function () {
        let that = this;
        that.goodsHidden = !that.goodsHidden;
      },
      //加
      plus: function (index) {
        let that = this;
        let list = that.cartList.valid[index];
        list.cartNum++;
        if (list.attrInfo) {
          if (list.cartNum >= list.attrInfo.stock) {
            that.$set(list, "cart_num", list.attrInfo.stock);
          }
        } else {
          if (list.cartNum >= list.stock) {
            that.$set(list, "cart_num", list.stock);
          }
        }
        that.carnum();
        that.countMoney();
        that.syncCartNum(list);
      },
      //减
      reduce: function (index) {
        let that = this;
        let list = that.cartList.valid[index];
        if (list.cartNum <= 1) {
          uni.showToast({
            title: "已经是底线啦!",
            icon: "none",
            duration: 2000
          });
          return;
        }
        list.cartNum--;
        if (list.cartNum < 1) {
          that.$set(list, "cart_num", 1);
        }
        that.carnum();
        that.countMoney();
        that.syncCartNum(list);
      },
      syncCartNum(cart) {
        if (!cart.sync) {
          changeCartNum(cart.id, Math.max(cart.cartNum, 1) || 1)
            .then(res => {
              this.getCartList();
              this.gainCount();
            })
            .catch(error => {
              this.gainCount();
              uni.showToast({
                title: error.response.data.msg,
                icon: "none",
                duration: 2000
              });
            });
        }
      },
      //单选
      switchSelect: function (index) {
        let that = this,
          cart = that.cartList.valid[index],
          i = this.checkedIds.indexOf(cart.id);
        cart.checked = !cart.checked;

        if (i !== -1) this.checkedIds.splice(i, 1);
        if (cart.checked) {
          this.checkedIds.push(cart.id);
        }
        let len = that.cartList.valid.length;
        let selectnum = [];
        for (let i = 0; i < len; i++) {
          if (that.cartList.valid[i].checked === true) {
            selectnum.push(true);
          }
        }
        that.isAllSelect = selectnum.length === len;
        that.$set(that, "cartList", that.cartList);
        that.$set(that, "isAllSelect", that.isAllSelect);
        cookie.set(CHECKED_IDS, that.checkedIds);
        that.carnum();
        that.gainCount();
        that.countMoney();
      },
      //全选
      allChecked: function (e) {
        console.log(e);
        let that = this;
        let selectAllStatus = e.mp.detail.value[0] == "allSelect" ? true : false;
        console.log(selectAllStatus);
        // let selectAllStatus = that.isAllSelect;
        let checkedIds = [];
        // for (let i = 0; i < array.length; i++) {
        //   array[i].checked = selectAllStatus;
        //   checked.push()
        // }
        that.cartList.valid.forEach(cart => {
          cart.checked = selectAllStatus;
          if (selectAllStatus) {
            checkedIds.push(cart.id);
          }
        });
        let cartList = {
          ...that.cartList
        };
        that.cartList = [];
        that.cartList = cartList;
        console.log(this.cartList);
        this.$set(this, "cartList", this.cartList);
        this.$set(this, "isAllSelect", selectAllStatus);
        this.checkedIds = checkedIds;
        cookie.set(CHECKED_IDS, checkedIds);
        that.carnum();
        that.countMoney();
        this.$forceUpdate();
      },
      //数量
      carnum: function () {
        let that = this;
        var carnum = 0;
        var array = that.cartList.valid;
        for (let i = 0; i < array.length; i++) {
          if (array[i].checked === true) {
            carnum += parseInt(array[i].cartNum);
          }
        }
        that.$set(that, "cartCount", carnum);
      },
      //总共价钱；
      countMoney: function () {
        let that = this;
        let carmoney = 0;
        let array = that.cartList.valid;
        for (let i = 0; i < array.length; i++) {
          if (array[i].checked === true) {
            carmoney = add(carmoney, mul(array[i].cartNum, array[i].truePrice));
          }
        }
        that.countmoney = carmoney;
      }
    }
  };
</script>

<style lang="less">
  .footer-h5 {
    bottom: 50px
  }
  .shoppingCart{
	  position: relative;
		padding-top: 120rpx;
		background: #eee;
		.nav{
			top: 0;
		}
		.list{
			padding: 0 40rpx;
			margin-top: 0;
			.item{
				border-radius: 12rpx;
			}
		}
  }
	.shoppingCart .nav .administrate{
		color: #fff;
		background:#F99C10;
		width: 110rpx;
		height: 46rpx;
		border-radius: 25rpx;
		border:none;
	}
	.shoppingCart .list .item .picTxt {
		width: 553rpx;
	}
	.shoppingCart .list .item .picTxt .text {
		width: 390rpx;
	}
	.shoppingCart .list .item .picTxt .carnum view {
	    border: 2rpx solid #F99C10;
	    width: 66rpx;
	    text-align: center;
	    height: 100%;
	    line-height: 44rpx;
	    font-size: 28rpx;
	    color: #F99C10;
	}
	.shoppingCart .list .item .picTxt .carnum .plus{
		border-radius: 0 12rpx 12rpx 0;
	}
	 .shoppingCart .list .item .picTxt .carnum .reduce{
		 border-radius: 12rpx 0rpx 0rpx 12rpx;
	 }
	 .shoppingCart .list .item .picTxt .carnum .num {
	     color: #F99C10;
	 }
	
	.shoppingCart .footer {
	   height: 120rpx;
	}
	.shoppingCart .noCart{
		margin-top: 0;
		background: #eee;
		.pictrue{
			width: 422rpx;
			height: 508rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.toBuy-btn{
			width: 194rpx;
			height: 68rpx;
			background: -webkit-linear-gradient(top, #EA533E 0%, #E5270F 100%);
			background: linear-gradient(180deg, #EA533E 0%, #E5270F 100%);
			box-shadow: 0px 4rpx 6rpx 2rpx rgba(255, 213, 208, 0.59);
			border-radius: 34rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 68rpx;
			margin: 30rpx auto;
		}
	}
	.shoppingCart .noCart .toBuy-btn{
		background: #F99C10;
	}
	
</style>