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";