商品购物车

src/api/shopCart/shop.js

@@ -59,3 +59,31 @@ export function checkState(state) {
     data:state
   })
 }
+export function updSelected(state) {
+  return request({
+    url: '/shopCart/shop/updSelected',
+    method: 'post',
+    data:state
+  })
+}
+
+export function editShopNum(state) {
+  return request({
+    url: '/shopCart/shop/editShopNum',
+    method: 'post',
+    data:state
+  })
+}
+export function delShoppingMethod(state) {
+  return request({
+    url: '/shopCart/shop/delShop',
+    method: 'post',
+    data:state
+  })
+}
+export function shopDetail() {
+  return request({
+    url: '/shopCart/shop/detail',
+    method: 'get'
+  })
+}

src/layouttest/index.vue

@@ -10,8 +10,17 @@
           text-color="#fff"
           active-text-color="#ffd04b">
 
-          <el-menu-item index="1">处理中心</el-menu-item>
+          <el-menu-item index="1">
-          <el-submenu index="2"  >
+            <router-link :to="'/commodityMall' " class="link-type">
+              <span>商品商城</span>
+            </router-link>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <router-link :to="'/orderShop' " class="link-type">
+              <span>购物车结算</span>
+            </router-link>
+          </el-menu-item>
+          <el-submenu index="3"  >
             <template slot="title">我的购物车</template>
             <el-table
               :data="shop"
@@ -40,8 +49,8 @@
 
             <el-button type="info" style="margin-left: 400px" @click="toShopping">进入购物车</el-button>
           </el-submenu>
-          <el-menu-item index="3" disabled>消息中心</el-menu-item>
+          <el-menu-item index="4" disabled>消息中心</el-menu-item>
-          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+
         </el-menu>
       </el-header>
       <el-main>

src/router/index.js

@@ -78,11 +78,11 @@ export const constantRoutes = [
   {
     path: '',
     component: Layouttest,
-    redirect: 'test',
+    redirect: 'commodity_mall',
     children: [
       {
-        path: '/test/:id',
+        path: '/commodityMall',
-        component: () => import('@/views/a/index'),
+        component: () => import('@/views/product/productInfo/commodityMall/commodity.vue'),
         name: 'Test',
         meta: {title: "商品商城", icon: 'dashboard', affix: true}
       }
@@ -91,7 +91,7 @@ export const constantRoutes = [
   {
     path: '',
     component: Layouttest,
-    redirect: 'test',
+    redirect: 'product_details',
     children: [
       {
         path: '/detailsComponent/:id',
@@ -104,16 +104,29 @@ export const constantRoutes = [
   {
     path: '',
     component: Layouttest,
-    redirect: 'test',
+    redirect: 'shop_detail',
     children: [
       {
         path: 'shopping',
-        component: () => import('@/views/product/productInfo/detail/shopping.vue'),
+        component: () => import('@/views/shopCart/shop/detail/shopDetail.vue'),
         name: 'Test',
         meta: {title: "购物车", icon: 'dashboard', affix: true}
       }
     ]
   },
+  {
+    path: '',
+    component: Layouttest,
+    redirect: 'order_shop',
+    children: [
+      {
+        path: 'orderShop',
+        component: () => import('@/views/shopCart/shop/order/orderShop.vue'),
+        name: 'Test',
+        meta: {title: "购物车结算", icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,

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

@@ -3,7 +3,7 @@
 
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/commodityMall' }">商城</el-breadcrumb-item>
       <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
     </el-breadcrumb>
 
@@ -138,7 +138,7 @@ import rule from "@/views/product/rule/index.vue";
 import {addShop} from "@/api/shopCart/shop";
 
 export default {
-  name: 'Index',
+  name: 'product_details',
   data() {
     return {
       /*加入购物车*/

src/views/shopCart/shop/detail/shopDetail.vue

@@ -2,12 +2,6 @@
   <div>
 
 
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
-    </el-breadcrumb>
-    {{ shop }}
-
     <el-card>
       <el-table
         ref="multipleTable"
@@ -24,9 +18,9 @@
           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.image" width="100px" height="100px" class="project-image">
               <div class="project-info">
-                <h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
+                <h3 class="project-name">{{ scope.row.name }}</h3>
                 <p class="project-description">{{ scope.row.detailSku }}</p>
               </div>
             </div>
@@ -46,22 +40,18 @@
         <el-table-column property="num" label="购买数量" width="200">
           <template slot-scope="scope">
             <el-input-number v-model="scope.row.num"
-                             @change="handleNumChange(scope.$index,scope.row)"
+                             @change="handleNumChange(scope.row)"
                              :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.subtotal }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit( scope.row)">移入收藏夹
-            </el-button>
             <el-button
               size="mini"
               type="danger"
@@ -73,14 +63,15 @@
       <el-divider></el-divider>
       <span style="color: #97a8be">失效商品</span>
       <el-table
+        :show-header="false"
         :data="oldshop"
-        ref="multipleTableOld"
         style="width: 100%"
-        @selection-change="handleSelectionChangeOld"
       >
         <el-table-column
-          type="selection"
           width="55">
+          <template slot-scope="scope">
+            <el-checkbox disabled></el-checkbox>
+          </template>
         </el-table-column>
         <el-table-column
           width="300">
@@ -113,7 +104,7 @@
         </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>
+            <span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
           </template>
         </el-table-column>
         <el-table-column>
@@ -130,18 +121,37 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-card>
+      <el-card style="margin-top: 20px">
-        <el-checkbox v-model="selectAll" @change="handleSelectionChangeAll">全选</el-checkbox>
+        <div>
-        删除选中商品 移入到收藏夹
+          <el-row>
-        <h1 style="color: red">￥ {{ totalPrice +totalPriceOld}}</h1>
+            <el-col :span="6">
-        <h1 style="color: red">Old￥ {{ totalPriceOld }}</h1>
+              <div style="padding-top: 8px">
-        <h1 style="color: red">选中商品个数 {{num+numOld}}</h1>
+                <el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
-        <el-button
+                <el-button type="text" style="margin-left: 10px" @click="handleDelete(undefined)">删除选中商品
-          size="mini"
+                </el-button>
-          type="danger"
+                <el-button type="text">添加我的收藏</el-button>
-          style="margin-left: 600px"
+              </div>
-        >下单结算
+
-        </el-button>
+            </el-col>
+            <el-col :span="14">
+              <div style="margin-left: 80px;padding-top: 8px">
+                <span>共<span style="color: red;">{{ statisticsShop.total }}</span> 件商品
+                  ，已选择 <span style="color: red;">{{ statisticsShop.selectTotal }}</span> 件</span>
+                <el-divider direction="vertical"></el-divider>
+                <span>商品合计 : <span style="color: red;">¥{{ statisticsShop.priceTotal }}</span></span>
+                <el-divider direction="vertical"></el-divider>
+                <span>商品合计 : <span style="color: red; font-size: 24px">¥{{
+                    statisticsShop.priceTotal
+                  }}</span></span>
+              </div>
+            </el-col>
+            <el-col :span="4">
+              <el-button style="float: right; " type="success" @click="orderShop">下单结算</el-button>
+            </el-col>
+          </el-row>
+
+
+        </div>
       </el-card>
 
     </el-card>
@@ -150,35 +160,23 @@
 </template>
 <script>
 import {listShop} from "@/api/product/shop";
-import {checkState, testShop} from "@/api/shopCart/shop";
+import {checkState, delShoppingMethod, editShopNum, shopDetail, testShop, updSelected} from "@/api/shopCart/shop";
 import shop from "@/views/shopCart/shop/index.vue";
 import item from "@/layout/components/Sidebar/Item.vue";
 
 export default {
-  name: 'Index',
+  name: 'shop_detail',
   data() {
     return {
-      /**/
-      selectAll:false,
       /*选中商品*/
       selectedProduct: [],
-      num:0,
+      /*生效商品对象*/
-      /*选中失效*/
-      selectedProductOld:[],
-      numOld:0,
-      /*每次选中的*/
-      selectedRows: [],
-      /*总价钱*/
-      totalPrice: 0,
-      /*失效总价*/
-      totalPriceOld:0,
-      /*购物车对象*/
       shop: [],
       /*查询对象*/
       queryParams: {},
+      /*多选框id*/
       ids: [],
-      /*购物车状态为选中*/
+      /*失效商品*/
-      checkEd: [],
       oldshop: [
         {
           "id": 3,
@@ -212,130 +210,154 @@ export default {
           "price": 123,
           "sumPrice": null
         }
-      ]
+      ],
+      isAllCheck: false,
+      /*统计*/
+      statisticsShop: {
+        /*商品总数*/
+        total: 0,
+        /*选中商品总数*/
+        selectTotal: 0,
+        /*商品总价*/
+        priceTotal: 0.00,
+        /*实际商品总价*/
+        actualTotal: 0.00
+      }
     }
   },
   created() {
-    this.shopList()
+    this.init();
   },
-  watch: {
-    selectedRows: {
-      handler(newVal, oldVal) {
-        // 处理新选中的行
-        newVal.forEach(row => {
-          if (row.isselected === 1) {
 
-          } else if (row.isselected === 0) {
-
-          }
-        });
-
-        // 处理之前选中的但现在未选中的行
-        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) {
+    orderShop() {
-      if (val.length === 0) {
+      this.$router.push('/orderShop')
-        this.selectedRows = []
+    },
+    /*删除*/
+    handleDelete(row) {
+      console.log(row)
+      let dekShopReq = []
+      if (row) {
+        dekShopReq.push({
+          "projectId": row.projectId,
+          "projectSku": row.projectSku,
+          "id": row.shoppingId,
+        })
       } else {
-        this.selectedRows = val.slice(0, 1);
+        if (this.selectedProduct.length === 0) {
-      }
+          this.$message.error("请选择商品")
-      this.selectedProduct = val.map(item => ({...item}));
+          return
-      this.num=this.selectedProduct.length
+        }
-      this.selectAll=val.length
+        this.selectedProduct.forEach(item => {
-      this.countTotalPrice()
+          dekShopReq.push({
-    },
+            "projectId": item.projectId,
-    /*失效商品*/
+            "projectSku": item.projectSku,
-    handleSelectionChangeOld(val){
+            "id": item.shoppingId,
-      this.selectedProductOld = val.map(item => ({...item}));
+          })
-      this.numOld=this.selectedProductOld.length
+        })
-      this.selectAll=val.length
+      }
-      this.countTotalPriceOld()
+      delShoppingMethod(dekShopReq).then(
-    },
+        res => {
-    /*全选*/
+          this.init()
-    handleSelectionChangeAll(){
+        }
-
+      )
-      if (this.selectAll) {
+    },
-        this.$refs.multipleTable.toggleRowSelection(this.shop, true);
+    /*初始化*/
-        this.$refs.multipleTableOld.toggleRowSelection(this.oldshop, true);
+    init() {
-      }
+      this.shop = []
-
+      this.selectedProduct = []
-    },
+      shopDetail().then(
-
+        res => {
-    /*多选选中*/
+          this.statisticsShop = res.data.statisticsShop
-    select() {
+          this.shop = res.data.shopSkuList
-      this.shop.forEach((item, index) => {
+          setTimeout(this.initShopSelected, 200)
-        if (item.isselected === 1) {
+        }
-          this.$nextTick(() => {
+      )
-            this.$refs.multipleTable.toggleRowSelection(this.shop[index], true)
+    },
-          })
+    /*默认选中*/
+    initShopSelected() {
+      this.shop.forEach(item => {
+        if (item.isselected === 1) {
+          this.$refs.multipleTable.toggleRowSelection(item, true);
         }
-
       })
     },
+    /*多选框*/
+    handleSelectionChange(val) {
+      let selectShopList = []
+      let newSelect = val.filter(
+        row => !this.selectedProduct.includes(row)
+      );
 
-    checkedd(rows) {
+      newSelect.forEach(item => {
-      if (rows) {
+        selectShopList.push({
-        rows.forEach(row => {
+          "projectId": item.projectId,
-          this.$refs.multipleTable.toggleRowSelection(row,true);
+          "projectSku": item.projectSku,
+          "isselected": 1,
         })
+      })
+
+      let noSelect = this.selectedProduct.filter(
+        row => !val.includes(row)
+      );
+      noSelect.forEach(item => {
+        selectShopList.push({
+          "projectId": item.projectId,
+          "projectSku": item.projectSku,
+          "isselected": 0,
+        })
+      })
+      let cartProjectMap = {};
+      this.shop.map(item =>
+        cartProjectMap[`${item.projectId} + ${item.projectSku}`] = item.isselected)
+
+
+      let editCartProjectFilterList
+        = selectShopList.filter(item => item.isselected !==
+        cartProjectMap[`${item.projectId} + ${item.projectSku}`])
+
+
+      if (editCartProjectFilterList.length > 0) {
+        updSelected(selectShopList).then(
+          res => {
+            this.init();
+          }
+        )
+      }
+
+      this.selectedProduct = val
+      this.isAllCheck = val.length === this.shop.length
+      //this.countTotalPrice()
+    },
+    /*全选*/
+    changeIsAllCheck() {
+      if (this.isAllCheck) {
+        this.$refs.multipleTable.toggleAllSelection();
       } else {
         this.$refs.multipleTable.clearSelection();
       }
     },
 
     /*数量计数器*/
-    handleNumChange(index, row) {
+    handleNumChange(row) {
-      this.shop[index].num = row.num;
+      let shopNumEdit = {
-      this.countTotalPrice()
+        "projectId": row.projectId,
+        "projectSku": row.projectSku,
+        "num": row.num,
+      }
+      editShopNum(shopNumEdit).then(
+        res => {
+          this.init()
+        }
+      )
+      // this.shop[index].num = row.num;
+      // this.countTotalPrice()
     },
-    /*失效计数器*/
+
     /*计算总价  选中个数*/
     countTotalPrice() {
-      this.totalPrice = this.selectedProduct.reduce((sum, shop) => {
+      this.statisticsShop.priceTotal = this.selectedProduct.reduce((sum, shop) => {
-        if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
-          return sum + shop.num * shop.price;
-        } else {
-          return sum;
-        }
-      }, 0);
-    },
-    countTotalPriceOld(){
-      this.totalPriceOld = this.selectedProductOld.reduce((sum, shop) => {
         if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
           return sum + shop.num * shop.price;
         } else {
@@ -350,10 +372,7 @@ export default {
         this.shop = res.data.rows
       });
     }
-  },
+  }
-  mounted() {
-    this.checkedd(this.oldshop)
-  },
 }
 
 </script>

src/views/shopCart/shop/order/orderShop.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+
+     哈哈哈
+
+
+
+  </div>
+</template>
+<script>
+export default {
+  name: 'order_shop',
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+</style>