feat: 核销二维码的展示

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

@@ -1,5 +1,11 @@
 <template>
-  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
+   <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+    @change="handlePopupChange"
+  >
     <view class="refund-popup bg-F5F7FA border-box">
       <view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
         <view class="flex flex-col flex-items-center flex-full ">
@@ -10,8 +16,23 @@
         <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
       </view>
 
-      <view class="bg-white border-box rounded-12 flex flex-items-center flex-justify-center p-20 mb-12 mx-12">
-        <Qrcode :size="props.size" :unit="props.unit" :val="props.val" :loadMake="true" :onval="true" />
+      <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>
+
+        <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>
@@ -21,8 +42,8 @@
 
 <script setup>
 import Qrcode from "@/components/Qrcode/index.vue";
-import { defineProps, defineEmits, onMounted } from "vue";
-import { ref, watch } from "vue";
+import { defineProps, defineEmits } from "vue";
+import { ref, watch, computed, nextTick } from "vue";
 
 const props = defineProps({
   // 弹窗显示状态
@@ -53,10 +74,6 @@ const props = defineProps({
     type: String,
     default: "px",
   },
-  val: {
-    type: String,
-    default: "text",
-  },
 });
 
 // Events定义
@@ -65,18 +82,40 @@ const emit = defineEmits(["close", "update:modelValue"]);
 // 弹窗引用
 const popupRef = ref(null);
 
+// 控制二维码渲染
+const showQrcode = ref(false);
+
+// 二维码内容
+const qrcodeVal = computed(() => {
+  const orderId = props.orderData?.orderId || "";
+  const voucherName = props.selectedVoucher?.name || "";
+  return orderId ? `${orderId}&${voucherName}` : "";
+});
+
 // 方法定义
 const show = () => popupRef.value && popupRef.value.open();
-
 const hide = () => popupRef.value && popupRef.value.close();
 
+const handlePopupChange = ({ show }) => {
+  // popup 真实打开后再渲染二维码，避免 canvas 尺寸为 0 报错
+  if (show) {
+    nextTick(() => {
+      showQrcode.value = true;
+    });
+  } else {
+    showQrcode.value = false;
+  }
+};
+
 // 监听modelValue变化
 watch(
   () => props.modelValue,
   (newVal) => {
     if (newVal) {
+      showQrcode.value = false;
       show();
     } else {
+      showQrcode.value = false;
       hide();
     }
   },
@@ -87,12 +126,6 @@ const handleClose = () => {
   emit("update:modelValue", false);
   emit("close");
 };
-
-onMounted(() => {
-  props.val = props.orderData.orderId + '&' + props.selectedVoucher?.name;
-  
-});
-
 </script>
 
 <style scoped lang="scss">