wxapp_shuibei/pages/order_addcart/order_addcart.vue

<template>
  <view>
    <view class="shoppingCart copy-data">
      <view class="borRadius14 cartBox">
        <view
          v-if="cartList.valid.length > 0 || cartList.invalid.length > 0"
          class="pad20"
        >
          <view
            v-if="
              (cartList.valid.length === 0 && cartList.invalid.length === 0) ||
              cartList.valid.length > 0
            "
            class="nav acea-row row-between-wrapper"
          >
            <view
              >购物车数量
              <!-- <text class="num font-color">{{ cartCount }}</text></view> -->
              <text class="num font-color">{{ orderGoodsCount }}</text></view>
            <view
              v-if="cartList.valid.length > 0 || cartList.invalid.length > 0"
              class="administrate acea-row row-center-wrapper"
              @click="manage"
              >{{ footerswitch ? "管理" : "取消" }}
            </view>
          </view>
          <view class="list">
            <up-checkbox-group
              @change="checkboxChange"
              shape="circle"
              v-model="shopCheckbox"
            >
              <block v-for="(item, index) in cartList.valid" :key="index">
                <view class="item acea-row row-between-wrapper">
                  <up-checkbox
                    activeColor="#E93323"
                    :name="item.id"
                    :disabled="!item.attrStatus && footerswitch"
                    :checked="item.checked"
                    :customStyle="{ marginRight: '10px' }"
                  ></up-checkbox>

                  <navigator
                    :render-link="false"
                    :url="'/pages/goods_details/index?id=' + item.productId"
                    hover-class="none"
                    class="picTxt row-between-wrapper"
                  >
                    <view class="pictrue">
                      <image :src="item.image"></image>
                    </view>
                    <view class="item-info">
                      <view class="text">
                        <view
                          class="line1"
                          :class="item.attrStatus ? '' : 'reColor'"
                          >{{ item.storeName }}
                        </view>
                        <view class="attribute-box infor line1">
                          <view class="attribute-suk" v-show="item.suk">属性：{{ item.suk }}</view>
                          <view v-show="!item.attrStatus" class="invalid-count">数量：{{ item.cartNum }}</view>
                        </view>
                        <view class="labor-costs line1" v-if="item.attrStatus"
                          >工费：{{ item.price }}/克</view
                        >
                        <view class="money" v-if="item.attrStatus"
                          >￥{{ item.storePrice }}</view
                        >
                        <!-- <view class='money' v-if="item.attrStatus">￥{{item.truePrice}}</view> -->
                        <view
                          class="reElection acea-row row-between-wrapper"
                          v-else
                        >
                          <view class="title">请重新选择商品规格</view>
                          <view
                            class="reBnt cart-color acea-row row-center-wrapper"
                            @click.stop="reElection(item)"
                            >重选
                          </view>
                        </view>
                      </view>
                      <view
                        class="carnum acea-row row-center-wrapper"
                        v-if="item.attrStatus"
                      >
                        <view
                          class="reduce"
                          :class="item.numSub ? 'on' : ''"
                          @click.stop="subCart(index)"
                          >-</view
                        >
                        <view class="num">{{ item.cartNum }}</view>
                        <view
                          class="plus"
                          :class="item.numAdd ? 'on' : ''"
                          @click.stop="addCart(index)"
                          >+</view
                        >
                      </view>
                    </view>
                  </navigator>
                </view>
              </block>
            </up-checkbox-group>
          </view>
          <!-- cartList.valid.length===0 && cartList.invalid.length > 0 -->
          <view
            v-if="cartList.invalid.length > 0"
            class="invalidGoods borRadius14"
            :style="
              cartList.valid.length === 0 && cartList.invalid.length > 0
                ? 'position: relative;z-index: 111;top: -120rpx;'
                : 'position: static;'
            "
          >
            <view class="goodsNav acea-row row-between-wrapper">
              <view
                v-if="cartList.invalid.length > 1 || cartList.valid.length > 0"
                @click="goodsOpen"
              >
                <text
                  class="iconfont"
                  :class="
                    goodsHidden == true ? 'icon-xiangxia' : 'icon-xiangshang'
                  "
                ></text
                >失效商品
              </view>
              <view v-else> 失效商品 </view>
              <view class="del" @click="unsetCart"
                ><text class="iconfont icon-shanchu1"></text>清空</view
              >
            </view>
            <view class="goodsList" :hidden="goodsHidden">
              <block v-for="(item, index) in cartList.invalid" :key="index">
                <view class="item acea-row row-between-wrapper">
                  <view class="invalid">失效</view>
                  <view class="picTxt acea-row row-between-wrapper">
                    <view class="pictrue">
                      <image :src="item.image"></image>
                    </view>
                    <view class="text acea-row row-column-between">
                      <view class="line1 name">{{ item.storeName }}</view>
                      <view class="infor line1" v-if="item.suk"
                        >属性：{{ item.suk }}</view
                      >
                      <view class="acea-row row-between-wrapper">
                        <view class="end">该商品已失效</view>
                      </view>
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
          <!-- <view class='loadingicon acea-row row-center-wrapper' v-if="cartList.valid.length&&!loadend">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view> -->
          <view
            class="loadingicon acea-row row-center-wrapper"
            v-if="cartList.invalid.length && loadend"
          >
            <text
              class="loading iconfont icon-jiazai"
              :hidden="loadingInvalid == false"
            ></text
            >{{ loadTitleInvalid }}
          </view>
        </view>
        <view
          class="noCart"
          v-if="
            cartList.valid.length == 0 &&
            cartList.invalid.length == 0 &&
            canShow
          "
        >
          <view class="pictrue">
            <image src="../../static/images/noCart.png"></image>
          </view>
          <recommend :hostProduct="hostProduct"></recommend>
        </view>
      </view>
    </view>
    <view
      class="footer acea-row row-between-wrapper"
      v-if="cartList.valid.length > 0"
    >
      <view>
        <up-checkbox-group shape="circle" @change="checkboxAllChange">
          <!-- <checkbox value="all" :checked="!!isAllSelect" /> -->
          <up-checkbox
            activeColor="#E93323"
            :checked="!!isAllSelect"
          ></up-checkbox>
          <text class="checkAll">全选({{ selectValue.length }})</text>
        </up-checkbox-group>
      </view>
      <view class="money acea-row row-middle" v-if="footerswitch == true">
        <text class="font-color">￥{{ selectCountPrice }}</text>
        <form @submit="subOrder" report-submit="true">
          <button class="placeOrder bg-color" formType="submit">
            立即下单
          </button>
        </form>
      </view>
      <view class="button acea-row row-middle" v-else>
        <form @submit="subCollect" report-submit="true">
          <button class="bnt cart-color" formType="submit">收藏</button>
        </form>
        <form @submit="subDel" report-submit="true">
          <button class="bnt" formType="submit">删除</button>
        </form>
      </view>
    </view>
    <productWindow
      :attr="attr"
      :isShow="1"
      :iSplus="1"
      :iScart="1"
      :showPopup="showProductPopup"
      @closePopup="closeProductPopup"
      @submit="handleSubmit"
      @myevent="onMyEvent"
      @ChangeAttr="ChangeAttr"
      @ChangeCartNum="ChangeCartNum"
      @attrVal="attrVal"
      @iptCartNum="iptCartNum"
      id="product-window"
    >
    </productWindow>
    <!-- <view class="uni-p-b-96"></view> -->
    <!-- <view class="uni-p-b-98"></view> -->
    <!-- #ifdef MP -->
    <!-- <authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/app.js";
import {
  getCartList,
  getCartCounts,
  changeCartNum,
  cartDel,
  getResetCart,
} from "@/api/order.js";
import { getProductHot, collectAll, getProductDetail } from "@/api/store.js";
import { toLogin } from "@/libs/login.js";
import recommend from "@/components/recommend";
import productWindow from "@/components/productWindow";
import util from "@/utils/util";
import { getPreOrder } from "@/libs/order";
import { useToast } from "@/hooks/useToast";

const appStore = useAppStore();
const { Toast } = useToast();

const cartCount = ref(0);
const goodsHidden = ref(false);
const footerswitch = ref(true);
const hostProduct = ref([]);
const cartList = reactive({
  valid: [],
  invalid: [],
});
const isAllSelect = ref(false); //全选
const selectValue = ref([]); //选中的数据
const selectCountPrice = ref(0.0);
const isShowAuth = ref(false); //是否隐藏授权
const hotScroll = ref(false);
const hotPage = ref(1);
const hotLimit = ref(10);
const loading = ref(false);
const loadend = ref(false);
const page = ref(1);
const limit = ref(20);
const loadingInvalid = ref(false);
const loadendInvalid = ref(false);
const loadTitleInvalid = ref("加载更多");
const pageInvalid = ref(1);
const limitInvalid = ref(20);
const attr = reactive({
  cartAttr: false,
  productAttr: [],
  productSelect: {},
});
const productValue = ref([]);
const productInfo = ref({});
const attrValue = ref("");
const attrTxt = ref("请选择");
const cartId = ref(0);
const product_id = ref(0);
const canShow = ref(false);
const shopCheckbox = ref([]);
const showProductPopup = ref(false);

const isLogin = appStore.isLogin;

onLoad((options) => {
  if (!isLogin) {
    toLogin();
  }
});

onShow(() => {
  canShow.value = false;
  if (isLogin) {
    hotPage.value = 1;
    hostProduct.value = [];
    hotScroll.value = false;
    loadend.value = false;
    page.value = 1;
    cartList.valid = [];
    getCartListFn();
    loadendInvalid.value = false;
    pageInvalid.value = 1;
    cartList.invalid = [];
    getInvalidList();
    footerswitch.value = true;
    hotScroll.value = false;
    hotPage.value = 1;
    hotLimit.value = 10;
    cartList.valid = [];
    cartList.invalid = [];
    isAllSelect.value = false;
    selectValue.value = [];
    selectCountPrice.value = 0.0;
    cartCount.value = 0;
    isShowAuth.value = false;
  }
});

onReachBottom(() => {
  if (loadend.value) {
    getInvalidList();
  }
  if (
    cartList.valid.length == 0 &&
    cartList.invalid.length == 0 &&
    hotPage.value != 1
  ) {
    getHostProduct();
  }
});

const orderGoodsCount = computed(() => {
  // console.log('fsdfsdfsd', cartList, cartList)
  return cartList.valid.length + cartList.invalid.length;
});

const closeProductPopup = () => {
  showProductPopup.value = false;
};

function authColse(e) {
  isShowAuth.value = e;
}

async function handleSubmit() {
  try {
    const productSelect = productValue.value[attrValue.value];
    if (attr.productAttr.length && productSelect === undefined)
      return Toast({
        title: "产品库存不足，请选择其它",
      });
    const params = {
      id: cartId.value,
      productId: product_id.value,
      num: attr.productSelect.cart_num,
      unique:
        attr.productSelect !== undefined
          ? attr.productSelect.unique
          : productInfo.value.id,
    };
    await getResetCart(params);
    attr.cartAttr = false;
    Toast({
      title: "添加购物车成功",
      success: () => {
        loadend.value = false;
        page.value = 1;
        cartList.valid = [];
        getCartListFn();
        getCartNum();
      },
    });
  } catch (error) {
    Toast({
      title: error,
    });
  } finally {
    showProductPopup.value = false;
  }
}

function onMyEvent() {
  attr.cartAttr = false;
}

function reElection(item) {
  showProductPopup.value = true;
  getGoodsDetails(item);
}

function getGoodsDetails(item) {
  console.log("item", item);
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  cartId.value = item.id;
  product_id.value = item.productId;
  getProductDetail(item.productId)
    .then((res) => {
      uni.hideLoading();
      attr.cartAttr = true;
      productInfo.value = res.data.productInfo;
      attr.productAttr = res.data.productAttr.map((item) => ({
        ...item,
        attrValues: item.attrValues.split(","),
      }));
      productValue.value = res.data.productValue;
      DefaultSelect();
    })
    .catch((err) => {
      uni.hideLoading();
    });
}

function ChangeAttr(res) {
  const productSelect = productValue.value[res];
  if (productSelect && productSelect.stock > 0) {
    attr.productSelect = {
      ...attr.productSelect,
      image: productSelect.image,
      sales: productSelect.sales,
      weight: productSelect.weight,
      price: productSelect.price,
      storePrice: productSelect.storePrice,
      stock: productSelect.stock,
      unique: productSelect.id,
      cart_num: 1,
    };
    attrValue.value = res;
    attrTxt.value = "已选择";
  } else {
    attr.productSelect = {
      ...attr.productSelect,
      image: productInfo.value.image,
      weight: productSelect.weight,
      price: productInfo.value.price,
      storePrice: productSelect.storePrice,
      stock: 0,
      unique: productInfo.value.id,
      cart_num: 1,
    };
    attrValue.value = "";
    attrTxt.value = "请选择";
  }
}

function DefaultSelect() {
  const productAttr = attr.productAttr;
  console.log("productValue", productValue);
  let value = [];
  for (let key in productValue.value) {
    if (productValue.value[key].stock > 0) {
      value = attr.productAttr.length ? key.split(",") : [];
      break;
    }
  }
  for (let i = 0; i < productAttr.length; i++) {
    productAttr[i].index = value[i];
  }
  let productSelect = productValue.value[value.sort().join(",")];
  if (productSelect && productAttr.length) {
    attr.productSelect.storeName = productInfo.value.storeName;
    attr.productSelect.image = productSelect.image;
    attr.productSelect.price = productSelect.price;
    attr.productSelect.storePrice = productSelect.storePrice;
    attr.productSelect.stock = productSelect.stock;
    attr.productSelect.unique = productSelect.id;
    attr.productSelect.cart_num = 1;
    attrValue.value = value.sort().join(",");
    attrTxt.value = "已选择";
  } else if (!productSelect && productAttr.length) {
    attr.productSelect.storeName = productInfo.value.storeName;
    attr.productSelect.image = productInfo.value.image;
    attr.productSelect.price = productInfo.value.price;
    attr.productSelect.storePrice = productSelect.storePrice;
    attr.productSelect.stock = 0;
    attr.productSelect.unique = productInfo.value.id;
    attr.productSelect.cart_num = 0;
    attrValue.value = "";
    attrTxt.value = "请选择";
  } else if (!productSelect && !productAttr.length) {
    attr.productSelect.storeName = productInfo.value.storeName;
    attr.productSelect.image = productInfo.value.image;
    attr.productSelect.price = productInfo.value.price;
    attr.productSelect.storePrice = productSelect.storePrice;
    attr.productSelect.stock = productInfo.value.stock;
    attr.productSelect.unique = productInfo.value.id || "";
    attr.productSelect.cart_num = 1;
    attrValue.value = "";
    attrTxt.value = "请选择";
  }
}

function attrVal(val) {
  attr.productAttr[val.indexw].index =
    attr.productAttr[val.indexw].attrValues[val.indexn];
}

function ChangeCartNum(changeValue) {
  let productSelect = productValue.value[attrValue.value];
  if (productSelect === undefined && !attr.productAttr.length)
    productSelect = attr.productSelect;
  if (productSelect === undefined) return;
  let stock = productSelect.stock || 0;
  let num = attr.productSelect;
  if (changeValue) {
    num.cart_num++;
    if (num.cart_num > stock) {
      num.cart_num = stock ? stock : 1;
    }
  } else {
    num.cart_num--;
    if (num.cart_num < 1) {
      num.cart_num = 1;
    }
  }
}

function iptCartNum(e) {
  attr.productSelect.cart_num = e;
}

function subDel(event) {
  const selectValueArr = selectValue.value;
  if (selectValueArr.length > 0)
    cartDel(selectValueArr).then((res) => {
      loadend.value = false;
      page.value = 1;
      cartList.valid = [];
      getCartListFn();
      getCartNum();
    });
  else
    return Toast({
      title: "请选择产品",
    });
}

function getSelectValueProductId() {
  const validList = cartList.valid;
  const selectValueArr = selectValue.value;
  let productId = [];
  if (selectValueArr.length > 0) {
    for (let index in validList) {
      if (inArray(validList[index].id, selectValueArr)) {
        productId.push(validList[index].productId);
      }
    }
  }
  return productId;
}

function subCollect(event) {
  const selectValueArr = selectValue.value;
  if (selectValueArr.length > 0) {
    const selectValueProductId = getSelectValueProductId();
    collectAll(selectValueProductId)
      .then((res) => {
        return Toast({
          title: "收藏成功",
          icon: "success",
        });
      })
      .catch((err) => {
        return Toast({
          title: err,
        });
      });
  } else {
    return Toast({
      title: "请选择产品",
    });
  }
}

function subOrder(event) {
  const selectValueArr = selectValue.value;
  if (selectValueArr.length > 0) {
    getPreOrderFn();
  } else {
    return Toast({
      title: "请选择产品",
    });
  }
}

function getPreOrderFn() {
  const shoppingCartId = selectValue.value.map((item) => {
    return {
      shoppingCartId: Number(item),
    };
  });
  const params = {
    mallType: 0,
    preOrderType: "shoppingCart",
    orderDetails: shoppingCartId,
  };
  getPreOrder(params);
}

function checkboxAllChange(value) {
  if (value.length > 0) {
    setAllSelectValue(1);
  } else {
    setAllSelectValue(0);
  }
}

function setAllSelectValue(status) {
  const valid = cartList.valid;
  let selectValueArr = [];
  if (valid.length > 0) {
    let newValid = valid.map((item) => {
      if (status) {
        if (footerswitch.value) {
          if (item.attrStatus) {
            item.checked = true;
            selectValueArr.push(item.id);
          } else {
            item.checked = false;
          }
        } else {
          item.checked = true;
          selectValueArr.push(item.id);
        }
        isAllSelect.value = true;
      } else {
        item.checked = false;
        isAllSelect.value = false;
      }
      return item;
    });
    cartList.valid = newValid;
    selectValue.value = selectValueArr;
    switchSelect();
  }
}

function checkboxChange(value) {
  const valid = cartList.valid;
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  let newValid = valid.map((item) => {
    if (inArray(item.id, value)) {
      if (footerswitch.value) {
        if (item.attrStatus) {
          item.checked = true;
          arr1.push(item);
        } else {
          item.checked = false;
        }
      } else {
        item.checked = true;
        arr1.push(item);
      }
    } else {
      item.checked = false;
      arr2.push(item);
    }
    return item;
  });
  if (footerswitch.value) {
    arr3 = arr2.filter((item) => !item.attrStatus);
  }
  cartList.valid = newValid;
  isAllSelect.value = newValid.length === arr1.length + arr3.length;
  selectValue.value = value;
  switchSelect();
}

function inArray(search, array) {
  for (let i in array) {
    if (array[i] == search) {
      return true;
    }
  }
  return false;
}

// 选中商品的价格
function switchSelect() {
  const validList = cartList.valid;
  const selectValueArr = selectValue.value;
  let selectCount = 0.0;
  if (selectValueArr.length < 1) {
    selectCountPrice.value = selectCount;
  } else {
    for (let index in validList) {
      if (inArray(validList[index].id, selectValueArr)) {
        selectCount = util.$h.Add(
          selectCount,
          util.$h.Mul(validList[index].cartNum, validList[index].storePrice)
        );
      }
    }
    selectCountPrice.value = selectCount;
  }
}

function iptCartNumInput(index) {
  const item = cartList.valid[index];
  if (item.cartNum) {
    setCartNum(item.id, item.cartNum);
  }
  switchSelect();
}

function blurInput(index) {
  const item = cartList.valid[index];
  if (!item.cartNum) {
    item.cartNum = 1;
  }
}

function subCart(index) {
  let status = false;
  const item = cartList.valid[index];
  item.cartNum = Number(item.cartNum) - 1;
  if (item.cartNum < 1) status = true;
  if (item.cartNum <= 1) {
    item.cartNum = 1;
    item.numSub = true;
  } else {
    item.numSub = false;
    item.numAdd = false;
  }
  if (false == status) {
    setCartNum(item.id, item.cartNum, function (data) {
      cartList.valid[index] = item;
      switchSelect();
      getCartNum();
    });
  }
}

function addCart(index) {
  const item = cartList.valid[index];
  item.cartNum = Number(item.cartNum) + 1;
  if (item.cartNum >= item.stock) {
    item.cartNum = item.stock;
    item.numAdd = true;
    item.numSub = false;
  } else {
    item.numAdd = false;
    item.numSub = false;
  }
  setCartNum(item.id, item.cartNum, function (data) {
    cartList.valid[index] = item;
    switchSelect();
    getCartNum();
  });
}

function setCartNum(cartIdVal, cartNum, successCallback) {
  changeCartNum(cartIdVal, cartNum).then((res) => {
    successCallback && successCallback(res.data);
  });
}

function getCartNum() {
  getCartCounts(true, "sum").then((res) => {
    cartCount.value = res.data.count;
  });
}

function getCartData(data) {
  return new Promise((resolve, reject) => {
    getCartList(data)
      .then((res) => {
        resolve(res.data);
      })
      .catch(function (err) {
        loading.value = false;
        canShow.value = true;
        Toast({
          title: err,
        });
      });
  });
}

async function getCartListFn() {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  let data = {
    page: page.value,
    limit: limit.value,
    isValid: true,
  };
  getCartCounts(true, "sum").then(async (c) => {
    // 获取购物车商品数量
    cartCount.value = c.data.count;
    // 当没有商品时，获取推荐商品
    if (c.data.count === 0) getHostProduct();
    for (let i = 0; i < Math.ceil(cartCount.value / limit.value); i++) {
      let cartListData = await getCartData(data);
      let valid = cartListData.list;
      let validList = [...cartList.valid, ...valid];
      let selectValueArr = [];
      if (validList.length > 0) {
        for (let index in validList) {
          // 购物车加减状态
          if (validList[index].cartNum == 1) {
            validList[index].numSub = true;
          } else {
            validList[index].numSub = false;
          }
          // 库存
          let stock = validList[index].stock ? validList[index].stock : 0;

          // 当购物车数量大于库存时，设置购物车数量为库存
          if (validList[index].cartNum == stock) {
            validList[index].numAdd = true;
          } else if (validList[index].cartNum == validList[index].stock) {
            validList[index].numAdd = true;
          } else {
            validList[index].numAdd = false;
          }

          // attrStatus 判断商品是否有效
          if (validList[index].attrStatus) {
            validList[index].checked = true;
            selectValueArr.push(validList[index].id);
          } else {
            validList[index].checked = false;
          }
        }
      }
      cartList.valid = validList;
      data.page += 1;
      selectValue.value = selectValueArr;
      let newArr = validList.filter((item) => item.attrStatus);
      // 全选状态
      isAllSelect.value =
        newArr.length == selectValueArr.length && newArr.length;
      switchSelect();
    }
    loading.value = false;
    canShow.value = true;
    uni.hideLoading();
  });
}

function getInvalidList() {
  if (loadendInvalid.value) return false;
  if (loadingInvalid.value) return false;
  let data = {
    page: pageInvalid.value,
    limit: limitInvalid.value,
    isValid: false,
  };
  getCartList(data)
    .then((res) => {
      let invalid = res.data.list,
        loadendInvalidFlag = invalid.length < limitInvalid.value;

      cartList.invalid = [...invalid, ...cartList.invalid];
      loadendInvalid.value = loadendInvalidFlag;
      loadTitleInvalid.value = loadendInvalidFlag
        ? "我也是有底线的"
        : "加载更多";
      pageInvalid.value = pageInvalid.value + 1;
      loadingInvalid.value = false;
    })
    .catch((res) => {
      loadingInvalid.value = false;
      loadTitleInvalid.value = "加载更多";
    });
}

function getHostProduct() {
  if (hotScroll.value) return;
  getProductHot(hotPage.value, hotLimit.value).then((res) => {
    hotPage.value++;
    hotScroll.value = res.data.list.length < hotLimit.value;
    hostProduct.value = hostProduct.value.concat(res.data.list);
  });
}

function goodsOpen() {
  goodsHidden.value = !goodsHidden.value;
}

function manage() {
  footerswitch.value = !footerswitch.value;
  let arr1 = [];
  let arr2 = [];
  let newValid = cartList.valid.map((item) => {
    if (footerswitch.value) {
      if (item.attrStatus) {
        if (item.checked) {
          arr1.push(item.id);
        }
      } else {
        item.checked = false;
        arr2.push(item);
      }
    } else {
      if (item.checked) {
        arr1.push(item.id);
      }
    }
    return item;
  });
  cartList.valid = newValid;
  if (footerswitch.value) {
    isAllSelect.value = newValid.length === arr1.length + arr2.length;
  } else {
    isAllSelect.value = newValid.length === arr1.length;
  }
  selectValue.value = arr1;
  switchSelect();
}

function unsetCart() {
  let ids = [];
  for (let i = 0, len = cartList.invalid.length; i < len; i++) {
    ids.push(cartList.invalid[i].id);
  }
  cartDel(ids)
    .then((res) => {
      Toast({
        title: "清除成功",
      });
      cartList.invalid = [];
      getHostProduct();
    })
    .catch((res) => {});
}
</script>

<style scoped lang="scss">
.cartBox {
  margin-top: 20rpx;
}

.shoppingCart {
  // .labelNav
  .labelNav {
    position: sticky;
    height: 178rpx;
    padding: 30rpx 30rpx 0 30rpx;
    font-size: 22rpx;
    color: #fff;
    position: fixed;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: $theme-color;
    z-index: 5;
    top: 0;
    height: calc(178rpx + 44px + 45rpx);
    padding-top: calc(44px + 50rpx);

    .item {
      .iconfont {
        font-size: 25rpx;
        margin-right: 10rpx;
      }
    }
  }

  // .nav
  .nav {
    height: 90rpx;
    background-color: #fff;
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #282828;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;

    .num {
      margin-left: 12rpx;
    }
    .administrate {
      font-size: 28rpx;
      color: #333;
    }
  }

  // .noCart
  .noCart {
    background-color: #fff;
    padding-top: 0.1rpx;

    .pictrue {
      width: 414rpx;
      height: 336rpx;
      margin: 78rpx auto 56rpx auto;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // .list
  .list {
    width: 100%;
    overflow: hidden;
    border-bottom-left-radius: 14rpx;
    border-bottom-right-radius: 14rpx;

    .item {
      width: 100%;
      padding: 24rpx;
      background-color: #fff;
      display: flex;

      .picTxt {
        flex: 1;
        position: relative;
        display: flex;

        .pictrue {
          width: 160rpx;
          height: 160rpx;
          margin-right: 15rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 6rpx;
          }
        }

        .item-info,
        .text {
          width: 396rpx;
          font-size: 28rpx;
          color: #282828;

          .reColor {
            color: #999;
          }
          .reElection {
            margin-top: 20rpx;
            .title {
              font-size: 24rpx;
            }
            .reBnt {
              width: 120rpx;
              height: 46rpx;
              border-radius: 23rpx;
              font-size: 26rpx;
            }
          }
          .attribute-box {
            display: flex;
            justify-content: space-between;
            .attribute-suk {
            }
            .invalid-count {
              text-align: right;
            }
          }
          .infor {
            font-size: 24rpx;
            color: #999;
            margin-top: 16rpx;
          }
          .labor-costs {
            font-size: 24rpx;
            color: #999;
          }
          .money {
            font-size: 32rpx;
            color: #e93323;
            margin-top: 28rpx;
            font-weight: 600;
          }
        }

        .carnum {
          height: 47rpx;
          position: absolute;
          bottom: 7rpx;
          right: 0;

          view {
            border: 1rpx solid #a4a4a4;
            width: 66rpx;
            text-align: center;
            height: 100%;
            line-height: 44rpx;
            font-size: 28rpx;
            color: #a4a4a4;
          }
          .reduce {
            border-right: 0;
            border-radius: 22rpx 0 0 22rpx;
            font-size: 34rpx;
            line-height: 40rpx;
            &.on {
              border-color: #e3e3e3;
              color: #dedede;
            }
          }
          .plus {
            border-left: 0;
            border-radius: 0 22rpx 22rpx 0;
            font-size: 34rpx;
            line-height: 40rpx;
          }
          .num {
            color: #282828;
          }
        }
      }
    }
  }

  // .invalidGoods
  .invalidGoods {
    background-color: #fff;
    margin-top: 30rpx;

    .goodsNav {
      width: 100%;
      height: 90rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #333;

      .iconfont {
        color: #424242;
        font-size: 28rpx;
        margin-right: 17rpx;
      }
      .del {
        font-size: 26rpx;
        color: #333;
        .icon-shanchu1 {
          color: #333;
          font-size: 33rpx;
          vertical-align: -2rpx;
          margin-right: 8rpx;
        }
      }
    }

    .goodsList {
      .item {
        padding: 24rpx;
        .invalid {
          font-size: 22rpx;
          color: #ccc;
          height: 36rpx;
          border-radius: 3rpx;
          text-align: center;
          line-height: 36rpx;
        }
        .picTxt {
          width: 576rpx;
          .pictrue {
            width: 160rpx;
            height: 160rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 6rpx;
            }
          }
          .text {
            width: 396rpx;
            font-size: 28rpx;
            color: #999;
            height: 140rpx;
            .name {
              width: 100%;
            }
            .infor {
              font-size: 24rpx;
            }
            .end {
              font-size: 26rpx;
              color: #bbb;
            }
          }
        }
      }
    }
  }
}

// footer
.footer {
  z-index: 9;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  padding: 0 24rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #eee;
  bottom: 0;

  .checkAll {
    font-size: 28rpx;
    color: #282828;
    margin-left: 14rpx;
  }
  .money {
    font-size: 30rpx;
    .font-color {
      font-weight: 600;
    }
  }
  .placeOrder {
    color: #fff;
    font-size: 30rpx;
    width: 226rpx;
    height: 70rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 70rpx;
    margin-left: 22rpx;
  }
  .button {
    .bnt {
      font-size: 28rpx;
      color: #999;
      border-radius: 50rpx;
      border: 1px solid #999;
      width: 160rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
    }
    form ~ form {
      margin-left: 17rpx;
    }
  }
}

// 其它样式
.invalidClas {
  position: relative;
  z-index: 111;
  top: -120rpx;
}
.invalidClasNO {
  position: static;
  margin-top: 15px;
}
.uni-p-b-96 {
  height: 96rpx;
}
// .my_nav {
//   top: calc(44px + 88rpx + 50rpx) !important;
// }
// .my_nav_top {
//   margin-top: calc(44px + 88rpx + 30rpx + 105rpx) !important;
// }
</style>