feat: 商品详情交互开发

components/Stepper/index.vue

@@ -1,23 +1,13 @@
 <template>
   <view class="stepper-wrapper">
-    <image
-      class="stepper-btn stepper-btn-minus"
-      src="./images/icon_minus.png"
-      mode="aspectFill"
-      @click="decrease"
-    ></image>
+    <uni-icons type="minus" size="24" color="#999" @click="decrease" />
     <text class="stepper-text">{{ value }}</text>
-    <image
-      class="stepper-btn stepper-btn-plus"
-      src="./images/icon_plus.png"
-      mode="aspectFill"
-      @click="increase"
-    ></image>
+    <uni-icons type="plus" size="24" color="#999" @click="increase" />
   </view>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits, watch } from "vue";
 
 // Props
 const props = defineProps({
@@ -41,6 +31,15 @@ const emit = defineEmits(["update:modelValue"]);
 // Local state
 const value = ref(props.modelValue);
 
+// 监听外部值变化，同步更新本地状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    value.value = newValue;
+  },
+  { immediate: true }
+);
+
 // Methods
 const decrease = () => {
   if (value.value === 1) return;