feat: 快速预定页面调整

2025-10-25 14:05:34 +08:00
parent ea36177f05
commit b9c1f45b29
24 changed files with 458 additions and 1301 deletions
--- a/src/components/DetailPopup/index.vue
+++ b/src/components/DetailPopup/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <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-full font-size-16 color-171717 line-height-24 text-center"
+          >明细详情</view
+        >
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </view>
+      <!-- 内容区域 -->
+      <view class="rounded-12 bg-white ml-12 mr-12 mb-40">
+        <view
+          class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <text class="font-size-16 font-500 color-171717">在线支付</text>
+          <text class="font-size-14 color-171717">239</text>
+        </view>
+        <view
+          class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <text class="font-size-16 font-500 color-171717">房费</text>
+          <text class="font-size-14 color-171717">239</text>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+// Props定义
+const props = defineProps({
+  // 弹窗显示状态
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  // 订单数据
+  orderData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// Events定义
+const emit = defineEmits(["update:modelValue"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 获取退款模板
+const commodityPurchaseInstruction = computed(() => {
+  if (props.orderData.commodityPurchaseInstruction) {
+    return props.orderData.commodityPurchaseInstruction;
+  }
+
+  return {};
+});
+
+// 方法定义
+const show = () => popupRef.value && popupRef.value.open();
+
+const hide = () => popupRef.value && popupRef.value.close();
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+  { immediate: true }
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
--- a/src/components/DetailPopup/styles/index.scss
+++ b/src/components/DetailPopup/styles/index.scss
@@ -0,0 +1,9 @@
+.refund-popup {
+  border-radius: 15px 15px 0 0;
+  padding-bottom: 40px;
+}
+
+.close {
+  top: 14px;
+  right: 12px;
+}
--- a/src/components/OrderCardItem/images/2025-07-11_160018.png
+++ b/src/components/OrderCardItem/images/2025-07-11_160018.png
--- a/src/components/OrderCardItem/images/icon_order.png
+++ b/src/components/OrderCardItem/images/icon_order.png
--- a/src/components/OrderCardItem/index.vue
+++ b/src/components/OrderCardItem/index.vue
@@ -1,52 +0,0 @@
-<template>
-  <view class="service-order-item">
-    <view class="order-header">
-      <image class="order-icon" src="./images/icon_order.png"></image>
-      <text class="order-title">温泉早鸟票</text>
-      <text :class="['order-status', `status-${orderStatus}`]">{{
-        orderStatusText
-      }}</text>
-    </view>
-    <view class="order-details">
-      <view class="detail-item">
-        <text class="detail-label">订单编号：</text>
-        <text class="detail-value">{{ orderId }}</text>
-      </view>
-      <view class="detail-item">
-        <text class="detail-label">游客人数：</text>
-        <text class="detail-value">{{ touristCount }}人</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-
-// Sample data
-const orderId = ref("7378400483776544");
-const touristCount = ref(7);
-const orderStatus = ref("pending"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'
-
-// Computed property for order status text
-const orderStatusText = computed(() => {
-  switch (orderStatus.value) {
-    case "canceled":
-      return "已取消";
-    case "pending":
-      return "待确认";
-    case "refundProcessing":
-      return "退款中";
-    case "refunded":
-      return "已退款";
-    case "completed":
-      return "已完成";
-    default:
-      return "";
-  }
-});
-</script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
--- a/src/components/OrderCardItem/prompt.md
+++ b/src/components/OrderCardItem/prompt.md
@@ -1,16 +0,0 @@
-## 订单 Item 组件
-
-组件名称：订单卡片组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片高度还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-order-item
-3、可以使用 uniapp 内置的组件
-4、订单状态有已取消、待确认、退款中、已退款、已完成状态，用颜色区分
-5、订单卡片有点击跳转订单详情交互
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
--- a/src/components/OrderCardItem/styles/index.scss
+++ b/src/components/OrderCardItem/styles/index.scss
@@ -1,81 +0,0 @@
-.service-order-item {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 15px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.order-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.order-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: $uni-border-radius-circle;
-  background-color: #ffa500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
-}
-
-.order-title {
-  font-size: $uni-font-size-lg;
-  color: $uni-text-color;
-}
-
-.order-status {
-  font-size: $uni-font-size-base;
-  padding: 5px 10px;
-  border-radius: 15px;
-}
-
-.status-canceled {
-  color: $uni-text-color-grey;
-  border: 1px solid #999;
-}
-
-.status-pending {
-  color: #ff4d94;
-  border: 1px solid #ff4d94;
-}
-
-.status-refundProcessing {
-  color: #ff9900;
-  border: 1px solid #ff9900;
-}
-
-.status-refunded {
-  color: #ff4d4f;
-  border: 1px solid #ff4d4f;
-}
-
-.status-completed {
-  color: #28a745;
-  border: 1px solid #28a745;
-}
-
-.order-details {
-  margin-top: 10px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.detail-label {
-  font-size: $uni-font-size-base;
-  color: #666;
-  margin-right: 10px;
-}
-
-.detail-value {
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <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-full font-size-16 color-171717 line-height-24 text-center"
+          >取消政策</view
+        >
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </view>
+      <!-- 内容区域 -->
+      <view class="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
+        <view class="flex flex-items-center mb-8">
+          <uni-icons fontFamily="znicons" size="20" color="#333">
+            {{ zniconsMap["zn-refund"] }}
+          </uni-icons>
+          <text class="font-size-14 font-600 color-171717 ml-8">退订规则</text>
+        </view>
+        <view class="font-size-14 color-525866 line-height-16">
+          <!-- {{ commodityPurchaseInstruction.refundContent }} -->
+          ·不予退款：12小时以内取消或未入住，不予退款。
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons";
+
+// Props定义
+const props = defineProps({
+  // 弹窗显示状态
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  // 订单数据
+  orderData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// Events定义
+const emit = defineEmits(["update:modelValue"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 获取退款模板
+const commodityPurchaseInstruction = computed(() => {
+  if (props.orderData.commodityPurchaseInstruction) {
+    return props.orderData.commodityPurchaseInstruction;
+  }
+
+  return {};
+});
+
+// 方法定义
+const show = () => popupRef.value && popupRef.value.open();
+
+const hide = () => popupRef.value && popupRef.value.close();
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+  { immediate: true }
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
--- a/src/components/RefundPopup/styles/index.scss
+++ b/src/components/RefundPopup/styles/index.scss
@@ -0,0 +1,9 @@
+.refund-popup {
+  border-radius: 15px 15px 0 0;
+  padding-bottom: 40px;
+}
+
+.close {
+  top: 14px;
+  right: 12px;
+}
--- a/src/components/Stepper/index.vue
+++ b/src/components/Stepper/index.vue
@@ -32,7 +32,7 @@ const props = defineProps({
 });

 // Emit
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "decrease", "increase"]);

 // Local state
 const value = ref(props.modelValue);
@@ -53,6 +53,7 @@ const decrease = () => {
  if (value.value > props.min) {
    value.value--;
    emit("update:modelValue", value.value);
+    emit("decrease");
  }
 };

@@ -60,6 +61,7 @@ const increase = () => {
  if (value.value < props.max) {
    value.value++;
    emit("update:modelValue", value.value);
+    emit("increase");
  }
 };
 </script>