【类 型】：feat

【原  因】：
【过  程】：订单列表元素组件 对应的按钮显示 对应的状态显示 如：未付款订单显示 立即支付按钮 状态写待支付
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -59,6 +59,10 @@
 		position: relative;
 	}
 	
+	.pa{
+		position: absolute;
+	}
+
 	.fc {
 		text-align: center;
 	}

components/orderItem/orderItem.vue

@@ -12,7 +12,7 @@
 				</view>
 			</view>
 			<view class="flex1 flex column md">
-				<view class="fz28 fb fcm l-h-18">{{order.shipment_status}}</view>
+				<view class="fz28 fb fcm l-h-18">{{ orderStatusDisplay }}</view>
 				<view class="priceBox fz36 fb">
 					¥{{Number(order.transport_price) + Number(order.pack_price) + Number(order.total_price) | formatPrice}}
 				</view>
@@ -20,12 +20,18 @@
 			</view>
 		</view>
 		<view class="m-t-24 flex mr">
-			<view class="numberBut bg-m fci rad8 fz28 fb flex mac mc" :key="foodSn">
+			<view v-if="showPayButton" class="nullBut bg-m fci rad8 fz28 flex mac mc m-l-24">
+				立即支付
+			</view>
+			<view v-if="showPickupNumber" class="numberBut bg-m fci rad8 fz28 fb flex mac mc m-l-24">
 				{{ foodSn }}
 			</view>
-			<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24" style="">
+			<view v-if="showAfterSaleButton" class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">
 				申请售后
 			</view>
+			<view v-if="showRefundDetailsButton" class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">
+				退款详情
+			</view>
 		</view>
 	</view>
 </template>
@@ -43,7 +49,7 @@
 				intervalId: null, // 存储定时器ID，用于清除定时器
 			}
 		},
-		onReady() {
+		created() {
 			this.intervalId = setInterval(() => {
 				this.foodSn = this.foodSn === '取餐号' ? this.order.food_sn : '取餐号'
 			}, 1200)
@@ -52,6 +58,60 @@
 			// 清除定时器，避免内存泄漏
 			clearInterval(this.intervalId);
 		},
+		computed: {
+			// 计算属性：是否显示 "立即支付" 按钮
+			showPayButton() {
+				return this.order.main_status === '未付款';
+			},
+			// 计算属性：是否显示 "取餐号"
+			showPickupNumber() {
+				return this.order.main_status === '已付款' && this.order.refund_status === '未申请';
+			},
+			// 计算属性：是否显示 "申请售后" 按钮
+			showAfterSaleButton() {
+				return this.order.main_status === '已付款' && this.order.refund_status === '未申请';
+			},
+			// 计算属性：是否显示 "退款详情" 按钮
+			showRefundDetailsButton() {
+				return this.order.refund_status !== '未申请' && this.order.main_status !== '已完成';
+			},
+			// 计算属性：显示订单状态
+			orderStatusDisplay() {
+				if (this.order.main_status === '未付款') {
+					return '待支付';
+				}
+				if (this.order.main_status === '已付款' && this.order.refund_status === '未申请') {
+					return this.order.shipment_status;
+				}
+				switch (this.order.refund_status) {
+					case '申请中':
+						return '申请中';
+					case '已同意':
+						return '商家同意退款';
+					case '主动退':
+						return '商家退单';
+					case '拒绝退':
+						return '商家拒绝退款';
+					default:
+						return '';
+				}
+			},
+			// 计算属性：显示退款状态
+			refundStatusDisplay() {
+				switch (this.order.refund_status) {
+					case '申请中':
+						return '申请中';
+					case '已同意':
+						return '商家同意退款';
+					case '主动退':
+						return '商家退单';
+					case '拒绝退':
+						return '商家拒绝退款';
+					default:
+						return '';
+				}
+			},
+		},
 		props: {
 			order: {
 				type: Object,

pages/index/index.vue

@@ -47,8 +47,7 @@
 
 <script>
 	import {
-		checkUserInfo,
+		checkUserInfo
-		wxLogin
 	} from '@/utils/index.js'
 
 	export default {
@@ -69,7 +68,7 @@
 				return this.$store.state.orderList.filter(item => item.main_status === '已付款')
 			}
 		},
-		onShow() {
+		created() {
 			//检查token 没有则进行无感登录
 			this.checkUserInfo()
 			// 当页面显示时，设置tabber的激活项
@@ -77,9 +76,7 @@
 		},
 		methods: {
 			// 检查用户信息
-			checkUserInfo() {
+			checkUserInfo,
-				return checkUserInfo(this.$store)
-			}
 		}
 	}
 </script>

pages/main/order.vue

@@ -71,12 +71,13 @@
 			orderList_unpaid() {
 				return this.$store.state.orderList.filter(item => item.main_status === '未付款')
 			},
-			//已付款 并且没有申请退款的订单
+			//已付款 已完成 并且没有申请退款的订单
 			orderList_paid() {
-				return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status ===
+			    return this.$store.state.orderList.filter(item => {
-					'未申请')
+			        return item.main_status === '已付款' && item.refund_status === '未申请';
+			    })
 			},
-			//申请中 已同意 主动退 等退款的订单
+			//申请中 已同意 主动退 拒绝退 等退款相关的订单
 			orderList_refund() {
 				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
 			},