refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/product/product/style.scss

@@ -30,7 +30,15 @@ page {
     font-size: 24rpx;
 }
 .cuxiao{
-    padding:16rpx 32rpx;
+    padding:16rpx 32rpx 32rpx;
+}
+
+.con-cuxiao {
+    margin-bottom: 24rpx;
+
+    &.coupons {
+        padding-top: 8rpx;
+    }
 }
 .detail-btn {
     display: flex;
@@ -171,6 +179,7 @@ page {
 .scroll-hide {
     opacity: 0;
     transition: all 0.5s;
+    pointer-events: none;
 }
 .cur {
     color: $main-color;
@@ -188,52 +197,88 @@ page {
 
 .header-only-back {
     background: transparent;
+    z-index: 9;
 }
 .header,
 .header-only-back {
     padding-left: 10rpx;
-    position: fixed;
-    top: var(--status-bar-height);
-    width: 100%;
     z-index: 8;
-    height: 90rpx;
     font-size: 30rpx;
     transition: all 0.5s;
+
+    :deep(.u-navbar__content__left) {
+        width: auto !important;
+        min-width: 150rpx;
+        padding: 0 8rpx 0 0 !important;
+        z-index: 2;
+    }
+
+    :deep(.u-navbar__content) {
+        padding: 0 150rpx;
+        box-sizing: border-box;
+    }
 }
 ::v-deep .u-navbar {
     padding-left: 10rpx;
 }
 .nav-item {
-    flex: 2;
+    flex: 0 0 auto;
     position: relative;
     justify-content: center;
     height: 100%;
     display: flex;
     align-items: center;
+    padding: 0 20rpx;
+    font-size: 28rpx;
+    white-space: nowrap;
 }
 .header {
     color: #666666;
     background-color: #fff;
+
+    :deep(.u-navbar__content) {
+        background-color: #fff !important;
+    }
+
     .tab-bar {
         width: 100%;
         color: #666;
         font-weight: 400;
-        view {
-            padding: 0 3px;
-        }
     }
     &.bg-none {
         background: transparent;
+
+        :deep(.u-navbar__content) {
+            background-color: transparent !important;
+        }
     }
 }
 
+.headerRow--tabs {
+    justify-content: center;
+    gap: 8rpx;
+    width: 100%;
+}
+
+.headerList {
+    width: 100%;
+}
+
+.nav-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 56rpx;
+    min-height: 56rpx;
+    padding: 0 6rpx;
+}
+
 .page-bottom {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+    position: relative;
+    flex-shrink: 0;
     z-index: 9;
     background: #fff;
-    height: 100rpx;
+    min-height: 100rpx;
     width: 100%;
     display: flex;
     border-top: 2rpx solid #f2f2f2;
@@ -267,15 +312,24 @@ page {
 }
 
 .main-page {
-    height: calc(100% - var(--status-bar-height));
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
 }
-.icon-back {
-    padding-right: 10rpx;
+
+.index {
+    position: relative;
+    z-index: 10;
+    flex-shrink: 0;
 }
+.icon-back,
 .icon-list {
+    padding: 0;
+}
+
+.nav-action + .nav-action {
     border-left: 2rpx solid rgb(194, 194, 194);
-    padding-left: 10rpx;
 }
 .backs,
 .bg-back {
@@ -284,8 +338,9 @@ page {
     border-radius: 100px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
     padding: 8rpx 0;
+    box-sizing: border-box;
 }
 .bg-back {
     background: rgba($color: #fff, $alpha: 0.8);
@@ -324,6 +379,12 @@ page {
 }
 
 .product-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
     .header-line {
         height: 1px;
         background: #f2f2f2;
@@ -340,16 +401,16 @@ page {
     }
 
     .scroll-page {
+        flex: 1;
+        height: 0;
         width: 100%;
-        height: 100%;
         background: #f0f0f0;
     }
 
     .scroll-inner {
-        min-height: 100%;
         box-sizing: border-box;
         background: #f0f0f0;
-        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+        padding-bottom: 24rpx;
     }
 }