diff --git a/src/component/order.vue b/src/component/order.vue
new file mode 100644
index 0000000..a547a4d
--- /dev/null
+++ b/src/component/order.vue
@@ -0,0 +1,167 @@
+<template>
+    <view class="bg">
+        <view class="flex-s-between-m-8">
+            <view class="flex-c-m-8"> 
+                <image 
+                  :src="groupLeader.avatar" 
+                  mode="aspectFill" 
+                  class="avatar"
+                  @error="handleAvatarError(groupLeader)"
+                />
+                <text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
+            </view>
+            <view>{{ getStatus() }}</view>
+        </view>
+        <view class="flex-c-m-8">
+            <image 
+              v-for="(item,idx) in itemList"
+              :key="idx"
+              class="item-img-h-50"
+              :src="item.img" 
+              mode="aspectFill" 
+              @error="handleImageError(item)"
+            />
+            <view>共计：￥{{ total }}</view>
+        </view>
+        <view class="flex-s-between-m-8">
+            <view v-if="type==='pickup'"> 
+                <view class="flex-c-m-8">
+                    <uni-icons  type="location" size="30"></uni-icons>
+                    <view class="text-ellipsis-w-120">{{ groupLeader.address }}</view>
+                </view>
+                <view>自行取货</view>
+            </view>
+            <view v-else class="flex-c-m-8">
+                <uni-icons  type="paperplane-filled" size="30"></uni-icons>
+                <view>快递配送</view>
+            </view>
+            <view v-if="pay_status==='pending' && order_status==='open'"> 
+                <button @click="payHandler">支付</button>
+                <button @click="cancelHandler">取消</button>
+            </view>
+            <view v-if="pay_status==='success' && express_status==='receiving' && order_status==='open'"> 
+                <button @click="getCodeHandler">获取取货码</button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+
+interface GroupLeader {
+    id:String
+    avatar:String
+    nickname:String
+    address:String
+}
+
+interface Goods {
+    id:String
+    img:String
+    price:String
+}
+
+interface Props {
+    id: String
+    order_status: 'open' | 'cancel' | 'close' | 'finish'
+    total:String
+    type:'express' | 'pickup'
+    pay_status: 'pending' | 'failure' | 'success' | 'refunding' | 'refunded'
+    express_status: 'init' | 'pending' | 'receiving' | 'received' | 'merchant_receiving' | 'merchant_received'
+    groupLeader:GroupLeader
+    itemList:Goods[]
+}
+
+// 声明对外属性
+const props = defineProps<Props>()
+
+// 加载图片信息
+function handleAvatarError(leader: GroupLeader) {
+    leader.avatar = '/static/default_avatar.png'; // 加载失败时显示默认头像
+}
+
+function handleImageError(item: Goods) {
+    item.img = '/static/logo.png'; // 加载失败时显示默认头像
+}
+
+// 事件
+const emit = defineEmits(['pay','cancel',"getClaimGoodsCode"])
+
+function payHandler(id) {
+    emit('pay',props.id)
+}
+
+function cancelHandler(id) {
+    emit('cancel',props.id)
+}
+
+function getCodeHandler(id) {
+    emit('getClaimGoodsCode',props.id)
+}
+
+function getStatus() {
+    if (props.order_status === 'cancel') {
+        return '订单取消'
+    } else if (props.order_status === 'finish') {
+       return '订单完成'; 
+    }  else if (props.order_status === 'open') {
+        // 订单中间状态 判断支付状态
+        if (props.pay_status === 'pending') {
+            return '待支付'
+        } else if (props.pay_status === 'success') {
+            // 支付完成判断物流状态
+            switch (props.express_status) {
+                case 'init':
+                    return '待发货';
+                case 'pending':
+                    return '待发货';
+                case 'receiving':
+                    return '待收货';
+                case 'received':
+                    return '已收货';
+            }
+        } else if (props.pay_status === 'refunding') {
+            return '退款中'
+        }
+    } else if (props.order_status === 'close') {
+        if (props.pay_status === 'failure') {
+            return '支付失败'
+        } else if (props.pay_status === 'refunded') {
+            return '已退款'
+        }
+    }
+
+   
+}
+
+</script>
+<style scoped>
+.bg {
+    background-color: rgb(251, 251, 251);
+    margin: 10px;
+    border-radius: 2%;
+}
+
+.flex-s-between-m-8 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 8px;
+}
+
+.flex-c-m-8 {
+  display: flex;
+  align-items: center;
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+  margin-top: 20rpx;
+  margin-bottom: 10rpx;
+}
+
+.avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue
index a276e95..224995f 100644
--- a/src/pages/order/index.vue
+++ b/src/pages/order/index.vue
@@ -1,5 +1,15 @@
 <template>
-    <view>{{title}}</view>
+    <view class="top-fixed">
+      <view class="top-flex">
+        <button class="category-btn" v-for="item in categoryList" 
+        :type="item.id ===selectId?'primary':'default'"
+        :key="item.id"
+        @click="changeCategory(item.id)">
+        {{item.name}}
+        </button> 
+      </view>
+      
+    </view>
 </template>
 
 <script>
@@ -7,37 +17,62 @@ export default {
   data() {
     return {
       title: '订单首页',
+      selectId:1,
+      categoryList:[
+        {
+          id:1,
+          name:"全部"
+        },
+        {
+          id:2,
+          name:"待付款"
+        },
+        {
+          id:3,
+          name:"待收货"
+        },
+        {
+          id:4,
+          name:"售后"
+        }
+      ],
+    }
+  },
+  onLoad() {
+    if (this.categoryList.length > 0) {
+      this.selectId = this.categoryList[0].id
+    }
+  },
+  methods: {
+    changeCategory(id) {
+      this.selectId = id
     }
   },
-  onLoad() {},
-  methods: {},
 }
 </script>
 
 <style>
-.content {
+.top-fixed {
+  background: #f0f0f0;
+  position: fixed;
+  z-index: 999;   /* 确保悬浮层级最高 */
+  width: 100%;
+  height: 120rpx;
+  top: 60rpx;
+}
+
+.top-flex {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  position: relative;
+  top:20rpx;
+  width: 90%;
+  left: 30rpx;
 }
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.category-btn {
+	width: 200rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	font-size: 24rpx;
 }
 </style>
\ No newline at end of file