feat: 核销二维码组件

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

@@ -1,22 +1,50 @@
 <template>
-  <view
-    class="bg-white border-box rounded-12 flex flex-items-center flex-justify-center p-20 mb-12"
-  >
-    <Qrcode
-      :size="size"
-      :unit="unit"
-      :val="val"
-      :loadMake="true"
-      :onval="true"
-    />
-  </view>
+  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
+    <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 ">
+          <view class="flex-full font-size-16 text-color-900 text-center">核销凭证</view>
+          <view class="flex-full font-size-12 text-color-600 text-center mt-4">请向工作人员出示此码</view>
+        </view>
+        <!-- 关闭按钮 -->
+        <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>
+
+    </view>
+
+  </uni-popup>
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import Qrcode from "@/components/Qrcode/index.vue";
+import { defineProps, defineEmits, onMounted } from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps({
+  // 弹窗显示状态
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  selectedVoucher: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  selectedVoucherIndex: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
   size: {
     type: Number,
     default: 132,
@@ -30,6 +58,43 @@ const props = defineProps({
     default: "text",
   },
 });
+
+// Events定义
+const emit = defineEmits(["close", "update:modelValue"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 方法定义
+const show = () => popupRef.value && popupRef.value.open();
+
+const hide = () => popupRef.value && popupRef.value.close();
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+  { immediate: true }
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+
+onMounted(() => {
+  props.val = props.orderData.orderId + '&' + props.selectedVoucher?.name;
+  
+});
+
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>