feat: 商品的核销逻辑

src/components/Qrcode/index.vue

@@ -93,7 +93,7 @@ const props = defineProps({
   },
   loadingText: {
     type: String,
-    default: "二维码生成中",
+    default: "",
   },
 });
 

src/pages-order/order/components/OrderQrcode/index.vue

@@ -18,51 +18,46 @@
 
       <view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
 
-        <view class="flex flex-col w-full">
+        <view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
           <view >
             <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
-              {{ props.orderData.commodityName }}
+              {{ selectedVoucher.name }}
-            </view>
-
-            <view class="border-box font-size-12 color-99A0AE line-height-16">
-              {{ props.orderData.commodityAddress }}
             </view>
           </view>
 
-          <view v-if="props.selectedVoucher" class="flex flex-row mt-8">
+          <view v-if="selectedVoucher" class="flex flex-row">
-            <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ props.selectedVoucher.count }}{{ props.selectedVoucher.unit }}
+            <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
             </view>
-            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ props.selectedVoucher.count -
+            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
-              props.selectedVoucher.writeOffCount }}{{ props.selectedVoucher.unit }}可用</view>
           </view>
         </view>
 
-        <view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border mt-12">
+        <view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
-          <view class="flex flex-row flex-justify-between border-box w-full mt-16 px-12">
+          <view class="flex flex-row flex-justify-between border-box w-full px-12">
-            <view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证1</view>
+            <view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
-            <view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销1份</view>
+            <view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
           </view>
 
             <view class="flex  flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
-            :style="{ borderColor: props.selectedVoucher?.color }">
+            :style="{ borderColor: selectedVoucher?.color }">
             <Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
               :onval="true" />
           </view>
 
-          <view class="mt-20 mb-24 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">{{
+          <view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
-            props.selectedVoucher?.name }}
+            {{ selectedVoucher.name }} 
           </view>
         </view>
 
-        <view class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"> 
+        <view v-if="selectedVoucherList.length > 1" class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"> 
           <view class="actions-btn" @click.stop="upAction">
             <uni-icons type="left" size="16" color="#171717" />
           </view>
 
           <view class="flex flex-col">
             <view class="flex flex-row flex-justify-center flex-items-center"> 
-              <view class="theme-color-500 font-size-16">1</view>
+              <view class="theme-color-500 font-size-16">{{ currentVoucherIndex + 1 }}</view>
-              <view class="text-color-600 font-size-12">/3</view>
+              <view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</view>
             </view>
             
             <view class="text-color-600 font-size-14">扫码后点击下一张</view>
@@ -72,7 +67,7 @@
             <uni-icons type="right" size="16" color="#171717" />
           </view>
         </view>
-
+        <view v-else class="mb-24"></view>
       </view>
 
     </view>
@@ -117,7 +112,7 @@ const props = defineProps({
 });
 
 // Events定义
-const emit = defineEmits(["close", "update:modelValue"]);
+const emit = defineEmits(["close", "update:modelValue", "update:selectedVoucherIndex"]);
 
 // 弹窗引用
 const popupRef = ref(null);
@@ -125,10 +120,26 @@ const popupRef = ref(null);
 // 控制二维码渲染
 const showQrcode = ref(false);
 
+// 当前选择的凭证索引
+const currentVoucherIndex = ref(props.selectedVoucherIndex || 0);
+
+const selectedVoucherList = computed(() => {
+  const list = props.orderData?.commodityPackageConfig || [];
+  if (!Array.isArray(list)) return [];
+  return list.filter((item) => item?.packageStatus === 0);
+});
+
 // 二维码内容
+const selectedVoucher = computed(() => {
+  const list = selectedVoucherList.value || [];
+  if (!list.length) return null;
+  const idx = Math.min(Math.max(Number(currentVoucherIndex.value || 0), 0), list.length - 1);
+  return list[idx] || null;
+});
+
 const qrcodeVal = computed(() => {
   const orderId = props.orderData?.orderId || "";
-  const voucherName = props.selectedVoucher?.name || "";
+  const voucherName = selectedVoucher.value?.name || "";
   return orderId ? `${orderId}&${voucherName}` : "";
 });
 
@@ -162,17 +173,65 @@ watch(
   { immediate: true }
 );
 
+// 同步外部 prop -> 内部 index（初始化/外部变更）
+watch(
+  () => props.selectedVoucherIndex,
+  (newIdx) => {
+    const len = selectedVoucherList.value.length;
+    let idx = Number(newIdx || 0);
+    if (len && idx >= len) idx = 0;
+    currentVoucherIndex.value = idx;
+  },
+  { immediate: true }
+);
+
+// 当可用凭证列表变化时，确保 currentVoucherIndex 不越界
+watch(
+  selectedVoucherList,
+  (list) => {
+    const len = list.length;
+    if (len === 0) {
+      if (currentVoucherIndex.value !== 0) {
+        currentVoucherIndex.value = 0;
+      }
+      return;
+    }
+    if (currentVoucherIndex.value >= len) {
+      currentVoucherIndex.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
+// 当内部索引变化时，通知父组件（避免无用循环）
+watch(
+  () => currentVoucherIndex.value,
+  (val, oldVal) => {
+    if (val !== props.selectedVoucherIndex) {
+      emit("update:selectedVoucherIndex", val);
+    }
+  }
+);
+
 const handleClose = () => {
   emit("update:modelValue", false);
   emit("close");
 };
 
 const upAction = () => {
-  console.log("点击了上一张");
+  const len = selectedVoucherList.value.length;
+  if (!len) return;
+  let idx = Number(currentVoucherIndex.value || 0) - 1;
+  if (idx < 0) idx = len - 1;
+  currentVoucherIndex.value = idx;
 };
 
 const downAction = () => {
-  console.log("点击了下一张");
+  const len = selectedVoucherList.value.length;
+  if (!len) return;
+  let idx = Number(currentVoucherIndex.value || 0) + 1;
+  if (idx >= len) idx = 0;
+  currentVoucherIndex.value = idx;
 };
 
 </script>

src/pages-order/order/components/VoucherList/index.vue

@@ -4,7 +4,8 @@
       核销凭证列表
     </text>
     
-    <view class="flex flex-items-center flex-justify-between py-12 border-bottom" 
+    <view class="flex flex-items-center flex-justify-between py-12" 
+    :class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
     v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
       <view class="flex flex-col">
         <text class="text-color-900 font-size-16">{{ item.name }}</text>
@@ -14,8 +15,9 @@
         </view>
       </view>
 
-      <view class="flex flex-items-center bg-theme-color-500 px-14 py-8 rounded-8" @click="handleShowQrcode(item, index)">
+      <view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
-        <text class="color-white font-size-14">出示凭证</text>
+        <text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
+        <text v-else class="font-size-14 text-color-300">已核销</text>
       </view>
     </view>
   </view>
@@ -36,6 +38,13 @@ const props = defineProps({
 
 const handleShowQrcode = (item, index) => {
   console.log("显示核销凭证二维码，凭证信息：", item);
+  if (item.packageStatus !== 0) {
+    uni.showToast({
+      title: "该凭证已核销使用",
+      icon: "none",
+    });
+    return;
+  }
   emit("selected", { item, index });
 };
 

src/static/scss/padding.scss

@@ -297,6 +297,30 @@
   padding-bottom: 24px;
 }
 
+.p-32 {
+  padding: 32px;
+}
+.pt-32 {
+  padding-top: 32px;
+}
+.pb-32 {
+  padding-bottom: 32px;
+}
+.pl-32 {
+  padding-left: 32px;
+}
+.pr-32 {
+  padding-right: 32px;
+}
+.px-32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.py-32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }