feat: 核销的样式的调整

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="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-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
+        <view class="flex flex-col w-full">
-          :style="{ borderColor: props.selectedVoucher?.color }"
+          <view >
-        >
+            <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
-          <Qrcode
+              {{ props.orderData.commodityName }}
-            v-if="showQrcode"
+            </view>
-            :size="props.size"
+
-            :unit="props.unit"
+            <view class="border-box font-size-12 color-99A0AE line-height-16">
-            :val="qrcodeVal"
+              {{ props.orderData.commodityAddress }}
-            :loadMake="true"
+            </view>
-            :onval="true"
+          </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">

src/pages-order/order/components/OrderQrcode/styles/index.scss

@@ -11,3 +11,13 @@
 .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;
+}