购物车详情

src/api/shopCart/Info.js

@@ -33,6 +33,13 @@ export function addInfo(data) {
     data: data
   })
 }
+export function cartInfoIsSelected(data) {
+  return request({
+    url: '/shopCart/Info/selected',
+    method: 'post',
+    data: data
+  })
+}
 
 // 修改购物车
 export function updateInfo(data) {

src/router/index.js

@@ -82,7 +82,7 @@ export const constantRoutes = [
       {
         path: 'product-detail/:detailId(\\d+)',
         component: () => import('@/views/product/info/detail/index'),
-        name: 'Demo',
+        name: 'productDetail',
         meta: {title: '商品详情', icon: 'dashboard', affix: true}
       }
     ]
@@ -95,7 +95,7 @@ export const constantRoutes = [
       {
         path: '/cart/detail',
         component: () => import('@/views/shopCart/detail/index'),
-        name: 'Demo',
+        name: 'myCart',
         meta: {title: '我的购物车', icon: 'dashboard', affix: true}
       }
     ]

src/views/shopCart/detail/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
-    <el-table ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55"> </el-table-column>
+    <el-skeleton v-if="!loading" :rows="12" animated />
+    <el-table v-if="loading" ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
+              @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column label="商品信息">
         <template slot-scope="scope">
           <div style="height: 150px; width: 100%">
@@ -14,11 +15,13 @@
               </el-col>
               <el-col :span="16">
                 <el-row>
-                  <span style="font-weight: bolder; font-size: 20px">{{scope.row.name}}</span>
+                  <span style="font-weight: bolder; font-size: 20px">{{ scope.row.name }}</span>
                 </el-row>
                 <el-divider style="margin: 10px 0;"/>
                 <el-row>
-                  <el-col :span="24" v-for="skuRule in scope.row.skuRuleList">{{skuRule.ruleName}}：{{skuRule.ruleValue}}</el-col>
+                  <el-col :span="24" v-for="skuRule in scope.row.skuRuleList">
+                    {{ skuRule.ruleName }}：{{ skuRule.ruleValue }}
+                  </el-col>
                 </el-row>
               </el-col>
             </el-row>
@@ -46,9 +49,10 @@
     <div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
       <span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
     </div>
-    <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable" :data="failureCartProjectList"
-      tooltip-effect="dark"
-      style="width: 100%">
+    <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable"
+              :data="failureCartProjectList"
+              tooltip-effect="dark"
+              style="width: 100%">
       <el-table-column width="55">
         <template slot-scope="scope">
           <el-checkbox disabled></el-checkbox>
@@ -56,13 +60,13 @@
       </el-table-column>
       <el-table-column
         label="日期"
-       >
+      >
         <template slot-scope="scope">{{ scope.row.date }}</template>
       </el-table-column>
       <el-table-column
         prop="name"
         label="姓名"
-       >
+      >
       </el-table-column>
       <el-table-column
         prop="address"
@@ -70,7 +74,7 @@
         show-overflow-tooltip>
       </el-table-column>
     </el-table>
-    <el-card style="margin-top: 20px;">
+    <el-card v-if="loading" style="margin-top: 20px;">
       <div class="clearfix">
         <el-row>
           <el-col :span="6">
@@ -79,11 +83,12 @@
           </el-col>
           <el-col :span="14">
             <div>
-              <span>共 <span style="color: red">{{statisticsCart.total}}</span> 件商品，已选择 <span style="color:red;">{{statisticsCart.selectTotal}}</span> 件</span>
+              <span>共 <span style="color: red">{{ statisticsCart.total }}</span> 件商品，已选择 <span
+                style="color:red;">{{ statisticsCart.selectTotal }}</span> 件</span>
               <el-divider direction="vertical"></el-divider>
-              <span> 商品合计 : ¥{{statisticsCart.priceTotal}}</span>
+              <span> 商品合计 : ¥{{ statisticsCart.priceTotal }}</span>
               <el-divider direction="vertical"></el-divider>
-              <span>应付总额：<span style="color:red; font-size: 24px;">¥{{statisticsCart.actualTotal}}</span></span>
+              <span>应付总额：<span style="color:red; font-size: 24px;">¥{{ statisticsCart.actualTotal }}</span></span>
             </div>
           </el-col>
           <el-col :span="4">
@@ -98,7 +103,8 @@
 </template>
 
 <script>
-import {getDetailInfo} from "@/api/shopCart/Info";
+import {cartInfoIsSelected, getDetailInfo} from "@/api/shopCart/Info";
+import {getTime} from "@/utils";
 
 export default {
   name: "shopCartDetail",
@@ -121,42 +127,68 @@ export default {
         actualTotal: 0.00
       },
       // 时候全部选择
-      isAllCheck: false
+      isAllCheck: false,
+      loading: false
     }
   },
   created() {
-    getDetailInfo().then(response => {
-      console.log(response)
-      this.statisticsCart = response.data.statisticsCart;
-      this.cartProjectList = response.data.cartSkuList;
-      setTimeout(this.initCartSelected, 200);
-    })
+    this.init()
   },
   methods: {
-    initCartSelected(){
+    init() {
+      getDetailInfo().then(response => {
+        console.log(response)
+        this.statisticsCart = response.data.statisticsCart;
+        this.cartProjectList = response.data.cartSkuList;
+        this.loading = true;
+        setTimeout(this.initCartSelected, 200);
+      })
+    },
+    initCartSelected() {
       this.cartProjectList.forEach(cartProject => {
-        if ("Y" === cartProject.isSelected){
+        if ("Y" === cartProject.isSelected) {
           this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
         }
       })
     },
-    changeIsAllCheck(){
-      if (this.isAllCheck){
+    changeIsAllCheck() {
+      if (this.isAllCheck) {
         this.$refs.cartProjectTable.toggleAllSelection();
-      }else {
+      } else {
         this.$refs.cartProjectTable.clearSelection();
       }
     },
-    // 当表格当中的记录发生选中改变的时候会调用此方法
-    // 并且传递过来selectedRow为当前表格选中的记录
     handleSelectionChange(selectedRow) {
-      // selectedRow 为当前表格选中的记录
-      // cartProjectSelected 上次表格选中的记录
-      console.log(selectedRow)
-      console.log(this.cartProjectSelected)
-      // 所以 selectedRow 中 未包含 cartProjectSelected 则 为新选中的记录
-      // 若 cartProjectSelected 中 未包含 selectedRow 则 为取消选中的记录
-
+      let editCartProjectList = [];
+      this.cartProjectSelected
+        .filter(cartProject => selectedRow.indexOf(cartProject) === -1)
+        .forEach(cartProject => editCartProjectList.push({
+          "projectId": cartProject.projectId,
+          "projectSku": cartProject.projectSku,
+          "isSelected": "N"
+        }))
+      selectedRow
+        .filter(cartProject => this.cartProjectSelected.indexOf(cartProject) === -1)
+        .forEach(cartProject => editCartProjectList.push({
+          "projectId": cartProject.projectId,
+          "projectSku": cartProject.projectSku,
+          "isSelected": "Y"
+        }))
+      console.log(editCartProjectList)
+      let cartProjectMap = {};
+      this.cartProjectList.map(cartProject => cartProjectMap[`${cartProject.projectId} + ${cartProject.projectSku}`] = cartProject.isSelected)
+      console.log(cartProjectMap)
+      let editCartProjectFilterList
+        = editCartProjectList.filter(editCartProject => editCartProject.isSelected !== cartProjectMap[`${editCartProject.projectId} + ${editCartProject.projectSku}`])
+      console.log(editCartProjectFilterList)
+      if (editCartProjectFilterList.length > 0){
+        cartInfoIsSelected(editCartProjectList).then(response => {
+          this.loading = false;
+          this.cartProjectList = [];
+          this.cartProjectSelected = []
+          this.init();
+        })
+      }
       this.isAllCheck = selectedRow.length === this.cartProjectList.length
       this.cartProjectSelected = selectedRow;
     }