diff --git a/egg/app/controller/newShop.js b/egg/app/controller/newShop.js
new file mode 100644
index 0000000000000000000000000000000000000000..dbae6dc86685d7baf491c75ef0f3406a5c3b3cca
--- /dev/null
+++ b/egg/app/controller/newShop.js
@@ -0,0 +1,112 @@
+"use strict";
+
+const { Controller } = require("egg");
+
+class NewShopController extends Controller {
+  //添加到购物车
+  async newShop() {
+    const { ctx, app } = this;
+    const list = ctx.request.body;
+    const flag = await app.mysql.get("carlist", { shopName: list.name });
+    if (!flag) {
+      await app.mysql.insert("carlist", {
+        shopId: list.id,
+        shopName: list.name,
+        shopImgSrc: list.img,
+        weight: list.weight,
+        price: list.price,
+        num: 1,
+        flag: true,
+      });
+      ctx.body = {
+        code: 200,
+        mag: "添加成功",
+        data: list,
+      };
+    } else {
+      ctx.body = {
+        code: 200,
+        mag: "已经添加",
+      };
+    }
+  }
+
+  //获取购物车列表
+  async getNewhop() {
+    const { ctx, app } = this;
+    let numAll = 0;
+    let priceAll = 0;
+    let count = 0;
+    let carlist = await app.mysql.select("carlist");
+    carlist.forEach((item) => {
+      numAll += item.num * 1;
+      if (item.flag) {
+        count = item.num * item.price;
+        priceAll += count;
+      }
+    });
+    ctx.body = {
+      code: 200,
+      list: carlist,
+      msg: "获取成功",
+      numAll: numAll,
+      priceAll: priceAll,
+    };
+  }
+
+  //点击全选框
+  async clickCheckAll() {
+    const { ctx, app } = this;
+    const { checked } = ctx.request.body;
+    app.mysql.query(`UPDATE carlist SET flag = ${checked}`);
+    ctx.body = {
+      code: 200,
+      msg: "修改成功",
+    };
+  }
+  //点击加号
+
+  async clickAdd() {
+    const { ctx, app } = this;
+    const { id, num } = ctx.request.body;
+    await app.mysql.update(
+      "carlist",
+      {
+        num: num * 1 + 1,
+      },
+      {
+        where: { id: id },
+      }
+    );
+    ctx.body = {
+      code: 200,
+      msg: "修改成功",
+    };
+  }
+
+  //点击减号
+
+  async clickMinus() {
+    const { ctx, app } = this;
+    const { id, num } = ctx.request.body;
+    if (num === 1) {
+      await app.mysql.delete("carlist", { id: id });
+    } else {
+      await app.mysql.update(
+        "carlist",
+        {
+          num: num * 1 - 1,
+        },
+        {
+          where: { id: id },
+        }
+      );
+    }
+    ctx.body = {
+      code: 200,
+      msg: "修改成功",
+    };
+  }
+}
+
+module.exports = NewShopController;
diff --git a/egg/app/mock/index.js b/egg/app/mock/index.js
index 0169189ac4c405ba0fc5cfb8e0aa97d815e00dfd..6ceb2c352573555f6f3818880179d855abd8fb02 100644
--- a/egg/app/mock/index.js
+++ b/egg/app/mock/index.js
@@ -35,11 +35,13 @@ const userList = Mock.mock({
           ],
           "rightlist|3-5": [
             {
+              "id|+1": 1,
               name: "@cword(2,3)", //商品名字
               img: "@image(50x50,@color)", //商品图片
               "weight|50-300": 0, //商品重量
               "MonthlyS|10-100": 0, //商品月售
               "price|10-50": 0, //商品单价
+              num: 0,
             },
           ],
         },
diff --git a/egg/app/router.js b/egg/app/router.js
index de6be394bf023c21c0edad8e5d35271844e9cc2c..d9601e9ff91d24887ede61cbbf3cf256c4b486e5 100644
--- a/egg/app/router.js
+++ b/egg/app/router.js
@@ -12,4 +12,9 @@ module.exports = (app) => {
   router.post("/api/get/shop", controller.shop.getShop);
   router.post("/api/get/shopDetail", controller.detail.getDetail);
   router.post("/api/get/shopDetaillist", controller.detail.getDetailList);
+  router.post("/api/carlist", controller.newShop.newShop);
+  router.post("/api/get/carlist", controller.newShop.getNewhop);
+  router.post("/api/click/carlist", controller.newShop.clickCheckAll);
+  router.post("/api/add/carlist", controller.newShop.clickAdd);
+  router.post("/api/min/carlist", controller.newShop.clickMinus);
 };
diff --git a/vue-app/components.d.ts b/vue-app/components.d.ts
index e822b377bf1732a9f9347563dfec2b030a4889da..45759a30e3d00aff6bb1923903c52044fbc84cee 100644
--- a/vue-app/components.d.ts
+++ b/vue-app/components.d.ts
@@ -14,13 +14,16 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./src/components/Search/Search.vue')['default']
+    SearchResults: typeof import('./src/components/searchResults/searchResults.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
     VanSearch: typeof import('vant/es')['Search']
     VanSidebar: typeof import('vant/es')['Sidebar']
     VanSidebarItem: typeof import('vant/es')['SidebarItem']
diff --git a/vue-app/src/api/index.js b/vue-app/src/api/index.js
index cd785d261f6e4d6e1e1395081c2831ccf832d1c7..88b39ef787367f3939d0d5d9d3f6440eb7c5ddcb 100644
--- a/vue-app/src/api/index.js
+++ b/vue-app/src/api/index.js
@@ -44,3 +44,48 @@ export const apiGetShopDetailList = (data) => {
     data,
   });
 };
+
+//详情页购物车数据
+export const apiGetCarList = (data) => {
+  return request({
+    url: "/api/carlist",
+    method: "post",
+    data,
+  });
+};
+
+//获取购物车数据
+export const apiGetCarListFn = (data) => {
+  return request({
+    url: "/api/get/carlist",
+    method: "post",
+    data,
+  });
+};
+
+//点击全选框
+export const apiClickCke = (data) => {
+  return request({
+    url: "/api/click/carlist",
+    method: "post",
+    data,
+  });
+};
+
+//点击加号
+export const apiClickAdd = (data) => {
+  return request({
+    url: "/api/add/carlist",
+    method: "post",
+    data,
+  });
+};
+
+//点击减号
+export const apiClickMin = (data) => {
+  return request({
+    url: "/api/min/carlist",
+    method: "post",
+    data,
+  });
+};
diff --git a/vue-app/src/components/Detail/Detail.vue b/vue-app/src/components/Detail/Detail.vue
index 5616b4f3541825d55fcc20f32a207b7afb908d7d..300240a51b43d64d5ae6fb3a5ea6185cdf643268 100644
--- a/vue-app/src/components/Detail/Detail.vue
+++ b/vue-app/src/components/Detail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="detail">
     <div class="detailNav">
-      <van-nav-bar left-arrow placeholder>
+      <van-nav-bar left-arrow placeholder @click-left="backToPrevious">
         <template #title>
-          <van-search v-model="value" placeholder="请输入搜索关键词" />
+          <van-search placeholder="请输入搜索关键词" />
         </template>
       </van-nav-bar>
     </div>
@@ -75,11 +75,15 @@
                 <div></div>
                 <div></div>
                 <van-stepper
-                  :v-model="value"
+                  :v-model="carNUm"
                   theme="round"
                   button-size="22"
                   disable-input
+                  :name="ite.name"
                   :show-minus="false"
+                  :show-input="false"
+                  @change="change"
+                  @plus="addNum(ite)"
                 />
               </div>
             </div>
@@ -87,13 +91,109 @@
         </div>
       </div>
     </div>
+    <div class="detailBtm">
+      <div class="detailLeft">
+        <div class="detailBtmImg">
+          <img src="../../assets/basket@3x.png" alt="" @click="show = true" />
+        </div>
+        <div class="detailBtmPriceAll">
+          数量：{{ numAll }}
+          总计：
+          <div class="priceAll">￥{{ priceAll }}</div>
+        </div>
+      </div>
+      <div class="detailBtmSubmit">去结算</div>
+    </div>
+
+    <van-popup v-model:show="show" position="bottom" :style="{ height: '33%' }">
+      <div class="carList">
+        <div class="carListHeader">
+          <!-- 购物车全选框 -->
+          <div class="checkAll">
+            <van-checkbox
+              v-model="checked"
+              name="全选"
+              ref="checkboxGroup"
+              @click="checkAll"
+              >全选</van-checkbox
+            >
+          </div>
+          <!-- 清空购物车 -->
+          <div class="carListclear">清空购物车</div>
+        </div>
+        <div class="carListChd">
+          <div class="carListItem" v-for="item in carList" :key="item.id">
+            <div class="carListItemLeft">
+              <div class="checkItem">
+                <!-- 购物车商品单选框 -->
+                <van-checkbox
+                  v-model="item.flag"
+                  :name="item.shopName"
+                  @click="clickOneCk(item.id)"
+                ></van-checkbox>
+              </div>
+              <!-- 购物车商品图片 -->
+              <div class="carListImg">
+                <img :src="item.shopImgSrc" alt="" />
+              </div>
+              <!-- 购物车商品详情 -->
+              <div class="carListNum">
+                <div class="carListUser">
+                  {{ item.shopName }}{{ item.weight }}g/份
+                </div>
+                <div class="carListPrice">
+                  <!-- 现价 -->
+                  <div class="carListCP">￥{{ item.price }}</div>
+                  <!-- 原价 -->
+                  <div class="carListOP">￥{{ item.price }}</div>
+                </div>
+              </div>
+            </div>
+            <!-- 购物车进步器 -->
+            <div class="carListSet">
+              <van-stepper
+                v-model="item.num"
+                theme="round"
+                button-size="22"
+                disable-input
+                :name="item.num"
+                @plus="addCarListNum({ id: item.id, num: item.num })"
+                @minus="minCarListNum({ id: item.id, num: item.num })"
+                :disable-minus="false"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="detailBtm">
+        <div class="detailLeft">
+          <div class="detailBtmImg">
+            <img src="../../assets/basket@3x.png" alt="" />
+          </div>
+          <div class="detailBtmPriceAll">
+            数量：{{ numAll }}
+            总计：
+            <div class="priceAll">￥{{ priceAll }}</div>
+          </div>
+        </div>
+        <div class="detailBtmSubmit">去结算</div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, computed, toRefs } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { apiGetShopDetail, apiGetShopDetailList } from "@/api";
+import {
+  apiClickAdd,
+  apiClickCke,
+  apiClickMin,
+  apiGetCarList,
+  apiGetCarListFn,
+  apiGetShopDetail,
+  apiGetShopDetailList,
+} from "@/api";
 import { showToast } from "vant";
 const route = useRoute();
 const router = useRouter();
@@ -128,13 +228,74 @@ const sidebarList = [
 ];
 const rightShopList = ref([]);
 const active = ref(0);
-//const onChange = (index) => showToast(`标签名 ${index + 1}`);
+const flag = ref(false);
+const carNUm = ref(0);
+const setList = ref([]);
+const numAll = ref(0);
+const show = ref(false);
+const checked = ref(true);
+const carList = ref([]);
+
+//const carList = reactive([]);
+
+const onChange = (index) => showToast(`标签名 ${index + 1}`);
 
 onMounted(() => {
   getShopDetailFn();
   getShopDetailListFn();
+  getCarListFn();
 });
 
+//计算价格
+const priceAll = ref(0);
+//获取购物车列表
+const getCarListFn = () => {
+  apiGetCarListFn().then((res) => {
+    console.log(res);
+    carList.value = res.list;
+
+    // carList.push(...res.list);
+    console.log(carList);
+    numAll.value = res.numAll;
+    priceAll.value = res.priceAll;
+  });
+};
+
+//点击购物车增加按钮
+const addCarListNum = ({ id, num }) => {
+  apiClickAdd({ id, num }).then((res) => {
+    console.log(res);
+    getCarListFn();
+  });
+};
+
+//点击购物车减少按钮
+const minCarListNum = ({ id, num }) => {
+  apiClickMin({ id, num }).then((res) => {
+    console.log(res);
+    getCarListFn();
+  });
+};
+
+// 点击商品复选框
+const clickOneCk = (id) => {
+  apiGetCarListFn().then((res) => {
+    res.list.forEach((item) => {
+      if (item.id == id) {
+        item.flag = !item.flag;
+      }
+    });
+    checked.value = carList.value.every((item) => {
+      return item.flag == true;
+    });
+  });
+};
+
+//返回上一页
+const backToPrevious = () => {
+  router.go(-1);
+};
+
 //获取详情商家信息
 const getShopDetailFn = () => {
   apiGetShopDetail(id).then((res) => {
@@ -149,12 +310,36 @@ const getShopDetailListFn = () => {
     rightShopList.value = res.list;
   });
 };
+
+//步进器
+const change = (value, detail) => {
+  console.log("步进器值", value);
+};
+
+//点击右侧商品加号
+const addNum = (list) => {
+  apiGetCarList(list).then((res) => {
+    console.log(res);
+  });
+};
+
+//点击提交
+const onSubmit = () => showToast("点击按钮");
+
+//点击全选框
+const checkAll = () => {
+  console.log(checked.value);
+  apiClickCke({ checked: checked.value }).then((res) => {
+    getCarListFn();
+    console.log(res);
+  });
+};
 </script>
 
 <style lang="scss">
 .detail {
   width: 100%;
-  height: 100%;
+  height: auto;
   .detailHeader {
     width: 100%;
   }
@@ -189,7 +374,7 @@ const getShopDetailListFn = () => {
   }
 }
 .detailHeader {
-  margin-left: 16px;
+  padding-left: 16px;
 }
 
 .shopContext {
@@ -237,7 +422,14 @@ const getShopDetailListFn = () => {
 }
 .detailBody {
   display: flex;
+  height: 572px;
+  .detailLeft {
+    height: 360px;
+  }
   .detailRight {
+    padding-bottom: 50px;
+    height: 572px;
+    overflow: scroll;
     margin-left: 16px;
     flex: 1;
     .rightItem {
@@ -299,12 +491,143 @@ const getShopDetailListFn = () => {
           }
         }
         .stepper {
+          width: 80px;
           display: flex;
           flex-direction: column;
+          align-items: flex-end;
           justify-content: space-between;
         }
       }
     }
   }
 }
+.detailBtm {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  box-shadow: 0 -1px 1px 0 #f1f1f1;
+  .detailLeft {
+    display: flex;
+    align-items: center;
+  }
+  .detailBtmImg {
+    width: 28px;
+    height: 26px;
+    margin-left: 24px;
+    margin-right: 32px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .detailBtmPriceAll {
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    .priceAll {
+      font-family: PingFangSC-Medium;
+      font-size: 18px;
+      color: #e93b3b;
+      font-weight: 600;
+    }
+  }
+  .detailBtmSubmit {
+    width: 90px;
+    height: 50px;
+    font-family: PingFangSC-Medium;
+    background: #4fb0f9;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 50px;
+  }
+}
+
+.carList {
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: bottom;
+  height: 193px;
+  bottom: 50px;
+  .carListHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+    height: 52px;
+    padding: 0 16px;
+    border: 1px solid #f1f1f1;
+    .checkAll {
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      line-height: 16px;
+    }
+    .carListclear {
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      text-align: right;
+      line-height: 16px;
+    }
+  }
+
+  .carListChd {
+    padding: 0 16px;
+    padding-top: 16px;
+    height: 140px;
+    overflow: scroll;
+    background: #fff;
+    .carListItem {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      .carListItemLeft {
+        display: flex;
+        align-items: center;
+      }
+      .carListImg {
+        margin-left: 16px;
+      }
+      .carListNum {
+        margin-left: 16px;
+        .carListUser {
+          margin-bottom: 8px;
+          font-family: PingFangSC-Medium;
+          font-size: 14px;
+          color: #333333;
+          font-weight: 600;
+        }
+        .carListPrice {
+          display: flex;
+          align-items: center;
+          .carListCP {
+            font-weight: 600;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #e93b3b;
+            margin-right: 6px;
+          }
+          .carListOP {
+            font-family: PingFangSC-Regular;
+            font-size: 12px;
+            color: #999999;
+            line-height: 20px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/vue-app/src/components/searchResults/searchResults.vue b/vue-app/src/components/searchResults/searchResults.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f72cb2c91bcd6240c153d0011080930e38da7e6
--- /dev/null
+++ b/vue-app/src/components/searchResults/searchResults.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss"></style>