删除购物车产品

components.d.ts

@@ -43,7 +43,7 @@ declare module 'vue' {
     IndustryTypeCard: typeof import('./src/components/industryTypeCard/index.vue')['default']
     Info: typeof import('./src/components/Enterprise/info.vue')['default']
     InitPay: typeof import('./src/components/personalRecharge/initPay.vue')['default']
-    Item: typeof import('./src/components/PositionLongStrip/item.vue')['default']
+    Item: typeof import('./src/components/Position/item.vue')['default']
     JobTypeCard: typeof import('./src/components/jobTypeCard/index.vue')['default']
     ListGroup: typeof import('./src/components/FormUI/nestedListGroup/components/listGroup.vue')['default']
     Loading: typeof import('./src/components/Loading/index.vue')['default']

src/views/mall/cart/index.vue

@@ -1,7 +1,10 @@
 <template>
   <Navbar class="mb-3" />
-  <v-card class="default-width card-box mb-5 pa-5">
-    <div v-if="cartList.length">
+  <v-card class="default-width card-box mb-5 pa-5 resume-box">
+    <div class="resume-header">
+      <div class="resume-title">我的购物车</div>
+    </div>
+    <div v-if="cartList.length" class="mt-3">
       <v-data-table
         v-model="selectedData"
         :items="cartList"
@@ -12,7 +15,7 @@
         select-strategy="all"
       >
         <template v-slot:[`header.data-table-select`]>
-          <v-checkbox v-model="selectAll" hide-details color="primary" indeterminate @update:modelValue="handleSelectAll"></v-checkbox>
+          <v-checkbox v-model="selectAll" hide-details color="primary" @update:modelValue="handleSelectAll"></v-checkbox>
         </template>
         <template v-slot:[`item.data-table-select`]="{ item }">
           <v-checkbox v-model="item.selected" hide-details color="primary" @update:modelValue="val => handleSelect(val, item.id)"></v-checkbox>
@@ -33,10 +36,18 @@
           />
         </template>
         <template v-slot:[`item.actions`]="{ item }">
-          <v-btn color="error" @click.stop="handleDelete(item.id)" variant="text">删除</v-btn>
+          <v-btn color="error" @click.stop="handleDelete(false, item.id)" variant="text">删除</v-btn>
         </template>
         <template #bottom></template>
       </v-data-table>
+      <v-divider></v-divider>
+      <div class="d-flex align-center justify-space-between py-4">
+        <v-btn :disabled="!selectedData.length" color="error" variant="outlined" @click.stop="handleDelete(true)">删除选中的商品</v-btn>
+        <div class="d-flex align-center">
+          <div class="color-666 mr-8">共{{ totalCount }}件商品，合计：￥{{ fen2yuan(totalPrice) }}</div>
+          <v-btn :disabled="!totalCount" color="primary" @click.stop="handleSettlement">去结算<span v-if="totalCount > 0">（{{ totalCount }}）</span></v-btn>
+        </div>
+      </div>
     </div>
     <div v-else class="text-center">
       <Empty :elevation="false" message="购物车空空如也，去首页逛逛吧" />
@@ -54,14 +65,16 @@ import { getMallUserCartList } from '@/api/mall/cart'
 import { fen2yuan } from '@/hooks/web/useGoods'
 import GoodsItem from '../components/GoodsItem'
 import { updateCartSelected, updateCartCount, deleteCartGoods } from '@/api/mall/cart'
+import Snackbar from '@/plugins/snackbar'
 
 const router = useRouter()
 const cartList = ref([])
 const selectAll = ref(false)
 const headers = [
-  { title: '商品信息', key: 'spuName', sortable: false, align: 'center' },
+  { title: '商品信息', key: 'spuName', sortable: false },
   { title: '单价', key: 'sku.price', sortable: false, value: item => '￥' + fen2yuan(item.sku.price) },
   { title: '数量', key: 'count', sortable: false },
+  { title: '合计', key: 'totalCount', sortable: false, value: item => '￥' + fen2yuan(item.sku.price * item.count) },
   { title: '操作', key: 'actions', align: 'center', sortable: false }
 ]
 
@@ -70,7 +83,6 @@ const getCartList = async () => {
   const data = await getMallUserCartList()
   cartList.value = data.validList || []
   selectAll.value = cartList.value.every(e => e.selected)
-  console.log(selectAll.value, 'selectAll.value')
 }
 onMounted(async () => {
   getCartList()
@@ -78,10 +90,9 @@ onMounted(async () => {
 
 // 全选
 const handleSelectAll = async (selected) => {
-  console.log(selected, 'selected')
-  // const ids = cartList.value.map(item => item.id)
-  // await updateCartSelected({ ids, selected })
-  // getCartList()
+  const ids = cartList.value.map(item => item.id)
+  await updateCartSelected({ ids, selected })
+  getCartList()
 }
 
 // 单选
@@ -97,9 +108,30 @@ const selectedData = computed(() => {
   }).filter(Boolean)
 })
 
+// 总结算金额
+const totalPrice = computed(() => {
+  return cartList.value.reduce((total, item) => {
+    if (item.selected) {
+      return total + item.sku.price * item.count
+    }
+    return total
+  }, 0)
+})
+
+// 总商品件数
+const totalCount = computed(() => {
+  return cartList.value.reduce((total, item) => {
+    if (item.selected) {
+      return total + item.count
+    }
+    return total
+  }, 0)
+})
+
 // 删除购物车中的商品
-const handleDelete = async (id) => {
-  await deleteCartGoods(id)
+const handleDelete = async (isAll, id) => {
+  const ids = isAll ? selectedData.value.join(',') : [id]
+  await deleteCartGoods(ids)
   await getCartList()
 }
 
@@ -108,6 +140,11 @@ const handleChangeCount = async (count, id) => {
   await updateCartCount({ count, id })
   await getCartList()
 }
+
+// 去结算
+const handleSettlement = () => {
+  Snackbar.warning('功能开发中...')
+}
 </script>
 
 <style scoped lang="scss">