商品购物车

src/api/shopCart/shop.js

@@ -51,3 +51,11 @@ export function delShop(id) {
     method: 'delete'
   })
 }
+
+export function checkState(state) {
+  return request({
+    url: '/shopCart/shop/checkState',
+    method: 'post',
+    data:state
+  })
+}

src/views/product/productInfo/detail/productDetails.vue

@@ -135,11 +135,19 @@
 <script>
 import {getPro} from "@/api/product/info";
 import rule from "@/views/product/rule/index.vue";
+import {addShop} from "@/api/shopCart/shop";
 
 export default {
   name: 'Index',
   data() {
     return {
+      /*加入购物车*/
+      joinShop:{
+        projectId:0,
+        projectSku:"",
+        num:0,
+        detailSku:[]
+      },
       /*选择商品sku信息*/
       goodSkuDetail:{},
       id: 0,
@@ -233,17 +241,23 @@ export default {
 
     /*加入购物车*/
     onSubmit() {
-      console.log(this.form)
       let length = this.form.ruleList.length;
+      let rule=[]
       for (let i = 0; i <length; i++) {
-        console.log(`${this.form.ruleList[i].name}:${this.form[`rule${i}`]}`)
+         rule.push(`${this.form.ruleList[i].name}:${this.form[`rule${i}`]}`)
       }
-      console.log(this.good)
+      this.joinShop.detailSku= rule.join(", ");
-
+      this.joinShop.projectId=this.good.id
+      this.joinShop.projectSku=this.checkgood.goodname
+      this.joinShop.num=this.form.num
+      console.log(this.joinShop)
+      addShop(this.joinShop).then(
+        res=>{
+          this.$message.success("添加成功")
+        }
+      )
     },
 
-
-
     details: function (id) {
       getPro(id).then(
         res => {

src/views/product/productInfo/detail/shopping.vue

@@ -6,25 +6,25 @@
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
     </el-breadcrumb>
-    {{shop}}
+    {{ shop }}
 
     <el-card>
       <el-table
+        ref="multipleTable"
         :data="shop"
         style="width: 100%"
-        row-key="id"
+        @selection-change="handleSelectionChange"
-        :default-checked-keys="defaultCheckedRows"
+      >
-        @selection-change="handleSelectionChange">
+        <el-table-column
-      <el-table-column
           type="selection"
-          width="100">
+          width="55">
         </el-table-column>
         <el-table-column
           label="商品信息"
           width="300">
           <template slot-scope="scope">
             <div class="cell-content">
-              <img  :src="scope.row.projectSkuInfo.image"  width="100px" height="100px" class="project-image">
+              <img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
               <div class="project-info">
                 <h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
                 <p class="project-description">{{ scope.row.detailSku }}</p>
@@ -47,37 +47,101 @@
           <template slot-scope="scope">
             <el-input-number v-model="scope.row.num"
                              @change="handleNumChange(scope.$index,scope.row)"
-                             :min="1"  label="描述文字"></el-input-number>
+                             :min="1" label="描述文字"></el-input-number>
           </template>
 
         </el-table-column>
         <el-table-column property="sum" label="小计" width="120">
           <template slot-scope="scope">
-            <span style="margin-left: 10px">{{ scope.row.num *scope.row.price }}</span>
+            <span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button
               size="mini"
-              @click="handleEdit( scope.row)">移入收藏夹</el-button>
+              @click="handleEdit( scope.row)">移入收藏夹
+            </el-button>
             <el-button
               size="mini"
               type="danger"
-              @click="handleDelete( scope.row)">删除</el-button>
+              @click="handleDelete( scope.row)">删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
       <el-divider></el-divider>
-      <el-card >
+      <span style="color: #97a8be">失效商品</span>
-        <el-checkbox @selection-change="handleSelectionChange">全选</el-checkbox>
+      <el-table
-          删除选中商品 移入到收藏夹
+        :data="oldshop"
-        <h1 style="color: red">￥ {{totalPrice}}</h1>
+        ref="multipleTableOld"
+        style="width: 100%"
+        @selection-change="handleSelectionChangeOld"
+      >
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          width="300">
+          <template slot-scope="scope">
+            <div class="cell-content">
+              <img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
+              <div class="project-info">
+                <h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
+                <p class="project-description">{{ scope.row.detailSku }}</p>
+              </div>
+            </div>
+          </template>
+
+        </el-table-column>
+        <el-table-column
+          prop="isselected"
+          width="100">
+        </el-table-column>
+        <el-table-column
+          prop="price"
+          width="100">
+        </el-table-column>
+        <el-table-column property="num" width="200">
+          <template slot-scope="scope">
+            <el-input-number disabled v-model="scope.row.num"
+                             @change="handleNumChange(scope.$index,scope.row)"
+                             :min="1" label="描述文字"></el-input-number>
+          </template>
+
+        </el-table-column>
+        <el-table-column property="sum" width="120">
+          <template slot-scope="scope">
+            <span  style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit( scope.row)">移入收藏夹
+            </el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete( scope.row)">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-card>
+        <el-checkbox v-model="selectAll" @change="handleSelectionChangeAll">全选</el-checkbox>
+        删除选中商品 移入到收藏夹
+        <h1 style="color: red">￥ {{ totalPrice +totalPriceOld}}</h1>
+        <h1 style="color: red">Old￥ {{ totalPriceOld }}</h1>
+        <h1 style="color: red">选中商品个数 {{num+numOld}}</h1>
         <el-button
           size="mini"
           type="danger"
           style="margin-left: 600px"
-        >下单结算</el-button>
+        >下单结算
+        </el-button>
       </el-card>
 
     </el-card>
@@ -86,78 +150,212 @@
 </template>
 <script>
 import {listShop} from "@/api/product/shop";
-import {testShop} from "@/api/shopCart/shop";
+import {checkState, testShop} from "@/api/shopCart/shop";
+import shop from "@/views/shopCart/shop/index.vue";
+import item from "@/layout/components/Sidebar/Item.vue";
 
 export default {
   name: 'Index',
   data() {
     return {
-      /*选中的行*/
+      /**/
-      multipleSelection:[],
+      selectAll:false,
       /*选中商品*/
-      selectedProduct:[],
+      selectedProduct: [],
+      num:0,
+      /*选中失效*/
+      selectedProductOld:[],
+      numOld:0,
+      /*每次选中的*/
+      selectedRows: [],
       /*总价钱*/
-      totalPrice:0,
+      totalPrice: 0,
-      /*图片*/
+      /*失效总价*/
-      src:"http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325171828A038.gif",
+      totalPriceOld:0,
       /*购物车对象*/
-      shop:[],
+      shop: [],
       /*查询对象*/
-      queryParams: {
+      queryParams: {},
-      },
+      ids: [],
+      /*购物车状态为选中*/
+      checkEd: [],
+      oldshop: [
+        {
+          "id": 3,
+          "projectId": 62,
+          "projectSku": "x红色钛合金",
+          "isselected": 1,
+          "detailSku": "尺码:x\n 颜色:红色 材质:钛合金",
+          "projectInfo": {
+            "id": 62,
+            "name": "失效",
+            "introduction": "失效",
+            "mianType": "49",
+            "parentType": "50",
+            "type": "51",
+            "image": "http://127.0.0.1:9300/statics/2024/03/25/屏幕截图 2024-03-15 201358_20240325165814A020.png",
+            "carouselImages": "http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325171828A038.gif",
+            "status": "0",
+            "ruleId": 8,
+            "brandId": 1
+          },
+          "projectSkuInfo": {
+            "id": 251,
+            "projectId": 62,
+            "sku": "x红色钛合金",
+            "stock": 23,
+            "price": 123,
+            "image": "http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325165822A022.gif"
+          },
+          "userId": 1,
+          "num": 1,
+          "price": 123,
+          "sumPrice": null
+        }
+      ]
     }
   },
   created() {
     this.shopList()
   },
-  watch:{
+  watch: {
-    "scope.row.num":{
+    selectedRows: {
-      handler(val){
+      handler(newVal, oldVal) {
-        console.log(val)
+        // 处理新选中的行
-      }
+        newVal.forEach(row => {
-    }
+          if (row.isselected === 1) {
-  },
+
-  computed:{
+          } else if (row.isselected === 0) {
-    defaultCheckedRows(){
+
-      return this.shop
+          }
-        .filter(row=>row.isselected==='Y')
+        });
-        .map(row=>row.id);
+
+        // 处理之前选中的但现在未选中的行
+        oldVal.forEach(row => {
+          if (!newVal.find(newRow => newRow.id === row.id)) {
+            // 如果oldVal中的行不在newVal中，说明它被取消了选中
+            if (row.isselected === 1) {
+              // let state = {
+              //   ids: []
+              // }
+              // state.ids=row.id
+              // state.flag = 0
+              // checkState(state).then(
+              //   res => {
+              //     this.$message.success("成功")
+              //     this.shopList()
+              //   }
+              // )
+            }
+            if (row.isselected === 0) {
+              // let state = {
+              //   ids: []
+              // }
+              // state.ids=row.id
+              // state.flag = 1
+              // checkState(state).then(
+              //   res => {
+              //     this.$message.success("成功")
+              //     this.shopList()
+              //   }
+              // )
+            }
+          }
+        });
+      },
+      deep: true // 深度监听selectedRow中的对象变化
     }
   },
   methods: {
     /*多选框*/
-    handleSelectionChange(val){
+    handleSelectionChange(val) {
-      this.multipleSelection=val
+      if (val.length === 0) {
-      this.selectedProduct=val.map(item=>({...item}));
+        this.selectedRows = []
+      } else {
+        this.selectedRows = val.slice(0, 1);
+      }
+      this.selectedProduct = val.map(item => ({...item}));
+      this.num=this.selectedProduct.length
+      this.selectAll=val.length
       this.countTotalPrice()
     },
+    /*失效商品*/
+    handleSelectionChangeOld(val){
+      this.selectedProductOld = val.map(item => ({...item}));
+      this.numOld=this.selectedProductOld.length
+      this.selectAll=val.length
+      this.countTotalPriceOld()
+    },
+    /*全选*/
+    handleSelectionChangeAll(){
+
+      if (this.selectAll) {
+        this.$refs.multipleTable.toggleRowSelection(this.shop, true);
+        this.$refs.multipleTableOld.toggleRowSelection(this.oldshop, true);
+      }
+
+    },
+
+    /*多选选中*/
+    select() {
+      this.shop.forEach((item, index) => {
+        if (item.isselected === 1) {
+          this.$nextTick(() => {
+            this.$refs.multipleTable.toggleRowSelection(this.shop[index], true)
+          })
+        }
+
+      })
+    },
+
+    checkedd(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row,true);
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
 
     /*数量计数器*/
-    handleNumChange(index,row){
+    handleNumChange(index, row) {
-      this.shop[index].num=row.num;
+      this.shop[index].num = row.num;
       this.countTotalPrice()
     },
-
+    /*失效计数器*/
     /*计算总价  选中个数*/
-    countTotalPrice(){
+    countTotalPrice() {
-      this.totalPrice=this.selectedProduct.reduce((sum,shop)=>{
+      this.totalPrice = this.selectedProduct.reduce((sum, shop) => {
-        if(shop.hasOwnProperty('num') && shop.hasOwnProperty('price')){
+        if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
-          return sum +shop.num *shop.price;
+          return sum + shop.num * shop.price;
-        }else{
+        } else {
           return sum;
         }
-      },0);
+      }, 0);
+    },
+    countTotalPriceOld(){
+      this.totalPriceOld = this.selectedProductOld.reduce((sum, shop) => {
+        if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
+          return sum + shop.num * shop.price;
+        } else {
+          return sum;
+        }
+      }, 0);
     },
 
     /*购物车列表*/
-    shopList(){
+    shopList() {
-      testShop(this.queryParams).then(res=>{
+      testShop(this.queryParams).then(res => {
-        console.log(res)
+        this.shop = res.data.rows
-        this.shop=res.data.rows
+      });
-      })
     }
-  }
+  },
+  mounted() {
+    this.checkedd(this.oldshop)
+  },
 }
+
 </script>
 <style scoped>
 .cell-content {