refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/mine/msgTips/packageMsg/logisticsDetail.vue

@@ -2,21 +2,23 @@
   <view class="logistics-detail">
     <view class="card">
       <view class="card-title">
-        <span>{{ logiList.shipper }}</span>快递 <span>{{ logiList.logisticCode }}</span>
+        <span>{{ logisticsInfo.shipper }}</span>快递 <span>{{ logisticsInfo.logisticCode }}</span>
       </view>
       <view class="time-line">
-        <u-time-line v-if="logiList.traces && logiList.traces.length != 0">
-          <u-time-line-item nodeTop="2" v-for="(item, index) in logiList.traces" :key="index">
-            <!-- 此处自定义了左边内容，用一个图标替代 -->
-            <template v-slot:node >
-              <view v-if="index == logiList.traces.length - 1" class="u-node" :style="{ background: $lightColor }" style="padding: 0 4px">
-                <!-- 此处为uView的icon组件 -->
+        <u-time-line v-if="logisticsInfo.traces && logisticsInfo.traces.length != 0">
+          <u-time-line-item nodeTop="2" v-for="(item, index) in logisticsInfo.traces" :key="index">
+            <template #node>
+              <view
+                v-if="index == logisticsInfo.traces.length - 1"
+                class="u-node"
+                :style="{ background: lightColor }"
+                style="padding: 0 4px"
+              >
                 <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
               </view>
             </template>
-            <template v-slot:content>
+            <template #content>
               <view>
-                <!-- <view class="u-order-title">待取件</view> -->
                 <view class="u-order-desc">{{ item.AcceptStation }}</view>
                 <view class="u-order-time">{{ item.AcceptTime }}</view>
               </view>
@@ -29,32 +31,26 @@
   </view>
 </template>
 
-<script>
-import { getExpress } from "@/api/trade.js";
-export default {
-  data() {
-    return {
-      express: "",
-      resData: {
-        title: "物流详情",
-      },
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getExpress } from '@/api/trade.js'
 
-      logiList: "",
-      activeStep: 0,
-    };
-  },
-  methods: {
-    init(sn) {
-      getExpress(sn).then((res) => {
-        this.logiList = res.data.result;
-      });
-    },
-  },
-  onLoad(option) {
-    let sn = option.order_sn;
-    this.init(sn);
-  },
-};
+const store = useStore()
+
+const lightColor = computed(() => store.getters.lightColor)
+const logisticsInfo = ref<Record<string, any>>({})
+
+onLoad((option) => {
+  fetchLogistics(option.order_sn)
+})
+
+function fetchLogistics(orderSn: string) {
+  getExpress(orderSn).then((res) => {
+    logisticsInfo.value = res.data.result || {}
+  })
+}
 </script>
 
 <style lang="scss">
@@ -79,9 +75,6 @@ export default {
     padding: 16rpx 32rpx;
   }
 }
-.u-order-title {
-  font-weight: bold;
-}
 .u-order-desc {
   font-size: 26rpx;
   color: #666;