购物车客户端页面

muyu-ruoyi-ui/src/views/shopCart/info/detail/index.vue

@@ -5,7 +5,9 @@
     <el-card class="box-card">
       <template>
         <el-table
+          ref="multipleTable"
           :data="cartInfoAttr"
+          @selection-change="handleSelectionChange">
           style="width: 100%;">
           <el-table-column
             type="selection"
@@ -27,7 +29,7 @@
           </el-table-column>
           <el-table-column label="数量" align="center">
             <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" @change="changeNum(cartInfo.row)" label="描述文字"></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="小计" align="center">
@@ -55,7 +57,9 @@
               <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.productSkuInfo.sku }}
+                {{ cartInfo.row.productSkuInfo.sku }} <br>
+                <span v-if="cartInfo.row.productSkuInfo.stock == 0" style="color: red">已售罄</span>
+                <span v-else style="color: red">已下架</span>
               </div>
             </template>
           </el-table-column>
@@ -84,6 +88,26 @@
         </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,12 +116,16 @@ export default {
   name: "index",
   data() {
     return {
+      checkAll: false,
       borderBoolean: false,
       showHeader: false,
+      selectedList: [],
       cartInfoAttr: [
         {
+          id: 1,
           num: 2,
           subtotal: 478,
+          isSelected: 't',
           productSkuInfo: {
             sku: '黑色-M',
             price: 239.0,
@@ -107,8 +135,10 @@ export default {
           }
         },
         {
+          id: 2,
           num: 1,
           subtotal: 129,
+          isSelected: 't',
           productSkuInfo: {
             sku: '红色-S',
             price: 129.0,
@@ -118,8 +148,10 @@ export default {
           }
         },
         {
+          id: 3,
           num: 3,
           subtotal: 477,
+          isSelected: 'f',
           productSkuInfo: {
             sku: '白色-XL',
             price: 159,
@@ -131,6 +163,7 @@ export default {
       ],
       loseCartInfoAttr: [
         {
+          id: 4,
           num: 2,
           subtotal: 478,
           productSkuInfo: {
@@ -140,14 +173,150 @@ export default {
             stock: 10,
             image: 'http://127.0.0.1:9300/statics/2024/03/29/屏幕截图 2023-11-02 194246_20240329165050A012.png'
           }
+        },
+        {
+          id: 5,
+          num: 1,
+          subtotal: 439,
+          productSkuInfo: {
+            sku: '红色-XL',
+            price: 439.0,
+            name: '嘻嘻嘻',
+            stock: 0,
+            image: 'http://127.0.0.1:9300/statics/2024/03/29/屏幕截图 2023-11-02 194246_20240329165050A012.png'
+          }
         }
-      ]
+      ],
+      computeInfo: {
+        packagesNumber: 0,
+        packagesSum: 0,
+        priceTotal: 0,
+        copeWith: 0
+      }
     }
   },
   methods: {
+    //按钮变色
+    // changeTextColor() {
+    //   this.buttonTextColor = 'blue'; // 设置鼠标悬停时的文字颜色
+    //   console.log(this.buttonTextColor)
+    // },
+    // resetTextColor() {
+    //   this.buttonTextColor = 'black'; // 恢复默认的文字颜色
+    // },
+
+    //全选
+    checkedAll(selectAll) {
+      if (selectAll) {
+        this.$refs.multipleTable.clearSelection();
+        this.selectedList = []
+        this.toggleSelection(this.cartInfoAttr)
+        this.selectedList = this.cartInfoAttr
+      }else{
+        this.selectedList = []
+        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) {
+      this.computeInfoReset()
+      this.selectedList = val
+      this.cartInfoAttr.forEach(cartInfo => {
+        cartInfo.isSelected = 'f'
+      })
+      if (val.length == this.cartInfoAttr.length) {
+        this.checkAll = true
+      }else{
+        this.checkAll = false
+      }
+      val.forEach(cartInfo => {
+        this.cartInfoAttr[this.cartInfoAttr.indexOf(cartInfo)].isSelected = 't'
+        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.productSkuInfo.name+' 库存不足',
+          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()
   }
 }
 </script>
 
 <style scoped>
 </style>
+
+