feat:订单详情页面组件封装

pages/order/components/GoodsInfo/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="goods-info mb12">
+    <view class="hotel-header">
+      <image class="hotel-icon" src="./images/icon_house.png"></image>
+      <text class="hotel-name">天沐温泉酒店</text>
+    </view>
+    <view class="goods-detail">
+      <image class="goods-image" :src="goodsImage"></image>
+      <view class="goods-description">
+        <text class="goods-title">温泉早鸟票</text>
+        <text class="goods-date">预定时间：5月1日</text>
+      </view>
+    </view>
+    <view class="included-services">
+      <text class="services-title">包含服务</text>
+      <view class="service-item">
+        <text class="service-name">· 精致下午茶</text>
+        <text class="service-quantity">1份</text>
+      </view>
+      <view class="service-item">
+        <text class="service-name">· 接机或接站</text>
+        <text class="service-quantity">1份</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const goodsImage = 'https://example.com/path/to/image.jpg'; // Replace with actual image URL
+</script>
+
+<style scoped lang="scss">
+@import './styles/index.scss';
+</style>

pages/order/components/GoodsInfo/prompt.md

@@ -0,0 +1,14 @@
+## 商品信息组件
+
+组件名称：商品信息组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.goods-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/GoodsInfo/styles/index.scss

@@ -0,0 +1,77 @@
+.goods-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 12px 16px 20px;
+}
+
+.hotel-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.hotel-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+
+.hotel-name {
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.goods-detail {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.goods-image {
+    background-color: pink;
+  width: 65px;
+  height: 65px;
+  border-radius: 8px;
+  margin-right: 15px;
+}
+
+.goods-description {
+  flex: 1;
+}
+
+.goods-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.goods-date {
+  font-size: 12px;
+  color: #666;
+}
+
+.included-services {
+  margin-top: 10px;
+}
+
+.services-title {
+  display: block;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+.service-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.service-name {
+  font-size: 14px;
+}
+
+.service-quantity {
+  font-size: 12px;
+  color: #666;
+}

pages/order/components/NoticeInfo/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <view class="notice-info mb12">
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_clock.png"></image>
+        取景点
+      </view>
+      <view class="notice-content">文本内容文本内容文本内容文本内容</view>
+    </view>
+
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_card.png"></image>
+        使用处
+      </view>
+      <view class="notice-content">
+        <text class="notice-item">· 文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容</text>
+      </view>
+    </view>
+
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_arrow.png"></image>
+        退改说明
+      </view>
+      <view class="notice-content">符合条件可退款</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+// No dynamic data required for this static example
+</script>
+
+<style scoped lang="scss">
+@import './styles/index.scss';
+</style>

pages/order/components/NoticeInfo/prompt.md

@@ -0,0 +1,14 @@
+## 游玩须知组件
+
+组件名称：游玩须知组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.notice-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/NoticeInfo/styles/index.scss

@@ -0,0 +1,39 @@
+.notice-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.notice-section {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.notice-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.notice-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+.notice-content {
+  font-size: 12px;
+  color: #666;
+  padding-left: 28px;
+}
+
+.notice-item {
+  display: block;
+  margin-bottom: 5px;
+}

pages/order/components/OrderInfo/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="order-info">
+    <view class="order-item">
+      <text class="label">订单号</text>
+      <text class="value">HUSUWF29387865</text>
+    </view>
+    <view class="order-item">
+      <text class="label">流水号</text>
+      <text class="value">76487829387865</text>
+    </view>
+    <view class="order-item">
+      <text class="label">支付方式</text>
+      <text class="value">微信</text>
+    </view>
+    <view class="order-item amount">
+      <text class="label">实际支付金额</text>
+      <text class="value">¥31.8</text>
+    </view>
+    <button class="reserve-button">再次预定</button>
+    <text class="feedback">投诉反馈</text>
+  </view>
+</template>
+
+<script setup>
+// No dynamic data required for this static example
+</script>
+
+<style scoped>
+@import './styles/index.scss';
+</style>

pages/order/components/OrderInfo/prompt.md

@@ -0,0 +1,14 @@
+## 订单信息组件
+
+组件名称：订单信息组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.order-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/OrderInfo/styles/index.scss

@@ -0,0 +1,49 @@
+.order-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.order-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.label {
+  font-size: 12px;
+  color: #666;
+}
+
+.value {
+  font-size: 12px;
+  color: #333;
+}
+
+.amount .label {
+  color: #333;
+}
+
+.amount .value {
+  color: #ff5722;
+  font-size: 18px;
+}
+
+.reserve-button {
+  width: 100%;
+  background-color: #ffa500;
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  height: 42px;
+  font-size: 14px;
+  margin-top: 20px;
+}
+
+.feedback {
+  display: block;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+  margin-top: 10px;
+}

pages/order/components/OrderStatusInfo/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <view class="order-status">
+    <view class="status-header">
+      <image class="status-icon" src="/static/icons/clock.png"></image>
+      <text class="status-text">已取消</text>
+    </view>
+    <view class="status-description">
+      您已取消待支付的订单
+    </view>
+  </view>
+</template>
+
+<script setup>
+// No dynamic data required for this static example
+</script>
+
+<style scoped>
+@import './styles/index.scss';
+</style>

pages/order/components/OrderStatusInfo/prompt.md

@@ -0,0 +1,14 @@
+## 订单状态组件
+
+组件名称：订单状态组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.order-status
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/OrderStatusInfo/styles/index.scss

@@ -0,0 +1,28 @@
+.order-status {
+  color: #fff;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.status-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.status-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-description {
+  font-size: 12px;
+}

pages/order/components/UserInfo/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <view class="user-info mb12">
+    <view class="user-info-title">游客信息</view>
+    <view class="user-info-item">
+      <text class="label">联系游客：</text>
+      <text class="value">{{ contactName }}</text>
+    </view>
+    <view class="user-info-item">
+      <text class="label">联系电话：</text>
+      <text class="value">{{ contactPhone }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const contactName = '李元一';
+const contactPhone = '13172891829';
+</script>
+
+<style scoped>
+@import './styles/index.scss';
+</style>

pages/order/components/UserInfo/prompt.md

@@ -0,0 +1,14 @@
+## 游客信息组件
+
+组件名称：游客信息组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.user-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/UserInfo/styles/index.scss

@@ -0,0 +1,28 @@
+.user-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.user-info-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 14px;
+}
+
+.user-info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 8px;
+}
+
+.value {
+  font-size: 14px;
+  color: #333;
+}

pages/order/detail.vue

@@ -0,0 +1,22 @@
+<template>
+    <view class="order-detail-wrapper">
+        <image class="icon-back" src="./images/back.png"  />
+        <OrderStatusInfo />
+        <GoodsInfo />
+        <UserInfo />
+        <NoticeInfo />
+        <OrderInfo />
+    </view>
+</template>
+
+<script setup>
+import OrderStatusInfo from './components/OrderStatusInfo/index.vue'
+import GoodsInfo from './components/GoodsInfo/index.vue'
+import UserInfo from './components/UserInfo/index.vue'
+import NoticeInfo from './components/NoticeInfo/index.vue'
+import OrderInfo from './components/OrderInfo/index.vue'
+</script>
+
+<style lang="scss" scoped>
+@import './styles/detail.scss';
+</style>

pages/order/list.vue

@@ -0,0 +1,11 @@
+<template>
+  
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

pages/order/styles/detail.scss

@@ -0,0 +1,12 @@
+.order-detail-wrapper {
+   background: url('./images/header_bg.png');
+   background-position: 0 0;
+   background-size: 100% 242px;
+   background-repeat: no-repeat;
+   padding: 60px 15px;
+}
+
+.icon-back {
+   height: 16px;
+   width: 16px;
+}