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/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>
-    />
+        <!-- 关闭按钮 -->
-  </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

@@ -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-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">剩2份可用</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')">
+      <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 class="color-white font-size-14">出示凭证</text>
+        <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>

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
+    <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"
-      />
-
-      <VoucherList/>
 
       <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>
@@ -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 });

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,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);
+  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/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);
 }