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

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;
+}