feat: 订单卡片组件封装

components/OrderCardItem/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="service-order-item">
+    <view class="order-header">
+      <image class="order-icon" src="./images/icon_order.png"></image>
+      <text class="order-title">温泉早鸟票</text>
+      <text :class="['order-status', `status-${orderStatus}`]">{{
+        orderStatusText
+      }}</text>
+    </view>
+    <view class="order-details">
+      <view class="detail-item">
+        <text class="detail-label">订单编号：</text>
+        <text class="detail-value">{{ orderId }}</text>
+      </view>
+      <view class="detail-item">
+        <text class="detail-label">游客人数：</text>
+        <text class="detail-value">{{ touristCount }}人</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+// Sample data
+const orderId = ref("7378400483776544");
+const touristCount = ref(7);
+const orderStatus = ref("pending"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'
+
+// Computed property for order status text
+const orderStatusText = computed(() => {
+  switch (orderStatus.value) {
+    case "canceled":
+      return "已取消";
+    case "pending":
+      return "待确认";
+    case "refundProcessing":
+      return "退款中";
+    case "refunded":
+      return "已退款";
+    case "completed":
+      return "已完成";
+    default:
+      return "";
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/OrderCardItem/prompt.md

@@ -0,0 +1,16 @@
+## 订单 Item 组件
+
+组件名称：订单卡片组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-order-item
+3、可以使用 uniapp 内置的组件
+4、订单状态有已取消、待确认、退款中、已退款、已完成状态，用颜色区分
+5、订单卡片有点击跳转订单详情交互
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/OrderCardItem/styles/index.scss

@@ -0,0 +1,81 @@
+.service-order-item {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.order-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.order-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #ffa500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.order-title {
+  font-size: 16px;
+  color: #333;
+}
+
+.order-status {
+  font-size: 14px;
+  padding: 5px 10px;
+  border-radius: 15px;
+}
+
+.status-canceled {
+  color: #999;
+  border: 1px solid #999;
+}
+
+.status-pending {
+  color: #ff4d94;
+  border: 1px solid #ff4d94;
+}
+
+.status-refundProcessing {
+  color: #ff9900;
+  border: 1px solid #ff9900;
+}
+
+.status-refunded {
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+}
+
+.status-completed {
+  color: #28a745;
+  border: 1px solid #28a745;
+}
+
+.order-details {
+  margin-top: 10px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.detail-label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #333;
+}

unpackage/dist/dev/.sourcemap/mp-weixin/common/assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"assets.js","sources":["static/quick/quick_icon_bg.png","static/logo.png","static/input_voice_icon.png","static/input_send_icon.png","static/hello_xiaomu_icon@2x.png","static/hello_logo_icon@2x.png","static/top_bg_icon.png","static/drawer_icon.png","static/wave_icon.png","static/test/mk_img_1.png","components/ServiceTipsWord/images/icon_refresh.png"],"sourcesContent":["export default \"__VITE_ASSET__ff753b35__\"","export default \"__VITE_ASSET__46719607__\"","export default \"__VITE_ASSET__76f969d6__\"","export default \"__VITE_ASSET__e6bd7a29__\"","export default \"__VITE_ASSET__2eba501c__\"","export default \"__VITE_ASSET__51733f19__\"","export default \"__VITE_ASSET__ead16fdc__\"","export default \"__VITE_ASSET__a9576f2b__\"","export default \"__VITE_ASSET__d889f8a8__\"","export default \"__VITE_ASSET__c4efe7df__\"","export default \"__VITE_ASSET__14f000bd__\""],"names":[],"mappings":";AAAA,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;;;;;;;;;;;;"}
+{"version":3,"file":"assets.js","sources":["static/quick/quick_icon_bg.png","static/logo.png","static/input_voice_icon.png","static/input_send_icon.png","static/hello_xiaomu_icon@2x.png","static/hello_logo_icon@2x.png","static/top_bg_icon.png","static/drawer_icon.png","static/wave_icon.png","static/test/mk_img_1.png","components/OrderCardItem/images/icon_order.png"],"sourcesContent":["export default \"__VITE_ASSET__ff753b35__\"","export default \"__VITE_ASSET__46719607__\"","export default \"__VITE_ASSET__76f969d6__\"","export default \"__VITE_ASSET__e6bd7a29__\"","export default \"__VITE_ASSET__2eba501c__\"","export default \"__VITE_ASSET__51733f19__\"","export default \"__VITE_ASSET__ead16fdc__\"","export default \"__VITE_ASSET__a9576f2b__\"","export default \"__VITE_ASSET__d889f8a8__\"","export default \"__VITE_ASSET__c4efe7df__\"","export default \"__VITE_ASSET__911ae60f__\""],"names":[],"mappings":";AAAA,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;;;;;;;;;;;;"}

unpackage/dist/dev/.sourcemap/mp-weixin/components/OrderCardItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["components/OrderCardItem/index.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvY29tcG9uZW50cy9PcmRlckNhcmRJdGVtL2luZGV4LnZ1ZQ"],"sourcesContent":["<template>\r\n  <view class=\"service-order-item\">\r\n    <view class=\"order-header\">\r\n      <image class=\"order-icon\" src=\"./images/icon_order.png\"></image>\r\n      <text class=\"order-title\">温泉早鸟票</text>\r\n      <text :class=\"['order-status', `status-${orderStatus}`]\">{{\r\n        orderStatusText\r\n      }}</text>\r\n    </view>\r\n    <view class=\"order-details\">\r\n      <view class=\"detail-item\">\r\n        <text class=\"detail-label\">订单编号：</text>\r\n        <text class=\"detail-value\">{{ orderId }}</text>\r\n      </view>\r\n      <view class=\"detail-item\">\r\n        <text class=\"detail-label\">游客人数：</text>\r\n        <text class=\"detail-value\">{{ touristCount }}人</text>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, computed } from \"vue\";\r\n\r\n// Sample data\r\nconst orderId = ref(\"7378400483776544\");\r\nconst touristCount = ref(7);\r\nconst orderStatus = ref(\"pending\"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'\r\n\r\n// Computed property for order status text\r\nconst orderStatusText = computed(() => {\r\n  switch (orderStatus.value) {\r\n    case \"canceled\":\r\n      return \"已取消\";\r\n    case \"pending\":\r\n      return \"待确认\";\r\n    case \"refundProcessing\":\r\n      return \"退款中\";\r\n    case \"refunded\":\r\n      return \"已退款\";\r\n    case \"completed\":\r\n      return \"已完成\";\r\n    default:\r\n      return \"\";\r\n  }\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@import \"./styles/index.scss\";\r\n</style>\r\n","import Component from 'D:/YGChatCS/components/OrderCardItem/index.vue'\nwx.createComponent(Component)"],"names":["ref","computed"],"mappings":";;;;;;AA0BA,UAAM,UAAUA,cAAAA,IAAI,kBAAkB;AACtC,UAAM,eAAeA,cAAAA,IAAI,CAAC;AAC1B,UAAM,cAAcA,cAAAA,IAAI,SAAS;AAGjC,UAAM,kBAAkBC,cAAQ,SAAC,MAAM;AACrC,cAAQ,YAAY,OAAK;AAAA,QACvB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;;;;;;;;;;;;;AC7CD,GAAG,gBAAgB,SAAS;"}

unpackage/dist/dev/.sourcemap/mp-weixin/components/ServiceOrderItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["components/ServiceOrderItem/index.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvY29tcG9uZW50cy9TZXJ2aWNlT3JkZXJJdGVtL2luZGV4LnZ1ZQ"],"sourcesContent":["<template>\r\n  <view class=\"service-order-item\">\r\n    <view class=\"order-header\">\r\n      <image class=\"order-icon\" src=\"./images/icon_order.png\"></image>\r\n      <text class=\"order-title\">温泉早鸟票</text>\r\n      <text :class=\"['order-status', `status-${orderStatus}`]\">{{\r\n        orderStatusText\r\n      }}</text>\r\n    </view>\r\n    <view class=\"order-details\">\r\n      <view class=\"detail-item\">\r\n        <text class=\"detail-label\">订单编号：</text>\r\n        <text class=\"detail-value\">{{ orderId }}</text>\r\n      </view>\r\n      <view class=\"detail-item\">\r\n        <text class=\"detail-label\">游客人数：</text>\r\n        <text class=\"detail-value\">{{ touristCount }}人</text>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, computed } from \"vue\";\r\n\r\n// Sample data\r\nconst orderId = ref(\"7378400483776544\");\r\nconst touristCount = ref(7);\r\nconst orderStatus = ref(\"pending\"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'\r\n\r\n// Computed property for order status text\r\nconst orderStatusText = computed(() => {\r\n  switch (orderStatus.value) {\r\n    case \"canceled\":\r\n      return \"已取消\";\r\n    case \"pending\":\r\n      return \"待确认\";\r\n    case \"refundProcessing\":\r\n      return \"退款中\";\r\n    case \"refunded\":\r\n      return \"已退款\";\r\n    case \"completed\":\r\n      return \"已完成\";\r\n    default:\r\n      return \"\";\r\n  }\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@import \"./styles/index.scss\";\r\n</style>\r\n","import Component from 'D:/YGChatCS/components/ServiceOrderItem/index.vue'\nwx.createComponent(Component)"],"names":["ref","computed"],"mappings":";;;;;;AA0BA,UAAM,UAAUA,cAAAA,IAAI,kBAAkB;AACtC,UAAM,eAAeA,cAAAA,IAAI,CAAC;AAC1B,UAAM,cAAcA,cAAAA,IAAI,SAAS;AAGjC,UAAM,kBAAkBC,cAAQ,SAAC,MAAM;AACrC,cAAQ,YAAY,OAAK;AAAA,QACvB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;;;;;;;;;;;;;AC7CD,GAAG,gBAAgB,SAAS;"}

unpackage/dist/dev/mp-weixin/common/assets.js

@@ -9,7 +9,7 @@ const _imports_0$3 = "/static/top_bg_icon.png";
 const _imports_0$2 = "/static/drawer_icon.png";
 const _imports_0$1 = "/static/wave_icon.png";
 const _imports_1 = "/static/test/mk_img_1.png";
-const _imports_0 = "/assets/icon_refresh.14f000bd.png";
+const _imports_0 = "/assets/icon_order.911ae60f.png";
 exports._imports_0 = _imports_0$5;
 exports._imports_0$1 = _imports_0$4;
 exports._imports_0$2 = _imports_0$3;

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -6963,7 +6963,7 @@ function isConsoleWritable() {
 function initRuntimeSocketService() {
   const hosts = "10.10.3.1,192.168.56.1,127.0.0.1";
   const port = "8090";
-  const id = "mp-weixin_3K_f2n";
+  const id = "mp-weixin_25DYPD";
   const lazy = typeof swan !== "undefined";
   let restoreError = lazy ? () => {
   } : initOnError();
@@ -7917,6 +7917,7 @@ const onHide = /* @__PURE__ */ createHook(ON_HIDE);
 const onLaunch = /* @__PURE__ */ createHook(ON_LAUNCH);
 const onLoad = /* @__PURE__ */ createHook(ON_LOAD);
 exports._export_sfc = _export_sfc;
+exports.computed = computed;
 exports.createSSRApp = createSSRApp;
 exports.defineComponent = defineComponent;
 exports.e = e;

unpackage/dist/dev/mp-weixin/components/OrderCardItem/index.js

@@ -0,0 +1,39 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const common_assets = require("../../common/assets.js");
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    const orderId = common_vendor.ref("7378400483776544");
+    const touristCount = common_vendor.ref(7);
+    const orderStatus = common_vendor.ref("pending");
+    const orderStatusText = common_vendor.computed(() => {
+      switch (orderStatus.value) {
+        case "canceled":
+          return "已取消";
+        case "pending":
+          return "待确认";
+        case "refundProcessing":
+          return "退款中";
+        case "refunded":
+          return "已退款";
+        case "completed":
+          return "已完成";
+        default:
+          return "";
+      }
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_assets._imports_0$6,
+        b: common_vendor.t(orderStatusText.value),
+        c: common_vendor.n(`status-${orderStatus.value}`),
+        d: common_vendor.t(orderId.value),
+        e: common_vendor.t(touristCount.value)
+      };
+    };
+  }
+};
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-fff203c8"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/OrderCardItem/index.js.map

unpackage/dist/dev/mp-weixin/components/OrderCardItem/index.wxml

@@ -0,0 +1 @@
+<view class="service-order-item data-v-fff203c8"><view class="order-header data-v-fff203c8"><image class="order-icon data-v-fff203c8" src="{{a}}"></image><text class="order-title data-v-fff203c8">温泉早鸟票</text><text class="{{['data-v-fff203c8', 'order-status', c]}}">{{b}}</text></view><view class="order-details data-v-fff203c8"><view class="detail-item data-v-fff203c8"><text class="detail-label data-v-fff203c8">订单编号：</text><text class="detail-value data-v-fff203c8">{{d}}</text></view><view class="detail-item data-v-fff203c8"><text class="detail-label data-v-fff203c8">游客人数：</text><text class="detail-value data-v-fff203c8">{{e}}人</text></view></view></view>

unpackage/dist/dev/mp-weixin/components/OrderCardItem/index.wxss

@@ -0,0 +1,93 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.service-order-item.data-v-fff203c8 {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.order-header.data-v-fff203c8 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.order-icon.data-v-fff203c8 {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #ffa500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+.order-title.data-v-fff203c8 {
+  font-size: 16px;
+  color: #333;
+}
+.order-status.data-v-fff203c8 {
+  font-size: 14px;
+  padding: 5px 10px;
+  border-radius: 15px;
+}
+.status-canceled.data-v-fff203c8 {
+  color: #999;
+  border: 1px solid #999;
+}
+.status-pending.data-v-fff203c8 {
+  color: #ff4d94;
+  border: 1px solid #ff4d94;
+}
+.status-refundProcessing.data-v-fff203c8 {
+  color: #ff9900;
+  border: 1px solid #ff9900;
+}
+.status-refunded.data-v-fff203c8 {
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+}
+.status-completed.data-v-fff203c8 {
+  color: #28a745;
+  border: 1px solid #28a745;
+}
+.order-details.data-v-fff203c8 {
+  margin-top: 10px;
+}
+.detail-item.data-v-fff203c8 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.detail-label.data-v-fff203c8 {
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+}
+.detail-value.data-v-fff203c8 {
+  font-size: 14px;
+  color: #333;
+}

unpackage/dist/dev/mp-weixin/components/ServiceTipsWord/index.js

@@ -1,26 +0,0 @@
-"use strict";
-const common_vendor = require("../../common/vendor.js");
-const common_assets = require("../../common/assets.js");
-const _sfc_main = {
-  __name: "index",
-  setup(__props) {
-    const handleRefresh = (type) => {
-      common_vendor.index.__f__("log", "at components/ServiceTipsWord/index.vue:29", `Button clicked: ${type}`);
-    };
-    const handleClick = (type) => {
-      common_vendor.index.__f__("log", "at components/ServiceTipsWord/index.vue:33", `Button clicked: ${type}`);
-    };
-    return (_ctx, _cache) => {
-      return {
-        a: common_assets._imports_0$6,
-        b: common_vendor.o(handleRefresh),
-        c: common_vendor.o(($event) => handleClick("bed")),
-        d: common_vendor.o(($event) => handleClick("hotWater")),
-        e: common_vendor.o(($event) => handleClick("mahjong"))
-      };
-    };
-  }
-};
-const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-f577f2f2"]]);
-wx.createComponent(Component);
-//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/ServiceTipsWord/index.js.map

unpackage/dist/dev/mp-weixin/components/ServiceTipsWord/index.wxml

@@ -1 +0,0 @@
-<view class="service-prompt data-v-f577f2f2"><view class="service-header data-v-f577f2f2"><text class="header-text data-v-f577f2f2">你可以这样问我</text><image class="header-icon data-v-f577f2f2" src="{{a}}" bindtap="{{b}}"></image></view><view class="service-buttons data-v-f577f2f2"><text class="service-button data-v-f577f2f2" bindtap="{{c}}"> 帮我加一张床 </text><text class="service-button data-v-f577f2f2" bindtap="{{d}}"> 房间热水不够热 </text><text class="service-button data-v-f577f2f2" bindtap="{{e}}"> 帮忙加一台麻将机 </text></view></view>

unpackage/dist/dev/mp-weixin/components/ServiceTipsWord/index.wxss

@@ -1,64 +0,0 @@
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-/* 颜色变量 */
-/* 行为相关颜色 */
-/* 文字基本颜色 */
-/* 背景颜色 */
-/* 边框颜色 */
-/* 尺寸变量 */
-/* 文字尺寸 */
-/* 图片尺寸 */
-/* Border Radius */
-/* 水平间距 */
-/* 垂直间距 */
-/* 透明度 */
-/* 文章场景相关 */
-.service-prompt.data-v-f577f2f2 {
-  padding: 12px 18px;
-}
-.service-header.data-v-f577f2f2 {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-.header-text.data-v-f577f2f2 {
-  font-size: 12px;
-  color: #6b84a2;
-}
-.header-icon.data-v-f577f2f2 {
-  width: 9px;
-  height: 9px;
-  margin-left: 8px;
-}
-.service-buttons.data-v-f577f2f2 {
-  display: flex;
-  flex-wrap: nowrap;
-}
-.service-button.data-v-f577f2f2 {
-  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, white, rgba(255, 255, 255, 0.5), white);
-  font-size: 12px;
-  font-weight: 500;
-  color: #00a6ff;
-  border-radius: 50px;
-}

unpackage/dist/dev/mp-weixin/pages/chat/ChatMainList.js

@@ -3,7 +3,7 @@ const common_vendor = require("../../common/vendor.js");
 const common_assets = require("../../common/assets.js");
 const model_ChatModel = require("../../model/ChatModel.js");
 if (!Math) {
-  (ChatTopBgImg + ChatTopNavBar + ChatTopBanner + OneFeelMK001 + ServiceTipsWord + ChatCardAI + ChatCardMine + ChatMoreTips + ChatQuickAccess)();
+  (ChatTopBgImg + ChatTopNavBar + ChatTopBanner + OneFeelMK001 + OrderCardItem + ChatCardAI + ChatCardMine + ChatMoreTips + ChatQuickAccess)();
 }
 const ChatTopBanner = () => "./ChatTopBanner.js";
 const ChatTopBgImg = () => "./ChatTopBgImg.js";
@@ -13,7 +13,7 @@ const ChatCardMine = () => "./ChatCardMine.js";
 const ChatQuickAccess = () => "./ChatQuickAccess2.js";
 const ChatMoreTips = () => "./ChatMoreTips.js";
 const OneFeelMK001 = () => "../module/OneFeelMK001.js";
-const ServiceTipsWord = () => "../../components/ServiceTipsWord/index.js";
+const OrderCardItem = () => "../../components/OrderCardItem/index.js";
 const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
   __name: "ChatMainList",
   emits: ["openDrawer"],

unpackage/dist/dev/mp-weixin/pages/chat/ChatMainList.json

@@ -9,6 +9,6 @@
     "chat-quick-access": "./ChatQuickAccess",
     "chat-more-tips": "./ChatMoreTips",
     "one-feel-m-k001": "../module/OneFeelMK001",
-    "service-tips-word": "../../components/ServiceTipsWord/index"
+    "order-card-item": "../../components/OrderCardItem/index"
   }
 }

unpackage/dist/dev/mp-weixin/pages/chat/ChatMainList.wxml

@@ -1 +1 @@
-<view class="chat-container data-v-d7316ec5" bindtouchend="{{q}}"><chat-top-bg-img class="chat-container-bg data-v-d7316ec5" u-i="d7316ec5-0" bind:__l="__l"></chat-top-bg-img><view class="nav-bar-container data-v-d7316ec5" style="{{'padding-top:' + b + ';' + ('background-color:' + c)}}"><chat-top-nav-bar class="data-v-d7316ec5" bindopenDrawer="{{a}}" u-i="d7316ec5-1" bind:__l="__l"></chat-top-nav-bar></view><view class="chat-container-msg-list data-v-d7316ec5"><chat-top-banner class="chat-container-top-bannar data-v-d7316ec5" u-i="d7316ec5-2" bind:__l="__l"></chat-top-banner><scroll-view scroll-y scroll-into-view="{{f}}" scroll-with-animation="{{true}}" class="area-msg-list data-v-d7316ec5"><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-3" bind:__l="__l"></one-feel-m-k001></view><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-4" bind:__l="__l"></one-feel-m-k001></view><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-5" bind:__l="__l"></one-feel-m-k001></view><service-tips-word class="data-v-d7316ec5" u-i="d7316ec5-6" bind:__l="__l"/><view wx:for="{{d}}" wx:for-item="item" wx:key="k" class="area-msg-list-content data-v-d7316ec5" id="{{item.l}}"><block wx:if="{{item.a}}"><chat-card-a-i wx:if="{{item.f}}" u-s="{{['d']}}" class="message-item message-item-ai data-v-d7316ec5" u-i="{{item.e}}" bind:__l="__l" u-p="{{item.f}}"><image wx:if="{{item.b}}" class="data-v-d7316ec5" src="{{item.c}}" style="width:100px;height:100px"></image><one-feel-m-k001 class="data-v-d7316ec5" u-i="{{item.d}}" bind:__l="__l"></one-feel-m-k001></chat-card-a-i></block><block wx:elif="{{item.g}}"><chat-card-mine wx:if="{{item.i}}" class="message-item message-item-mine data-v-d7316ec5" u-i="{{item.h}}" bind:__l="__l" u-p="{{item.i}}"></chat-card-mine></block><block wx:else><text class="message-item message-item-other data-v-d7316ec5">{{item.j}}</text></block></view><view class="data-v-d7316ec5" id="{{e}}"></view></scroll-view><view class="footer-area data-v-d7316ec5"><chat-more-tips class="data-v-d7316ec5" bindreplySent="{{g}}" u-i="d7316ec5-10" bind:__l="__l"></chat-more-tips><chat-quick-access class="data-v-d7316ec5" bindreplySent="{{h}}" u-i="d7316ec5-11" bind:__l="__l"></chat-quick-access><view class="area-input data-v-d7316ec5"><view class="input-container-voice data-v-d7316ec5"><image class="data-v-d7316ec5" src="{{i}}"></image></view><block wx:if="{{r0}}"><textarea class="textarea data-v-d7316ec5" type="text" placeholder="快速订票，呼叫服务" cursor-spacing="65" confirm-type="done" bindconfirm="{{j}}" bindtouchend="{{k}}" confirm-hold="{{true}}" auto-height show-confirm-bar="{{false}}" hold-keyboard="{{l}}" maxlength="300" value="{{m}}" bindinput="{{n}}"/></block><view class="input-container-send data-v-d7316ec5" bindtap="{{p}}"><image class="data-v-d7316ec5" src="{{o}}"></image></view></view></view></view></view>
+<view class="chat-container data-v-d7316ec5" bindtouchend="{{q}}"><chat-top-bg-img class="chat-container-bg data-v-d7316ec5" u-i="d7316ec5-0" bind:__l="__l"></chat-top-bg-img><view class="nav-bar-container data-v-d7316ec5" style="{{'padding-top:' + b + ';' + ('background-color:' + c)}}"><chat-top-nav-bar class="data-v-d7316ec5" bindopenDrawer="{{a}}" u-i="d7316ec5-1" bind:__l="__l"></chat-top-nav-bar></view><view class="chat-container-msg-list data-v-d7316ec5"><chat-top-banner class="chat-container-top-bannar data-v-d7316ec5" u-i="d7316ec5-2" bind:__l="__l"></chat-top-banner><scroll-view scroll-y scroll-into-view="{{f}}" scroll-with-animation="{{true}}" class="area-msg-list data-v-d7316ec5"><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-3" bind:__l="__l"></one-feel-m-k001></view><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-4" bind:__l="__l"></one-feel-m-k001></view><view class="data-v-d7316ec5" style="padding:6px 12px"><one-feel-m-k001 class="data-v-d7316ec5" u-i="d7316ec5-5" bind:__l="__l"></one-feel-m-k001></view><order-card-item class="data-v-d7316ec5" u-i="d7316ec5-6" bind:__l="__l"/><view wx:for="{{d}}" wx:for-item="item" wx:key="k" class="area-msg-list-content data-v-d7316ec5" id="{{item.l}}"><block wx:if="{{item.a}}"><chat-card-a-i wx:if="{{item.f}}" u-s="{{['d']}}" class="message-item message-item-ai data-v-d7316ec5" u-i="{{item.e}}" bind:__l="__l" u-p="{{item.f}}"><image wx:if="{{item.b}}" class="data-v-d7316ec5" src="{{item.c}}" style="width:100px;height:100px"></image><one-feel-m-k001 class="data-v-d7316ec5" u-i="{{item.d}}" bind:__l="__l"></one-feel-m-k001></chat-card-a-i></block><block wx:elif="{{item.g}}"><chat-card-mine wx:if="{{item.i}}" class="message-item message-item-mine data-v-d7316ec5" u-i="{{item.h}}" bind:__l="__l" u-p="{{item.i}}"></chat-card-mine></block><block wx:else><text class="message-item message-item-other data-v-d7316ec5">{{item.j}}</text></block></view><view class="data-v-d7316ec5" id="{{e}}"></view></scroll-view><view class="footer-area data-v-d7316ec5"><chat-more-tips class="data-v-d7316ec5" bindreplySent="{{g}}" u-i="d7316ec5-10" bind:__l="__l"></chat-more-tips><chat-quick-access class="data-v-d7316ec5" bindreplySent="{{h}}" u-i="d7316ec5-11" bind:__l="__l"></chat-quick-access><view class="area-input data-v-d7316ec5"><view class="input-container-voice data-v-d7316ec5"><image class="data-v-d7316ec5" src="{{i}}"></image></view><block wx:if="{{r0}}"><textarea class="textarea data-v-d7316ec5" type="text" placeholder="快速订票，呼叫服务" cursor-spacing="65" confirm-type="done" bindconfirm="{{j}}" bindtouchend="{{k}}" confirm-hold="{{true}}" auto-height show-confirm-bar="{{false}}" hold-keyboard="{{l}}" maxlength="300" value="{{m}}" bindinput="{{n}}"/></block><view class="input-container-send data-v-d7316ec5" bindtap="{{p}}"><image class="data-v-d7316ec5" src="{{o}}"></image></view></view></view></view></view>