商品购物车 初步设定

src/permission.js

@@ -6,6 +6,7 @@ import 'nprogress/nprogress.css'
 import {getToken} from '@/utils/auth'
 import {isRelogin} from '@/utils/request'
 
+
 NProgress.configure({showSpinner: false})
 
 const whiteList = ['/login', '/register']

src/router/index.js

@@ -86,6 +86,18 @@ export const constantRoutes = [
         meta: {title: '商品详情', icon: 'dashboard', affix: true}
       }
     ]
+  },{
+    path: '',
+    component: Layout,
+    redirect: 'shopindex',
+    children: [
+      {
+        path: 'shopindex',
+        component: () => import('@/views/shopCart/info/detail/index'),
+        name: 'shopindex',
+        meta: {title: '购物车', icon: 'dashboard', affix: true}
+      }
+    ]
   },
   // {
   //   path: '/gb',

src/views/product/info/detail/index.vue

@@ -83,7 +83,7 @@
              </div>
            </el-card>
          <el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
-           <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
+           <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrModelList":label="ruleAttr.name">
 <!--             <el-radio-group  v-model="form['rule'+index]" @change="selectRuleSku">-->
 <!--               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
 <!--             </el-radio-group>-->
@@ -95,7 +95,7 @@
              <el-input-number v-model="form.num"  :min="1" :max="10" label="描述文字" ></el-input-number>
            </el-form-item>
            <el-form-item>
-           <el-button type="primary" >加入购物车</el-button>
+           <el-button type="primary" @click="addCart()">加入购物车</el-button>
            <el-button>立即购买</el-button>
          </el-form-item>
          </el-form>
@@ -121,16 +121,6 @@
                  {{attributeMap[attributeInfo.id]}}
                </el-descriptions-item>
              </el-descriptions>
-
-             <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
-                              title="其他属性" :column="1" >
-               <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
-                                     :label="attributeInfo.name">
-                 {{attributeMap[attributeInfo.id]}}
-               </el-descriptions-item>
-             </el-descriptions>
-
-
          <editor v-model="editorValue" :read-only="true"></editor>
          </div>
        </el-card>
@@ -200,6 +190,15 @@ export default {
     }
   },
   methods:{
+    addCart(){
+      addInfo(this.form).then(responser => {
+          console.log(responser)
+      })
+    },
+    // ShopingCardAdd(){
+    //   console.log("用户信息",this.receivedShop)
+    //   this.$router.push('shopCart/info/detail')
+    // },
     updateNum() {
     this.num =  this.price * this.form.num
       console.log("qqqqq",this.num)
@@ -221,7 +220,7 @@ export default {
 
     },
     selectRuleSku(){
-      let ruleSize =this.receivedShop.ruleAttrAddModelList.length
+      let ruleSize =this.receivedShop.ruleAttrModelList.length
       let sku = "";
       for (let index = 0 ; ;index++){
         sku +=this.form['rule'+index]
@@ -230,6 +229,7 @@ export default {
          }
          sku += "-";
       }
+      this.form.projectSku=sku;
       this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
       console.log("sdf",this.checkSkuInfo)
       console.log("ppp",this.checkSkuInfo.price)
@@ -246,13 +246,13 @@ export default {
           let key =productAttributeInfo.attributeId;
           this.attributeMap[key] = productAttributeInfo["value"]
         })
-
+       this.form.projectId= this.receivedShop.projectInfo.id
-        let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+        let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
         console.log("hieng",ruleAttrLength)
         for (let index = 0 ;index < ruleAttrLength ;index++){
           this.form["rule"+index] = null
         }
-        console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+        console.log("shjo",this.receivedShop.ruleAttrModelList)
         this.initSku()
       })
     },
@@ -270,12 +270,12 @@ export default {
     //      this.attributeMap[key] = productAttributeInfo["value"]
     //   })
     //
-    //  let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+    //  let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
     //   console.log("hieng",ruleAttrLength)
     //  for (let index = 0 ;index < ruleAttrLength ;index++){
     //    this.form["rule"+index] = null
     //  }
-    //  console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+    //  console.log("shjo",this.receivedShop.ruleAttrModelList)
     //  this.initSku()
     // },
   },

src/views/product/info/index.vue

@@ -780,7 +780,6 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
-
       getInfo(id).then(response => {
         console.log("response",response)
         this.respData = response.data.asProductAttributeInfos

src/views/shopCart/info/detail/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-page-header @back="goBack" content="购物车">
+    </el-page-header>
+    <el-table
+      :data="cartItems"
+      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="display: flex; align-items: center;">
+            <img :src="scope.row.image" style="width: 100px; height: 100px; margin-right: 10px;" alt="">
+            <div>
+              <span>{{ scope.row.name }}</span><br>
+              <span>{{ scope.row.sku }}</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量">
+        <template slot-scope="scope">
+          <el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange(scope.row)" :min="1" :max="10"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column label="价格" width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.price }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <span style="color: red">购物车中已选{{process}}件商品，总计金额为{{aggregate}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ShoppingCart",
+  data() {
+    return {
+      cartItems: [
+        {
+          name: "商品1",
+          image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
+          sku: "规格1",
+          quantity: 1,
+          price:188
+        },
+        {
+          name: "商品2",
+          image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
+          sku: "规格2",
+          quantity: 1,
+          price:155
+        }
+      ],
+      process: 0, //商品数量
+      aggregate: 0, //总计
+      selectedItems: [] // 选中的项
+    };
+  },
+  methods: {
+    handleDelete(index, row) {
+      console.log("index",index)
+      console.log(index, row);
+    },
+    goBack() {
+      console.log('go back');
+    },
+    handleChange(item) {
+      const index = this.cartItems.findIndex(cartItem => cartItem === item);
+      if (index !== -1) {
+        this.cartItems[index].quantity = item.quantity;
+        if (this.selectedItems.includes(this.cartItems[index])) {
+          this.calculateTotal();
+        }
+      }
+    },
+    handleSelectionChange(val) {
+      this.selectedItems = val; // 更新选中的项
+      this.calculateTotal();
+    },
+    calculateTotal() {
+      this.process = 0;
+      this.aggregate = 0;
+      for (let i = 0; i < this.selectedItems.length; i++) {
+        this.process += this.selectedItems[i].quantity;
+        this.aggregate += this.selectedItems[i].price * this.selectedItems[i].quantity;
+      }
+    }
+  }
+};
+</script>