feat: 快速预定的处理

src/components/LocationCard/index.vue

@@ -63,7 +63,7 @@ const openMap = () => {
 // 拨打电话
 const getPhoneNumber = () => {
   const o = props.orderData || {};
-  return o.commodityPhone || o.phone || o.contactPhone || "";
+  return o.commodityPhone || o.phone || o.contactPhone || "15608199221";
 };
 
 const callPhone = () => {

src/components/Qrcode/index.vue

@@ -93,7 +93,7 @@ const props = defineProps({
   },
   loadingText: {
     type: String,
-    default: "二维码生成中",
+    default: "",
   },
 });
 

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/OrderQrcode/index.vue

@@ -1,22 +1,106 @@
 <template>
-  <view
+   <uni-popup
-    class="bg-white border-box rounded-12 flex flex-items-center flex-justify-center p-20 mb-12"
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+    @change="handlePopupChange"
   >
-    <Qrcode
+    <view class="refund-popup bg-F5F7FA border-box">
-      :size="size"
+      <view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
-      :unit="unit"
+        <view class="flex flex-col flex-items-center flex-full ">
-      :val="val"
+          <view class="flex-full font-size-16 text-color-900 text-center">核销凭证</view>
-      :loadMake="true"
+          <view class="flex-full font-size-12 text-color-600 text-center mt-4">请向工作人员出示此码</view>
-      :onval="true"
-    />
         </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-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
+
+        <view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
+          <view >
+            <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
+              {{ selectedVoucher.name }}
+            </view>
+          </view>
+
+          <view v-if="selectedVoucher" class="flex flex-row">
+            <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
+            </view>
+            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
+          </view>
+        </view>
+
+        <view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
+          <view class="flex flex-row flex-justify-between border-box w-full px-12">
+            <view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
+            <view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
+          </view>
+
+            <view class="flex  flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
+            :style="{ borderColor: selectedVoucher?.color }">
+            <Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
+              :onval="true" />
+          </view>
+
+          <view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
+            {{ selectedVoucher.name }} 
+          </view>
+        </view>
+
+        <view v-if="selectedVoucherList.length > 1" 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">{{ currentVoucherIndex + 1 }}</view>
+              <view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</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 v-else class="mb-24"></view>
+      </view>
+
+    </view>
+
+  </uni-popup>
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import Qrcode from "@/components/Qrcode/index.vue";
+import { defineProps, defineEmits } from "vue";
+import { ref, watch, computed, nextTick } 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,
@@ -25,11 +109,133 @@ const props = defineProps({
     type: String,
     default: "px",
   },
-  val: {
-    type: String,
-    default: "text",
-  },
 });
+
+// Events定义
+const emit = defineEmits(["close", "update:modelValue", "update:selectedVoucherIndex"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 控制二维码渲染
+const showQrcode = ref(false);
+
+// 当前选择的凭证索引
+const currentVoucherIndex = ref(props.selectedVoucherIndex || 0);
+
+const selectedVoucherList = computed(() => {
+  const list = props.orderData?.commodityPackageConfig || [];
+  if (!Array.isArray(list)) return [];
+  return list.filter((item) => item?.packageStatus === 0);
+});
+
+// 二维码内容
+const selectedVoucher = computed(() => {
+  const list = selectedVoucherList.value || [];
+  if (!list.length) return null;
+  const idx = Math.min(Math.max(Number(currentVoucherIndex.value || 0), 0), list.length - 1);
+  return list[idx] || null;
+});
+
+const qrcodeVal = computed(() => {
+  const orderId = props.orderData?.orderId || "";
+  const voucherName = selectedVoucher.value?.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();
+    }
+  },
+  { immediate: true }
+);
+
+// 同步外部 prop -> 内部 index（初始化/外部变更）
+watch(
+  () => props.selectedVoucherIndex,
+  (newIdx) => {
+    const len = selectedVoucherList.value.length;
+    let idx = Number(newIdx || 0);
+    if (len && idx >= len) idx = 0;
+    currentVoucherIndex.value = idx;
+  },
+  { immediate: true }
+);
+
+// 当可用凭证列表变化时，确保 currentVoucherIndex 不越界
+watch(
+  selectedVoucherList,
+  (list) => {
+    const len = list.length;
+    if (len === 0) {
+      if (currentVoucherIndex.value !== 0) {
+        currentVoucherIndex.value = 0;
+      }
+      return;
+    }
+    if (currentVoucherIndex.value >= len) {
+      currentVoucherIndex.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
+// 当内部索引变化时，通知父组件（避免无用循环）
+watch(
+  () => currentVoucherIndex.value,
+  (val, oldVal) => {
+    if (val !== props.selectedVoucherIndex) {
+      emit("update:selectedVoucherIndex", val);
+    }
+  }
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+
+const upAction = () => {
+  const len = selectedVoucherList.value.length;
+  if (!len) return;
+  let idx = Number(currentVoucherIndex.value || 0) - 1;
+  if (idx < 0) idx = len - 1;
+  currentVoucherIndex.value = idx;
+};
+
+const downAction = () => {
+  const len = selectedVoucherList.value.length;
+  if (!len) return;
+  let idx = Number(currentVoucherIndex.value || 0) + 1;
+  if (idx >= len) idx = 0;
+  currentVoucherIndex.value = idx;
+};
+
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

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

@@ -0,0 +1,23 @@
+.refund-popup {
+  border-radius: 15px 15px 0 0;
+  padding-bottom: 40px;
+}
+
+.close {
+  top: 14px;
+  right: 12px;
+}
+
+.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;
+}

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

@@ -0,0 +1,51 @@
+<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" 
+    :class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
+    v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
+      <view class="flex flex-col">
+        <text class="text-color-900 font-size-16">{{ item.name }}</text>
+        <view class="flex flex-row mt-8">
+          <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{item.unit}}</view>
+          <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount }}{{item.unit}}可用</view>
+        </view>
+      </view>
+
+      <view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
+        <text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
+        <text v-else class="font-size-14 text-color-300">已核销</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import {defineProps, defineEmits } from "vue";
+
+const emit = defineEmits(["selected"]);
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const handleShowQrcode = (item, index) => {
+  console.log("显示核销凭证二维码，凭证信息：", item);
+  if (item.packageStatus !== 0) {
+    uni.showToast({
+      title: "该凭证已核销使用",
+      icon: "none",
+    });
+    return;
+  }
+  emit("selected", { item, index });
+};
+
+</script>

src/pages-order/order/detail.vue

@@ -2,37 +2,33 @@
   <view class="order-detail-page flex flex-col h-screen">
     <TopNavBar titleAlign="center" :background="$theme-color-100" title="订单详情" />
 
-    <view
+    <view class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y">
-      class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
-    >
       <OrderStatusInfo :orderData="orderData" />
 
-      <OrderQrcode
+      <VoucherList v-if="orderData.orderStatus === '2'" :orderData="orderData" @selected="handleSelectedVoucher" />
-        v-if="orderData.orderStatus === '2'"
-        size="132"
-        unit="px"
-        :val="orderData.orderId"
-      />
 
       <AmtSection :orderData="orderData" @click="refundVisible = true" />
 
       <GoodsInfo :orderData="orderData" />
 
-      <UserInfo
+      <UserInfo v-if="orderData.commodityTypeCode === '0'" :orderData="orderData" />
-        v-if="orderData.commodityTypeCode === '0'"
-        :orderData="orderData"
-      />
 
       <OrderInfo :orderData="orderData" />
     </view>
 
-    <FooterSection
+    <FooterSection :orderData="orderData" @refund="handleRefundConfirm" @refresh="handlePaySuccess" />   
-      :orderData="orderData"
-      @refund="handleRefundConfirm"
-      @refresh="handlePaySuccess"
-    />
   </view>
 
+  <!-- 核销凭证 二维码 -->
+  <OrderQrcode
+    v-show="visbleQrcode"
+    v-model="visbleQrcode"
+    :orderData="orderData"
+    :selectedVoucher="selectedVoucher"
+    :selectedVoucherIndex="selectedVoucherIndex"
+    @close="handleClose"
+  />
+
   <!-- 退款状态显示 -->
   <RefundPopup v-model="refundVisible" :orderData="orderData" />
 </template>
@@ -43,6 +39,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";
@@ -54,8 +51,27 @@ import RefundPopup from "@/components/RefundPopup/index.vue";
 const refundVisible = ref(false);
 const orderData = ref({});
 
+const visbleQrcode = ref(false);
+const selectedVoucher = ref(null);
+const selectedVoucherIndex = ref(0);
+
 onLoad(({ orderId }) => getOrderDetail(orderId));
 
+// 处理选中核销凭证事件
+const handleSelectedVoucher = (voucher) => {
+  console.log("选中的核销凭证：", voucher);
+  selectedVoucher.value = voucher.item;
+  selectedVoucherIndex.value = voucher.index;
+  visbleQrcode.value = true;
+}
+
+// 关闭核销凭证二维码弹窗
+const handleClose = () => {
+  visbleQrcode.value = false;
+  selectedVoucher.value = null;
+  selectedVoucherIndex.value = 0;
+};
+
 // 获取订单详情
 const getOrderDetail = async (orderId) => {
   const res = await userOrderDetail({ orderId });

src/pages-quick/components/Card/styles/index.scss

@@ -1,5 +1,5 @@
 .left {
-  height: 107px;
+  height: 80px;
   width: 80px;
 }
 

src/pages-quick/components/Tabs/index.vue

@@ -61,8 +61,12 @@ const tabList = ref([]);
 
 // 处理Tab点击
 const handleTabClick = (index) => {
-  if (activeIndex.value === index) return;
+  changeTabItem(index);
+};
 
+// 支持 force 参数，强制触发（即使 index 与当前相同）
+const changeTabItem = (index, force = false) => {
+  if (!force && activeIndex.value === index) return;
   activeIndex.value = index;
 
   emit("change", {
@@ -70,7 +74,8 @@ const handleTabClick = (index) => {
     item: tabList.value[index],
   });
   emit("update:modelValue", index);
-};
+}
+
 
 // 监听tabs变化
 watch(
@@ -114,6 +119,12 @@ const getCommodityTypePageList = async () => {
   } else {
     tabList.value = props.tabs;
   }
+  // 加载完成后强制选中第一个项并通知外部
+  if (tabList.value && tabList.value.length > 0) {
+    changeTabItem(0, true);
+  } else {
+    changeTabItem(props.defaultActive, true);
+  }
 };
 
 </script>

src/pages-quick/components/Tabs/styles/index.scss

@@ -17,7 +17,7 @@
   /* 不让子项拉伸，按内容宽度排列 */
   padding: 0 12px;
   /* 增加横向间距，便于触控 */
-  min-width: 56px;
+  min-width: 72px;
   /* 保证可点击区域 */
 }
 
@@ -42,9 +42,9 @@
   &::before {
     content: "";
     position: absolute;
-    left: 0;
+    left: 4px;
     top: 0;
-    right: 0;
+    right: 4px;
     bottom: 0;
     background-color: #fff;
     border-radius: 20px 20px 0 0;
@@ -76,9 +76,9 @@
   left: 50%;
   transform: translateX(-50%) scaleX(0.9);
   height: 3px;
-  width: 20px;
+  width: 24px;
   background-color: $theme-color-500;
-  border-radius: 4px 4px 0 0;
+  border-radius: 3px 3px 0 0;
   opacity: 0;
   transition: opacity 0.2s ease, transform 0.2s ease;
   z-index: 3;

src/pages-quick/list.vue

@@ -4,10 +4,10 @@
     <template #top>
       <TopNavBar title="快速预定" :background="$theme-color-100" />
 
-      <Tabs @change="handleTabChange" />
+      <Tabs @change="handleTabChange"/>
 
       <!-- 选择入住、离店日期 0:是酒店 -->
-      <view v-if="currentType === '0' && dataList.length > 0" class="bg-white border-box flex flex-items-center p-12">
+      <view v-if="didSelectedTabItem && didSelectedTabItem.orderType === 0" class="bg-white border-box flex flex-items-center p-12">
         <view class="in flex flex-items-center">
           <text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
           <text class="font-size-14 font-500 color-171717">
@@ -57,17 +57,22 @@ const selectedDate = ref({
 });
 const dataList = ref([]);
 const paging = ref(null);
-const currentType = ref("0"); // 当前选中类型
+// 当前选中项
+const didSelectedTabItem = ref(null);
 
 const queryList = async (pageNum = 1, pageSize = 10) => {
+  if (!didSelectedTabItem.value) {
+    paging.value.complete([]);
+    return;
+  }
   try {
     const params = {
-      commodityTypeCode: currentType.value,
+      commodityTypeCode: didSelectedTabItem.value.typeCode,
       size: pageSize,
       current: pageNum,
     };
 
-    if (currentType.value === "0") {
+    if (didSelectedTabItem.value.orderType === 0) {
       params.checkInDate = selectedDate.value.startDate;
       params.checkOutDate = selectedDate.value.endDate;
     }
@@ -92,12 +97,8 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
 };
 
 const handleTabChange = ({ item }) => {
-  console.log("item typeCode: ", item.typeCode);
+  console.log("选中的tab item: ", item);
-  currentType.value = item.typeCode;
+  didSelectedTabItem.value = item;
-
-  if (currentType.value === "0") {
-  }
-
   paging.value.reload();
 };
 

src/pages/goods/components/GoodPackage/index.vue

@@ -7,7 +7,7 @@
     <view class="flex flex-items-start flex-col"
         v-for="(item, index) in goodsData.commodityPackageConfig" :key="index"
     >
-        <view class="title-row ml-4 mb-4">
+        <view class="title-row py-4 ml-4">
           <text class="left font-size-14 color-171717">{{ item.name }}</text>
           <view class="sep" aria-hidden="true"></view>
           <text class="right font-size-14 color-171717">{{ item.count }}{{ item.unit }}</text>

src/static/fonts/znicons.js

@@ -1,6 +1,6 @@
 export const zniconsMap = {
   "zn-wifi": "\ue681",
-  "zn-bath": "\ue682",
+  "zn-bath": "\ue69a",
   "zn-frame": "\ue683",
   "zn-shower-gel": "\ue684",
   "zn-a-washingmachine": "\ue685",

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 {
+.mx-4 {
-  margin-top: 4px;
+  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,48 @@
   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;
+}
+
+.p-32 {
+  padding: 32px;
+}
+.pt-32 {
+  padding-top: 32px;
+}
+.pb-32 {
+  padding-bottom: 32px;
+}
+.pl-32 {
+  padding-left: 32px;
+}
+.pr-32 {
+  padding-right: 32px;
+}
+.px-32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.py-32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }