From f5c3a3ca2d704f22237f7083a2a1c52107673e2f Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Mon, 16 Mar 2026 17:10:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B8=E9=94=80=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/OrderQrcode/index.vue    | 77 +++++++++++++++----
 .../components/OrderQrcode/styles/index.scss  | 10 +++
 2 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/src/pages-order/order/components/OrderQrcode/index.vue b/src/pages-order/order/components/OrderQrcode/index.vue
index a717250..04e4bf0 100644
--- a/src/pages-order/order/components/OrderQrcode/index.vue
+++ b/src/pages-order/order/components/OrderQrcode/index.vue
@@ -16,23 +16,63 @@
         <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
       </view>
 
-      <view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center  p-20 mb-12 mx-12">
-        <view
-          class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
-          :style="{ borderColor: props.selectedVoucher?.color }"
-        >
-          <Qrcode
-            v-if="showQrcode"
-            :size="props.size"
-            :unit="props.unit"
-            :val="qrcodeVal"
-            :loadMake="true"
-            :onval="true"
-          />
+      <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 >
+            <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
+              {{ props.orderData.commodityName }}
+            </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 class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ props.selectedVoucher.count }}{{ props.selectedVoucher.unit }}
+            </view>
+            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ props.selectedVoucher.count -
+              props.selectedVoucher.writeOffCount }}{{ props.selectedVoucher.unit }}可用</view>
+          </view>
         </view>
 
-        <view class="mt-20 mb-24 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">{{ props.selectedVoucher?.name }}
+        <view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border mt-12">
+          <view class="flex flex-row flex-justify-between border-box w-full mt-16 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="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销1份</view>
+          </view>
+
+          <view class="flex  flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
+            :style="{ borderColor: props.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">{{
+            props.selectedVoucher?.name }}
+          </view>
         </view>
+
+        <view 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="text-color-600 font-size-12">/3</view>
+            </view>
+            
+            <view class="text-color-600 font-size-14">扫码后点击下一张</view>
+          </view>
+
+          <view class="actions-btn" @click.stop="downAction">
+            <uni-icons type="right" size="16" color="#171717" />
+          </view>
+        </view>
+
       </view>
 
     </view>
@@ -126,6 +166,15 @@ const handleClose = () => {
   emit("update:modelValue", false);
   emit("close");
 };
+
+const upAction = () => {
+  console.log("点击了上一张");
+};
+
+const downAction = () => {
+  console.log("点击了下一张");
+};
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages-order/order/components/OrderQrcode/styles/index.scss b/src/pages-order/order/components/OrderQrcode/styles/index.scss
index 9a6f523..a7a78da 100644
--- a/src/pages-order/order/components/OrderQrcode/styles/index.scss
+++ b/src/pages-order/order/components/OrderQrcode/styles/index.scss
@@ -10,4 +10,14 @@
 
 .borderColor {
   border-color: $theme-color-500;
+}
+
+.actions-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #F5F5F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
\ No newline at end of file