购物车缓存+页面

src/views/shopCart/Info/detail/index.vue

@@ -1,21 +1,25 @@
 <template>
   <div>
+
+    {{cartInfoAttr}}
     <span style="color: #8492a6">我的购物车</span>
     <br> <br> <br>
     <el-card class="box-card">
       <template>
         <el-table
+          ref="multipleTable"
           :data="cartInfoAttr"
-          style="width: 100%;">
+          style="width: 100%;"
-          <el-table-column
+          @selection-change="handleSelectionChange"
-            type="selection"
+        >
-            width="55">
+          <el-table-column type="selection" width="55"></el-table-column>
-          </el-table-column>
           <el-table-column label="商品信息" align="center">
             <template v-slot="cartInfo">
               <div>
                 <img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
                 <span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
+                {{cartInfo.row.projectName}}
+                <br>
                 {{ cartInfo.row.productSkuInfo.sku }}
               </div>
             </template>
@@ -25,15 +29,16 @@
               <span style="font-size: 16px">¥{{ cartInfo.row.productSkuInfo.price }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="数量" align="center">
+          <el-table-column label="数量" align="center" width="150">
             <template v-slot="cartInfo">
-              <el-input-number v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字"></el-input-number>
+              <el-input-number v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字" @change="changeNum(cartInfo.row)"></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="小计" align="center">
             <template v-slot="cartInfo">
               <span style="color: red;font-size: 16px">¥{{ cartInfo.row.subtotal }}</span>
             </template>
+            show-overflow-tooltip
           </el-table-column>
           <el-table-column label="操作" align="center">
             <template v-slot="cartInfo">
@@ -55,7 +60,11 @@
               <div>
                 <img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
                 <span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
+                {{cartInfo.row.projectName}}
+                <br>
                 {{ cartInfo.row.productSkuInfo.sku }}
+                <span v-if="cartInfo.row.productSkuInfo.stock == 0" style="color: red">已售罄</span>
+                <span v-else style="color: red">已下架</span>
               </div>
             </template>
           </el-table-column>
@@ -76,14 +85,32 @@
           </el-table-column>
           <el-table-column align="center">
             <template v-slot="cartInfo">
-              <el-button type="text" style="color: black">移入收藏夹</el-button>
-              <br>
               <el-button type="text" style="color: black">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </template>
     </el-card>
+    <br><br>
+    <!--    计算模块-->
+    <el-card>
+      <div>
+        <el-checkbox style="margin-top: 15px;margin-right: 20px" v-model="checkAll" @change="checkedAll">全选</el-checkbox>
+        <el-button type="text" style="color: black">删除选中商品</el-button>
+        <el-button type="text" style="color: black">移入收藏夹</el-button>
+        <div style="float: right;margin-bottom: 15px" >
+          <el-button style="width: 120px;height: 50px;" type="danger">下单结算</el-button>
+        </div>
+        <div style="float: right;margin-top: 12px;margin-right: 20px;font-size: 14px;color: #8492a6">
+          共 <span style="font-size: 16px;color: red">{{ computeInfo.packagesSum }}</span> 件商品，已选择 <span style="font-size: 16px;color: red">{{ computeInfo.packagesNumber }}</span> 件
+          <el-divider direction="vertical"></el-divider>
+          商品合计 : ¥{{ computeInfo.priceTotal }} <span style="margin-left: 10px"> 活动优惠 </span>: -¥{{ 0.00 }}
+          <el-divider direction="vertical"></el-divider>
+          应付总额：<span style="color: red;font-size: 20px"><b>¥{{ computeInfo.copeWith }}</b></span>
+        </div>
+
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -92,38 +119,47 @@ export default {
   name: "index",
   data() {
     return {
+      checkAll: false,
+      multipleSelection:[],
       borderBoolean: false,
       showHeader: false,
+      selectedList:[],
       cartInfoAttr: [
         {
+          id:1,
           num: 2,
           subtotal: 478,
+          isSelected:"Y",
+          projectName: '外套',
           productSkuInfo: {
             sku: '黑色-M',
             price: 239.0,
-            name: '上衣撒大大大大大阿达大大',
             stock: 10,
             image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
           }
         },
         {
+          id:2,
           num: 1,
           subtotal: 129,
+          isSelected:"Y",
+          projectName: '外套',
           productSkuInfo: {
             sku: '红色-S',
             price: 129.0,
-            name: '裤子',
             stock: 12,
             image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
           }
         },
         {
+          id:3,
           num: 3,
           subtotal: 477,
+          isSelected:"N",
+          projectName: '裤子',
           productSkuInfo: {
             sku: '白色-XL',
             price: 159,
-            name: '外套',
             stock: 10,
             image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
           }
@@ -131,21 +167,190 @@ export default {
       ],
       loseCartInfoAttr: [
         {
+          id:4,
           num: 2,
           subtotal: 478,
+          projectName: 'T恤衫',
           productSkuInfo: {
             sku: '黑色-M',
             price: 239.0,
-            name: '嘿嘿黑',
+            stock: 10,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
+          }
+        },
+        {
+          id:5,
+          num: 3,
+          subtotal: 478,
+          projectName: 'T恤衫',
+          productSkuInfo: {
+            sku: '红色-XL',
+            price: 239.0,
             stock: 10,
             image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
           }
         }
-      ]
+      ],
+      computeInfo: {
+        packagesNumber: 0,
+        packagesSum: 0,
+        priceTotal: 0,
+        copeWith: 0
+      }
     }
   },
   methods: {
-  }
+    // // 按钮变色
+    // changeTextColor() {
+    //   this.buttonTextColor = 'blue'; // 设置鼠标悬停时的文字颜色
+    //   console.log(this.buttonTextColor)
+    // },
+    // resetTextColor() {
+    //   this.buttonTextColor = 'black'; // 恢复默认的文字颜色
+    // },
+
+    //全选   true
+    checkedAll(selectAll) {
+
+      this.selectedList = []
+      if (selectAll) {
+        this.toggleSelection(this.cartInfoAttr)
+        this.selectedList = this.cartInfoAttr
+      }else{
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    /**
+     * 重置购物车已选择商品计算信息
+     */
+    computeInfoReset() {
+      this.computeInfo.packagesNumber = 0
+      this.computeInfo.priceTotal = 0
+      this.computeInfo.copeWith = 0
+      this.selectedList = []
+    },
+
+    //购物车商品选中
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+
+    //购物车商品选择改变方法
+    handleSelectionChange(val) {
+      console.log(val)
+      this.computeInfoReset()
+      this.selectedList = val
+      this.cartInfoAttr.forEach(cartInfo => {
+        cartInfo.isSelected = 'N'
+      })
+      if (val.length == this.cartInfoAttr.length) {
+        this.checkAll = true
+      }else{
+        this.checkAll = false
+      }
+      val.forEach(cartInfo => {
+
+        this.cartInfoAttr[this.cartInfoAttr.indexOf(cartInfo)].isSelected = 'Y'
+
+        this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
+        this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
+        this.computeInfo.packagesNumber += parseInt(cartInfo.num)
+      })
+    },
+
+    //计算购物车商品总件数
+    computePackagesSum() {
+      this.computeInfo.packagesSum = 0
+      this.cartInfoAttr.forEach(cartInfo => {
+        this.computeInfo.packagesSum += cartInfo.num
+      })
+      this.loseCartInfoAttr.forEach(loseCartInfo => {
+        this.computeInfo.packagesSum += loseCartInfo.num
+      })
+    },
+
+    //改变购物车商品数量
+    changeNum(row) {
+      if (row.num === row.productSkuInfo.stock) {
+        this.$message({
+          message: '商品: '+row.projectName+' 库存不足',
+          type: 'warning'
+        });
+      }
+      this.computeInfoReset()
+      this.computeInfo.packagesSum = 0
+      this.cartInfoAttr.forEach(cartInfo => {
+        if (cartInfo.id == row.id){
+          cartInfo.subtotal = parseFloat(cartInfo.productSkuInfo.price) * parseInt(row.num)
+        }
+        if (cartInfo.isSelected == 't'){
+          this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
+          this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
+          this.computeInfo.packagesNumber += parseInt(cartInfo.num)
+        }
+      })
+      this.computePackagesSum()
+    },
+
+    //获取购物车详情信息
+    cartInfoList() {
+      this.cartInfoAttr.forEach(cartInfo => {
+        this.computeInfo.packagesSum += cartInfo.num
+      })
+      this.loseCartInfoAttr.forEach(loseCartInfo => {
+        this.computeInfo.packagesSum += loseCartInfo.num
+      })
+      this.cartInfoAttr.forEach(cartInfo => {
+        if (cartInfo.isSelected == 't'){
+          this.selectedList.push(cartInfo)
+        }
+      })
+
+    }
+  },
+  mounted() {
+    this.toggleSelection(this.selectedList)
+  },
+  created() {
+    this.cartInfoList()
+  },
+    // handleSelectionChange(val){
+    //   this.multipleSelection=[]
+    //   this.cartInfoAttr.forEach(cartInfoAttr=>{
+    //
+    //     // 检查val数组中是否有与当前cartInfoAttr的projectName和productSkuInfo.sku相匹配的对象
+    //    const selected=val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName===cartInfoAttr.projectName)
+    //
+    //     // 根据selectedItem是否存在来设置isSelected属性   有-->"Y"  没有-->"N"
+    //     cartInfoAttr.isSelected=selected ? "Y" : "N";
+    //
+    //     // 如果item被选中，则将其SKU添加到multipleSelection数组中
+    //     if (cartInfoAttr.isSelected==="Y"){
+    //       this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
+    //     }
+    //   })
+    //   console.log(this.multipleSelection)
+    // }
+    // handleSelectionChange(val){
+    //   this.multipleSelection=[]
+    //   this.cartInfoAttr.forEach(cartInfoAttr=>{
+    //    const selected =val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName === cartInfoAttr.projectName)
+    //
+    //     cartInfoAttr.isSelected=selected? "Y" :"N";
+    //
+    //    if (cartInfoAttr.isSelected==="Y"){
+    //      this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
+    //    }
+    //
+    //   })
+    //   console.log(this.multipleSelection)
+    // }
 }
 </script>