diff --git a/src/api/product/info.js b/src/api/product/info.js
index 80b02c2..e15e6f7 100644
--- a/src/api/product/info.js
+++ b/src/api/product/info.js
@@ -16,6 +16,13 @@ export function getInfo(id) {
     method: 'get'
   })
 }
+// 查询商品信息详细
+export function getDetailInfo(id) {
+  return request({
+    url: '/product/info/detail/' + id,
+    method: 'get'
+  })
+}
 
 // 新增商品信息
 export function addInfo(data) {
diff --git a/src/api/shopCart/Info.js b/src/api/shopCart/Info.js
new file mode 100644
index 0000000..6eb4c49
--- /dev/null
+++ b/src/api/shopCart/Info.js
@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+// 查询购物车列表
+export function listInfo(query) {
+  return request({
+    url: '/shopCart/Info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询购物车详细
+export function getInfo(id) {
+  return request({
+    url: '/shopCart/Info/' + id,
+    method: 'get'
+  })
+}
+
+// 查询购物车详细
+export function getDetailInfo() {
+  return request({
+    url: '/shopCart/Info/detail',
+    method: 'get'
+  })
+}
+
+// 新增购物车
+export function addInfo(data) {
+  return request({
+    url: '/shopCart/Info',
+    method: 'post',
+    data: data
+  })
+}
+export function cartInfoIsSelected(data) {
+  return request({
+    url: '/shopCart/Info/selected',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改购物车
+export function updateInfo(data) {
+  return request({
+    url: '/shopCart/Info/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除购物车
+export function delInfo(id) {
+  return request({
+    url: '/shopCart/Info/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 4d10bd8..dd3e1e0 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -124,6 +124,9 @@ export default {
   methods: {
     init() {
       const editor = this.$refs.editor;
+      if (this.readOnly){
+        this.options.modules.toolbar = {};
+      }
       this.Quill = new Quill(editor, this.options);
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {
@@ -176,7 +179,7 @@ export default {
     },
     handleUploadSuccess(res, file) {
       // 如果上传成功
-      if (res.data.code == 200) {
+      if (res.code == 200) {
         // 获取富文本组件实例
         let quill = this.Quill;
         // 获取光标所在位置
diff --git a/src/layout-shop/index.vue b/src/layout-shop/index.vue
new file mode 100644
index 0000000..4739abf
--- /dev/null
+++ b/src/layout-shop/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-menu
+        default-active="1"
+        class="el-menu-demo"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b">
+        <el-menu-item index="1">处理中心</el-menu-item>
+        <el-submenu index="2">
+          <template slot="title">我的工作台</template>
+          <el-menu-item index="2-1">选项1</el-menu-item>
+          <el-menu-item index="2-2">选项2</el-menu-item>
+          <el-menu-item index="2-3">选项3</el-menu-item>
+          <el-submenu index="2-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="2-4-1">选项1</el-menu-item>
+            <el-menu-item index="2-4-2">选项2</el-menu-item>
+            <el-menu-item index="2-4-3">选项3</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-menu-item index="3" 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>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="6">
+          <router-view/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "layoutShop",
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 2afac71..ffd7807 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
+import LayoutShop from "@/layout-shop";
 
 Vue.use(Router)
 
@@ -73,6 +74,32 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '',
+    component: LayoutShop,
+    redirect: 'product-detail',
+    children: [
+      {
+        path: 'product-detail/:detailId(\\d+)',
+        component: () => import('@/views/product/info/detail/index'),
+        name: 'productDetail',
+        meta: {title: '商品详情', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
+  {
+    path: '/cart',
+    component: LayoutShop,
+    redirect: 'cart-detail',
+    children: [
+      {
+        path: '/cart/detail',
+        component: () => import('@/views/shopCart/detail/index'),
+        name: 'myCart',
+        meta: {title: '我的购物车', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,
diff --git a/src/views/product/info/detail/index.vue b/src/views/product/info/detail/index.vue
new file mode 100644
index 0000000..b53dbf3
--- /dev/null
+++ b/src/views/product/info/detail/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
+
+      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <el-carousel trigger="click" height="400px">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
+            <el-image :src="item" style="height: 100%; width: 100%"/>
+          </el-carousel-item>
+        </el-carousel>
+        <div style="margin-top: 20px;">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div>
+                <el-statistic
+                  :value="123"
+                  :title="title"
+                ></el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic title="商品评价">
+                  <template slot="formatter">
+                    456
+                  </template>
+                </el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic
+                  group-separator=","
+                  :precision="0"
+                  decimal-separator="."
+                  :value="123"
+                  title="收藏人气"
+                >
+                </el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic title="品牌信息">
+                  <template slot="formatter">
+                    {{projectDetail.brandInfo.nam}}
+                  </template>
+                </el-statistic>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :span="12">
+          <h1>商品名称</h1>
+          <h3>商品规格（{{checkSkuInfo.sku}}）</h3>
+          <h2 style="color: #2200ff">库存：{{checkSkuInfo.stock}}</h2>
+          <h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
+        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
+          <el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
+<!--            <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
+            </el-radio-group>-->
+            <el-radio v-model="form['rule'+index]" @change="selectRuleSku"
+                      v-for="value in ruleAttr.valueList"
+                      :label="value" :key="value" :value="value" border>{{value}}</el-radio>
+          </el-form-item>
+          <el-form-item label="数量">
+            <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" @click="addCart">加入购物车</el-button>
+            <el-button>立即购买</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 30px;">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>商品详情</span>
+        </div>
+        <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
+          <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
+                                :label="attribute.name">{{attributeMap[attribute.id]}}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions v-if="projectDetail.attributeInfoList.length !== 0" title="其他属性" :column="1">
+          <el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
+                                :label="attributeInfo.name">{{attributeMap[attributeInfo.id]}}</el-descriptions-item>
+        </el-descriptions>
+
+        <editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
+
+        </editor>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getDetailInfo} from "@/api/product/info";
+import {addInfo} from "@/api/shopCart/Info";
+import {Message} from "element-ui";
+
+export default {
+  name: "productDetail",
+  data() {
+    return {
+      title: "销量人气",
+      form: {
+        num: 1
+      },
+      projectDetail: {
+        projectInfo: {
+          name: ""
+        },
+        brandInfo: {
+          nam: ""
+        },
+        attributeInfoList: []
+      },
+      checkSkuInfo: {
+        price: 0.00
+      },
+      carouselImages: [],
+      attributeMap: {}
+    }
+  },
+  created() {
+    const detailId = this.$route.params && this.$route.params.detailId;
+    this.initProjectDetailInfo(detailId);
+  },
+  methods: {
+    addCart(){
+      addInfo(this.form).then(response => {
+        Message({message: "购物车添加成功", type: 'success'})
+      })
+    },
+    initSku(){
+      let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
+      let skuArr = sku.split("-");
+      skuArr.forEach((rule, index) => {
+        this.form['rule'+index] = rule;
+      })
+      this.selectRuleSku();
+    },
+    selectRuleSku(){
+      let ruleSize = this.projectDetail.ruleAttrModelList.length;
+      let sku = "";
+      for (let index = 0; ; index++) {
+        sku += this.form['rule'+index];
+        if (index + 1 === ruleSize){
+          break
+        }
+        sku += "-";
+      }
+      this.form.projectSku = sku;
+      this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
+    },
+    initProjectDetailInfo(detailId){
+      getDetailInfo(detailId).then(response => {
+        this.projectDetail = response.data;
+        this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
+          let key = productAttributeInfo.attributeId;
+          this.attributeMap[key] = productAttributeInfo["value"]
+        })
+        this.form.projectId = this.projectDetail.projectInfo.id;
+        let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
+        for (let index = 0; index < ruleAttrLength; index++) {
+          this.form["rule"+index] = null;
+        }
+        this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
+        this.initSku();
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
+.ql-toolbar{
+  display: none;
+}
+</style>
diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 1346ecd..5e8c755 100644
--- a/src/views/product/info/index.vue
+++ b/src/views/product/info/index.vue
@@ -115,6 +115,9 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button class="link-type" @click="toProjectDetail(scope.row.id)">
+            商品详情
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -514,6 +517,10 @@ export default {
     this.getList();
   },
   methods: {
+    toProjectDetail(detailId){
+      let url = `${window.location.origin}/product-detail/${detailId}`;
+      window.open(url)
+    },
     oneSetting(){
       this.skuList.forEach(skuInfo => {
         skuInfo.image = this.oneSettingForm.image;
diff --git a/src/views/shopCart/Info/index.vue b/src/views/shopCart/Info/index.vue
new file mode 100644
index 0000000..54eafde
--- /dev/null
+++ b/src/views/shopCart/Info/index.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="商品" prop="projectId">
+        <el-input
+          v-model="queryParams.projectId"
+          placeholder="请输入商品"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SKU" prop="projectSku">
+        <el-input
+          v-model="queryParams.projectSku"
+          placeholder="请输入SKU"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="数量" prop="num">
+        <el-input
+          v-model="queryParams.num"
+          placeholder="请输入数量"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否选中" prop="isSelected">
+        <el-input
+          v-model="queryParams.isSelected"
+          placeholder="请输入是否选中"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['shopCart:Info:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['shopCart:Info:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['shopCart:Info:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['shopCart:Info:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="InfoList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="商品" align="center" prop="projectId" />
+      <el-table-column label="SKU" align="center" prop="projectSku" />
+      <el-table-column label="用户" align="center" prop="userId" />
+      <el-table-column label="数量" align="center" prop="num" />
+      <el-table-column label="是否选中" align="center" prop="isSelected" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['shopCart:Info:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['shopCart:Info:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改购物车对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="商品" prop="projectId">
+          <el-input v-model="form.projectId" placeholder="请输入商品" />
+        </el-form-item>
+        <el-form-item label="SKU" prop="projectSku">
+          <el-input v-model="form.projectSku" placeholder="请输入SKU" />
+        </el-form-item>
+        <el-form-item label="用户" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户" />
+        </el-form-item>
+        <el-form-item label="数量" prop="num">
+          <el-input v-model="form.num" placeholder="请输入数量" />
+        </el-form-item>
+        <el-form-item label="是否选中" prop="isSelected">
+          <el-input v-model="form.isSelected" placeholder="请输入是否选中" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/shopCart/Info";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 购物车表格数据
+      InfoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        projectId: [
+          { required: true, message: "商品不能为空", trigger: "blur" }
+        ],
+        projectSku: [
+          { required: true, message: "SKU不能为空", trigger: "blur" }
+        ],
+        userId: [
+          { required: true, message: "用户不能为空", trigger: "blur" }
+        ],
+        num: [
+          { required: true, message: "数量不能为空", trigger: "blur" }
+        ],
+        isSelected: [
+          { required: true, message: "是否选中不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询购物车列表 */
+    getList() {
+      this.loading = true;
+      listInfo(this.queryParams).then(response => {
+        this.InfoList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加购物车";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getInfo(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改购物车";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateInfo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addInfo(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除购物车编号为"' + ids + '"的数据项？').then(function() {
+        return delInfo(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('shopCart/Info/export', {
+        ...this.queryParams
+      }, `Info_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
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..b59a730
--- /dev/null
+++ b/src/views/shopCart/detail/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <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%">
+            <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%">
+      <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 v-if="loading" style="margin-top: 20px;">
+      <div class="clearfix">
+        <el-row>
+          <el-col :span="6">
+            <el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</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 {cartInfoIsSelected, getDetailInfo} from "@/api/shopCart/Info";
+import {getTime} from "@/utils";
+
+export default {
+  name: "shopCartDetail",
+  data() {
+    return {
+      // 生效商品
+      cartProjectList: [],
+      // 失效商品
+      failureCartProjectList: [],
+      cartProjectSelected: [],
+      // 购物车统计
+      statisticsCart: {
+        // 商品总数
+        total: 0,
+        // 选择总数
+        selectTotal: 0,
+        // 商品总价
+        priceTotal: 0.00,
+        // 实际总价
+        actualTotal: 0.00
+      },
+      // 时候全部选择
+      isAllCheck: false,
+      loading: false
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    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) {
+          this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
+        }
+      })
+    },
+    changeIsAllCheck() {
+      if (this.isAllCheck) {
+        this.$refs.cartProjectTable.toggleAllSelection();
+      } else {
+        this.$refs.cartProjectTable.clearSelection();
+      }
+    },
+    handleSelectionChange(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;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vue.config.js b/vue.config.js
index 17d9a1d..92405cd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://127.0.0.1:8080`,
+        target: `http://10.1.123.97:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''