feat: 优化商品规格选择和购物车功能

- 将TODO注释改为FIXME标记需要修复的问题
- 在store中添加getCartMap方法用于获取购物车映射表
- 重构home页面，使用navv组件处理导航栏
- 完善商品规格选择逻辑，支持多规格切换
- 优化购物车小球动画效果
- 添加SCSS样式文件

pages/allDish/allDish.vue

@@ -768,7 +768,7 @@ function onChooseNorm(item) {
 // function onModelCancel() { }
 
 function onShowKeyboard() { }
-onLoad(() => {
+onShow(() => {
   if (store.productTypeId) {
     currentType.value = 0;
   }
@@ -940,12 +940,12 @@ onHide(() => {
             transition: '.01s all',
           }"
           @scrolltolower="() => {
-            // TODO: onLoadList 原版如何触发
+            // FIXME: onLoadList 原版如何触发
             // onLoadList()
           }"
           @scroll="onScroll"
           @refresherrefresh="() => {
-            // TODO: onRefresherRefresh 原版如何触发
+            // FIXME: onRefresherRefresh 原版如何触发
             // onRefresherRefresh()
           }"
         >

pages/home/home.scss

@@ -0,0 +1,609 @@
+// @import '../../uni.scss';
+.Arrow,
+.round {
+  width: 30rpx;
+  height: 30rpx;
+  background: red;
+  border-radius: 30rpx;
+}
+
+.round {
+  border-radius: 50%;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.header-box {
+  // position: fixed;
+  // transition-all duration-300 pb-[15rpx]
+  // padding-bottom: 15rpx;
+  transition-duration: 300ms;
+  width: 100%;
+  .location-share {
+    position: relative;
+  }
+  .location-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30rpx;
+    left:0;
+    right:0;
+    // padding: 0 29rpx;
+    .left {
+      display: flex;
+      align-items: center;
+      .address {
+        font-size: $text-base;
+        color: #fefefe;
+      }
+    }
+  }
+  .search-input {
+    margin: 38rpx 20rpx 0 20rpx;
+    align-items: center;
+    justify-content: space-between;
+    display: flex;
+    height: 64rpx;
+    border: 1px solid #fff;
+    border-radius: 32rpx;
+    background-color: rgba($color: #fff, $alpha: 0.1);
+    padding: 0 38rpx;
+    .input {
+      width: 100%;
+      color: #fff;
+      margin: 0 15rpx;
+    }
+
+  }
+  .carousel-box {
+    // display: none;
+    margin-top: 33rpx;
+    height: 306rpx;
+    width: 100%;
+    .swiper-item {
+      box-sizing: border-box;
+      .image {
+        border-radius: 28rpx;
+        width: 100%;
+        height: 100%;
+        transition: .3s all;
+        transform: scale(.8);
+      }
+    }
+  }
+}
+
+.food-type-box {
+  margin: 5rpx 20rpx 0 20rpx;
+  display: flex;
+  flex-wrap: wrap;
+  .type-list {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 26rpx;
+    &:nth-child(5n) {
+      margin-right: 0rpx;
+    }
+    .icon {
+      width: 97rpx;
+      height: 97rpx;
+    }
+    .name {
+      font-size: $text-base;
+      // font-size: 25rpx;
+      font-weight: 400;
+      color: #333333;
+      margin-top: 12rpx;
+    }
+  }
+}
+
+.newNotice-box {
+  margin: 30rpx 17rpx 0 17rpx;
+  height: 87rpx;
+  position: relative;
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 70rpx;
+    height: 74rpx;
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+    // background: linear-gradient(180deg,#fdf6f0,#fdf7f2);
+    .swiper-item {
+      display: flex;
+      align-items: center;
+      padding-right: 15rpx;
+      .text {
+        font-size: $text-base;
+        font-weight: bold;
+        color: #B4561B;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: 80rpx;
+      }
+    }
+  }
+}
+
+.functional-box {
+  margin: 30rpx 20rpx 0 20rpx;
+  display: flex;
+  .left {
+    width: 278rpx;
+    height: 264rpx;
+    position: relative;
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+    .text-box {
+      position: absolute;
+      top: 28rpx;
+      left: 30rpx;
+      display: flex;
+      flex-direction: column;
+      .first {
+        font-weight: 400;
+        font-size: $text-lg;
+        color: #FFFFFF;
+        text-shadow: 1px 2px 3px rgba(46, 77, 30, 0.15);
+      }
+      .second {
+        font-weight: 400;
+        font-size: $text-xs;
+        // font-size: 60rpx;
+        color: #FFFFFF;
+      }
+      .line {
+        width: 31rpx;
+        height: 3rpx;
+        background: #FFFFFF;
+        margin-top: 11rpx;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    margin-left: 14rpx;
+    flex: 1;
+    .top {
+      width: 100%;
+      height: 125rpx;
+      position: relative;
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+      .text-box {
+        position: absolute;
+        top: 25rpx;
+        left: 29rpx;
+        display: flex;
+        flex-direction: column;
+        .first {
+          font-weight: 400;
+          font-size: $text-lg;
+          // font-size: 999rpx;
+          color: #FFFFFF;
+          text-shadow: 1px 2px 3px rgba(77, 41, 18, 0.15);
+        }
+        .second {
+          font-weight: 400;
+          font-size: $text-xs;
+          color: #FFFFFF;
+        }
+        .line {
+          width: 31rpx;
+          height: 3rpx;
+          background: #FFFFFF;
+          margin-top: 11rpx;
+        }
+      }
+    }
+    .under {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 14rpx;
+      .one {
+        position: relative;
+        flex: 1;
+        height: 125rpx;
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+        .text-box {
+          position: absolute;
+          top: 16rpx;
+          left: 30rpx;
+          .first {
+            font-size: $text-lg;
+            color: #FFFFFF;
+            text-shadow: 1px 2px 3px rgba(77, 55, 25, 0.15);
+          }
+          .line {
+            width: 31rpx;
+            height: 3rpx;
+            background: #FFFFFF;
+            margin-top: 24rpx;
+          }
+        }
+      }
+      .two {
+        position: relative;
+        flex: 1;
+        height: 125rpx;
+        margin-left: 14rpx;
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+        .text-box {
+          position: absolute;
+          top: 16rpx;
+          left: 30rpx;
+          .first {
+            font-size: $text-lg;
+            color: #FFFFFF;
+            text-shadow: 1px 2px 3px rgba(77, 55, 25, 0.15);
+          }
+          .line {
+            width: 31rpx;
+            height: 3rpx;
+            background: #FFFFFF;
+            margin-top: 24rpx;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.product-nav-box {
+  margin: 58rpx 40rpx 0 40rpx;
+  display: flex;
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 44rpx;
+    position: relative;
+    .rotundity {
+      width: 35rpx;
+      height: 35rpx;
+      background: linear-gradient(180deg, #06CA64, #fff);
+      border-radius: 50%;
+      opacity: 0.5;
+      position: absolute;
+      right: -8rpx;
+      z-index: -1;
+    }
+    .title {
+      font-size: 33rpx;
+      font-weight: bold;
+      color: #333333;
+      transition: .3s all;
+    }
+    .title-active {
+      color: #06CA64;
+    }
+    .desc {
+      font-size: 21rpx;
+      font-weight: 400;
+      color: #666666;
+      margin-top: 13rpx;
+      padding: 7rpx 15rpx;
+      box-sizing: border-box;
+      border-radius: 24rpx;
+      transition: .3s all;
+    }
+    .desc-active {
+      background: rgba(6, 202, 100, 0.2);
+      color: #06CA64;
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -20rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 15rpx solid transparent;
+        border-right: 15rpx solid transparent;
+        border-top: 20rpx solid rgba(6, 202, 100, 0.2);
+        /* 上边框（颜色） */
+      }
+    }
+  }
+}
+
+.goods-list-box {
+  margin: 20rpx 19rpx 0 19rpx;
+  padding-bottom: 30rpx;
+  .item {
+    display: flex;
+    flex-direction: column;
+    padding: 20rpx 0;
+    border-bottom: 1px solid #E4E6E3;
+    &:last-child {
+      border: none;
+    }
+    .goods-top {
+      display: flex;
+      .left {
+        width: 194rpx;
+        height: 194rpx;
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .right {
+        margin-left: 28rpx;
+        flex: 1;
+        .name {
+          font-size: $text-lg;
+          // font-size: 29rpx;
+          font-weight: bold;
+          color: #333333;
+          margin-top: 26rpx;
+        }
+        .inventory {
+          // font-size: $text-sm;
+          font-size: $text-sm;
+          color: #999999;
+          margin-top: 20rpx;
+        }
+        .info {
+          margin-top: 32rpx;
+          margin-bottom: 0;
+          display: flex;
+          align-items: flex-end;
+          justify-content: space-between;
+          .price-box {
+            display: flex;
+            align-items: flex-end;
+            flex: 1;
+            flex-wrap: wrap;
+            .price {
+              font-weight: bold;
+              // font-size: $text-5xl;
+              font-size: $text-2xl;
+              color: #FF261F;
+              line-height: 1;
+              text {
+                font-size: $text-lg;
+              }
+            }
+            .original {
+              text-decoration-line: line-through;
+              // font-size: $text-sm;
+              font-size: $text-sm;
+              color: #959595;
+              margin-left: 20rpx;
+              display: flex;
+              align-items: center;
+            }
+            .no-original {
+              // font-size: $text-sm;
+              font-size: $text-sm;
+              color: #959595;
+              margin-left: 20rpx;
+              display: flex;
+              align-items: center;
+            }
+          }
+          .specifications {
+            font-size: $text-lg;
+            color: #FFFFFF;
+            width: 125rpx;
+            height: 58rpx;
+            text-align: center;
+            border-radius: 50rpx;
+            background-color: #06CA64;
+            line-height: 58rpx;
+          }
+        }
+        .choose-box {
+          display: flex;
+          align-items: center;
+          position: relative;
+          .line-one {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 88%;
+            height: 1px;
+            background-color: #D6D6D6;
+            z-index: -1;
+          }
+          .line-two {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 88%;
+            height: 1px;
+            background-color: #D6D6D6;
+            z-index: -1;
+          }
+          .add {
+            width: 58rpx;
+            height: 58rpx;
+            background: #06CA64;
+            border-radius: 21rpx 0rpx 21rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .icon {
+              width: 28rpx;
+              height: 28rpx;
+            }
+          }
+          .minus {
+            width: 58rpx;
+            height: 58rpx;
+            background: #06CA64;
+            border-radius: 21rpx 0rpx 21rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .icon {
+              width: 28rpx;
+              height: 4rpx;
+            }
+          }
+          .input {
+            width: 67rpx;
+            height: 58rpx !important;
+            line-height: 58rpx;
+            text-align: center;
+            font-size: $text-base;
+            color: #333333;
+            margin: 0 10rpx;
+            // border: none;
+            // padding: 0 !important;
+          }
+        }
+      }
+    }
+    .goods-under {
+      margin-top: 53rpx;
+      .goods-under-list {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        margin-bottom: 30rpx;
+        &:last-child {
+          margin-bottom: 0rpx;
+        }
+        .price-box {
+          display: flex;
+          align-items: flex-end;
+          flex: 1;
+          flex-wrap: wrap;
+          .price {
+            font-weight: bold;
+            // font-size: $text-5xl;
+            font-size: $text-2xl;
+            color: #FF261F;
+            line-height: 1;
+          }
+          .original {
+            // font-size: $text-sm;
+            font-size: $text-sm;
+            color: #959595;
+            margin-left: 20rpx;
+            display: flex;
+            align-items: center;
+          }
+          .no-original {
+            font-size: $text-sm;
+            // font-size: $text-sm;
+            color: #959595;
+            margin-left: 20rpx;
+            display: flex;
+            align-items: center;
+          }
+        }
+        .choose-box {
+          display: flex;
+          align-items: center;
+          position: relative;
+          .line-one {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 88%;
+            height: 1px;
+            background-color: #D6D6D6;
+            z-index: -1;
+          }
+          .line-two {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 88%;
+            height: 1px;
+            background-color: #D6D6D6;
+            z-index: -1;
+          }
+          .minus {
+            width: 58rpx;
+            height: 58rpx;
+            background: #06CA64;
+            border-radius: 21rpx 0rpx 21rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .icon {
+              width: 28rpx;
+              height: 4rpx;
+            }
+          }
+          .input {
+            width: 67rpx;
+            height: 58rpx;
+            line-height: 58rpx;
+            text-align: center;
+            // font-size: 29rpx;
+            font-size: $text-base;
+            color: #333333;
+            margin: 0 10rpx;
+          }
+          .add {
+            width: 58rpx;
+            height: 58rpx;
+            background: #06CA64;
+            border-radius: 21rpx 0rpx 21rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .icon {
+              width: 28rpx;
+              height: 28rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.icon-search1 {
+  font-size: 34rpx;
+  color: white;
+}
+.icon-yuyin {
+  font-size: 34rpx;
+  color: white;
+}
+.icon-positioning {
+  font-size: 40rpx;
+  color: white;
+}
+.icon-share {
+  font-size: 34rpx;
+  color: white;
+}
+:deep(.uni-tabbar-border) {
+  background-color: rgba(0, 0, 0, 0) !important;
+}

store/index.js

@@ -14,6 +14,7 @@ import { ref } from "vue";
  * @property {string} fontScale - 字体缩放比例
  * @property {method} increment - 增加购物车角标数量
  * @property {method} getCartTotalQuantity - 获取购物车商品数量
+ * @property {method} getCartMap - 获取购物车映射表（格式：specId_price -> quantity）
  * @property {method} changeCartList - 修改购物车列表
  * @property {method} changeShowVoice - 修改语音弹窗是否显示
  * @property {method} changeSearchValue - 修改搜索内容
@@ -116,6 +117,14 @@ export default defineStore("store",
     function getCartTotalQuantity() {
       return cartList.value.reduce((acc, cur) => acc + cur.quantity, 0);
     }
+    /**
+     * 获取购物车映射表（格式：specId_price -> quantity）
+     */
+    function getCartMap() {
+      return cartList.value.reduce((acc, cur) => {
+        return { ...acc, [`${cur.specId}_${cur.price}`]: cur.quantity };
+      }, {});
+    }
     /**
      * 语音弹窗是否显示
      */
@@ -139,6 +148,7 @@ export default defineStore("store",
       changeHomeType,
       changeCartList,
       getCartTotalQuantity,
+      getCartMap,
       changeShowVoice,
     };
   });