v2体验版

pages/product-detail/components/OptionSelector.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- 通用文本选项选择（物流/印花/工艺）：胶囊样式，选中橙色边框+橙色文字 -->
+  <view class="option-wrap">
+    <text class="title">{{ title }}</text>
+
+    <view class="option-list">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="option-item"
+        :class="{ active: selected === item }"
+        @tap="selectOption(item)"
+      >
+        <text class="option-text">{{ item }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'OptionSelector',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selected: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  methods: {
+    selectOption(item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-wrap {
+  padding: 30rpx 20rpx; /* 15px 10px */
+  background: #ffffff;
+}
+
+/* 标题 */
+.title {
+  display: block;
+  font-size: 29rpx; /* 15px */
+  color: #000000;
+  line-height: 33rpx;
+  margin-bottom: 30rpx; /* 15px */
+}
+
+/* 选项列表 */
+.option-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx; /* 8px */
+}
+
+/* 单个胶囊：与颜色选择样式一致 */
+.option-item {
+  padding: 10rpx 24rpx; /* 5px 12px */
+  border: 1rpx solid #f2f2f2;
+  border-radius: 120rpx; /* 60px */
+  background: #ffffff;
+}
+.option-item.active {
+  border-color: #ff6800;
+}
+
+.option-text {
+  font-size: 27rpx; /* 14px */
+  color: #000000;
+  line-height: 33rpx;
+}
+.option-item.active .option-text {
+  color: #ff6800;
+}
+</style>

pages/product-detail/components/ProductInfo.vue

@@ -1,19 +1,19 @@
 <template>
-  <!-- 产品信息：名称 / SKU / 国家 / 价格 / 4 列快捷信息 -->
+  <!-- 产品信息：名称 / 国家 / 发货时效 / 价格 -->
   <view class="info-wrap">
     <!-- 产品名称 18px Bold #1A1A1A -->
     <text class="name">{{ info.name }}</text>
 
-    <!-- SKU + 国家 同行 12px #979797，值黑色 -->
+    <!-- 国家 + 发货时效 同行 12px #979797，值黑色 -->
     <view class="meta-row">
-      <view class="meta-item">
-        <text class="meta-label">SKU: </text>
-        <text class="meta-value">{{ info.sku }}</text>
-      </view>
       <view class="meta-item">
         <text class="meta-label">国家: </text>
         <text class="meta-value">{{ info.country }}</text>
       </view>
+      <view class="meta-item">
+        <text class="meta-label">发货时效: </text>
+        <text class="meta-value">{{ info.shipTime }}</text>
+      </view>
     </view>
 
     <!-- 价格：￥ 和 .00 为 10px，整数 24px，全部红色 -->
@@ -22,17 +22,6 @@
       <text class="price-integer">{{ info.price.integer }}</text>
       <text class="price-decimal">{{ info.price.decimal }}</text>
     </view>
-
-    <!-- 分隔线 0.5px #F0F0F0 -->
-    <view class="divider"></view>
-
-    <!-- 4 列快捷信息：label 10px 灰，value 13px 黑 居中 -->
-    <view class="quick-info">
-      <view class="quick-col" v-for="(item, index) in info.quickInfo" :key="index">
-        <text class="quick-label">{{ item.label }}</text>
-        <text class="quick-value">{{ item.value }}</text>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -63,7 +52,7 @@ export default {
   line-height: 50rpx; /* 26px */
 }
 
-/* SKU / 国家 同行 */
+/* 国家 / 发货时效 同行 */
 .meta-row {
   display: flex;
   margin-top: 10rpx;
@@ -104,34 +93,4 @@ export default {
   font-weight: 700;
   line-height: 1;
 }
-
-/* 分隔线 */
-.divider {
-  height: 1rpx; /* 0.5px */
-  background: #f0f0f0;
-  margin-top: 26rpx; /* 13px 间隙 */
-}
-
-/* 4 列快捷信息 */
-.quick-info {
-  display: flex;
-  margin-top: 20rpx; /* 10px */
-}
-.quick-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8rpx;
-}
-.quick-label {
-  font-size: 19rpx; /* 10px */
-  color: #979797;
-  line-height: 27rpx;
-}
-.quick-value {
-  font-size: 25rpx; /* 13px */
-  color: #000000;
-  line-height: 33rpx;
-}
 </style>

pages/product-detail/components/SizeSelector.vue

@@ -84,8 +84,10 @@ export default {
 
 /* 单个尺码按钮 44x34，圆角 4px，背景 #F7F7F7 */
 .size-item {
-  width: 85rpx; /* 44px */
+  min-width: 85rpx; /* 44px */
   height: 65rpx; /* 34px */
+  padding: 0 20rpx;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;