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