diff --git a/src/views/shopCart/Info/detail/index.vue b/src/views/shopCart/Info/detail/index.vue index 4d9cd51..e652478 100644 --- a/src/views/shopCart/Info/detail/index.vue +++ b/src/views/shopCart/Info/detail/index.vue @@ -1,21 +1,25 @@ +

+ + +
+ 全选 + 删除选中商品 + 移入收藏夹 +
+ 下单结算 +
+
+ 共 {{ computeInfo.packagesSum }} 件商品，已选择 {{ computeInfo.packagesNumber }} 件 + + 商品合计 : ¥{{ computeInfo.priceTotal }} 活动优惠 : -¥{{ 0.00 }} + + 应付总额：¥{{ computeInfo.copeWith }} +
+ +
+ @@ -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) + // } }