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

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

pages/mine/msgTips/packageMsg/index.vue

@@ -1,99 +1,113 @@
 <template>
-  <view class="container " style="font-size: 13px;">
-	 <block v-for="(row, index) in messageList" :key="index">
-		<view class="msgItem">
-		  <div class="msgMsg">
-			<div class="bagbar">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
-		  </div>
-		  <u-card @click="goDetail(row.sn,row.logi_id,row.ship_no)" :title="title" title-color="#666666" title-size="24" sub-title-color="#666666" sub-title-size="24" :border="false" :sub-title=row.status>
-			<template #body>
-			  <view class="msg-body">
-			  <image class="msgImg" :src="row.goods_img" mode=""></image>
-			  <view class="msgView">
-				<view>{{row.goodsName}}</view>
-				<view class="msgNum">订单号:{{row.sn}}</view>
-			  </view>
-			  </view>
-			</template>
-		  </u-card>
-		</view>
-	</block>	
-	<uni-load-more :status="loadStatus"></uni-load-more>
+  <view class="container" style="font-size: 13px">
+    <block v-for="(row, index) in messageList" :key="index">
+      <view class="msgItem">
+        <div class="msgMsg">
+          <div class="bagbar">{{ formatSendTime(row.send_time) }}</div>
+        </div>
+        <u-card
+          @click="navigateToLogisticsDetail(row.sn, row.logi_id, row.ship_no)"
+          :title="pageTitle"
+          title-color="#666666"
+          title-size="24"
+          sub-title-color="#666666"
+          sub-title-size="24"
+          :border="false"
+          :sub-title="row.status"
+        >
+          <template #body>
+            <view class="msg-body">
+              <image class="msgImg" :src="row.goods_img" mode=""></image>
+              <view class="msgView">
+                <view>{{ row.goodsName }}</view>
+                <view class="msgNum">订单号:{{ row.sn }}</view>
+              </view>
+            </view>
+          </template>
+        </u-card>
+      </view>
+    </block>
+    <uni-load-more :status="loadStatus"></uni-load-more>
   </view>
 </template>
 
-<script>
-import * as API_Message from "@/api/message.js";
-export default {
-  data() {
-    return {
-	  messageList: [],
-	  title: "物流更新通知",
-	  subTitle: "运输中",
-	  loadStatus:'more',
-	  params: {
-	    pageNumber: 1,
-	    pageSize: 10,
-	  },
-	  loadStatus:'more'
-    };
-  },
-  onLoad(){
-  	this.GET_LogisticsList(true);
-  },
-  onReachBottom() {
-  	this.params.pageNumber++
-  	this.GET_LogisticsList(false)
-  },
-  methods: {
-    goDetail(sn,logi_id,ship_no){
-		uni.navigateTo({
-			url:'/pages/msgTips/packagemsg/logisticsDetail?order_sn=' + sn +'&logi_id='+logi_id+'&ship_no='+ship_no,
-		})
-	},
-	//获取物流消息
-	GET_LogisticsList(reset){
-		if (reset) {
-			this.params.pageNumber = 1
-		 }
-		uni.showLoading({
-			title:"加载中"
-		})
-		API_Message.getLogisticsMessages(this.params).then(async response => {
-			 if (this.$store.state.isShowToast){ uni.hideLoading() }
-		    const { data } = response
-		    if (!data || !data.length) {
-				this.messageList.push(...data.data)
-		    }
-		 })
-		
-	}
-		
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Message from '@/api/message.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const messageList = ref<any[]>([])
+const pageTitle = '物流更新通知'
+const loadStatus = ref('more')
+const queryParams = ref({ pageNumber: 1, pageSize: 10 })
+
+onLoad(() => {
+  fetchLogisticsList(true)
+})
+
+onReachBottom(() => {
+  queryParams.value.pageNumber++
+  fetchLogisticsList(false)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function formatSendTime(time: number) {
+  return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
+}
+
+function extractRecords(res: any) {
+  if (Array.isArray(res?.result?.records)) return res.result.records
+  if (Array.isArray(res?.result)) return res.result
+  if (Array.isArray(res?.data)) return res.data
+  return []
+}
+
+function navigateToLogisticsDetail(sn: string, logiId: string, shipNo: string) {
+  uni.navigateTo({
+    url: `/pages/mine/msgTips/packageMsg/logisticsDetail?order_sn=${sn}&logi_id=${logiId}&ship_no=${shipNo}`,
+  })
+}
+
+function fetchLogisticsList(reset: boolean) {
+  if (reset) {
+    queryParams.value.pageNumber = 1
+    messageList.value = []
+    loadStatus.value = 'more'
   }
-};
+  uni.showLoading({ title: '加载中' })
+  API_Message.getLogisticsMessages(queryParams.value).then((response) => {
+    hideLoadingIfNeeded()
+    const records = extractRecords(response.data)
+    if (records.length) {
+      messageList.value.push(...records)
+    } else {
+      loadStatus.value = 'noMore'
+    }
+  })
+}
 </script>
 
-<style scoped lang='scss'>
-.ddnumber {
-  color: $u-tips-color;
-  font-size: 24rpx;
-}
-.msg-body{
-	display: flex;
-	background-color: rgba(102, 110, 232, 0.0470588235294118);
-	
-	
-	.msgImg{
-		width: 160rpx;
-		height: 160rpx;
-	}
-	.msgView{
-		margin-left: 20rpx;
-		.msgNum:last-child{
-			margin-top: 60rpx;
-		}
-	}
-	
+<style scoped lang="scss">
+.msg-body {
+  display: flex;
+  background-color: rgba(102, 110, 232, 0.0470588235294118);
+  .msgImg {
+    width: 160rpx;
+    height: 160rpx;
+  }
+  .msgView {
+    margin-left: 20rpx;
+    .msgNum:last-child {
+      margin-top: 60rpx;
+    }
+  }
 }
 .bagbar {
   display: inline;
@@ -103,13 +117,8 @@ export default {
   padding: 10rpx 20rpx;
   background: $u-info-disabled;
 }
-.storeImg {
-  width: 100%;
-  height: 100rpx;
-  margin-right: 20rpx;
-}
 .container {
-  background: #F9F9F9;
+  background: #f9f9f9;
   min-height: 100vh;
 }
 .msgMsg {
@@ -119,12 +128,8 @@ export default {
 .msgItem {
   padding: 1em 0;
 }
-view{
-	font-size: 13px;
-	color: #666666;
+view {
+  font-size: 13px;
+  color: #666666;
 }
-u-card{
-	font-size: 13px;
-	color: #666666;
-}
-</style>
+</style>

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;