From 24ea545cecc4288eadad35eebdc3522239b0f417 Mon Sep 17 00:00:00 2001
From: DongZeLiang <2746733890@qq.com>
Date: Mon, 8 Apr 2024 14:33:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/shopCart/Info.js                |   8 ++
 src/router/index.js                     |  13 ++
 src/views/shopCart/detail/dataStructure |  30 +++++
 src/views/shopCart/detail/index.vue     | 158 ++++++++++++++++++++++++
 4 files changed, 209 insertions(+)
 create mode 100644 src/views/shopCart/detail/dataStructure
 create mode 100644 src/views/shopCart/detail/index.vue

diff --git a/src/api/shopCart/Info.js b/src/api/shopCart/Info.js
index be8e70c..e2675f3 100644
--- a/src/api/shopCart/Info.js
+++ b/src/api/shopCart/Info.js
@@ -17,6 +17,14 @@ export function getInfo(id) {
   })
 }
 
+// 查询购物车详细
+export function getDetailInfo() {
+  return request({
+    url: '/shopCart/Info/detail',
+    method: 'get'
+  })
+}
+
 // 新增购物车
 export function addInfo(data) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index 2fa4ea6..20b2aaa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,6 +87,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/cart',
+    component: LayoutShop,
+    redirect: 'cart-detail',
+    children: [
+      {
+        path: '/cart/detail',
+        component: () => import('@/views/shopCart/detail/index'),
+        name: 'Demo',
+        meta: {title: '我的购物车', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,
diff --git a/src/views/shopCart/detail/dataStructure b/src/views/shopCart/detail/dataStructure
new file mode 100644
index 0000000..592188c
--- /dev/null
+++ b/src/views/shopCart/detail/dataStructure
@@ -0,0 +1,30 @@
+{
+  购物车商品集合: [
+      {
+        购物车ID: 1,
+        商品SKU图片: "url",
+        商品名称: "",
+        商品规格SKU集合: [
+           {
+              规格名称："",
+              规格属性：""
+           }
+        ]，
+        商品单价：125.36,
+        商品购物车数量：1,
+        商品小计：125.36,
+        是否选中: Y/N
+      }
+  ],
+  // 购物车统计
+  statisticsCart: {
+    // 商品总数
+    total: 0,
+    // 选择总数
+    selectTotal: 0,
+    // 商品总价
+    priceTotal: 0.00,
+    // 实际总价
+    actualTotal: 0.00
+  }
+}
diff --git a/src/views/shopCart/detail/index.vue b/src/views/shopCart/detail/index.vue
new file mode 100644
index 0000000..4e091c6
--- /dev/null
+++ b/src/views/shopCart/detail/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <el-table ref="multipleTable" :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%">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-card class="box-card">
+                  <image-preview :src="scope.row.image" height="150px"/>
+                </el-card>
+              </el-col>
+              <el-col :span="16">
+                <el-row>
+                  <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-row>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="单价" width="120">
+        <template slot-scope="scope">{{ scope.row.price }}</template>
+      </el-table-column>
+      <el-table-column label="数量" width="120">
+        <template slot-scope="scope">
+          <el-input-number v-model="scope.row.num" controls-position="right" style="width: 110px"
+                           :min="1"
+                           :max="scope.row.stock"
+                           size="mini"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column label="小计" width="120">
+        <template slot-scope="scope">{{ scope.row.subtotal }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="80">
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+    </el-table>
+    <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%"
+      @selection-change="handleSelectionChange">
+      <el-table-column width="55">
+        <template slot-scope="scope">
+          <el-checkbox disabled></el-checkbox>
+        </template>
+      </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"
+        label="地址"
+        show-overflow-tooltip>
+      </el-table-column>
+    </el-table>
+    <el-card style="margin-top: 20px;">
+      <div class="clearfix">
+        <el-row>
+          <el-col :span="6">
+            <el-checkbox v-model="isAllCheck">全选</el-checkbox>
+            <el-button type="text" style="margin-left: 10px">删除选中商品</el-button>
+          </el-col>
+          <el-col :span="14">
+            <div>
+              <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>
+              <el-divider direction="vertical"></el-divider>
+              <span>应付总额：<span style="color:red; font-size: 24px;">¥{{statisticsCart.actualTotal}}</span></span>
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <el-button style="float: right;" type="success">下单</el-button>
+          </el-col>
+        </el-row>
+
+
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {getDetailInfo} from "@/api/shopCart/Info";
+
+export default {
+  name: "shopCartDetail",
+  data() {
+    return {
+      // 生效商品
+      cartProjectList: [],
+      // 失效商品
+      failureCartProjectList: [],
+      multipleSelection: [],
+      // 购物车统计
+      statisticsCart: {
+        // 商品总数
+        total: 0,
+        // 选择总数
+        selectTotal: 0,
+        // 商品总价
+        priceTotal: 0.00,
+        // 实际总价
+        actualTotal: 0.00
+      },
+      // 时候全部选择
+      isAllCheck: false
+    }
+  },
+  created() {
+    getDetailInfo().then(response => {
+      console.log(response)
+      this.statisticsCart = response.data.statisticsCart;
+      this.cartProjectList = response.data.cartSkuList
+    })
+  },
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>