feat: 快速预定的处理

feat: 样式调整
2026-03-20 00:25:12 +08:00 · 2026-03-17 20:23:27 +08:00 · 2026-03-17 20:18:53 +08:00 · 2026-03-17 20:12:42 +08:00 · 2026-03-17 20:09:19 +08:00 · 2026-03-16 22:35:35 +08:00
13 changed files with 375 additions and 68 deletions
--- a/src/components/LocationCard/index.vue
+++ b/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 = () => {
--- a/src/components/Qrcode/index.vue
+++ b/src/components/Qrcode/index.vue
@@ -93,7 +93,7 @@ const props = defineProps({
  },
  loadingText: {
    type: String,
-    default: "二维码生成中",
+    default: "",
  },
 });

--- a/src/pages-order/order/components/OrderQrcode/index.vue
+++ b/src/pages-order/order/components/OrderQrcode/index.vue
@@ -1,22 +1,106 @@
 <template>
-  <view
-    class="bg-white border-box rounded-12 flex flex-items-center flex-justify-center p-20 mb-12"
+   <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+    @change="handlePopupChange"
  >
-    <Qrcode
-      :size="size"
-      :unit="unit"
-      :val="val"
-      :loadMake="true"
-      :onval="true"
-    />
-  </view>
+    <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-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>
--- a/src/pages-order/order/components/OrderQrcode/styles/index.scss
+++ b/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;
+}
--- a/src/pages-order/order/components/VoucherList/index.vue
+++ b/src/pages-order/order/components/VoucherList/index.vue
@@ -4,19 +4,48 @@
      核销凭证列表
    </text>
    
-    <view class="flex flex-items-center flex-justify-between py-12 border-bottom">
+    <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">森系天幕租赁(3h)</text>
+        <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">总计2份</view>
-          <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩2份可用</view>
+          <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 bg-theme-color-500 px-14 py-8 rounded-8" @click="emit('click')">
-        <text class="color-white font-size-14">出示凭证</text>
+      <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>
+</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>
--- a/src/pages-order/order/detail.vue
+++ b/src/pages-order/order/detail.vue
@@ -2,39 +2,33 @@
  <view class="order-detail-page flex flex-col h-screen">
    <TopNavBar titleAlign="center" :background="$theme-color-100" title="订单详情" />

-    <view
-      class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
-    >
+    <view class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y">
      <OrderStatusInfo :orderData="orderData" />

-      <OrderQrcode
-        v-if="orderData.orderStatus === '2'"
-        size="132"
-        unit="px"
-        :val="orderData.orderId"
-      />
-
-      <VoucherList/>
+      <VoucherList v-if="orderData.orderStatus === '2'" :orderData="orderData" @selected="handleSelectedVoucher" />

      <AmtSection :orderData="orderData" @click="refundVisible = true" />

      <GoodsInfo :orderData="orderData" />

-      <UserInfo
-        v-if="orderData.commodityTypeCode === '0'"
-        :orderData="orderData"
-      />
+      <UserInfo v-if="orderData.commodityTypeCode === '0'" :orderData="orderData" />

      <OrderInfo :orderData="orderData" />
    </view>

-    <FooterSection
-      :orderData="orderData"
-      @refund="handleRefundConfirm"
-      @refresh="handlePaySuccess"
-    />
+    <FooterSection :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>
@@ -57,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 });
--- a/src/pages-quick/components/Card/styles/index.scss
+++ b/src/pages-quick/components/Card/styles/index.scss
@@ -1,5 +1,5 @@
 .left {
-  height: 107px;
+  height: 80px;
  width: 80px;
 }

--- a/src/pages-quick/components/Tabs/index.vue
+++ b/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>
--- a/src/pages-quick/components/Tabs/styles/index.scss
+++ b/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;
--- a/src/pages-quick/list.vue
+++ b/src/pages-quick/list.vue
@@ -4,16 +4,16 @@
    <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">
            {{ selectedDate.startDate }}
          </text>
-        </view>
+        </view> 

        <!-- 几晚 -->
        <text class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
@@ -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);
-  currentType.value = item.typeCode;
-
-  if (currentType.value === "0") {
-  }
-
+  console.log("选中的tab item: ", item);
+  didSelectedTabItem.value = item;
  paging.value.reload();
 };

--- a/src/pages/goods/components/GoodPackage/index.vue
+++ b/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>
--- a/src/static/fonts/znicons.js
+++ b/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",
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -297,6 +297,30 @@
  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);
 }
Author	SHA1	Message	Date
zoujing	14d2ad7b53	feat: 快速预定的处理	2026-03-20 00:25:12 +08:00
zoujing	b7d9ebf816	feat: 样式调整	2026-03-17 20:23:27 +08:00
zoujing	8696953f6f	feat: 样式调整	2026-03-17 20:18:53 +08:00
zoujing	be9e317284	feat: 图标的修改	2026-03-17 20:12:42 +08:00
zoujing	51ce0ccd8b	feat: 添加电话号码与微小调整	2026-03-17 20:09:19 +08:00
zoujing	662f05d523	feat: 调整了快速预定的图片高度	2026-03-16 22:35:35 +08:00
zoujing	40c37ea2e1	feat: 商品的核销逻辑	2026-03-16 22:28:24 +08:00
zoujing	f5c3a3ca2d	feat: 核销的样式的调整	2026-03-16 17:10:09 +08:00
zoujing	87e7f7522f	feat: 核销二维码的展示	2026-03-16 15:18:39 +08:00
zoujing	70afd4d19f	feat: 核销二维码组件	2026-03-13 16:54:10 +08:00