hjb_pc/pages/order/shopping_cart.vue

<template>
  <div class="shoppingCart">
    <div class="wrapper_1200">
      <div class="title w-1200px acea-row row-between">
        <div class="fontColor333 fonts16">购物车({{useStore.carNumber}})</div>
      </div>
      <div class="acea-row h-50px b-rd-12px bg-#FFFFFF pl-30px py-16px mb-20px">
        <div class="allSelect w-285px" @click="allChecked">
          <div class="checkbox-wrapper">
            <div class="well-check acea-row">
              <input type="checkbox" name="" value="" :checked="isAllSelect" @click="allChecked" />
              <i class="icon mr-10px" style="top: 9px"></i>
              <div class="checkAll text-14px text-#666">全选</div>
            </div>
          </div>
        </div>
        <div class="text-14px w-217px text-#666">商品信息</div>
        <div class="text-14px w-178px text-#666 text-center">单价</div>
        <div class="text-14px w-150px text-#666 text-center">数量</div>
        <div class="text-14px w-230px text-#666 text-center">金额</div>
        <div class="text-14px w-76px text-#666 text-center">操作</div>
      </div>
      <div ref="shoppingCartRef" v-loading="loading">
        <div class="cartList" v-if="cartList.cartValid.length > 0">
          <div
            class="borRadius mbtom20 item-box"
            v-for="(item, index) in cartList.cartValid"
            :key="index"
            style="overflow: hidden"
          >
            <div class="checkbox-wrapper acea-row mbtom30">
              <label class="well-check acea-row row-middle">
                <input type="checkbox" name="" value="" :checked="item.checked" @click="storeChecked(item, index)" />
                <i class="icon mr-24px cursors"></i>
              </label>
              <div @click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })" class="acea-row">
                <div v-if="item.merIsSelf"><span class="lh-12px bg-color inline-block text-12px text-#fff b-rd-2px py-2px mr-6px px-4px relative" style="top:-2px">自营</span></div>
                <span class="checkAll fonts14 fontColor333 cursors">{{ item.merName }}</span>
              </div>
            </div>
            <div class="storeCartList">
              <div class="item acea-row row-middle mbtom30" v-for="(itemn, indexn) in item.cartInfoList" :key="indexn">
                <div class="allSelect acea-row row-center-wrapper">
                  <div class="checkbox-wrapper">
                    <label class="well-check">
                      <input
                        type="checkbox"
                        name=""
                        value=""
                        :checked="itemn.checked"
                        @click="switchSelect(index, indexn)"
                      />
                      <i class="icon cursors"></i>
                    </label>
                  </div>
                </div>
                <div class="info ml-20px acea-row row-middle cursors" @click="handlerNuxtLink(itemn.productId, 'normal')">
                  <el-image class="backImg" :src="itemn.image" lazy></el-image>
                  <div class="text">
                    <div class="name line1 fontColor333 text-14px font-500 oppoSans-M">{{ itemn.proName }}</div>
                    <div class="infor fontColor333 fonts14 font-400 oppoSans-R" v-if="itemn.sku">规格：{{ itemn.sku }}</div>
                  </div>
                </div>
                <div class="price acea-row row-center-wrapper">
                  ￥{{ itemn.price }}
                </div>
                <div class="num acea-row row-center-wrapper">
                  <button
                    class="iconfont icon-shangpinshuliang-jian cursors flex-center"
                    :class="itemn.numSub ? 'greyCar' : ''"
                    @click.prevent="handleReduce(itemn)"
                  >
                    -
                  </button>
                  <input class="numCon" min="0"  v-model="itemn.cartNum" type="number" @input="inputNum(itemn)" />
                  <button
                    class="iconfont icon-shangpinshuliang-jia rigth cursors flex-center"
                    :class="itemn.numAdd ? 'greyCar' : ''"
                    @click.prevent="handlePlus(itemn)"
                  >
                    +
                  </button>
                </div>
                <div class="money acea-row font-color justify-center" style="align-items: end">
                  <span class="text-12px font-600 dinProSemiBold">￥</span><span class="lh-18px font-600 dinProSemiBold text-18px">{{ (itemn.price * itemn.cartNum).toFixed(2) }}</span>
                </div>
                <div class="operate">
                  <div @click="handleCartToCollect(itemn.id)" class="fonts14 fontColor6 lh-14px mb-15px cursors collect">移入收藏库</div>
                  <div @click="handleDeleteGoods(itemn.id)" class="fonts14 fontColor6 lh-14px cursors delete">删除</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cartList invalid borRadius" v-if="cartList.cartInvalid.length > 0">
          <div class="store-info acea-row row-between mbtom30">
            <div class="storeAllSelect cursor" @click="goodsOpen">
              <label class="well-check">
                <span
                  class="iconfont fonts14 fontColor333"
                  :class="goodsHidden == true ? 'icon-xiangxia' : 'icon-xiangshang'"
                  >失效商品</span
                >
              </label>
            </div>
            <div class="del" @click="unsetCart"><span class="fontColor6 fonts14 cursors">删除</span></div>
          </div>
          <div v-show="goodsHidden">
            <template v-for="(itemn, index) in cartList.cartInvalid" :key="index">
              <div
                class="item acea-row row-middle row-between mb-30px"
                v-for="(item, indexn) in itemn.cartInfoList"
                :key="indexn"
              >
                <div class="info acea-row row-center-wrapper">
                  <el-image class="backImg" :src="item.image" lazy></el-image>
                  <div class="text">
                    <div class="name line1 grey fonts16">{{ item.proName }}</div>
                    <div class="infor" v-if="item.suk">：{{ item.sku }}</div>
                  </div>
                </div>
                <div class="fonts14 fontColor333">该商品暂不支持购买</div>
              </div>
            </template>
          </div>
        </div>
        <div class="h-90px" v-if="!useStore.footerIsIntersecting"></div>
        <div
            :style="{position:!useStore.footerIsIntersecting ?'fixed':'static'}"
          class="footer acea-row row-between-wrapper bottom-0 z-10"
          v-if="cartList.cartValid.length || cartList.cartInvalid.length"
        >
          <div class="num acea-row">
            <div class="allSelect mr-20px" @click="allChecked">
              <div class="checkbox-wrapper">
                <div class="well-check acea-row">
                  <input type="checkbox" name="" value="" :checked="isAllSelect" @click="allChecked" />
                  <i class="icon cursors" style="top: 9px"></i>
                  <div class="checkAll text-14px text-#333 cursors">全选</div>
                </div>
              </div>
            </div>
            <div class="text-14px text-#333 mr-20px cursors" @click="handleDeleteAllGoods">删除选中</div>
            <div class="text-14px text-#333 cursors" @click="handleAllCartToCollect">移入收藏夹</div>
          </div>
          <div class="acea-row row-middle">
            <div class="total text-14px text-#282828">
              合计：<span class="font-color text-14px oppoSans-M">￥</span><span class="font-color text-22px font-600 dinProRegular ">{{ countmoney }}</span>
            </div>
            <div class="bnt bg-color cursors" @click="handleSubOrder" v-loading="btnloading">去结算 ( {{ cartCount }} )</div>
          </div>
        </div>
        <div class="noCart" :style="{ height: ScrollHeight-100 + 'px' }" v-if="!cartList.cartValid.length && !cartList.cartInvalid.length">
          <empty-page title="购物车还是空的呦~">
            <template v-slot:emptyImage>
              <img src="@/assets/images/gouwukong.png">
            </template>
          </empty-page>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Add, Mul } from '~/utils/util'
//购物车有效商品列表
import {cartDeleteApi, cartListApi, cartNumApi, cartToCollectApi} from '~/server/orderApi'
import useOrder from "~/composables/useOrder";
import {ref} from "vue";
import {useAppStore} from "~/stores/app";
const useStore = useAppStore()
const {handlerNuxtLink, handleIntoPage, onGetCartCount} = useOrder()
await onGetCartCount()

//购物车失效商品列表
const isAllSelect = ref(false)
const countmoney = ref(0)
const cartNum = ref(0)
const loading = ref(true)
const goodsHidden = ref(true)
const btnloading = ref(false)

//窗口的高度
const { getWindowHeight } = useScrollHeight()
const ScrollHeight = ref<number>(getWindowHeight() - 176- 73 ) //购物车窗口的高度


/**
 * 购物车列表数据
 */
const { data: cartList, refresh } = await useAsyncData(async () => {
  const cartValid = await cartListApi(true)
  const cartInvalid = await cartListApi(false)
  loading.value = false
  let checked = []
  cartValid.forEach((cart) => {
    cart.cartInfoList.forEach((cartItem) => {
      if (checked.length) {
        cartItem.checked = checked.indexOf(cartItem.id) > -1
      } else {
        cartItem.checked = true
      }
      if (cartItem.cartNum === 1) {
        cartItem.numSub = true
      } else {
        cartItem.numSub = false
      }
      if (cartItem.cartNum === cartItem.stock) {
        cartItem.numAdd = true
      } else {
        cartItem.numAdd = false
      }
    })
  })
  return Promise.resolve({ cartValid, cartInvalid })
})
/**
 * 判断单个店铺是不是全选
 */
const storeAllChceked = async () => {
  let selectnum,
    selectAllnum = [],
    checknum = 0,
    cartValid = cartList.value.cartValid
  for (let j = 0; j < cartValid.length; j++) {
    selectnum = []
    for (let k = 0; k < cartValid[j]['cartInfoList'].length; k++) {
      checknum++
      if (cartValid[j]['cartInfoList'][k].checked) {
        selectnum.push(true)
        selectAllnum.push(true)
      } else {
        selectnum.length - 1
        selectAllnum.length - 1
      }
      cartValid[j]['checked'] = selectnum.length === cartValid[j]['cartInfoList'].length
      isAllSelect.value = selectAllnum.length === checknum
    }
  }
}
storeAllChceked()

/**
 * 单个店铺商品全选
 * @param item
 * @param index
 */
const storeChecked = async (item: any, index: number) => {
  item.checked = !item.checked
  cartList.value.cartValid[index]['cartInfoList'].forEach((cart: object) => {
    cart.checked = item.checked
  })
  await storeAllChceked()
  await countMoney()
}

/**
 * 单选
 * @param index
 * @param indexn
 */
const switchSelect = async (index: number, indexn: number) => {
  let cart = cartList.value.cartValid[index]['cartInfoList'][indexn]
  cart.checked = !cart.checked
  let len = 0
  let selectnum = []
  for (let j = 0; j < cartList.value.cartValid.length; j++) {
    for (let k = 0; k < cartList.value.cartValid[j]['cartInfoList'].length; k++) {
      len++
      if (cartList.value.cartValid[j]['cartInfoList'][k].checked === true) {
        selectnum.push(true)
      }
    }
  }
  isAllSelect.value = selectnum.length === len

  await storeAllChceked()
  await countMoney()
}

/**
 * 全选
 */
const allChecked = async () => {
  let selectAllStatus = isAllSelect.value
  selectAllStatus = !selectAllStatus
  cartList.value.cartValid.forEach((cart) => {
    cart.checked = selectAllStatus
    cart.cartInfoList.forEach((cartItem) => {
      cartItem.checked = selectAllStatus
    })
  })
  isAllSelect.value = selectAllStatus
  await countMoney()
}

const countNum = () => {
  let num = 0
  let checkedList = []
  cartList.value.cartValid.forEach((item) => {
    item.cartInfoList.forEach((cart) => {
      if (cart.checked) {
        checkedList.push(cart.id)
        num++
      }
    })
  })
  cartNum.value = num
}

/**
 * 计算总价
 */
const cartCount = ref<number>(0)
const countMoney = async () => {
  let carmoney = 0,
    totalNum = 0
  let array = cartList.value.cartValid
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array[i]['cartInfoList'].length; j++) {
      if (array[i]['cartInfoList'][j].checked === true) {
        carmoney = Add(carmoney, Mul(array[i]['cartInfoList'][j].cartNum, array[i]['cartInfoList'][j]['price']))
        totalNum += Number(array[i]['cartInfoList'][j].cartNum)
      }
    }
  }
  cartCount.value = totalNum
  countmoney.value = carmoney
  await countNum()
}
countMoney()

/**
 * 购物车加
 * @param goods
 * @param index
 */
const handlePlus = async (goods: product, index: number) => {
  goods.cartNum++
  if ( goods.cartNum > goods.stock) {
    goods.cartNum = goods.stock
    goods.numAdd = true
    goods.numSub = false
    return
  }else if (goods.cartNum === goods.stock){
    goods.numAdd = true;
    goods.numSub = false;
  } else {
    goods.numAdd = false
    goods.numSub = false
  }
  await countMoney()
  await syncCartNum(goods)
}
const syncCartNum = async (goods) => {
  await cartNumApi({ id: goods.id, number: goods.cartNum })
    .then(async (result: any) => {
    })
    .catch(async (err: any) => {
      goods.cartNum--
    })
}

//购物车减
const handleReduce =async (goods:any) => {
  if (goods.cartNum <= 1) {
    goods.cartNum = 1;
    goods.numSub = true;
  } else {
    goods.cartNum = Number(goods.cartNum) - 1
    goods.numSub = false;
    goods.numAdd = false;
    if (goods.cartNum <= 1) {
      goods.numSub = true;
    }
    await countMoney()
    await syncCartNum(goods)
  }
}

//手动输入
const inputNum= async (item:any) =>{
  if(item.cartNum<0 || !item.cartNum) item.cartNum =1
  item.cartNum = parseInt(item.cartNum) >= item.stock ? item.stock : item.cartNum;
  item.cartNum = parseInt(item.cartNum) <= 1 || isNaN(parseInt(item.cartNum)) ? 1 : item.cartNum;
  await countMoney()
  await syncCartNum(item)
}

/**
 * 购物车结算
 */
const handleSubOrder = async () => {
  let list = cartList.value.cartValid,
    id = []
  list.forEach(function (val) {
    val.cartInfoList.forEach(function (val) {
      if (val.checked === true) {
        id.push(val.id)
      }
    })
  })
  if (id.length === 0) {
    return feedback.msgError('请选择商品')
  }
  //btnloading.value = true
  await onPreOrder(id)
}

/**
 * 预下单
 * @param id
 */
const useOrders = useOrder()
const onPreOrder = async (id: Array<T>) => {
  let shoppingCartId = id.map((item:any) => {
    return {
      shoppingCartId: Number(item),
    }
  })
  await useOrders.getPreOrder('shoppingCart', shoppingCartId)
}

// 删除购物车商品
const handleDeleteGoods= async (id:number)=>{
  await onDeleteGoods([id])
}

//删除失效商品
const unsetCart = async ()=>{
  let list = cartList.value.cartInvalid,id = []
  list.forEach(function (val:any) {
    val.cartInfoList.forEach(function (v:any) {
      id.push(v.id)
    })
  })
  await onDeleteGoods(id)
}

const getCheckedGoods = async ()=>{
  let list = cartList.value.cartValid,id = []
  list.forEach(function (val:any) {
    val.cartInfoList.forEach(function (v:any) {
      if (v.checked === true) {
        id.push(v.id)
      }
    })
  })
}

//删除全部
const handleDeleteAllGoods= async ()=>{
  let list = cartList.value.cartValid,id = []
  list.forEach(function (val:any) {
    val.cartInfoList.forEach(function (v:any) {
      if (v.checked === true) {
        id.push(v.id)
      }
    })
  })
  await onDeleteGoods(id)
}

// 删除商品调接口
const onDeleteGoods = async (ids: number[]) =>{
  await cartDeleteApi({ids})
  await refresh()
  await onGetCartCount()
  await countMoney()
  await storeAllChceked()
}

//移入收藏库
const handleCartToCollect = async(id:number) => {
  await onCartToCollect([id])
}
//全部移入收藏库
const handleAllCartToCollect = async ()=>{
  let list = cartList.value.cartValid,id = []
  list.forEach(function (val:any) {
    val.cartInfoList.forEach(function (v:any) {
      if (v.checked === true) {
        id.push(v.id)
      }
    })
  })
  await onCartToCollect(id)
}
// 移入收藏库调接口
const onCartToCollect = async (ids: number[]) =>{
  await cartToCollectApi({ids})
  await refresh()
  await onGetCartCount()
  await countMoney()
  await storeAllChceked()
}
</script>
<style>
html {
  background: #F5F5F5 !important;
}
</style>
<style scoped lang="scss">
.collect, .delete{
  &:hover{
    color: #E93323;
  }
}
.numCon::after {
  content: none; /* 清空内容 */
}
@import '@/assets/scss/checkbox.scss';
.cursor {
  cursor: pointer;
}
.icon-xiangshang,
.icon-xiangxia {
  font-size: 14px !important;
}
.greyCar {
  color: #d0d0d0 !important;
  cursor: not-allowed;
}
.grey {
  color: #cccccc !important;
}
.shoppingCart {
  background-color: #F5F5F5;
  .noCart {
    padding-bottom: 1px;
    text-align: center;
    .pictrue {
      width: 274px;
      height: 174px;
      margin: 111px auto 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tip {
      font-size: 14px;
      color: #969696;
      margin-top: 20px;
    }
    .goIndex {
      width: 90px;
      height: 35px;
      border: 1px solid #282828;
      border-radius: 6px;
      text-align: center;
      line-height: 35px;
      font-size: 14px;
      color: #282828;
      margin: 24px auto 100px auto;
      display: block;
    }
  }
  .title {
    height: 73px;
    line-height: 73px;
    color: #999999;
    .home {
      color: #282828;
    }
  }
  .cartList {
    .item-box {
      padding: 30px;
      background: #fff;
    }
    .header {
      height: 54px;
      background: #eeeeee;
    }
    .checkAll {
      font-size: 14px;
      color: #333333;
    }
    .allSelect {
      position: relative;
    }
    .price {
      width: 180px;
    }
    .num {
      width: 150px;
    }
    .money {
      width: 230px;
    }
    .storeCartList {
      background: #fff;
    }
    .item {
      &:nth-last-child(1) {
        margin-bottom: 0 !important;
      }
      .info {
        .pictrue,
        .backImg {
          width: 100px;
          height: 100px;
          border-radius: 12px;
          margin-right: 20px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          width: 349px;
          .infor {
            margin-top: 10px;
          }
        }
      }
      .price {
        font-size: 14px;
      }
      .num {
        .iconfont {
          width: 40px;
          height: 34px;
          line-height: 34px;
          border: 1px solid #ccc;
          text-align: center;
          color: #999999;
          background-color: #fff;
          border-radius: 18px 0px 0px 18px;
        }
        .numCon {
          width: 54px;
          height: 32px;
          border: 0;
          border-top: 1px solid #cccccc;
          border-bottom: 1px solid #cccccc;
          font-size: 14px;
          color: #333333;
          text-align: center;
          line-height: 36px;
          outline: none;
        }
        .rigth {
          border-radius: 0px 18px 18px 0px !important;
        }
      }
      .money {
        font-size: 18px;
      }
      .operate {
        text-align: center;
      }
    }
    .iconfont {
      font-size: 20px;
    }
  }
  .store-info {
    background-color: #fff;
    align-items: center;
    .trader {
      display: inline-block;
      color: #fff;
      font-size: 12px;
      background-color: #e93323;
      width: 32px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      border-radius: 2px;
      margin-left: 7px;
    }
  }
  .invalid {
    padding: 30px;
    margin-top: 20px;
    background-color: #fff;
  }
  .footer {
    width: 1200px;
    height: 66px;
    background: #ffffff;
    box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    padding: 0 30px;
    border-radius: 12px;
    //position: fixed;
    //bottom: 0;
    .allSelect {
      position: relative;
      display: inline-block;
      .checkAll {
        margin-left: 10px;
      }
    }
    .bnt {
      height: 44px;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
      color: #fff;
      margin-left: 30px;
      padding: 0 26px;
      border-radius: 33px 33px 33px 33px;
    }
  }
}
</style>