feat: 核销的组件的样式搭建

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

@@ -11,10 +11,10 @@
     </button>
     <button
       :class="[
-        'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 color-white',
+        'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 bg-theme-color-500',
         {
           'bg-FF3D60': statusCode === '0',
-          'theme-color-500': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
+          'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
         },
       ]"
       @click="handleButtonClick(orderData)"

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

@@ -0,0 +1,22 @@
+<template>
+  <view class="bg-white border-box rounded-12 px-12 pt-12 mb-12">
+    <text class="font-size-16 color-171717 line-height-24 font-500">
+      核销凭证列表
+    </text>
+    
+    <view class="flex flex-items-center flex-justify-between py-12 border-bottom">
+      <view class="flex flex-col">
+        <text class="text-color-900 font-size-16">森系天幕租赁(3h)</text>
+        <view class="flex flex-row mt-8">
+          <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计2份</view>
+          <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩2份可用</view>
+        </view>
+      </view>
+
+      <view class="flex flex-items-center bg-theme-color-500 px-14 py-8 rounded-8" @click="emit('click')">
+        <text class="color-white font-size-14">出示凭证</text>
+      </view>
+    </view>
+
+  </view>
+</template>

src/pages-order/order/detail.vue

@@ -14,6 +14,8 @@
         :val="orderData.orderId"
       />
 
+      <VoucherList/>
+
       <AmtSection :orderData="orderData" @click="refundVisible = true" />
 
       <GoodsInfo :orderData="orderData" />
@@ -43,6 +45,7 @@ import { onLoad } from "@dcloudio/uni-app";
 import { userOrderDetail, orderRefund } from "@/request/api/OrderApi";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import OrderQrcode from "./components/OrderQrcode/index.vue";
+import VoucherList from "./components/VoucherList/index.vue";
 import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
 import GoodsInfo from "./components/GoodsInfo/index.vue";
 import UserInfo from "./components/UserInfo/index.vue";

src/static/scss/border.scss

@@ -7,14 +7,14 @@
   border-top: 1px solid #e5e8ee;
 }
 
-.border-top-8 {
-  border-top: 8px solid #f5f5f5;
-}
-
 .border-bottom {
   border-bottom: 1px solid #e5e8ee;
 }
 
+.border-top-8 {
+  border-top: 8px solid #f5f5f5;
+}
+
 .border-ff {
   border: 1px solid #fff;
 }

src/static/scss/colors.scss

@@ -58,32 +58,32 @@
 
 // text 颜色
 .text-color-900 {
-  color: $text-color-900;
+  color: $text-color-900; // #181B25
 }
 .text-color-800 {
-  color: $text-color-800;
+  color: $text-color-800; // #222530
 }
 .text-color-700 {
-  color: $text-color-700;
+  color: $text-color-700; // #2B303B
 }
 .text-color-600 {
-  color: $text-color-600;
+  color: $text-color-600; // #525866
 }
 .text-color-500 {
-  color: $text-color-500;
+  color: $text-color-500; // #717784
 }
 .text-color-400 {
-  color: $text-color-400;
+  color: $text-color-400; // #99A0AE
 }
 .text-color-300 {
-  color: $text-color-300;
+  color: $text-color-300; // #CACFD8
 }
 .text-color-200 {
-  color: $text-color-200;
+  color: $text-color-200; // #E5E8EE
 }
 .text-color-100 {
-  color: $text-color-100;
+  color: $text-color-100; // #F2F5F8
 }
 .text-color-50 {
-  color: $text-color-50;
+  color: $text-color-50; // #F9FAFB
 }

src/static/scss/ellipsis.scss

@@ -11,3 +11,10 @@
   -webkit-line-clamp: 2;
   overflow: hidden;
 }
+
+.ellipsis-3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}

src/static/scss/font-size.scss

@@ -42,3 +42,11 @@
 .font-size-24 {
   font-size: 24px;
 }
+
+.font-size-28 {
+  font-size: 28px;
+}
+
+.font-size-32 {
+  font-size: 32px;
+}

src/static/scss/height.scss

@@ -22,6 +22,14 @@
   height: 16px;
 }
 
+.h-18 {
+  height: 18px;
+}
+
+.h-20 {
+  height: 20px;
+}
+
 .h-24 {
   height: 24px;
 }

src/static/scss/margin.scss

@@ -1,8 +1,17 @@
-// 外边距-bottom
+// 外边距
 .ml-auto {
   margin-left: auto;
 }
 
+.mr-auto {
+  margin-right: auto;
+}
+
+// 2px
+.m-2 {
+  margin: 2px;
+}
+
 .mt-2 {
   margin-top: 2px;
 }
@@ -11,9 +20,35 @@
   margin-bottom: 2px;
 }
 
+.ml-2 {
+  margin-left: 2px;
+}
+
+.mr-2 {
+  margin-right: 2px;
+}
+
+.mx-2 {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.my-2 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+// 4px
 .m-4 {
   margin: 4px;
 }
+.mt-4 {
+  margin-top: 4px;
+}
+
+.mb-4 {
+  margin-bottom: 4px;
+}
 
 .ml-4 {
   margin-left: 4px;
@@ -23,14 +58,20 @@
   margin-right: 4px;
 }
 
-.mt-4 {
-  margin-top: 4px;
+.mx-4 {
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
-.mb-4 {
+.my-4 {
+  margin-top: 4px;
   margin-bottom: 4px;
 }
 
+// 6px
+.m-6 {
+  margin: 6px;
+}
 .mt-6 {
   margin-top: 6px;
 }
@@ -47,6 +88,17 @@
   margin-right: 6px;
 }
 
+.mx-6 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.my-6 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+// 8px
 .m-8 {
   margin: 8px;
 }
@@ -55,6 +107,10 @@
   margin-top: 8px;
 }
 
+.mb-8 {
+  margin-bottom: 8px;
+}
+
 .ml-8 {
   margin-left: 8px;
 }
@@ -63,10 +119,21 @@
   margin-right: 8px;
 }
 
-.mb-8 {
+.mx-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.my-8 {
+  margin-top: 8px;
   margin-bottom: 8px;
 }
 
+// 10px
+.m-10 {
+  margin: 10px;
+}
+
 .mt-10 {
   margin-top: 10px;
 }
@@ -79,6 +146,21 @@
   margin-left: 10px;
 }
 
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mx-10 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.my-10 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+// 12px
 .m-12 {
   margin: 12px;
 }
@@ -99,6 +181,52 @@
   margin-right: 12px;
 }
 
+.mx-12 {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.my-12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+// 14px
+.m-14 {
+  margin: 14px;
+}
+
+.mt-14 {
+  margin-top: 14px;
+}
+
+.mb-14 {
+  margin-bottom: 14px;
+}
+
+.ml-14 {
+  margin-left: 14px;
+}
+
+.mr-14 {
+  margin-right: 14px;
+}
+
+.mx-14 {
+  margin-left: 14px;
+  margin-right: 14px;
+}
+
+.my-14 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
+// 16px
+.m-16 {
+  margin: 16px;
+}
+
 .mt-16 {
   margin-top: 16px;
 }
@@ -115,6 +243,60 @@
   margin-right: 16px;
 }
 
+.mx-16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.my-16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+// 18px
+.m-18 {
+  margin: 18px;
+}
+
+.mt-18 {
+  margin-top: 18px;
+}
+
+.mb-18 {
+  margin-bottom: 18px;
+}
+
+.ml-18 {
+  margin-left: 18px;
+}
+
+.mr-18 {
+  margin-right: 18px;
+}
+
+.mx-18 {
+  margin-left: 18px;
+  margin-right: 18px;
+}
+
+.my-18 {
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+
+// 20px
+.m-20 {
+  margin: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
 .ml-20 {
   margin-left: 20px;
 }
@@ -123,10 +305,48 @@
   margin-right: 20px;
 }
 
+.mx-20 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.my-20 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+// 24px
+.m-24 {
+  margin: 24px;
+}
+
+.mt-24 {
+  margin-top: 24px;
+}
+
+.mb-24 {
+  margin-bottom: 24px;
+}
+
 .ml-24 {
   margin-left: 24px;
 }
 
+.mr-24 {
+  margin-right: 24px;
+}
+
+.mx-24 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.my-24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+// 其他
 .ml-30 {
   margin-left: 30px;
 }

src/static/scss/padding.scss

@@ -1,4 +1,44 @@
 // 内边距
+.p-2 {
+  padding: 2px;
+}
+.pt-2 {
+  padding-top: 2px;
+}
+
+.pb-2 {
+  padding-bottom: 2px;
+}
+
+.pl-2 {
+  padding-left: 2px;
+}
+
+.pr-2 {
+  padding-right: 2px;
+}
+
+.px-2 {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.py-2 {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.p-4 {
+  padding: 4px;
+}
+.pl-4 {
+  padding-left: 4px;
+}
+
+.pr-4 {
+  padding-right: 4px;
+}
+
 .pt-4 {
   padding-top: 4px;
 }
@@ -7,6 +47,17 @@
   padding-bottom: 4px;
 }
 
+.px-4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.py-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+
 .p-6 {
   padding: 6px;
 }
@@ -27,6 +78,17 @@
   padding-right: 6px;
 }
 
+.px-6 {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.py-6 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+
 .p-8 {
   padding: 8px;
 }
@@ -47,6 +109,47 @@
   padding-bottom: 8px;
 }
 
+.px-8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.py-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+
+.pb-10 {
+  padding-bottom: 10px;
+}
+
+.pl-10 {
+  padding-left: 10px;
+}
+
+.pr-10 {
+  padding-right: 10px;
+}
+
+.px-10 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.py-10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+
 .p-12 {
   padding: 12px;
 }
@@ -55,14 +158,6 @@
   padding-top: 12px;
 }
 
-.l-12 {
-  padding-left: 12px;
-}
-
-.pr-12 {
-  padding-right: 12px;
-}
-
 .pb-12 {
   padding-bottom: 12px;
 }
@@ -71,6 +166,45 @@
   padding-left: 12px;
 }
 
+.pr-12 {
+  padding-right: 12px;
+}
+
+.px-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.py-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.p-14 {
+  padding: 14px;
+}
+.pt-14 {
+  padding-top: 14px;
+}
+.pb-14 {
+  padding-bottom: 14px;
+}
+.pl-14 {
+  padding-left: 14px;
+}
+.pr-14 {
+  padding-right: 14px;
+}
+.px-14 {
+  padding-left: 14px;
+  padding-right: 14px;
+}
+.py-14 {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+
 .p-16 {
   padding: 16px;
 }
@@ -91,6 +225,17 @@
   padding-right: 16px;
 }
 
+.px-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.py-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+
 .p-20 {
   padding: 20px;
 }
@@ -99,6 +244,10 @@
   padding-top: 20px;
 }
 
+.pb-20 {
+  padding-bottom: 20px;
+}
+
 .pl-20 {
   padding-left: 20px;
 }
@@ -107,10 +256,17 @@
   padding-right: 20px;
 }
 
-.pb-20 {
+.px-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.py-20 {
+  padding-top: 20px;
   padding-bottom: 20px;
 }
 
+
 .p-24 {
   padding: 24px;
 }
@@ -123,6 +279,24 @@
   padding-bottom: 24px;
 }
 
+.pl-24 {
+  padding-left: 24px;
+}
+
+.pr-24 {
+  padding-right: 24px;
+}
+
+.px-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.py-24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }