diff --git a/src/components/AddCarCrad/index.vue b/src/components/AddCarCrad/index.vue
new file mode 100644
index 0000000..0039f8a
--- /dev/null
+++ b/src/components/AddCarCrad/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="add-car-card">
+    <div class="description">
+      请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
+    </div>
+    <img
+      class="code-img"
+      src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20250920102920_354_52.png"
+      mode="widthFix"
+      show-menu-by-longpress="true"
+    />
+    <div class="tips">长按二维码识别</div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: {},
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/AddCarCrad/styles/index.scss b/src/components/AddCarCrad/styles/index.scss
new file mode 100644
index 0000000..89f33fe
--- /dev/null
+++ b/src/components/AddCarCrad/styles/index.scss
@@ -0,0 +1,19 @@
+.add-car-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .code-img {
+    margin-top: 12px;
+    width: 250px;
+    height: 250px;
+    border-radius: 4px;
+  }
+
+  .tips {
+    padding: 12px;
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #666;
+  }
+}
diff --git a/src/components/AiTabSwitch/images/L_01.png b/src/components/AiTabSwitch/images/L_01.png
new file mode 100644
index 0000000..4fd32e9
Binary files /dev/null and b/src/components/AiTabSwitch/images/L_01.png differ
diff --git a/src/components/AiTabSwitch/images/L_02.png b/src/components/AiTabSwitch/images/L_02.png
new file mode 100644
index 0000000..3124cbe
Binary files /dev/null and b/src/components/AiTabSwitch/images/L_02.png differ
diff --git a/src/components/AiTabSwitch/images/R_01.png b/src/components/AiTabSwitch/images/R_01.png
new file mode 100644
index 0000000..87e3bb3
Binary files /dev/null and b/src/components/AiTabSwitch/images/R_01.png differ
diff --git a/src/components/AiTabSwitch/images/R_02.png b/src/components/AiTabSwitch/images/R_02.png
new file mode 100644
index 0000000..97a7f0a
Binary files /dev/null and b/src/components/AiTabSwitch/images/R_02.png differ
diff --git a/src/components/AiTabSwitch/index.vue b/src/components/AiTabSwitch/index.vue
new file mode 100644
index 0000000..89c97ed
--- /dev/null
+++ b/src/components/AiTabSwitch/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="ai-tab-wrapper">
+    <div class="tab-container">
+      <div
+        class="tab-item is-left"
+        :class="{ active: modelValue === 0 }"
+        @tap="handleSwitch(0)"
+      >
+        <div class="tab-content">
+          <img
+            v-if="leftSelected || leftUnselected"
+            :src="
+              modelValue === 0
+                ? leftSelected || leftUnselected
+                : leftUnselected || leftSelected
+            "
+            class="tab-image"
+            mode="scaleToFill"
+          />
+          <div class="tab-label">
+            <spanclass="tab-text">探索发现</text>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="tab-item is-right"
+        :class="{ active: modelValue === 1 }"
+        @tap="handleSwitch(1)"
+      >
+        <div class="tab-content">
+          <img
+            v-if="rightSelected || rightUnselected"
+            :src="
+              modelValue === 1
+                ? rightSelected || rightUnselected
+                : rightUnselected || rightSelected
+            "
+            class="tab-image"
+            mode="scaleToFill"
+          />
+          <div class="tab-label">
+            <spanclass="tab-text">AI伴游</text>
+            <div
+              v-if="showDot"
+              :class="[
+                'status-dot',
+                modelValue === 1
+                  ? 'status-dot--active'
+                  : 'status-dot--inactive',
+              ]"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import leftSelected from "./images/L_02.png";
+import leftUnselected from "./images/L_01.png";
+import rightSelected from "./images/R_02.png";
+import rightUnselected from "./images/R_01.png";
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  showDot: { type: Boolean, default: true },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleSwitch = (i) => {
+  emit("update:modelValue", i);
+  emit("change", i);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/AiTabSwitch/styles/index.scss b/src/components/AiTabSwitch/styles/index.scss
new file mode 100644
index 0000000..6b1b96d
--- /dev/null
+++ b/src/components/AiTabSwitch/styles/index.scss
@@ -0,0 +1,103 @@
+.ai-tab-wrapper {
+  width: 100%;
+}
+
+.tab-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  overflow: hidden;
+}
+
+.tab-item {
+  position: relative;
+  flex: 1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.tab-item.active {
+  z-index: 10;
+}
+
+.tab-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  transition: background 0.3s;
+  overflow: hidden;
+}
+
+.tab-text {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.tab-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: auto;
+  bottom: 0;
+  width: 100%;
+  height: 48px;
+  display: block;
+  vertical-align: bottom;
+  z-index: 5;
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 20;
+}
+
+.tab-item.active .tab-text {
+  color: #2e312f;
+  font-weight: bold;
+}
+
+.is-left {
+  margin-right: -24px;
+}
+
+.is-left .tab-label {
+  transform: translateX(-20px);
+}
+
+.is-right {
+  margin-left: -24px;
+}
+
+.is-right .tab-label {
+  transform: translateX(20px);
+}
+
+.status-dot {
+  display: inline-block;
+  margin-left: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  z-index: 22;
+  transform: translateY(-1px);
+}
+
+.status-dot--active {
+  background-color: #26d46c;
+}
+
+.status-dot--inactive {
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
diff --git a/src/components/Calender/README.md b/src/components/Calender/README.md
new file mode 100644
index 0000000..6da457f
--- /dev/null
+++ b/src/components/Calender/README.md
@@ -0,0 +1,586 @@
+# 日历组件 (Calendar Component)
+
+## 功能需求分析
+
+基于设计图片分析，该日历组件是一个酒店预订场景的低价日历弹窗，支持通过日期图标点击触发显示，需要实现以下细分功能：
+
+## 交互使用方式
+
+### 基础用法
+
+通过点击日期图标打开日历组件：
+
+```vue
+<template>
+  <div class="date-picker" @tap="openCalendar">
+    <div class="date-display">
+      <text class="date-label">选择日期</text>
+      <text class="date-value" v-if="selectedDate">{{ selectedDate }}</text>
+      <text class="date-placeholder" v-else>请点击日期图标选择</text>
+    </div>
+    <div class="date-icon">
+      <uni-icons type="calendar-filled" size="24" color="#1890ff"></uni-icons>
+    </div>
+  </div>
+
+  <!-- 日历组件 -->
+  <Calendar
+    :visible="calendarVisible"
+    :price-data="priceData"
+    mode="single"
+    @close="handleCalendarClose"
+    @select="handleDateSelect"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Calendar from "./index.vue";
+
+const calendarVisible = ref(false);
+const selectedDate = ref("");
+
+const openCalendar = () => {
+  calendarVisible.value = true;
+};
+
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+const handleDateSelect = (data) => {
+  selectedDate.value = data.date;
+  calendarVisible.value = false;
+};
+</script>
+```
+
+### 演示文件
+
+- `year-demo.vue` - 全年日历演示（推荐）
+- `demo.vue` - 完整的交互演示页面
+- `example.vue` - 详细的使用示例，包含单选和范围选择
+
+### 跨年日历
+
+组件支持显示从当前月份到明年同月份的13个月日历，用户可以连续选择入住和离店日期：
+
+1. 点击第一个日期设置入住日期
+2. 点击第二个日期设置离店日期
+3. 自动显示"入住"和"离店"标签
+4. 支持滚动浏览跨年日期范围
+
+### 1. 弹窗容器结构
+
+#### 1.1 弹窗基础框架
+
+- [ ] 实现遮罩层背景（半透明黑色）
+- [ ] 弹窗居中显示，支持垂直居中
+- [ ] 弹窗圆角设计（建议12px）
+- [ ] 弹窗阴影效果
+- [ ] 弹窗动画效果（淡入淡出）
+
+#### 1.2 弹窗头部区域
+
+- [ ] 标题文字："低价日历"
+- [ ] 副标题文字："以下价格为单晚参考价"
+- [ ] 右上角关闭按钮（X图标）
+- [ ] 关闭按钮点击交互
+- [ ] 头部区域背景色和分割线
+
+### 2. 日历主体结构
+
+#### 2.1 周标题行
+
+- [ ] 显示周几标题：一、二、三、四、五、六、日
+- [ ] 周标题居中对齐
+- [ ] 周标题字体样式（灰色、小字号）
+
+#### 2.2 月份导航
+
+- [ ] 月份标题显示："2024年5月"、"2024年6月"
+- [ ] 月份标题居中显示
+- [ ] 月份标题字体加粗
+- [ ] 支持上下滑动切换月份（可选）
+
+### 3. 日期网格系统
+
+#### 3.1 日期格子基础
+
+- [ ] 7列网格布局（对应周一到周日）
+- [ ] 每个格子固定宽高比
+- [ ] 格子间距设计
+- [ ] 格子圆角设计
+
+#### 3.2 日期内容显示
+
+- [ ] 日期数字显示（居中对齐）
+- [ ] 价格信息显示（¥449格式）
+- [ ] 日期数字字体大小和颜色
+- [ ] 价格字体大小和颜色（较小、灰色）
+
+#### 3.3 日期状态管理
+
+- [ ] 普通可选日期（白色背景）
+- [ ] 当前选中日期（蓝色背景，白色文字）
+- [ ] 入住日期标记（"入住"标签）
+- [ ] 离店日期标记（"离店"标签）
+- [ ] 选择范围内日期（浅蓝色背景）
+- [ ] 不可选日期（灰色背景，禁用状态）
+
+### 4. 交互功能实现
+
+#### 4.1 日期选择逻辑
+
+- [ ] 单击日期选择功能
+- [ ] 日期范围选择（入住-离店）
+- [ ] 选择状态视觉反馈
+- [ ] 选择完成后的回调事件
+
+#### 4.2 用户体验优化
+
+- [ ] 点击动画效果
+- [ ] 触摸反馈
+- [ ] 防止快速重复点击
+- [ ] 选择范围的视觉连接线（可选）
+
+### 5. 数据处理功能
+
+#### 5.1 价格数据管理
+
+- [ ] 价格数据结构设计
+- [ ] 价格数据绑定到日期
+- [ ] 价格格式化显示
+- [ ] 无价格数据的处理
+
+#### 5.2 日期计算功能
+
+- [ ] 月份天数计算
+- [ ] 月份第一天星期几计算
+- [ ] 跨月份日期处理
+- [ ] 日期有效性验证
+
+### 6. 响应式适配
+
+#### 6.1 移动端适配
+
+- [ ] 触摸屏操作优化
+- [ ] 不同屏幕尺寸适配
+- [ ] 横竖屏切换适配
+- [ ] 安全区域适配（刘海屏等）
+
+#### 6.2 字体和尺寸适配
+
+- [ ] 字体大小响应式调整
+- [ ] 格子尺寸响应式调整
+- [ ] 间距响应式调整
+
+## 技术实现细节
+
+### 组件接口设计
+
+#### Props 属性
+
+```javascript
+props: {
+  // 弹窗显示控制
+  visible: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+
+  // 价格数据对象
+  priceData: {
+    type: Object,
+    default: () => ({}),
+    // 格式: { '2024-05-17': 449, '2024-05-18': 399 }
+  },
+
+  // 默认选中日期
+  defaultValue: {
+    type: [String, Array],
+    default: '',
+    // 单选: '2024-05-17'
+    // 范围选择: ['2024-05-17', '2024-05-19']
+  },
+
+  // 选择模式
+  mode: {
+    type: String,
+    default: 'single',
+    validator: (value) => ['single', 'range'].includes(value)
+  },
+
+  // 最小可选日期
+  minDate: {
+    type: String,
+    default: () => new Date().toISOString().split('T')[0]
+  },
+
+  // 最大可选日期
+  maxDate: {
+    type: String,
+    default: ''
+  },
+
+  // 禁用日期数组
+  disabledDates: {
+    type: Array,
+    default: () => []
+  },
+
+  // 自定义标签
+  customLabels: {
+    type: Object,
+    default: () => ({})
+    // 格式: { '2024-05-17': '入住', '2024-05-19': '离店' }
+  }
+}
+```
+
+#### Events 事件
+
+```javascript
+// 日期选择事件
+this.$emit("select", {
+  date: "2024-05-17",
+  price: 449,
+  mode: "single",
+});
+
+// 范围选择事件
+this.$emit("range-select", {
+  startDate: "2024-05-17",
+  endDate: "2024-05-19",
+  startPrice: 449,
+  endPrice: 399,
+  totalDays: 2,
+});
+
+// 弹窗关闭事件
+this.$emit("close");
+
+// 月份切换事件
+this.$emit("month-change", {
+  year: 2024,
+  month: 5,
+  direction: "next", // 'prev' | 'next'
+});
+
+// 日期点击事件（包含所有点击）
+this.$emit("date-click", {
+  date: "2024-05-17",
+  price: 449,
+  disabled: false,
+  selected: true,
+});
+```
+
+### 核心算法实现
+
+#### 日期计算工具函数
+
+```javascript
+// 获取月份天数
+getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate()
+}
+
+// 获取月份第一天是星期几
+getFirstDayOfMonth(year, month) {
+  return new Date(year, month - 1, 1).getDay()
+}
+
+// 生成日期网格数据
+generateCalendarGrid(year, month) {
+  const daysInMonth = this.getDaysInMonth(year, month)
+  const firstDay = this.getFirstDayOfMonth(year, month)
+  const grid = []
+
+  // 填充空白格子
+  for (let i = 0; i < firstDay; i++) {
+    grid.push(null)
+  }
+
+  // 填充日期
+  for (let day = 1; day <= daysInMonth; day++) {
+    const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+    grid.push({
+      date: dateStr,
+      day: day,
+      price: this.priceData[dateStr] || null,
+      disabled: this.isDateDisabled(dateStr),
+      selected: this.isDateSelected(dateStr),
+      inRange: this.isDateInRange(dateStr),
+      label: this.customLabels[dateStr] || ''
+    })
+  }
+
+  return grid
+}
+```
+
+#### 选择状态管理
+
+```javascript
+data() {
+  return {
+    selectedDates: [],
+    currentMonth: new Date().getMonth() + 1,
+    currentYear: new Date().getFullYear(),
+    isRangeSelecting: false,
+    rangeStart: null,
+    rangeEnd: null
+  }
+},
+
+methods: {
+  handleDateClick(dateInfo) {
+    if (dateInfo.disabled) return
+
+    if (this.mode === 'single') {
+      this.selectedDates = [dateInfo.date]
+      this.$emit('select', dateInfo)
+    } else if (this.mode === 'range') {
+      this.handleRangeSelection(dateInfo)
+    }
+  },
+
+  handleRangeSelection(dateInfo) {
+    if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+      // 开始新的范围选择
+      this.rangeStart = dateInfo.date
+      this.rangeEnd = null
+      this.isRangeSelecting = true
+    } else {
+      // 完成范围选择
+      this.rangeEnd = dateInfo.date
+      this.isRangeSelecting = false
+
+      // 确保开始日期小于结束日期
+      if (new Date(this.rangeStart) > new Date(this.rangeEnd)) {
+        [this.rangeStart, this.rangeEnd] = [this.rangeEnd, this.rangeStart]
+      }
+
+      this.$emit('range-select', {
+        startDate: this.rangeStart,
+        endDate: this.rangeEnd,
+        startPrice: this.priceData[this.rangeStart],
+        endPrice: this.priceData[this.rangeEnd],
+        totalDays: this.calculateDaysBetween(this.rangeStart, this.rangeEnd)
+      })
+    }
+  }
+}
+```
+
+### 样式设计规范
+
+#### 颜色系统
+
+```scss
+// 主色调
+$primary-color: #1890ff;
+$primary-light: #e6f7ff;
+$primary-dark: #0050b3;
+
+// 中性色
+$text-primary: #262626;
+$text-secondary: #8c8c8c;
+$text-disabled: #bfbfbf;
+$background-white: #ffffff;
+$background-gray: #f5f5f5;
+$border-color: #d9d9d9;
+
+// 状态色
+$success-color: #52c41a;
+$warning-color: #faad14;
+$error-color: #ff4d4f;
+```
+
+#### 尺寸规范
+
+```scss
+// 弹窗尺寸
+$modal-width: 350px;
+$modal-max-height: 80vh;
+$modal-border-radius: 12px;
+$modal-padding: 20px;
+
+// 日期格子尺寸
+$date-cell-size: 44px;
+$date-cell-gap: 2px;
+$date-cell-border-radius: 6px;
+
+// 字体大小
+$font-size-title: 18px;
+$font-size-subtitle: 14px;
+$font-size-date: 16px;
+$font-size-price: 12px;
+$font-size-label: 10px;
+```
+
+## 开发实施计划
+
+### 第一阶段：基础框架（1-2天）
+
+- [ ] 创建组件基础结构
+- [ ] 实现弹窗容器和遮罩
+- [ ] 添加头部区域和关闭功能
+- [ ] 建立基础样式系统
+
+### 第二阶段：日历核心（2-3天）
+
+- [ ] 实现日期计算算法
+- [ ] 构建日期网格布局
+- [ ] 添加周标题和月份显示
+- [ ] 实现基础日期显示
+
+### 第三阶段：交互功能（2-3天）
+
+- [ ] 实现日期选择逻辑
+- [ ] 添加范围选择功能
+- [ ] 实现状态管理和视觉反馈
+- [ ] 添加价格数据绑定
+
+### 第四阶段：优化完善（1-2天）
+
+- [ ] 添加动画效果
+- [ ] 优化移动端体验
+- [ ] 完善边界情况处理
+- [ ] 性能优化和测试
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <div>
+    <button @click="showCalendar = true">选择日期</button>
+
+    <Calendar
+      :visible="showCalendar"
+      :price-data="priceData"
+      mode="range"
+      @range-select="handleRangeSelect"
+      @close="showCalendar = false"
+    />
+  </div>
+</template>
+
+<script>
+import Calendar from "@/components/Calendar";
+
+export default {
+  components: {
+    Calendar,
+  },
+
+  data() {
+    return {
+      showCalendar: false,
+      priceData: {
+        "2024-05-17": 449,
+        "2024-05-18": 399,
+        "2024-05-19": 459,
+        "2024-05-20": 429,
+      },
+    };
+  },
+
+  methods: {
+    handleRangeSelect(range) {
+      console.log("选择范围:", range);
+      this.showCalendar = false;
+
+      // 处理选择结果
+      this.processBooking(range);
+    },
+
+    processBooking(range) {
+      // 处理预订逻辑
+      const { startDate, endDate, totalDays } = range;
+      // ...
+    },
+  },
+};
+</script>
+```
+
+### 高级用法
+
+```vue
+<template>
+  <Calendar
+    :visible="visible"
+    :price-data="priceData"
+    :custom-labels="customLabels"
+    :disabled-dates="disabledDates"
+    :min-date="minDate"
+    :max-date="maxDate"
+    mode="range"
+    @range-select="handleSelect"
+    @month-change="handleMonthChange"
+    @close="handleClose"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      priceData: {
+        // 动态价格数据
+      },
+      customLabels: {
+        "2024-05-17": "入住",
+        "2024-05-19": "离店",
+      },
+      disabledDates: [
+        "2024-05-16", // 已满房
+        "2024-05-25", // 维护日
+      ],
+      minDate: "2024-05-01",
+      maxDate: "2024-12-31",
+    };
+  },
+
+  methods: {
+    handleMonthChange(monthInfo) {
+      // 动态加载月份数据
+      this.loadMonthData(monthInfo.year, monthInfo.month);
+    },
+
+    async loadMonthData(year, month) {
+      // 从API获取价格数据
+      const data = await this.fetchPriceData(year, month);
+      this.priceData = { ...this.priceData, ...data };
+    },
+  },
+};
+</script>
+```
+
+## 测试用例
+
+### 单元测试
+
+- [ ] 日期计算函数测试
+- [ ] 选择逻辑测试
+- [ ] 价格数据绑定测试
+- [ ] 边界条件测试
+
+### 集成测试
+
+- [ ] 用户交互流程测试
+- [ ] 不同设备适配测试
+- [ ] 性能压力测试
+
+### 可访问性测试
+
+- [ ] 键盘导航测试
+- [ ] 屏幕阅读器兼容性
+- [ ] 色彩对比度检查
diff --git a/src/components/Calender/demo.vue b/src/components/Calender/demo.vue
new file mode 100644
index 0000000..e6b0a4c
--- /dev/null
+++ b/src/components/Calender/demo.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="demo-page">
+    <!-- 页面标题 -->
+    <div class="demo-header">
+      <spanclass="demo-title">日历组件交互演示</text>
+      <spanclass="demo-subtitle">点击日期图标打开日历</text>
+    </div>
+
+    <!-- 日期选择器 -->
+    <div class="date-picker-container">
+      <div class="date-picker" @tap="openCalendar">
+        <div class="date-display">
+          <spanclass="date-label">选择日期</text>
+          <spanclass="date-value" v-if="selectedDate">{{
+            formatDate(selectedDate)
+          }}</text>
+          <spanclass="date-placeholder" v-else>请点击日期图标选择</text>
+        </div>
+        <div class="date-icon">
+          <uni-icons
+            type="calendar-filled"
+            size="24"
+            color="#1890ff"
+          ></uni-icons>
+        </div>
+      </div>
+    </div>
+
+    <!-- 选择结果展示 -->
+    <div class="result-display" v-if="selectedDate">
+      <div class="result-card">
+        <spanclass="result-title">已选择日期</text>
+        <spanclass="result-date">{{ formatDate(selectedDate) }}</text>
+        <spanclass="result-price" v-if="selectedPrice"
+          >价格：¥{{ selectedPrice }}</text
+        >
+      </div>
+    </div>
+
+    <!-- 日历组件 -->
+    <Calendar
+      :visible="calendarVisible"
+      :price-data="priceData"
+      mode="single"
+      :default-value="selectedDate"
+      @close="handleCalendarClose"
+      @select="handleDateSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import Calendar from "./index.vue";
+
+// 响应式数据
+const calendarVisible = ref(false);
+const selectedDate = ref("");
+const selectedPrice = ref(null);
+
+// 模拟价格数据
+const priceData = ref({
+  "2024-01-15": 299,
+  "2024-01-16": 399,
+  "2024-01-17": 199,
+  "2024-01-18": 299,
+  "2024-01-19": 399,
+  "2024-01-20": 499,
+  "2024-01-21": 599,
+  "2024-01-22": 299,
+  "2024-01-23": 199,
+  "2024-01-24": 299,
+  "2024-01-25": 399,
+  "2024-01-26": 299,
+  "2024-01-27": 199,
+  "2024-01-28": 299,
+  "2024-02-01": 399,
+  "2024-02-02": 299,
+  "2024-02-03": 199,
+  "2024-02-04": 299,
+  "2024-02-05": 399,
+  "2024-02-06": 499,
+  "2024-02-07": 599,
+  "2024-02-08": 299,
+  "2024-02-09": 199,
+  "2024-02-10": 299,
+});
+
+// 方法定义
+// 打开日历
+const openCalendar = () => {
+  calendarVisible.value = true;
+};
+
+// 处理日历关闭
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (data) => {
+  selectedDate.value = data.date;
+  selectedPrice.value = data.price;
+  calendarVisible.value = false;
+
+  // 输出选择结果到控制台
+  console.log("选择的日期:", data.date);
+  console.log("日期价格:", data.price);
+};
+
+// 格式化日期显示
+const formatDate = (dateStr) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
+  const weekDay = weekDays[date.getDay()];
+
+  return `${year}年${month}月${day}日 周${weekDay}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-page {
+  padding: 20px;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.demo-title {
+  display: block;
+  font-size: 28px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 8px;
+}
+
+.demo-subtitle {
+  display: block;
+  font-size: 16px;
+  color: #8c8c8c;
+}
+
+.date-picker-container {
+  margin-bottom: 30px;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #e8e8e8;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+
+  &:active {
+    border-color: #1890ff;
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+    transform: translateY(-1px);
+  }
+}
+
+.date-display {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.date-label {
+  font-size: 14px;
+  color: #8c8c8c;
+  font-weight: 500;
+}
+
+.date-value {
+  font-size: 18px;
+  color: #262626;
+  font-weight: 600;
+}
+
+.date-placeholder {
+  font-size: 16px;
+  color: #bfbfbf;
+  font-style: italic;
+}
+
+.date-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background-color: #f0f8ff;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.date-picker:active .date-icon {
+  background-color: #e6f7ff;
+  transform: scale(1.1);
+}
+
+.result-display {
+  margin-bottom: 20px;
+}
+
+.result-card {
+  padding: 20px;
+  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-title {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+}
+
+.result-date {
+  font-size: 20px;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.result-price {
+  font-size: 16px;
+  color: #fff2e8;
+  font-weight: 500;
+  background-color: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 16px;
+}
+</style>
diff --git a/src/components/Calender/example.vue b/src/components/Calender/example.vue
new file mode 100644
index 0000000..fb9f64e
--- /dev/null
+++ b/src/components/Calender/example.vue
@@ -0,0 +1,337 @@
+<template>
+  <div class="calendar-example">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <spanclass="page-title">日历组件使用示例</text>
+    </div>
+
+    <!-- 触发器区域 -->
+    <div class="trigger-section">
+      <div class="date-input" @tap="openCalendar">
+        <div class="input-content">
+          <spanclass="input-label">选择日期</text>
+          <spanclass="input-value" v-if="selectedDate">{{
+            selectedDate
+          }}</text>
+          <spanclass="input-placeholder" v-else>请选择日期</text>
+        </div>
+        <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
+      </div>
+
+      <!-- 范围选择示例 -->
+      <div class="date-input" @tap="openRangeCalendar">
+        <div class="input-content">
+          <spanclass="input-label">选择日期范围</text>
+          <text
+            class="input-value"
+            v-if="selectedRange.start && selectedRange.end"
+          >
+            {{ selectedRange.start }} 至 {{ selectedRange.end }}
+          </text>
+          <spanclass="input-placeholder" v-else>请选择日期范围</text>
+        </div>
+        <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
+      </div>
+
+      <!-- 价格区间选择示例 -->
+      <div class="date-input" @tap="openPriceRangeCalendar">
+        <div class="input-content">
+          <spanclass="input-label">选择有价格的日期范围</text>
+          <text
+            class="input-value"
+            v-if="selectedRange.start && selectedRange.end"
+          >
+            {{ selectedRange.start }} 至 {{ selectedRange.end }}
+          </text>
+          <spanclass="input-placeholder" v-else
+            >请选择价格区间（仅含有价夜晚）</text
+          >
+        </div>
+        <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
+      </div>
+    </div>
+
+    <!-- 结果显示区域 -->
+    <div
+      class="result-section"
+      v-if="selectedDate || (selectedRange.start && selectedRange.end)"
+    >
+      <spanclass="result-title">选择结果：</text>
+      <div class="result-item" v-if="selectedDate">
+        <spanclass="result-label">单选日期：</text>
+        <spanclass="result-value">{{ selectedDate }}</text>
+        <spanclass="result-value" v-if="selectedDatePrice">
+          ¥{{ selectedDatePrice }}
+        </text>
+      </div>
+      <div class="result-item" v-if="selectedRange.start && selectedRange.end">
+        <spanclass="result-label">日期范围：</text>
+        <spanclass="result-value"
+          >{{ selectedRange.start }} 至 {{ selectedRange.end }}</text
+        >
+        <spanclass="result-days">（共{{ rangeDays }}天）</text>
+        <spanclass="result-value" v-if="selectedRangeTotal">
+          总价：¥{{ selectedRangeTotal }}
+        </text>
+      </div>
+    </div>
+
+    <!-- 日历组件 - 单选模式 -->
+    <Calendar
+      :visible="calendarVisible"
+      :price-data="priceData"
+      mode="single"
+      :default-value="selectedDate"
+      @close="handleCalendarClose"
+      @select="handleDateSelect"
+    />
+
+    <!-- 日历组件 - 范围选择模式 -->
+    <Calendar
+      :visible="rangeCalendarVisible"
+      :price-data="priceData"
+      mode="range"
+      :default-value="[selectedRange.start, selectedRange.end]"
+      @close="handleRangeCalendarClose"
+      @range-select="handleRangeSelect"
+    />
+
+    <!-- 日历组件 - 价格区间选择模式（必须有价格的夜晚） -->
+    <Calendar
+      :visible="priceRangeCalendarVisible"
+      :price-data="priceData"
+      mode="range"
+      :range-require-price="true"
+      :default-value="[selectedRange.start, selectedRange.end]"
+      @close="handleRangeCalendarClose"
+      @range-select="handlePriceRangeSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import Calendar from "./index.vue";
+
+// 响应式数据
+const calendarVisible = ref(false);
+const rangeCalendarVisible = ref(false);
+const priceRangeCalendarVisible = ref(false);
+const selectedDate = ref("");
+const selectedDatePrice = ref(null);
+const selectedRange = ref({
+  start: "",
+  end: "",
+});
+const selectedRangeTotal = ref(null);
+
+// 模拟价格数据
+const priceData = ref({
+  "2024-01-15": 299,
+  "2024-01-16": 399,
+  "2024-01-17": 199,
+  "2024-01-18": 299,
+  "2024-01-19": 399,
+  "2024-01-20": 499,
+  "2024-01-21": 599,
+  "2024-01-22": 299,
+  "2024-01-23": 199,
+  "2024-01-24": 299,
+  "2024-01-25": 399,
+  "2024-01-26": 299,
+  "2024-01-27": 199,
+  "2024-01-28": 299,
+});
+
+// 计算属性
+const rangeDays = computed(() => {
+  if (!selectedRange.value.start || !selectedRange.value.end) return 0;
+  const start = new Date(selectedRange.value.start);
+  const end = new Date(selectedRange.value.end);
+  const diffTime = Math.abs(end - start);
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+});
+
+// 方法定义
+// 打开单选日历
+const openCalendar = () => {
+  calendarVisible.value = true;
+};
+
+// 打开范围选择日历
+const openRangeCalendar = () => {
+  rangeCalendarVisible.value = true;
+};
+
+// 打开价格区间选择器（必须以价格为准）
+const openPriceRangeCalendar = () => {
+  priceRangeCalendarVisible.value = true;
+};
+
+// 处理单选日历关闭
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理范围选择日历关闭
+const handleRangeCalendarClose = () => {
+  rangeCalendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (data) => {
+  selectedDate.value = data.date;
+  selectedDatePrice.value =
+    data.price !== undefined && data.price !== null && data.price !== "-"
+      ? data.price
+      : null;
+  calendarVisible.value = false;
+  console.log("选择的日期:", data);
+};
+
+// 处理范围选择
+const handleRangeSelect = (data) => {
+  selectedRange.value = {
+    start: data.startDate,
+    end: data.endDate,
+  };
+  if (data.dateRange && Array.isArray(data.dateRange)) {
+    const total = data.dateRange.reduce((sum, d) => {
+      const p = d.price;
+      return sum + (typeof p === "number" ? p : 0);
+    }, 0);
+    selectedRangeTotal.value = total || null;
+  } else {
+    selectedRangeTotal.value = null;
+  }
+  rangeCalendarVisible.value = false;
+  console.log("选择的日期范围:", data);
+};
+
+// 处理价格区间选择
+const handlePriceRangeSelect = (data) => {
+  selectedRange.value = {
+    start: data.startDate,
+    end: data.endDate,
+  };
+  if (data.dateRange && Array.isArray(data.dateRange)) {
+    const total = data.dateRange.reduce((sum, d) => {
+      const p = d.price;
+      return sum + (typeof p === "number" ? p : 0);
+    }, 0);
+    selectedRangeTotal.value = total || null;
+  } else {
+    selectedRangeTotal.value = null;
+  }
+  priceRangeCalendarVisible.value = false;
+  console.log("价格区间选择:", data);
+};
+</script>
+
+<style lang="scss" scoped>
+.calendar-example {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.page-header {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.trigger-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 30px;
+}
+
+.date-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  transition: border-color 0.2s;
+
+  &:active {
+    border-color: #1890ff;
+  }
+}
+
+.input-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #8c8c8c;
+  font-weight: 500;
+}
+
+.input-value {
+  font-size: 16px;
+  color: #262626;
+  font-weight: 500;
+}
+
+.input-placeholder {
+  font-size: 16px;
+  color: #bfbfbf;
+}
+
+.result-section {
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.result-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 12px;
+}
+
+.result-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.result-label {
+  font-size: 14px;
+  color: #8c8c8c;
+  margin-right: 8px;
+  min-width: 80px;
+}
+
+.result-value {
+  font-size: 14px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.result-days {
+  font-size: 12px;
+  color: #52c41a;
+  margin-left: 8px;
+}
+</style>
diff --git a/src/components/Calender/images/日期-价格弹窗.png b/src/components/Calender/images/日期-价格弹窗.png
new file mode 100644
index 0000000..543d484
Binary files /dev/null and b/src/components/Calender/images/日期-价格弹窗.png differ
diff --git a/src/components/Calender/index.vue b/src/components/Calender/index.vue
new file mode 100644
index 0000000..a56f2b9
--- /dev/null
+++ b/src/components/Calender/index.vue
@@ -0,0 +1,613 @@
+<template>
+  <uni-popup
+    ref="popup"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleMaskClick"
+  >
+    <!-- 弹窗主体 -->
+    <div class="calendar-popup" @tap.stop>
+      <!-- 头部区域 -->
+      <div class="calendar-header">
+        <div class="header-content">
+          <spanclass="header-title">日历选择</text>
+          <spanv-if="props.rangeRequirePrice" class="header-subtitle"
+            >选择住宿日期，以下价格为单晚参考价</text
+          >
+        </div>
+        <div class="header-close" @tap="handleClose">
+          <uni-icons type="closeempty" size="20" color="#8c8c8c"></uni-icons>
+        </div>
+      </div>
+
+      <!-- 周标题行 - 固定显示 -->
+      <div class="week-header">
+        <spanclass="week-day" v-for="day in weekDays" :key="day">
+          {{ day }}
+        </text>
+      </div>
+
+      <!-- 日历主体区域 -->
+      <div class="calendar-body">
+        <!-- 全年月份显示区域 -->
+        <div class="year-container">
+          <div
+            class="month-section"
+            v-for="monthData in yearMonthsGrid"
+            :key="monthData.key"
+          >
+            <spanclass="month-title">{{ monthData.title }}</text>
+            <div class="date-grid">
+              <div
+                class="date-cell"
+                v-for="(dateInfo, index) in monthData.grid"
+                :key="index"
+                :class="getDateCellClass(dateInfo)"
+                @tap="handleDateClick(dateInfo)"
+              >
+                <template v-if="dateInfo">
+                  <spanclass="date-label" v-if="dateInfo.label">
+                    {{ dateInfo.label }}
+                  </text>
+                  <spanclass="date-number">{{ dateInfo.day }}</text>
+                  <text
+                    class="date-price"
+                    v-if="
+                      dateInfo.price !== null && dateInfo.price !== undefined
+                    "
+                    >¥{{ dateInfo.price }}</text
+                  >
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+
+// 定义组件名称
+defineOptions({
+  name: "Calendar",
+});
+
+// uni-popup组件引用
+const popup = ref(null);
+
+// 定义Props
+const props = defineProps({
+  // 弹窗显示控制
+  visible: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+
+  // 价格数据数组
+  // 格式: [{ date: '2024-05-17', price: 449, stock: 3 }, ...]
+  priceData: {
+    type: [Object, Array],
+    default: () => ({}),
+  },
+
+  // 默认选中日期
+  defaultValue: {
+    type: [String, Array],
+    default: "",
+  },
+
+  // 选择模式
+  mode: {
+    type: String,
+    default: "single",
+    validator: (value) => ["single", "range"].includes(value),
+  },
+
+  // 范围选择时是否必须有价格（作为价格区间选择器）
+  rangeRequirePrice: {
+    type: Boolean,
+    default: false,
+  },
+
+  // 最小可选日期
+  minDate: {
+    type: String,
+    default: () => new Date().toISOString().split("T")[0],
+  },
+
+  // 最大可选日期
+  maxDate: {
+    type: String,
+    default: "",
+  },
+
+  // 禁用日期数组
+  disabledDates: {
+    type: Array,
+    default: () => [],
+  },
+
+  // 自定义标签
+  customLabels: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 定义Emits
+const emit = defineEmits([
+  "close",
+  "select",
+  "range-select",
+  "date-click",
+  "month-change",
+]);
+
+// 响应式数据
+const weekDays = ref(["一", "二", "三", "四", "五", "六", "日"]);
+const selectedDates = ref([]);
+const currentYear = ref(new Date().getFullYear());
+const isRangeSelecting = ref(false);
+const rangeStart = ref(null);
+const rangeEnd = ref(null);
+const clickTimer = ref(null);
+
+// 计算属性
+// 生成从当前月份到明年同月份的日历数据
+const yearMonthsGrid = computed(() => {
+  const months = [];
+  const now = new Date();
+  const currentYear = now.getFullYear();
+  const startMonth = now.getMonth() + 1; // 从当前月份开始（getMonth()返回0-11，需要+1）
+  const totalMonths = 13; // 显示13个月（当前月份到明年同月份）
+
+  for (let i = 0; i < totalMonths; i++) {
+    const month = ((startMonth - 1 + i) % 12) + 1;
+    const year = currentYear + Math.floor((startMonth - 1 + i) / 12);
+
+    months.push({
+      key: `${year}-${month}`,
+      title: `${year}年${month}月`,
+      year: year,
+      month: month,
+      grid: generateCalendarGrid(year, month),
+    });
+  }
+
+  return months;
+});
+
+// 方法定义
+// 处理遮罩点击
+const handleMaskClick = () => {
+  handleClose();
+};
+
+// 处理关闭
+const handleClose = () => {
+  if (popup.value) {
+    popup.value.close();
+  }
+  emit("close");
+};
+
+// 获取月份天数
+const getDaysInMonth = (year, month) => {
+  return new Date(year, month, 0).getDate();
+};
+
+// 获取月份第一天是星期几 (0=周日, 1=周一...)
+const getFirstDayOfMonth = (year, month) => {
+  const day = new Date(year, month - 1, 1).getDay();
+  return day === 0 ? 6 : day - 1; // 转换为周一开始 (0=周一, 6=周日)
+};
+
+// 获取指定日期的价格项（兼容对象或者数组）
+const getPriceItem = (dateStr) => {
+  if (!props.priceData) return null;
+
+  // 对象映射格式：{ '2024-05-17': 449 }
+  if (!Array.isArray(props.priceData) && typeof props.priceData === "object") {
+    if (Object.prototype.hasOwnProperty.call(props.priceData, dateStr)) {
+      const val = props.priceData[dateStr];
+      // 可能只是数字价格，也可能是对象
+      if (val !== null && typeof val === "object") {
+        return { date: dateStr, price: val.price, stock: val.stock };
+      }
+      return { date: dateStr, price: val };
+    }
+    return null;
+  }
+
+  // 数组格式：[{date, price, stock}, ...]
+  if (Array.isArray(props.priceData)) {
+    const item = props.priceData.find((it) => it.date === dateStr);
+    return item || null;
+  }
+
+  return null;
+};
+
+// 获取价格值便捷函数
+const getPriceForDate = (dateStr) => {
+  const item = getPriceItem(dateStr);
+  return item ? item.price : null;
+};
+
+// 生成日历网格数据
+const generateCalendarGrid = (year, month) => {
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfMonth(year, month);
+  const grid = [];
+
+  // 填充空白格子
+  for (let i = 0; i < firstDay; i++) {
+    grid.push(null);
+  }
+
+  // 填充日期
+  for (let day = 1; day <= daysInMonth; day++) {
+    const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(
+      day,
+    ).padStart(2, "0")}`;
+    const priceItem = getPriceItem(dateStr);
+    grid.push({
+      date: dateStr,
+      day: day,
+      price: priceItem ? priceItem.price : null,
+      stock: priceItem ? priceItem.stock : undefined,
+      disabled: isDateDisabled(dateStr),
+      selected: isDateSelected(dateStr),
+      inRange: isDateInRange(dateStr),
+      label: getDateLabel(dateStr),
+    });
+  }
+
+  return grid;
+};
+
+// 判断日期是否禁用
+const isDateDisabled = (dateStr) => {
+  const date = new Date(dateStr);
+  const minDate = new Date(props.minDate);
+  const maxDate = props.maxDate ? new Date(props.maxDate) : null;
+
+  // 过去或超出范围
+  if (date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  if (props.disabledDates.includes(dateStr)) return true;
+
+  // 注意：不在此处基于价格全局禁用日期，
+  // 允许未定价的日期被点击作为离店日（结束日），
+  // 价格校验在范围完成时对夜晚（不含离店日）进行。
+  return false;
+};
+
+// 判断日期是否选中
+const isDateSelected = (dateStr) => {
+  if (props.mode === "single") {
+    return selectedDates.value.includes(dateStr);
+  } else {
+    return dateStr === rangeStart.value || dateStr === rangeEnd.value;
+  }
+};
+
+// 判断日期是否在选择范围内
+const isDateInRange = (dateStr) => {
+  if (props.mode !== "range" || !rangeStart.value || !rangeEnd.value) {
+    return false;
+  }
+
+  const date = new Date(dateStr);
+  const start = new Date(rangeStart.value);
+  const end = new Date(rangeEnd.value);
+
+  return date > start && date < end;
+};
+
+// 获取日期标签
+const getDateLabel = (dateStr) => {
+  // 优先使用自定义标签
+  if (props.customLabels[dateStr]) {
+    return props.customLabels[dateStr];
+  }
+
+  // 为范围选择模式自动生成住/离标签
+  if (props.mode === "range") {
+    if (dateStr === rangeStart.value && dateStr === rangeEnd.value) {
+      // 当入住和离店是同一天时，显示"住/离"
+      return "住/离";
+    }
+    if (dateStr === rangeStart.value) {
+      return "入住";
+    }
+    if (dateStr === rangeEnd.value) {
+      return "离店";
+    }
+  }
+
+  return "";
+};
+
+// 获取日期格子样式类
+const getDateCellClass = (dateInfo) => {
+  if (!dateInfo) return "date-cell-empty";
+
+  const classes = ["date-cell-content"];
+
+  if (dateInfo.disabled) classes.push("date-cell-disabled");
+  if (dateInfo.selected) classes.push("date-cell-selected");
+  if (dateInfo.inRange) classes.push("date-cell-in-range");
+  // 标注无价格但可选的日期（用于视觉区分）
+  if (
+    dateInfo.price === null ||
+    dateInfo.price === undefined ||
+    dateInfo.price === "-"
+  ) {
+    classes.push("date-cell-no-price");
+  }
+
+  return classes.join(" ");
+};
+
+// 处理日期点击
+const handleDateClick = (dateInfo) => {
+  if (!dateInfo) return;
+  if (dateInfo.disabled) {
+    uni.showToast({ title: "该日期不可选", icon: "none" });
+    // 仍然触发点击事件，供上层参考
+    emit("date-click", {
+      date: dateInfo.date,
+      price: dateInfo.price,
+      disabled: dateInfo.disabled,
+      selected: dateInfo.selected,
+    });
+    return;
+  }
+
+  // 防抖处理
+  if (clickTimer.value) {
+    clearTimeout(clickTimer.value);
+  }
+
+  clickTimer.value = setTimeout(() => {
+    if (props.mode === "single") {
+      handleSingleSelect(dateInfo);
+    } else if (props.mode === "range") {
+      handleRangeSelection(dateInfo);
+    }
+
+    // 触发点击事件
+    emit("date-click", {
+      date: dateInfo.date,
+      price: dateInfo.price,
+      disabled: dateInfo.disabled,
+      selected: dateInfo.selected,
+    });
+  }, 100);
+};
+
+// 处理单选
+const handleSingleSelect = (dateInfo) => {
+  selectedDates.value = [dateInfo.date];
+  emit("select", {
+    date: dateInfo.date,
+    price: dateInfo.price,
+    mode: "single",
+  });
+};
+
+// 处理范围选择
+const handleRangeSelection = (dateInfo) => {
+  // 如果当前没有开始日期或已经完成一次选择，则此次点击作为开始日期
+  if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
+    // 开始新的范围选择：当作为价格区间选择器时，开始日必须有价格且有库存
+    if (props.rangeRequirePrice) {
+      const hasPrice =
+        dateInfo.price !== null &&
+        dateInfo.price !== undefined &&
+        dateInfo.price !== "-";
+      if (!hasPrice) {
+        uni.showToast({ title: "所选日期不可预订，请重新选择", icon: "none" });
+        return;
+      }
+      if (dateInfo.stock !== undefined && Number(dateInfo.stock) <= 0) {
+        uni.showToast({
+          title: "所选日期库存不足，请选择其他日期",
+          icon: "none",
+        });
+        return;
+      }
+    }
+
+    rangeStart.value = dateInfo.date;
+    rangeEnd.value = null;
+    isRangeSelecting.value = true;
+    return;
+  }
+
+  // 否则为结束日期（完成选择）
+  if (rangeStart.value === dateInfo.date) {
+    uni.showToast({ title: "离店日期不能与入住日期相同", icon: "none" });
+    return;
+  }
+
+  rangeEnd.value = dateInfo.date;
+  isRangeSelecting.value = false;
+
+  // 确保开始日期不大于结束日期
+  if (new Date(rangeStart.value) > new Date(rangeEnd.value)) {
+    [rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
+  }
+
+  // 检查日期跨度是否超过28天
+  const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
+  if (daysBetween > 28) {
+    uni.showToast({
+      title: "预定时间不能超过28天",
+      icon: "none",
+      duration: 3000,
+    });
+    rangeStart.value = null;
+    rangeEnd.value = null;
+    isRangeSelecting.value = false;
+    return;
+  }
+
+  // 如果作为价格区间选择器，验证夜晚（不包含离店日）是否都有价格/库存
+  if (props.rangeRequirePrice) {
+    const nights = generateNightsRange(rangeStart.value, rangeEnd.value);
+    const missing = nights.find(
+      (d) => d.price === null || d.price === undefined || d.price === "-",
+    );
+    if (missing) {
+      uni.showToast({
+        title: "所选区间包含无价格日期，请重新选择",
+        icon: "none",
+      });
+      rangeStart.value = null;
+      rangeEnd.value = null;
+      return;
+    }
+
+    const badStock = nights.find((d) => {
+      const item = getPriceItem(d.date);
+      return item && item.stock !== undefined && Number(item.stock) <= 0;
+    });
+    if (badStock) {
+      uni.showToast({
+        title: "所选区间包含库存不足的日期，请重新选择",
+        icon: "none",
+      });
+      rangeStart.value = null;
+      rangeEnd.value = null;
+      return;
+    }
+  }
+
+  const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
+
+  emit("range-select", {
+    startDate: rangeStart.value,
+    startPrice: getPriceForDate(rangeStart.value),
+    endDate: rangeEnd.value,
+    endPrice: getPriceForDate(rangeEnd.value),
+    totalDays: daysBetween,
+    dateRange: dateRange,
+  });
+};
+
+// 生成日期范围内所有日期的数组
+const generateDateRange = (startDate, endDate) => {
+  const dateRange = [];
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  // 如果是同一天，只返回一个日期
+  if (startDate === endDate) {
+    return [
+      {
+        date: startDate,
+        price: getPriceForDate(startDate),
+      },
+    ];
+  }
+
+  // 生成范围内所有日期
+  const current = new Date(start);
+  while (current <= end) {
+    const dateStr = current.toISOString().split("T")[0];
+    dateRange.push({
+      date: dateStr,
+      price: getPriceForDate(dateStr),
+    });
+    current.setDate(current.getDate() + 1);
+  }
+
+  return dateRange;
+};
+
+// 生成以入住日期为开始、离店日期为结束（离店日不计入夜）的夜晚数组
+const generateNightsRange = (startDate, endDate) => {
+  const nights = [];
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  // 若相同日期，视为单晚（保留原有兼容行为）
+  if (startDate === endDate) {
+    return [
+      {
+        date: startDate,
+        price: getPriceForDate(startDate),
+      },
+    ];
+  }
+
+  const current = new Date(start);
+  while (current < end) {
+    const dateStr = current.toISOString().split("T")[0];
+    nights.push({ date: dateStr, price: getPriceForDate(dateStr) });
+    current.setDate(current.getDate() + 1);
+  }
+
+  return nights;
+};
+
+// 计算两个日期之间的天数
+const calculateDaysBetween = (startDate, endDate) => {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diffTime = Math.abs(end - start);
+  const days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  // 如果是同一天，返回1天而不是0天
+  return days === 0 ? 1 : days;
+};
+
+// 监听visible属性变化，控制uni-popup显示
+watch(
+  () => props.visible,
+  (newVisible) => {
+    if (newVisible) {
+      popup.value?.open();
+    } else {
+      popup.value?.close();
+    }
+  },
+  { immediate: true },
+);
+
+// 生命周期钩子
+onMounted(() => {
+  // 初始化选中状态
+  if (props.defaultValue) {
+    if (Array.isArray(props.defaultValue)) {
+      rangeStart.value = props.defaultValue[0];
+      rangeEnd.value = props.defaultValue[1];
+    } else {
+      selectedDates.value = [props.defaultValue];
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (clickTimer.value) {
+    clearTimeout(clickTimer.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+// 引入样式文件
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/Calender/styles/index.scss b/src/components/Calender/styles/index.scss
new file mode 100644
index 0000000..76b6695
--- /dev/null
+++ b/src/components/Calender/styles/index.scss
@@ -0,0 +1,283 @@
+// 颜色系统
+$primary-color: #1890ff;
+$primary-light: #e6f7ff;
+$primary-dark: #1890ff;
+
+// 中性色
+$text-primary: #262626;
+$text-secondary: #8c8c8c;
+$text-disabled: #bfbfbf;
+$background-white: #ffffff;
+$background-gray: #f5f5f5;
+$border-color: #d9d9d9;
+
+// 状态色
+$success-color: #52c41a;
+$warning-color: #faad14;
+$error-color: #ff4d4f;
+
+// 尺寸规范
+$modal-max-height: 80vh;
+$modal-border-radius: 12px;
+$modal-padding: 12px;
+
+// 日期格子尺寸
+$date-cell-size: 40px;
+$date-cell-gap: 4px;
+$date-cell-border-radius: 6px;
+
+// 字体大小
+$font-size-title: 18px;
+$font-size-subtitle: 14px;
+$font-size-date: 16px;
+$font-size-price: 12px;
+$font-size-label: 10px;
+
+// uni-popup会自动处理遮罩层和定位，这里移除相关样式
+
+// 弹窗主体
+.calendar-popup {
+  position: relative;
+  width: 100%;
+  background-color: $background-white;
+  border-radius: $modal-border-radius;
+  overflow: hidden;
+}
+
+// 头部区域
+.calendar-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: $modal-padding;
+  border-bottom: 1px solid $border-color;
+  background-color: $background-white;
+}
+
+.header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header-title {
+  font-size: $font-size-title;
+  font-weight: 600;
+  color: $text-primary;
+  line-height: 1.4;
+}
+
+.header-subtitle {
+  font-size: $font-size-subtitle;
+  color: $text-secondary;
+  line-height: 1.4;
+}
+
+.header-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: $uni-border-radius-circle;
+  transition: background-color 0.2s;
+
+  &:active {
+    background-color: $background-gray;
+  }
+}
+
+// 周标题行 - 固定显示
+.week-header {
+  display: flex;
+  padding: 16px $modal-padding 8px;
+  background-color: $background-white;
+  border-bottom: 1px solid #eeeeee;
+}
+
+// 日历主体区域
+.calendar-body {
+  padding: 8px $modal-padding $modal-padding;
+  max-height: calc(#{$modal-max-height} - 140px);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.week-day {
+  flex: 1;
+  text-align: center;
+  font-size: $font-size-subtitle;
+  color: $text-secondary;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+// 全年容器
+.year-container {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+// 月份区域
+.month-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.month-title {
+  font-size: $font-size-title;
+  font-weight: 600;
+  color: $text-primary;
+  text-align: center;
+  margin-bottom: 16px;
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+// 日期网格
+.date-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: $date-cell-gap;
+}
+
+// 日期格子基础样式
+.date-cell {
+  position: relative;
+  width: $date-cell-size;
+  height: $date-cell-size;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px;
+  border-radius: $date-cell-border-radius;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+// 空白格子
+.date-cell-empty {
+  background-color: transparent;
+  cursor: default;
+}
+
+// 有内容的格子
+.date-cell-content {
+  background-color: $background-white;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: $background-gray;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// 禁用状态
+.date-cell-disabled {
+  background-color: $background-gray !important;
+  color: $text-disabled !important;
+  cursor: not-allowed !important;
+
+  .date-number,
+  .date-price {
+    color: $text-disabled !important;
+  }
+
+  &:hover {
+    background-color: $background-gray !important;
+    transform: none !important;
+  }
+}
+
+// 选中状态
+.date-cell-selected {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+
+  .date-number,
+  .date-price,
+  .date-label {
+    color: $background-white !important;
+  }
+
+  &:hover {
+    background-color: $primary-dark !important;
+  }
+}
+
+// 范围内状态
+.date-cell-in-range {
+  background-color: $primary-light !important;
+  border-color: $primary-light !important;
+
+  .date-number {
+    color: $primary-color !important;
+  }
+
+  .date-price {
+    color: $primary-dark !important;
+  }
+}
+
+// 日期数字
+.date-number {
+  font-size: $font-size-date;
+  font-weight: 500;
+  color: $text-primary;
+  line-height: 1;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 价格文字
+.date-price {
+  font-size: $font-size-price;
+  color: $text-secondary;
+  line-height: 1;
+  font-weight: 400;
+  text-align: center;
+  min-height: 14px;
+}
+
+// 无价格占位样式
+.date-cell-no-price {
+  .date-number {
+    color: $text-primary;
+    opacity: 0.9;
+  }
+
+  .date-price {
+    color: $text-disabled;
+    font-style: italic;
+  }
+
+  .date-price--empty {
+    color: $text-disabled;
+    font-style: normal;
+  }
+}
+
+// 自定义标签
+.date-label {
+  font-size: $font-size-label;
+  color: $primary-color;
+  padding: 1px 4px;
+  border-radius: 2px;
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 500;
+  text-align: center;
+  min-height: 12px;
+}
diff --git a/src/components/Calender/year-demo.vue b/src/components/Calender/year-demo.vue
new file mode 100644
index 0000000..9309c98
--- /dev/null
+++ b/src/components/Calender/year-demo.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <spanclass="demo-title">跨年日历演示</text>
+      <spanclass="demo-subtitle"
+        >支持从当前月份到明年同月份的日期连续选择</text
+      >
+    </div>
+
+    <div class="demo-content">
+      <!-- 触发按钮 -->
+      <div class="trigger-section">
+        <div class="date-input" @tap="openCalendar">
+          <div class="date-icon">📅</div>
+          <div class="date-text">
+            <text
+              v-if="!selectedRange.start && !selectedRange.end"
+              class="placeholder"
+            >
+              选择入住和离店日期
+            </text>
+            <spanv-else class="selected-text">
+              {{ formatDateRange() }}
+            </text>
+          </div>
+        </div>
+      </div>
+
+      <!-- 选择结果显示 -->
+      <div
+        class="result-section"
+        v-if="selectedRange.start || selectedRange.end"
+      >
+        <div class="result-title">选择结果：</div>
+        <div class="result-item" v-if="selectedRange.start">
+          <spanclass="result-label">入住日期：</text>
+          <spanclass="result-value">{{
+            formatDate(selectedRange.start)
+          }}</text>
+        </div>
+        <div class="result-item" v-if="selectedRange.end">
+          <spanclass="result-label">离店日期：</text>
+          <spanclass="result-value">{{ formatDate(selectedRange.end) }}</text>
+        </div>
+        <div
+          class="result-item"
+          v-if="selectedRange.start && selectedRange.end"
+        >
+          <spanclass="result-label">住宿天数：</text>
+          <spanclass="result-value">{{ calculateDays() }}晚</text>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日历组件 -->
+    <Calender
+      :visible="calendarVisible"
+      mode="range"
+      :price-data="priceData"
+      :min-date="minDate"
+      @close="handleCalendarClose"
+      @select="handleDateSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import Calender from "./index.vue";
+
+// 响应式数据
+const calendarVisible = ref(false);
+const selectedRange = ref({
+  start: "",
+  end: "",
+});
+
+// 最小日期（今天）
+const minDate = new Date().toISOString().split("T")[0];
+
+// 动态生成价格数据（从当前月份到明年同月份）
+const generatePriceData = () => {
+  const priceData = {};
+  const now = new Date();
+  const currentYear = now.getFullYear();
+  const currentMonth = now.getMonth() + 1;
+
+  // 生成13个月的示例价格数据
+  for (let i = 0; i < 13; i++) {
+    const month = ((currentMonth - 1 + i) % 12) + 1;
+    const year = currentYear + Math.floor((currentMonth - 1 + i) / 12);
+
+    // 为每个月生成几个示例价格
+    const sampleDates = [1, 15, 25]; // 每月的1号、15号、25号
+    sampleDates.forEach((day) => {
+      if (day <= new Date(year, month, 0).getDate()) {
+        // 确保日期存在
+        const dateKey = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
+        // 生成随机价格（299-1599之间）
+        priceData[dateKey] = Math.floor(Math.random() * 1300) + 299;
+      }
+    });
+  }
+
+  return priceData;
+};
+
+const priceData = reactive(generatePriceData());
+
+// 打开日历
+const openCalendar = () => {
+  calendarVisible.value = true;
+};
+
+// 关闭日历
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (dates) => {
+  if (dates.length >= 2) {
+    selectedRange.value = {
+      start: dates[0],
+      end: dates[1],
+    };
+  } else if (dates.length === 1) {
+    selectedRange.value = {
+      start: dates[0],
+      end: "",
+    };
+  } else {
+    selectedRange.value = {
+      start: "",
+      end: "",
+    };
+  }
+};
+
+// 格式化日期
+const formatDate = (dateStr) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
+  const weekDay = weekDays[date.getDay()];
+  return `${month}月${day}日 周${weekDay}`;
+};
+
+// 格式化日期范围
+const formatDateRange = () => {
+  if (selectedRange.value.start && selectedRange.value.end) {
+    return `${formatDate(selectedRange.value.start)} - ${formatDate(selectedRange.value.end)}`;
+  } else if (selectedRange.value.start) {
+    return `${formatDate(selectedRange.value.start)} - 选择离店日期`;
+  }
+  return "";
+};
+
+// 计算住宿天数
+const calculateDays = () => {
+  if (!selectedRange.value.start || !selectedRange.value.end) return 0;
+  const start = new Date(selectedRange.value.start);
+  const end = new Date(selectedRange.value.end);
+  const diffTime = Math.abs(end - start);
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return diffDays;
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 30px;
+
+  .demo-title {
+    display: block;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8px;
+  }
+
+  .demo-subtitle {
+    display: block;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.demo-content {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.trigger-section {
+  margin-bottom: 20px;
+}
+
+.date-input {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.date-icon {
+  font-size: 24px;
+  margin-right: 12px;
+}
+
+.date-span{
+  flex: 1;
+
+  .placeholder {
+    color: #999;
+    font-size: 16px;
+  }
+
+  .selected-span{
+    color: #333;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.result-section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.result-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.result-label {
+  color: #666;
+  font-size: 14px;
+}
+
+.result-value {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>
diff --git a/src/components/CheckBox/index.vue b/src/components/CheckBox/index.vue
new file mode 100644
index 0000000..24fc63b
--- /dev/null
+++ b/src/components/CheckBox/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="checkbox-wrapper" @click.stop="onChange">
+    <uni-icons
+      class="checkbox-icon"
+      :type="isChecked"
+      :checked="isChecked"
+      size="24"
+      color="opacity"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineEmits } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 计算属性，确定当前是否选中
+const isChecked = computed(() => {
+  return props.modelValue ? "checkbox-filled" : "circle";
+});
+
+// 切换选中状态
+const onChange = () => {
+  emit("update:modelValue", !props.modelValue);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/CheckBox/propmt.md b/src/components/CheckBox/propmt.md
new file mode 100644
index 0000000..a865b92
--- /dev/null
+++ b/src/components/CheckBox/propmt.md
@@ -0,0 +1,12 @@
+## 复选框组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.checkbox-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/CheckBox/styles/index.scss b/src/components/CheckBox/styles/index.scss
new file mode 100644
index 0000000..3ed1446
--- /dev/null
+++ b/src/components/CheckBox/styles/index.scss
@@ -0,0 +1,10 @@
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .checkbox-icon {
+    margin-right: 6px;
+    color: $theme-color-500;
+  }
+}
diff --git a/src/components/CommandWrapper/images/2025-07-14_144207.png b/src/components/CommandWrapper/images/2025-07-14_144207.png
new file mode 100644
index 0000000..b271e83
Binary files /dev/null and b/src/components/CommandWrapper/images/2025-07-14_144207.png differ
diff --git a/src/components/CommandWrapper/index.vue b/src/components/CommandWrapper/index.vue
new file mode 100644
index 0000000..d2b078e
--- /dev/null
+++ b/src/components/CommandWrapper/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="command-wrapper">
+    <spanclass="command-text">{{ span}}</text>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: "商品详情",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/CommandWrapper/propmt.md b/src/components/CommandWrapper/propmt.md
new file mode 100644
index 0000000..ad076dc
--- /dev/null
+++ b/src/components/CommandWrapper/propmt.md
@@ -0,0 +1,12 @@
+## 消息体指令组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.command-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/CommandWrapper/styles/index.scss b/src/components/CommandWrapper/styles/index.scss
new file mode 100644
index 0000000..e9f3499
--- /dev/null
+++ b/src/components/CommandWrapper/styles/index.scss
@@ -0,0 +1,11 @@
+.command-wrapper {
+  background-color: $theme-color-500;
+  border-radius: 20px 4px 20px 20px;
+  padding: 8px 24px;
+  width: max-content;
+}
+
+.command-text {
+  color: #fff;
+  font-size: $uni-font-size-base;
+}
diff --git a/src/components/CreateServiceOrder/images/2025-07-11_104138.png b/src/components/CreateServiceOrder/images/2025-07-11_104138.png
new file mode 100644
index 0000000..f71278c
Binary files /dev/null and b/src/components/CreateServiceOrder/images/2025-07-11_104138.png differ
diff --git a/src/components/CreateServiceOrder/images/icon_service.png b/src/components/CreateServiceOrder/images/icon_service.png
new file mode 100644
index 0000000..5afa5d4
Binary files /dev/null and b/src/components/CreateServiceOrder/images/icon_service.png differ
diff --git a/src/components/CreateServiceOrder/images/icon_volume.png b/src/components/CreateServiceOrder/images/icon_volume.png
new file mode 100644
index 0000000..75bc98d
Binary files /dev/null and b/src/components/CreateServiceOrder/images/icon_volume.png differ
diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
new file mode 100644
index 0000000..aa35022
--- /dev/null
+++ b/src/components/CreateServiceOrder/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="create-service-order">
+    <div
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
+    >
+      <div
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
+      >
+        <spanclass="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
+        </text>
+        <img
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
+      </div>
+
+      <div v-if="!isCallSuccess" class="border-box p-12">
+        <div
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <spanclass="font-500 line-height-22 mr-20">所在位置</text>
+          <input placeholder="请填写所在位置" v-model="roomId" />
+        </div>
+
+        <div
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <spanclass="font-500 line-height-22 mr-20">联系电话</text>
+          <input
+            placeholder="请填写联系电话"
+            v-model="contactPhone"
+            @input="handleContactPhoneInput"
+          />
+        </div>
+
+        <div
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <div class="font-500 line-height-22 mb-12">需求信息描述</div>
+          <textarea
+            class="h-80"
+            placeholder="请输入需求信息描述"
+            placeholder-class="font-size-14 font-400"
+            maxlength="100"
+            v-model="contactText"
+          />
+        </div>
+
+        <div
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <div class="font-500 line-height-22 mb-12">照片上传</div>
+
+          <div
+            class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center"
+          >
+            <div
+              v-if="contentImgUrl"
+              class="w-full h-full relative inline-block"
+            >
+              <img
+                class="w-full h-full block"
+                :src="contentImgUrl"
+                mode="aspectFill"
+              />
+              <uni-icons
+                class="close-btn absolute z-10"
+                type="close"
+                size="20"
+                color="#6A717F"
+                @click="handleDeleteImage"
+              >
+              </uni-icons>
+            </div>
+
+            <div
+              v-else
+              class="w-full h-full flex flex-items-center flex-justify-center"
+              @click="handleChooseImage"
+            >
+              <uni-icons fontFamily="znicons" size="24" color="#6A717F">
+                {{ zniconsMap["zn-camera"] }}
+              </uni-icons>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="border-box card-content flex flex-items-center p-12">
+        <div class="border-box left flex-full pr-20">
+          <div class="font-size-12 color-525866 line-height-20 mb-4">
+            所在位置：{{ roomId }}
+          </div>
+          <div class="font-size-12 color-525866 line-height-20 mb-4">
+            联系方式: {{ contactPhone }}
+          </div>
+          <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+            需求描述: {{ contactspan}}
+          </div>
+        </div>
+
+        <img
+          v-if="contentImgUrl"
+          class="right rounded-6"
+          :src="contentImgUrl"
+          mode="aspectFill"
+        />
+      </div>
+
+      <div
+        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+        @click="handleCall"
+      >
+        {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick, defineProps, watch } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { createWorkOrder } from "@/request/api/WorkOrderApi";
+import { updateImageFile } from "@/request/api/UpdateFile";
+import { zniconsMap } from "@/static/fonts/znicons.js";
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const workOrderTypeId = ref("");
+const roomId = ref("");
+const contentImgUrl = ref("");
+const isCallSuccess = ref(false); // 呼叫成功状态
+const workOrderId = ref(0); // 工单ID
+const toolResult = computed(() => {
+  if (props.toolCall?.toolResult) {
+    return JSON.parse(props.toolCall?.toolResult);
+  } else {
+    return {};
+  }
+});
+// 原始手机号（未脱敏）
+const originalPhone = ref("");
+// 展示与输入绑定的手机号（初始为脱敏）
+const contactPhone = ref("");
+// 是否用户已编辑过手机号（一旦编辑则不再脱敏）
+const hasEditedPhone = ref(false);
+// 需求信息描述：使用可写的 ref，并从工具结果初始化
+const contactspan= ref("");
+
+// 手机号脱敏：138****1234（仅对11位数字进行处理）
+const maskPhone = (phone) => {
+  if (!phone) return "";
+  return String(phone).replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+};
+
+// 监听工具返回结果，初始化原始与脱敏显示
+watch(
+  toolResult,
+  (val) => {
+    originalPhone.value = val?.userPhone || "";
+    hasEditedPhone.value = false;
+    contactPhone.value = maskPhone(originalPhone.value);
+    contactText.value = val?.callServiceContent || "";
+  },
+  { immediate: true },
+);
+
+// 处理图片上传
+const handleChooseImage = () => {
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      const file = res.tempFilePaths[0];
+      updateImagehandle(file);
+    },
+    fail: () => {
+      uni.showToast({ title: "选择图片失败", icon: "none" });
+    },
+  });
+};
+
+// 标记用户已编辑手机号
+const handleContactPhoneInput = () => {
+  hasEditedPhone.value = true;
+};
+
+const handleDeleteImage = () => {
+  contentImgUrl.value = "";
+};
+
+const updateImagehandle = (file) => {
+  if (!file) {
+    return;
+  }
+  updateImageFile(file).then((res) => {
+    contentImgUrl.value = res.data;
+  });
+};
+
+const handleCall = async () => {
+  if (isCallSuccess.value) {
+    // 查看工单
+    divWorkOrder();
+    return;
+  }
+
+  if (!roomId.value.trim()) {
+    uni.showToast({ title: "请填写所在位置", icon: "none" });
+    return;
+  }
+
+  const phoneToSubmit = hasEditedPhone.value
+    ? contactPhone.value
+    : originalPhone.value;
+  if (!phoneToSubmit.trim()) {
+    uni.showToast({ title: "请填写联系电话", icon: "none" });
+    return;
+  }
+
+  if (!contactText.value.trim()) {
+    uni.showToast({ title: "请填写需求信息描述内容", icon: "none" });
+    return;
+  }
+
+  sendCreateWorkOrder(phoneToSubmit);
+};
+
+/// 创建工单
+const sendCreateWorkOrder = async (phoneToSubmit) => {
+  try {
+    const params = {
+      workOrderTypeId: workOrderTypeId.value,
+      roomNo: roomId.value,
+      userPhone: phoneToSubmit,
+      content: contactText.value,
+      contentImgUrl: contentImgUrl.value,
+    };
+    console.log("🚀 ~ sendCreateWorkOrder ~ params:", params);
+
+    const res = await createWorkOrder(params);
+
+    if (res.code === 0) {
+      // 保存工单ID
+      workOrderId.value = res.data?.id || "";
+
+      // 设置成功状态
+      isCallSuccess.value = true;
+
+      uni.showToast({ title: "呼叫成功", icon: "success" });
+    } else {
+      uni.showToast({ title: res.message || "呼叫失败", icon: "none" });
+    }
+  } catch (error) {
+    uni.showToast({ title: "网络错误，请重试", icon: "none" });
+  }
+};
+
+// 查看工单
+const divWorkOrder = () => {
+  // 这里可以跳转到工单详情页面
+  uni.navigateTo({
+    url: `/pages-service/order/list`,
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 200);
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+
+.close-btn {
+  top: 0;
+  right: 0;
+}
+</style>
diff --git a/src/components/CreateServiceOrder/prompt.md b/src/components/CreateServiceOrder/prompt.md
new file mode 100644
index 0000000..dbe2dd0
--- /dev/null
+++ b/src/components/CreateServiceOrder/prompt.md
@@ -0,0 +1,25 @@
+## 消息体组件信息
+
+组件名称：消息体创建服务工单
+服务名称：加一台麻将机
+房间号：302
+服务时间：2025-09-12 12:00
+联系房客：
+联系电话：
+立即呼叫按钮
+
+呼叫成功之后 
+1、呼叫按钮变为两个按钮 查看工单和已完成，见图中的布局
+2、联系人和联系电话，仅展示，不能编辑
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.create-service-order
+3、可以使用 uniapp 内置的组件
+4、联系房客/联系电话，需要用户自己填写
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/CreateServiceOrder/styles/index.scss b/src/components/CreateServiceOrder/styles/index.scss
new file mode 100644
index 0000000..073303d
--- /dev/null
+++ b/src/components/CreateServiceOrder/styles/index.scss
@@ -0,0 +1,22 @@
+.order-header {
+  height: 48px;
+}
+
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
+
+.help-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.btn {
+  height: 44px;
+}
+
+.right {
+  height: 88px;
+  width: 88px;
+}
diff --git a/src/components/CustomEmpty/index.vue b/src/components/CustomEmpty/index.vue
new file mode 100644
index 0000000..678c4ee
--- /dev/null
+++ b/src/components/CustomEmpty/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="empty-container flex flex-col items-center justify-center">
+    <img class="empty-image" :src="emptyIcon" mode="aspectFit" />
+    <spanclass="font-size-12 text-center color-99A0AE mt-8">
+      {{ statusText }}
+    </text>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  statusText: {
+    type: String,
+    default: "",
+  },
+  emptyIcon: {
+    type: String,
+    default:
+      "https://oss.nianxx.cn/mp/static/version_101/order/order_empty.png",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/CustomEmpty/styles/index.scss b/src/components/CustomEmpty/styles/index.scss
new file mode 100644
index 0000000..b07e999
--- /dev/null
+++ b/src/components/CustomEmpty/styles/index.scss
@@ -0,0 +1,4 @@
+.empty-image {
+  height: 130px;
+  width: 130px;
+}
diff --git a/src/components/DateRangeSection/index.vue b/src/components/DateRangeSection/index.vue
new file mode 100644
index 0000000..6bb60b9
--- /dev/null
+++ b/src/components/DateRangeSection/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="border-box flex flex-items-center flex-justify-between mb-12">
+    <div class="left flex flex-items-center">
+      <spanclass="font-size-12 color-99A0AE mr-4">入住</text>
+      <spanclass="font-size-12 color-171717 mr-16">
+        {{ selectedDate.startDate }}
+      </text>
+      <text
+        class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
+        >{{ selectedDate.totalDays }}晚</text
+      >
+      <spanclass="font-size-12 color-99A0AE ml-16">离店</text>
+      <spanclass="font-size-12 color-171717 ml-4">
+        {{ selectedDate.endDate }}
+      </text>
+    </div>
+    <div class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
+      <spanclass="font-size-12 theme-color-500 line-height-16">房间详情</text>
+      <uni-icons type="right" size="15" color="#99A0AE" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+// Props
+const props = defineProps({
+  selectedDate: {
+    type: Object,
+    default: () => {
+      return {
+        startDate: "",
+        endDate: "",
+      };
+    },
+  },
+  showBtn: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["click"]);
+</script>
+
+<style scoped lang="scss">
+.total {
+  border: 1px solid #43669a;
+  padding: 3px 6px;
+
+  &::after,
+  &::before {
+    content: "";
+    width: 8px;
+    height: 1px;
+    position: absolute;
+  }
+
+  &::before {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 1),
+      rgba(67, 102, 154, 0)
+    );
+    left: -9px;
+  }
+
+  &::after {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 0),
+      rgba(67, 102, 154, 1)
+    );
+    right: -9px;
+  }
+}
+</style>
diff --git a/src/components/DetailPopup/index.vue b/src/components/DetailPopup/index.vue
new file mode 100644
index 0000000..2420e59
--- /dev/null
+++ b/src/components/DetailPopup/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <div class="refund-popup bg-F5F7FA border-box">
+      <div
+        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
+      >
+        <div
+          class="flex-full font-size-16 color-171717 line-height-24 text-center"
+        >
+          明细详情
+        </div>
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </div>
+      <!-- 内容区域 -->
+      <div class="rounded-12 bg-white ml-12 mr-12 mb-40">
+        <div
+          class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <spanclass="font-size-16 font-500 color-171717">在线支付</text>
+          <spanclass="font-size-14 color-171717">239</text>
+        </div>
+        <div
+          class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <spanclass="font-size-16 font-500 color-171717">房费</text>
+          <spanclass="font-size-14 color-171717">239</text>
+        </div>
+      </div>
+    </div>
+  </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>
diff --git a/src/components/DetailPopup/styles/index.scss b/src/components/DetailPopup/styles/index.scss
new file mode 100644
index 0000000..57425d5
--- /dev/null
+++ 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;
+}
diff --git a/src/components/Divider/index.vue b/src/components/Divider/index.vue
new file mode 100644
index 0000000..363502c
--- /dev/null
+++ b/src/components/Divider/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="divider"></div>
+</template>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/Divider/styles/index.scss b/src/components/Divider/styles/index.scss
new file mode 100644
index 0000000..4f0cc2f
--- /dev/null
+++ b/src/components/Divider/styles/index.scss
@@ -0,0 +1,36 @@
+.divider {
+  height: 1px;
+  margin: 0 10px;
+  background: linear-gradient(
+    to right,
+    #eee,
+    #eee 5px,
+    transparent 5px,
+    transparent
+  );
+  background-size: 10px 100%;
+  position: relative;
+
+  // &::before, &::after {
+  //   position: absolute;
+  //   content: '';
+  //   height: 12px;
+  //   width: 6px;
+
+  //   background-color: #E2EDF2;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  // }
+
+  // &::before {
+  //   border-radius: 0 20px 20px 0;
+  //   top: 0;
+  //   left: -10px;
+  // }
+
+  // &::after {
+  //   border-radius: 20px 0 0 20px;
+  //   top: 0;
+  //   right: -10px;
+  // }
+}
diff --git a/src/components/Feedback/images/icon_volume.png b/src/components/Feedback/images/icon_volume.png
new file mode 100644
index 0000000..75bc98d
Binary files /dev/null and b/src/components/Feedback/images/icon_volume.png differ
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
new file mode 100644
index 0000000..2b3bfa5
--- /dev/null
+++ b/src/components/Feedback/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="create-service-order">
+    <div
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
+    >
+      <div
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
+      >
+        <spanclass="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
+        </text>
+        <img
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
+      </div>
+
+      <div v-if="!isCallSuccess" class="border-box p-12">
+        <div
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <spanclass="font-500 line-height-22 mr-20">联系电话</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
+        </div>
+        <div
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <div class="font-500 line-height-22 mb-12">意见内容</div>
+          <textarea
+            class="h-80"
+            placeholder="请输入反馈意见"
+            placeholder-class="font-size-14 font-400"
+            maxlength="100"
+            v-model="contactText"
+          />
+        </div>
+
+        <div
+          class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
+          @click="handleCall"
+        >
+          立即提交
+        </div>
+      </div>
+
+      <div v-else class="border-box left flex-full p-12">
+        <div class="font-size-12 color-525866 line-height-20 mb-4">
+          联系方式: {{ contactPhone }}
+        </div>
+        <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+          意见内容: {{ contactText }}
+        </div>
+      </div>
+
+      <div class="footer-help flex flex-items-center pl-12 mb-12">
+        <img class="help-icon mr-4" src="./images/icon_volume.png" />
+        <spanclass="font-size-12 font-500 color-FA7319">
+          {{ appName }}收到您的意见将第一时间为您处理!
+        </text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, computed } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { getCurrentConfig } from "@/constant/base";
+import { submitFeedback } from "@/request/api/FeedbackApi";
+
+const contactPhone = ref("");
+const contactText = ref("");
+const isCallSuccess = ref(false); // 呼叫成功状态
+const appName = computed(() => getCurrentConfig().name);
+
+const handleCall = async () => {
+  if (!contactPhone.value.trim()) {
+    uni.showToast({ title: "请填写联系电话", icon: "none" });
+    return;
+  }
+
+  if (!contactText.value.trim()) {
+    uni.showToast({ title: "请填写意见内容", icon: "none" });
+    return;
+  }
+
+  sendFeedback();
+};
+
+/// 提交反馈意见
+const sendFeedback = async () => {
+  try {
+    const res = await submitFeedback({
+      userPhone: contactPhone.value,
+      content: contactText.value,
+    });
+
+    if (res.code === 0) {
+      // 设置成功状态
+      isCallSuccess.value = true;
+
+      uni.showToast({
+        title: "反馈意见成功",
+        icon: "success",
+      });
+    } else {
+      uni.showToast({
+        title: res.message || "反馈意见失败",
+        icon: "none",
+      });
+    }
+  } catch (error) {
+    console.error("反馈意见失败:", error);
+    uni.showToast({
+      title: "网络错误，请重试",
+      icon: "none",
+    });
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 200);
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/Feedback/styles/index.scss b/src/components/Feedback/styles/index.scss
new file mode 100644
index 0000000..f9fff58
--- /dev/null
+++ b/src/components/Feedback/styles/index.scss
@@ -0,0 +1,17 @@
+.order-header {
+  height: 48px;
+}
+
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
+
+.help-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.btn {
+  height: 44px;
+}
diff --git a/src/components/FormCard/README.md b/src/components/FormCard/README.md
new file mode 100644
index 0000000..a4bf1f2
--- /dev/null
+++ b/src/components/FormCard/README.md
@@ -0,0 +1,473 @@
+# FormCard 表单卡片组件
+
+一个功能完整的表单卡片组件，支持姓名和手机号输入，具备数据验证和双向绑定功能。
+
+## 功能特性
+
+- 📝 **双向绑定**：支持 v-model 双向数据绑定
+- ✅ **数据验证**：内置手机号格式验证
+- 🎨 **自定义标题**：可配置游客标题文本
+- 🗑️ **删除功能**：支持删除操作，可配置显示/隐藏
+- 💫 **交互反馈**：输入框聚焦效果和错误状态提示
+- 📱 **响应式设计**：适配不同屏幕尺寸
+- 🎯 **事件支持**：完整的事件系统
+- ⚡ **性能优化**：使用计算属性优化渲染
+
+## 基础用法
+
+### 默认使用
+
+```vue
+<template>
+  <FormCard
+    :form="form"
+    @update:name="form.name = $event"
+    @update:phone="form.phone = $event"
+    @delete="handleDelete"
+  />
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import FormCard from "@/components/FormCard/index.vue";
+
+const form = reactive({
+  name: "",
+  phone: "",
+});
+
+const handleDelete = () => {
+  console.log("删除表单");
+};
+</script>
+```
+
+### 自定义标题
+
+```vue
+<template>
+  <FormCard
+    :form="form"
+    title="成人票"
+    @update:name="form.name = $event"
+    @update:phone="form.phone = $event"
+    @delete="handleDelete"
+  />
+</template>
+```
+
+### 隐藏删除图标
+
+```vue
+<template>
+  <FormCard
+    :form="form"
+    title="联系人信息"
+    :show-delete-icon="false"
+    @update:name="form.name = $event"
+    @update:phone="form.phone = $event"
+  />
+</template>
+```
+
+### 多个表单卡片
+
+```vue
+<template>
+  <div>
+    <FormCard
+      v-for="(item, index) in formList"
+      :key="index"
+      :form="item"
+      :title="`游客${index + 1}`"
+      @update:name="item.name = $event"
+      @update:phone="item.phone = $event"
+      @delete="handleDeleteForm(index)"
+    />
+    <button @click="addForm">添加游客</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const formList = ref([
+  { name: "", phone: "" },
+  { name: "", phone: "" },
+]);
+
+const handleDeleteForm = (index) => {
+  formList.value.splice(index, 1);
+};
+
+const addForm = () => {
+  formList.value.push({ name: "", phone: "" });
+};
+</script>
+```
+
+### 表单验证
+
+```vue
+<template>
+  <FormCard
+    ref="formCardRef"
+    :form="form"
+    title="验证示例"
+    @update:name="form.name = $event"
+    @update:phone="form.phone = $event"
+  />
+  <button @click="validateForm">验证表单</button>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+
+const formCardRef = ref();
+const form = reactive({
+  name: "",
+  phone: "",
+});
+
+const validateForm = () => {
+  // 手动触发验证
+  formCardRef.value.validateName();
+  formCardRef.value.validatePhone();
+
+  // 或者使用工具函数检查
+  const nameError = formCardRef.value.getNameError(form.name);
+  const phoneError = formCardRef.value.getPhoneError(form.phone);
+
+  if (!nameError && !phoneError) {
+    console.log("表单验证通过");
+  }
+};
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 参数           | 类型    | 默认值                    | 说明                                  |
+| -------------- | ------- | ------------------------- | ------------------------------------- |
+| title          | String  | "游客1"                   | 表单卡片标题                          |
+| form           | Object  | `{ name: '', phone: '' }` | 表单数据对象，包含 name 和 phone 字段 |
+| form.name      | String  | ""                        | 姓名值                                |
+| form.phone     | String  | ""                        | 手机号值                              |
+| showDeleteIcon | Boolean | true                      | 是否显示删除图标                      |
+
+### Events
+
+| 事件名       | 参数            | 说明                                   |
+| ------------ | --------------- | -------------------------------------- |
+| update:name  | (value: string) | 姓名值更新时触发，自动去除首尾空格     |
+| update:phone | (value: string) | 手机号值更新时触发，自动过滤非数字字符 |
+| delete       | -               | 点击删除图标时触发                     |
+
+### Methods (通过 ref 调用)
+
+| 方法名        | 参数            | 返回值 | 说明                   |
+| ------------- | --------------- | ------ | ---------------------- |
+| validateName  | -               | void   | 手动触发姓名验证       |
+| validatePhone | -               | void   | 手动触发手机号验证     |
+| getNameError  | (name: string)  | string | 获取姓名验证错误信息   |
+| getPhoneError | (phone: string) | string | 获取手机号验证错误信息 |
+
+### 数据验证
+
+组件内置完整的表单验证：
+
+- **姓名验证**：不能为空，自动去除首尾空格
+- **手机号验证**：支持中国大陆手机号格式（1开头，第二位为3-9，总长度11位）
+- **失焦验证**：只在输入框失去焦点时进行验证，避免输入干扰
+- **错误提示**：验证失败时显示错误信息，带有淡入动画效果
+- **视觉反馈**：输入框边框变红提示错误状态
+- **自动过滤**：手机号输入时自动过滤非数字字符
+
+## 样式定制
+
+### CSS 变量系统
+
+组件使用 CSS 变量系统，支持主题定制：
+
+```scss
+:root {
+  --form-primary-color: #00a6ff; // 主色调
+  --form-error-color: #ff4d4f; // 错误色
+  --form-text-color: #333; // 文本色
+  --form-label-color: #86909c; // 标签色
+  --form-border-color: #e5e8ef; // 边框色
+  --form-input-border-color: #ddd; // 输入框边框色
+  --form-bg-color: #fff; // 背景色
+  --form-header-bg-color: rgba(25, 144, 255, 0.06); // 头部背景色
+  --form-border-radius: 8px; // 圆角大小
+  --form-transition: all 0.2s ease; // 过渡动画
+}
+```
+
+### 主要样式类
+
+```scss
+.form-wrapper {
+  // 表单容器，支持悬停效果和阴影
+}
+
+.form-header {
+  // 表单头部，包含标题和删除按钮
+}
+
+.form-title {
+  // 标题文本，支持文本溢出省略
+}
+
+.form-item {
+  // 表单项容器，支持分隔线
+}
+
+.form-input {
+  // 输入框，支持聚焦和错误状态
+}
+
+.form-error {
+  // 错误信息，带有淡入动画
+}
+```
+
+### 响应式设计
+
+组件内置响应式支持，在小屏幕设备上自动调整：
+
+- 320px 以下设备优化布局
+- 自动调整字体大小和间距
+- 保持良好的可用性
+
+### 自定义主题
+
+通过覆盖 CSS 变量来自定义主题：
+
+```scss
+// 自定义主题色
+:root {
+  --form-primary-color: #your-primary-color;
+  --form-error-color: #your-error-color;
+  --form-border-radius: 12px;
+}
+
+// 或者针对特定组件
+.your-custom-form {
+  --form-primary-color: #your-primary-color;
+  --form-header-bg-color: rgba(your-color, 0.1);
+}
+```
+
+## 高级用法
+
+### 表单验证集成
+
+```vue
+<template>
+  <FormCard
+    ref="formCardRef"
+    :form="form"
+    title="游客信息"
+    @update:name="form.name = $event"
+    @update:phone="form.phone = $event"
+    @delete="handleDelete"
+  />
+  <button @click="validateForm">提交</button>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+
+const formCardRef = ref();
+const form = reactive({
+  name: "",
+  phone: "",
+});
+
+const validateForm = () => {
+  // 使用组件内置的验证方法
+  const nameError = formCardRef.value.getNameError(form.name);
+  const phoneError = formCardRef.value.getPhoneError(form.phone);
+
+  if (nameError) {
+    uni.showToast({
+      title: nameError,
+      icon: "none",
+    });
+    return;
+  }
+
+  if (phoneError) {
+    uni.showToast({
+      title: phoneError,
+      icon: "none",
+    });
+    return;
+  }
+
+  // 提交表单
+  console.log("表单数据:", form);
+};
+</script>
+```
+
+### 动态表单管理
+
+```vue
+<template>
+  <div>
+    <FormCard
+      v-for="(item, index) in passengers"
+      :key="item.id"
+      :form="item"
+      @update:name="item.name = $event"
+      @update:phone="item.phone = $event"
+      :title="getPassengerTitle(item.type, index)"
+      :show-delete-icon="passengers.length > 1"
+      @delete="removePassenger(index)"
+    />
+
+    <div class="action-buttons">
+      <button @click="addAdult">添加成人</button>
+      <button @click="addChild">添加儿童</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const passengers = ref([{ id: 1, type: "adult", name: "", phone: "" }]);
+
+let nextId = 2;
+
+const getPassengerTitle = (type, index) => {
+  return type === "adult" ? `成人${index + 1}` : `儿童${index + 1}`;
+};
+
+const addAdult = () => {
+  passengers.value.push({
+    id: nextId++,
+    type: "adult",
+    name: "",
+    phone: "",
+  });
+};
+
+const addChild = () => {
+  passengers.value.push({
+    id: nextId++,
+    type: "child",
+    name: "",
+    phone: "",
+  });
+};
+
+const removePassenger = (index) => {
+  if (passengers.value.length > 1) {
+    passengers.value.splice(index, 1);
+  }
+};
+</script>
+```
+
+## 注意事项
+
+1. **数据传递**：使用 `:form` 对象传递数据，包含 `name` 和 `phone` 字段
+2. **双向绑定**：通过 `@update:name` 和 `@update:phone` 事件进行双向绑定
+3. **验证机制**：只在失去焦点时进行验证，避免输入干扰
+4. **手机号验证**：仅支持中国大陆手机号格式验证（1开头，第二位3-9，总长度11位）
+5. **自动处理**：手机号自动过滤非数字字符，姓名自动去除首尾空格
+6. **删除功能**：删除事件需要父组件处理具体逻辑
+7. **方法调用**：通过 `ref` 可调用组件内部的验证方法
+8. **兼容性**：支持微信小程序、H5、App等平台
+
+## 更新日志
+
+### v1.3.0 (2024-12-19)
+
+**性能与可维护性全面优化**
+
+- 🚀 **性能优化**：提取常量定义，优化计算属性逻辑
+- 🛠️ **代码重构**：添加完整的 JSDoc 注释和类型定义
+- 🎨 **样式升级**：使用 CSS 变量系统，支持主题定制
+- ✨ **功能增强**：手机号自动过滤非数字字符，姓名自动去除空格
+- 🎭 **UI 改进**：新增悬停效果、错误信息动画和阴影效果
+- 📱 **响应式设计**：优化小屏幕设备适配
+- 🔧 **开发体验**：添加 defineExpose 暴露验证方法，便于测试
+- 📝 **文档完善**：更新演示和使用说明
+
+### v1.2.3 (2024-12-19)
+
+**优化验证行为**
+
+- 🎨 优化验证行为，移除实时验证
+- ✨ 姓名和手机号只在失去焦点时进行验证
+- 🔧 移除不必要的 watch 监听器
+- 📝 更新文档和演示说明
+- ⚡ 提升组件性能和用户体验
+
+### v1.2.2 (2024-12-19)
+
+**新增姓名验证功能**
+
+- ✨ 新增姓名非空验证功能
+- 👤 姓名为空时显示"请输入姓名"提示
+- 🔄 支持姓名实时验证，输入内容时错误信息自动隐藏
+- 🎯 完善表单验证体系，提升数据完整性
+- 💫 优化用户体验，提供友好的输入提示
+
+### v1.2.1 (2024-12-19)
+
+**优化手机号验证功能**
+
+- 🐛 修复validatePhone方法中props引用错误的问题
+- ✨ 新增手机号实时验证功能
+- 🔄 输入正确手机号时错误信息自动隐藏
+- 📱 优化用户输入体验，提供即时反馈
+- 🎯 完善demo页面，增加功能说明
+
+### v1.2.0 (2024-12-19)
+
+**新增删除功能**
+
+- ✨ 支持删除表单卡片
+- 🎯 可配置删除图标显示/隐藏
+- 🔄 完善事件系统，支持delete事件
+- 💫 优化用户交互体验
+
+### v2.0.0
+
+- ✨ 重构组件，支持 props 传值和双向绑定
+- ✨ 新增 `title` 属性，支持自定义标题
+- ✨ 新增 `showDeleteIcon` 属性，控制删除图标显示
+- ✨ 新增完整的事件系统（update:name, update:phone, delete）
+- 🎨 优化样式，新增错误状态和交互效果
+- 🔧 改进手机号验证逻辑
+- 📝 新增完整的文档和演示示例
+
+### v1.0.0
+
+- 🎉 初始版本发布
+- ✨ 基础表单功能
+- ✨ 手机号验证
+- ✨ 基础样式
+
+## 技术栈
+
+- Vue 3 Composition API
+- SCSS
+- uni-app
+
+## 浏览器支持
+
+- 微信小程序
+- H5 (Chrome, Firefox, Safari, Edge)
+- App (iOS, Android)
+
+## 许可证
+
+MIT License
diff --git a/src/components/FormCard/demo.vue b/src/components/FormCard/demo.vue
new file mode 100644
index 0000000..424b39c
--- /dev/null
+++ b/src/components/FormCard/demo.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-title">FormCard 表单组件演示</div>
+
+    <div class="demo-description">
+      <text>✨ 支持姓名和手机号输入，自动过滤非数字字符</text>
+      <text>👤 姓名失去焦点时验证，自动去除首尾空格</text>
+      <text>📱 手机号失去焦点时验证，支持中国大陆手机号格式</text>
+      <text>🎨 优化UI设计，支持悬停效果和动画</text>
+      <text>🗑️ 支持删除操作（可配置显示/隐藏）</text>
+      <text>📱 响应式设计，适配小屏幕设备</text>
+    </div>
+
+    <!-- 示例1: 基础用法 -->
+    <div class="demo-section">
+      <div class="section-title">示例1: 基础用法</div>
+      <FormCard
+        :form="form1"
+        title="游客1"
+        @update:name="form1.name = $event"
+        @update:phone="form1.phone = $event"
+        @delete="handleDelete1"
+      />
+      <div class="form-data">
+        <text>姓名: {{ form1.name }}</text>
+        <text>手机号: {{ form1.phone }}</text>
+      </div>
+    </div>
+
+    <!-- 示例2: 自定义标题 -->
+    <div class="demo-section">
+      <div class="section-title">示例2: 自定义标题</div>
+      <FormCard
+        :form="form2"
+        title="成人票"
+        @update:name="form2.name = $event"
+        @update:phone="form2.phone = $event"
+        @delete="handleDelete2"
+      />
+      <div class="form-data">
+        <text>姓名: {{ form2.name }}</text>
+        <text>手机号: {{ form2.phone }}</text>
+      </div>
+    </div>
+
+    <!-- 示例3: 隐藏删除图标 -->
+    <div class="demo-section">
+      <div class="section-title">示例3: 隐藏删除图标</div>
+      <FormCard
+        :form="form3"
+        title="联系人信息"
+        :show-delete-icon="false"
+        @update:name="form3.name = $event"
+        @update:phone="form3.phone = $event"
+      />
+      <div class="form-data">
+        <text>姓名: {{ form3.name }}</text>
+        <text>手机号: {{ form3.phone }}</text>
+      </div>
+    </div>
+
+    <!-- 示例4: 多个表单卡片 -->
+    <div class="demo-section">
+      <div class="section-title">示例4: 多个表单卡片</div>
+      <FormCard
+        v-for="(item, index) in formList"
+        :key="index"
+        :form="item"
+        :title="`游客${index + 1}`"
+        @update:name="item.name = $event"
+        @update:phone="item.phone = $event"
+        @delete="handleDeleteForm(index)"
+      />
+      <button class="add-btn" @click="addForm">添加游客</button>
+
+      <div class="form-list-data">
+        <div class="list-title">表单数据:</div>
+        <div v-for="(item, index) in formList" :key="index" class="list-item">
+          <text>游客{{ index + 1 }}: {{ item.name }} - {{ item.phone }}</text>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import FormCard from "./index.vue";
+
+// 单个表单数据
+const form1 = reactive({
+  name: "",
+  phone: "",
+});
+
+const form2 = reactive({
+  name: "张三",
+  phone: "13800138000",
+});
+
+const form3 = reactive({
+  name: "",
+  phone: "",
+});
+
+// 多个表单数据
+const formList = ref([
+  { name: "", phone: "" },
+  { name: "", phone: "" },
+]);
+
+// 事件处理
+const handleDelete1 = () => {
+  console.log("删除表单1");
+  uni.showToast({
+    title: "删除表单1",
+    icon: "none",
+  });
+};
+
+const handleDelete2 = () => {
+  console.log("删除表单2");
+  uni.showToast({
+    title: "删除表单2",
+    icon: "none",
+  });
+};
+
+const handleDeleteForm = (index) => {
+  console.log(`删除表单${index + 1}`);
+  formList.value.splice(index, 1);
+  uni.showToast({
+    title: `删除游客${index + 1}`,
+    icon: "none",
+  });
+};
+
+const addForm = () => {
+  formList.value.push({ name: "", phone: "" });
+  uni.showToast({
+    title: "添加游客成功",
+    icon: "none",
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20rpx;
+  color: #333;
+}
+
+.demo-description {
+  margin-bottom: 40rpx;
+  padding: 20rpx;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 12rpx;
+  border: 1px solid #bae6fd;
+
+  text {
+    display: block;
+    font-size: 26rpx;
+    color: #0369a1;
+    margin-bottom: 8rpx;
+    line-height: 1.5;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.demo-section {
+  margin-bottom: 60rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+  color: #333;
+  border-left: 6rpx solid $theme-color-500;
+  padding-left: 16rpx;
+}
+
+.form-data {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 8rpx;
+  border: 1px solid #e5e8ef;
+
+  text {
+    display: block;
+    font-size: 24rpx;
+    color: #666;
+    margin-bottom: 8rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.add-btn {
+  width: 100%;
+  height: 80rpx;
+  background: $theme-color-500;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  margin-top: 20rpx;
+
+  &:active {
+    background: #0056b3;
+  }
+}
+
+.form-list-data {
+  margin-top: 30rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 8rpx;
+  border: 1px solid #e5e8ef;
+}
+
+.list-title {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.list-item {
+  margin-bottom: 8rpx;
+
+  text {
+    font-size: 24rpx;
+    color: #666;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/src/components/FormCard/images/2025-07-15_161532.png b/src/components/FormCard/images/2025-07-15_161532.png
new file mode 100644
index 0000000..8231aa0
Binary files /dev/null and b/src/components/FormCard/images/2025-07-15_161532.png differ
diff --git a/src/components/FormCard/images/icon_minus.png b/src/components/FormCard/images/icon_minus.png
new file mode 100644
index 0000000..343b1fa
Binary files /dev/null and b/src/components/FormCard/images/icon_minus.png differ
diff --git a/src/components/FormCard/index.vue b/src/components/FormCard/index.vue
new file mode 100644
index 0000000..67c111b
--- /dev/null
+++ b/src/components/FormCard/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="form-wrapper">
+    <div class="form-header">
+      <uni-icons
+        class="minus uni-color"
+        color="opacity"
+        size="22"
+        type="minus"
+      />
+      <spanclass="form-title">{{ title }}</text>
+      <uni-icons
+        v-if="showDeleteIcon"
+        class="delete uni-color"
+        color="opacity"
+        size="22"
+        type="trash"
+        @click="handleDelete"
+      />
+    </div>
+    <div class="form-item-wrapper">
+      <div class="form-item">
+        <div class="form-item-row">
+          <spanclass="form-label">姓 名</text>
+          <input
+            class="form-input"
+            :class="{ 'form-input-error': nameError }"
+            v-model="nameValue"
+            placeholder="请输入姓名"
+            @blur="validateName"
+          />
+        </div>
+        <spanv-if="nameError" class="form-error">{{ nameError }}</text>
+      </div>
+      <div class="form-item">
+        <div class="form-item-row">
+          <spanclass="form-label">手机号</text>
+          <input
+            class="form-input"
+            :class="{ 'form-input-error': phoneError }"
+            v-model="phoneValue"
+            placeholder="请输入手机号"
+            type="tel"
+            maxlength="11"
+            @blur="validatePhone"
+          />
+        </div>
+        <spanv-if="phoneError" class="form-error">{{ phoneError }}</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+// 常量定义
+const PHONE_REGEX = /^1[3-9]\d{9}$/;
+const ERROR_MESSAGES = {
+  NAME_REQUIRED: "请输入姓名",
+  PHONE_REQUIRED: "手机号不能为空",
+  PHONE_INVALID: "请输入正确的手机号",
+};
+
+/**
+ * FormCard 组件 Props
+ * @typedef {Object} FormCardProps
+ * @property {string} title - 表单标题
+ * @property {Object} form - 表单数据对象
+ * @property {string} form.visitorName - 姓名
+ * @property {string} form.contactPhone - 手机号
+ * @property {boolean} showDeleteIcon - 是否显示删除图标
+ */
+const props = defineProps({
+  title: {
+    type: String,
+    default: "游客1",
+  },
+  form: {
+    type: Object,
+    default: () => ({
+      visitorName: "",
+      contactPhone: "",
+    }),
+    validator: (value) => {
+      return (
+        value &&
+        typeof value === "object" &&
+        "visitorName" in value &&
+        "contactPhone" in value
+      );
+    },
+  },
+  showDeleteIcon: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+/**
+ * FormCard 组件事件
+ * @typedef {Object} FormCardEmits
+ * @property {Function} update:visitorName - 更新姓名事件
+ * @property {Function} update:contactPhone - 更新手机号事件
+ * @property {Function} delete - 删除表单事件
+ */
+const emit = defineEmits([
+  "update:visitorName",
+  "update:contactPhone",
+  "delete",
+]);
+
+// 响应式状态
+const nameError = ref("");
+const phoneError = ref("");
+
+// 计算属性 - 双向绑定
+const nameValue = computed({
+  get: () => props.form?.visitorName || "",
+  set: (value) => emit("update:visitorName", value?.trim() || ""),
+});
+
+const phoneValue = computed({
+  get: () => props.form?.contactPhone || "",
+  set: (value) => {
+    // 只允许数字输入
+    const numericValue = value.replace(/\D/g, "");
+    emit("update:contactPhone", numericValue);
+  },
+});
+
+// 工具函数
+/**
+ * 验证姓名是否有效
+ * @param {string} name - 姓名
+ * @returns {string} 错误信息，空字符串表示验证通过
+ */
+const getNameError = (name) => {
+  if (!name || name.trim() === "") {
+    return ERROR_MESSAGES.NAME_REQUIRED;
+  }
+  return "";
+};
+
+/**
+ * 验证手机号是否有效
+ * @param {string} phone - 手机号
+ * @returns {string} 错误信息，空字符串表示验证通过
+ */
+const getPhoneError = (phone) => {
+  if (!phone) {
+    return ERROR_MESSAGES.PHONE_REQUIRED;
+  }
+  if (!PHONE_REGEX.test(phone)) {
+    return ERROR_MESSAGES.PHONE_INVALID;
+  }
+  return "";
+};
+
+// 验证方法
+const validateName = () => {
+  nameError.value = getNameError(props.form?.visitorName);
+};
+
+const validatePhone = () => {
+  phoneError.value = getPhoneError(props.form?.contactPhone);
+};
+
+// 事件处理
+const handleDelete = () => {
+  emit("delete");
+};
+
+// 暴露给模板的方法（用于测试或外部调用）
+defineExpose({
+  validateName,
+  validatePhone,
+  getNameError,
+  getPhoneError,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/FormCard/propmt.md b/src/components/FormCard/propmt.md
new file mode 100644
index 0000000..ffc14ac
--- /dev/null
+++ b/src/components/FormCard/propmt.md
@@ -0,0 +1,14 @@
+## 表单组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.form-wrapper
+3、可以使用 uniapp 内置的组件
+4、姓名、手机号，需要用户自己填写
+5、验证手机号格式是否正确
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/FormCard/styles/index.scss b/src/components/FormCard/styles/index.scss
new file mode 100644
index 0000000..830002e
--- /dev/null
+++ b/src/components/FormCard/styles/index.scss
@@ -0,0 +1,152 @@
+// SASS 变量定义
+$form-primary-color: #00a6ff;
+$form-error-color: #ff4d4f;
+$form-text-color: $uni-text-color;
+$form-label-color: #86909c;
+$form-border-color: #ddd;
+$form-input-border-color: #ddd;
+$form-bg-color: #f5f5f5;
+$form-header-bg-color: rgba(25, 144, 255, 0.06);
+$form-border-radius: 8px;
+$form-transition: all 0.2s ease;
+
+.form-wrapper {
+  display: inline-block;
+  font-size: 0;
+  border-radius: $form-border-radius;
+  overflow: hidden;
+  width: 280px;
+  margin-right: 12px;
+}
+
+.form-header {
+  background-color: $form-header-bg-color;
+  box-sizing: border-box;
+  border: 1px solid $form-border-color;
+  border-radius: $form-border-radius $form-border-radius 0 0;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  min-height: 44px;
+
+  .uni-color {
+    color: $theme-color-500;
+  }
+
+  .minus,
+  .delete {
+    height: 22px;
+    width: 22px;
+    cursor: pointer;
+    transition: $form-transition;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .delete {
+    margin-left: auto;
+  }
+}
+
+.form-title {
+  margin-left: 8px;
+  font-size: $uni-font-size-lg;
+  font-weight: 500;
+  color: $theme-color-500;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.form-item-wrapper {
+  background-color: $form-bg-color;
+  border-radius: 0 0 $form-border-radius $form-border-radius;
+  box-sizing: border-box;
+  border: 1px solid $form-border-color;
+  border-top: none;
+  padding: 12px;
+}
+
+.form-item {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form-item-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.form-label {
+  font-size: $uni-font-size-base;
+  color: $form-label-color;
+  width: 50px;
+  flex-shrink: 0;
+  font-weight: 500;
+  margin-right: 10px;
+}
+
+.form-input {
+  flex: 1;
+  font-size: $uni-font-size-base;
+  color: $form-text-color;
+  border: none;
+  border-bottom: 1px solid $form-input-border-color;
+  background: transparent;
+  outline: none;
+  transition: $form-transition;
+  min-height: 20px;
+
+  &::placeholder {
+    color: $form-label-color;
+    opacity: 0.8;
+  }
+
+  &:focus {
+    border-bottom-color: $theme-color-500;
+
+    &::placeholder {
+      opacity: 0.5;
+    }
+  }
+
+  &.form-input-error {
+    border-bottom-color: $form-error-color;
+
+    &:focus {
+      border-bottom-color: $form-error-color;
+    }
+  }
+}
+
+.form-error {
+  font-size: $uni-font-size-sm;
+  color: $form-error-color;
+  margin-top: 6px;
+  margin-left: 60px;
+  line-height: 1.4;
+  animation: fadeInError 0.3s ease-in-out;
+}
+
+// 错误信息淡入动画
+@keyframes fadeInError {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
new file mode 100644
index 0000000..1b5a36d
--- /dev/null
+++ b/src/components/GoodDetail/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="border-box border-top-8">
+    <div
+      v-if="goodsData.commodityPurchaseInstruction"
+      class="border-box pl-12 pr-12"
+    >
+      <ModuleTitle
+        v-if="showTitle"
+        :title="goodsData.commodityPurchaseInstruction.templateTitle"
+      />
+      <div
+        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+          .commodityPurchaseInstructionModuleEntityList"
+        :key="index"
+      >
+        <div
+          class="flex flex-items-start flex-col pt-12 pb-12"
+          :class="{
+            'border-bottom':
+              index <
+              goodsData.commodityPurchaseInstruction
+                .commodityPurchaseInstructionModuleEntityList.length -
+                1,
+          }"
+        >
+          <div class="flex flex-items-center flex-row flex-shrink-0 mr-8">
+            <uni-icons fontFamily="znicons" size="20" color="#333">
+              {{ zniconsMap[moduleItem.moduleIcon] }}
+            </uni-icons>
+            <spanclass="ml-4 font-size-14 color-171717 line-height-20">
+              {{ moduleItem.moduleTitle }}
+            </text>
+          </div>
+          <spanclass="flex-full font-size-12 color-525866 line-height-20 mt-4">
+            {{ moduleItem.moduleContent }}
+          </text>
+        </div>
+      </div>
+    </div>
+    <zero-markdown-div
+      v-else
+      :markdown="goodsData.commodityTip"
+      :aiMode="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+</style>
diff --git a/src/components/ImageSwiper/README.md b/src/components/ImageSwiper/README.md
new file mode 100644
index 0000000..36f5b45
--- /dev/null
+++ b/src/components/ImageSwiper/README.md
@@ -0,0 +1,334 @@
+# ImageSwiper 轮播图组件
+
+一个功能丰富的轮播图组件，支持自定义圆角、缩略图导航和图片描述。
+
+## 功能特性
+
+- 🎨 **可配置圆角**：支持数字(px)或字符串形式的圆角设置
+- 📏 **可配置高度**：支持数字(px)或字符串形式的高度设置
+- 🖼️ **缩略图导航**：底部缩略图快速切换，支持左右滑动
+- 👁️ **缩略图控制**：可配置显示或隐藏缩略图
+- 📱 **响应式设计**：适配不同屏幕尺寸
+- 🎯 **自定义数据**：支持传入自定义图片数据
+- 📊 **进度指示器**：显示当前图片位置
+- 🎭 **选中状态**：缩略图选中时高亮显示，带缩放动画
+- 🔄 **自动滚动**：缩略图自动滚动到可视区域
+- ⚡ **性能优化**：使用计算属性优化渲染
+
+## 基础用法
+
+### 默认使用
+
+```vue
+<template>
+  <ImageSwiper />
+</template>
+
+<script setup>
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+</script>
+```
+
+### 自定义圆角
+
+```vue
+<template>
+  <!-- 数字形式 (px) -->
+  <ImageSwiper :border-radius="12" />
+
+  <!-- 字符串形式 -->
+  <ImageSwiper border-radius="1rem" />
+
+  <!-- 无圆角 -->
+  <ImageSwiper :border-radius="0" />
+</template>
+```
+
+### 自定义高度
+
+```vue
+<template>
+  <!-- 数字形式 (px) -->
+  <ImageSwiper :height="300" />
+
+  <!-- 字符串形式 -->
+  <ImageSwiper height="50vh" />
+
+  <!-- 小高度轮播图 -->
+  <ImageSwiper :height="120" />
+</template>
+```
+
+### 隐藏缩略图
+
+```vue
+<template>
+  <!-- 隐藏缩略图，只显示主轮播图 -->
+  <ImageSwiper :show-thumbnails="false" />
+
+  <!-- 结合其他属性使用 -->
+  <ImageSwiper :height="250" :border-radius="15" :show-thumbnails="false" />
+</template>
+```
+
+### 自定义图片数据
+
+```vue
+<template>
+  <ImageSwiper :border-radius="15" :images="customImages" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+
+const customImages = ref([
+  {
+    photoUrl: "https://example.com/image1.jpg",
+    photoName: "图片描述1",
+  },
+  {
+    photoUrl: "https://example.com/image2.jpg",
+    photoName: "图片描述2",
+  },
+]);
+</script>
+```
+
+### 缩略图滑动功能
+
+组件支持缩略图左右滑动，当图片数量较多时，缩略图会自动滚动到可视区域：
+
+```vue
+<template>
+  <!-- 多图片展示，缩略图支持滑动 -->
+  <ImageSwiper :images="manyImages" />
+</template>
+
+<script setup>
+const manyImages = ref([
+  { photoUrl: "https://example.com/1.jpg", photoName: "图片1" },
+  { photoUrl: "https://example.com/2.jpg", photoName: "图片2" },
+  { photoUrl: "https://example.com/3.jpg", photoName: "图片3" },
+  // ... 更多图片
+  { photoUrl: "https://example.com/10.jpg", photoName: "图片10" },
+]);
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 参数           | 类型             | 默认值 | 说明                             |
+| -------------- | ---------------- | ------ | -------------------------------- |
+| borderRadius   | Number \| String | 8      | 轮播图圆角大小，数字时单位为px   |
+| height         | Number \| String | 200    | 轮播图高度，数字时单位为px       |
+| showThumbnails | Boolean          | true   | 是否显示缩略图                   |
+| images         | Array            | []     | 图片数据数组，为空时使用默认数据 |
+
+### images 数组结构
+
+```typescript
+interface ImageItem {
+  photoUrl: string; // 图片URL
+  photoName: string; // 图片名称/描述
+}
+```
+
+## 样式定制
+
+### 圆角配置示例
+
+```vue
+<!-- 小圆角 -->
+<ImageSwiper :border-radius="4" />
+
+<!-- 中等圆角 -->
+<ImageSwiper :border-radius="12" />
+
+<!-- 大圆角 -->
+<ImageSwiper :border-radius="24" />
+
+<!-- 使用rem单位 -->
+<ImageSwiper border-radius="0.5rem" />
+
+<!-- 使用百分比 -->
+<ImageSwiper border-radius="10%" />
+```
+
+### 动态圆角控制
+
+```vue
+<template>
+  <div>
+    <slider :value="radius" :min="0" :max="50" @change="handleChange" />
+    <ImageSwiper :border-radius="radius" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const radius = ref(8);
+
+const handleChange = (e) => {
+  radius.value = e.detail.value;
+};
+</script>
+```
+
+## 高级用法
+
+### 响应式配置
+
+```vue
+<template>
+  <ImageSwiper
+    :border-radius="responsiveRadius"
+    :height="responsiveHeight"
+    :show-thumbnails="showThumbnails"
+  />
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+// 根据屏幕宽度动态调整圆角和高度
+const responsiveRadius = computed(() => {
+  const screenWidth = uni.getSystemInfoSync().screenWidth;
+  return screenWidth > 750 ? 16 : 8;
+});
+
+const responsiveHeight = computed(() => {
+  const screenWidth = uni.getSystemInfoSync().screenWidth;
+  return screenWidth > 750 ? 300 : 200;
+});
+
+// 动态控制缩略图显示
+const showThumbnails = ref(true);
+</script>
+```
+
+### 动态控制示例
+
+```vue
+<template>
+  <div>
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <text>高度: {{ dynamicHeight }}px</text>
+      <slider
+        :value="dynamicHeight"
+        :min="100"
+        :max="400"
+        @change="handleHeightChange"
+      />
+
+      <div class="checkbox-wrapper">
+        <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
+        <text>显示缩略图</text>
+      </div>
+    </div>
+
+    <!-- 轮播图组件 -->
+    <ImageSwiper
+      :height="dynamicHeight"
+      :show-thumbnails="showThumbnails"
+      :border-radius="10"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const dynamicHeight = ref(200);
+const showThumbnails = ref(true);
+
+const handleHeightChange = (e) => {
+  dynamicHeight.value = e.detail.value;
+};
+
+const handleThumbnailToggle = (e) => {
+  showThumbnails.value = e.detail.value;
+};
+</script>
+```
+
+### 主题适配
+
+```vue
+<template>
+  <ImageSwiper :border-radius="themeRadius" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+// 根据主题调整圆角
+const isDarkMode = ref(false);
+const themeRadius = computed(() => {
+  return isDarkMode.value ? 12 : 8;
+});
+</script>
+```
+
+## 注意事项
+
+1. **圆角单位**：数字类型自动添加px单位，字符串类型直接使用
+2. **高度单位**：数字类型自动添加px单位，字符串类型直接使用（支持vh、rem等）
+3. **缩略图显示**：当设置 `showThumbnails` 为 `false` 时，缩略图完全隐藏
+4. **图片比例**：建议使用相同比例的图片以获得最佳显示效果
+5. **性能优化**：大量图片时建议使用懒加载
+6. **兼容性**：支持微信小程序、H5、App等平台
+
+## 更新日志
+
+### v1.3.0
+
+- ✨ 新增 `height` 属性，支持自定义轮播图高度
+- ✨ 新增 `showThumbnails` 属性，支持隐藏缩略图
+- 🎨 优化样式系统，移除硬编码高度
+- 🔧 改进计算属性，支持动态高度和缩略图控制
+- 📝 更新文档和演示示例，新增多个高级用法示例
+- 🎯 增强组件灵活性，适应更多使用场景
+
+### v1.2.0
+
+- ✨ 新增缩略图左右滑动功能
+- ✨ 新增缩略图选中状态高亮显示
+- ✨ 新增缩略图自动滚动到可视区域
+- 🎨 优化缩略图动画效果和交互体验
+- 🔧 改进主轮播图与缩略图的联动机制
+- 📝 更新文档和演示示例
+
+### v1.1.0
+
+- ✨ 新增 `borderRadius` 属性，支持自定义圆角
+- ✨ 新增 `images` 属性，支持自定义图片数据
+- 🔧 优化组件结构，使用计算属性提升性能
+- 📝 完善文档和示例
+
+### v1.0.0
+
+- 🎉 初始版本发布
+- ✨ 基础轮播图功能
+- ✨ 缩略图导航
+- ✨ 进度指示器
+
+## 技术栈
+
+- Vue 3 Composition API
+- SCSS
+- uni-app
+
+## 浏览器支持
+
+- 微信小程序
+- H5 (Chrome, Firefox, Safari, Edge)
+- App (iOS, Android)
+
+## 许可证
+
+MIT License
diff --git a/src/components/ImageSwiper/demo.vue b/src/components/ImageSwiper/demo.vue
new file mode 100644
index 0000000..a99c386
--- /dev/null
+++ b/src/components/ImageSwiper/demo.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-title">ImageSwiper 轮播图组件演示</div>
+
+    <!-- 示例1: 默认圆角 -->
+    <div class="demo-section">
+      <div class="section-title">示例1: 默认圆角 (8px)</div>
+      <imgSwiper />
+    </div>
+
+    <!-- 示例2: 无圆角 -->
+    <div class="demo-section">
+      <div class="section-title">示例2: 无圆角 (0px)</div>
+      <imgSwiper :border-radius="0" />
+    </div>
+
+    <!-- 示例3: 大圆角 -->
+    <div class="demo-section">
+      <div class="section-title">示例3: 大圆角 (20px)</div>
+      <imgSwiper :border-radius="20" />
+    </div>
+
+    <!-- 示例4: 字符串圆角 -->
+    <div class="demo-section">
+      <div class="section-title">示例4: 字符串圆角 (1rem)</div>
+      <imgSwiper border-radius="1rem" />
+    </div>
+
+    <!-- 示例5: 自定义图片数据 -->
+    <div class="demo-section">
+      <div class="section-title">示例5: 自定义图片数据 + 圆角15px</div>
+      <imgSwiper :border-radius="15" :images="customImages" />
+    </div>
+
+    <!-- 示例7: 多图片测试滑动 -->
+    <div class="demo-section">
+      <div class="section-title">示例7: 多图片测试缩略图滑动</div>
+      <imgSwiper :border-radius="10" :images="manyImages" />
+    </div>
+
+    <!-- 示例6: 动态圆角控制 -->
+    <div class="demo-section">
+      <div class="section-title">示例6: 动态圆角控制</div>
+      <div class="control-panel">
+        <text>圆角大小: {{ dynamicRadius }}px</text>
+        <slider
+          :value="dynamicRadius"
+          :min="0"
+          :max="50"
+          @change="handleRadiusChange"
+          activeColor="#007AFF"
+        />
+      </div>
+      <imgSwiper :border-radius="dynamicRadius" />
+    </div>
+
+    <!-- 示例8: 自定义高度 -->
+    <div class="demo-section">
+      <div class="section-title">示例8: 自定义高度 (300px)</div>
+      <imgSwiper :height="300" :border-radius="12" />
+    </div>
+
+    <!-- 示例9: 小高度轮播图 -->
+    <div class="demo-section">
+      <div class="section-title">示例9: 小高度轮播图 (120px)</div>
+      <imgSwiper :height="120" :border-radius="8" />
+    </div>
+
+    <!-- 示例10: 隐藏缩略图 -->
+    <div class="demo-section">
+      <div class="section-title">示例10: 隐藏缩略图</div>
+      <imgSwiper :show-thumbnails="false" :border-radius="15" />
+    </div>
+
+    <!-- 示例11: 动态高度和缩略图控制 -->
+    <div class="demo-section">
+      <div class="section-title">示例11: 动态高度和缩略图控制</div>
+      <div class="control-panel">
+        <text>高度: {{ dynamicHeight }}px</text>
+        <slider
+          :value="dynamicHeight"
+          :min="100"
+          :max="400"
+          @change="handleHeightChange"
+          activeColor="#007AFF"
+        />
+        <div class="checkbox-wrapper">
+          <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
+          <spanclass="checkbox-label">显示缩略图</text>
+        </div>
+      </div>
+      <imgSwiper
+        :height="dynamicHeight"
+        :show-thumbnails="showThumbnails"
+        :border-radius="10"
+      />
+    </div>
+
+    <!-- 示例12: 字符串高度 -->
+    <div class="demo-section">
+      <div class="section-title">示例12: 字符串高度 (50vh)</div>
+      <imgSwiper height="50vh" :border-radius="20" :show-thumbnails="false" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ImageSwiper from "./index.vue";
+
+// 动态圆角控制
+const dynamicRadius = ref(8);
+
+// 动态高度控制
+const dynamicHeight = ref(200);
+
+// 缩略图显示控制
+const showThumbnails = ref(true);
+
+// 自定义图片数据
+const customImages = ref([
+  {
+    photoUrl:
+      "https://fastly.picsum.photos/id/100/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片1",
+  },
+  {
+    photoUrl:
+      "https://fastly.picsum.photos/id/200/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片2",
+  },
+  {
+    photoUrl:
+      "https://fastly.picsum.photos/id/300/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
+    photoName: "自定义图片3",
+  },
+]);
+
+// 多图片数据，用于测试缩略图滑动
+const manyImages = ref([
+  {
+    photoUrl: "https://fastly.picsum.photos/id/10/654/400.jpg",
+    photoName: "风景1",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/20/654/400.jpg",
+    photoName: "风景2",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/30/654/400.jpg",
+    photoName: "风景3",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/40/654/400.jpg",
+    photoName: "风景4",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/50/654/400.jpg",
+    photoName: "风景5",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/60/654/400.jpg",
+    photoName: "风景6",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/70/654/400.jpg",
+    photoName: "风景7",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/80/654/400.jpg",
+    photoName: "风景8",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/90/654/400.jpg",
+    photoName: "风景9",
+  },
+  {
+    photoUrl: "https://fastly.picsum.photos/id/110/654/400.jpg",
+    photoName: "风景10",
+  },
+]);
+
+// 处理圆角变化
+const handleRadiusChange = (e) => {
+  dynamicRadius.value = e.detail.value;
+};
+
+// 处理高度变化
+const handleHeightChange = (e) => {
+  dynamicHeight.value = e.detail.value;
+};
+
+// 处理缩略图显示切换
+const handleThumbnailToggle = (e) => {
+  showThumbnails.value = e.detail.value;
+};
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 40rpx;
+  color: #333;
+}
+
+.demo-section {
+  margin-bottom: 60rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+  color: #333;
+  border-left: 6rpx solid #007aff;
+  padding-left: 16rpx;
+}
+
+.control-panel {
+  margin-bottom: 30rpx;
+  padding: 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+}
+
+.control-panel text {
+  display: block;
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+
+slider {
+  width: 100%;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.checkbox-label {
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #666;
+}
+</style>
diff --git a/src/components/ImageSwiper/images/2025-07-12_180248.jpg b/src/components/ImageSwiper/images/2025-07-12_180248.jpg
new file mode 100644
index 0000000..c108857
Binary files /dev/null and b/src/components/ImageSwiper/images/2025-07-12_180248.jpg differ
diff --git a/src/components/ImageSwiper/index.vue b/src/components/ImageSwiper/index.vue
new file mode 100644
index 0000000..5b04ba3
--- /dev/null
+++ b/src/components/ImageSwiper/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="image-swiper">
+    <swiper
+      class="swiper-box"
+      :style="swiperStyle"
+      :autoplay="false"
+      :interval="3000"
+      :duration="1000"
+      :current="active"
+      @change="handleSwiperChange"
+    >
+      <swiper-item
+        class="swiper-item"
+        v-for="(item, index) in thumbnails"
+        :key="index"
+      >
+        <img
+          class="swiper-item-image"
+          :src="item.photoUrl"
+          mode="aspectFill"
+        ></image>
+      </swiper-item>
+    </swiper>
+
+    <!-- 缩略图部分 -->
+    <div
+      v-if="showThumbnails && thumbnails.length > 0"
+      class="thumbnail-box"
+      :style="thumbnailBoxStyle"
+    >
+      <scroll-div
+        class="thumbnail-scroll"
+        scroll-x="true"
+        :scroll-left="scrollLeft"
+        :scroll-with-animation="true"
+        show-scrollbar="false"
+      >
+        <div class="thumbnail-list" v-if="thumbnails.length > 1">
+          <div
+            v-for="(thumb, index) in thumbnails"
+            :key="index"
+            :class="['thumbnail-item', { active: index === active }]"
+            :id="`thumbnail-${index}`"
+            @click="handleThumbnailClick(index)"
+          >
+            <img
+              class="thumbnail-image"
+              :src="thumb.photoUrl"
+              mode="aspectFill"
+            ></image>
+          </div>
+        </div>
+      </scroll-div>
+
+      <div class="custom-indicator" @click="handlePredivClick">
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-camera"]
+        }}</uni-icons>
+        <spanclass="custom-indicator-text">{{ thumbnails.length }}</text>
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-nav-arrow-right"]
+        }}</uni-icons>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { usePictureStore } from "@/store";
+const pictureStore = usePictureStore();
+
+// Props定义
+const props = defineProps({
+  // 轮播图圆角大小，支持数字(px)或字符串
+  borderRadius: {
+    type: [Number, String],
+    default: 8,
+  },
+  // 轮播图数据
+  images: {
+    type: Array,
+    default: () => [],
+  },
+  // 轮播图高度，支持数字(px)或字符串
+  height: {
+    type: [Number, String],
+    default: 200,
+  },
+  // 是否显示缩略图
+  showThumbnails: {
+    type: Boolean,
+    default: true,
+  },
+  // 缩略图距离底部的距离，支持数字(px)或字符串
+  thumbnailBottom: {
+    type: [Number, String],
+    default: 0,
+  },
+});
+
+const active = ref(0);
+const scrollLeft = ref(0);
+
+// 计算圆角样式
+const borderRadiusStyle = computed(() => {
+  const radius =
+    typeof props.borderRadius === "number"
+      ? `${props.borderRadius}px`
+      : props.borderRadius;
+  return {
+    borderRadius: radius,
+  };
+});
+
+// 计算轮播图样式（包含高度和圆角）
+const swiperStyle = computed(() => {
+  const radius =
+    typeof props.borderRadius === "number"
+      ? `${props.borderRadius}px`
+      : props.borderRadius;
+  const swiperHeight =
+    typeof props.height === "number" ? `${props.height}px` : props.height;
+  return {
+    borderRadius: radius,
+    height: swiperHeight,
+  };
+});
+
+// 使用传入的图片数据或默认数据
+const thumbnails = computed(() => props.images);
+
+// 计算缩略图底部距离样式
+const thumbnailBoxStyle = computed(() => {
+  const bottom =
+    typeof props.thumbnailBottom === "number"
+      ? `${props.thumbnailBottom}px`
+      : props.thumbnailBottom;
+  return {
+    bottom: bottom,
+  };
+});
+
+const handleThumbnailClick = (index) => {
+  active.value = index;
+  scrollToActiveItem(index);
+};
+
+// 滚动到选中项
+const scrollToActiveItem = async (index) => {
+  await nextTick();
+
+  // 计算每个缩略图项的宽度（包括间距）
+  const itemWidth = 58; // 48px宽度 + 10px间距
+  const containerWidth = 300; // 大概的容器宽度
+  const targetScrollLeft = Math.max(
+    0,
+    index * itemWidth - containerWidth / 2 + itemWidth / 2,
+  );
+
+  scrollLeft.value = targetScrollLeft;
+};
+
+// 监听主轮播图变化，同步缩略图滚动
+const handleSwiperChange = (e) => {
+  const currentIndex = e.detail.current;
+  active.value = currentIndex;
+  scrollToActiveItem(currentIndex);
+};
+
+const handlePredivClick = () => {
+  pictureStore.setPredivImageData(thumbnails.value);
+  uni.navigateTo({
+    url: `/pages/goods/album/index`,
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/ImageSwiper/prompt.md b/src/components/ImageSwiper/prompt.md
new file mode 100644
index 0000000..62dc411
--- /dev/null
+++ b/src/components/ImageSwiper/prompt.md
@@ -0,0 +1,15 @@
+## 图片详情组件
+
+组件名称：图片详情组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片 100%还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.image-swiper
+3、可以使用 uniapp swiper 内置的组件
+4、可以使用网络图片地址
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ImageSwiper/styles/index.scss b/src/components/ImageSwiper/styles/index.scss
new file mode 100644
index 0000000..efcc5e4
--- /dev/null
+++ b/src/components/ImageSwiper/styles/index.scss
@@ -0,0 +1,85 @@
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
+.image-swiper {
+  position: relative;
+  width: 100%;
+}
+
+.swiper-box {
+  overflow: hidden;
+  // 高度和圆角通过内联样式动态设置
+}
+
+.swiper-item .swiper-item-image {
+  width: 100%;
+  height: 100%;
+}
+
+.thumbnail-box {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.custom-indicator {
+  margin-left: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: $uni-border-radius-50px;
+  padding: 0 6px 4px 8px;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.custom-indicator-text {
+  margin: 0 4px;
+  font-size: 10px;
+  text-align: center;
+  align-items: center;
+  color: #fff;
+}
+
+.thumbnail-scroll {
+  flex: 1 1 auto;
+  min-width: 0; // 允许在flex容器中收缩以适配剩余空间
+  overflow: auto; // 防止超出thumbnail-box的宽度
+  height: 100%;
+  white-space: nowrap;
+}
+
+.thumbnail-list {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.thumbnail-item {
+  flex-shrink: 0;
+  text-align: center;
+  transition: all 0.3s ease;
+
+  &.active {
+    .thumbnail-image {
+      border: 2px solid #fff;
+    }
+  }
+}
+
+.thumbnail-item .thumbnail-image {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 1px solid #171717;
+  transition: all 0.3s ease;
+  display: block;
+}
diff --git a/src/components/LocationCard/index.vue b/src/components/LocationCard/index.vue
new file mode 100644
index 0000000..7448dcd
--- /dev/null
+++ b/src/components/LocationCard/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="store-address">
+    <div class="text-container" @click.stop="openMap">
+      <spanclass="location-label">位于 {{ orderData.oneLevelAddress }}</text>
+      <spanclass="address-text">{{ orderData.commodityAddress }}</text>
+    </div>
+
+    <div class="actions">
+      <div>
+        <div class="actions-btn" @click.stop="openMap">
+          <uni-icons type="paperplane-filled" size="16" color="#171717" />
+        </div>
+        <spanclass="actions-text">导航</text>
+      </div>
+
+      <div>
+        <div class="actions-btn" @click.stop="callPhone">
+          <uni-icons type="phone-filled" size="16" color="#171717" />
+        </div>
+        <spanclass="actions-text">电话</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+// 打开地图
+const openMap = () => {
+  const address = props.orderData.commodityAddress;
+  const latitude = Number(props.orderData.commodityLatitude);
+  const longitude = Number(props.orderData.commodityLongitude);
+
+  uni.getLocation({
+    type: "gcj02",
+    success: () => {
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
+      });
+    },
+    fail: () => {
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
+      });
+    },
+  });
+};
+
+// 拨打电话
+const getPhoneNumber = () => {
+  const o = props.orderData || {};
+  return o.commodityPhone || o.phone || o.contactPhone || "15608199221";
+};
+
+const callPhone = () => {
+  const phone = getPhoneNumber();
+  if (!phone) {
+    uni.showToast({ title: "未提供电话号码", icon: "none" });
+    return;
+  }
+  uni.makePhoneCall({ phoneNumber: String(phone) });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/LocationCard/styles/index.scss b/src/components/LocationCard/styles/index.scss
new file mode 100644
index 0000000..867bbc5
--- /dev/null
+++ b/src/components/LocationCard/styles/index.scss
@@ -0,0 +1,56 @@
+.store-address {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  padding: 12px;
+  background-color: #ffffff;
+  border-top: 1px solid #e0e0e0;
+  
+  // 左侧文本容器
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .location-label {
+    color: $text-color-800;
+    font-size: $uni-font-size-base;
+    font-weight: 500;
+  }
+
+  .address-text {
+    margin-top: 4px;
+    color: $text-color-600;
+    font-size: $uni-font-size-sm;
+    font-weight: 400;
+  }
+
+  // 右侧操作按钮组
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: 16px;
+  }
+
+  .actions-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 10px;
+    background-color: #F5F5F5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .actions-icon {
+    font-size: 16px;
+    line-height: 16px;
+  }
+
+  .actions-text {
+    font-size: $uni-font-size-sm;
+    color: $text-color-600;
+  }
+}
diff --git a/src/components/LocationInfo/index.vue b/src/components/LocationInfo/index.vue
new file mode 100644
index 0000000..4065c3e
--- /dev/null
+++ b/src/components/LocationInfo/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="store-address" @click="openMap">
+    <uni-icons type="location" size="18" color="#999" />
+    <text>{{ orderData.commodityAddress }}</text>
+    <uni-icons type="right" size="14" color="#999" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+// 打开地图
+const openMap = () => {
+  const address = props.orderData.commodityAddress;
+  const latitude = Number(props.orderData.commodityLatitude);
+  const longitude = Number(props.orderData.commodityLongitude);
+
+  uni.getLocation({
+    type: "gcj02", //返回可以用于uni.openLocation的经纬度
+    success: (res) => {
+      console.log("当前经纬度", latitude, longitude);
+
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
+        success: () => {
+          console.log("success");
+        },
+      });
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/LocationInfo/styles/index.scss b/src/components/LocationInfo/styles/index.scss
new file mode 100644
index 0000000..aa5c6ea
--- /dev/null
+++ b/src/components/LocationInfo/styles/index.scss
@@ -0,0 +1,14 @@
+.store-address {
+  display: flex;
+  align-items: center;
+  font-size: $uni-font-size-base;
+  color: $uni-text-color;
+
+  text {
+    flex: 1;
+    padding: 0 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/src/components/ModuleTitle/images/2025-07-12_222027.png b/src/components/ModuleTitle/images/2025-07-12_222027.png
new file mode 100644
index 0000000..c4c7b00
Binary files /dev/null and b/src/components/ModuleTitle/images/2025-07-12_222027.png differ
diff --git a/src/components/ModuleTitle/images/wave_icon.png b/src/components/ModuleTitle/images/wave_icon.png
new file mode 100644
index 0000000..40528f4
Binary files /dev/null and b/src/components/ModuleTitle/images/wave_icon.png differ
diff --git a/src/components/ModuleTitle/images/wave_icon_b.png b/src/components/ModuleTitle/images/wave_icon_b.png
new file mode 100644
index 0000000..5d164bb
Binary files /dev/null and b/src/components/ModuleTitle/images/wave_icon_b.png differ
diff --git a/src/components/ModuleTitle/index.vue b/src/components/ModuleTitle/index.vue
new file mode 100644
index 0000000..7898b71
--- /dev/null
+++ b/src/components/ModuleTitle/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="module-header mb-4">
+    <spanclass="module-title">{{ title }}</text>
+    <img
+      class="underline"
+      :src="isZhiNian ? indicatorSrcB : indicatorSrc"
+      mode="aspectFill"
+    />
+  </div>
+</template>
+
+<script setup>
+import { isZhiNian } from "@/constant/base";
+import indicatorSrc from "./images/wave_icon.png";
+import indicatorSrcB from "./images/wave_icon_b.png";
+
+defineProps({
+  title: {
+    type: String,
+    default: "图片详情",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/ModuleTitle/prompt.md b/src/components/ModuleTitle/prompt.md
new file mode 100644
index 0000000..c906bbc
--- /dev/null
+++ b/src/components/ModuleTitle/prompt.md
@@ -0,0 +1,14 @@
+## 图片详情组件
+
+组件名称：模块标题组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片 100%还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.module-title
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ModuleTitle/styles/index.scss b/src/components/ModuleTitle/styles/index.scss
new file mode 100644
index 0000000..bfea704
--- /dev/null
+++ b/src/components/ModuleTitle/styles/index.scss
@@ -0,0 +1,22 @@
+.module-header {
+  position: relative;
+  padding: 6px 2px 2px;
+  display: inline-block;
+}
+
+.module-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #171717;
+  position: relative;
+  z-index: 1;
+}
+
+.underline {
+  position: absolute;
+  bottom: 3px;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  z-index: 0;
+}
diff --git a/src/components/Privacy/index.vue b/src/components/Privacy/index.vue
new file mode 100644
index 0000000..6f4892f
--- /dev/null
+++ b/src/components/Privacy/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="privacy" v-if="showPrivacy">
+    <div class="content">
+      <div class="title">隐私保护指引</div>
+      <div class="des">
+        请您仔细阅读并充分理解<text
+          class="link"
+          @click="handleOpenPrivacyContract"
+          >{{ privacyContractName }}</text
+        >
+        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<spanclass="cancel"
+          >如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
+        >
+      </div>
+
+      <div class="btns">
+        <button class="reject" @click="handleDisagree">拒绝</button>
+        <button
+          class="agree"
+          open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
+        >
+          同意
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+
+const showPrivacy = ref(false);
+const privacyContractName = ref("隐私保护指引");
+
+onShow(() => {
+  // 条件编译微信小程序
+  // #ifdef MP-WEIXIN
+
+  wx.getPrivacySetting({
+    success: (res) => {
+      console.log("cj隐私配置", res);
+      if (res.errMsg == "getPrivacySetting:ok") {
+        privacyContractName.value = res.privacyContractName;
+        showPrivacy.value = !!res.needAuthorization;
+      }
+    },
+  });
+  // #endif
+
+  // 条件编译抖音小程序
+  // #ifdef MP-TOUTIAO
+  uni.getPrivacySetting({
+    success: (res) => {
+      console.log(res);
+      showPrivacy.value = !!res.needAuthorization;
+    },
+  });
+  // #endif
+});
+
+// 拒绝
+const handleDisagree = () => {
+  showPrivacy.value = false;
+};
+
+// 同意
+const handleAgreePrivacyAuthorization = () => {
+  showPrivacy.value = false;
+};
+
+// 打开隐私保护指引
+const handleOpenPrivacyContract = () => {
+  // 条件编译微信小程序
+  // #ifdef MP-WEIXIN
+  wx.openPrivacyContract({
+    fail: () => {},
+  });
+  // #endif
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/Privacy/styles/index.scss b/src/components/Privacy/styles/index.scss
new file mode 100644
index 0000000..d0ecc42
--- /dev/null
+++ b/src/components/Privacy/styles/index.scss
@@ -0,0 +1,66 @@
+.privacy {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: end;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #000;
+  padding-bottom: 20rpx;
+}
+
+.content {
+  position: relative;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 20px 20px 0 0;
+}
+
+.des {
+  line-height: 21px;
+}
+
+.link {
+  color: #007aff;
+}
+
+.btns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0 40px;
+}
+
+.reject,
+.agree {
+  border-radius: $uni-border-radius-50px;
+  width: 45%;
+  border: none;
+  font-size: 18px;
+  margin: 0;
+
+  &::after {
+    border: none;
+  }
+}
+
+.reject {
+  color: #000;
+  background-color: #f5f5f5;
+  border-radius: $uni-border-radius-50px;
+}
+
+.agree {
+  color: #fff;
+  background-color: #007aff;
+}
diff --git a/src/components/Qrcode/index.vue b/src/components/Qrcode/index.vue
new file mode 100644
index 0000000..0b01c54
--- /dev/null
+++ b/src/components/Qrcode/index.vue
@@ -0,0 +1,271 @@
+<template xlang="wxml" minapp="mpvue">
+  <div class="tki-qrcode">
+    <!-- #ifndef MP-ALIPAY -->
+    <canvas
+      class="tki-qrcode-canvas"
+      :canvas-id="cid"
+      :style="{ width: cpSize + 'px', height: cpSize + 'px' }"
+    />
+    <!-- #endif -->
+    <!-- #ifdef MP-ALIPAY -->
+    <canvas
+      :id="cid"
+      :width="cpSize"
+      :height="cpSize"
+      class="tki-qrcode-canvas"
+    />
+    <!-- #endif -->
+    <img
+      v-show="show"
+      :src="result"
+      :style="{ width: cpSize + 'px', height: cpSize + 'px' }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
+import QRCode from "./qrcode.js";
+
+let qrcode;
+
+// 定义props
+const props = defineProps({
+  cid: {
+    type: String,
+    default: "tki-qrcode-canvas",
+  },
+  size: {
+    type: Number,
+    default: 200,
+  },
+  unit: {
+    type: String,
+    default: "upx",
+  },
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  val: {
+    type: String,
+    default: "",
+  },
+  background: {
+    type: String,
+    default: "#ffffff",
+  },
+  foreground: {
+    type: String,
+    default: "#000000",
+  },
+  pdground: {
+    type: String,
+    default: "#000000",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  iconSize: {
+    type: Number,
+    default: 40,
+  },
+  lv: {
+    type: Number,
+    default: 3,
+  },
+  onval: {
+    type: Boolean,
+    default: false,
+  },
+  loadMake: {
+    type: Boolean,
+    default: false,
+  },
+  usingComponents: {
+    type: Boolean,
+    default: true,
+  },
+  showLoading: {
+    type: Boolean,
+    default: true,
+  },
+  loadingText: {
+    type: String,
+    default: "",
+  },
+});
+
+// 定义emits
+const emit = defineEmits(["result"]);
+
+// 获取当前实例
+const instance = getCurrentInstance();
+
+// 创建一个安全的上下文对象
+const getContext = () => {
+  return instance?.proxy || instance?.ctx || {};
+};
+
+// 响应式数据
+const result = ref("");
+
+// 计算属性
+const cpSize = computed(() => {
+  if (props.unit === "upx") {
+    return uni.upx2px(props.size);
+  } else {
+    return props.size;
+  }
+});
+
+// 工具函数
+const _empty = (v) => {
+  let tp = typeof v;
+  let rt = false;
+  if (tp === "number" && String(v) === "") {
+    rt = true;
+  } else if (tp === "undefined") {
+    rt = true;
+  } else if (tp === "object") {
+    if (JSON.stringify(v) === "{}" || JSON.stringify(v) === "[]" || v === null)
+      rt = true;
+  } else if (tp === "string") {
+    if (
+      v === "" ||
+      v === "undefined" ||
+      v === "null" ||
+      v === "{}" ||
+      v === "[]"
+    )
+      rt = true;
+  } else if (tp === "function") {
+    rt = false;
+  }
+  return rt;
+};
+
+// 方法定义
+const _makeCode = () => {
+  console.log("开始生成二维码，内容:", props.val, "大小:", cpSize.value);
+  if (!_empty(props.val)) {
+    try {
+      qrcode = new QRCode({
+        context: getContext(), // 上下文环境
+        canvasId: props.cid, // canvas-id
+        usingComponents: props.usingComponents, // 是否是自定义组件
+        showLoading: props.showLoading, // 是否显示loading
+        loadingText: props.loadingText, // loading文字
+        text: props.val, // 生成内容
+        size: cpSize.value, // 二维码大小
+        background: props.background, // 背景色
+        foreground: props.foreground, // 前景色
+        pdground: props.pdground, // 定位角点颜色
+        correctLevel: props.lv, // 容错级别
+        image: props.icon, // 二维码图标
+        imageSize: props.iconSize, // 二维码图标大小
+        cbResult: function (res) {
+          // 生成二维码的回调
+          console.log("二维码生成完成:", res);
+          _result(res);
+        },
+      });
+    } catch (error) {
+      console.error("二维码生成失败:", error);
+    }
+  } else {
+    console.log("二维码内容为空");
+    uni.showToast({
+      title: "二维码内容不能为空",
+      icon: "none",
+      duration: 2000,
+    });
+  }
+};
+
+const _clearCode = () => {
+  _result("");
+  if (qrcode) {
+    qrcode.clear();
+  }
+};
+
+const _saveCode = () => {
+  if (result.value !== "") {
+    uni.saveImageToPhotosAlbum({
+      filePath: result.value,
+      success: function () {
+        uni.showToast({
+          title: "二维码保存成功",
+          icon: "success",
+          duration: 2000,
+        });
+      },
+    });
+  }
+};
+
+const _result = (res) => {
+  result.value = res;
+  emit("result", res);
+};
+
+// 监听器
+watch(
+  () => props.size,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && !_empty(newVal)) {
+      if (!_empty(props.val)) {
+        setTimeout(() => {
+          _makeCode();
+        }, 100);
+      }
+    }
+  },
+);
+
+watch(
+  () => props.val,
+  (newVal, oldVal) => {
+    if (props.onval) {
+      if (newVal !== oldVal && !_empty(newVal)) {
+        setTimeout(() => {
+          _makeCode();
+        }, 0);
+      }
+    }
+  },
+);
+
+// 生命周期
+onMounted(() => {
+  if (props.loadMake) {
+    if (!_empty(props.val)) {
+      setTimeout(() => {
+        _makeCode();
+      }, 0);
+    }
+  }
+});
+
+// 暴露方法给父组件
+defineExpose({
+  _makeCode,
+  _clearCode,
+  _saveCode,
+});
+</script>
+
+<style>
+.tki-qrcode {
+  position: relative;
+}
+
+.tki-qrcode-canvas {
+  position: fixed;
+  top: -99999upx;
+  left: -99999upx;
+  z-index: -99999;
+}
+</style>
diff --git a/src/components/Qrcode/qrcode.js b/src/components/Qrcode/qrcode.js
new file mode 100644
index 0000000..6ea6553
--- /dev/null
+++ b/src/components/Qrcode/qrcode.js
@@ -0,0 +1,1201 @@
+let QRCode = {};
+(function () {
+    /**
+     * 获取单个字符的utf8编码
+     * unicode BMP平面约65535个字符
+     * @param {num} code
+     * return {array}
+     */
+    function unicodeFormat8(code) {
+        // 1 byte
+        var c0, c1, c2;
+        if (code < 128) {
+            return [code];
+            // 2 bytes
+        } else if (code < 2048) {
+            c0 = 192 + (code >> 6);
+            c1 = 128 + (code & 63);
+            return [c0, c1];
+            // 3 bytes
+        } else {
+            c0 = 224 + (code >> 12);
+            c1 = 128 + (code >> 6 & 63);
+            c2 = 128 + (code & 63);
+            return [c0, c1, c2];
+        }
+    }
+    /**
+     * 获取字符串的utf8编码字节串
+     * @param {string} string
+     * @return {array}
+     */
+    function getUTF8Bytes(string) {
+        var utf8codes = [];
+        for (var i = 0; i < string.length; i++) {
+            var code = string.charCodeAt(i);
+            var utf8 = unicodeFormat8(code);
+            for (var j = 0; j < utf8.length; j++) {
+                utf8codes.push(utf8[j]);
+            }
+        }
+        return utf8codes;
+    }
+    /**
+     * 二维码算法实现
+     * @param {string} data              要编码的信息字符串
+     * @param {num} errorCorrectLevel 纠错等级
+     */
+    function QRCodeAlg(data, errorCorrectLevel) {
+        this.typeNumber = -1; //版本
+        this.errorCorrectLevel = errorCorrectLevel;
+        this.modules = null; //二维矩阵，存放最终结果
+        this.moduleCount = 0; //矩阵大小
+        this.dataCache = null; //数据缓存
+        this.rsBlocks = null; //版本数据信息
+        this.totalDataCount = -1; //可使用的数据量
+        this.data = data;
+        this.utf8bytes = getUTF8Bytes(data);
+        this.make();
+    }
+    QRCodeAlg.prototype = {
+        constructor: QRCodeAlg,
+        /**
+         * 获取二维码矩阵大小
+         * @return {num} 矩阵大小
+         */
+        getModuleCount: function () {
+            return this.moduleCount;
+        },
+        /**
+         * 编码
+         */
+        make: function () {
+            this.getRightType();
+            this.dataCache = this.createData();
+            this.createQrcode();
+        },
+        /**
+         * 设置二位矩阵功能图形
+         * @param  {bool} test 表示是否在寻找最好掩膜阶段
+         * @param  {num} maskPattern 掩膜的版本
+         */
+        makeImpl: function (maskPattern) {
+            this.moduleCount = this.typeNumber * 4 + 17;
+            this.modules = new Array(this.moduleCount);
+            for (var row = 0; row < this.moduleCount; row++) {
+                this.modules[row] = new Array(this.moduleCount);
+            }
+            this.setupPositionProbePattern(0, 0);
+            this.setupPositionProbePattern(this.moduleCount - 7, 0);
+            this.setupPositionProbePattern(0, this.moduleCount - 7);
+            this.setupPositionAdjustPattern();
+            this.setupTimingPattern();
+            this.setupTypeInfo(true, maskPattern);
+            if (this.typeNumber >= 7) {
+                this.setupTypeNumber(true);
+            }
+            this.mapData(this.dataCache, maskPattern);
+        },
+        /**
+         * 设置二维码的位置探测图形
+         * @param  {num} row 探测图形的中心横坐标
+         * @param  {num} col 探测图形的中心纵坐标
+         */
+        setupPositionProbePattern: function (row, col) {
+            for (var r = -1; r <= 7; r++) {
+                if (row + r <= -1 || this.moduleCount <= row + r) continue;
+                for (var c = -1; c <= 7; c++) {
+                    if (col + c <= -1 || this.moduleCount <= col + c) continue;
+                    if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (2 <= r && r <= 4 && 2 <= c && c <= 4)) {
+                        this.modules[row + r][col + c] = true;
+                    } else {
+                        this.modules[row + r][col + c] = false;
+                    }
+                }
+            }
+        },
+        /**
+         * 创建二维码
+         * @return {[type]} [description]
+         */
+        createQrcode: function () {
+            var minLostPoint = 0;
+            var pattern = 0;
+            var bestModules = null;
+            for (var i = 0; i < 8; i++) {
+                this.makeImpl(i);
+                var lostPoint = QRUtil.getLostPoint(this);
+                if (i == 0 || minLostPoint > lostPoint) {
+                    minLostPoint = lostPoint;
+                    pattern = i;
+                    bestModules = this.modules;
+                }
+            }
+            this.modules = bestModules;
+            this.setupTypeInfo(false, pattern);
+            if (this.typeNumber >= 7) {
+                this.setupTypeNumber(false);
+            }
+        },
+        /**
+         * 设置定位图形
+         * @return {[type]} [description]
+         */
+        setupTimingPattern: function () {
+            for (var r = 8; r < this.moduleCount - 8; r++) {
+                if (this.modules[r][6] != null) {
+                    continue;
+                }
+                this.modules[r][6] = (r % 2 == 0);
+                if (this.modules[6][r] != null) {
+                    continue;
+                }
+                this.modules[6][r] = (r % 2 == 0);
+            }
+        },
+        /**
+         * 设置矫正图形
+         * @return {[type]} [description]
+         */
+        setupPositionAdjustPattern: function () {
+            var pos = QRUtil.getPatternPosition(this.typeNumber);
+            for (var i = 0; i < pos.length; i++) {
+                for (var j = 0; j < pos.length; j++) {
+                    var row = pos[i];
+                    var col = pos[j];
+                    if (this.modules[row][col] != null) {
+                        continue;
+                    }
+                    for (var r = -2; r <= 2; r++) {
+                        for (var c = -2; c <= 2; c++) {
+                            if (r == -2 || r == 2 || c == -2 || c == 2 || (r == 0 && c == 0)) {
+                                this.modules[row + r][col + c] = true;
+                            } else {
+                                this.modules[row + r][col + c] = false;
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        /**
+         * 设置版本信息（7以上版本才有）
+         * @param  {bool} test 是否处于判断最佳掩膜阶段
+         * @return {[type]}      [description]
+         */
+        setupTypeNumber: function (test) {
+            var bits = QRUtil.getBCHTypeNumber(this.typeNumber);
+            for (var i = 0; i < 18; i++) {
+                var mod = (!test && ((bits >> i) & 1) == 1);
+                this.modules[Math.floor(i / 3)][i % 3 + this.moduleCount - 8 - 3] = mod;
+                this.modules[i % 3 + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod;
+            }
+        },
+        /**
+         * 设置格式信息（纠错等级和掩膜版本）
+         * @param  {bool} test
+         * @param  {num} maskPattern 掩膜版本
+         * @return {}
+         */
+        setupTypeInfo: function (test, maskPattern) {
+            var data = (QRErrorCorrectLevel[this.errorCorrectLevel] << 3) | maskPattern;
+            var bits = QRUtil.getBCHTypeInfo(data);
+            // vertical
+            for (var i = 0; i < 15; i++) {
+                var mod = (!test && ((bits >> i) & 1) == 1);
+                if (i < 6) {
+                    this.modules[i][8] = mod;
+                } else if (i < 8) {
+                    this.modules[i + 1][8] = mod;
+                } else {
+                    this.modules[this.moduleCount - 15 + i][8] = mod;
+                }
+                // horizontal
+                var mod = (!test && ((bits >> i) & 1) == 1);
+                if (i < 8) {
+                    this.modules[8][this.moduleCount - i - 1] = mod;
+                } else if (i < 9) {
+                    this.modules[8][15 - i - 1 + 1] = mod;
+                } else {
+                    this.modules[8][15 - i - 1] = mod;
+                }
+            }
+            // fixed module
+            this.modules[this.moduleCount - 8][8] = (!test);
+        },
+        /**
+         * 数据编码
+         * @return {[type]} [description]
+         */
+        createData: function () {
+            var buffer = new QRBitBuffer();
+            var lengthBits = this.typeNumber > 9 ? 16 : 8;
+            buffer.put(4, 4); //添加模式
+            buffer.put(this.utf8bytes.length, lengthBits);
+            for (var i = 0, l = this.utf8bytes.length; i < l; i++) {
+                buffer.put(this.utf8bytes[i], 8);
+            }
+            if (buffer.length + 4 <= this.totalDataCount * 8) {
+                buffer.put(0, 4);
+            }
+            // padding
+            while (buffer.length % 8 != 0) {
+                buffer.putBit(false);
+            }
+            // padding
+            while (true) {
+                if (buffer.length >= this.totalDataCount * 8) {
+                    break;
+                }
+                buffer.put(QRCodeAlg.PAD0, 8);
+                if (buffer.length >= this.totalDataCount * 8) {
+                    break;
+                }
+                buffer.put(QRCodeAlg.PAD1, 8);
+            }
+            return this.createBytes(buffer);
+        },
+        /**
+         * 纠错码编码
+         * @param  {buffer} buffer 数据编码
+         * @return {[type]}
+         */
+        createBytes: function (buffer) {
+            var offset = 0;
+            var maxDcCount = 0;
+            var maxEcCount = 0;
+            var length = this.rsBlock.length / 3;
+            var rsBlocks = new Array();
+            for (var i = 0; i < length; i++) {
+                var count = this.rsBlock[i * 3 + 0];
+                var totalCount = this.rsBlock[i * 3 + 1];
+                var dataCount = this.rsBlock[i * 3 + 2];
+                for (var j = 0; j < count; j++) {
+                    rsBlocks.push([dataCount, totalCount]);
+                }
+            }
+            var dcdata = new Array(rsBlocks.length);
+            var ecdata = new Array(rsBlocks.length);
+            for (var r = 0; r < rsBlocks.length; r++) {
+                var dcCount = rsBlocks[r][0];
+                var ecCount = rsBlocks[r][1] - dcCount;
+                maxDcCount = Math.max(maxDcCount, dcCount);
+                maxEcCount = Math.max(maxEcCount, ecCount);
+                dcdata[r] = new Array(dcCount);
+                for (var i = 0; i < dcdata[r].length; i++) {
+                    dcdata[r][i] = 0xff & buffer.buffer[i + offset];
+                }
+                offset += dcCount;
+                var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount);
+                var rawPoly = new QRPolynomial(dcdata[r], rsPoly.getLength() - 1);
+                var modPoly = rawPoly.mod(rsPoly);
+                ecdata[r] = new Array(rsPoly.getLength() - 1);
+                for (var i = 0; i < ecdata[r].length; i++) {
+                    var modIndex = i + modPoly.getLength() - ecdata[r].length;
+                    ecdata[r][i] = (modIndex >= 0) ? modPoly.get(modIndex) : 0;
+                }
+            }
+            var data = new Array(this.totalDataCount);
+            var index = 0;
+            for (var i = 0; i < maxDcCount; i++) {
+                for (var r = 0; r < rsBlocks.length; r++) {
+                    if (i < dcdata[r].length) {
+                        data[index++] = dcdata[r][i];
+                    }
+                }
+            }
+            for (var i = 0; i < maxEcCount; i++) {
+                for (var r = 0; r < rsBlocks.length; r++) {
+                    if (i < ecdata[r].length) {
+                        data[index++] = ecdata[r][i];
+                    }
+                }
+            }
+            return data;
+
+        },
+        /**
+         * 布置模块，构建最终信息
+         * @param  {} data
+         * @param  {} maskPattern
+         * @return {}
+         */
+        mapData: function (data, maskPattern) {
+            var inc = -1;
+            var row = this.moduleCount - 1;
+            var bitIndex = 7;
+            var byteIndex = 0;
+            for (var col = this.moduleCount - 1; col > 0; col -= 2) {
+                if (col == 6) col--;
+                while (true) {
+                    for (var c = 0; c < 2; c++) {
+                        if (this.modules[row][col - c] == null) {
+                            var dark = false;
+                            if (byteIndex < data.length) {
+                                dark = (((data[byteIndex] >>> bitIndex) & 1) == 1);
+                            }
+                            var mask = QRUtil.getMask(maskPattern, row, col - c);
+                            if (mask) {
+                                dark = !dark;
+                            }
+                            this.modules[row][col - c] = dark;
+                            bitIndex--;
+                            if (bitIndex == -1) {
+                                byteIndex++;
+                                bitIndex = 7;
+                            }
+                        }
+                    }
+                    row += inc;
+                    if (row < 0 || this.moduleCount <= row) {
+                        row -= inc;
+                        inc = -inc;
+                        break;
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * 填充字段
+     */
+    QRCodeAlg.PAD0 = 0xEC;
+    QRCodeAlg.PAD1 = 0x11;
+    //---------------------------------------------------------------------
+    // 纠错等级对应的编码
+    //---------------------------------------------------------------------
+    var QRErrorCorrectLevel = [1, 0, 3, 2];
+    //---------------------------------------------------------------------
+    // 掩膜版本
+    //---------------------------------------------------------------------
+    var QRMaskPattern = {
+        PATTERN000: 0,
+        PATTERN001: 1,
+        PATTERN010: 2,
+        PATTERN011: 3,
+        PATTERN100: 4,
+        PATTERN101: 5,
+        PATTERN110: 6,
+        PATTERN111: 7
+    };
+    //---------------------------------------------------------------------
+    // 工具类
+    //---------------------------------------------------------------------
+    var QRUtil = {
+        /*
+        每个版本矫正图形的位置
+         */
+        PATTERN_POSITION_TABLE: [
+            [],
+            [6, 18],
+            [6, 22],
+            [6, 26],
+            [6, 30],
+            [6, 34],
+            [6, 22, 38],
+            [6, 24, 42],
+            [6, 26, 46],
+            [6, 28, 50],
+            [6, 30, 54],
+            [6, 32, 58],
+            [6, 34, 62],
+            [6, 26, 46, 66],
+            [6, 26, 48, 70],
+            [6, 26, 50, 74],
+            [6, 30, 54, 78],
+            [6, 30, 56, 82],
+            [6, 30, 58, 86],
+            [6, 34, 62, 90],
+            [6, 28, 50, 72, 94],
+            [6, 26, 50, 74, 98],
+            [6, 30, 54, 78, 102],
+            [6, 28, 54, 80, 106],
+            [6, 32, 58, 84, 110],
+            [6, 30, 58, 86, 114],
+            [6, 34, 62, 90, 118],
+            [6, 26, 50, 74, 98, 122],
+            [6, 30, 54, 78, 102, 126],
+            [6, 26, 52, 78, 104, 130],
+            [6, 30, 56, 82, 108, 134],
+            [6, 34, 60, 86, 112, 138],
+            [6, 30, 58, 86, 114, 142],
+            [6, 34, 62, 90, 118, 146],
+            [6, 30, 54, 78, 102, 126, 150],
+            [6, 24, 50, 76, 102, 128, 154],
+            [6, 28, 54, 80, 106, 132, 158],
+            [6, 32, 58, 84, 110, 136, 162],
+            [6, 26, 54, 82, 110, 138, 166],
+            [6, 30, 58, 86, 114, 142, 170]
+        ],
+        G15: (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0),
+        G18: (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0),
+        G15_MASK: (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1),
+        /*
+        BCH编码格式信息
+         */
+        getBCHTypeInfo: function (data) {
+            var d = data << 10;
+            while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15) >= 0) {
+                d ^= (QRUtil.G15 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15)));
+            }
+            return ((data << 10) | d) ^ QRUtil.G15_MASK;
+        },
+        /*
+        BCH编码版本信息
+         */
+        getBCHTypeNumber: function (data) {
+            var d = data << 12;
+            while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18) >= 0) {
+                d ^= (QRUtil.G18 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18)));
+            }
+            return (data << 12) | d;
+        },
+        /*
+        获取BCH位信息
+         */
+        getBCHDigit: function (data) {
+            var digit = 0;
+            while (data != 0) {
+                digit++;
+                data >>>= 1;
+            }
+            return digit;
+        },
+        /*
+        获取版本对应的矫正图形位置
+         */
+        getPatternPosition: function (typeNumber) {
+            return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1];
+        },
+        /*
+        掩膜算法
+         */
+        getMask: function (maskPattern, i, j) {
+            switch (maskPattern) {
+                case QRMaskPattern.PATTERN000:
+                    return (i + j) % 2 == 0;
+                case QRMaskPattern.PATTERN001:
+                    return i % 2 == 0;
+                case QRMaskPattern.PATTERN010:
+                    return j % 3 == 0;
+                case QRMaskPattern.PATTERN011:
+                    return (i + j) % 3 == 0;
+                case QRMaskPattern.PATTERN100:
+                    return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0;
+                case QRMaskPattern.PATTERN101:
+                    return (i * j) % 2 + (i * j) % 3 == 0;
+                case QRMaskPattern.PATTERN110:
+                    return ((i * j) % 2 + (i * j) % 3) % 2 == 0;
+                case QRMaskPattern.PATTERN111:
+                    return ((i * j) % 3 + (i + j) % 2) % 2 == 0;
+                default:
+                    throw new Error("bad maskPattern:" + maskPattern);
+            }
+        },
+        /*
+        获取RS的纠错多项式
+         */
+        getErrorCorrectPolynomial: function (errorCorrectLength) {
+            var a = new QRPolynomial([1], 0);
+            for (var i = 0; i < errorCorrectLength; i++) {
+                a = a.multiply(new QRPolynomial([1, QRMath.gexp(i)], 0));
+            }
+            return a;
+        },
+        /*
+        获取评价
+         */
+        getLostPoint: function (qrCode) {
+            var moduleCount = qrCode.getModuleCount(),
+                lostPoint = 0,
+                darkCount = 0;
+            for (var row = 0; row < moduleCount; row++) {
+                var sameCount = 0;
+                var head = qrCode.modules[row][0];
+                for (var col = 0; col < moduleCount; col++) {
+                    var current = qrCode.modules[row][col];
+                    //level 3 评价
+                    if (col < moduleCount - 6) {
+                        if (current && !qrCode.modules[row][col + 1] && qrCode.modules[row][col + 2] && qrCode.modules[row][col + 3] && qrCode.modules[row][col + 4] && !qrCode.modules[row][col + 5] && qrCode.modules[row][col + 6]) {
+                            if (col < moduleCount - 10) {
+                                if (qrCode.modules[row][col + 7] && qrCode.modules[row][col + 8] && qrCode.modules[row][col + 9] && qrCode.modules[row][col + 10]) {
+                                    lostPoint += 40;
+                                }
+                            } else if (col > 3) {
+                                if (qrCode.modules[row][col - 1] && qrCode.modules[row][col - 2] && qrCode.modules[row][col - 3] && qrCode.modules[row][col - 4]) {
+                                    lostPoint += 40;
+                                }
+                            }
+                        }
+                    }
+                    //level 2 评价
+                    if ((row < moduleCount - 1) && (col < moduleCount - 1)) {
+                        var count = 0;
+                        if (current) count++;
+                        if (qrCode.modules[row + 1][col]) count++;
+                        if (qrCode.modules[row][col + 1]) count++;
+                        if (qrCode.modules[row + 1][col + 1]) count++;
+                        if (count == 0 || count == 4) {
+                            lostPoint += 3;
+                        }
+                    }
+                    //level 1 评价
+                    if (head ^ current) {
+                        sameCount++;
+                    } else {
+                        head = current;
+                        if (sameCount >= 5) {
+                            lostPoint += (3 + sameCount - 5);
+                        }
+                        sameCount = 1;
+                    }
+                    //level 4 评价
+                    if (current) {
+                        darkCount++;
+                    }
+                }
+            }
+            for (var col = 0; col < moduleCount; col++) {
+                var sameCount = 0;
+                var head = qrCode.modules[0][col];
+                for (var row = 0; row < moduleCount; row++) {
+                    var current = qrCode.modules[row][col];
+                    //level 3 评价
+                    if (row < moduleCount - 6) {
+                        if (current && !qrCode.modules[row + 1][col] && qrCode.modules[row + 2][col] && qrCode.modules[row + 3][col] && qrCode.modules[row + 4][col] && !qrCode.modules[row + 5][col] && qrCode.modules[row + 6][col]) {
+                            if (row < moduleCount - 10) {
+                                if (qrCode.modules[row + 7][col] && qrCode.modules[row + 8][col] && qrCode.modules[row + 9][col] && qrCode.modules[row + 10][col]) {
+                                    lostPoint += 40;
+                                }
+                            } else if (row > 3) {
+                                if (qrCode.modules[row - 1][col] && qrCode.modules[row - 2][col] && qrCode.modules[row - 3][col] && qrCode.modules[row - 4][col]) {
+                                    lostPoint += 40;
+                                }
+                            }
+                        }
+                    }
+                    //level 1 评价
+                    if (head ^ current) {
+                        sameCount++;
+                    } else {
+                        head = current;
+                        if (sameCount >= 5) {
+                            lostPoint += (3 + sameCount - 5);
+                        }
+                        sameCount = 1;
+                    }
+                }
+            }
+            // LEVEL4
+            var ratio = Math.abs(100 * darkCount / moduleCount / moduleCount - 50) / 5;
+            lostPoint += ratio * 10;
+            return lostPoint;
+        }
+
+    };
+    //---------------------------------------------------------------------
+    // QRMath使用的数学工具
+    //---------------------------------------------------------------------
+    var QRMath = {
+        /*
+        将n转化为a^m
+         */
+        glog: function (n) {
+            if (n < 1) {
+                throw new Error("glog(" + n + ")");
+            }
+            return QRMath.LOG_TABLE[n];
+        },
+        /*
+        将a^m转化为n
+         */
+        gexp: function (n) {
+            while (n < 0) {
+                n += 255;
+            }
+            while (n >= 256) {
+                n -= 255;
+            }
+            return QRMath.EXP_TABLE[n];
+        },
+        EXP_TABLE: new Array(256),
+        LOG_TABLE: new Array(256)
+
+    };
+    for (var i = 0; i < 8; i++) {
+        QRMath.EXP_TABLE[i] = 1 << i;
+    }
+    for (var i = 8; i < 256; i++) {
+        QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath.EXP_TABLE[i - 8];
+    }
+    for (var i = 0; i < 255; i++) {
+        QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i;
+    }
+    //---------------------------------------------------------------------
+    // QRPolynomial 多项式
+    //---------------------------------------------------------------------
+    /**
+     * 多项式类
+     * @param {Array} num   系数
+     * @param {num} shift a^shift
+     */
+    function QRPolynomial(num, shift) {
+        if (num.length == undefined) {
+            throw new Error(num.length + "/" + shift);
+        }
+        var offset = 0;
+        while (offset < num.length && num[offset] == 0) {
+            offset++;
+        }
+        this.num = new Array(num.length - offset + shift);
+        for (var i = 0; i < num.length - offset; i++) {
+            this.num[i] = num[i + offset];
+        }
+    }
+    QRPolynomial.prototype = {
+        get: function (index) {
+            return this.num[index];
+        },
+        getLength: function () {
+            return this.num.length;
+        },
+        /**
+         * 多项式乘法
+         * @param  {QRPolynomial} e 被乘多项式
+         * @return {[type]}   [description]
+         */
+        multiply: function (e) {
+            var num = new Array(this.getLength() + e.getLength() - 1);
+            for (var i = 0; i < this.getLength(); i++) {
+                for (var j = 0; j < e.getLength(); j++) {
+                    num[i + j] ^= QRMath.gexp(QRMath.glog(this.get(i)) + QRMath.glog(e.get(j)));
+                }
+            }
+            return new QRPolynomial(num, 0);
+        },
+        /**
+         * 多项式模运算
+         * @param  {QRPolynomial} e 模多项式
+         * @return {}
+         */
+        mod: function (e) {
+            var tl = this.getLength(),
+                el = e.getLength();
+            if (tl - el < 0) {
+                return this;
+            }
+            var num = new Array(tl);
+            for (var i = 0; i < tl; i++) {
+                num[i] = this.get(i);
+            }
+            while (num.length >= el) {
+                var ratio = QRMath.glog(num[0]) - QRMath.glog(e.get(0));
+
+                for (var i = 0; i < e.getLength(); i++) {
+                    num[i] ^= QRMath.gexp(QRMath.glog(e.get(i)) + ratio);
+                }
+                while (num[0] == 0) {
+                    num.shift();
+                }
+            }
+            return new QRPolynomial(num, 0);
+        }
+    };
+
+    //---------------------------------------------------------------------
+    // RS_BLOCK_TABLE
+    //---------------------------------------------------------------------
+    /*
+    二维码各个版本信息[块数, 每块中的数据块数, 每块中的信息块数]
+     */
+    var RS_BLOCK_TABLE = [
+        // L
+        // M
+        // Q
+        // H
+        // 1
+        [1, 26, 19],
+        [1, 26, 16],
+        [1, 26, 13],
+        [1, 26, 9],
+
+        // 2
+        [1, 44, 34],
+        [1, 44, 28],
+        [1, 44, 22],
+        [1, 44, 16],
+
+        // 3
+        [1, 70, 55],
+        [1, 70, 44],
+        [2, 35, 17],
+        [2, 35, 13],
+
+        // 4
+        [1, 100, 80],
+        [2, 50, 32],
+        [2, 50, 24],
+        [4, 25, 9],
+
+        // 5
+        [1, 134, 108],
+        [2, 67, 43],
+        [2, 33, 15, 2, 34, 16],
+        [2, 33, 11, 2, 34, 12],
+
+        // 6
+        [2, 86, 68],
+        [4, 43, 27],
+        [4, 43, 19],
+        [4, 43, 15],
+
+        // 7
+        [2, 98, 78],
+        [4, 49, 31],
+        [2, 32, 14, 4, 33, 15],
+        [4, 39, 13, 1, 40, 14],
+
+        // 8
+        [2, 121, 97],
+        [2, 60, 38, 2, 61, 39],
+        [4, 40, 18, 2, 41, 19],
+        [4, 40, 14, 2, 41, 15],
+
+        // 9
+        [2, 146, 116],
+        [3, 58, 36, 2, 59, 37],
+        [4, 36, 16, 4, 37, 17],
+        [4, 36, 12, 4, 37, 13],
+
+        // 10
+        [2, 86, 68, 2, 87, 69],
+        [4, 69, 43, 1, 70, 44],
+        [6, 43, 19, 2, 44, 20],
+        [6, 43, 15, 2, 44, 16],
+
+        // 11
+        [4, 101, 81],
+        [1, 80, 50, 4, 81, 51],
+        [4, 50, 22, 4, 51, 23],
+        [3, 36, 12, 8, 37, 13],
+
+        // 12
+        [2, 116, 92, 2, 117, 93],
+        [6, 58, 36, 2, 59, 37],
+        [4, 46, 20, 6, 47, 21],
+        [7, 42, 14, 4, 43, 15],
+
+        // 13
+        [4, 133, 107],
+        [8, 59, 37, 1, 60, 38],
+        [8, 44, 20, 4, 45, 21],
+        [12, 33, 11, 4, 34, 12],
+
+        // 14
+        [3, 145, 115, 1, 146, 116],
+        [4, 64, 40, 5, 65, 41],
+        [11, 36, 16, 5, 37, 17],
+        [11, 36, 12, 5, 37, 13],
+
+        // 15
+        [5, 109, 87, 1, 110, 88],
+        [5, 65, 41, 5, 66, 42],
+        [5, 54, 24, 7, 55, 25],
+        [11, 36, 12],
+
+        // 16
+        [5, 122, 98, 1, 123, 99],
+        [7, 73, 45, 3, 74, 46],
+        [15, 43, 19, 2, 44, 20],
+        [3, 45, 15, 13, 46, 16],
+
+        // 17
+        [1, 135, 107, 5, 136, 108],
+        [10, 74, 46, 1, 75, 47],
+        [1, 50, 22, 15, 51, 23],
+        [2, 42, 14, 17, 43, 15],
+
+        // 18
+        [5, 150, 120, 1, 151, 121],
+        [9, 69, 43, 4, 70, 44],
+        [17, 50, 22, 1, 51, 23],
+        [2, 42, 14, 19, 43, 15],
+
+        // 19
+        [3, 141, 113, 4, 142, 114],
+        [3, 70, 44, 11, 71, 45],
+        [17, 47, 21, 4, 48, 22],
+        [9, 39, 13, 16, 40, 14],
+
+        // 20
+        [3, 135, 107, 5, 136, 108],
+        [3, 67, 41, 13, 68, 42],
+        [15, 54, 24, 5, 55, 25],
+        [15, 43, 15, 10, 44, 16],
+
+        // 21
+        [4, 144, 116, 4, 145, 117],
+        [17, 68, 42],
+        [17, 50, 22, 6, 51, 23],
+        [19, 46, 16, 6, 47, 17],
+
+        // 22
+        [2, 139, 111, 7, 140, 112],
+        [17, 74, 46],
+        [7, 54, 24, 16, 55, 25],
+        [34, 37, 13],
+
+        // 23
+        [4, 151, 121, 5, 152, 122],
+        [4, 75, 47, 14, 76, 48],
+        [11, 54, 24, 14, 55, 25],
+        [16, 45, 15, 14, 46, 16],
+
+        // 24
+        [6, 147, 117, 4, 148, 118],
+        [6, 73, 45, 14, 74, 46],
+        [11, 54, 24, 16, 55, 25],
+        [30, 46, 16, 2, 47, 17],
+
+        // 25
+        [8, 132, 106, 4, 133, 107],
+        [8, 75, 47, 13, 76, 48],
+        [7, 54, 24, 22, 55, 25],
+        [22, 45, 15, 13, 46, 16],
+
+        // 26
+        [10, 142, 114, 2, 143, 115],
+        [19, 74, 46, 4, 75, 47],
+        [28, 50, 22, 6, 51, 23],
+        [33, 46, 16, 4, 47, 17],
+
+        // 27
+        [8, 152, 122, 4, 153, 123],
+        [22, 73, 45, 3, 74, 46],
+        [8, 53, 23, 26, 54, 24],
+        [12, 45, 15, 28, 46, 16],
+
+        // 28
+        [3, 147, 117, 10, 148, 118],
+        [3, 73, 45, 23, 74, 46],
+        [4, 54, 24, 31, 55, 25],
+        [11, 45, 15, 31, 46, 16],
+
+        // 29
+        [7, 146, 116, 7, 147, 117],
+        [21, 73, 45, 7, 74, 46],
+        [1, 53, 23, 37, 54, 24],
+        [19, 45, 15, 26, 46, 16],
+
+        // 30
+        [5, 145, 115, 10, 146, 116],
+        [19, 75, 47, 10, 76, 48],
+        [15, 54, 24, 25, 55, 25],
+        [23, 45, 15, 25, 46, 16],
+
+        // 31
+        [13, 145, 115, 3, 146, 116],
+        [2, 74, 46, 29, 75, 47],
+        [42, 54, 24, 1, 55, 25],
+        [23, 45, 15, 28, 46, 16],
+
+        // 32
+        [17, 145, 115],
+        [10, 74, 46, 23, 75, 47],
+        [10, 54, 24, 35, 55, 25],
+        [19, 45, 15, 35, 46, 16],
+
+        // 33
+        [17, 145, 115, 1, 146, 116],
+        [14, 74, 46, 21, 75, 47],
+        [29, 54, 24, 19, 55, 25],
+        [11, 45, 15, 46, 46, 16],
+
+        // 34
+        [13, 145, 115, 6, 146, 116],
+        [14, 74, 46, 23, 75, 47],
+        [44, 54, 24, 7, 55, 25],
+        [59, 46, 16, 1, 47, 17],
+
+        // 35
+        [12, 151, 121, 7, 152, 122],
+        [12, 75, 47, 26, 76, 48],
+        [39, 54, 24, 14, 55, 25],
+        [22, 45, 15, 41, 46, 16],
+
+        // 36
+        [6, 151, 121, 14, 152, 122],
+        [6, 75, 47, 34, 76, 48],
+        [46, 54, 24, 10, 55, 25],
+        [2, 45, 15, 64, 46, 16],
+
+        // 37
+        [17, 152, 122, 4, 153, 123],
+        [29, 74, 46, 14, 75, 47],
+        [49, 54, 24, 10, 55, 25],
+        [24, 45, 15, 46, 46, 16],
+
+        // 38
+        [4, 152, 122, 18, 153, 123],
+        [13, 74, 46, 32, 75, 47],
+        [48, 54, 24, 14, 55, 25],
+        [42, 45, 15, 32, 46, 16],
+
+        // 39
+        [20, 147, 117, 4, 148, 118],
+        [40, 75, 47, 7, 76, 48],
+        [43, 54, 24, 22, 55, 25],
+        [10, 45, 15, 67, 46, 16],
+
+        // 40
+        [19, 148, 118, 6, 149, 119],
+        [18, 75, 47, 31, 76, 48],
+        [34, 54, 24, 34, 55, 25],
+        [20, 45, 15, 61, 46, 16]
+    ];
+
+    /**
+     * 根据数据获取对应版本
+     * @return {[type]} [description]
+     */
+    QRCodeAlg.prototype.getRightType = function () {
+        for (var typeNumber = 1; typeNumber < 41; typeNumber++) {
+            var rsBlock = RS_BLOCK_TABLE[(typeNumber - 1) * 4 + this.errorCorrectLevel];
+            if (rsBlock == undefined) {
+                throw new Error("bad rs block @ typeNumber:" + typeNumber + "/errorCorrectLevel:" + this.errorCorrectLevel);
+            }
+            var length = rsBlock.length / 3;
+            var totalDataCount = 0;
+            for (var i = 0; i < length; i++) {
+                var count = rsBlock[i * 3 + 0];
+                var dataCount = rsBlock[i * 3 + 2];
+                totalDataCount += dataCount * count;
+            }
+            var lengthBytes = typeNumber > 9 ? 2 : 1;
+            if (this.utf8bytes.length + lengthBytes < totalDataCount || typeNumber == 40) {
+                this.typeNumber = typeNumber;
+                this.rsBlock = rsBlock;
+                this.totalDataCount = totalDataCount;
+                break;
+            }
+        }
+    };
+
+    //---------------------------------------------------------------------
+    // QRBitBuffer
+    //---------------------------------------------------------------------
+    function QRBitBuffer() {
+        this.buffer = new Array();
+        this.length = 0;
+    }
+    QRBitBuffer.prototype = {
+        get: function (index) {
+            var bufIndex = Math.floor(index / 8);
+            return ((this.buffer[bufIndex] >>> (7 - index % 8)) & 1);
+        },
+        put: function (num, length) {
+            for (var i = 0; i < length; i++) {
+                this.putBit(((num >>> (length - i - 1)) & 1));
+            }
+        },
+        putBit: function (bit) {
+            var bufIndex = Math.floor(this.length / 8);
+            if (this.buffer.length <= bufIndex) {
+                this.buffer.push(0);
+            }
+            if (bit) {
+                this.buffer[bufIndex] |= (0x80 >>> (this.length % 8));
+            }
+            this.length++;
+        }
+    };
+
+
+
+    // xzedit
+    let qrcodeAlgObjCache = [];
+    /**
+     * 二维码构造函数，主要用于绘制
+     * @param  {参数列表} opt 传递参数
+     * @return {}
+     */
+    QRCode = function (opt) {
+        //设置默认参数
+        this.options = {
+            text: '',
+            size: 256,
+            correctLevel: 3,
+            background: '#ffffff',
+            foreground: '#000000',
+            pdground: '#000000',
+            image: '',
+            imageSize: 30,
+            canvasId: opt.canvasId,
+            context: opt.context,
+            usingComponents: opt.usingComponents,
+            showLoading: opt.showLoading,
+            loadingText: opt.loadingText,
+        };
+        if (typeof opt === 'string') { // 只编码ASCII字符串
+            opt = {
+                text: opt
+            };
+        }
+        if (opt) {
+            for (var i in opt) {
+                this.options[i] = opt[i];
+            }
+        }
+        //使用QRCodeAlg创建二维码结构
+        var qrCodeAlg = null;
+        for (var i = 0, l = qrcodeAlgObjCache.length; i < l; i++) {
+            if (qrcodeAlgObjCache[i].text == this.options.text && qrcodeAlgObjCache[i].text.correctLevel == this.options.correctLevel) {
+                qrCodeAlg = qrcodeAlgObjCache[i].obj;
+                break;
+            }
+        }
+        if (i == l) {
+            qrCodeAlg = new QRCodeAlg(this.options.text, this.options.correctLevel);
+            qrcodeAlgObjCache.push({
+                text: this.options.text,
+                correctLevel: this.options.correctLevel,
+                obj: qrCodeAlg
+            });
+        }
+        /**
+         * 计算矩阵点的前景色
+         * @param {Obj} config
+         * @param {Number} config.row 点x坐标
+         * @param {Number} config.col 点y坐标
+         * @param {Number} config.count 矩阵大小
+         * @param {Number} config.options 组件的options
+         * @return {String}
+         */
+        let getForeGround = function (config) {
+            var options = config.options;
+            if (options.pdground && (
+                (config.row > 1 && config.row < 5 && config.col > 1 && config.col < 5) ||
+                (config.row > (config.count - 6) && config.row < (config.count - 2) && config.col > 1 && config.col < 5) ||
+                (config.row > 1 && config.row < 5 && config.col > (config.count - 6) && config.col < (config.count - 2))
+            )) {
+                return options.pdground;
+            }
+            return options.foreground;
+        }
+        // 创建canvas
+        let createCanvas = function (options) {
+            if (options.showLoading) {
+                uni.showLoading({
+                    title: options.loadingText,
+                    mask: true
+                });
+            }
+            var ctx = uni.createCanvasContext(options.canvasId, options.context);
+            var count = qrCodeAlg.getModuleCount();
+            var ratioSize = options.size;
+            var ratioImgSize = options.imageSize;
+            //计算每个点的长宽
+            var tileW = (ratioSize / count).toPrecision(4);
+            var tileH = (ratioSize / count).toPrecision(4);
+            //绘制
+            for (var row = 0; row < count; row++) {
+                for (var col = 0; col < count; col++) {
+                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
+                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
+                    var foreground = getForeGround({
+                        row: row,
+                        col: col,
+                        count: count,
+                        options: options
+                    });
+                    ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
+                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
+                }
+            }
+            if (options.image) {
+                var x = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
+                var y = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
+                drawRoundedRect(ctx, x, y, ratioImgSize, ratioImgSize, 2, 6, true, true)
+                ctx.drawImage(options.image, x, y, ratioImgSize, ratioImgSize);
+                // 画圆角矩形
+                function drawRoundedRect(ctxi, x, y, width, height, r, lineWidth, fill, stroke) {
+                    ctxi.setLineWidth(lineWidth);
+                    ctxi.setFillStyle(options.background);
+                    ctxi.setStrokeStyle(options.background);
+                    ctxi.beginPath(); // draw top and top right corner 
+                    ctxi.moveTo(x + r, y);
+                    ctxi.arcTo(x + width, y, x + width, y + r, r); // draw right side and bottom right corner 
+                    ctxi.arcTo(x + width, y + height, x + width - r, y + height, r); // draw bottom and bottom left corner 
+                    ctxi.arcTo(x, y + height, x, y + height - r, r); // draw left and top left corner 
+                    ctxi.arcTo(x, y, x + r, y, r);
+                    ctxi.closePath();
+                    if (fill) {
+                        ctxi.fill();
+                    }
+                    if (stroke) {
+                        ctxi.stroke();
+                    }
+                }
+            }
+            setTimeout(() => {
+                ctx.draw(true, () => {
+                    // 保存到临时区域
+                    setTimeout(() => {
+                        uni.canvasToTempFilePath({
+                            width: options.width,
+                            height: options.height,
+                            destWidth: options.width,
+                            destHeight: options.height,
+                            canvasId: options.canvasId,
+                            quality: Number(1),
+                            success: function (res) {
+                                if (options.cbResult) {
+                                    options.cbResult(res.tempFilePath)
+                                }
+                            },
+                            fail: function (res) {
+                                if (options.cbResult) {
+                                    options.cbResult(res)
+                                }
+                            },
+                            complete: function () {
+                                if (options.showLoading){
+                                    uni.hideLoading();
+                                }
+                            },
+                        }, options.context);
+                    }, options.text.length + 100);
+                });
+            }, options.usingComponents ? 0 : 150);
+        }
+        createCanvas(this.options);
+        // 空判定
+        let empty = function (v) {
+            let tp = typeof v,
+                rt = false;
+            if (tp == "number" && String(v) == "") {
+                rt = true
+            } else if (tp == "undefined") {
+                rt = true
+            } else if (tp == "object") {
+                if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
+            } else if (tp == "string") {
+                if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
+            } else if (tp == "function") {
+                rt = false
+            }
+            return rt
+        }
+    };
+    QRCode.prototype.clear = function (fn) {
+        var ctx = uni.createCanvasContext(this.options.canvasId, this.options.context)
+        ctx.clearRect(0, 0, this.options.size, this.options.size)
+        ctx.draw(false, () => {
+            if (fn) {
+                fn()
+            }
+        })
+    };
+})()
+
+export default QRCode
\ No newline at end of file
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
new file mode 100644
index 0000000..6adf2d6
--- /dev/null
+++ b/src/components/RefundPopup/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <div class="refund-popup bg-F5F7FA border-box">
+      <div
+        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
+      >
+        <div
+          class="flex-full font-size-16 color-171717 line-height-24 text-center"
+        >
+          取消政策
+        </div>
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </div>
+      <!-- 内容区域 -->
+      <div class="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
+        <div class="flex flex-items-center mb-8">
+          <uni-icons fontFamily="znicons" size="20" color="#333">
+            {{ zniconsMap["zn-refund"] }}
+          </uni-icons>
+          <spanclass="font-size-14 font-600 color-171717 ml-8">
+            {{ refundTitle }}
+          </text>
+        </div>
+        <div
+          class="font-size-14 color-525866 line-height-16 mb-4"
+          v-for="(item, index) in commodityPurchaseInstruction"
+          :key="index"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </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 refundTitle = computed(() => {
+  if (props.orderData.commodityPurchaseInstruction) {
+    return (
+      props.orderData.commodityPurchaseInstruction.refundTitle || "退订规则"
+    );
+  }
+
+  return "退订规则";
+});
+
+const commodityPurchaseInstruction = computed(() => {
+  if (
+    props.orderData.commodityPurchaseInstruction &&
+    props.orderData.commodityPurchaseInstruction.refundContent
+  ) {
+    // 以换行符为分隔符，将字符串转换为数组
+    return props.orderData.commodityPurchaseInstruction.refundContent.split(
+      "\n",
+    );
+  }
+
+  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>
diff --git a/src/components/RefundPopup/styles/index.scss b/src/components/RefundPopup/styles/index.scss
new file mode 100644
index 0000000..57425d5
--- /dev/null
+++ 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;
+}
diff --git a/src/components/ResponseIntro/images/2025-07-14_155933.png b/src/components/ResponseIntro/images/2025-07-14_155933.png
new file mode 100644
index 0000000..1882d8a
Binary files /dev/null and b/src/components/ResponseIntro/images/2025-07-14_155933.png differ
diff --git a/src/components/ResponseIntro/index.vue b/src/components/ResponseIntro/index.vue
new file mode 100644
index 0000000..3d3664c
--- /dev/null
+++ b/src/components/ResponseIntro/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="response-intro-wrapper">
+    <spanclass="response-intro-text">{{ introText }}</text>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  introText: {
+    type: String,
+    default:
+      "酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/ResponseIntro/prompt.md b/src/components/ResponseIntro/prompt.md
new file mode 100644
index 0000000..e0f2ea6
--- /dev/null
+++ b/src/components/ResponseIntro/prompt.md
@@ -0,0 +1,14 @@
+## 消息响应体文本介绍组件
+
+组件名称：消息响应体文本介绍组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.response-intro-text
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ResponseIntro/styles/index.scss b/src/components/ResponseIntro/styles/index.scss
new file mode 100644
index 0000000..d78a423
--- /dev/null
+++ b/src/components/ResponseIntro/styles/index.scss
@@ -0,0 +1,11 @@
+.response-intro-wrapper {
+  padding: 4px 8px 12px 12px;
+}
+
+.response-intro-text {
+  font-weight: 500;
+  font-size: $uni-font-size-base;
+  color: $uni-text-color;
+  line-height: 20px;
+  text-align: justify;
+}
diff --git a/src/components/ResponseWrapper/index.vue b/src/components/ResponseWrapper/index.vue
new file mode 100644
index 0000000..b1dc954
--- /dev/null
+++ b/src/components/ResponseWrapper/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="response-wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/ResponseWrapper/styles/index.scss b/src/components/ResponseWrapper/styles/index.scss
new file mode 100644
index 0000000..a352aeb
--- /dev/null
+++ b/src/components/ResponseWrapper/styles/index.scss
@@ -0,0 +1,7 @@
+.response-wrapper {
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px 20px 20px 20px;
+  border: 1px solid #fff;
+  padding: 12px;
+}
diff --git a/src/components/ServiceTipsWord/images/2025-07-11_141148.png b/src/components/ServiceTipsWord/images/2025-07-11_141148.png
new file mode 100644
index 0000000..5b61cd2
Binary files /dev/null and b/src/components/ServiceTipsWord/images/2025-07-11_141148.png differ
diff --git a/src/components/ServiceTipsWord/images/icon_refresh.png b/src/components/ServiceTipsWord/images/icon_refresh.png
new file mode 100644
index 0000000..bf85d77
Binary files /dev/null and b/src/components/ServiceTipsWord/images/icon_refresh.png differ
diff --git a/src/components/ServiceTipsWord/index.vue b/src/components/ServiceTipsWord/index.vue
new file mode 100644
index 0000000..d9b6866
--- /dev/null
+++ b/src/components/ServiceTipsWord/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="service-prompt">
+    <div class="service-header">
+      <spanclass="header-text">你可以这样问我</text>
+      <img
+        class="header-icon"
+        src="./images/icon_refresh.png"
+        @click="handleRefresh"
+      ></image>
+    </div>
+    <div class="service-buttons">
+      <spanclass="service-button" @click="handleClick('bed')">
+        帮我加一张床
+      </text>
+      <spanclass="service-button" @click="handleClick('hotWater')">
+        房间热水不够热
+      </text>
+      <spanclass="service-button" @click="handleClick('mahjong')">
+        帮忙加一台麻将机
+      </text>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const handleRefresh = (type) => {
+  console.log(`Button clicked: ${type}`);
+};
+
+const handleClick = (type) => {
+  console.log(`Button clicked: ${type}`);
+  // Add your logic here based on the type (e.g., 'bed', 'hotWater', 'mahjong')
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/ServiceTipsWord/prompt.md b/src/components/ServiceTipsWord/prompt.md
new file mode 100644
index 0000000..5d3fa49
--- /dev/null
+++ b/src/components/ServiceTipsWord/prompt.md
@@ -0,0 +1,16 @@
+## 消息体提示词组件
+
+组件名称：消息体提示词组件
+帮我加一张床、房间热水不够热、帮我加一台麻将机
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-prompt
+3、可以使用 uniapp 内置的组件
+4、帮忙加一张床、房间热水不够热、帮忙加一台麻将机有点击交互
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ServiceTipsWord/styles/index.scss b/src/components/ServiceTipsWord/styles/index.scss
new file mode 100644
index 0000000..54dcda8
--- /dev/null
+++ b/src/components/ServiceTipsWord/styles/index.scss
@@ -0,0 +1,53 @@
+.service-prompt {
+  padding: 12px 18px;
+}
+
+.service-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.header-text {
+  font-size: $uni-font-size-sm;
+  color: #6b84a2;
+}
+
+.header-icon {
+  width: 9px;
+  height: 9px;
+  margin-left: 8px;
+}
+
+.service-buttons {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.service-button {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.5) 0%,
+    #ffffff 100%
+  );
+  box-shadow: 0px 2px 6px 0px rgba(16, 78, 137, 0.1);
+  border-radius: 20px 20px 20px 20px;
+  border: 1px solid #fff;
+  border-image: linear-gradient(
+    137deg,
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0.5),
+    rgba(255, 255, 255, 1)
+  );
+  font-size: $uni-font-size-sm;
+  font-weight: 500;
+  color: $theme-color-500;
+  border-radius: $uni-border-radius-50px;
+}
diff --git a/src/components/Speech/RecordingWaveBtn.vue b/src/components/Speech/RecordingWaveBtn.vue
new file mode 100644
index 0000000..4cb2b81
--- /dev/null
+++ b/src/components/Speech/RecordingWaveBtn.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="recording-wave-btn">
+    <div class="audio-visualizer">
+      <div
+        v-for="(bar, index) in audioBars"
+        :key="index"
+        class="audio-bar"
+        :style="{
+          height: bar.height + 'px',
+          transition: 'height 0.1s ease-out',
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const animationTimer = ref(null);
+const isAnimating = ref(false);
+
+// 音频条数据
+const audioBars = ref([]);
+const BAR_COUNT = 30;
+
+// 初始化音频条
+const initAudioBars = () => {
+  audioBars.value = [];
+  for (let i = 0; i < BAR_COUNT; i++) {
+    audioBars.value.push({
+      height: 4 + Math.random() * 8,
+    });
+  }
+};
+
+// 更新音频条动画
+const updateAudioBars = () => {
+  if (!isAnimating.value) return;
+
+  // 使用 for 循环随机修改每个音频条的高度
+  for (let i = 0; i < audioBars.value.length; i++) {
+    const bar = audioBars.value[i];
+
+    // 生成随机高度值
+    const minHeight = 4;
+    const maxHeight = 20;
+    const randomHeight = minHeight + Math.random() * (maxHeight - minHeight);
+
+    // 添加一些变化幅度，让高度变化更自然
+    const variation = (Math.random() - 0.5) * 10;
+    bar.height = Math.max(
+      minHeight,
+      Math.min(maxHeight, randomHeight + variation),
+    );
+  }
+};
+
+// 开始动画
+const startAnimation = () => {
+  if (!isAnimating.value) {
+    isAnimating.value = true;
+
+    const animate = () => {
+      if (isAnimating.value) {
+        updateAudioBars();
+        animationTimer.value = setTimeout(animate, 200); // 每200ms更新一次，模仿人类说话语速
+      }
+    };
+
+    animate();
+  }
+};
+
+// 停止动画
+const stopAnimation = () => {
+  isAnimating.value = false;
+  if (animationTimer.value) {
+    clearTimeout(animationTimer.value);
+    animationTimer.value = null;
+  }
+};
+
+// 组件挂载时初始化并自动开始动画
+onMounted(() => {
+  initAudioBars();
+  startAnimation();
+});
+
+// 组件卸载时停止动画
+onUnmounted(() => {
+  stopAnimation();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  startAnimation,
+  stopAnimation,
+});
+</script>
+
+<style scoped lang="scss">
+.recording-wave-btn {
+  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
+  margin: 0 12px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $theme-color-500;
+  height: 44px;
+  border-radius: $uni-border-radius-50px;
+}
+
+.audio-visualizer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  gap: 2px;
+}
+
+.audio-bar {
+  width: 2px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: #fff;
+}
+</style>
diff --git a/src/components/Sprite/SpriteAnimator.vue b/src/components/Sprite/SpriteAnimator.vue
new file mode 100644
index 0000000..f799e34
--- /dev/null
+++ b/src/components/Sprite/SpriteAnimator.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="sprite-animator" :style="spriteStyle" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    frameWidth: number;
+    frameHeight: number;
+    totalFrames: number;
+    columns: number;
+    displayWidth: number;
+    fps?: number;
+    autoplay?: boolean;
+    loop?: boolean;
+  }>(),
+  {
+    fps: 12,
+    autoplay: true,
+    loop: true,
+  },
+);
+
+/* JS 精确逐帧方案（使用 setInterval，确保整数偏移、无插值） */
+const currentFrame = ref(0);
+let intervalId: number | null = null;
+
+const play = () => {
+  stop();
+  const safeFps = Math.max(1, Math.floor(props.fps || 12));
+  const durationPerFrame = 1000 / safeFps;
+  // 强制整数像素偏移，使用 setInterval 在各运行时更可靠
+  const setter = (globalThis as any).setInterval || setInterval;
+  intervalId = setter(() => {
+    const safeTotal = Math.max(1, Math.floor(props.totalFrames || 0));
+    if (currentFrame.value >= safeTotal - 1) {
+      if (props.loop) {
+        currentFrame.value = 0;
+      } else {
+        stop();
+        return;
+      }
+    } else {
+      currentFrame.value++;
+    }
+  }, durationPerFrame) as unknown as number;
+};
+
+const stop = () => {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+};
+
+onMounted(() => {
+  console.log("[SpriteAnimator] mounted", {
+    autoplay: props.autoplay,
+    fps: props.fps,
+  });
+  if (props.autoplay) play();
+});
+
+onUnmounted(() => stop());
+
+const spriteStyle = computed(() => {
+  const {
+    src,
+    frameWidth: rawFrameWidth,
+    frameHeight: rawFrameHeight,
+    totalFrames: rawTotalFrames,
+    columns: rawColumns,
+  } = props;
+
+  const frameWidth = Math.max(1, Math.floor(rawFrameWidth || 0));
+  const frameHeight = Math.max(1, Math.floor(rawFrameHeight || 0));
+  const totalFrames = Math.max(1, Math.floor(rawTotalFrames || 0));
+  let columns = Math.floor(Number(rawColumns) || 0);
+  if (!columns || columns <= 0) columns = Math.min(1, totalFrames);
+  columns = Math.min(columns, totalFrames);
+
+  const displayWidth = props.displayWidth || frameWidth;
+
+  const rows = Math.ceil(totalFrames / columns);
+  const imageWidth = columns * frameWidth;
+  const imageHeight = rows * frameHeight;
+
+  const scale = displayWidth / frameWidth;
+  const displayHeight = Math.round(frameHeight * scale);
+
+  const scaledImageWidth = Math.round(imageWidth * scale);
+  const scaledImageHeight = Math.round(imageHeight * scale);
+
+  if (currentFrame.value < 0) currentFrame.value = 0;
+  if (currentFrame.value >= totalFrames) currentFrame.value = totalFrames - 1;
+  const col = currentFrame.value % columns;
+  const row = Math.floor(currentFrame.value / columns);
+
+  const offsetX = Math.round(col * frameWidth * scale);
+  const offsetY = Math.round(row * frameHeight * scale);
+
+  const styleStr = `width: ${Math.round(displayWidth)}px; height: ${displayHeight}px; background-image: url("${src}"); background-repeat: no-repeat; background-size: ${scaledImageWidth}px ${scaledImageHeight}px; background-position: -${offsetX}px -${offsetY}px;`;
+  return styleStr as any;
+});
+
+// 对外暴露
+defineExpose({ play, stop, currentFrame });
+</script>
+
+<style scoped>
+.sprite-animator {
+  display: block;
+  will-change: background-position;
+}
+</style>
diff --git a/src/components/Stepper/README.md b/src/components/Stepper/README.md
new file mode 100644
index 0000000..2411ffc
--- /dev/null
+++ b/src/components/Stepper/README.md
@@ -0,0 +1,72 @@
+# Stepper 数字步进器组件
+
+一个简洁易用的数字步进器组件，支持增减操作和数值范围限制。
+
+## 功能特性
+
+- ✨ **双向数据绑定**：支持 v-model 语法糖
+- 🔢 **数值范围控制**：可设置最小值和最大值
+- 🎯 **响应式更新**：实时响应外部数值变化
+- 🎨 **简洁UI设计**：使用 uni-icons 图标，界面清爽
+- 📱 **移动端适配**：完美适配各种屏幕尺寸
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<template>
+  <Stepper v-model="quantity" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Stepper from '@/components/Stepper/index.vue'
+
+const quantity = ref(1)
+</script>
+```
+
+### 设置数值范围
+
+```vue
+<template>
+  <Stepper 
+    v-model="quantity" 
+    :min="1" 
+    :max="10" 
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| modelValue | Number | 1 | 当前数值，支持 v-model |
+| min | Number | 1 | 最小值 |
+| max | Number | 100 | 最大值 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| update:modelValue | 数值变化时触发 | (value: number) |
+
+## 更新日志
+
+### v1.1.0 (2024-12-19)
+**修复响应性问题**
+- 🐛 修复组件不响应外部 modelValue 变化的问题
+- 🔄 添加 watch 监听器，确保实时同步外部值变化
+- ✨ 提升组件响应性和数据同步准确性
+- 🎯 完善与父组件的双向数据绑定
+
+### v1.0.0
+**初始版本**
+- ✨ 基础数字步进器功能
+- 🔢 支持数值范围控制
+- 🎨 简洁的UI设计
+- 📱 移动端适配
\ No newline at end of file
diff --git a/src/components/Stepper/images/2025-07-15_100917.png b/src/components/Stepper/images/2025-07-15_100917.png
new file mode 100644
index 0000000..881189f
Binary files /dev/null and b/src/components/Stepper/images/2025-07-15_100917.png differ
diff --git a/src/components/Stepper/index.vue b/src/components/Stepper/index.vue
new file mode 100644
index 0000000..9633d7a
--- /dev/null
+++ b/src/components/Stepper/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="stepper-wrapper border-box flex flex-items-center rounded-8">
+    <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
+    <text
+      class="stepper-text text-center font-size-14 font-500 color-000 ml-4 mr-4"
+    >
+      {{ value }} {{ unit }}
+    </text>
+    <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from "vue";
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  unit: {
+    type: String,
+    default: "",
+  },
+});
+
+// Emit
+const emit = defineEmits(["update:modelValue", "decrease", "increase"]);
+
+// Local state
+const value = ref(props.modelValue);
+
+// 监听外部值变化，同步更新本地状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    value.value = newValue;
+  },
+  { immediate: true },
+);
+
+// Methods
+const decrease = () => {
+  if (value.value === 1) return;
+
+  if (value.value > props.min) {
+    value.value--;
+    emit("update:modelValue", value.value);
+    emit("decrease");
+  }
+};
+
+const increase = () => {
+  if (value.value < props.max) {
+    value.value++;
+    emit("update:modelValue", value.value);
+    emit("increase");
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/Stepper/propmt.md b/src/components/Stepper/propmt.md
new file mode 100644
index 0000000..efbfc76
--- /dev/null
+++ b/src/components/Stepper/propmt.md
@@ -0,0 +1,12 @@
+## 步进器组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.stepper-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/Stepper/styles/index.scss b/src/components/Stepper/styles/index.scss
new file mode 100644
index 0000000..2b3f89c
--- /dev/null
+++ b/src/components/Stepper/styles/index.scss
@@ -0,0 +1,8 @@
+.stepper-wrapper {
+  background-color: #f3f9ff;
+  padding: 4px 7px;
+}
+
+.stepper-text {
+  max-width: 40px;
+}
diff --git a/src/components/SumCard/images/2025-07-15_154422.png b/src/components/SumCard/images/2025-07-15_154422.png
new file mode 100644
index 0000000..e464b36
Binary files /dev/null and b/src/components/SumCard/images/2025-07-15_154422.png differ
diff --git a/src/components/SumCard/index.vue b/src/components/SumCard/index.vue
new file mode 100644
index 0000000..d41e914
--- /dev/null
+++ b/src/components/SumCard/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="sum-wrapper">
+    <div class="sum-item">
+      <spanclass="sum-label">价格</text>
+      <spanclass="sum-value">¥{{ referencePrice }}</text>
+    </div>
+    <div class="sum-item">
+      <spanclass="sum-label">折扣优惠</text>
+      <spanclass="sum-discount">-¥{{ discount }}</text>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  referencePrice: {
+    type: Number,
+    default: 0,
+  },
+  discount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/SumCard/propmt.md b/src/components/SumCard/propmt.md
new file mode 100644
index 0000000..095fcf5
--- /dev/null
+++ b/src/components/SumCard/propmt.md
@@ -0,0 +1,12 @@
+## 价格组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.sum-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/SumCard/styles/index.scss b/src/components/SumCard/styles/index.scss
new file mode 100644
index 0000000..bdcc88c
--- /dev/null
+++ b/src/components/SumCard/styles/index.scss
@@ -0,0 +1,33 @@
+.sum-wrapper {
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.sum-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #ddd;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.sum-label {
+  font-size: 15px;
+  color: $uni-text-color;
+}
+
+.sum-value {
+  font-size: $uni-font-size-base;
+  color: $uni-text-color-grey;
+}
+
+.sum-discount {
+  font-size: $uni-font-size-base;
+  color: #ff5722;
+}
diff --git a/src/components/SurveyQuestionnaire/index.vue b/src/components/SurveyQuestionnaire/index.vue
new file mode 100644
index 0000000..4d43d12
--- /dev/null
+++ b/src/components/SurveyQuestionnaire/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="survey-questionnaire w-vw-24">
+    <div class="bg-white border-box border-ff overflow-hidden rounded-20">
+      <div
+        class="border-box flex flex-items-center flex-justify-between bg-theme-color-50"
+      >
+        <spanclass="font-size-18 font-500 color-171717 text-left ml-12">
+          调查问卷
+        </text>
+        <img class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />
+      </div>
+
+      <img class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />
+
+      <div
+        class="h-44 m-12 rounded-50 bg-button color-white flex flex-items-center flex-justify-center"
+        @click="handleCall"
+      >
+        前往填写
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getAccessToken } from "@/constant/token";
+import { defineProps, computed } from "vue";
+import { navigateTo } from "../../router";
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: {},
+  },
+});
+
+const surveyData = computed(() => {
+  if (props.toolCall?.data) {
+    return JSON.parse(props.toolCall?.data);
+  } else {
+    return {};
+  }
+});
+
+const handleCall = () => {
+  const token = getAccessToken();
+  navigateTo(surveyData.value.jumpUrl, { token: token });
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue
new file mode 100644
index 0000000..298c446
--- /dev/null
+++ b/src/components/SwipeCards/index.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="card border-box pb-12 relative mt-12">
+    <div
+      class="card-item absolute overflow-hidden"
+      v-for="(card, index) in list"
+      :key="card.__uid"
+      :style="[itemStyle(index, card), transformStyle(index, card)]"
+      @touchstart.stop="touchStart($event, index)"
+      @touchmove.stop.prevent="touchMove($event, index)"
+      @touchend.stop="touchEnd(index)"
+      @touchcancel.stop="touchCancel(index)"
+      @transitionend="onTransitionEnd(index)"
+    >
+      <div class="inner-card bg-white">
+        <!-- 商品大图部分：自适应剩余空间 -->
+        <div class="goods-image-wrapper relative">
+          <img
+            class="w-full h-full"
+            :src="card.commodityPhoto"
+            mode="aspectFill"
+          />
+        </div>
+
+        <!-- 底部：价格 + 购买按钮 -->
+        <div
+          class="card-footer border-box p-12 flex flex-justify-between flex-items-center"
+        >
+          <div class="border-box">
+            <div class="font-size-14 font-500 color-333 ellipsis-1">
+              {{ card.commodityName }}
+            </div>
+            <div class="card-price-row color-333">
+              <spanclass="font-size-11">￥</text>
+              <spanclass="font-size-24 font-bold">
+                {{ card.specificationPrice }}
+              </text>
+              <spanclass="font-size-11 ml-2" v-if="card.stockUnitLabel"
+                >/{{ card.stockUnitLabel }}</text
+              >
+            </div>
+          </div>
+
+          <div class="buy-btn" @click.stop="placeOrderHandle(card)">购买</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
+
+const props = defineProps({
+  cardsData: { type: Array, default: () => [] },
+});
+
+const DURATION = 300;
+const CLICK_THRESHOLD = 8; // 点击判定的最大偏移阈值（像素）
+const swipering = ref(false);
+const animatingOut = ref(false);
+let reorderTimer = null;
+
+const { windowWidth } = uni.getWindowInfo();
+
+let uidCounter = 0;
+// 始终生成全局唯一的 __uid，避免因重复 key 导致后续卡片无法正确重渲染与绑定事件
+const genUid = (item) =>
+  `swipe_${item?.commodityId ?? "unknown"}_${uidCounter++}_${Date.now()}`;
+const normalize = (item) => ({
+  ...item,
+  __uid: genUid(item),
+  x: 0,
+  y: 0,
+  opacity: 1,
+});
+
+// 循环队列（全量），堆栈（仅前3张）
+const queue = ref((props.cardsData || []).map(normalize));
+const list = ref(queue.value.slice(0, 3));
+const updateStack = () => {
+  list.value = queue.value.slice(0, 3);
+};
+
+watch(
+  () => props.cardsData,
+  (val) => {
+    queue.value = (val || []).map(normalize);
+    updateStack();
+  },
+  { deep: true },
+);
+
+// 触摸状态
+const touchState = ref({
+  startX: 0,
+  startY: 0,
+  moving: false,
+  isClickCandidate: false,
+});
+
+const touchStart = (e, index) => {
+  if (index !== 0 || animatingOut.value) return;
+  const t = e.changedTouches?.[0];
+  if (!t) return;
+  touchState.value.startX = t.clientX;
+  touchState.value.startY = t.clientY;
+  touchState.value.moving = true;
+  // 初始认为可能是点击，移动过程中如果超过阈值则取消点击
+  touchState.value.isClickCandidate = true;
+  swipering.value = true;
+};
+
+const touchMove = (e, index) => {
+  if (index !== 0 || !touchState.value.moving || animatingOut.value) return;
+  const t = e.changedTouches?.[0];
+  if (!t) return;
+  const dx = t.clientX - touchState.value.startX;
+  const dy = t.clientY - touchState.value.startY;
+  // 超过点击阈值则标记为不是点击
+  if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+    touchState.value.isClickCandidate = false;
+  }
+  const top = list.value[0];
+  if (!top) return;
+  top.x = dx;
+  top.y = dy;
+};
+
+const finalizeReorder = () => {
+  const top = queue.value[0];
+  if (!top) return;
+  const moved = { ...top, x: 0, y: 0, opacity: 1 };
+  queue.value = [...queue.value.slice(1), moved];
+  updateStack();
+  animatingOut.value = false;
+  if (reorderTimer) {
+    clearTimeout(reorderTimer);
+    reorderTimer = null;
+  }
+};
+
+const touchEnd = (index) => {
+  if (index !== 0 || !touchState.value.moving) return;
+  touchState.value.moving = false;
+  swipering.value = false;
+  const top = list.value[0];
+  if (!top) return;
+  // 若在有效点击范围内，则触发跳转，不进行滑动逻辑
+  if (touchState.value.isClickCandidate) {
+    top.x = 0;
+    top.y = 0;
+    top.opacity = 1;
+    uni.navigateTo({
+      url: `/pages/goods/index?commodityId=${top.commodityId}`,
+    });
+    return;
+  }
+  const threshold = windowWidth / 4;
+  if (Math.abs(top.x) > threshold) {
+    const direction = top.x > 0 ? 1 : -1;
+    animatingOut.value = true;
+    top.x = direction * (windowWidth + 100);
+    top.opacity = 0;
+    if (reorderTimer) {
+      clearTimeout(reorderTimer);
+      reorderTimer = null;
+    }
+    reorderTimer = setTimeout(() => {
+      if (animatingOut.value) finalizeReorder();
+    }, DURATION + 40);
+  } else {
+    // 回弹复位
+    top.x = 0;
+    top.y = 0;
+    top.opacity = 1;
+  }
+};
+
+const touchCancel = (index) => {
+  if (index !== 0) return;
+  const top = list.value[0];
+  if (!top) return;
+  touchState.value.moving = false;
+  swipering.value = false;
+  top.x = 0;
+  top.y = 0;
+  top.opacity = 1;
+};
+
+const onTransitionEnd = (index) => {
+  if (index !== 0) return;
+  if (!animatingOut.value) return;
+  finalizeReorder();
+};
+
+// 栈样式：层级、基础位移缩放、过渡时长
+const itemStyle = (index, card) => {
+  const zIndex = list.value.length - index;
+  const duration = swipering.value ? "0ms" : `${DURATION}ms`;
+  const opacity = card.opacity;
+  return {
+    zIndex,
+    opacity,
+    transition: `transform ${duration} ease, opacity ${duration} ease`,
+  };
+};
+
+// 变换样式：顶部卡动态位移/旋转，后续卡预览层级
+const transformStyle = (index, card) => {
+  if (index === 0) {
+    const deg = card.x / 20;
+    return {
+      transform: `translate3d(${card.x}px, ${card.y}px, 0) rotate(${deg}deg)`,
+    };
+  }
+  // 预览层：轻微位移与缩放，确保连贯顶上
+  const predivScales = [1, 0.94, 0.86];
+  const predivOffsets = [0, 18, 39];
+  const scale = predivScales[index] ?? 0.94;
+  const y = predivOffsets[index] ?? 24;
+  return {
+    transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
+  };
+};
+
+// 去下单
+const placeOrderHandle = (item) => {
+  console.log("去下单", item);
+
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${item.commodityId}`,
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss
new file mode 100644
index 0000000..d3bab55
--- /dev/null
+++ b/src/components/SwipeCards/styles/index.scss
@@ -0,0 +1,61 @@
+.card {
+  height: 308px;
+}
+
+.card-item {
+  inset: 0;
+  will-change: transform, opacity;
+  height: 277px;
+  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+}
+
+.inner-card {
+  width: 100%;
+  height: 100%;
+}
+
+/* 商品大图部分：撑满除相册外的空间 */
+.goods-image-wrapper {
+  width: 100%;
+  height: 193px;
+}
+
+
+.album-item {
+  width: 96px;
+  height: 60px;
+}
+
+.album-title {
+  background: rgba(0, 0, 0, 0.5);
+  height: 20px;
+}
+
+/* 底部价格与购买按钮 */
+.card-footer {
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+
+.card-footer .price-left {
+  display: flex;
+  align-items: baseline;
+  color: #171717;
+}
+
+.buy-btn {
+  background-color: $theme-color-500;
+  color: #fff;
+  margin-top: 12px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buy-btn:active {
+  opacity: 0.9;
+}
diff --git a/src/components/TagsGroup/images/2025-07-13_102028.png b/src/components/TagsGroup/images/2025-07-13_102028.png
new file mode 100644
index 0000000..d850fd5
Binary files /dev/null and b/src/components/TagsGroup/images/2025-07-13_102028.png differ
diff --git a/src/components/TagsGroup/index.vue b/src/components/TagsGroup/index.vue
new file mode 100644
index 0000000..ed54ec4
--- /dev/null
+++ b/src/components/TagsGroup/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="tags-group">
+    <div class="tag-item" v-for="(tag, index) in tags" :key="index">
+      {{ tag }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const tags = ["门票套餐", "民俗活动", "车程路况"];
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/TagsGroup/prompt.md b/src/components/TagsGroup/prompt.md
new file mode 100644
index 0000000..ff73993
--- /dev/null
+++ b/src/components/TagsGroup/prompt.md
@@ -0,0 +1,14 @@
+## 标签组件
+
+组件名称：标签组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片 100%还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.tags-group
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/TagsGroup/styles/index.scss b/src/components/TagsGroup/styles/index.scss
new file mode 100644
index 0000000..e1be6a2
--- /dev/null
+++ b/src/components/TagsGroup/styles/index.scss
@@ -0,0 +1,13 @@
+.tags-group {
+  display: flex;
+  gap: 8px;
+}
+
+.tag-item {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 8px 16px;
+  font-size: $uni-font-size-sm;
+  color: $theme-color-500;
+  white-space: nowrap;
+}
diff --git a/src/components/TopNavBar/README.md b/src/components/TopNavBar/README.md
new file mode 100644
index 0000000..679f3d7
--- /dev/null
+++ b/src/components/TopNavBar/README.md
@@ -0,0 +1,180 @@
+# TopNavBar 顶部导航栏组件
+
+一个功能完整的顶部导航栏组件，支持固定定位、自定义样式和插槽内容。
+
+## 功能特性
+
+- ✅ 支持固定在页面顶部（可配置）
+- ✅ 自动适配状态栏高度
+- ✅ 支持自定义标题和颜色
+- ✅ 支持插槽自定义内容
+- ✅ 内置返回按钮功能
+- ✅ 响应式设计
+- ✅ 深色模式支持
+- ✅ 安全区域适配
+
+## 基础用法
+
+### 简单使用
+
+```vue
+<template>
+  <TopNavBar title="页面标题" />
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+</script>
+```
+
+### 固定在顶部
+
+```vue
+<template>
+  <TopNavBar title="页面标题" :fixed="true" />
+</template>
+```
+
+### 自定义样式
+
+```vue
+<template>
+  <TopNavBar
+    title="页面标题"
+    backgroundColor="#007AFF"
+    titleColor="#ffffff"
+    backIconColor="#ffffff"
+  />
+</template>
+```
+
+### 标题对齐方式
+
+```vue
+<template>
+  <!-- 标题居中显示（默认） -->
+  <TopNavBar title="居中标题" titleAlign="center" />
+
+  <!-- 标题左对齐显示 -->
+  <TopNavBar title="左对齐标题" titleAlign="left" />
+</template>
+```
+
+### 使用插槽
+
+```vue
+<template>
+  <TopNavBar>
+    <template #title>
+      <div class="custom-title">
+        <text>自定义标题内容</text>
+      </div>
+    </template>
+
+    <template #right>
+      <uni-icons type="more" size="20" color="#333" />
+    </template>
+  </TopNavBar>
+</template>
+```
+
+## API
+
+### Props
+
+| 参数            | 类型    | 默认值    | 说明                                   |
+| --------------- | ------- | --------- | -------------------------------------- |
+| title           | String  | ''        | 导航栏标题                             |
+| fixed           | Boolean | false     | 是否固定在页面顶部                     |
+| showBack        | Boolean | true      | 是否显示返回按钮                       |
+| backgroundColor | String  | '#ffffff' | 背景颜色                               |
+| titleColor      | String  | '#333333' | 标题文字颜色                           |
+| backIconColor   | String  | '#333333' | 返回按钮图标颜色                       |
+| hideStatusBar   | Boolean | false     | 是否隐藏状态栏占位                     |
+| zIndex          | Number  | 999       | 层级索引                               |
+| titleAlign      | String  | 'center'  | 标题对齐方式，可选值：'center'、'left' |
+
+### Events
+
+| 事件名 | 说明               | 参数 |
+| ------ | ------------------ | ---- |
+| back   | 点击返回按钮时触发 | -    |
+
+### Slots
+
+| 插槽名 | 说明           |
+| ------ | -------------- |
+| title  | 自定义标题内容 |
+| right  | 自定义右侧内容 |
+
+## 使用示例
+
+### 订单列表页面
+
+```vue
+<template>
+  <div>
+    <TopNavBar>
+      <template #title>
+        <Tabs
+          :tabs="tabList"
+          :defaultActive="currentTabIndex"
+          @change="handleTabChange"
+        />
+      </template>
+    </TopNavBar>
+
+    <!-- 页面内容 -->
+    <div class="page-content">
+      <!-- 内容区域 -->
+    </div>
+  </div>
+</template>
+```
+
+### 商品详情页面
+
+```vue
+<template>
+  <div>
+    <TopNavBar title="商品详情" :fixed="true" @back="handleBack">
+      <template #right>
+        <uni-icons type="share" size="20" color="#333" />
+      </template>
+    </TopNavBar>
+
+    <!-- 页面内容 -->
+    <div class="page-content">
+      <!-- 内容区域 -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+const handleBack = () => {
+  // 自定义返回逻辑
+  console.log("自定义返回处理");
+};
+</script>
+```
+
+## 注意事项
+
+1. **固定定位使用**：当设置 `fixed="true"` 时，组件会固定在页面顶部，此时需要为页面内容添加适当的顶部间距。
+
+2. **状态栏适配**：组件会自动获取系统状态栏高度并进行适配，无需手动处理。
+
+3. **返回按钮**：默认点击返回按钮会执行 `uni.navigateBack()`，如果需要自定义返回逻辑，请监听 `@back` 事件。
+
+4. **样式覆盖**：如需自定义样式，建议通过 props 传入颜色值，或在父组件中使用深度选择器覆盖样式。
+
+5. **插槽使用**：title 插槽会完全替换默认的标题显示，right 插槽用于添加右侧操作按钮。
+
+## 更新日志
+
+### v1.0.0
+
+- 初始版本发布
+- 支持基础导航栏功能
+- 支持固定定位配置
+- 支持自定义样式和插槽
diff --git a/src/components/TopNavBar/demo.vue b/src/components/TopNavBar/demo.vue
new file mode 100644
index 0000000..f99b2cd
--- /dev/null
+++ b/src/components/TopNavBar/demo.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="demo-container">
+    <!-- 示例1: 基础用法 -->
+    <div class="demo-section">
+      <div class="demo-title">基础用法</div>
+      <TopNavBar title="基础导航栏" />
+    </div>
+
+    <!-- 示例2: 固定在顶部 -->
+    <div class="demo-section">
+      <div class="demo-title">固定在顶部</div>
+      <TopNavBar title="固定导航栏" :fixed="true" />
+    </div>
+
+    <!-- 示例3: 自定义颜色 -->
+    <div class="demo-section">
+      <div class="demo-title">自定义颜色</div>
+      <TopNavBar
+        title="蓝色导航栏"
+        backgroundColor="#007AFF"
+        titleColor="#ffffff"
+        backIconColor="#ffffff"
+      />
+    </div>
+
+    <!-- 示例4: 隐藏返回按钮 -->
+    <div class="demo-section">
+      <div class="demo-title">隐藏返回按钮</div>
+      <TopNavBar title="无返回按钮" :showBack="false" />
+    </div>
+
+    <!-- 示例5: 标题左对齐 -->
+    <div class="demo-section">
+      <div class="demo-title">标题左对齐</div>
+      <TopNavBar title="左对齐标题" titleAlign="left" />
+    </div>
+
+    <!-- 示例6: 标题居中对齐（默认） -->
+    <div class="demo-section">
+      <div class="demo-title">标题居中对齐（默认）</div>
+      <TopNavBar title="居中对齐标题" titleAlign="center" />
+    </div>
+
+    <!-- 示例7: 使用插槽 -->
+    <div class="demo-section">
+      <div class="demo-title">使用插槽</div>
+      <TopNavBar>
+        <template #title>
+          <div class="custom-title">
+            <uni-icons type="star" size="16" color="#FFD700" />
+            <spanclass="title-text">自定义标题</text>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="right-actions">
+            <uni-icons
+              type="search"
+              size="20"
+              color="#333"
+              style="margin-right: 10px"
+            />
+            <uni-icons type="more" size="20" color="#333" />
+          </div>
+        </template>
+      </TopNavBar>
+    </div>
+
+    <!-- 示例8: 渐变背景 -->
+    <div class="demo-section">
+      <div class="demo-title">渐变背景</div>
+      <TopNavBar
+        title="渐变导航栏"
+        backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+        titleColor="#ffffff"
+        backIconColor="#ffffff"
+      />
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <div class="content-item" v-for="i in 20" :key="i">
+        <text>内容项 {{ i }}</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "./index.vue";
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.demo-title {
+  padding: 15px 20px;
+  background-color: #f8f9fa;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.custom-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .title-text {
+    margin-left: 8px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.right-actions {
+  display: flex;
+  align-items: center;
+}
+
+.content-area {
+  margin-top: 40px;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.content-item {
+  padding: 15px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  text {
+    font-size: 16px;
+    color: #666;
+  }
+}
+</style>
diff --git a/src/components/TopNavBar/index.vue b/src/components/TopNavBar/index.vue
new file mode 100644
index 0000000..75cb5b4
--- /dev/null
+++ b/src/components/TopNavBar/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div :class="navBarClass" :style="navBarStyle">
+    <!-- 状态栏占位 -->
+    <div
+      :style="{ height: statusBarHeight + 'px' }"
+      v-if="!hideStatusBar"
+    ></div>
+
+    <!-- 导航栏内容 -->
+    <div
+      class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
+      :style="{ height: navBarHeight + 'px' }"
+    >
+      <!-- 左侧返回按钮 -->
+      <div
+        class="nav-bar-left flex flex-items-center flex-justify-center"
+        v-if="showBack"
+        @click="handleBack"
+      >
+        <uni-icons type="left" size="20" :color="backIconColor" />
+      </div>
+
+      <!-- 中间标题区域 -->
+      <div
+        :class="[
+          'nav-bar-center flex flex-items-center flex-justify-center',
+          `nav-bar-center--${titleAlign}`,
+        ]"
+      >
+        <slot name="title">
+          <text
+            class="font-size-17 font-500 color-000"
+            :style="{ color: titleColor }"
+          >
+            {{ title }}
+          </text>
+        </slot>
+      </div>
+
+      <!-- 右侧操作区域 -->
+      <div class="nav-bar-right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+
+// 定义props
+const props = defineProps({
+  // 标题文本
+  title: {
+    type: String,
+    default: "",
+  },
+  // 是否固定在顶部
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示返回按钮
+  showBack: {
+    type: Boolean,
+    default: true,
+  },
+  // 背景颜色
+  background: {
+    type: String,
+    default: "$theme-color-100",
+  },
+  // 标题颜色
+  titleColor: {
+    type: String,
+    default: "#000",
+  },
+  // 返回按钮图标颜色
+  backIconColor: {
+    type: String,
+    default: "#000",
+  },
+  // 是否隐藏状态栏占位
+  hideStatusBar: {
+    type: Boolean,
+    default: false,
+  },
+  // 自定义z-index
+  zIndex: {
+    type: Number,
+    default: 999,
+  },
+  // 标题对齐方式
+  titleAlign: {
+    type: String,
+    default: "center", // 'center' | 'left'
+    validator: (value) => ["center", "left"].includes(value),
+  },
+});
+
+// 定义emits
+const emit = defineEmits(["back"]);
+
+// 系统信息
+const statusBarHeight = ref(0);
+const navBarHeight = ref(44); // 默认导航栏高度
+
+// 获取系统信息
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+
+  // 根据平台设置导航栏高度
+  if (systemInfo.platform === "ios") {
+    navBarHeight.value = 44;
+  } else {
+    navBarHeight.value = 48;
+  }
+});
+
+// 计算导航栏样式类
+const navBarClass = computed(() => {
+  return [
+    "top-nav-bar",
+    {
+      "top-nav-bar--fixed": props.fixed,
+    },
+  ];
+});
+
+// 计算导航栏样式
+const navBarStyle = computed(() => {
+  return {
+    background: props.background,
+    zIndex: props.zIndex,
+  };
+});
+
+// 处理返回事件
+const handleBack = () => {
+  emit("back");
+  // 如果没有监听back事件，默认执行返回上一页
+  if (!emit("back")) {
+    uni.navigateBack({
+      delta: 1,
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/TopNavBar/styles/index.scss b/src/components/TopNavBar/styles/index.scss
new file mode 100644
index 0000000..bbd7273
--- /dev/null
+++ b/src/components/TopNavBar/styles/index.scss
@@ -0,0 +1,49 @@
+// TopNavBar 组件样式
+.top-nav-bar {
+  width: 100%;
+  background-color: $theme-color-100;
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+  }
+}
+
+.nav-bar-left,
+.nav-bar-right {
+  width: 30px;
+  height: 30px;
+}
+
+.nav-bar-center {
+  flex: 1;
+  height: 30px;
+  padding: 0 20px; // 为左右按钮留出空间
+
+  // 居中对齐（默认）
+  &--center {
+    justify-content: center;
+
+    .nav-bar-title {
+      text-align: center;
+    }
+  }
+
+  // 左对齐
+  &--left {
+    justify-content: flex-start;
+    padding-left: 20px; // 为返回按钮留出更多空间
+
+    .nav-bar-title {
+      text-align: left;
+    }
+  }
+}
+
+// 固定导航栏时的页面内容适配
+.page-with-fixed-navbar {
+  padding-top: calc(var(--status-bar-height, 44px) + 44px);
+}
diff --git a/src/components/TopNavBar/使用指南.md b/src/components/TopNavBar/使用指南.md
new file mode 100644
index 0000000..ab692aa
--- /dev/null
+++ b/src/components/TopNavBar/使用指南.md
@@ -0,0 +1,298 @@
+# TopNavBar 组件使用指南
+
+## 组件概述
+
+TopNavBar 是一个功能完整的顶部导航栏组件，专为 uni-app 项目设计。该组件支持固定定位、自定义样式、插槽内容等功能，可以满足大部分页面的导航需求。
+
+## 核心特性
+
+### 1. 可配置固定定位
+
+- **默认行为**: 组件默认不固定，跟随页面滚动
+- **固定模式**: 设置 `fixed="true"` 可将导航栏固定在页面顶部
+- **自动适配**: 固定模式下自动处理状态栏高度和安全区域
+
+### 2. 智能状态栏适配
+
+- 自动获取系统状态栏高度
+- 支持不同平台的导航栏高度适配（iOS: 44px, Android: 48px）
+- 可选择隐藏状态栏占位区域
+
+### 3. 灵活的自定义选项
+
+- 支持自定义背景色、标题色、图标色
+- 可控制返回按钮显示/隐藏
+- 支持自定义 z-index 层级
+- 支持标题对齐方式配置（居中/左对齐）
+
+## 快速开始
+
+### 基础使用
+
+```vue
+<!-- 最简单的使用方式 -->
+<TopNavBar title="页面标题" />
+```
+
+### 固定在顶部
+
+```vue
+<!-- 固定导航栏，适合长页面滚动 -->
+<template>
+  <div class="page-container">
+    <TopNavBar title="商品详情" :fixed="true" />
+    <div class="page-content">
+      <!-- 页面内容 -->
+    </div>
+  </div>
+</template>
+
+<style>
+.page-content {
+  /* 为固定导航栏预留空间 */
+  padding-top: calc(var(--status-bar-height, 44px) + 44px);
+}
+</style>
+```
+
+### 自定义样式
+
+```vue
+<!-- 深色主题导航栏 -->
+<TopNavBar
+  title="深色导航栏"
+  backgroundColor="#1a1a1a"
+  titleColor="#ffffff"
+  backIconColor="#ffffff"
+/>
+
+<!-- 品牌色导航栏 -->
+<TopNavBar
+  title="品牌导航栏"
+  backgroundColor="#007AFF"
+  titleColor="#ffffff"
+  backIconColor="#ffffff"
+/>
+
+<!-- 左对齐标题 -->
+<TopNavBar title="左对齐标题" titleAlign="left" />
+
+<!-- 居中标题（默认） -->
+<TopNavBar title="居中标题" titleAlign="center" />
+```
+
+## 高级用法
+
+### 使用插槽自定义内容
+
+```vue
+<template>
+  <TopNavBar>
+    <!-- 自定义标题区域 -->
+    <template #title>
+      <div class="custom-title">
+        <img src="/static/logo.png" class="logo" />
+        <text class="brand-name">品牌名称</text>
+      </div>
+    </template>
+
+    <!-- 自定义右侧操作 -->
+    <template #right>
+      <div class="nav-actions">
+        <uni-icons type="search" size="20" @click="handleSearch" />
+        <uni-icons type="more" size="20" @click="showMore" />
+      </div>
+    </template>
+  </TopNavBar>
+</template>
+
+<style>
+.custom-title {
+  display: flex;
+  align-items: center;
+
+  .logo {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
+
+  .brand-name {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+</style>
+```
+
+### 监听返回事件
+
+```vue
+<template>
+  <TopNavBar title="自定义返回" @back="handleCustomBack" />
+</template>
+
+<script setup>
+const handleCustomBack = () => {
+  // 自定义返回逻辑
+  uni.showModal({
+    title: "提示",
+    content: "确定要离开当前页面吗？",
+    success: (res) => {
+      if (res.confirm) {
+        uni.navigateBack();
+      }
+    },
+  });
+};
+</script>
+```
+
+## 实际应用场景
+
+### 1. 商品详情页
+
+```vue
+<template>
+  <div class="goods-detail">
+    <TopNavBar
+      title="商品详情"
+      :fixed="true"
+      backgroundColor="rgba(255, 255, 255, 0.95)"
+    >
+      <template #right>
+        <uni-icons type="share" size="20" @click="shareGoods" />
+      </template>
+    </TopNavBar>
+
+    <div class="goods-content">
+      <!-- 商品内容 -->
+    </div>
+  </div>
+</template>
+```
+
+### 2. 订单列表页
+
+```vue
+<template>
+  <div class="order-list">
+    <TopNavBar>
+      <template #title>
+        <Tabs :tabs="orderTabs" :active="activeTab" @change="switchTab" />
+      </template>
+    </TopNavBar>
+
+    <div class="order-content">
+      <!-- 订单列表 -->
+    </div>
+  </div>
+</template>
+```
+
+### 3. 聊天页面
+
+```vue
+<template>
+  <div class="chat-page">
+    <TopNavBar title="客服小沐" :fixed="true" backgroundColor="#f8f9fa">
+      <template #right>
+        <uni-icons type="phone" size="20" @click="makeCall" />
+      </template>
+    </TopNavBar>
+
+    <div class="chat-content">
+      <!-- 聊天内容 -->
+    </div>
+  </div>
+</template>
+```
+
+## 最佳实践
+
+### 1. 固定导航栏的页面布局
+
+```scss
+// 推荐的页面结构
+.page-container {
+  .page-content {
+    // 方法1: 使用 padding-top
+    padding-top: calc(var(--status-bar-height, 44px) + 44px);
+
+    // 方法2: 使用 margin-top
+    // margin-top: calc(var(--status-bar-height, 44px) + 44px);
+  }
+}
+```
+
+### 2. 响应式设计
+
+```scss
+// 适配不同屏幕尺寸
+@media screen and (max-width: 375px) {
+  .page-content {
+    padding-top: calc(var(--status-bar-height, 44px) + 40px);
+  }
+}
+```
+
+### 3. 主题适配
+
+```vue
+<script setup>
+import { computed } from "vue";
+
+// 根据系统主题动态调整颜色
+const navBarStyle = computed(() => {
+  const isDark = uni.getSystemInfoSync().theme === "dark";
+  return {
+    backgroundColor: isDark ? "#1a1a1a" : "#ffffff",
+    titleColor: isDark ? "#ffffff" : "#333333",
+    backIconColor: isDark ? "#ffffff" : "#333333",
+  };
+});
+</script>
+
+<template>
+  <TopNavBar
+    title="自适应主题"
+    :backgroundColor="navBarStyle.backgroundColor"
+    :titleColor="navBarStyle.titleColor"
+    :backIconColor="navBarStyle.backIconColor"
+  />
+</template>
+```
+
+## 注意事项
+
+1. **固定定位的性能考虑**: 固定导航栏会创建新的层叠上下文，在复杂页面中可能影响性能
+
+2. **状态栏适配**: 在不同设备上状态栏高度可能不同，组件会自动处理，但建议在测试时验证各种设备
+
+3. **插槽内容**: 使用插槽时注意内容的响应式设计，确保在不同屏幕尺寸下都能正常显示
+
+4. **z-index 管理**: 如果页面中有其他固定定位元素，注意调整 z-index 避免层级冲突
+
+5. **返回按钮**: 默认返回行为是 `uni.navigateBack()`，如需自定义请监听 `@back` 事件
+
+## 故障排除
+
+### 常见问题
+
+**Q: 固定导航栏下的内容被遮挡了？**
+A: 需要为页面内容添加顶部间距，参考上面的最佳实践。
+
+**Q: 在某些设备上状态栏高度不正确？**
+A: 组件会自动获取状态栏高度，如果仍有问题，可以手动设置 `hideStatusBar="true"` 并自行处理。
+
+**Q: 自定义颜色不生效？**
+A: 确保传入的颜色值格式正确，支持 hex、rgb、rgba 等标准 CSS 颜色格式。
+
+**Q: 插槽内容显示异常？**
+A: 检查插槽内容的样式，确保没有影响导航栏布局的 CSS 属性。
diff --git a/src/components/UseDateRange/index.vue b/src/components/UseDateRange/index.vue
new file mode 100644
index 0000000..9b0ba7c
--- /dev/null
+++ b/src/components/UseDateRange/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="bg-white rounded-12 overflow-hidden mb-12">
+    <div class="border-box font-size-16 font-500 color-000 line-height-24 p-12">
+      使用日期
+    </div>
+    <div class="flex flex-items-center border-box">
+      <scroll-div class="date-scroll" scroll-x>
+        <div class="date-list">
+          <block v-for="item in openDateRangeList" :key="item.date">
+            <div
+              class="date-item"
+              :class="{ selected: isSameDate(selectedDate, item.date) }"
+              @click="onDateClick(item)"
+            >
+              <div class="label font-size-12">{{ item.weekDesc }}</div>
+              <div class="md font-size-16 font-600">
+                {{ formatMD(item.date) }}
+              </div>
+              <div class="status font-size-12">{{ item.canOrder }}</div>
+              <div v-if="isSameDate(selectedDate, item.date)" class="check">
+                ✔
+              </div>
+            </div>
+          </block>
+        </div>
+      </scroll-div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  selectedDate: { type: String, default: null },
+  openDateRangeList: { type: Array, default: () => [] },
+});
+const emit = defineEmits(["update:selectedDate"]);
+const selectedDate = ref(props.selectedDate);
+
+watch(
+  () => props.selectedDate,
+  (v) => {
+    selectedDate.value = v;
+  },
+);
+
+const isSameDate = (a, b) => {
+  if (!a || !b) return false;
+  return a === b;
+};
+
+// 格式化展示日期，将 2026-04-13 转换为 04-13
+const formatMD = (dateStr) => {
+  if (!dateStr || typeof dateStr !== "string") return "";
+  const parts = dateStr.split("-");
+  if (parts.length >= 3) {
+    return `${parts[1]}-${parts[2]}`;
+  }
+  return dateStr;
+};
+
+const onDateClick = (item) => {
+  const date = item.date;
+  if (selectedDate.value === date) {
+    selectedDate.value = null;
+  } else {
+    selectedDate.value = date;
+  }
+  console.log("selectedDate:", selectedDate.value);
+  emit("update:selectedDate", selectedDate.value);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/components/UseDateRange/styles/index.scss b/src/components/UseDateRange/styles/index.scss
new file mode 100644
index 0000000..e03ad34
--- /dev/null
+++ b/src/components/UseDateRange/styles/index.scss
@@ -0,0 +1,62 @@
+.date-scroll {
+  width: 100%;
+}
+.date-list {
+  display: flex;
+  padding: 8px 12px 12px;
+}
+.date-item {
+  width: 76px;
+  min-width: 76px;
+  height: 86px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
+  margin-right: 12px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.date-item .label { 
+  margin-bottom: 6px; 
+  color: #999; 
+}
+.date-item .md { 
+  margin-bottom: 6px; 
+  color: #000; 
+}
+.date-item .status { 
+  font-size: 12px; 
+  color: #999; }
+.date-item.selected {
+  border: 1px solid $theme-color-500;
+  background: $theme-color-50;
+}
+.date-item.selected .label,
+.date-item.selected .md,
+.date-item.selected .status {
+  color: $theme-color-500;
+}
+.date-item.disabled {
+  opacity: 0.45;
+}
+.date-item .check {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: $theme-color-500;
+  color: #fff;
+  width: 18px;
+  height: 18px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+}
\ No newline at end of file
diff --git a/src/pages/booking/components/ConactSection/index.vue b/src/pages/booking/components/ConactSection/index.vue
new file mode 100644
index 0000000..87c8501
--- /dev/null
+++ b/src/pages/booking/components/ConactSection/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <!-- 选择数量 -->
+  <div class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12">
+    <div class="flex-full">
+      <div class="font-size-16 font-500 color-000 line-height-24">选择数量</div>
+      <div class="font-size-12 color-A3A3A3 line-height-16">请选择套餐数量</div>
+    </div>
+    <div class="right">
+      <Stepper v-model="count" />
+    </div>
+  </div>
+
+  <!-- 使用日期 -->
+  <UseDateRange
+    v-if="orderData.reservationEnabled"
+    :openDateRangeList="orderData.openDateRangeList"
+    v-model:selectedDate="reservationDate"
+  />
+
+  <!-- 联系方式 -->
+  <div class="bg-white rounded-12 overflow-hidden">
+    <div
+      class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
+    >
+      联系方式
+    </div>
+    <div class="flex flex-items-center border-box p-12">
+      <div class="font-size-14 font-500 color-525866 mr-12">联系人姓名</div>
+      <div class="right">
+        <input
+          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].visitorName"
+          placeholder="请输入联系人"
+          maxlength="20"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-items-center border-box p-12">
+      <div class="font-size-14 font-500 color-525866 mr-12">手机号码</div>
+      <div class="right">
+        <input
+          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].contactPhone"
+          placeholder="请输入联系手机"
+          maxlength="11"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+import UseDateRange from "@/components/UseDateRange/index.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Array,
+    default: () => [{ visitorName: "", contactPhone: "" }],
+  },
+  reservationDate: {
+    type: String,
+    default: null,
+  },
+  orderData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+const reservationDate = computed({
+  get: () => props.reservationDate,
+  set: (val) => {
+    emit("update:reservationDate", val);
+  },
+});
+</script>
+
+<style></style>
diff --git a/src/pages/booking/components/FooterSection/index.vue b/src/pages/booking/components/FooterSection/index.vue
new file mode 100644
index 0000000..88e76f8
--- /dev/null
+++ b/src/pages/booking/components/FooterSection/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <div
+    class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
+  >
+    <span
+      class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
+    >
+      {{ totalAmt }}
+    </span>
+    <!-- <div class="flex flex-items-center" @click="emit('detailClick')">
+      <span class="font-size-12 color-A3A3A3 mr-4">明细</span>
+      <uni-icons type="up" size="16" color="#A3A3A3" />
+    </div> -->
+    <div
+      class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
+      @click="handleBooking"
+    >
+      <img
+        class="icon"
+        src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
+      />
+      <span class="font-size-16 font-500 color-white">立即支付</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
+import { DebounceUtils } from "@/utils";
+import { preOrder } from "@/request/api/OrderApi";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  orderData: {
+    type: Object,
+    default: () => {},
+  },
+  selectedDate: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits(["detailClick", "payClick"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+
+watch(
+  () => count.value,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      preOrderPay();
+    }
+  },
+);
+
+onMounted(() => {
+  preOrderPay();
+});
+
+const totalAmt = ref(props.orderData.specificationPrice);
+
+const preOrderPay = async () => {
+  preOrder({
+    commodityId: props.orderData.commodityId,
+    purchaseAmount: count.value,
+    checkInData: props.selectedDate.startDate,
+    checkOutData: props.selectedDate.endDate,
+  })
+    .then((res) => {
+      console.log("预支付金额计算结果:", res);
+      totalAmt.value = res.data.payAmt;
+    })
+    .catch((err) => {
+      console.error("预支付金额计算失败:", err);
+    });
+};
+
+const handleBooking = DebounceUtils.createDebounce(() => {
+  emit("payClick", props.orderData);
+}, 1000);
+</script>
+
+<style scoped lang="scss">
+.booking-footer {
+  border-radius: 15px 15px 0 0;
+  padding: 12px 12px 42px;
+}
+
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.btn {
+  width: 120px;
+  height: 48px;
+  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
+}
+
+.icon {
+  height: 48px;
+  width: 34px;
+}
+</style>
diff --git a/src/pages/booking/components/UserSection/index.vue b/src/pages/booking/components/UserSection/index.vue
new file mode 100644
index 0000000..19f0546
--- /dev/null
+++ b/src/pages/booking/components/UserSection/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="bg-white rounded-12 overflow-hidden mb-12">
+    <div class="flex flex-items-center border-box p-12 border-bottom">
+      <div class="font-size-16 font-500 color-000 line-height-24 flex-full">
+        入住信息
+      </div>
+      <div class="right">
+        <Stepper v-model="count" unit="间" />
+      </div>
+    </div>
+
+    <div class="border-box pl-12 pr-12">
+      <div
+        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
+        v-for="(item, index) in userFormList"
+        :key="index"
+      >
+        <div class="font-size-14 font-500 color-525866 mr-12">住客姓名</div>
+        <div class="right">
+          <input
+            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model.trim="item.visitorName"
+            placeholder="请输入姓名"
+            maxlength="11"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-items-center border-box pt-12 pb-12">
+        <div class="font-size-14 font-500 color-525866 mr-12">联系手机</div>
+        <div class="right">
+          <input
+            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model.trim="userFormList[0].contactPhone"
+            placeholder="请输入联系手机"
+            maxlength="11"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Object,
+    default: () => ({
+      visitorName: "",
+      contactPhone: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+</script>
+
+<style></style>
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
new file mode 100644
index 0000000..df09382
--- /dev/null
+++ b/src/pages/booking/index.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="booking h-screen flex flex-col">
+    <TopNavBar
+      titleAlign="center"
+      :backgroundColor="$theme - color - 100"
+      backIconColor="#000"
+      :shadow="false"
+    >
+      <template #title>
+        {{ GOODS_TYPE[orderData.orderType] }}
+      </template>
+    </TopNavBar>
+
+    <div
+      class="booking-content flex-full border-box p-12 overflow-hidden scroll-y"
+    >
+      <!-- 预约内容 -->
+      <div class="border-box bg-white p-12 rounded-12 mb-12">
+        <!-- 酒店类型入住离店日期部分 -->
+        <DateRangeSection
+          v-if="orderData.orderType == 0"
+          :selectedDate="selectedDate"
+          :showBtn="true"
+          @click="navigateToDetail(orderData)"
+        />
+
+        <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
+          {{ orderData.commodityName }}
+        </div>
+
+        <div class="border-box border-bottom">
+          <div class="font-size-12 color-99A0AE line-height-16 pb-12 break-all">
+            {{ orderData.commodityDescription }}
+          </div>
+
+          <!-- 权益部分 -->
+          <div class="flex flex-items-center mb-8">
+            <span
+              class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+              v-for="(item, index) in orderData.commodityFacilityList"
+              :key="index"
+            >
+              {{ item }}
+            </span>
+          </div>
+        </div>
+
+        <div
+          class="border-box flex flex-items-center flex-justify-between pt-12"
+        >
+          <span class="font-size-12 color-525866 line-height-18"
+            >取消政策及说明</span
+          >
+          <div class="flex flex-items-center">
+            <span
+              class="font-size-12 theme-color-500 line-height-16"
+              @click="refundVisible = true"
+              >取消政策</span
+            >
+            <uni-icons type="right" size="15" color="#99A0AE" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 非酒店类型 -->
+      <ContactSection
+        v-if="orderData.orderType != 0"
+        v-model="quantity"
+        :userFormList="userFormList"
+        v-model:reservationDate="selectedReservationDate"
+        :orderData="orderData"
+      />
+
+      <!-- 酒店类型 -->
+      <UserSection
+        v-if="orderData.orderType == 0"
+        v-model="quantity"
+        :userFormList="userFormList"
+      />
+    </div>
+
+    <!-- 底部 -->
+    <FooterSection
+      v-if="Object.keys(orderData).length"
+      v-model="quantity"
+      :selectedDate="selectedDate"
+      :orderData="orderData"
+      @detailClick="detailVisible = true"
+      @payClick="handlePayClick"
+    />
+
+    <!-- 取消政策弹窗 -->
+    <RefundPopup v-model="refundVisible" :orderData="orderData" />
+
+    <!-- 明细弹窗 -->
+    <DetailPopup v-model="detailVisible" :orderData="orderData" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import DateRangeSection from "@/components/DateRangeSection/index.vue";
+import ContactSection from "./components/ConactSection/index.vue";
+import UserSection from "./components/UserSection/index.vue";
+import RefundPopup from "@/components/RefundPopup/index.vue";
+import DetailPopup from "@/components/DetailPopup/index.vue";
+import FooterSection from "./components/FooterSection/index.vue";
+import { goodsDetail, orderPay } from "@/request/api/GoodsApi";
+import { useSelectedDateStore } from "@/store";
+import { GOODS_TYPE } from "@/constant/type";
+import { ThrottleUtils, PhoneUtils } from "@/utils";
+
+const refundVisible = ref(false);
+const detailVisible = ref(false);
+const orderData = ref({});
+const selectedDate = ref({
+  startDate: "",
+  endDate: "",
+  totalDays: 1,
+});
+const quantity = ref(1);
+const selectedReservationDate = ref("");
+
+// 工具函数
+const createEmptyUserForm = () => ({ visitorName: "", contactPhone: "" });
+const userFormList = ref([createEmptyUserForm()]);
+const isDeleting = ref(false); // 标志位，防止删除时watch冲突
+
+// 监听 quantity 变化，动态调整 userFormList
+watch(
+  quantity,
+  async (newQuantity) => {
+    // 只有在酒店类型（orderType == 0）时才动态调整 userFormList
+    if (orderData.value.orderType !== 0) return;
+
+    // 如果正在执行删除操作，跳过watch逻辑
+    if (isDeleting.value) {
+      isDeleting.value = false;
+      return;
+    }
+
+    const currentLength = userFormList.value.length;
+
+    if (newQuantity > currentLength) {
+      // 数量增加，添加新的表单项
+      const newForms = Array.from({ length: newQuantity - currentLength }, () =>
+        createEmptyUserForm(),
+      );
+      userFormList.value.push(...newForms);
+    } else if (newQuantity < currentLength) {
+      // 数量减少，删除多余的表单项
+      userFormList.value.splice(newQuantity);
+    }
+
+    // 等待DOM更新完成
+    await nextTick();
+  },
+  { immediate: false },
+);
+
+onLoad((options) => {
+  const { commodityId } = options;
+
+  getGoodsDetail(commodityId);
+});
+
+onShow(() => {
+  const selectedDateStore = useSelectedDateStore();
+
+  selectedDate.value.startDate = selectedDateStore.selectedDate.startDate;
+  selectedDate.value.endDate = selectedDateStore.selectedDate.endDate;
+  selectedDate.value.totalDays = selectedDateStore.selectedDate.totalDays;
+});
+
+const getGoodsDetail = async (commodityId) => {
+  const res = await goodsDetail({ commodityId });
+
+  console.log("获取商品详情", res);
+
+  orderData.value = res.data;
+  // 取commodityFacilityList前3个
+  orderData.value.commodityFacilityList = res.data.commodityFacilityList.slice(
+    0,
+    3,
+  );
+};
+
+// 跳转商品详情
+const navigateToDetail = ({ commodityId }) => {
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${commodityId}`,
+  });
+};
+
+// 验证用户姓名
+const validateUserForms = () => {
+  const invalidUsers = userFormList.value.filter((user) => {
+    return user.visitorName.trim() === "";
+  });
+
+  if (invalidUsers.length) {
+    uni.showToast({ title: "请填写姓名", icon: "none" });
+    return false;
+  }
+
+  return true;
+};
+
+// 处理支付点击事件
+const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
+  console.log("处理支付点击事件", userFormList.value);
+  // 预约日期，酒店类型不需要
+  if (orderData.value.reservationEnabled) {
+    if (!selectedReservationDate.value) {
+      uni.showToast({ title: "请选择预约日期", icon: "none" });
+      return;
+    }
+  }
+
+  // 校验用户姓名
+  if (!validateUserForms()) {
+    return;
+  }
+
+  // 校验手机号
+  if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
+    uni.showToast({ title: "请输入正确的手机号", icon: "none" });
+    return;
+  }
+
+  // 购买的商品id
+  const commodityId = goodsData.commodityId;
+  // 消费者信息
+  const consumerInfoEntityList = userFormList.value;
+  // 购买数量
+  const purchaseAmount = quantity.value;
+  // 支付方式 0-微信 1-支付宝 2-云闪付
+  const payWay = "0";
+  // 支付渠道 0-app 1-小程序 2-h5
+  const paySource = "1";
+
+  const params = {
+    commodityId,
+    purchaseAmount,
+    payWay,
+    paySource,
+    consumerInfoEntityList,
+  };
+
+  // 预约日期，酒店类型不需要
+  if (orderData.value.reservationEnabled) {
+    params.reservationDate = selectedReservationDate.value;
+  }
+
+  //酒店类型添加入住时间、离店时间
+  if (goodsData.orderType == 0 && selectedDate.value) {
+    const { startDate, endDate } = selectedDate.value;
+    // 入住时间
+    params.checkInData = startDate;
+    // 离店时间
+    params.checkOutData = endDate;
+  }
+
+  // 点击后立即展示 loading
+  uni.showLoading({ title: "正在提交订单..." });
+  const res = await orderPay(params);
+  console.log("确认订单---2:", res);
+  uni.hideLoading();
+
+  // 检查接口返回数据
+  if (!res || !res.data) {
+    uni.hideLoading();
+    setTimeout(() => {
+      uni.showToast({
+        title: res.msg || "订单创建失败，请重试",
+        icon: "none",
+      });
+    }, 100);
+    return;
+  }
+
+  const { data } = res;
+  const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+  // 验证支付参数是否完整
+  if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+    uni.hideLoading();
+    setTimeout(() => {
+      uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
+    }, 100);
+    return;
+  }
+
+  // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+  uni.hideLoading();
+
+  // #ifdef MP-WEIXIN
+  // 调用微信支付
+  uni.requestPayment({
+    provider: "wxpay",
+    timeStamp: String(timeStamp), // 确保为字符串类型
+    nonceStr: String(nonceStr),
+    package: String(packageVal), // 确保为字符串类型
+    signType: String(signType),
+    paySign: String(paySign),
+    success: () => {
+      uni.showToast({
+        title: "支付成功",
+        icon: "success",
+        success: () => {
+          uni.navigateTo({
+            url: "/pages-order/order/list",
+          });
+        },
+      });
+    },
+    fail: (e) => {
+      console.error("支付失败：", e);
+      uni.showToast({ title: "支付失败，请重试", icon: "none" });
+    },
+  });
+  // #endif
+
+  // #ifdef APP-PLUS
+  uni.showModal({
+    title: "提示",
+    content: "支付功能开发中",
+    showCancel: false,
+  });
+  // #endif
+}, 1000);
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/booking/styles/index.scss b/src/pages/booking/styles/index.scss
new file mode 100644
index 0000000..d51d90b
--- /dev/null
+++ b/src/pages/booking/styles/index.scss
@@ -0,0 +1,4 @@
+.booking {
+  background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%) 0 86px / 100%
+    100px no-repeat;
+}
diff --git a/src/pages/bridge/SaveImage.vue b/src/pages/bridge/SaveImage.vue
new file mode 100644
index 0000000..8a6d137
--- /dev/null
+++ b/src/pages/bridge/SaveImage.vue
@@ -0,0 +1,26 @@
+<template></template>
+<style scoped></style>
+<script setup>
+import { onMounted } from "vue";
+import { saveImageToAlbum } from "@/pages/webdiv/bridge.js";
+
+onMounted(() => {
+  // 获取页面参数
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options;
+
+  if (options.imageUrl) {
+    const imageUrl = decodeURIComponent(options.imageUrl);
+    saveImage(imageUrl);
+  }
+});
+
+const saveImage = async (imageUrl) => {
+  try {
+    await saveImageToAlbum(imageUrl);
+  } catch (e) {}
+
+  uni.navigateBack();
+};
+</script>
diff --git a/src/pages/bridge/UploadImage.vue b/src/pages/bridge/UploadImage.vue
new file mode 100644
index 0000000..08ae2c4
--- /dev/null
+++ b/src/pages/bridge/UploadImage.vue
@@ -0,0 +1,25 @@
+<template></template>
+
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { chooseAndUploadImage } from "@/pages/webdiv/bridge.js";
+
+onLoad(() => {
+  handleChoose();
+});
+
+const sendResult = (imageUrl) => {
+  // 触发全局事件
+  uni.$emit("UPLOAD_RESULT", imageUrl);
+};
+const handleChoose = async () => {
+  try {
+    const imageUrl = await chooseAndUploadImage();
+    sendResult(imageUrl);
+  } catch (e) {
+    sendResult("error");
+  }
+
+  uni.navigateBack();
+};
+</script>
diff --git a/src/pages/quick/index.vue b/src/pages/goods/README.md
similarity index 100%
rename from src/pages/quick/index.vue
rename to src/pages/goods/README.md
diff --git a/src/pages/goods/album/index.vue b/src/pages/goods/album/index.vue
new file mode 100644
index 0000000..5a05fb4
--- /dev/null
+++ b/src/pages/goods/album/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
+    <TopNavBar title="房间相册" backgroundColor="transparent" />
+    <div class="p-8">
+      <span class="ml-4 font-size-18 color-171717 font-500"
+        >全部({{ albumList.length }})</span
+      >
+    </div>
+
+    <scroll-div scroll-y class="scroll-container overflow-auto">
+      <div class="pl-4 pr-4 pb-24">
+        <div class="grid-container">
+          <div
+            class="album-item"
+            v-for="(item, index) in albumList"
+            :key="index"
+          >
+            <div class="album-image-wrapper">
+              <img
+                class="album-image"
+                :src="item.photoUrl"
+                mode="aspectFill"
+                @click="handlePrediv(item.photoUrl)"
+              ></image>
+              <div class="album-title">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </scroll-div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { usePictureStore } from "@/store";
+const pictureStore = usePictureStore();
+
+const albumList = ref([]);
+
+onLoad(() => {
+  albumList.value = pictureStore.predivImageData;
+  pictureStore.setPredivImageData([]);
+});
+
+// 处理图片预览
+const handlePrediv = (photoUrl) => {
+  uni.predivImage({
+    current: photoUrl,
+    urls: albumList.value.map((item) => item.photoUrl),
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); // 每行2列
+  grid-gap: 8px;
+  padding: 12px;
+}
+
+.album-item {
+  position: relative;
+  width: 100%;
+}
+
+.album-image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1; // 保持宽高1:1
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.album-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.album-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  span-overflow: ellipsis;
+  border-radius: 0 0 8px 8px;
+}
+</style>
diff --git a/src/pages/goods/components/DateSelector/index.vue b/src/pages/goods/components/DateSelector/index.vue
new file mode 100644
index 0000000..766d928
--- /dev/null
+++ b/src/pages/goods/components/DateSelector/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="date-selector" @click="showCalendar">
+    <div class="date-item">
+      <div class="date-label">入住日期</div>
+      <div class="date-box">
+        <div class="date-content">
+          <span class="date-span">{{ checkInDate }}</span>
+          <span class="day-span">{{ checkInDay }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="nights-info">
+      <span class="nights-span">{{ nights }}晚</span>
+    </div>
+
+    <div class="date-item">
+      <div class="date-label">退房日期</div>
+      <div class="date-box">
+        <div class="date-content">
+          <span class="date-span">{{ checkOutDate }}</span>
+          <span class="day-span">{{ checkOutDay }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+// 定义事件
+const emit = defineEmits(["showCalendar"]);
+
+// 定义方法
+const showCalendar = () => {
+  emit("showCalendar");
+};
+
+// Props定义
+const props = defineProps({
+  checkInDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkOutDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkInDay: {
+    type: String,
+    default: "周一",
+  },
+  checkOutDay: {
+    type: String,
+    default: "周一",
+  },
+  nights: {
+    type: Number,
+    default: 1,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/goods/components/DateSelector/styles/index.scss b/src/pages/goods/components/DateSelector/styles/index.scss
new file mode 100644
index 0000000..ab0aaa5
--- /dev/null
+++ b/src/pages/goods/components/DateSelector/styles/index.scss
@@ -0,0 +1,64 @@
+.date-selector {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin: 12px 0;
+  padding: 0 12px;
+}
+
+.date-item {
+  flex: 1;
+  position: relative;
+}
+
+.date-label {
+  position: absolute;
+  top: -12rpx;
+  left: 24rpx;
+  font-size: 20rpx;
+  color: $uni-text-color-grey;
+  background-color: $uni-bg-color;
+  padding: 0 8rpx;
+  z-index: 1;
+}
+
+.date-box {
+  padding: 20rpx 24rpx;
+  background-color: $uni-bg-color;
+  border-radius: 16rpx;
+  border: 2rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.date-content {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+}
+
+.date-text {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: $uni-text-color;
+}
+
+.day-text {
+  font-size: 20rpx;
+  color: #666666;
+}
+
+.nights-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80rpx;
+  margin: 0 16rpx;
+  margin-bottom: 20rpx;
+}
+
+.nights-text {
+  font-size: 24rpx;
+  color: #666666;
+}
diff --git a/src/pages/goods/components/GoodConfirm/README.md b/src/pages/goods/components/GoodConfirm/README.md
new file mode 100644
index 0000000..2bed92e
--- /dev/null
+++ b/src/pages/goods/components/GoodConfirm/README.md
@@ -0,0 +1,300 @@
+# GoodConfirm 商品确认组件
+
+基于 uni-popup 弹出层的商品确认组件，提供优雅的商品购买确认界面。
+
+## 功能特性
+
+- 🎨 **现代化设计** - 采用底部弹出设计，符合移动端交互习惯
+- 📱 **响应式布局** - 完美适配各种屏幕尺寸
+- 🛒 **商品信息展示** - 支持商品图片、标题、价格、标签展示
+- 🔢 **数量选择** - 提供加减按钮和手动输入两种方式
+- 👥 **动态表单管理** - 根据数量自动添加/删除游客信息表单
+- 📝 **表单数据绑定** - 支持姓名和手机号的双向绑定
+- 📱 **横向滚动支持** - 游客信息区域支持横向滚动浏览多个表单
+- 🗑️ **删除表单支持** - 支持删除游客信息表单，自动同步数量和列表长度
+- 💰 **实时计算** - 自动计算并显示总价
+- ⚡ **性能优化** - 基于 Vue 3 Composition API，性能卓越
+- 🎭 **动画效果** - 流畅的弹出和交互动画
+- 🔧 **高度可配置** - 支持自定义商品数据和事件处理
+
+## 基础用法
+
+### 默认使用
+
+```vue
+<template>
+  <div>
+    <button @click="showConfirm">显示确认弹窗</button>
+
+    <GoodConfirm
+      ref="confirmRef"
+      :goodsData="goodsData"
+      @confirm="handleConfirm"
+      @close="handleClose"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import GoodConfirm from "@/pages/goods/components/GoodConfirm/index.vue";
+
+const confirmRef = ref(null);
+const goodsData = ref({
+  commodityName: "【成人票】云从朵花温泉门票",
+  price: 399,
+  timeTag: "随时可退",
+  commodityPhotoList: [
+    {
+      photoUrl: "/static/test/mk_img_1.png",
+    },
+  ],
+});
+
+const showConfirm = () => {
+  confirmRef.value?.showPopup();
+};
+
+const handleConfirm = (orderData) => {
+  console.log("确认订单:", orderData);
+  // orderData 包含:
+  // {
+  //   goodsData: 商品数据,
+  //   quantity: 购买数量,
+  //   totalPrice: 总价,
+  //   userFormList: 游客信息列表 [{ name: '', phone: '' }, ...]
+  // }
+};
+
+const handleClose = () => {
+  console.log("关闭弹窗");
+};
+</script>
+```
+
+### 自定义商品数据
+
+```vue
+<script setup>
+const customGoodsData = ref({
+  commodityName: "【亲子套票】海洋世界一日游",
+  price: 268,
+  timeTag: "限时优惠",
+  commodityPhotoList: [
+    {
+      photoUrl: "/path/to/custom/image.jpg",
+    },
+  ],
+});
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 属性名    | 类型   | 默认值 | 说明         |
+| --------- | ------ | ------ | ------------ |
+| goodsData | Object | {}     | 商品数据对象 |
+
+#### goodsData 对象结构
+
+```typescript
+interface GoodsData {
+  commodityName?: string; // 商品名称
+  price?: number; // 商品价格
+  timeTag?: string; // 时间标签（如：随时可退）
+  commodityPhotoList?: Array<{
+    // 商品图片列表
+    photoUrl: string; // 图片URL
+  }>;
+}
+```
+
+### Events
+
+| 事件名  | 参数      | 说明           |
+| ------- | --------- | -------------- |
+| confirm | orderData | 确认购买时触发 |
+| close   | -         | 关闭弹窗时触发 |
+
+#### confirm 事件参数
+
+```typescript
+interface OrderData {
+  goodsData: GoodsData; // 商品数据
+  quantity: number; // 购买数量
+  totalPrice: string; // 总价（字符串格式）
+  userFormList: Array<{
+    // 游客信息列表
+    name: string; // 游客姓名
+    phone: string; // 游客手机号
+  }>;
+}
+```
+
+### Methods
+
+| 方法名     | 参数 | 说明     |
+| ---------- | ---- | -------- |
+| showPopup  | -    | 显示弹窗 |
+| closePopup | -    | 关闭弹窗 |
+
+## 样式定制
+
+组件使用 SCSS 编写样式，支持以下自定义变量：
+
+```scss
+// 主色调
+$primary-color: #ff6b35;
+$primary-gradient: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
+
+// 文字颜色
+$text-primary: #333;
+$text-secondary: #666;
+
+// 背景颜色
+$bg-white: #fff;
+$bg-gray: #f8f9fa;
+$border-color: #f5f5f5;
+
+// 圆角
+$border-radius: 8px;
+$border-radius-large: 20px;
+```
+
+## 高级用法
+
+### 响应式数据绑定
+
+```vue
+<script setup>
+import { computed } from "vue";
+
+const goodsData = computed(() => ({
+  commodityName: store.currentGoods.name,
+  price: store.currentGoods.price,
+  timeTag: store.currentGoods.refundPolicy,
+  commodityPhotoList: store.currentGoods.images,
+}));
+</script>
+```
+
+### 订单处理集成
+
+```vue
+<script setup>
+import { createOrder } from "@/api/order";
+
+const handleConfirm = async (orderData) => {
+  try {
+    uni.showLoading({ title: "处理中..." });
+
+    const result = await createOrder({
+      commodityId: goodsData.value.id,
+      quantity: orderData.quantity,
+      totalAmount: orderData.totalPrice,
+    });
+
+    uni.hideLoading();
+    uni.showToast({ title: "订单创建成功", icon: "success" });
+
+    // 跳转到支付页面
+    uni.navigateTo({
+      url: `/pages/payment/index?orderId=${result.orderId}`,
+    });
+  } catch (error) {
+    uni.hideLoading();
+    uni.showToast({ title: "订单创建失败", icon: "error" });
+  }
+};
+</script>
+```
+
+## 注意事项
+
+1. **依赖要求**：组件依赖 `uni-popup` 和 `uni-icons`，请确保项目中已安装相关依赖
+2. **图片资源**：请确保商品图片路径正确，建议使用绝对路径或网络图片
+3. **数量限制**：组件默认最小购买数量为 1，可根据业务需求调整
+4. **价格格式**：价格支持数字类型，组件内部会自动处理格式化
+5. **事件处理**：建议在 `confirm` 事件中添加适当的错误处理和用户反馈
+6. **表单管理**：游客信息表单会根据购买数量自动调整，无需手动管理
+
+## 更新日志
+
+### v1.4.2 (2024-12-19)
+
+**修复Stepper组件响应性问题**
+
+- 🐛 修复Stepper组件不响应外部modelValue变化的问题
+- 🔄 添加watch监听器，确保Stepper组件能实时同步外部值变化
+- ✨ 完善删除表单卡片时Stepper显示值的自动更新
+- 🎯 提升组件间数据同步的准确性和实时性
+
+### v1.4.1 (2024-12-19)
+
+**修复quantity更新问题**
+
+- 🐛 修复删除表单时quantity值未正确更新的问题
+- 🔧 优化watch监听器逻辑，添加删除标志位防止冲突
+- 🎯 改进deleteUserForm方法，确保数据同步准确
+- 🔍 增强demo页面调试信息，便于测试验证
+
+### v1.4.0
+
+- 🗑️ **新增删除功能** - 支持点击删除图标删除游客信息表单
+- 🔄 **智能数量同步** - 删除表单时自动同步quantity数量和userFormList长度
+- 🛡️ **最小限制保护** - 确保至少保留一位游客信息，防止全部删除
+- 🎯 **动态图标控制** - 只有多于一个表单时才显示删除图标
+- 📱 **用户体验优化** - 删除操作提供友好的提示信息
+
+### v1.3.0
+
+- 🚫 **防换行优化** - 确保FormCard组件在任何情况下都不会换行显示
+- 📐 **布局增强** - 添加flex-shrink: 0确保表单卡片保持固定宽度
+- 🎯 **滚动优化** - 改进横向滚动体验，支持触摸滚动
+- 🧪 **测试改进** - demo页面新增多人数测试按钮，便于测试横向滚动效果
+
+### v1.2.0
+
+- 📱 **新增横向滚动** - 游客信息区域支持横向滚动浏览多个表单
+- 🎨 **优化布局设计** - 表单卡片采用固定宽度，提升视觉体验
+- 🔧 **改进滚动体验** - 隐藏滚动条，提供更清爽的界面
+- 📐 **响应式优化** - 确保在不同屏幕尺寸下的良好表现
+
+### v1.1.0
+
+- 🎉 **新增动态表单管理** - 根据购买数量自动添加/删除游客信息表单
+- 📝 **新增表单数据绑定** - 支持游客姓名和手机号的双向绑定
+- 🔄 **优化数据结构** - 确认订单时返回完整的用户信息列表
+- 🎯 **改进用户体验** - 表单项数量与购买数量实时同步
+- 🐛 **修复已知问题** - 优化组件初始化和数据更新逻辑
+
+### v1.0.0 (2024-01-XX)
+
+- ✨ 初始版本发布
+- 🎨 基于 uni-popup 的底部弹出设计
+- 🛒 完整的商品信息展示功能
+- 🔢 数量选择和总价计算
+- 📱 响应式移动端适配
+- 🎭 流畅的动画效果
+- 📚 完整的文档和示例
+
+## 技术栈
+
+- **框架**: Vue 3 + Composition API
+- **UI组件**: uni-app + uni-ui
+- **样式**: SCSS
+- **构建工具**: Vite
+
+## 浏览器支持
+
+- iOS Safari 10+
+- Android Chrome 50+
+- 微信小程序
+- 支付宝小程序
+- H5 现代浏览器
+
+## 许可证
+
+MIT License
diff --git a/src/pages/goods/components/GoodConfirm/demo.vue b/src/pages/goods/components/GoodConfirm/demo.vue
new file mode 100644
index 0000000..6ea4f56
--- /dev/null
+++ b/src/pages/goods/components/GoodConfirm/demo.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <spanclass="demo-title">GoodConfirm 组件演示</text>
+    </div>
+
+    <div class="demo-section">
+      <div class="section-title">基础用法</div>
+      <button class="demo-btn" @click="showConfirm">显示商品确认弹窗</button>
+      <button
+        class="demo-btn"
+        @click="setQuantity(5)"
+        style="margin-left: 12px"
+      >
+        设置5人测试横向滚动
+      </button>
+    </div>
+
+    <div class="demo-section">
+      <div class="section-title">当前状态</div>
+      <div class="status-info">
+        <text>Stepper数量: {{ quantity }}</text>
+        <text>表单项数量: {{ userFormCount }}</text>
+        <text>总价: ¥{{ totalPrice }}</text>
+        <spanclass="debug-info">实时quantity值: {{ quantity }}</text>
+        <spanclass="feature-highlight">✨ 支持横向滚动浏览多个游客信息</text>
+        <spanclass="feature-highlight"
+          >🗑️ 支持删除游客信息（至少保留一位）</text
+        >
+      </div>
+    </div>
+
+    <div class="demo-section" v-if="lastOrderData">
+      <div class="section-title">最后提交的数据</div>
+      <div class="order-data">
+        <text>商品: {{ lastOrderData.goodsData.commodityName }}</text>
+        <text>数量: {{ lastOrderData.quantity }}</text>
+        <text>总价: ¥{{ lastOrderData.totalPrice }}</text>
+        <text>用户信息:</text>
+        <div class="user-list">
+          <div
+            v-for="(user, index) in lastOrderData.userFormList"
+            :key="index"
+            class="user-item"
+          >
+            <text
+              >游客{{ index + 1 }}: {{ user.name || "未填写" }} -
+              {{ user.phone || "未填写" }}</text
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <GoodConfirm
+      ref="confirmRef"
+      :goodsData="goodsData"
+      @confirm="handleConfirm"
+      @close="handleClose"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import GoodConfirm from "./index.vue";
+
+const confirmRef = ref(null);
+const quantity = ref(1);
+const userFormCount = ref(1);
+const lastOrderData = ref(null);
+
+const goodsData = ref({
+  commodityName: "云从朵花温泉票（成人票）",
+  price: 70,
+  timeTag: "条件退款",
+  commodityPhotoList: [
+    {
+      photoUrl: "/static/test/mk_img_1.png",
+    },
+  ],
+});
+
+const totalPrice = computed(() => {
+  return (goodsData.value.price * quantity.value).toFixed(0);
+});
+
+const showConfirm = () => {
+  confirmRef.value?.showPopup();
+};
+
+const handleConfirm = (orderData) => {
+  console.log("确认订单:", orderData);
+  lastOrderData.value = orderData;
+  quantity.value = orderData.quantity;
+  userFormCount.value = orderData.userFormList.length;
+
+  uni.showToast({
+    title: "订单确认成功",
+    icon: "success",
+  });
+};
+
+const handleClose = () => {
+  console.log("弹窗关闭");
+};
+
+const setQuantity = (num) => {
+  quantity.value = num;
+  userFormCount.value = num;
+  // 如果弹窗已打开，需要通过组件内部的quantity来更新
+  if (confirmRef.value) {
+    // 这里可以通过ref访问组件内部状态，但由于组件封装，我们通过重新打开来演示
+    uni.showToast({
+      title: `已设置${num}人，请重新打开弹窗查看效果`,
+      icon: "none",
+      duration: 2000,
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 30px;
+
+  .demo-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.demo-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 15px;
+  }
+}
+
+.demo-btn {
+  width: 100%;
+  height: 48px;
+  background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
+  color: #fff;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
+
+  &:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
+  }
+
+  &::after {
+    border: none;
+  }
+}
+
+.status-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  text {
+    font-size: 14px;
+    color: #666;
+    padding: 8px 12px;
+    background: #f8f9fa;
+    border-radius: 6px;
+
+    &.feature-highlight {
+      background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
+      color: white;
+      font-weight: bold;
+    }
+
+    &.debug-info {
+      background: #e6f7ff;
+      color: #1890ff;
+      font-weight: bold;
+      border: 1px solid #91d5ff;
+    }
+  }
+}
+
+.order-data {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  text {
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+  }
+}
+
+.user-list {
+  margin-top: 8px;
+  padding-left: 12px;
+
+  .user-item {
+    margin-bottom: 4px;
+
+    text {
+      font-size: 13px;
+      color: #666;
+    }
+  }
+}
+</style>
diff --git a/src/pages/goods/components/GoodConfirm/images/商品2级 门票.png b/src/pages/goods/components/GoodConfirm/images/商品2级 门票.png
new file mode 100644
index 0000000..25dc8bb
Binary files /dev/null and b/src/pages/goods/components/GoodConfirm/images/商品2级 门票.png differ
diff --git a/src/pages/goods/components/GoodConfirm/index.vue b/src/pages/goods/components/GoodConfirm/index.vue
new file mode 100644
index 0000000..50bd72a
--- /dev/null
+++ b/src/pages/goods/components/GoodConfirm/index.vue
@@ -0,0 +1,369 @@
+<template>
+  <uni-popup
+    ref="popup"
+    type="bottom"
+    background-color="#fff"
+    border-radius="12px 12px 0 0"
+    mask-background-color="rgba(0,0,0,0.5)"
+    :safe-area="false"
+  >
+    <div class="good-container">
+      <!-- 头部区域 -->
+      <div class="header">
+        <div class="header-title">填写信息</div>
+        <div class="close-btn" @click="closePopup">
+          <uni-icons type="closeempty" size="24" color="#333" />
+        </div>
+      </div>
+      <!-- 商品信息区域 -->
+      <scroll-div class="good-content" :scroll-y="true" :show-scrollbar="false">
+        <div class="wrapper">
+          <div class="good-info-wrapper">
+            <!-- 轮播图区域 -->
+            <imgSwiper
+              :images="goodsData.commodityPhotoList"
+              :height="130"
+              :border-radius="0"
+              :showThumbnails="false"
+            />
+
+            <!-- 商品信息区域 -->
+            <div class="goods-info">
+              <div class="goods-details">
+                <div class="goods-title">
+                  {{ goodsData.commodityName || "商品名称" }}
+                </div>
+                <div class="goods-price">
+                  <span class="currency">¥</span>
+                  <template v-if="goodsData.orderType == 0">
+                    <span class="price">
+                      {{ goodsData.calculatedTotalPrice || 0 }}
+                    </span>
+                    <span class="price-desc">
+                      ({{ goodsData.startDate }}至{{ goodsData.endDate }}) 共{{
+                        goodsData.totalDays
+                      }}晚
+                    </span>
+                  </template>
+                  <span v-else class="price">
+                    {{ goodsData.specificationPrice || 0 }}
+                  </span>
+                </div>
+                <div
+                  class="goods-service-list"
+                  v-if="
+                    goodsData.commodityServiceList &&
+                    goodsData.commodityServiceList.length
+                  "
+                >
+                  <div class="service-title">包含服务</div>
+                  <div
+                    class="goods-service-item"
+                    v-for="item in goodsData.commodityServiceList"
+                    :key="item.serviceTitle"
+                  >
+                    <span class="service-label">{{ item.serviceTitle }}</span>
+                    <span class="service-value">{{ item.serviceAmount }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 数量选择区域 -->
+          <div class="quantity-section">
+            <ModuleTitle :title="sectionTitle" />
+
+            <Stepper v-model="quantity" />
+          </div>
+
+          <!-- 游客信息区域 -->
+          <scroll-div
+            class="user-form-list"
+            :scroll-x="true"
+            :show-scrollbar="false"
+          >
+            <FormCard
+              v-for="(item, index) in userFormList"
+              :title="userCardTitle(index)"
+              :form="item"
+              :showDeleteIcon="userFormList.length > 1"
+              :key="index"
+              @update:visitorName="
+                (value) => updateUserForm(index, 'visitorName', value)
+              "
+              @update:contactPhone="
+                (value) => updateUserForm(index, 'contactPhone', value)
+              "
+              @delete="() => deleteUserForm(index)"
+            />
+          </scroll-div>
+
+          <!-- 总价区域 -->
+          <SumCard
+            :referencePrice="
+              goodsData.orderType == 0
+                ? goodsData.calculatedTotalPrice
+                : goodsData.specificationPrice
+            "
+            :discount="totalPrice"
+          />
+        </div>
+      </scroll-div>
+
+      <!-- 底部按钮区域 -->
+      <div class="footer">
+        <div class="left">
+          <span class="total-count">共{{ quantity }}间，合计：</span>
+          <span class="total-price">{{ totalPrice }}</span>
+        </div>
+
+        <div class="confirm-btn" @click="confirmOrder">立即支付</div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import Stepper from "@/components/Stepper/index.vue";
+import FormCard from "@/components/FormCard/index.vue";
+import SumCard from "@/components/SumCard/index.vue";
+
+// 工具函数
+const showToast = (title, icon = "none", duration = 2000) => {
+  uni.showToast({ title, icon, duration });
+};
+
+const isValidUserForm = (user) => {
+  return (
+    user &&
+    typeof user.visitorName === "string" &&
+    user.visitorName.trim() !== "" &&
+    typeof user.contactPhone === "string" &&
+    user.contactPhone.trim() !== ""
+  );
+};
+
+// 常量定义
+const COMMODITY_TYPES = {
+  HOTEL: 0,
+  TICKET: 1,
+  DINING: 2,
+};
+
+const DEFAULT_PRICE = 399;
+const MIN_USER_COUNT = 1;
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({
+      orderType: "0",
+      specificationPrice: "",
+      commodityName: "",
+      commodityPhotoList: [],
+      commodityServiceList: [],
+    }),
+    validator: (value) => {
+      return value && typeof value === "object";
+    },
+  },
+});
+
+// Emits定义
+const emits = defineEmits(["confirm", "close"]);
+
+// 工具函数
+const createEmptyUserForm = () => {
+  return { visitorName: "", contactPhone: "" };
+};
+
+// 响应式数据
+const popup = ref(null);
+const quantity = ref(MIN_USER_COUNT);
+const userFormList = ref([createEmptyUserForm()]); // 初始化一个表单项
+const isDeleting = ref(false); // 标志位，防止删除时watch冲突
+
+// 计算属性
+const totalPrice = computed(() => {
+  const price =
+    props.goodsData?.orderType == 0
+      ? props.goodsData?.calculatedTotalPrice
+      : props.goodsData?.specificationPrice || 0;
+  return (price * quantity.value).toFixed(0);
+});
+
+const isHotelType = computed(() => {
+  return props.goodsData?.orderType == 0;
+});
+
+const sectionTitle = computed(() => {
+  return isHotelType.value ? "订房信息" : "游客信息";
+});
+
+const userCardTitle = computed(() => {
+  return (index) =>
+    isHotelType.value ? `房间${index + 1}` : `游客${index + 1}`;
+});
+
+// 监听 quantity 变化，动态调整 userFormList
+watch(
+  quantity,
+  async (newQuantity) => {
+    // 如果正在执行删除操作，跳过watch逻辑
+    if (isDeleting.value) {
+      isDeleting.value = false;
+      return;
+    }
+
+    // 确保数量不小于最小值
+    if (newQuantity < MIN_USER_COUNT) {
+      quantity.value = MIN_USER_COUNT;
+      return;
+    }
+
+    const currentLength = userFormList.value.length;
+
+    if (newQuantity > currentLength) {
+      // 数量增加，添加新的表单项
+      const newForms = Array.from({ length: newQuantity - currentLength }, () =>
+        createEmptyUserForm(),
+      );
+      userFormList.value.push(...newForms);
+    } else if (newQuantity < currentLength) {
+      // 数量减少，删除多余的表单项
+      userFormList.value.splice(newQuantity);
+    }
+
+    // 等待DOM更新完成
+    await nextTick();
+  },
+  { immediate: false },
+);
+
+// 方法定义
+const showPopup = () => {
+  popup.value?.open();
+};
+
+const closePopup = () => {
+  popup.value?.close();
+  emits("close");
+};
+
+const updateUserForm = (index, field, value) => {
+  if (!userFormList.value[index]) {
+    return;
+  }
+
+  if (!["visitorName", "contactPhone"].includes(field)) {
+    return;
+  }
+
+  userFormList.value[index][field] = value?.toString().trim() || "";
+};
+
+const deleteUserForm = (index) => {
+  // 参数验证
+  if (
+    typeof index !== "number" ||
+    index < 0 ||
+    index >= userFormList.value.length
+  ) {
+    return;
+  }
+
+  // 确保至少保留一个表单项
+  if (userFormList.value.length <= MIN_USER_COUNT) {
+    const message = isHotelType.value
+      ? "至少需要一个房间信息"
+      : "至少需要一位游客信息";
+    showToast(message);
+    return;
+  }
+
+  // 设置删除标志位，防止watch监听器干扰
+  isDeleting.value = true;
+
+  // 删除指定索引的表单项
+  userFormList.value.splice(index, 1);
+
+  // 同步更新quantity
+  quantity.value = userFormList.value.length;
+};
+
+const validateUserForms = () => {
+  const invalidUsers = userFormList.value.filter((user, index) => {
+    return !isValidUserForm(user);
+  });
+
+  if (invalidUsers.length > 0) {
+    const message = isHotelType.value
+      ? "请填写完整的房客信息"
+      : "请填写完整的游客信息";
+    showToast(message);
+    return false;
+  }
+
+  return true;
+};
+
+const confirmOrder = () => {
+  try {
+    // 校验用户信息是否填写完整
+    if (!validateUserForms()) {
+      return;
+    }
+
+    // 构建订单数据
+    const orderData = {
+      goodsData: props.goodsData,
+      quantity: quantity.value,
+      totalPrice: parseFloat(totalPrice.value),
+      userFormList: userFormList.value.map((user) => ({
+        visitorName: user.visitorName.trim(),
+        contactPhone: user.contactPhone.trim(),
+      })),
+      commodityType: props.goodsData?.orderType,
+      timestamp: Date.now(),
+    };
+
+    // 触发确认事件
+    emits("confirm", orderData);
+
+    // 关闭弹窗
+    closePopup();
+  } catch (error) {
+    showToast("订单处理失败，请重试");
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  // 初始化用户表单列表
+  if (userFormList.value.length === 0) {
+    userFormList.value.push(createEmptyUserForm());
+  }
+});
+
+// 暴露给父组件的方法
+defineExpose({
+  showPopup,
+  closePopup,
+  resetForm: () => {
+    userFormList.value = [createEmptyUserForm()];
+    quantity.value = MIN_USER_COUNT;
+  },
+  validateForms: validateUserForms,
+  getUserFormList: () => userFormList.value,
+  getTotalPrice: () => totalPrice.value,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/goods/components/GoodConfirm/styles/index.scss b/src/pages/goods/components/GoodConfirm/styles/index.scss
new file mode 100644
index 0000000..a54937b
--- /dev/null
+++ b/src/pages/goods/components/GoodConfirm/styles/index.scss
@@ -0,0 +1,208 @@
+.good-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  border-bottom: 1px solid #ddd;
+  position: relative;
+
+  .header-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: $uni-text-color;
+    flex: 1;
+    text-align: center;
+  }
+
+  .close-btn {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.good-content {
+  background: #fff;
+  box-sizing: border-box;
+  max-height: 60vh;
+  overflow: hidden;
+
+  .wrapper {
+    box-sizing: border-box;
+    padding: 12px;
+  }
+
+  .good-info-wrapper {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .goods-info {
+    display: flex;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
+    padding: 12px;
+
+    .goods-details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .goods-title {
+        font-size: $uni-font-size-lg;
+        font-weight: 500;
+        color: $uni-text-color;
+        line-height: 22px;
+        margin-bottom: 8px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .goods-price {
+        display: flex;
+        align-items: baseline;
+        margin-bottom: 12px;
+
+        .currency {
+          font-size: $uni-font-size-base;
+          color: #ff6b35;
+          font-weight: 500;
+        }
+
+        .price {
+          font-size: 20px;
+          color: #ff6b35;
+          font-weight: 600;
+          margin-left: 2px;
+        }
+
+        .price-desc {
+          font-size: $uni-font-size-base;
+          color: $uni-text-color-grey;
+          font-weight: 400;
+          margin-left: 12px;
+        }
+      }
+
+      .goods-service-list {
+        background-color: #f5f5f5;
+        border-radius: 6px;
+        padding: 12px;
+        box-sizing: border-box;
+      }
+
+      .service-title {
+        font-size: $uni-font-size-base;
+        font-weight: 500;
+        color: $uni-text-color;
+      }
+
+      .goods-service-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+
+        .service-label,
+        .service-value {
+          font-size: $uni-font-size-base;
+          font-weight: 500;
+        }
+
+        .service-label {
+          color: $uni-text-color;
+        }
+
+        .service-value {
+          color: $uni-text-color-grey;
+        }
+      }
+    }
+  }
+
+  .quantity-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 12px 0;
+  }
+
+  .user-form-list {
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+  }
+}
+
+.footer {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-bottom: 24px;
+
+  .left {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .total-count {
+    font-size: $uni-font-size-sm;
+    color: $uni-text-color;
+  }
+
+  .total-price {
+    display: flex;
+    align-items: baseline;
+    font-size: 24px;
+    color: #f55726;
+
+    &::before {
+      content: "¥";
+      font-size: $uni-font-size-sm;
+    }
+  }
+
+  .confirm-btn {
+    width: 160px;
+    height: 48px;
+    background: linear-gradient(179deg, $theme-color-500 0%, $theme-color-700 100%);
+    color: #fff;
+    border: none;
+    border-radius: 24px;
+    font-size: $uni-font-size-lg;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    margin-left: auto;
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &::after {
+      border: none;
+    }
+  }
+}
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
new file mode 100644
index 0000000..f5d335e
--- /dev/null
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="border-box border-top-8">
+    <div
+      class="border-box pt-12 pl-12 pr-12"
+      v-for="(moduleItem, index) in goodsData.commodityEquipment"
+      :key="index"
+    >
+      <div
+        class="flex flex-items-start flex-col"
+        :class="{
+          'border-bottom': index < goodsData.commodityEquipment.length - 1,
+        }"
+      >
+        <div class="flex flex-items-center flex-row flex-shrink-0">
+          <uni-icons fontFamily="znicons" size="20" color="#171717">
+            {{ zniconsMap[moduleItem.icon] }}
+          </uni-icons>
+          <span class="ml-4 font-size-12 color-171717 line-height-20">
+            {{ moduleItem.title }}
+          </span>
+        </div>
+        <div class="border-box flex flex-items-center flex-row mt-4 pb-12">
+          <span
+            class="font-size-12 color-525866 line-height-20 mr-4"
+            v-for="(span, index) in moduleItem.desc"
+            :key="index"
+          >
+            {{ span }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+</style>
diff --git a/src/pages/goods/components/GoodInfo/README.md b/src/pages/goods/components/GoodInfo/README.md
new file mode 100644
index 0000000..02af5c1
--- /dev/null
+++ b/src/pages/goods/components/GoodInfo/README.md
@@ -0,0 +1,255 @@
+# GoodInfo 商品信息组件
+
+## 概述
+
+`GoodInfo` 是一个高性能的商品信息展示组件，专为电商、旅游、服务类应用设计。组件采用现代化的UI设计，支持响应式布局和暗色模式，提供优秀的用户体验。
+
+## 功能特性
+
+### 🎯 核心功能
+
+- **价格展示**: 突出显示商品价格，支持货币符号和价格标签
+- **商品标题**: 清晰展示商品名称和相关标签
+- **地址信息**: 显示商品/服务地址，支持图标和交互
+- **设施展示**: 网格布局展示商品特色设施或服务项目
+
+### ⚡ 性能优化
+
+- **计算属性缓存**: 使用 `computed` 优化设施列表渲染
+- **按需渲染**: 条件渲染减少不必要的DOM节点
+- **轻量级设计**: 最小化组件体积和依赖
+- **懒加载支持**: 支持图标和内容的懒加载
+
+### 🎨 UI特性
+
+- **现代化设计**: 圆角卡片、阴影效果、渐变背景
+- **响应式布局**: 适配不同屏幕尺寸
+- **暗色模式**: 自动适配系统主题
+- **交互反馈**: 悬停效果和过渡动画
+
+## 基础用法
+
+### 简单使用
+
+```vue
+<template>
+  <GoodInfo :goodsInfo="goodsData" />
+</template>
+
+<script setup>
+import GoodInfo from "./components/GoodInfo/index.vue";
+
+const goodsData = {
+  price: 399,
+  title: "【成人票】云从朵花温泉门票",
+  timeTag: "随时可退",
+  address: "距您43.1公里 黔南州布依族苗族自治州龙里县",
+};
+</script>
+```
+
+### 完整配置
+
+```vue
+<template>
+  <GoodInfo :goodsInfo="fullGoodsData" />
+</template>
+
+<script setup>
+const fullGoodsData = {
+  price: 399,
+  title: "【成人票】云从朵花温泉门票",
+  tag: "热销",
+  timeTag: "随时可退",
+  address: "距您43.1公里 黔南州布依族苗族自治州龙里县",
+  facilities: [
+    { icon: "home", name: "48个泡池" },
+    { icon: "color", name: "11个特色药池" },
+    { icon: "fire", name: "4个汗蒸房" },
+    { icon: "person", name: "儿童充气水上乐园" },
+    { icon: "game", name: "儿童戏水区" },
+    { icon: "home-filled", name: "石板浴" },
+  ],
+};
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 参数      | 类型   | 默认值 | 说明         |
+| --------- | ------ | ------ | ------------ |
+| goodsInfo | Object | `{}`   | 商品信息对象 |
+
+### goodsInfo 对象结构
+
+| 字段       | 类型          | 必填 | 默认值                                        | 说明                           |
+| ---------- | ------------- | ---- | --------------------------------------------- | ------------------------------ |
+| price      | Number/String | 否   | `399`                                         | 商品价格                       |
+| title      | String        | 否   | `'【成人票】云从朵花温泉门票'`                | 商品标题                       |
+| tag        | String        | 否   | -                                             | 价格标签（如：热销、限时优惠） |
+| timeTag    | String        | 否   | `'随时可退'`                                  | 时间相关标签                   |
+| address    | String        | 否   | `'距您43.1公里 黔南州布依族苗族自治州龙里县'` | 地址信息                       |
+| facilities | Array         | 否   | 默认设施列表                                  | 设施/特色列表                  |
+
+### facilities 数组结构
+
+```javascript
+[
+  {
+    icon: "home", // uni-icons 图标名称
+    name: "48个泡池", // 设施名称
+  },
+];
+```
+
+## 样式定制
+
+### CSS 变量
+
+组件支持通过 CSS 变量进行主题定制：
+
+```scss
+.good-info {
+  --primary-color: #ff6b35; // 主色调
+  --background-color: #fff; // 背景色
+  --text-color: #333; // 文字颜色
+  --border-radius: 16rpx; // 圆角大小
+  --shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); // 阴影
+}
+```
+
+### 响应式断点
+
+- **小屏设备**: `max-width: 750rpx`
+- **暗色模式**: `prefers-color-scheme: dark`
+
+## 性能优化建议
+
+### 1. 数据结构优化
+
+```javascript
+// ✅ 推荐：使用 reactive 包装数据
+const goodsData = reactive({
+  price: 399,
+  title: "商品标题",
+});
+
+// ❌ 避免：频繁的深层对象更新
+const goodsData = ref({
+  nested: {
+    deep: {
+      value: "data",
+    },
+  },
+});
+```
+
+### 2. 设施列表优化
+
+```javascript
+// ✅ 推荐：预定义设施列表
+const FACILITY_PRESETS = {
+  spa: [
+    { icon: "home", name: "48个泡池" },
+    { icon: "water", name: "恒温泳池" },
+  ],
+  hotel: [
+    { icon: "bed", name: "豪华客房" },
+    { icon: "car", name: "免费停车" },
+  ],
+};
+
+// 使用预设
+const goodsData = {
+  facilities: FACILITY_PRESETS.spa,
+};
+```
+
+### 3. 图标优化
+
+```javascript
+// ✅ 推荐：使用常见图标
+const commonIcons = ["home", "person", "heart", "star"];
+
+// ❌ 避免：使用过多不同图标增加包体积
+```
+
+## 最佳实践
+
+### 1. 数据验证
+
+```javascript
+// 添加数据验证
+const validateGoodsInfo = (data) => {
+  return {
+    price: Number(data.price) || 0,
+    title: String(data.title || ""),
+    facilities: Array.isArray(data.facilities) ? data.facilities : [],
+  };
+};
+```
+
+### 2. 错误处理
+
+```vue
+<template>
+  <GoodInfo :goodsInfo="goodsData" @error="handleError" />
+</template>
+
+<script setup>
+const handleError = (error) => {
+  console.error("GoodInfo Error:", error);
+  // 错误上报或用户提示
+};
+</script>
+```
+
+### 3. 无障碍访问
+
+```vue
+<template>
+  <div
+    class="good-info"
+    role="article"
+    :aria-label="`商品信息：${goodsInfo.title}`"
+  >
+    <!-- 组件内容 -->
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **图标依赖**: 组件依赖 `uni-icons`，请确保项目中已安装
+2. **单位适配**: 样式使用 `rpx` 单位，适配小程序和H5
+3. **性能考虑**: 设施列表较多时建议分页或虚拟滚动
+4. **主题适配**: 支持暗色模式，但需要系统支持
+
+## 更新日志
+
+### v1.0.0 (2024-01-XX)
+
+- ✨ 初始版本发布
+- 🎨 现代化UI设计
+- ⚡ 性能优化
+- 📱 响应式布局
+- 🌙 暗色模式支持
+
+## 技术栈
+
+- **框架**: Vue 3 Composition API
+- **样式**: SCSS
+- **图标**: uni-icons
+- **构建**: Vite/Webpack
+
+## 浏览器支持
+
+- ✅ Chrome 80+
+- ✅ Firefox 75+
+- ✅ Safari 13+
+- ✅ Edge 80+
+- ✅ 微信小程序
+- ✅ 支付宝小程序
+- ✅ H5
diff --git a/src/pages/goods/components/GoodInfo/images/商品详情.png b/src/pages/goods/components/GoodInfo/images/商品详情.png
new file mode 100644
index 0000000..aa76422
Binary files /dev/null and b/src/pages/goods/components/GoodInfo/images/商品详情.png differ
diff --git a/src/pages/goods/components/GoodInfo/index.vue b/src/pages/goods/components/GoodInfo/index.vue
new file mode 100644
index 0000000..969f0e9
--- /dev/null
+++ b/src/pages/goods/components/GoodInfo/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="good-info border-box pl-12 pr-12">
+    <!-- 标题区域 -->
+    <div class="title-section">
+      <span class="title">
+        {{ goodsData.commodityName || "【成人票】云从朵花温泉门票" }}
+      </span>
+      <div class="tag-wrapper" v-if="goodsData.timeTag">
+        <div class="time-tag">{{ goodsData.timeTag || "随时可退" }}</div>
+      </div>
+    </div>
+
+    <!-- 设施信息区域 -->
+    <div class="facilities-section" v-if="facilitiesList.length">
+      <div class="facilities-grid">
+        <div
+          class="facility-item"
+          v-for="(facility, index) in facilitiesList"
+          :key="index"
+        >
+          <span class="facility-span">{{ facility }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 设施列表 - 使用computed优化性能
+const facilitiesList = computed(() => {
+  if (
+    props.goodsData.commodityFacilityList &&
+    props.goodsData.commodityFacilityList.length
+  ) {
+    return props.goodsData.commodityFacilityList;
+  }
+
+  return [];
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/goods/components/GoodInfo/styles/index.scss b/src/pages/goods/components/GoodInfo/styles/index.scss
new file mode 100644
index 0000000..e29522f
--- /dev/null
+++ b/src/pages/goods/components/GoodInfo/styles/index.scss
@@ -0,0 +1,67 @@
+.good-info {
+  background: #fff;
+
+  // 标题区域
+  .title-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .title {
+      font-size: $uni-font-size-lg;
+      color: $uni-text-color;
+      font-weight: 600;
+      line-height: 1.4;
+      flex: 0 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .tag-wrapper {
+      display: flex;
+      align-items: center;
+
+      .time-tag {
+        color: #f55726;
+        padding: 3px 6px;
+        border-radius: 6px;
+        font-size: 9px;
+        border: 1px solid #f55726;
+      }
+    }
+
+    .calender-icon {
+      margin-left: auto;
+    }
+  }
+
+  // 设施信息区域
+  .facilities-section {
+    margin-top: 12px;
+
+    .facilities-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+
+      .facility-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px;
+        background: #fafafa;
+        border-radius: 6px;
+
+        .facility-text {
+          font-size: $uni-font-size-sm;
+          color: $uni-text-color;
+          line-height: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/goods/components/GoodPackage/index.vue b/src/pages/goods/components/GoodPackage/index.vue
new file mode 100644
index 0000000..e2486f3
--- /dev/null
+++ b/src/pages/goods/components/GoodPackage/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="border-box border-top-8 pl-12 pr-12 pt-6 pb-12">
+    <ModuleTitle v-if="showTitle" title="套餐包含内容" />
+    <div
+      class="flex flex-items-start flex-col"
+      v-for="(item, index) in goodsData.commodityPackageConfig"
+      :key="index"
+    >
+      <div class="title-row py-4 ml-4">
+        <span class="left font-size-14 color-171717">{{ item.name }}</span>
+        <div class="sep" aria-hidden="true"></div>
+        <span class="right font-size-14 color-171717"
+          >{{ item.count }}{{ item.unit }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/goods/components/GoodPackage/styles/index.scss b/src/pages/goods/components/GoodPackage/styles/index.scss
new file mode 100644
index 0000000..dbc2721
--- /dev/null
+++ b/src/pages/goods/components/GoodPackage/styles/index.scss
@@ -0,0 +1,20 @@
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.title-row .left,
+.title-row .right {
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.title-row .sep {
+  flex: 1 1 auto;
+  height: 1px;
+  margin: 0 8px;
+  background-image: repeating-linear-gradient(to right, #CACFD8 0 10px, transparent 10px 16px);
+  background-repeat: repeat-x;
+  background-position: center;
+}
\ No newline at end of file
diff --git a/src/pages/goods/images/商品详情.png b/src/pages/goods/images/商品详情.png
new file mode 100644
index 0000000..761cb68
Binary files /dev/null and b/src/pages/goods/images/商品详情.png differ
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
new file mode 100644
index 0000000..4541ca2
--- /dev/null
+++ b/src/pages/goods/index.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="goods-container bg-gray">
+    <TopNavBar
+      :title="navOpacity < 0.5 ? '' : '商品详情'"
+      :background="`rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+    />
+
+    <!-- 滚动区域 -->
+    <scroll-div class="content-wrapper" scroll-y @scroll="handleScroll">
+      <imgSwiper
+        :border-radius="0"
+        :height="300"
+        :images="goodsData.commodityPhotoList"
+        thumbnailBottom="42px"
+      />
+
+      <div class="goods-content">
+        <!-- 商品信息组件 -->
+        <GoodInfo :goodsData="goodsData" />
+
+        <!-- 地址区域 -->
+        <LocationCard :orderData="goodsData" />
+
+        <!-- 日期选择区域 -->
+        <DateSelector
+          v-if="goodsData.orderType == 0"
+          @showCalendar="showCalendar"
+          :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate"
+          :checkInDay="''"
+          :checkOutDay="''"
+          :nights="selectedDate.totalDays"
+        />
+
+        <!-- 商品套餐组件 -->
+        <GoodPackage
+          v-if="
+            goodsData.orderType != 0 &&
+            goodsData.commodityPackageConfig &&
+            goodsData.commodityPackageConfig.length > 0
+          "
+          :goodsData="goodsData"
+        />
+
+        <!-- 商品设施组件 -->
+        <GoodFacility
+          v-if="
+            goodsData.commodityEquipment &&
+            goodsData.commodityEquipment.length > 0
+          "
+          :goodsData="goodsData"
+        />
+
+        <!-- 商品详情组件 -->
+        <GoodDetail :goodsData="goodsData" />
+      </div>
+    </scroll-div>
+
+    <!-- 立即抢购 -->
+    <div class="footer border-top">
+      <div
+        class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
+      >
+        {{ calculatedTotalPrice }}
+      </div>
+
+      <div
+        class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
+        @click="navigateToPay(goodsData)"
+      >
+        <img
+          class="icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
+        />
+        <span class="font-size-16 font-500 color-white">立即预定</span>
+      </div>
+    </div>
+
+    <!-- 日历组件 -->
+    <Calender
+      :visible="calendarVisible"
+      mode="range"
+      :range-require-price="true"
+      :price-data="priceData"
+      @close="handleCalendarClose"
+      @range-select="handleDateSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { goodsDetail, commodityDailyPriceList } from "@/request/api/GoodsApi";
+import { DateUtils } from "@/utils";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+import GoodInfo from "./components/GoodInfo/index.vue";
+import Calender from "@/components/Calender/index.vue";
+import LocationCard from "@/components/LocationCard/index.vue";
+import DateSelector from "./components/DateSelector/index.vue";
+import GoodDetail from "@/components/GoodDetail/index.vue";
+import GoodFacility from "./components/GoodFacility/index.vue";
+import GoodPackage from "./components/GoodPackage/index.vue";
+import { useSelectedDateStore } from "@/store";
+
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
+const calendarVisible = ref(false);
+const goodsData = ref({});
+
+// 处理滚动事件
+const handleScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  // 设置一个阈值，当滚动超过200px时，导航栏完全不透明
+  const threshold = 200;
+  // 计算透明度，范围从0到1
+  navOpacity.value = Math.min(scrollTop / threshold, 1);
+};
+
+const selectedDate = ref({
+  startDate: DateUtils.formatDate(), // 当天日期
+  endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
+  totalDays: 1,
+});
+
+const priceData = ref([]);
+
+// 计算的总价格
+const calculatedTotalPrice = ref(0);
+
+// 获取商品详情数据
+const goodsInfo = async (params) => {
+  const res = await goodsDetail(params);
+
+  goodsData.value = res.data;
+
+  // 初始化计算价格
+  calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+
+  // 判断是酒店类型订单再获取获取商品日价格及库存
+  if (goodsData.value.orderType == 0) {
+    configGoodsData();
+    getGoodsDailyPrice({
+      commodityId: goodsData.value.commodityId,
+    });
+  }
+
+  if (goodsData.value.commodityStatus !== "1") {
+    uni.showModal({
+      title: "温馨提示",
+      content: "您选的商品暂不可预订，请重新选择。",
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateBack({ delta: 1 });
+        }
+      },
+    });
+    return;
+  }
+};
+
+const configGoodsData = () => {
+  goodsData.value.startDate = selectedDate.value.startDate;
+  goodsData.value.endDate = selectedDate.value.endDate;
+  goodsData.value.totalDays = selectedDate.value.totalDays;
+  goodsData.value.calculatedTotalPrice = calculatedTotalPrice.value;
+};
+
+// 获取商品日价格及库存
+const getGoodsDailyPrice = async (params) => {
+  const res = await commodityDailyPriceList(params);
+
+  priceData.value = res.data;
+};
+
+const selectedDateStore = useSelectedDateStore();
+onLoad(({ commodityId = "1950766939442774018" }) => {
+  // 从store中获取选中的日期
+  selectedDate.value = selectedDateStore.selectedDate;
+
+  goodsInfo({ commodityId });
+});
+
+// 显示日历弹窗
+const showCalendar = () => (calendarVisible.value = true);
+
+const handleCalendarClose = () => (calendarVisible.value = false);
+
+const handleDateSelect = (data) => {
+  console.log("选择的日期:", data);
+
+  // 保存选择的日期范围
+  selectedDate.value = {
+    startDate: data.startDate,
+    endDate: data.endDate,
+    totalDays: data.totalDays,
+  };
+
+  selectedDateStore.setData(selectedDate.value);
+
+  // 根据商品类型计算价格
+  if (goodsData.value.orderType == 0) {
+    // 酒店类型：计算dateRange总价格，排除最后一天（同一天除外）
+    if (data.dateRange && Array.isArray(data.dateRange)) {
+      // 获取默认价格作为回退值
+      const defaultPrice = Number(goodsData.value.specificationPrice) || 0;
+
+      // 检查价格是否有效的函数
+      const isValidPrice = (price) => {
+        return (
+          price !== null &&
+          price !== undefined &&
+          price !== "" &&
+          price !== "-" &&
+          !isNaN(Number(price)) &&
+          Number(price) > 0
+        );
+      };
+
+      // 如果是同一天（数组长度为1），使用该天的价格
+      if (data.dateRange.length === 1) {
+        const dayPrice = data.dateRange[0].price;
+        calculatedTotalPrice.value = isValidPrice(dayPrice)
+          ? Number(dayPrice)
+          : defaultPrice;
+        console.log(
+          "同一天选择，价格:",
+          calculatedTotalPrice.value,
+          "(原价格:",
+          dayPrice,
+          ")",
+        );
+      } else {
+        // 多天选择，排除最后一天
+        const dateRangeExcludingLast = data.dateRange.slice(0, -1);
+        calculatedTotalPrice.value = dateRangeExcludingLast.reduce(
+          (total, dateItem) => {
+            const dayPrice = dateItem.price;
+            const priceToAdd = isValidPrice(dayPrice)
+              ? Number(dayPrice)
+              : defaultPrice;
+            return total + priceToAdd;
+          },
+          0,
+        );
+        console.log(
+          "酒店类型计算总价格(排除最后一天):",
+          calculatedTotalPrice.value,
+        );
+      }
+      configGoodsData();
+    }
+  } else {
+    // 非酒店类型：如果没有dateRange，使用默认价格
+    calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+  }
+
+  // 日历组件会自动关闭，无需手动设置
+  calendarVisible.value = false;
+};
+
+// 跳转订购
+const navigateToPay = ({ commodityId }) => {
+  uni.navigateTo({
+    url: `/pages-booking/index?commodityId=${commodityId}`,
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/goods/styles/index.scss b/src/pages/goods/styles/index.scss
new file mode 100644
index 0000000..4e04098
--- /dev/null
+++ b/src/pages/goods/styles/index.scss
@@ -0,0 +1,107 @@
+$button-color: #00a6ff;
+
+.goods-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #fff;
+
+  // 顶部导航栏固定样式
+  :deep(.top-nav-bar) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    flex-shrink: 0;
+    transition: background-color 0.3s ease;
+  }
+
+  // 使用须知样式
+  .use-notice {
+    margin: 16px 0;
+  }
+
+  .use-notice-content {
+    .module-item {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 12px 0;
+
+      .module-icon {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 8px;
+        flex-shrink: 0;
+
+        .module-title {
+          font-size: $uni-font-size-base;
+          color: $uni-text-color;
+          text-align: center;
+          word-wrap: break-word;
+          margin-left: 4px;
+        }
+      }
+
+      .module-desc {
+        flex: 1;
+        font-size: $uni-font-size-sm;
+        color: #666;
+        line-height: 1.5;
+        margin-top: 4px;
+      }
+    }
+    .border-bottom {
+      border-bottom: 1px solid #f0f0f0;
+    }
+  }
+
+  .content-wrapper {
+    flex: 1;
+    height: 0; // 关键：让flex子项能够正确计算高度
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; // iOS平滑滚动
+  }
+
+  .goods-content {
+    border-radius: 28px 28px 0 0;
+    background-color: #fff;
+    padding: 20px 0;
+    position: relative;
+    margin-top: -30px;
+    z-index: 1;
+  }
+}
+
+.footer {
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 12px 12px 24px;
+  z-index: 10;
+  flex-shrink: 0; // 防止被压缩
+  display: flex;
+  align-items: center;
+
+  .amt {
+    &::before {
+      content: "¥";
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .btn {
+    width: 120px;
+    height: 48px;
+    background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
+  }
+
+  .icon {
+    height: 48px;
+    width: 34px;
+  }
+}
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index e69de29..e6b08c7 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="index-page w-full h-screen overflow-hidden bg-liner">
+    <ChatMainList @showDrawer="showDrawer" />
+
+    <!-- 日历组件 -->
+    <Calender
+      :visible="calendarVisible"
+      mode="single"
+      :default-value="selectedDate"
+      @close="handleCalendarClose"
+      @select="handleDateSelect"
+    />
+
+    <!-- 更多服务 -->
+    <MoreService />
+
+    <!-- 抽屉组件 -->
+    <DrawerSection ref="drawerRef" @close="closeDrawer" />
+  </div>
+</template>
+
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref, onUnmounted, onMounted } from "vue";
+import { getUrlParams } from "@/utils/UrlParams";
+import { useAppStore } from "@/store";
+import { checkToken } from "@/hooks/useGoLogin";
+import ChatMainList from "../ChatMain/ChatMainList/index.vue";
+import MoreService from "../ChatModule/MoreService/index.vue";
+import DrawerSection from "../DrawerSection/index.vue";
+import Calender from "@/components/Calender/index.vue";
+
+const appStore = useAppStore();
+const calendarVisible = ref(false);
+const selectedDate = ref("");
+
+// 处理日历关闭
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (data) => {
+  selectedDate.value = data.date;
+  calendarVisible.value = false;
+  console.log("选择的日期:", data.date);
+  uni.$emit("selectCalendarDate", selectedDate.value); // 传回父组件
+};
+
+const openCalendar = () => {
+  calendarVisible.value = true;
+};
+
+// 打开窗口
+const drawerRef = ref(null);
+const showDrawer = async (e) => {
+  await checkToken();
+
+  drawerRef.value?.open?.();
+};
+// 关闭窗口
+const closeDrawer = (e) => drawerRef.value?.close?.();
+
+///获取到二维码原始链接内容
+const getWeixinMiniProgramParams = (e) => {
+  console.log("Params:", e);
+  if (e.q && e.q != "undefined") {
+    const qrUrl = decodeURIComponent(e.q);
+    const params = getUrlParams(qrUrl);
+    appStore.setSceneId(params.sceneId || params.tagId);
+  }
+};
+
+onLoad((e) => {
+  getWeixinMiniProgramParams(e);
+});
+
+onMounted(() => {
+  uni.$on("openCalendar", openCalendar);
+  uni.$on("SHOW_DRAWER", showDrawer);
+});
+
+onUnmounted(() => {
+  uni.$off("openCalendar", openCalendar);
+  uni.$off("SHOW_DRAWER", showDrawer);
+});
+</script>
+
+<style lang="scss" scoped>
+.index-page {
+  position: relative;
+  min-height: 0;
+  overscroll-behavior: none;
+}
+
+.top {
+  margin-top: 150px;
+}
+</style>
diff --git a/src/pages/login/components/AgreePopup/README.md b/src/pages/login/components/AgreePopup/README.md
new file mode 100644
index 0000000..90df96f
--- /dev/null
+++ b/src/pages/login/components/AgreePopup/README.md
@@ -0,0 +1,71 @@
+# AgreePopup 用户协议同意弹窗组件
+
+## 组件概述
+
+AgreePopup 是一个用于登录流程中的用户协议同意弹窗组件，用于向用户展示隐私政策和用户协议，并获取用户的同意确认。
+
+## 功能需求
+
+### 界面设计
+- **弹窗标题**：显示"温馨提示"标题，居中显示
+- **关闭按钮**：右上角显示"×"关闭按钮，点击可关闭弹窗
+- **内容区域**：
+  - 主要说明文字："您在使用朵花温泉服务前，请仔细阅读用户隐私条款及用户注册须知，当您点击同意，即表示您已经理解并同意该条款，该条款将构成对您具有法律约束力的文件。"
+  - 注意事项："请您注意：如果您不同意上述用户注册须知、隐私政策或其中任何约定，请您停止注册。如您阅读并点击同意即表示您已充分阅读理解并接受其全部内容，并表明您也同意朵花温泉可以依据以上隐私政策来处理您的个人信息。"
+
+### 交互功能
+- **复选框**：
+  - 显示蓝色勾选框
+  - 文字说明："本人已仔细阅读《用户协议》和《隐私协议》，知悉并诺遵守该内容。"
+  - 支持点击切换选中/未选中状态
+- **确认按钮**：
+  - 显示"我知道了"按钮
+  - 蓝色背景，白色文字
+  - 圆角设计
+  - 点击后触发同意事件并关闭弹窗
+
+### 技术要求
+- 使用 Vue 3 Composition API
+- 支持弹窗显示/隐藏控制
+- 提供事件回调：同意、关闭
+- 响应式设计，适配移动端
+- 使用 uni-app 框架
+
+### 样式规范
+- 弹窗背景：白色
+- 圆角设计
+- 文字颜色：深灰色
+- 按钮：蓝色主题色
+- 复选框：蓝色选中状态
+- 适当的内边距和间距
+
+### 使用场景
+- 用户首次登录时显示
+- 隐私政策更新后重新确认
+- 注册流程中的协议确认
+
+## 组件接口
+
+### Props
+- `visible`: Boolean - 控制弹窗显示/隐藏
+- `title`: String - 弹窗标题，默认"温馨提示"
+
+### Events
+- `@agree`: 用户点击同意时触发
+- `@close`: 用户关闭弹窗时触发
+- `@cancel`: 用户取消操作时触发
+
+### Methods
+- `show()`: 显示弹窗
+- `hide()`: 隐藏弹窗
+
+## 文件结构
+```
+AgreePopup/
+├── README.md          # 组件说明文档
+├── index.vue          # 组件主文件
+├── styles/
+│   └── index.scss     # 组件样式文件
+└── images/
+    └── 登录授权1.png   # 设计稿参考图
+```
\ No newline at end of file
diff --git a/src/pages/login/components/AgreePopup/demo.vue b/src/pages/login/components/AgreePopup/demo.vue
new file mode 100644
index 0000000..911b661
--- /dev/null
+++ b/src/pages/login/components/AgreePopup/demo.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <span class="demo-title">AgreePopup 组件演示</span>
+    </div>
+
+    <div class="demo-content">
+      <button class="demo-btn" @click="showPopup">显示用户协议弹窗</button>
+
+      <div class="demo-info">
+        <span class="info-title">组件状态：</span>
+        <span class="info-span">弹窗可见：{{ popupVisible }}</span>
+        <span class="info-span">用户操作：{{ userAction }}</span>
+      </div>
+    </div>
+
+    <!-- AgreePopup 组件 -->
+    <AgreePopup
+      :visible="popupVisible"
+      title="温馨提示"
+      @agree="handleAgree"
+      @close="handleClose"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import AgreePopup from "./index.vue";
+
+// 响应式数据
+const popupVisible = ref(false);
+const userAction = ref("无");
+
+// 方法定义
+const showPopup = () => {
+  popupVisible.value = true;
+  userAction.value = "显示弹窗";
+};
+
+const handleAgree = () => {
+  popupVisible.value = false;
+  userAction.value = "用户同意协议";
+  console.log("用户同意了协议");
+};
+
+const handleClose = () => {
+  popupVisible.value = false;
+  userAction.value = "用户关闭弹窗";
+  console.log("用户关闭了弹窗");
+};
+
+const handleCancel = () => {
+  popupVisible.value = false;
+  userAction.value = "用户取消操作";
+  console.log("用户取消了操作");
+};
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  min-height: 100vh;
+  background: #f5f5f5;
+
+  .demo-header {
+    span-align: center;
+    margin-bottom: 40px;
+
+    .demo-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+
+  .demo-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .demo-btn {
+      width: 200px;
+      height: 44px;
+      background: #007aff;
+      color: #ffffff;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 40px;
+      cursor: pointer;
+
+      &:hover {
+        background: #0056cc;
+      }
+
+      &:active {
+        background: #004499;
+        transform: scale(0.98);
+      }
+    }
+
+    .demo-info {
+      background-color: $uni-bg-color;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      min-width: 300px;
+
+      .info-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #333333;
+        display: block;
+        margin-bottom: 12px;
+      }
+
+      .info-span {
+        font-size: 14px;
+        color: #666666;
+        display: block;
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/login/components/AgreePopup/images/登录授权1.png b/src/pages/login/components/AgreePopup/images/登录授权1.png
new file mode 100644
index 0000000..dc5c8dd
Binary files /dev/null and b/src/pages/login/components/AgreePopup/images/登录授权1.png differ
diff --git a/src/pages/login/components/AgreePopup/index.vue b/src/pages/login/components/AgreePopup/index.vue
new file mode 100644
index 0000000..655d2e9
--- /dev/null
+++ b/src/pages/login/components/AgreePopup/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <uni-popup ref="popup" type="center" :mask-click="false">
+    <div class="agree-popup">
+      <!-- 弹窗头部 -->
+      <div class="popup-header">
+        <div class="popup-title">{{ title }}</div>
+        <div class="close-btn" @click="handleClose">
+          <uni-icons type="closeempty" size="24" color="#999" />
+        </div>
+      </div>
+
+      <!-- 弹窗内容 -->
+      <div class="popup-content">
+        <div class="content-span">
+          <zero-markdown-div :markdown="agreement" />
+        </div>
+      </div>
+
+      <!-- 确认按钮 -->
+      <div class="button-area">
+        <div class="confirm-btn" @click="handleClose">我知道了</div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, defineEmits, defineExpose } from "vue";
+
+// Props定义
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "温馨提示",
+  },
+  agreement: {
+    type: String,
+    default: "",
+  },
+});
+
+// Events定义
+const emits = defineEmits(["agree", "close", "cancel"]);
+
+// 响应式数据
+const popup = ref(null);
+
+// 监听visible变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+);
+
+// 方法定义
+const show = () => {
+  popup.value?.open();
+};
+
+const hide = () => {
+  popup.value?.close();
+};
+
+const handleClose = () => {
+  hide();
+  emits("close");
+};
+
+// 暴露方法给父组件
+defineExpose({
+  show,
+  hide,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/login/components/AgreePopup/styles/index.scss b/src/pages/login/components/AgreePopup/styles/index.scss
new file mode 100644
index 0000000..421c4b5
--- /dev/null
+++ b/src/pages/login/components/AgreePopup/styles/index.scss
@@ -0,0 +1,83 @@
+// AgreePopup 组件样式
+.agree-popup {
+  width: 327px;
+  background-color: $uni-bg-color;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+  // 弹窗头部
+  .popup-header {
+    position: relative;
+    padding: 20px 20px 0 20px;
+
+    .popup-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: $uni-text-color;
+      text-align: center;
+      line-height: 24px;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &:hover {
+        background: #f5f5f5;
+        border-radius: $uni-border-radius-circle;
+      }
+    }
+  }
+
+  // 弹窗内容
+  .popup-content {
+    padding: 12px;
+    max-height: 400px; // 设置最大高度
+    overflow-y: auto; // 启用垂直滚动
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  // 按钮区域
+  .button-area {
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .confirm-btn {
+      width: 148px;
+      height: 44px;
+      background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      border-radius: $uni-border-radius-50px;
+      font-size: $uni-font-size-lg;
+      font-weight: 500;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #0056cc;
+      }
+
+      &:active {
+        background: #004499;
+        transform: scale(0.98);
+      }
+    }
+  }
+}
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
new file mode 100644
index 0000000..a5297d7
--- /dev/null
+++ b/src/pages/login/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="login-wrapper bg-liner">
+    <!-- 返回按钮 -->
+    <div class="back-btn" @click="goBack">
+      <uni-icons fontFamily="znicons" size="24" color="#333">
+        {{ zniconsMap["zn-nav-arrow-left"] }}
+      </uni-icons>
+    </div>
+
+    <!-- 头部内容 -->
+    <div class="login-header">
+      <!-- 卡通形象 -->
+      <img class="w-full h-full" :src="logo" mode="widthFix" />
+    </div>
+
+    <!-- 协议勾选 -->
+    <div class="login-agreement flex flex-items-center">
+      <CheckBox v-model="isAgree">
+        <span class="font-size-12 color-525866">我已阅读并同意</span>
+        <span
+          class="font-size-12 theme-color-500 ml-4 mr-4"
+          @click.stop="handleAgreeClick('service')"
+          >《服务协议》</span
+        >
+        <span class="font-size-12 color-525866">和</span>
+        <span
+          class="font-size-12 theme-color-500 ml-4 mr-4"
+          @click.stop="handleAgreeClick('privacy')"
+          >《隐私协议》</span
+        >
+        <span class="font-size-12 color-525866">，\n</span>
+        <span class="font-size-12 color-525866 ml-30">授权与账号关联操作</span>
+      </CheckBox>
+    </div>
+
+    <!-- 按钮区域 -->
+    <div class="login-btn-area">
+      <!-- 同意隐私协议并获取手机号按钮 -->
+      <button
+        v-if="needWxAuthLogin && !isAppleLogin"
+        class="login-btn"
+        type="primary"
+        open-type="getPhoneNumber"
+        @getphonenumber="getPhoneNumber"
+      >
+        {{ loginButtonspan }}
+      </button>
+      <button
+        v-else
+        class="login-btn"
+        type="primary"
+        @click="handleAgreeAndGetPhone"
+      >
+        {{ loginButtonspan }}
+      </button>
+    </div>
+
+    <AgreePopup
+      ref="agreePopup"
+      :visible="visible"
+      :agreement="computedAgreement"
+      @close="visible = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onShow } from "@dcloudio/uni-app";
+import { ref, computed } from "vue";
+import {
+  getServiceAgreement,
+  getPrivacyAgreement,
+} from "@/request/api/LoginApi";
+import {
+  onLogin,
+  goBack,
+  onCheckPhoneLogin,
+  onAppleLogin,
+} from "@/hooks/useGoLogin";
+import CheckBox from "@/components/CheckBox/index.vue";
+import AgreePopup from "./components/AgreePopup/index.vue";
+import { zniconsMap } from "@/static/fonts/znicons";
+import { getCurrentConfig } from "@/constant/base";
+
+// 是否需要微信手机号授权登录
+const needWxAuthLogin = ref(false);
+const isAgree = ref(false);
+const visible = ref(false);
+const serviceAgreement = ref("");
+const privacyAgreement = ref("");
+// 协议类型
+const AgreeType = ref("service");
+const logo = computed(() => getCurrentConfig().logo);
+const isAppleLogin = ref(false);
+const loginButtonspan = computed(() =>
+  isAppleLogin.value ? "Apple ID快捷登录" : "手机号快捷登录",
+);
+
+// #ifdef APP-PLUS
+const systemInfo = uni.getSystemInfoSync();
+isAppleLogin.value = systemInfo.platform === "ios";
+// #endif
+
+// 同意隐私协议并获取手机号
+const handleAgreeAndGetPhone = () => {
+  // 如果需要微信登录，直接返回
+  if (needWxAuthLogin.value && !isAppleLogin.value) {
+    return;
+  }
+
+  if (!isAgree.value) {
+    uni.showToast({
+      title: "请先同意服务协议和隐私协议",
+      icon: "none",
+    });
+    return;
+  }
+
+  if (isAppleLogin.value) {
+    onAppleLogin()
+      .then((res) => {
+        if (res) {
+          loginSuccess();
+        }
+      })
+      .catch(() => {
+        uni.showToast({
+          title: "Apple ID登录失败",
+          icon: "none",
+        });
+      });
+  } else {
+    onCheckPhoneLogin()
+      .then((res) => {
+        if (!res) {
+          loginSuccess();
+        }
+      })
+      .catch(() => {
+        uni.showToast({
+          title: "手机号登录失败",
+          icon: "none",
+        });
+      });
+  }
+};
+
+/// 获取授权后绑定手机号登录
+const getPhoneNumber = (e) => {
+  if (!isAgree.value) {
+    uni.showToast({
+      title: "请先同意服务协议和隐私协议",
+      icon: "none",
+    });
+    return;
+  }
+  onLogin(e)
+    .then(() => loginSuccess())
+    .catch(() => {
+      uni.showToast({
+        title: "获取登录手机号失败",
+        icon: "none",
+      });
+    });
+};
+
+/// 登录成功返回上一页
+const loginSuccess = () => {
+  uni.showToast({
+    title: "登录成功",
+    icon: "success",
+  });
+  setTimeout(() => {
+    goBack();
+  }, 500);
+};
+
+// 处理同意协议点击事件
+const handleAgreeClick = (type) => {
+  visible.value = true;
+  AgreeType.value = type;
+};
+
+// 计算协议类型
+const computedAgreement = computed(() => {
+  if (AgreeType.value === "service") {
+    return serviceAgreement.value;
+  } else {
+    return privacyAgreement.value;
+  }
+});
+
+// 获取服务协议数据
+const getServiceAgreementData = async () => {
+  const { data } = await getServiceAgreement();
+  serviceAgreement.value = data;
+};
+getServiceAgreementData();
+
+// 获取隐私协议数据
+const getPrivacyAgreementData = async () => {
+  const { data } = await getPrivacyAgreement();
+  privacyAgreement.value = data;
+};
+getPrivacyAgreementData();
+
+onShow(async () => {
+  if (!isAppleLogin.value) {
+    // 页面显示时检查微信授权登录状态
+    const res = await onCheckPhoneLogin();
+    needWxAuthLogin.value = res;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+</style>
diff --git a/src/pages/login/styles/index.scss b/src/pages/login/styles/index.scss
new file mode 100644
index 0000000..6e45ead
--- /dev/null
+++ b/src/pages/login/styles/index.scss
@@ -0,0 +1,43 @@
+.login-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100vh;
+  padding-top: 100px;
+  position: relative;
+
+  .back-btn {
+    position: absolute;
+    top: 44px;
+    left: 4px;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .login-header {
+    margin-top: 40px;
+    width: 200px;
+    height: 200px;
+  }
+
+  .login-btn-area {
+    margin-top: 20px;
+    width: 304px;
+
+    .login-btn {
+      background: $theme-color-500;
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+
+  .login-agreement {
+    margin-top: 80px;
+    width: 304px;
+  }
+}
diff --git a/src/pages/order/order/README.md b/src/pages/order/order/README.md
new file mode 100644
index 0000000..d8c4a6c
--- /dev/null
+++ b/src/pages/order/order/README.md
@@ -0,0 +1,288 @@
+# 工单管理系统
+
+## 项目概述
+
+这是一个基于 uniapp + Vue3 组合式 API 开发的微信小程序工单管理系统，提供完整的工单展示、管理和操作功能。
+
+## 系统架构
+
+### 页面结构
+
+```
+pages/order/
+├── list.vue              # 工单列表主页面
+├── detail.vue            # 工单详情页面
+├── demo.vue              # 功能演示页面
+├── components/           # 组件目录
+│   ├── TopNavBar/        # 顶部导航栏组件
+│   ├── Tabs/             # Tab切换组件
+│   ├── OrderCard/        # 工单卡片组件
+│   ├── OrderList/        # 工单列表组件
+│   └── ConsultationBar/  # 底部咨询栏组件
+├── styles/               # 样式文件
+└── images/               # 图片资源
+```
+
+## 核心组件
+
+### 1. TopNavBar - 顶部导航栏组件
+
+**功能特性：**
+- 左侧返回按钮
+- 自适应状态栏高度
+- 支持自定义标题内容
+- 响应式设计
+
+**使用示例：**
+```vue
+<TopNavBar>
+  <template #title>
+    <Tabs :tabs="tabList" @change="handleTabChange" />
+  </template>
+</TopNavBar>
+```
+
+### 2. Tabs - Tab切换组件
+
+**功能特性：**
+- 多标签页切换
+- 动态下划线指示器
+- 平滑动画过渡
+- 自定义标签内容
+- 固定15px宽度，2px圆角下划线
+
+**使用示例：**
+```vue
+<Tabs 
+  :tabs="tabList" 
+  :defaultActive="0"
+  @change="handleTabChange" 
+/>
+```
+
+### 3. OrderCard - 工单卡片组件
+
+**功能特性：**
+- 工单信息展示
+- 多种状态支持（待处理、处理中、已完成、已取消）
+- 状态图标和标签
+- 操作按钮（呼叫、完成）
+- 自定义操作区域
+- 响应式设计
+
+**使用示例：**
+```vue
+<OrderCard
+  :orderData="orderInfo"
+  @click="handleOrderClick"
+  @call="handleOrderCall"
+  @complete="handleOrderComplete"
+/>
+```
+
+### 4. OrderList - 工单列表组件
+
+**功能特性：**
+- 工单列表展示
+- 下拉刷新
+- 上拉加载更多
+- 空状态显示
+- 加载状态管理
+- 蓝色渐变背景
+
+**使用示例：**
+```vue
+<OrderList
+  :orderList="orderList"
+  :hasMore="hasMore"
+  :isLoading="isLoading"
+  @refresh="handleRefresh"
+  @loadMore="handleLoadMore"
+/>
+```
+
+### 5. ConsultationBar - 底部咨询栏组件
+
+**功能特性：**
+- 客服咨询入口
+- 固定底部显示
+- 安全区域适配
+- 自定义咨询文案
+- 跳转链接支持
+
+**使用示例：**
+```vue
+<ConsultationBar
+  mainText="遇到问题？联系客服"
+  subText="7×24小时在线服务"
+  buttonText="立即咨询"
+  @consultation="handleConsultation"
+/>
+```
+
+## 数据结构
+
+### 工单数据结构
+
+```javascript
+{
+  id: String,           // 工单ID
+  title: String,        // 工单标题
+  createTime: String,   // 创建时间
+  contactName: String,  // 联系人姓名
+  contactPhone: String, // 联系电话
+  status: String,       // 工单状态：pending/processing/completed/cancelled
+  type: String          // 工单类型：service/order
+}
+```
+
+### Tab数据结构
+
+```javascript
+{
+  label: String,        // 显示文本
+  value: String         // 值
+}
+```
+
+## 功能特性
+
+### ✅ 已实现功能
+
+1. **工单管理**
+   - 工单列表展示
+   - 工单状态管理
+   - 工单详情查看
+   - 工单操作（呼叫、完成）
+
+2. **交互功能**
+   - Tab页面切换
+   - 下拉刷新
+   - 上拉加载更多
+   - 一键拨号
+   - 客服咨询
+
+3. **UI/UX**
+   - 响应式设计
+   - 暗色模式支持
+   - 流畅动画效果
+   - 优雅的加载状态
+   - 空状态处理
+
+4. **技术特性**
+   - Vue3 组合式 API
+   - TypeScript 支持
+   - 组件化架构
+   - SCSS 样式管理
+   - 错误处理机制
+
+## 使用指南
+
+### 快速开始
+
+1. **进入工单列表**
+   ```javascript
+   uni.navigateTo({
+     url: '/pages/order/list'
+   })
+   ```
+
+2. **查看功能演示**
+   ```javascript
+   uni.navigateTo({
+     url: '/pages/order/demo'
+   })
+   ```
+
+### 自定义配置
+
+1. **修改Tab配置**
+   ```javascript
+   const tabList = ref([
+     { label: "全部订单", value: "all" },
+     { label: "服务工单", value: "service" },
+     { label: "自定义Tab", value: "custom" }
+   ])
+   ```
+
+2. **自定义工单状态**
+   ```javascript
+   const statusMap = {
+     pending: '待处理',
+     processing: '处理中',
+     completed: '已完成',
+     cancelled: '已取消',
+     custom: '自定义状态'
+   }
+   ```
+
+3. **自定义样式主题**
+   ```scss
+   :root {
+     --primary-color: #007AFF;
+     --success-color: #52C41A;
+     --warning-color: #FF8C00;
+     --danger-color: #FF3B30;
+   }
+   ```
+
+## API 接口
+
+### 工单相关接口
+
+```javascript
+// 获取工单列表
+const getOrderList = async (params) => {
+  return await uni.request({
+    url: '/api/orders',
+    method: 'GET',
+    data: params
+  })
+}
+
+// 更新工单状态
+const updateOrderStatus = async (orderId, status) => {
+  return await uni.request({
+    url: `/api/orders/${orderId}/status`,
+    method: 'PUT',
+    data: { status }
+  })
+}
+```
+
+## 性能优化
+
+1. **虚拟滚动**：大量数据时建议使用虚拟滚动
+2. **图片懒加载**：工单图片支持懒加载
+3. **防抖处理**：搜索和筛选功能防抖优化
+4. **缓存机制**：Tab切换时数据缓存
+
+## 兼容性
+
+- **微信小程序**：✅ 完全支持
+- **支付宝小程序**：✅ 支持
+- **H5**：✅ 支持
+- **App**：✅ 支持
+
+## 更新日志
+
+### v1.0.0 (2024-01-15)
+- 🎉 初始版本发布
+- ✨ 完整的工单管理功能
+- ✨ 响应式设计和暗色模式
+- ✨ 组件化架构
+- ✨ 完善的文档和演示
+
+## 开发团队
+
+- **开发者**：AI Assistant
+- **技术栈**：uniapp + Vue3 + SCSS
+- **设计规范**：微信小程序设计指南
+
+## 许可证
+
+MIT License
+
+---
+
+如有问题或建议，请联系开发团队。
\ No newline at end of file
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
new file mode 100644
index 0000000..e65b5a1
--- /dev/null
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="bg-white border-box rounded-12 p-12 mb-12">
+    <div class="flex flex-items-center flex-justify-between">
+      <div class="flex flex-items-center">
+        <span class="font-size-16 color-171717 line-height-24 font-500">
+          订单金额
+        </span>
+        <span class="amt font-size-18 font-bold color-FF3D60 ml-4">
+          {{ orderData.payAmt }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="orderData.orderStatus === '0'"
+      class="font-size-11 color-99A0AE mt-4"
+    >
+      超时后，订单将自动取消
+    </div>
+    <div
+      v-if="['1', '2'].includes(orderData.orderStatus)"
+      class="border-box border-top flex flex-items-center flex-justify-between font-size-12 pt-12 mt-12"
+    >
+      <div class="color-525866">取消政策及说明</div>
+      <div class="flex flex-items-center" @click="emit('click')">
+        <span class="theme-color-500 mr-4">查看详情</span>
+        <uni-icons type="right" size="12" color="#99A0AE" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<style scoped lang="scss">
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/pages/order/order/components/FooterSection/index.vue b/src/pages/order/order/components/FooterSection/index.vue
new file mode 100644
index 0000000..e64d408
--- /dev/null
+++ b/src/pages/order/order/components/FooterSection/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div
+    class="footer bg-white border-box flex flex-items-center flex-justify-between p-12"
+  >
+    <button
+      v-if="['1', '2'].includes(statusCode)"
+      class="left border-none border-box bg-white rounded-10 flex flex-items-center flex-justify-center font-size-14 font-500 color-525866 mr-12"
+      @click="emit('refund', orderData)"
+    >
+      申请退款
+    </button>
+    <button
+      :class="[
+        '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',
+          'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
+        },
+      ]"
+      @click="handleButtonClick(orderData)"
+    >
+      {{ buttonspan }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from "vue";
+import { orderPayNow } from "@/request/api/OrderApi";
+import { DebounceUtils } from "@/utils";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderId: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+
+const statusCode = computed(() => props.orderData.orderStatus);
+
+// 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+const buttonspan = computed(() => {
+  switch (statusCode.value) {
+    case "0": // 待支付状态
+      return "立即支付";
+    case "1": // 已取消状态
+    case "2": // 已取消状态
+    case "3": // 已取消状态
+    case "4": // 已取消状态
+    case "5": // 已关闭状态
+    case "6": // 已完成状态
+      return "再次预定";
+  }
+});
+
+// 定义事件发射器
+const emit = defineEmits(["refund", "refresh"]);
+
+// 处理按钮点击事件
+const handleButtonClick = DebounceUtils.createDebounce(async (orderData) => {
+  try {
+    // 再次预定跳转商品详情
+    if (["1", "2", "3", "4", "5", "6"].includes(statusCode.value)) {
+      uni.navigateTo({
+        url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
+      });
+      return;
+    }
+
+    // 待支付状态，调用支付接口
+    if (statusCode.value === "0") {
+      // 显示 loading
+      uni.showLoading({ title: "正在提交订单..." });
+
+      const orderId = orderData.orderId;
+      const payWay = orderData.payWay;
+      const paySource = orderData.paySource;
+
+      const res = await orderPayNow({ orderId, payWay, paySource });
+      console.log("确认订单---2:", res);
+
+      // 检查接口返回数据
+      if (!res || !res.data) {
+        uni.hideLoading();
+        setTimeout(() => {
+          uni.showToast({
+            title: res.msg || "订单创建失败，请重试",
+            icon: "none",
+          });
+        }, 100);
+        return;
+      }
+
+      const { data } = res;
+      const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+      // 验证支付参数是否完整
+      if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+        uni.hideLoading();
+        setTimeout(() => {
+          uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
+        }, 100);
+        return;
+      }
+
+      // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+      uni.hideLoading();
+
+      // #ifdef MP-WEIXIN
+      // 调用微信支付
+      uni.requestPayment({
+        provider: "wxpay",
+        timeStamp: String(timeStamp), // 确保为字符串类型
+        nonceStr: String(nonceStr),
+        package: String(packageVal), // 确保为字符串类型
+        signType: String(signType),
+        paySign: String(paySign),
+        success: () => {
+          uni.showToast({
+            title: "支付成功",
+            icon: "success",
+            success: () => {
+              console.log("支付成功，刷新订单详情");
+              emit("refresh", { orderId: orderId });
+            },
+          });
+        },
+        fail: () => {
+          uni.showToast({ title: "支付失败，请重试", icon: "none" });
+        },
+      });
+      // #endif
+
+      // #ifdef APP-PLUS
+      uni.showModal({
+        title: "提示",
+        content: "支付功能开发中",
+        showCancel: false,
+      });
+      // #endif
+    }
+  } catch (error) {
+    console.error("操作失败:", error);
+    uni.hideLoading();
+  }
+}, 1000);
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  border-radius: 12px 12px 0 0;
+  padding-bottom: 88rpx;
+}
+
+.left,
+.right {
+  height: 48px;
+}
+
+.left {
+  border: 1px solid #e5e8ee;
+  width: 104px;
+}
+</style>
diff --git a/src/pages/order/order/components/GoodsInfo/images/2025-07-13_105446.png b/src/pages/order/order/components/GoodsInfo/images/2025-07-13_105446.png
new file mode 100644
index 0000000..0c17896
Binary files /dev/null and b/src/pages/order/order/components/GoodsInfo/images/2025-07-13_105446.png differ
diff --git a/src/pages/order/order/components/GoodsInfo/images/food.png b/src/pages/order/order/components/GoodsInfo/images/food.png
new file mode 100644
index 0000000..8252626
Binary files /dev/null and b/src/pages/order/order/components/GoodsInfo/images/food.png differ
diff --git a/src/pages/order/order/components/GoodsInfo/images/icon_house.png b/src/pages/order/order/components/GoodsInfo/images/icon_house.png
new file mode 100644
index 0000000..4ebc59f
Binary files /dev/null and b/src/pages/order/order/components/GoodsInfo/images/icon_house.png differ
diff --git a/src/pages/order/order/components/GoodsInfo/images/ticket.png b/src/pages/order/order/components/GoodsInfo/images/ticket.png
new file mode 100644
index 0000000..0ab3334
Binary files /dev/null and b/src/pages/order/order/components/GoodsInfo/images/ticket.png differ
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
new file mode 100644
index 0000000..a25f9ca
--- /dev/null
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div v-if="orderType == 0" class="border-box bg-white p-12 rounded-12 mb-12">
+    <!-- 酒店类型入住离店日期部分 -->
+    <DateRangeSection
+      v-if="orderData.orderType == 0"
+      :selectedDate="selectedDate"
+    />
+
+    <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
+      {{ orderData.commodityName }}
+    </div>
+
+    <div
+      class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
+    >
+      {{ orderData.commodityDescription }}
+    </div>
+
+    <!-- 权益部分 -->
+    <div class="border-box flex flex-items-center pt-12">
+      <span
+        class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+        v-for="(item, index) in commodityFacilityList"
+        :key="index"
+      >
+        {{ item }}
+      </span>
+    </div>
+  </div>
+
+  <div v-if="orderType != 0" class="border-box bg-white p-12 rounded-12 mb-12">
+    <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8">
+      {{ orderData.commodityName }}
+    </div>
+
+    <div class="flex font-size-12">
+      <span class="w-60 color-99A0AE">购买数量</span>
+      <span class="color-525866">{{ commodityAmount }}</span>
+    </div>
+
+    <div
+      v-if="orderData.orderStatus === '0'"
+      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
+    >
+      凭[电子凭证]直接验证使用
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+import DateRangeSection from "@/components/DateRangeSection/index.vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const selectedDate = computed(() => {
+  // 计算总天数
+  const startDate = props.orderData.checkInData || "";
+  const endDate = props.orderData.checkOutData || "";
+  const timeStamp = 1000 * 60 * 60 * 24;
+  const totalDays = (new Date(endDate) - new Date(startDate)) / timeStamp;
+
+  return {
+    startDate,
+    endDate,
+    totalDays,
+  };
+});
+
+const orderType = computed(() => props.orderData.orderType);
+
+const commodityAmount = computed(() => {
+  // 门票单位：张、餐饮单位：份
+  const { commodityAmount } = props.orderData;
+  return orderType.value == 2
+    ? `${parseInt(commodityAmount)}张`
+    : `${parseInt(commodityAmount)}份`;
+});
+
+// 取3个权益
+const commodityFacilityList = computed(() => {
+  return props.orderData.commodityFacilityList.slice(0, 3) || [];
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/GoodsInfo/styles/index.scss b/src/pages/order/order/components/GoodsInfo/styles/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/order/order/components/NoticeInfo/images/2025-07-13_104948.png b/src/pages/order/order/components/NoticeInfo/images/2025-07-13_104948.png
new file mode 100644
index 0000000..b89fb69
Binary files /dev/null and b/src/pages/order/order/components/NoticeInfo/images/2025-07-13_104948.png differ
diff --git a/src/pages/order/order/components/NoticeInfo/images/icon_arrow.png b/src/pages/order/order/components/NoticeInfo/images/icon_arrow.png
new file mode 100644
index 0000000..3348692
Binary files /dev/null and b/src/pages/order/order/components/NoticeInfo/images/icon_arrow.png differ
diff --git a/src/pages/order/order/components/NoticeInfo/images/icon_card.png b/src/pages/order/order/components/NoticeInfo/images/icon_card.png
new file mode 100644
index 0000000..1146c11
Binary files /dev/null and b/src/pages/order/order/components/NoticeInfo/images/icon_card.png differ
diff --git a/src/pages/order/order/components/NoticeInfo/images/icon_clock.png b/src/pages/order/order/components/NoticeInfo/images/icon_clock.png
new file mode 100644
index 0000000..83e3876
Binary files /dev/null and b/src/pages/order/order/components/NoticeInfo/images/icon_clock.png differ
diff --git a/src/pages/order/order/components/NoticeInfo/index.vue b/src/pages/order/order/components/NoticeInfo/index.vue
new file mode 100644
index 0000000..4c85d7f
--- /dev/null
+++ b/src/pages/order/order/components/NoticeInfo/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="notice-info mb-12">
+    <div class="notice-title">购买须知</div>
+    <GoodDetail :goodsData="orderData" :showTitle="false" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import GoodDetail from "@/components/GoodDetail/index.vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      commodityTip: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/NoticeInfo/prompt.md b/src/pages/order/order/components/NoticeInfo/prompt.md
new file mode 100644
index 0000000..e15da1a
--- /dev/null
+++ b/src/pages/order/order/components/NoticeInfo/prompt.md
@@ -0,0 +1,14 @@
+## 游玩须知组件
+
+组件名称：游玩须知组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.notice-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/pages/order/order/components/NoticeInfo/styles/index.scss b/src/pages/order/order/components/NoticeInfo/styles/index.scss
new file mode 100644
index 0000000..8cd882a
--- /dev/null
+++ b/src/pages/order/order/components/NoticeInfo/styles/index.scss
@@ -0,0 +1,13 @@
+.notice-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.notice-title {
+  display: flex;
+  align-items: center;
+  font-size: $uni-font-size-lg;
+  font-weight: 500;
+  color: $uni-text-color;
+}
diff --git a/src/pages/order/order/components/OrderCard/InfoRow.vue b/src/pages/order/order/components/OrderCard/InfoRow.vue
new file mode 100644
index 0000000..dc14b49
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/InfoRow.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="info-row flex items-center mt-8">
+    <span class="label font-size-12 color-99A0AE">{{ label }}：</span>
+    <span class="value flex-full font-size-12 color-99A0AE">{{ value }}</span>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+// Props
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+    default: "",
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/order/order/components/OrderCard/OrderCardContent.vue b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
new file mode 100644
index 0000000..1839328
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="card-content border-box pt-12">
+    <div class="flex items-center justify-between">
+      <div
+        class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
+      >
+        {{ orderData.commodityName }}
+      </div>
+      <div
+        :class="[
+          'right font-size-18 font-bold line-height-20',
+          orderData.orderStatus === '0' ? 'color-FF3D60' : 'color-525866',
+        ]"
+      >
+        {{ orderData.orderAmt }}
+      </div>
+    </div>
+    <!-- 动态渲染信息行 -->
+    <InfoRow
+      v-for="item in displayItems"
+      :key="item.label"
+      :label="item.label"
+      :value="item.value"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+import InfoRow from "./InfoRow.vue";
+
+// 订单类型常量
+const ORDER_TYPES = {
+  HOTEL: "0", // 酒店订单
+  TICKET: "1", // 门票订单
+  OTHER: "2", // 其他订单
+};
+
+// 标签常量
+const LABELS = {
+  CHECK_IN_TIME: "入住时间",
+  VISITOR_NAME: "游客姓名",
+  CONTACT_PHONE: "联系电话",
+  QUANTITY: "份数",
+  CREATE_TIME: "创建时间",
+  CONTACT_GUEST: "联系房客",
+};
+
+// Props
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderType: undefined,
+      orderId: "",
+      checkInTime: "",
+      visitorName: "",
+      contactPhone: "",
+      userName: "",
+      userPhone: "",
+      commodityAmount: 0,
+      createTime: "",
+    }),
+  },
+});
+
+// 格式化份数
+const formatQuantity = (amount) => {
+  return `${Math.floor(amount || 0)}份`;
+};
+
+// 计算显示项目
+const displayItems = computed(() => {
+  const { orderData } = props;
+  const { orderType } = orderData;
+
+  // 去掉末尾连续、、
+  const formattedPhone = orderData.contactPhone.replace(/、+$/, "");
+
+  // 订单情况：根据 orderType 返回不同的显示项
+  switch (orderType) {
+    case ORDER_TYPES.HOTEL:
+      return [
+        {
+          label: LABELS.CHECK_IN_TIME,
+          value:
+            orderData.checkInData?.replace(
+              /(\d{4})-(\d{1,2})-(\d{1,2})/,
+              "$2月$3日",
+            ) +
+            "-" +
+            orderData.checkOutData?.replace(
+              /(\d{4})-(\d{1,2})-(\d{1,2})/,
+              "$2月$3日",
+            ),
+        },
+        { label: LABELS.VISITOR_NAME, value: orderData.visitorName },
+        { label: LABELS.CONTACT_PHONE, value: formattedPhone },
+      ];
+
+    case ORDER_TYPES.TICKET:
+    case ORDER_TYPES.OTHER:
+      return [
+        {
+          label: LABELS.QUANTITY,
+          value: formatQuantity(orderData.commodityAmount),
+        },
+      ];
+
+    default:
+      // 兜底情况，返回空数组
+      return [];
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.right {
+  &::before {
+    content: "￥";
+    font-weight: 500;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/pages/order/order/components/OrderCard/README.md b/src/pages/order/order/components/OrderCard/README.md
new file mode 100644
index 0000000..04f7067
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/README.md
@@ -0,0 +1,109 @@
+# OrderCard 组件
+
+订单卡片组件，用于显示订单和工单信息。
+
+## 组件结构
+
+```
+OrderCard/
+├── index.vue              # 主组件
+├── OrderCardContent.vue   # 卡片内容组件
+├── InfoRow.vue           # 信息行组件
+├── images/               # 图片资源
+├── styles/               # 样式文件
+└── README.md            # 说明文档
+```
+
+## 组件说明
+
+### OrderCard (主组件)
+- 负责整体布局和事件处理
+- 包含卡片头部、分割线、内容区域和操作区域
+- 处理点击、呼叫等交互事件
+
+### OrderCardContent (内容组件)
+- 负责根据 `orderType` 动态渲染不同的内容
+- 支持订单类型（0-酒店订单，1-门票订单，2-其他订单）和工单类型
+- 使用条件渲染显示对应的信息字段
+
+### InfoRow (信息行组件)
+- 可复用的信息展示组件
+- 统一的标签和值的显示格式
+- 支持字符串和数字类型的值
+
+## 使用方式
+
+```vue
+<template>
+  <OrderCard 
+    :order-data="orderData" 
+    @click="handleCardClick"
+    @call="handleCall"
+    @complete="handleComplete"
+  />
+</template>
+
+<script setup>
+import OrderCard from '@/pages/order/components/OrderCard/index.vue'
+
+const orderData = {
+  id: '123',
+  commodityName: '订单名称',
+  orderType: 0, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+  orderNumber: 'ORD123456',
+  checkInTime: '2024-01-01',
+  visitorName: '张三',
+  contactPhone: '13800138000',
+  quantity: 2,
+  createTime: '2024-01-01 10:00:00',
+  orderStatus: '1',
+  status: 'pending'
+}
+</script>
+```
+
+## Props
+
+### orderData (Object)
+
+| 字段 | 类型 | 说明 | 必填 |
+|------|------|------|------|
+| id | String | 订单ID | 是 |
+| commodityName | String | 商品名称 | 是 |
+| orderType | Number/undefined | 订单类型：0-酒店订单，1-门票订单，2-其他订单，undefined-工单 | 否 |
+| orderNumber | String | 订单编号 | 否 |
+| checkInTime | String | 入住时间（orderType=0时使用） | 否 |
+| visitorName | String | 游客姓名/联系房客 | 否 |
+| contactPhone | String | 联系电话 | 否 |
+| quantity | Number | 份数（orderType=1,2时使用） | 否 |
+| createTime | String | 创建时间（工单时使用） | 否 |
+| orderStatus | String | 订单状态 | 否 |
+| status | String | 状态 | 否 |
+
+## Events
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| click | 卡片点击事件 | orderData |
+| call | 呼叫事件 | orderData |
+| complete | 完成事件 | orderData |
+
+## 显示逻辑
+
+### 订单类型 (orderType !== undefined)
+
+- **orderType = 0 (酒店订单)**：显示订单编号、入住时间、游客姓名、联系电话
+- **orderType = 1 (门票订单)**：显示订单编号、份数
+- **orderType = 2 (其他订单)**：显示订单编号、份数
+
+### 工单类型 (orderType === undefined)
+
+显示创建时间、联系房客、联系电话
+
+## 优势
+
+1. **可读性**：组件职责单一，代码结构清晰
+2. **可维护性**：组件化拆分，便于独立维护和测试
+3. **可复用性**：InfoRow 组件可在其他地方复用
+4. **健壮性**：类型检查和默认值处理
+5. **扩展性**：新增订单类型只需修改 OrderCardContent 组件
\ No newline at end of file
diff --git a/src/pages/order/order/components/OrderCard/constants/order.js b/src/pages/order/order/components/OrderCard/constants/order.js
new file mode 100644
index 0000000..fc349fd
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/constants/order.js
@@ -0,0 +1,59 @@
+// 订单类型
+export const ORDER_TYPE_MAP = {
+  0: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '入住时间',
+      key: 'checkInData'
+    },
+    {
+      label: '游客姓名',
+      key: 'visitorName'
+    },
+    {
+      label: '联系电话',
+      key: 'contactPhone'
+    }
+  ],
+  1: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '份数',
+      key: 'commodityAmount'
+    }
+  ],
+  2: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '份数',
+      key: 'commodityAmount'
+    }
+  ],
+}
+
+// 工单类型
+export const SERVICE_TYPE_MAP = {
+  0: [
+    {
+      label: '创建时间',
+      key: 'createTime'
+    },
+    {
+      label: '联系房客',
+      key: 'userName'
+    },
+    {
+      label: '联系电话',
+      key: 'userPhone'
+    }
+  ],
+}
diff --git a/src/pages/order/order/components/OrderCard/images/food.png b/src/pages/order/order/components/OrderCard/images/food.png
new file mode 100644
index 0000000..87cf338
Binary files /dev/null and b/src/pages/order/order/components/OrderCard/images/food.png differ
diff --git a/src/pages/order/order/components/OrderCard/images/hotel.png b/src/pages/order/order/components/OrderCard/images/hotel.png
new file mode 100644
index 0000000..60bba2e
Binary files /dev/null and b/src/pages/order/order/components/OrderCard/images/hotel.png differ
diff --git a/src/pages/order/order/components/OrderCard/images/service.png b/src/pages/order/order/components/OrderCard/images/service.png
new file mode 100644
index 0000000..90bd017
Binary files /dev/null and b/src/pages/order/order/components/OrderCard/images/service.png differ
diff --git a/src/pages/order/order/components/OrderCard/images/ticket.png b/src/pages/order/order/components/OrderCard/images/ticket.png
new file mode 100644
index 0000000..175189a
Binary files /dev/null and b/src/pages/order/order/components/OrderCard/images/ticket.png differ
diff --git a/src/pages/order/order/components/OrderCard/index.vue b/src/pages/order/order/components/OrderCard/index.vue
new file mode 100644
index 0000000..a72613a
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="order-card bg-white border-box p-12 rounded-12 m-12"
+    @click.stop="handleCardClick"
+  >
+    <!-- 卡片头部 -->
+    <div class="card-header flex items-center">
+      <div class="status-info flex items-center flex-full">
+        <img class="status-icon mr-4" :src="getStatusIcon()" />
+        <div class="order-title font-size-14 line-height-20 color-525866">
+          {{ getOrderTypeName() }}
+        </div>
+      </div>
+      <div
+        v-if="orderData.status !== 'pending'"
+        :class="[
+          'status-tag font-size-12',
+          `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
+        ]"
+      >
+        {{ getStatusspan(orderData.orderStatus || orderData.workOrderStatus) }}
+      </div>
+    </div>
+
+    <!-- 卡片内容 -->
+    <OrderCardContent :order-data="orderData" />
+
+    <div v-if="orderData.orderStatus === '0'" class="span-right">
+      <button
+        class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block span-center line-height-30"
+        @click.stop="handleCardClick"
+      >
+        去支付
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import OrderCardContent from "./OrderCardContent.vue";
+import serviceIcon from "./images/service.png";
+
+// Props
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      workOrderTypeName: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
+      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+      orderNumber: "", // 订单编号
+      checkInTime: "", // 入住时间
+      visitorName: "", // 游客姓名
+      commodityAmount: 0, // 份数
+      workOrderStatus: 0, // 工单状态：0-待处理, 1-已完成
+    }),
+  },
+});
+
+// Emits
+const emit = defineEmits(["click", "call"]);
+
+// 图标映射
+const ICON_MAP = {
+  0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
+  1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
+  2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
+  3: "https://oss.nianxx.cn/mp/static/version_101/order/package.png", // 套餐
+};
+
+// 订单类型映射
+const ORDER_NAME_MAP = {
+  0: "房间",
+  1: "门票",
+  2: "餐饮",
+  3: "套餐",
+};
+
+// 获取状态图标
+const getStatusIcon = () => {
+  // 工单情况：orderType 为 undefined
+  if (props.orderData.orderType === undefined) {
+    return serviceIcon;
+  }
+  // 订单情况：根据 orderType 返回对应图标
+  return ICON_MAP[props.orderData.orderType] || serviceIcon;
+};
+
+// 获取订单类型名称
+const getOrderTypeName = () => {
+  return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
+};
+
+// 获取状态文本
+const getStatusspan = (status) => {
+  // 工单情况：orderType 为 undefined
+  if (props.orderData.orderType === undefined) {
+    const workOrderStatusMap = {
+      0: "待接单",
+      1: "处理中",
+      2: "已完成",
+      3: "已关闭",
+    };
+    return workOrderStatusMap[status] || "未知状态";
+  }
+
+  // 订单情况：orderType 有值
+  const orderStatusMap = {
+    0: "待支付",
+    1: "待确认",
+    2: "待使用",
+    3: "已取消",
+    4: "退款中",
+    5: "已退款",
+    6: "已完成",
+  };
+  return orderStatusMap[status] || "未知状态";
+};
+
+// 处理卡片点击
+const handleCardClick = () => {
+  if (props.orderData.orderType === undefined) return;
+  emit("click", props.orderData);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/OrderCard/prompt.md b/src/pages/order/order/components/OrderCard/prompt.md
new file mode 100644
index 0000000..0865022
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/prompt.md
@@ -0,0 +1,170 @@
+# OrderCard 工单卡片组件
+
+## 组件概述
+
+OrderCard 是一个用于显示工单信息的卡片组件，支持多种工单状态展示、操作按钮和自定义内容。适用于工单管理、客服系统等场景。
+
+## 功能特性
+
+- ✅ 多种工单状态支持（待处理、处理中、已完成、已取消）
+- ✅ 状态图标和标签显示
+- ✅ 工单基本信息展示
+- ✅ 可配置的操作按钮
+- ✅ 自定义操作区域插槽
+- ✅ 点击事件和操作事件
+- ✅ 响应式设计
+- ✅ 暗色模式支持
+- ✅ 优雅的交互动画
+
+## 组件属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+|--------|------|--------|------|------|
+| orderData | Object | - | 是 | 工单数据对象 |
+| showActions | Boolean | true | 否 | 是否显示操作按钮区域 |
+
+### orderData 对象结构
+
+```javascript
+{
+  id: String,           // 工单ID
+  title: String,        // 工单标题
+  createTime: String,   // 创建时间
+  contactName: String,  // 联系人姓名
+  contactPhone: String, // 联系电话
+  status: String        // 工单状态：pending/processing/completed/cancelled
+}
+```
+
+## 组件事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| click | orderData | 卡片点击事件 |
+| call | orderData | 呼叫按钮点击事件 |
+| complete | orderData | 完成按钮点击事件 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+|--------|------|
+| actions | 自定义操作按钮区域 |
+
+## 工单状态说明
+
+| 状态值 | 显示文本 | 图标颜色 | 标签样式 |
+|--------|----------|----------|----------|
+| pending | 待处理 | 橙色 | 橙色边框 |
+| processing | 处理中 | 蓝色 | 蓝色边框 |
+| completed | 已完成 | 绿色 | 绿色边框 |
+| cancelled | 已取消 | 灰色 | 灰色边框 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <OrderCard
+    :orderData="orderInfo"
+    @click="handleCardClick"
+    @call="handleCall"
+    @complete="handleComplete"
+  />
+</template>
+
+<script setup>
+import OrderCard from '@/components/OrderCard/index.vue'
+
+const orderInfo = {
+  id: '001',
+  title: '空调不制冷，需要维修',
+  createTime: '2024-01-15 14:30',
+  contactName: '张先生',
+  contactPhone: '138****8888',
+  status: 'pending'
+}
+
+const handleCardClick = (orderData) => {
+  console.log('卡片点击', orderData)
+}
+
+const handleCall = (orderData) => {
+  console.log('呼叫', orderData.contactPhone)
+}
+
+const handleComplete = (orderData) => {
+  console.log('标记完成', orderData.id)
+}
+</script>
+```
+
+### 隐藏操作按钮
+
+```vue
+<template>
+  <OrderCard
+    :orderData="completedOrder"
+    :showActions="false"
+    @click="handleCardClick"
+  />
+</template>
+```
+
+### 自定义操作按钮
+
+```vue
+<template>
+  <OrderCard
+    :orderData="orderInfo"
+    @click="handleCardClick"
+  >
+    <template #actions>
+      <button class="custom-btn" @click.stop="handleEdit">
+        编辑
+      </button>
+      <button class="custom-btn" @click.stop="handleDelete">
+        删除
+      </button>
+    </template>
+  </OrderCard>
+</template>
+```
+
+## 样式定制
+
+组件支持通过 CSS 变量进行样式定制：
+
+```css
+.order-card {
+  --card-bg: #ffffff;
+  --card-radius: 12px;
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --primary-color: #007AFF;
+  --success-color: #52C41A;
+  --warning-color: #FF8C00;
+  --danger-color: #FF3B30;
+}
+```
+
+## 响应式支持
+
+- 在小屏设备（≤375px）上自动调整字体大小和间距
+- 支持暗色模式自动适配
+- 触摸设备优化的交互体验
+
+## 注意事项
+
+1. **数据格式**：确保传入的 `orderData` 包含所有必需字段
+2. **状态值**：`status` 字段必须是预定义的状态值之一
+3. **事件处理**：使用 `@click.stop` 防止操作按钮事件冒泡
+4. **性能优化**：大量卡片时建议使用虚拟滚动
+
+## 更新日志
+
+### v1.0.0 (2024-01-15)
+- 初始版本发布
+- 支持基础工单信息展示
+- 支持多种状态和操作按钮
+- 支持自定义插槽
+- 响应式设计和暗色模式支持
\ No newline at end of file
diff --git a/src/pages/order/order/components/OrderCard/styles/index.scss b/src/pages/order/order/components/OrderCard/styles/index.scss
new file mode 100644
index 0000000..43e108e
--- /dev/null
+++ b/src/pages/order/order/components/OrderCard/styles/index.scss
@@ -0,0 +1,43 @@
+.order-card {
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.status-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.status-tag {
+  &.tag-0 {
+    color: #ff3d60;
+  }
+
+  &.tag-1 {
+    color: #f00044;
+  }
+
+  &.tag-2 {
+    color: #40ae36;
+  }
+
+  &.tag-3 {
+    color: #808389;
+  }
+
+  &.tag-4 {
+    color: $theme-color-500;
+  }
+
+  &.tag-5 {
+    color: #808389;
+  }
+
+  &.tag-6 {
+    color: #fd8702;
+  }
+}
diff --git a/src/pages/order/order/components/OrderInfo/index.vue b/src/pages/order/order/components/OrderInfo/index.vue
new file mode 100644
index 0000000..9bfccc5
--- /dev/null
+++ b/src/pages/order/order/components/OrderInfo/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="bg-white border-box rounded-10 p-12">
+    <div class="flex mb-8 font-size-12">
+      <span class="w-60 color-99A0AE">订单编号</span>
+      <span class="color-525866">{{ orderData.orderId }}</span>
+    </div>
+    <div class="flex mb-8 font-size-12">
+      <span class="w-60 color-99A0AE">下单时间</span>
+      <span class="color-525866">{{ orderData.createTime }}</span>
+    </div>
+    <div class="flex font-size-12">
+      <span class="w-60 color-99A0AE">支付状态</span>
+      <span
+        :class="[
+          {
+            'color-FF3D60': statusCode === '0' || statusCode === '3',
+            'color-21B466': ['1', '2', '4', '5', '6'].includes(statusCode),
+          },
+        ]"
+      >
+        {{ statusspan }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderId: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+const statusCode = computed(() => props.orderData.orderStatus);
+
+// 使用计算属性缓存支付方式文本
+const statusspan = computed(() =>
+  statusCode.value === "0" || statusCode.value === "3" ? "未支付" : "已支付",
+);
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/order/order/components/OrderQrcode/index.vue b/src/pages/order/order/components/OrderQrcode/index.vue
new file mode 100644
index 0000000..67213e4
--- /dev/null
+++ b/src/pages/order/order/components/OrderQrcode/index.vue
@@ -0,0 +1,304 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+    @change="handlePopupChange"
+  >
+    <div class="refund-popup bg-F5F7FA border-box">
+      <div
+        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
+      >
+        <div class="flex flex-col flex-items-center flex-full">
+          <div class="flex-full font-size-16 span-color-900 span-center">
+            核销凭证
+          </div>
+          <div class="flex-full font-size-12 span-color-600 span-center mt-4">
+            请向工作人员出示此码
+          </div>
+        </div>
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </div>
+
+      <div
+        class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12"
+      >
+        <div
+          class="flex w-full flex-row flex-items-center flex-justify-between py-4"
+        >
+          <div>
+            <div
+              class="font-size-16 font-500 color-000 line-height-24 ellipsis-1"
+            >
+              {{ selectedVoucher.name }}
+            </div>
+          </div>
+
+          <div v-if="selectedVoucher" class="flex flex-row">
+            <div
+              class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4"
+            >
+              总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
+            </div>
+            <div
+              class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
+            >
+              剩{{ selectedVoucher.count - selectedVoucher.writeOffCount
+              }}{{ selectedVoucher.unit }}可用
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12"
+        >
+          <div
+            class="flex flex-row flex-justify-between border-box w-full px-12"
+          >
+            <div
+              class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12"
+            >
+              凭证{{
+                selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : ""
+              }}
+            </div>
+            <div
+              class="span-color-500 font-size-14 px-12 line-height-24 rounded-12"
+            >
+              此码仅可核销{{
+                selectedVoucher.count - selectedVoucher.writeOffCount
+              }}份
+            </div>
+          </div>
+
+          <div
+            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"
+            />
+          </div>
+
+          <div
+            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 }}
+          </div>
+        </div>
+
+        <div
+          v-if="selectedVoucherList.length > 1"
+          class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"
+        >
+          <div class="actions-btn" @click.stop="upAction">
+            <uni-icons type="left" size="16" color="#171717" />
+          </div>
+
+          <div class="flex flex-col">
+            <div class="flex flex-row flex-justify-center flex-items-center">
+              <div class="theme-color-500 font-size-16">
+                {{ currentVoucherIndex + 1 }}
+              </div>
+              <div class="span-color-600 font-size-12">
+                /{{ selectedVoucherList.length }}
+              </div>
+            </div>
+
+            <div class="span-color-600 font-size-14">扫码后点击下一张</div>
+          </div>
+
+          <div class="actions-btn" @click.stop="downAction">
+            <uni-icons type="right" size="16" color="#171717" />
+          </div>
+        </div>
+        <div v-else class="mb-24"></div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+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,
+  },
+  unit: {
+    type: String,
+    default: "px",
+  },
+});
+
+// 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">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/OrderQrcode/styles/index.scss b/src/pages/order/order/components/OrderQrcode/styles/index.scss
new file mode 100644
index 0000000..a7a78da
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/pages/order/order/components/OrderStatusInfo/images/2025-07-13_115156.png b/src/pages/order/order/components/OrderStatusInfo/images/2025-07-13_115156.png
new file mode 100644
index 0000000..112743d
Binary files /dev/null and b/src/pages/order/order/components/OrderStatusInfo/images/2025-07-13_115156.png differ
diff --git a/src/pages/order/order/components/OrderStatusInfo/index.vue b/src/pages/order/order/components/OrderStatusInfo/index.vue
new file mode 100644
index 0000000..6971f0b
--- /dev/null
+++ b/src/pages/order/order/components/OrderStatusInfo/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="border-box font-size-24 color-171717 line-height-32 font-500 pt-12 pb-12"
+  >
+    {{ currentStatusspan }}
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+
+// 订单状态配置映射
+const ORDER_STATUS_CONFIG = {
+  0: "待支付",
+  1: "待确认",
+  2: "待使用",
+  3: "已取消",
+  4: "退款中",
+  5: "已退款",
+  6: "已完成",
+};
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderId: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+
+// 当前状态
+const currentStatusspan = computed(() => {
+  return (
+    ORDER_STATUS_CONFIG[props.orderData.orderStatus] || ORDER_STATUS_CONFIG["0"]
+  );
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/OrderStatusInfo/prompt.md b/src/pages/order/order/components/OrderStatusInfo/prompt.md
new file mode 100644
index 0000000..a6724fe
--- /dev/null
+++ b/src/pages/order/order/components/OrderStatusInfo/prompt.md
@@ -0,0 +1,14 @@
+## 订单状态组件
+
+组件名称：订单状态组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.order-status
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/pages/order/order/components/OrderStatusInfo/styles/index.scss b/src/pages/order/order/components/OrderStatusInfo/styles/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/order/order/components/Tabs/README.md b/src/pages/order/order/components/Tabs/README.md
new file mode 100644
index 0000000..54f8c81
--- /dev/null
+++ b/src/pages/order/order/components/Tabs/README.md
@@ -0,0 +1,250 @@
+# Tab 切换组件
+
+一个功能完整的 Tab 切换组件，支持动画过渡、自定义内容和响应式设计。
+
+## 功能特性
+
+- ✅ **多标签切换**：支持任意数量的标签页切换
+- ✅ **动画指示器**：选中状态下划线，支持平滑滑动动画
+- ✅ **自定义内容**：支持插槽自定义标签内容
+- ✅ **响应式设计**：适配不同屏幕尺寸
+- ✅ **动态宽度**：下划线宽度根据文字宽度动态调整
+- ✅ **事件支持**：完整的切换事件和双向绑定
+- ✅ **主题定制**：支持自定义指示器颜色
+- ✅ **uniapp 兼容**：使用 uniapp 内置组件开发
+
+## 基础用法
+
+```vue
+<template>
+  <Tab :tabs="tabList" :defaultActive="0" @change="handleTabChange" />
+</template>
+
+<script setup>
+import Tab from "./components/Tab/index.vue";
+
+const tabList = ref([
+  { label: "全部订单", value: "all" },
+  { label: "服务工单", value: "service" },
+]);
+
+const handleTabChange = ({ index, item }) => {
+  console.log("切换到:", item.label);
+};
+</script>
+```
+
+## 自定义标签内容
+
+使用 `tab-item` 插槽可以完全自定义标签的显示内容：
+
+```vue
+<template>
+  <Tab :tabs="customTabs" @change="handleChange">
+    <template #tab-item="{ item, index, isActive }">
+      <div class="custom-tab">
+        <img v-if="item.icon" :src="item.icon" class="tab-icon" />
+        <text :class="{ 'active-text': isActive }">{{ item.label }}</text>
+        <div v-if="item.badge" class="badge">{{ item.badge }}</div>
+      </div>
+    </template>
+  </Tab>
+</template>
+
+<script setup>
+const customTabs = ref([
+  {
+    label: "待处理",
+    value: "pending",
+    icon: "/static/pending.png",
+    badge: "3",
+  },
+  {
+    label: "已完成",
+    value: "completed",
+    icon: "/static/completed.png",
+  },
+]);
+</script>
+```
+
+## 双向绑定
+
+支持 `v-model` 双向绑定当前选中的索引：
+
+```vue
+<template>
+  <Tab v-model="activeIndex" :tabs="tabList" />
+  <text>当前选中索引：{{ activeIndex }}</text>
+</template>
+
+<script setup>
+const activeIndex = ref(0);
+const tabList = ref([
+  { label: "标签1", value: "tab1" },
+  { label: "标签2", value: "tab2" },
+]);
+</script>
+```
+
+## 动态标签
+
+支持动态添加和删除标签：
+
+```vue
+<template>
+  <Tab :tabs="dynamicTabs" @change="handleChange" />
+  <button @click="addTab">添加标签</button>
+  <button @click="removeTab">删除标签</button>
+</template>
+
+<script setup>
+const dynamicTabs = ref([{ label: "标签1", value: "tab1" }]);
+
+const addTab = () => {
+  const newIndex = dynamicTabs.value.length + 1;
+  dynamicTabs.value.push({
+    label: `标签${newIndex}`,
+    value: `tab${newIndex}`,
+  });
+};
+
+const removeTab = () => {
+  if (dynamicTabs.value.length > 1) {
+    dynamicTabs.value.pop();
+  }
+};
+</script>
+```
+
+## Props
+
+| 参数           | 类型   | 默认值                                                                | 说明                         |
+| -------------- | ------ | --------------------------------------------------------------------- | ---------------------------- |
+| tabs           | Array  | `[{label:'全部订单',value:'all'},{label:'服务工单',value:'service'}]` | 标签数据数组                 |
+| defaultActive  | Number | `0`                                                                   | 默认选中的标签索引           |
+| indicatorColor | String | `#007AFF`                                                             | 指示器颜色                   |
+| modelValue     | Number | -                                                                     | 当前选中索引（用于 v-model） |
+
+### tabs 数组项结构
+
+```typescript
+interface TabItem {
+  label: string; // 标签显示文本
+  value: string; // 标签值
+  [key: string]: any; // 其他自定义属性
+}
+```
+
+## Events
+
+| 事件名            | 说明                  | 参数                               |
+| ----------------- | --------------------- | ---------------------------------- |
+| change            | 标签切换时触发        | `{ index: number, item: TabItem }` |
+| update:modelValue | 用于 v-model 双向绑定 | `index: number`                    |
+
+## Slots
+
+| 插槽名   | 说明           | 作用域参数                                            |
+| -------- | -------------- | ----------------------------------------------------- |
+| tab-item | 自定义标签内容 | `{ item: TabItem, index: number, isActive: boolean }` |
+
+## 方法
+
+通过 `ref` 可以调用组件的方法：
+
+```vue
+<template>
+  <Tab ref="tabRef" :tabs="tabList" />
+  <button @click="switchToTab(1)">切换到第二个标签</button>
+</template>
+
+<script setup>
+const tabRef = ref();
+
+const switchToTab = (index) => {
+  tabRef.value.setActiveIndex(index);
+};
+</script>
+```
+
+| 方法名         | 说明                   | 参数            | 返回值    |
+| -------------- | ---------------------- | --------------- | --------- |
+| setActiveIndex | 设置当前选中的标签     | `index: number` | -         |
+| getActiveIndex | 获取当前选中的标签索引 | -               | `number`  |
+| getActiveItem  | 获取当前选中的标签项   | -               | `TabItem` |
+
+## 样式定制
+
+### CSS 变量
+
+组件支持通过 CSS 变量进行样式定制：
+
+```scss
+.tab-container {
+  --tab-bg-color: #fff; // 背景色
+  --tab-text-color: #666; // 文字颜色
+  --tab-active-color: #333; // 选中文字颜色
+  --tab-indicator-color: #007aff; // 指示器颜色
+  --tab-border-color: #f0f0f0; // 边框颜色
+}
+```
+
+### 自定义主题
+
+```vue
+<template>
+  <Tab :tabs="tabList" indicatorColor="#ff4d4f" class="custom-tab" />
+</template>
+
+<style>
+.custom-tab {
+  --tab-indicator-color: #ff4d4f;
+}
+
+.custom-tab .tab-text-active {
+  color: #ff4d4f;
+}
+</style>
+```
+
+## 技术实现
+
+- **框架**：Vue 3 组合式 API
+- **平台**：uniapp 跨平台开发
+- **动画**：CSS3 transition + transform
+- **响应式**：CSS media queries
+- **兼容性**：微信小程序、H5、App
+
+## 设计规范
+
+- 遵循微信小程序设计规范
+- 支持无障碍访问
+- 响应式设计，适配不同设备
+- 流畅的动画过渡效果
+- 一致的视觉风格
+
+## 兼容性
+
+| 平台         | 支持情况    |
+| ------------ | ----------- |
+| 微信小程序   | ✅ 完全支持 |
+| H5           | ✅ 完全支持 |
+| App          | ✅ 完全支持 |
+| 支付宝小程序 | ✅ 完全支持 |
+| 百度小程序   | ✅ 完全支持 |
+
+## 更新日志
+
+### v1.0.0
+
+- ✨ 初始版本发布
+- ✨ 支持基础标签切换功能
+- ✨ 支持动画指示器
+- ✨ 支持自定义标签内容
+- ✨ 支持响应式设计
+- ✨ 支持事件和双向绑定
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/pages/order/order/components/Tabs/index.vue b/src/pages/order/order/components/Tabs/index.vue
new file mode 100644
index 0000000..b844635
--- /dev/null
+++ b/src/pages/order/order/components/Tabs/index.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="tab-container">
+    <div class="tab-wrapper">
+      <div
+        v-for="(item, index) in tabList"
+        :key="index"
+        :class="['tab-item', activeIndex === index && 'tab-item-active']"
+        @click="handleTabClick(index)"
+      >
+        <slot
+          name="tab-item"
+          :item="item"
+          :index="index"
+          :isActive="activeIndex === index"
+        >
+          <span
+            :class="['tab-span', activeIndex === index && 'tab-span-active']"
+          >
+            {{ item.label }}
+          </span>
+        </slot>
+      </div>
+    </div>
+
+    <!-- 下划线指示器 -->
+    <div
+      :class="[
+        'tab-indicator',
+        indicatorAnimating && 'animating',
+        indicatorInitialized && 'initialized',
+      ]"
+      :style="{
+        left: indicatorLeft + 'px',
+        width: indicatorWidth + 'px',
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  nextTick,
+  watch,
+  getCurrentInstance,
+} from "vue";
+
+// 获取组件实例
+const instance = getCurrentInstance();
+
+// Props
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => [
+      { label: "全部订单", value: "all" },
+      { label: "服务工单", value: "service" },
+    ],
+  },
+  defaultActive: {
+    type: Number,
+    default: 0,
+  },
+  indicatorColor: {
+    type: String,
+    default: "#007AFF",
+  },
+});
+
+// Emits
+const emit = defineEmits(["change", "update:modelValue"]);
+
+// 响应式数据
+const activeIndex = ref(props.defaultActive);
+const tabList = ref(props.tabs);
+const indicatorLeft = ref(0);
+const indicatorWidth = ref(0);
+const tabItemRects = reactive([]);
+const isUpdating = ref(false);
+const indicatorAnimating = ref(false);
+const indicatorInitialized = ref(false);
+
+// 处理Tab点击
+const handleTabClick = (index) => {
+  if (activeIndex.value === index) return;
+
+  activeIndex.value = index;
+  indicatorAnimating.value = true;
+  updateIndicator();
+
+  // 动画结束后移除动画类
+  setTimeout(() => {
+    indicatorAnimating.value = false;
+  }, 300);
+
+  emit("change", {
+    index,
+    item: tabList.value[index],
+  });
+  emit("update:modelValue", index);
+};
+
+// 更新指示器位置
+const updateIndicator = async () => {
+  if (isUpdating.value) return;
+  isUpdating.value = true;
+
+  await nextTick();
+
+  // 检查实例是否存在
+  if (!instance) {
+    console.warn("Component instance not available");
+    isUpdating.value = false;
+    return;
+  }
+
+  // 检查 uni.createSelectorQuery 是否可用
+  if (!uni || !uni.createSelectorQuery) {
+    console.warn("uni.createSelectorQuery not available");
+    isUpdating.value = false;
+    return;
+  }
+
+  const query = uni.createSelectorQuery().in(instance);
+
+  // 同时获取tab项和容器的位置信息
+  query.selectAll(".tab-item").boundingClientRect();
+  query.select(".tab-wrapper").boundingClientRect();
+
+  query.exec((res) => {
+    try {
+      const [tabRects, wrapperRect] = res || [];
+
+      if (tabRects && tabRects.length > 0 && wrapperRect) {
+        tabItemRects.splice(0, tabItemRects.length, ...tabRects);
+
+        const activeRect = tabRects[activeIndex.value];
+        if (activeRect) {
+          // 计算相对于容器的位置，居中显示
+          const tabCenter =
+            activeRect.left - wrapperRect.left + activeRect.width / 2;
+          indicatorLeft.value = tabCenter - 7.5; // 15px宽度的一半
+          // 固定宽度15px，不动态计算宽度
+          indicatorWidth.value = 15;
+
+          // 标记为已初始化
+          if (!indicatorInitialized.value) {
+            indicatorInitialized.value = true;
+          }
+        }
+      } else {
+        console.warn("Failed to get tab rects or wrapper rect");
+      }
+    } catch (error) {
+      console.error("Error in updateIndicator exec:", error);
+    } finally {
+      isUpdating.value = false;
+    }
+  });
+};
+
+// 监听activeIndex变化
+watch(
+  () => activeIndex.value,
+  () => {
+    // 如果是初始化阶段，使用initIndicator
+    if (indicatorLeft.value === 0 && indicatorWidth.value === 0) {
+      initIndicator();
+    } else {
+      updateIndicator();
+    }
+  },
+);
+
+// 监听tabs变化
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    tabList.value = newTabs;
+    // 重置初始化状态
+    indicatorInitialized.value = false;
+    // 重新初始化指示器
+    initIndicator();
+  },
+  { deep: true },
+);
+
+// 监听defaultActive变化
+watch(
+  () => props.defaultActive,
+  (newActive) => {
+    if (newActive !== activeIndex.value) {
+      activeIndex.value = newActive;
+      // 重置初始化状态
+      indicatorInitialized.value = false;
+      initIndicator();
+    }
+  },
+);
+
+// 初始化指示器
+const initIndicator = async (retryCount = 0) => {
+  // 等待DOM完全渲染
+  await nextTick();
+
+  // 延迟一帧确保布局完成
+  setTimeout(() => {
+    // 检查实例是否存在
+    if (!instance) {
+      console.warn("Component instance not available in initIndicator");
+      return;
+    }
+
+    // 检查 uni.createSelectorQuery 是否可用
+    if (!uni || !uni.createSelectorQuery) {
+      console.warn("uni.createSelectorQuery not available in initIndicator");
+      return;
+    }
+
+    const query = uni.createSelectorQuery().in(instance);
+    query.selectAll(".tab-item").boundingClientRect();
+    query.select(".tab-wrapper").boundingClientRect();
+
+    query.exec((res) => {
+      try {
+        const [tabRects, wrapperRect] = res || [];
+
+        // 如果DOM元素还未准备好，重试
+        if (
+          (!tabRects || tabRects.length === 0 || !wrapperRect) &&
+          retryCount < 3
+        ) {
+          setTimeout(() => {
+            initIndicator(retryCount + 1);
+          }, 100);
+          return;
+        }
+
+        // 执行正常的更新逻辑
+        updateIndicator();
+      } catch (error) {
+        console.error("Error in initIndicator exec:", error);
+        // 如果出错且还有重试次数，尝试重试
+        if (retryCount < 3) {
+          setTimeout(() => {
+            initIndicator(retryCount + 1);
+          }, 100);
+        }
+      }
+    });
+  }, 50);
+};
+
+// 组件挂载后初始化指示器
+onMounted(() => {
+  initIndicator();
+});
+
+// 暴露方法
+defineExpose({
+  setActiveIndex: (index) => {
+    if (index >= 0 && index < tabList.value.length) {
+      handleTabClick(index);
+    }
+  },
+  getActiveIndex: () => activeIndex.value,
+  getActiveItem: () => tabList.value[activeIndex.value],
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/order/order/components/Tabs/propmt.md b/src/pages/order/order/components/Tabs/propmt.md
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/order/order/components/Tabs/styles/index.scss b/src/pages/order/order/components/Tabs/styles/index.scss
new file mode 100644
index 0000000..385205c
--- /dev/null
+++ b/src/pages/order/order/components/Tabs/styles/index.scss
@@ -0,0 +1,100 @@
+.tab-container {
+  position: relative;
+}
+
+.tab-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  transition: all 0.3s ease;
+  padding: 0 8px;
+}
+
+.tab-text {
+  font-size: $uni-font-size-base;
+  color: #666;
+  font-weight: 400;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.tab-text-active {
+  color: $uni-text-color;
+  font-size: $uni-font-size-lg;
+  font-weight: 600;
+}
+
+.tab-item-active {
+  .tab-text {
+    color: $uni-text-color;
+    font-weight: 600;
+  }
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  min-height: 3px; /* 确保最小高度 */
+  background-color: #007aff;
+  border-radius: 10px;
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  transform: translateZ(0); /* 启用硬件加速 */
+  will-change: left, width; /* 优化动画性能 */
+
+  /* 初始状态：未初始化时隐藏 */
+  opacity: 0;
+  width: 15px; /* 默认宽度15px */
+  left: 0;
+}
+
+/* 已初始化状态 */
+.tab-indicator.initialized {
+  opacity: 1;
+}
+
+/* 点击效果 */
+.tab-item:active {
+  opacity: 0.7;
+}
+
+/* 自定义主题色支持 */
+.tab-container[data-indicator-color="red"] .tab-indicator {
+  background-color: #ff4d4f;
+}
+
+.tab-container[data-indicator-color="green"] .tab-indicator {
+  background-color: #52c41a;
+}
+
+.tab-container[data-indicator-color="orange"] .tab-indicator {
+  background-color: #fa8c16;
+}
+
+/* 动画增强 */
+@keyframes tabSwitch {
+  0% {
+    transform: translateZ(0) scaleX(0.8);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateZ(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+.tab-indicator.animating {
+  animation: tabSwitch 0.3s ease-out;
+}
diff --git a/src/pages/order/order/components/Tabs/test.vue b/src/pages/order/order/components/Tabs/test.vue
new file mode 100644
index 0000000..a2638f5
--- /dev/null
+++ b/src/pages/order/order/components/Tabs/test.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="test-page">
+    <div class="test-section">
+      <span class="test-title">Tab组件测试</span>
+
+      <!-- 基础测试 -->
+      <div class="test-item">
+        <span class="item-title">基础用法</span>
+        <Tab :tabs="basicTabs" :defaultActive="0" @change="handleTabChange" />
+        <div class="result">
+          <span>当前选中: {{ currentTab.label }}</span>
+        </div>
+      </div>
+
+      <!-- 多标签测试 -->
+      <div class="test-item">
+        <span class="item-title">多标签测试</span>
+        <Tab
+          :tabs="multiTabs"
+          :defaultActive="1"
+          @change="handleMultiTabChange"
+        />
+        <div class="result">
+          <span>当前选中: {{ currentMultiTab.label }}</span>
+        </div>
+      </div>
+
+      <!-- 快速切换测试 -->
+      <div class="test-item">
+        <span class="item-title">快速切换测试</span>
+        <Tab
+          ref="fastTabRef"
+          :tabs="fastTabs"
+          :defaultActive="0"
+          @change="handleFastTabChange"
+        />
+        <div class="result">
+          <span>当前选中: {{ currentFastTab.label }}</span>
+        </div>
+        <div class="test-buttons">
+          <button
+            v-for="(tab, index) in fastTabs"
+            :key="index"
+            class="test-btn"
+            @click="switchToTab(index)"
+          >
+            切换到{{ tab.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 初始化测试 -->
+      <div class="test-item">
+        <span class="item-title">初始化测试</span>
+        <span class="test-desc"
+          >测试指示器的动态高度和宽度初始化及错误处理</span
+        >
+        <Tab
+          v-if="showInitTest"
+          :tabs="initTestTabs"
+          :defaultActive="initActiveIndex"
+          @change="handleInitTestChange"
+        />
+        <div class="result">
+          <span>当前选中: {{ currentInitTab.label }}</span>
+        </div>
+        <div class="test-buttons">
+          <button class="test-btn" @click="toggleInitTest">
+            {{ showInitTest ? "隐藏" : "显示" }}组件
+          </button>
+          <button class="test-btn" @click="changeInitActive">
+            切换默认激活项 (当前: {{ initActiveIndex }})
+          </button>
+          <button class="test-btn" @click="addInitTab">添加Tab</button>
+          <button class="test-btn" @click="removeInitTab">移除Tab</button>
+          <button class="test-btn" @click="rapidToggle">快速切换测试</button>
+        </div>
+        <div class="test-info">
+          <span>错误处理测试：组件现在能够安全处理实例为null的情况</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import Tab from "./index.vue";
+
+// 基础标签
+const basicTabs = ref([
+  { label: "全部订单", value: "all" },
+  { label: "服务工单", value: "service" },
+]);
+
+// 多标签
+const multiTabs = ref([
+  { label: "全部", value: "all" },
+  { label: "待支付", value: "unpaid" },
+  { label: "待确认", value: "unconfirmed" },
+  { label: "进行中", value: "processing" },
+  { label: "已完成", value: "completed" },
+]);
+
+// 快速切换测试
+const fastTabs = ref([
+  { label: "标签A", value: "a" },
+  { label: "标签B", value: "b" },
+  { label: "标签C", value: "c" },
+  { label: "标签D", value: "d" },
+]);
+
+// 初始化测试
+const initTestTabs = ref([
+  { label: "初始1", value: "init1" },
+  { label: "初始2", value: "init2" },
+  { label: "初始3", value: "init3" },
+]);
+
+// 当前选中索引
+const currentTabIndex = ref(0);
+const currentMultiTabIndex = ref(1);
+const currentFastTabIndex = ref(0);
+const currentInitTabIndex = ref(1);
+
+// 初始化测试状态
+const showInitTest = ref(true);
+const initActiveIndex = ref(1);
+
+// 计算当前选中项
+const currentTab = computed(() => basicTabs.value[currentTabIndex.value] || {});
+const currentMultiTab = computed(
+  () => multiTabs.value[currentMultiTabIndex.value] || {},
+);
+const currentFastTab = computed(
+  () => fastTabs.value[currentFastTabIndex.value] || {},
+);
+const currentInitTab = computed(
+  () => initTestTabs.value[currentInitTabIndex.value] || {},
+);
+
+// Tab引用
+const fastTabRef = ref(null);
+
+// 事件处理
+const handleTabChange = ({ index, item }) => {
+  currentTabIndex.value = index;
+  console.log("基础Tab切换:", item);
+};
+
+const handleMultiTabChange = ({ index, item }) => {
+  currentMultiTabIndex.value = index;
+  console.log("多标签Tab切换:", item);
+};
+
+const handleFastTabChange = ({ index, item }) => {
+  currentFastTabIndex.value = index;
+  console.log("快速Tab切换:", item);
+};
+
+const handleInitTestChange = ({ index, item }) => {
+  currentInitTabIndex.value = index;
+  console.log("初始化Tab切换:", item);
+};
+
+// 程序化切换
+const switchToTab = (index) => {
+  currentFastTabIndex.value = index;
+  if (fastTabRef.value) {
+    fastTabRef.value.setActiveIndex(index);
+  }
+};
+
+// 初始化测试方法
+const toggleInitTest = () => {
+  showInitTest.value = !showInitTest.value;
+};
+
+const changeInitActive = () => {
+  initActiveIndex.value =
+    (initActiveIndex.value + 1) % initTestTabs.value.length;
+};
+
+const addInitTab = () => {
+  const newIndex = initTestTabs.value.length + 1;
+  initTestTabs.value.push({
+    label: `初始${newIndex}`,
+    value: `init${newIndex}`,
+  });
+};
+
+const removeInitTab = () => {
+  if (initTestTabs.value.length > 1) {
+    initTestTabs.value.pop();
+    if (initActiveIndex.value >= initTestTabs.value.length) {
+      initActiveIndex.value = initTestTabs.value.length - 1;
+    }
+  }
+};
+
+const rapidToggle = () => {
+  // 快速切换测试，模拟可能导致实例为null的场景
+  let count = 0;
+  const interval = setInterval(() => {
+    showInitTest.value = !showInitTest.value;
+    count++;
+    if (count >= 6) {
+      clearInterval(interval);
+      showInitTest.value = true;
+    }
+  }, 200);
+};
+</script>
+
+<style scoped>
+.test-page {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.test-section {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.test-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+  display: block;
+}
+
+.test-item {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.test-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.item-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #666;
+  margin-bottom: 15px;
+  display: block;
+}
+
+.test-desc {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.test-info {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f0f9ff;
+  border-radius: 8px;
+  border-left: 4px solid #007aff;
+}
+
+.test-info span {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.result {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.result span {
+  font-size: 14px;
+  color: #666;
+}
+
+.test-buttons {
+  margin-top: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.test-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.test-btn:active {
+  opacity: 0.7;
+}
+</style>
diff --git a/src/pages/order/order/components/UserInfo/index.vue b/src/pages/order/order/components/UserInfo/index.vue
new file mode 100644
index 0000000..400232c
--- /dev/null
+++ b/src/pages/order/order/components/UserInfo/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="bg-white border-box rounded-10 p-12 mb-12" v-if="hasConsumerData">
+    <div v-for="(item, index) in consumerList" :key="index">
+      <div class="flex mb-8 font-size-12">
+        <span class="w-60 color-99A0AE">住客姓名</span>
+        <span class="color-525866">{{ item.visitorName }}</span>
+      </div>
+    </div>
+    <div class="flex font-size-12">
+      <span class="w-60 color-99A0AE">联系电话</span>
+      <span class="color-525866">{{ contactPhone }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      createTime: "",
+      consumerInfoList: [],
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+
+// 使用计算属性处理用户信息列表，提供更好的响应性和缓存
+const consumerList = computed(() => props.orderData.consumerInfoList || []);
+
+// 联系电话
+const contactPhone = computed(() => consumerList.value[0]?.contactPhone);
+
+// 检查是否有用户数据
+const hasConsumerData = computed(() => consumerList.value.length);
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/order/order/components/VoucherList/index.vue b/src/pages/order/order/components/VoucherList/index.vue
new file mode 100644
index 0000000..04143d5
--- /dev/null
+++ b/src/pages/order/order/components/VoucherList/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="bg-white border-box rounded-12 px-12 pt-12 mb-12">
+    <span class="font-size-16 color-171717 line-height-24 font-500">
+      核销凭证列表
+    </span>
+
+    <div
+      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"
+    >
+      <div class="flex flex-col">
+        <span class="span-color-900 font-size-16">{{ item.name }}</span>
+        <div class="flex flex-row mt-8">
+          <div class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4">
+            总计{{ item.count }}{{ item.unit }}
+          </div>
+          <div
+            class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
+          >
+            剩{{ item.count - item.writeOffCount }}{{ item.unit }}可用
+          </div>
+        </div>
+      </div>
+
+      <div
+        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)"
+      >
+        <span v-if="item.packageStatus === 0" class="font-size-14 color-white"
+          >出示凭证</span
+        >
+        <span v-else class="font-size-14 span-color-300">已核销</span>
+      </div>
+    </div>
+  </div>
+</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>
diff --git a/src/pages/order/order/detail.vue b/src/pages/order/order/detail.vue
new file mode 100644
index 0000000..145b369
--- /dev/null
+++ b/src/pages/order/order/detail.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="order-detail-page flex flex-col h-screen">
+    <TopNavBar
+      titleAlign="center"
+      :background="$theme - color - 100"
+      title="订单详情"
+    />
+
+    <div
+      class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
+    >
+      <OrderStatusInfo :orderData="orderData" />
+
+      <VoucherList
+        v-if="orderData.orderType != 0 && orderData.orderStatus === '2'"
+        :orderData="orderData"
+        @selected="handleSelectedVoucher"
+      />
+
+      <AmtSection :orderData="orderData" @click="refundVisible = true" />
+
+      <GoodsInfo :orderData="orderData" />
+
+      <UserInfo v-if="orderData.orderType == 0" :orderData="orderData" />
+
+      <OrderInfo :orderData="orderData" />
+    </div>
+
+    <FooterSection
+      :orderData="orderData"
+      @refund="handleRefundConfirm"
+      @refresh="handlePaySuccess"
+    />
+  </div>
+
+  <!-- 核销凭证 二维码 -->
+  <OrderQrcode
+    v-if="orderData.orderStatus === '2'"
+    v-show="visbleQrcode"
+    v-model="visbleQrcode"
+    :orderData="orderData"
+    :selectedVoucher="selectedVoucher"
+    :selectedVoucherIndex="selectedVoucherIndex"
+    @close="handleClose"
+  />
+
+  <!-- 退款状态显示 -->
+  <RefundPopup v-model="refundVisible" :orderData="orderData" />
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { onLoad, onUnload } 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";
+import AmtSection from "./components/AmtSection/index.vue";
+import OrderInfo from "./components/OrderInfo/index.vue";
+import FooterSection from "./components/FooterSection/index.vue";
+import RefundPopup from "@/components/RefundPopup/index.vue";
+
+// 获取事件通道对象
+let eventChannel = null;
+
+const refundVisible = ref(false);
+const orderData = ref({});
+
+const visbleQrcode = ref(false);
+const selectedVoucher = ref(null);
+const selectedVoucherIndex = ref(0);
+
+onLoad(({ orderId }) => {
+  getOrderDetail(orderId);
+
+  // 获取当前页面的事件通道（由 navigateTo 打开时可用）
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  eventChannel = currentPage.getOpenerEventChannel();
+});
+
+// 处理选中核销凭证事件
+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 });
+  orderData.value = res.data;
+};
+
+// 确认退款
+const handleRefundConfirm = async ({ orderId }) => {
+  try {
+    // 调用退款API
+    await orderRefund({ orderId });
+
+    uni.showToast({ title: "退款申请已提交", icon: "success" });
+
+    // 刷新订单状态
+    const res = await userOrderDetail({ orderId });
+    orderData.value = res.data;
+  } catch (error) {
+    uni.showToast({ title: "退款申请失败，请重试", icon: "none" });
+  }
+};
+
+// 再次预定
+const handlePaySuccess = ({ orderId }) => {
+  console.log("支付成功，刷新订单详情", orderId);
+  getOrderDetail(orderId);
+  // 支付成功后通知上一个页面
+  setTimeout(() => {
+    eventChannel.emit("refreshOrderList", { success: true });
+  }, 1000);
+};
+
+onUnload(() => {
+  eventChannel.on("refreshOrderList");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/detail.scss";
+</style>
diff --git a/src/pages/order/order/list.vue b/src/pages/order/order/list.vue
new file mode 100644
index 0000000..f05df7d
--- /dev/null
+++ b/src/pages/order/order/list.vue
@@ -0,0 +1,83 @@
+<template>
+  <z-paging
+    :bg-color="
+      'linear-gradient(180deg, ' +
+      $theme -
+      color -
+      100 +
+      ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'
+    "
+    ref="paging"
+    v-model="dataList"
+    use-virtual-list
+    :force-close-inner-list="true"
+    cell-height-mode="dynamic"
+    safe-area-inset-bottom
+    @query="queryList"
+  >
+    <template #top>
+      <TopNavBar title="全部订单" />
+    </template>
+
+    <template #empty>
+      <CustomEmpty statusspan="您暂无订单" />
+    </template>
+
+    <OrderCard
+      v-for="(item, index) in dataList"
+      :key="item.id || index"
+      :orderData="item"
+      @click="handleOrderClick"
+    />
+  </z-paging>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import CustomEmpty from "@/components/CustomEmpty/index.vue";
+import OrderCard from "./components/OrderCard/index.vue";
+import { userOrderList } from "@/request/api/OrderApi";
+
+const dataList = ref([]);
+const paging = ref(null);
+
+const queryList = async (pageNum, pageSize) => {
+  try {
+    const res = await userOrderList({ pageNum, pageSize });
+    console.log("API响应:", res);
+
+    if (res && res.data && res.data.records) {
+      const records = res.data.records;
+
+      // 完成数据加载，第二个参数表示是否还有更多数据
+      paging.value.complete(records);
+    } else {
+      // 没有数据
+      paging.value.complete([]);
+    }
+  } catch (error) {
+    console.error("查询列表失败:", error);
+    // 加载失败
+    paging.value.complete(false);
+  }
+};
+
+// 处理订单点击
+const handleOrderClick = ({ orderId }) => {
+  // 这里可以添加订单详情跳转逻辑
+  uni.navigateTo({
+    url: `/pages-order/order/detail?orderId=${orderId}`,
+    events: {
+      refreshOrderList: (event) => {
+        console.log("订单详情页面请求刷新订单列表", event);
+        if (event.success) {
+          queryList(1, 10);
+        }
+      },
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/order/order/prompt.md b/src/pages/order/order/prompt.md
new file mode 100644
index 0000000..f80e6e0
--- /dev/null
+++ b/src/pages/order/order/prompt.md
@@ -0,0 +1,181 @@
+# 订单管理系统组件需求文档
+
+## 项目概述
+
+订单管理系统的核心组件库，包含工单卡片、工单列表、咨询栏等核心功能组件。
+
+## TopNavBar 组件
+
+### 功能要求
+
+- 顶部导航栏展示
+- 支持自定义标题内容
+- 支持插槽扩展
+
+### 设计要求
+
+- 固定在页面顶部
+- 背景色与主题一致
+- 高度适中，不占用过多空间
+
+## Tabs 组件
+
+### 功能要求
+
+- 标签页切换功能
+- 支持默认激活项
+- 切换动画效果
+- 事件回调
+
+### 设计要求
+
+- 标签间距均匀
+- 激活状态明显
+- 切换动画流畅
+- 响应式适配
+
+## OrderCard 组件
+
+### 功能要求
+
+- 展示工单基本信息（标题、时间、联系人、状态等）
+- 支持点击事件
+- 支持呼叫功能
+- 支持完成操作
+- 状态标识清晰
+
+### 设计要求
+
+- 卡片式布局，圆角设计
+- 信息层次分明
+- 操作按钮位置合理
+- 状态颜色区分明显
+- 支持不同状态的视觉反馈
+
+## OrderList 组件
+
+### 功能要求
+
+- 显示工单列表
+- 集成z-paging组件，支持虚拟列表
+- 支持自定义下拉刷新（文案、样式、阈值）
+- 支持自定义上拉加载更多（文案、样式、阈值）
+- 自动管理空数据状态
+- 支持固定高度和自适应高度模式
+- 完整的事件回调机制
+- 加载状态管理
+
+### 设计要求
+
+- 列表项间距合理
+- 加载动画流畅
+- 空状态友好提示
+- 响应式布局
+- 虚拟列表优化大数据渲染性能
+
+### z-paging配置
+
+- `useVirtualList`: 是否启用虚拟列表（默认true）
+- `virtualListHeight`: 虚拟列表高度（默认100%）
+- `cellHeightMode`: 单元格高度模式（auto/fixed）
+- `fixedHeight`: 固定高度值（当cellHeightMode为fixed时使用）
+- `customEmptydiv`: 是否使用自定义空状态
+
+## ConsultationBar 组件
+
+### 功能要求
+
+- 底部固定咨询栏
+- 显示客服信息和联系方式
+- 支持立即咨询功能
+- 默认隐藏，点击"立即呼叫"按钮后显示
+- "立即咨询"按钮单独一行显示
+- 支持显示/隐藏动画效果
+
+### 设计要求
+
+- 固定在页面底部
+- 背景半透明或纯色
+- 按钮样式与主题一致
+- 信息布局清晰
+- 支持安全区域适配
+- 显示/隐藏动画流畅
+
+## 数据结构
+
+### 工单数据结构
+
+```javascript
+{
+  id: String,           // 工单ID
+  title: String,        // 工单标题
+  createTime: String,   // 创建时间
+  contactName: String,  // 联系人姓名
+  contactPhone: String, // 联系电话
+  status: String,       // 状态：pending-待处理, processing-处理中, completed-已完成, cancelled-已取消
+  type: String          // 类型：service-服务工单, order-普通订单
+}
+```
+
+### Tab数据结构
+
+```javascript
+{
+  label: String,  // 显示文本
+  value: String   // 值
+}
+```
+
+## 技术要求
+
+### 框架和库
+
+- Vue 3 Composition API
+- uni-app框架
+- z-paging组件（用于列表优化）
+- SCSS样式预处理
+
+### 性能优化
+
+- 虚拟列表支持大数据量渲染
+- 图片懒加载
+- 组件按需加载
+- 合理的缓存策略
+
+### 兼容性
+
+- 支持微信小程序
+- 支持H5
+- 支持APP
+- 响应式设计，适配不同屏幕尺寸
+
+## 更新日志
+
+### v1.2.0 (最新)
+
+- ✅ 集成z-paging组件到OrderList
+- ✅ 支持虚拟列表，提升大数据渲染性能
+- ✅ 自定义下拉刷新和上拉加载更多
+- ✅ 自动管理空数据状态
+- ✅ 支持固定高度和自适应高度模式
+- ✅ 完整的事件回调机制
+- ✅ 创建OrderList演示页面
+
+### v1.1.0
+
+- ✅ 修改ConsultationBar组件布局
+- ✅ "立即咨询"按钮单独一行显示
+- ✅ 默认隐藏，点击"立即呼叫"后显示
+- ✅ 添加显示/隐藏动画效果
+- ✅ 更新相关样式和交互逻辑
+
+### v1.0.0
+
+- ✅ 完成OrderCard组件开发
+- ✅ 完成OrderList组件开发
+- ✅ 完成ConsultationBar组件开发
+- ✅ 完成TopNavBar组件开发
+- ✅ 完成Tabs组件开发
+- ✅ 完成订单管理页面集成
+- ✅ 创建组件演示页面
+- ✅ 编写技术文档
diff --git a/src/pages/order/order/styles/detail.scss b/src/pages/order/order/styles/detail.scss
new file mode 100644
index 0000000..973ef3e
--- /dev/null
+++ b/src/pages/order/order/styles/detail.scss
@@ -0,0 +1,4 @@
+.order-detail-wrapper {
+  background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%);
+  padding: 0 12px 40px;
+}
diff --git a/src/pages/order/order/styles/list.scss b/src/pages/order/order/styles/list.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/quick/components/Card/index.vue b/src/pages/quick/components/Card/index.vue
new file mode 100644
index 0000000..0cc5bc0
--- /dev/null
+++ b/src/pages/quick/components/Card/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
+    @click.stop="handleClick(item)"
+  >
+    <img class="left rounded-10" :src="item.commodityPhoto" mode="aspectFill" />
+    <div class="right border-box flex-full pl-12">
+      <div class="font-size-16 line-height-24 color-171717 mb-4">
+        {{ item.commodityName }}
+      </div>
+      <div
+        v-if="item.commodityFacility"
+        class="font-size-12 line-height-16 color-99A0AE mb-4 ellipsis-1"
+      >
+        {{ item.commodityFacility.join(" ") }}
+      </div>
+      <div class="font-size-12 line-height-18 color-43669A">
+        {{ item.commodityTradeRuleList.join(" / ") }}
+      </div>
+
+      <div class="flex flex-items-center flex-justify-end">
+        <span
+          class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
+        >
+          {{ item.specificationPrice }}
+        </span>
+        <span
+          v-if="item.stockUnitLabel"
+          class="font-size-12 line-height-16 color-99A0AE"
+        >
+          /{{ item.stockUnitLabel }}
+        </span>
+        <span class="btn border-box rounded-10 color-white ml-16">订</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { useSelectedDateStore } from "@/store";
+
+// Props
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({
+      commodityPhoto: "",
+      commodityId: "",
+      commodityName: "",
+      specificationPrice: "",
+      commodityServices: [],
+      commodityTags: [], // 商品标签
+      commodityTradeRuleList: [], // 交易规则列表
+      specificationId: "", // 规格ID
+      stockUnitLabel: "", // 库存单位
+    }),
+  },
+  selectedDate: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const selectedDateStore = useSelectedDateStore();
+
+const navigateToPage = (commodityId, path) => {
+  const { startDate, endDate, totalDays } = props.selectedDate;
+  selectedDateStore.setData({ startDate, endDate, totalDays });
+
+  uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
+};
+
+const handleClick = ({ commodityId }) =>
+  navigateToPage(commodityId, "/pages/goods/index");
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/quick/components/Card/styles/index.scss b/src/pages/quick/components/Card/styles/index.scss
new file mode 100644
index 0000000..3f1f74d
--- /dev/null
+++ b/src/pages/quick/components/Card/styles/index.scss
@@ -0,0 +1,22 @@
+.left {
+  height: 80px;
+  width: 80px;
+}
+
+.right {
+  max-width: 259px;
+  height: 100%;
+}
+
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 12px;
+    margin-right: 4px;
+  }
+}
+
+.btn {
+  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
+  padding: 4px 8px;
+}
diff --git a/src/pages/quick/components/Tabs/index.vue b/src/pages/quick/components/Tabs/index.vue
new file mode 100644
index 0000000..af8d947
--- /dev/null
+++ b/src/pages/quick/components/Tabs/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="tab-container relative">
+    <div class="tab-wrapper flex flex-items-center">
+      <div
+        v-for="(item, index) in tabList"
+        :key="item.id"
+        :class="[
+          'tab-item flex flex-items-center flex-justify-center relative',
+          activeIndex === index && 'tab-item-active',
+        ]"
+        @click="handleTabClick(index)"
+      >
+        <div class="tab-item-inner flex flex-items-center">
+          <uni-icons
+            :class="['icon mr-4', activeIndex === index && 'icon-active']"
+            fontFamily="znicons"
+            size="20"
+            color="opacity"
+          >
+            {{ zniconsMap[item.iconCode] }}
+          </uni-icons>
+
+          <span
+            :class="[
+              'font-size-16 font-500 color-525866 ',
+              activeIndex === index && 'tab-span-active',
+            ]"
+          >
+            {{ item.iconTitle }}
+          </span>
+        </div>
+
+        <!-- 每项内的下划线指示器，通过类控制显示/隐藏 -->
+        <div
+          class="tab-item-indicator"
+          :class="{ visible: activeIndex === index }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons";
+import { commodityTypePageList } from "@/request/api/GoodsApi";
+
+// Props
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => [
+      { iconTitle: "客房", typeCode: "0", iconCode: "zn-nav-room" },
+      { iconTitle: "门票", typeCode: "1", iconCode: "zn-nav-ticket" },
+      { iconTitle: "餐食", typeCode: "2", iconCode: "zn-nav-meal" },
+      { iconTitle: "套餐", typeCode: "3", iconCode: "zn-package" },
+      { iconTitle: "文创", typeCode: "4", iconCode: "zn-package" },
+    ],
+  },
+  defaultActive: {
+    type: Number,
+    default: 0,
+  },
+  indicatorColor: {
+    type: String,
+    default: "#1890ff",
+  },
+});
+
+// Emits
+const emit = defineEmits(["change", "update:modelValue"]);
+
+// 响应式数据
+const activeIndex = ref(props.defaultActive);
+const tabList = ref([]);
+
+// 处理Tab点击
+const handleTabClick = (index) => {
+  changeTabItem(index);
+};
+
+// 支持 force 参数，强制触发（即使 index 与当前相同）
+const changeTabItem = (index, force = false) => {
+  if (!force && activeIndex.value === index) return;
+  activeIndex.value = index;
+
+  emit("change", {
+    index,
+    item: tabList.value[index],
+  });
+  emit("update:modelValue", index);
+};
+
+// 监听tabs变化
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    tabList.value = newTabs;
+  },
+  { deep: true },
+);
+
+// 监听defaultActive变化
+watch(
+  () => props.defaultActive,
+  (newActive) => {
+    if (newActive !== activeIndex.value) {
+      activeIndex.value = newActive;
+    }
+  },
+);
+
+// 暴露方法
+defineExpose({
+  setActiveIndex: (index) => {
+    if (index >= 0 && index < tabList.value.length) {
+      handleTabClick(index);
+    }
+  },
+  getActiveIndex: () => activeIndex.value,
+  getActiveItem: () => tabList.value[activeIndex.value],
+});
+
+onMounted(() => {
+  getCommodityTypePageList();
+});
+
+// 获取商品类型列表（示例方法，实际使用时根据需要调用）
+const getCommodityTypePageList = async () => {
+  const res = await commodityTypePageList({ size: 20, current: 1 });
+  if (res && res.data && res.data.records) {
+    tabList.value = res.data.records;
+  } else {
+    tabList.value = props.tabs;
+  }
+  // 加载完成后强制选中第一个项并通知外部
+  if (tabList.value && tabList.value.length > 0) {
+    changeTabItem(0, true);
+  } else {
+    changeTabItem(props.defaultActive, true);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/quick/components/Tabs/styles/index.scss b/src/pages/quick/components/Tabs/styles/index.scss
new file mode 100644
index 0000000..d412c4a
--- /dev/null
+++ b/src/pages/quick/components/Tabs/styles/index.scss
@@ -0,0 +1,90 @@
+.tab-wrapper {
+  background-color: $theme-color-100;
+  height: 48px;
+  overflow-x: auto;
+  /* 支持横向滚动 */
+  -webkit-overflow-scrolling: touch;
+  /* 平滑滚动（移动端） */
+  white-space: nowrap;
+  /* 防止换行 */
+  justify-content: flex-start;
+  /* 覆盖工具类，靠左排列以便滚动 */
+}
+
+.tab-item {
+  height: 100%;
+  flex: 0 0 auto;
+  /* 不让子项拉伸，按内容宽度排列 */
+  padding: 0 12px;
+  /* 增加横向间距，便于触控 */
+  min-width: 68px;
+  /* 保证可点击区域 */
+}
+
+.icon {
+  height: 20px;
+  width: 20px;
+  color: #525866;
+}
+
+.icon-active {
+  color: $theme-color-500;
+}
+
+/* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
+.tab-item>.absolute {
+  position: static !important;
+  display: flex;
+  align-items: center;
+}
+
+.tab-item-active {
+  &::before {
+    content: "";
+    position: absolute;
+    left: 4px;
+    top: 0;
+    right: 4px;
+    bottom: 0;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    transform: perspective(40px) rotateX(6deg) translate(0, -1px);
+    transform-origin: bottom bottom;
+    box-shadow: 0 -0.5px 0 $theme-color-500;
+  }
+}
+
+.tab-text-active {
+  color: $theme-color-500;
+  z-index: 3;
+}
+
+/* 已改为每项内部指示器，移除了全局指示器样式 */
+
+/* 每项内的指示器（替代全局指示器） */
+.tab-item-inner {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  z-index: 3;
+  /* 确保内容（icon/text）位于 .tab-item-active::before 之上 */
+}
+
+.tab-item-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) scaleX(0.9);
+  height: 3px;
+  width: 24px;
+  background-color: $theme-color-500;
+  border-radius: 3px 3px 0 0;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 3;
+}
+
+.tab-item-indicator.visible {
+  opacity: 1;
+  transform: translateX(-50%) scaleX(1);
+}
\ No newline at end of file
diff --git a/src/pages/quick/list.vue b/src/pages/quick/list.vue
new file mode 100644
index 0000000..c3f402c
--- /dev/null
+++ b/src/pages/quick/list.vue
@@ -0,0 +1,151 @@
+<template>
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    use-virtual-list
+    :force-close-inner-list="true"
+    cell-height-mode="dynamic"
+    safe-area-inset-bottom
+    @query="queryList"
+  >
+    <template #top>
+      <TopNavBar title="快速预定" :background="$theme - color - 100" />
+
+      <Tabs @change="handleTabChange" />
+
+      <!-- 选择入住、离店日期 0:是酒店 -->
+      <div
+        v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
+        class="bg-white border-box flex flex-items-center p-12"
+      >
+        <div class="in flex flex-items-center">
+          <span class="font-size-11 font-500 color-99A0AE mr-4">入住</span>
+          <span class="font-size-14 font-500 color-171717">
+            {{ selectedDate.startDate }}
+          </span>
+        </div>
+
+        <!-- 几晚 -->
+        <span
+          class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
+        >
+          {{ selectedDate.totalDays }}晚
+        </span>
+
+        <div class="out flex flex-items-center">
+          <span class="font-size-11 font-500 color-99A0AE mr-4">离店</span>
+          <span class="font-size-14 font-500 color-171717">
+            {{ selectedDate.endDate }}
+          </span>
+        </div>
+
+        <!-- 日期图标 -->
+        <uni-icons
+          class="ml-auto"
+          type="calendar"
+          size="24"
+          color="$theme-color-500"
+          @click="calendarVisible = true"
+        />
+      </div>
+    </template>
+
+    <Card
+      v-for="(item, index) in dataList"
+      :key="index"
+      :item="item"
+      :selectedDate="selectedDate"
+    />
+  </z-paging>
+
+  <!-- 日历组件 -->
+  <Calender
+    :visible="calendarVisible"
+    mode="range"
+    :default-value="selectedDate"
+    @close="handleCalendarClose"
+    @range-select="handleDateSelect"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import Calender from "@/components/Calender/index.vue";
+import Tabs from "./components/Tabs/index.vue";
+import Card from "./components/Card/index.vue";
+import { quickBookingList } from "@/request/api/GoodsApi";
+import { DateUtils } from "@/utils";
+
+const calendarVisible = ref(false);
+const selectedDate = ref({
+  startDate: DateUtils.formatDate(), // 当天日期
+  endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
+  totalDays: 1,
+});
+const dataList = ref([]);
+const paging = ref(null);
+// 当前选中项
+const didSelectedTabItem = ref(null);
+
+const queryList = async (pageNum = 1, pageSize = 10) => {
+  if (!didSelectedTabItem.value) {
+    paging.value.complete([]);
+    return;
+  }
+  try {
+    const params = {
+      commodityTypeCode: didSelectedTabItem.value.typeCode,
+      size: pageSize,
+      current: pageNum,
+    };
+
+    if (didSelectedTabItem.value.orderType == 0) {
+      params.checkInDate = selectedDate.value.startDate;
+      params.checkOutDate = selectedDate.value.endDate;
+    }
+
+    const res = await quickBookingList(params);
+    console.log("API响应:", res.data.records);
+
+    if (res && res.data && res.data.records) {
+      const records = res.data.records;
+
+      // 完成数据加载，第二个参数表示是否还有更多数据
+      paging.value.complete(records);
+    } else {
+      // 没有数据
+      paging.value.complete([]);
+    }
+  } catch (error) {
+    console.error("查询列表失败:", error);
+    // 加载失败
+    paging.value.complete(false);
+  }
+};
+
+const handleTabChange = ({ item }) => {
+  console.log("选中的tab item: ", item);
+  didSelectedTabItem.value = item;
+  paging.value.reload();
+};
+
+// 处理日历关闭
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (data) => {
+  selectedDate.value = data;
+  calendarVisible.value = false;
+  console.log("选择的日期:", data);
+  paging.value.reload();
+};
+</script>
+
+<style scoped lang="scss">
+.nights {
+  padding: 3px 6px;
+}
+</style>
diff --git a/src/pages/service/order/components/OrderCard/index.vue b/src/pages/service/order/components/OrderCard/index.vue
new file mode 100644
index 0000000..2e8eff2
--- /dev/null
+++ b/src/pages/service/order/components/OrderCard/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="order-card bg-white border-box p-12 rounded-12 m-12">
+    <!-- 卡片头部 -->
+    <div class="border-box flex flex-items-center pb-12">
+      <img
+        class="icon mr-4"
+        src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png"
+      />
+      <span class="font-size-14 color-525866 line-height-20">工单</span>
+      <span class="font-size-12 color-525866 line-height-20 ml-auto">{{
+        isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
+      }}</span>
+    </div>
+    <!-- 卡片内容 -->
+    <div class="border-box card-content flex flex-items-center pb-12">
+      <div class="border-box left flex-full pr-20">
+        <div class="font-size-12 color-525866 line-height-20 mb-4">
+          所在位置：{{ orderData.roomNo }}
+        </div>
+        <div class="font-size-12 color-525866 line-height-20 mb-4">
+          联系方式: {{ orderData.userPhone }}
+        </div>
+        <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+          需求描述: {{ orderData.content }}
+        </div>
+      </div>
+
+      <img
+        v-if="orderData.contentImgUrl"
+        class="right rounded-6"
+        :src="orderData.contentImgUrl"
+        mode="aspectFill"
+      />
+    </div>
+
+    <!-- 服务人员 -->
+    <div
+      v-if="orderData.processMemberName && orderData.processMemberPhone"
+      class="service-user border-box p-8 flex flex-items-center flex-justify-between mb-12"
+    >
+      <div class="font-size-12 line-height-16">
+        服务人员：{{ orderData.processMemberName }}
+      </div>
+      <uni-icons
+        class="ml-auto mr-4"
+        type="phone-filled"
+        size="14"
+        color="#436799"
+      />
+      <span class="font-size-12 line-height-16" @click="callService"
+        >拨打电话</span
+      >
+    </div>
+
+    <!-- 取消操作 -->
+    <div
+      v-if="
+        !isCancelWork &&
+        orderData.workOrderStatus !== '2' &&
+        orderData.workOrderStatus !== '3'
+      "
+      class="flex flex-items-center flex-justify-between"
+    >
+      <span
+        class="cancel border-box border rounded-6 font-size-12 line-height-16 color-525866 ml-auto"
+        @click="cancelCall"
+        >取消呼叫</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { closeWorkOrder } from "@/request/api/WorkOrderApi";
+import { ref } from "vue";
+const isCancelWork = ref(false);
+
+// Props
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+/// 工单状态 0-待接单 1-处理中 2-已完成 3-已关闭
+const workOrderStatus = (status) => {
+  if (status === "0") {
+    return "待处理";
+  } else if (status === "1") {
+    return "处理中";
+  } else if (status === "2") {
+    return "已完成";
+  } else if (status === "3") {
+    return "已取消";
+  } else {
+    return "";
+  }
+};
+
+// 拨打电话
+const callService = () => {
+  uni.makePhoneCall({
+    phoneNumber: props.orderData.processMemberPhone,
+  });
+};
+
+// 取消呼叫
+const cancelCall = async () => {
+  const res = await closeWorkOrder({
+    workOrderId: props.orderData.id,
+  });
+  if (res.data) {
+    isCancelWork.value = true;
+  }
+  uni.showToast({
+    title: res.data ? "取消呼叫成功" : res.message || "取消呼叫失败",
+    icon: "success",
+    duration: 2000,
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/service/order/components/OrderCard/styles/index.scss b/src/pages/service/order/components/OrderCard/styles/index.scss
new file mode 100644
index 0000000..3e680a8
--- /dev/null
+++ b/src/pages/service/order/components/OrderCard/styles/index.scss
@@ -0,0 +1,28 @@
+.order-card {
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.icon {
+  height: 20px;
+  width: 20px;
+}
+
+.right {
+  height: 88px;
+  width: 88px;
+}
+
+.service-user {
+  background-color: rgba(67, 103, 153, 0.1);
+  border-radius: 5px;
+  color: #436799;
+}
+
+.cancel {
+  padding: 4px 10px;
+}
diff --git a/src/pages/service/order/list.vue b/src/pages/service/order/list.vue
new file mode 100644
index 0000000..9d293a1
--- /dev/null
+++ b/src/pages/service/order/list.vue
@@ -0,0 +1,69 @@
+<template>
+  <z-paging
+    :bg-color="
+      'linear-gradient(180deg, ' +
+      $theme -
+      color -
+      100 +
+      ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'
+    "
+    ref="paging"
+    v-model="dataList"
+    use-virtual-list
+    :force-close-inner-list="true"
+    cell-height-mode="dynamic"
+    safe-area-inset-bottom
+    @query="queryList"
+  >
+    <template #top>
+      <TopNavBar title="呼叫服务" />
+    </template>
+
+    <template #empty>
+      <CustomEmpty
+        emptyIcon="https://oss.nianxx.cn/mp/static/version_101/order/service_empty.png"
+        statusspan="您暂无呼叫服务"
+      />
+    </template>
+
+    <OrderCard
+      v-for="(item, index) in dataList"
+      :key="item.id || index"
+      :orderData="item"
+    />
+  </z-paging>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import CustomEmpty from "@/components/CustomEmpty/index.vue";
+import OrderCard from "./components/OrderCard/index.vue";
+import { userWorkOrderList } from "@/request/api/WorkOrderApi";
+
+const dataList = ref([]);
+const paging = ref(null);
+
+const queryList = async (pageNum, pageSize) => {
+  try {
+    const res = await userWorkOrderList({ pageNum, pageSize });
+    console.log("API响应:", res);
+
+    if (res && res.data && res.data.records) {
+      const records = res.data.records;
+
+      // 完成数据加载，第二个参数表示是否还有更多数据
+      paging.value.complete(records);
+    } else {
+      // 没有数据
+      paging.value.complete([]);
+    }
+  } catch (error) {
+    console.error("查询列表失败:", error);
+    // 加载失败
+    paging.value.complete(false);
+  }
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/styles/main.css b/src/styles/main.css
index d56ff01..c4eac3c 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -94,10 +94,14 @@ button:disabled {
   cursor: not-allowed;
 }
 
-.app-viewport {
+.app-divport {
   min-height: 100dvh;
   background:
-    linear-gradient(180deg, rgba(238, 248, 255, 0.95) 0%, rgba(245, 247, 250, 0) 280px),
+    linear-gradient(
+      180deg,
+      rgba(238, 248, 255, 0.95) 0%,
+      rgba(245, 247, 250, 0) 280px
+    ),
     var(--color-app-bg);
 }
 
diff --git a/src/utils/requets.ts b/src/utils/requets.ts
new file mode 100644
index 0000000..e69de29