diff --git a/src/components/order/integral/integral.vue b/src/components/order/integral/integral.vue
new file mode 100644
index 0000000..eef6bf7
--- /dev/null
+++ b/src/components/order/integral/integral.vue
@@ -0,0 +1,132 @@
+<template>
+    <view class="integral-order">
+        <view class="il-header">
+            <view>欧轩智能羽毛球馆(永泰店)</view>
+            <text class="ih-active">待使用</text>
+        </view>
+        <view class="il-section">
+            <view class="is-line">
+                <view>订单编号：</view>
+                <view>
+                    <view>20195175645666</view>
+                </view>
+            </view>
+            <view class="is-line">
+                <view>用户昵称：</view>
+                <view>
+                    <view>周大强</view>
+                </view>
+            </view>
+            <view class="is-line">
+                <view>支付时间：</view>
+                <view>
+                    <view>2019-05-17 11:12:50</view>
+                </view>
+            </view>
+            <view class="is-line">
+                <view>规格：</view>
+                <view>
+                    <view>1只装</view>
+                </view>
+            </view>
+        </view>
+        <view class="il-bot">
+            <view>邮费：¥0.00</view>
+            <view>实付款： 2000积分</view>
+        </view>
+        <view class="il-btns">
+            <view hover-class="hover-active">发货</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "../../../style/public.scss";
+    .integral-order{
+        padding-bottom: 10upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .il-header{
+            margin-bottom: 18upx;
+            padding: 0 20upx;
+            height: 98upx;
+            line-height: 96upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                flex-grow: 1;
+                font-size: 28upx;
+                color: #1a1a1a;
+                @include textHide(1);
+            }
+            >text{
+                margin-left: 20upx;
+                flex-shrink: 0;
+                font-size: 28upx;
+                color: #9C9C9F;
+            }
+            .ih-active{
+                color: $themeColor;
+            }
+        }
+        .il-section{
+            padding: 0 20upx 20upx;
+            .is-line{
+                display: flex;
+                view{
+                    line-height: 40upx;
+                    font-size: 24upx;
+                    color: #9c9c9f;
+                }
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        >view{
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+
+        }
+        .il-bot{
+            padding: 20upx;
+            border-top: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                line-height: 40upx;
+                font-size: 24upx;
+                color: #9c9c9f;
+                min-width: 50%;
+                @include textHide(1);
+                &+view{
+                    text-align: right;
+                }
+            }
+        }
+        .il-btns{
+            padding-bottom: 20upx;
+            padding-right: 36upx;
+            @include centerFlex(flex-end);
+            >view{
+                width: 176upx;
+                height: 72upx;
+                line-height: 68upx;
+                text-align: center;
+                border-radius: 10upx;
+                border: 2upx solid $themeColor;
+                font-size: 28upx;
+                color: $themeColor;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/order/membership/membership.vue b/src/components/order/membership/membership.vue
new file mode 100644
index 0000000..a4ec66b
--- /dev/null
+++ b/src/components/order/membership/membership.vue
@@ -0,0 +1,132 @@
+<template>
+    <view class="membership-order">
+        <view class="mo-header">
+            <view>欧轩智能羽毛球馆(永泰店)</view>
+            <text>使用中</text>
+        </view>
+        <view class="mo-section">
+            <view class="ms-line">
+                <view>订单编号：</view>
+                <view>
+                    <view>20195175645666 </view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>用户昵称：</view>
+                <view>
+                    <view>周大强 </view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>支付时间：</view>
+                <view>
+                    <view>2019-05-17 11:12:50</view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>会员卡信息：</view>
+                <view>
+                    <view>3000元会员卡</view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>会员卡余额：</view>
+                <view>
+                    <view><text>¥2800</text></view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>场地折扣：</view>
+                <view>
+                    <view>九折</view>
+                </view>
+            </view>
+            <view class="ms-line">
+                <view>购买途径：</view>
+                <view>
+                    <view>升级</view>
+                </view>
+            </view>
+        </view>
+        <view class="mo-bot">
+            <view>支付方式：微信支付</view>
+            <view>实付款： ¥3000</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "../../../style/public.scss";
+    .membership-order{
+        padding: 0 20upx;
+        background-color: #fff;
+        border-radius: 10upx;
+        .mo-header{
+            margin-bottom: 18upx;
+            height: 98upx;
+            line-height: 96upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                font-size: 28upx;
+                font-weight: 500;
+                color: #1a1a1a;
+                @include textHide(1);
+            }
+            >text{
+                flex-shrink: 0;
+                font-size: 28upx;
+                color: $themeColor;
+            }
+        }
+        .mo-section{
+            padding-bottom: 30upx;
+            .ms-line{
+                display: flex;
+                view{
+                    line-height: 40upx;
+                    font-size: 24upx;
+                    color: #9c9c9f;
+                }
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        >view{
+                            >text{
+                                color: #1A1A1A;
+                            }
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+        }
+        .mo-bot{
+            height: 90upx;
+            border-top: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                line-height: 40upx;
+                font-size: 24upx;
+                color: #9c9c9f;
+                &:first-child{
+                    flex-shrink: 0;
+                }
+                &:last-child{
+                    flex-grow: 1;
+                    text-align: right;
+                    @include textHide(1);
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/order/reservation/reservation.vue b/src/components/order/reservation/reservation.vue
new file mode 100644
index 0000000..ab659dc
--- /dev/null
+++ b/src/components/order/reservation/reservation.vue
@@ -0,0 +1,148 @@
+<template>
+    <view class="reservation-order">
+        <view class="ro-header">
+            <view>欧轩智能羽毛球馆(永泰店)</view>
+            <text class="rh-active">待使用</text>
+        </view>
+        <view class="ro-section">
+            <view class="rs-line">
+                <view>订单编号：</view>
+                <view>
+                    <view>20195175645666</view>
+                </view>
+            </view>
+            <view class="rs-line">
+                <view>用户昵称：</view>
+                <view>
+                    <view>周大强</view>
+                </view>
+            </view>
+            <view class="rs-line">
+                <view>支付时间：</view>
+                <view>
+                    <view>2019-05-17 11:12:50</view>
+                </view>
+            </view>
+            <view class="rs-line">
+                <view>预定日期：</view>
+                <view>
+                    <view>2019-05-18 周五</view>
+                </view>
+            </view>
+            <view class="rs-line">
+                <view>预定场次：</view>
+                <view>
+                    <view>1号馆 10:00-11:00；11:00-12:00</view>
+                    <view>1号馆 10:00-11:00；11:00-12:00</view>
+                    <view>1号馆 10:00-11:00；11:00-12:00</view>
+                    <view>1号馆 10:00-11:00；11:00-12:00</view>
+                </view>
+            </view>
+        </view>
+        <view class="ro-bot">
+            <view class="rb-line">
+                <view>支付方式：微信支付</view>
+                <view>共5场次 合计：¥240</view>
+            </view>
+            <view class="rb-total">实付款<text>¥240</text>(折扣0)</view>
+        </view>
+        <view class="ro-bot-line">核销方式：商家扫码 2019-05-18 09:50:30</view>
+        <view class="ro-bot-line">退款时间：2019-05-18   09:50:30</view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "../../../style/public.scss";
+    .reservation-order{
+        padding: 0 24upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .ro-header{
+            margin-bottom: 18upx;
+            height: 98upx;
+            line-height: 96upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                font-size: 28upx;
+                color: #1a1a1a;
+            }
+            >text{
+                flex-shrink: 0;
+                font-size: 28upx;
+                color: #9C9C9F;
+            }
+            .rh-active{
+                color: $themeColor;
+            }
+        }
+        .ro-section{
+            padding-bottom: 20upx;
+            .rs-line{
+                display: flex;
+                view{
+                    line-height: 40upx;
+                    font-size: 24upx;
+                    color: #9c9c9f;
+                }
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        >view{
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+
+        }
+        .ro-bot{
+            padding-top: 20upx;
+            padding-bottom: 30upx;
+            border-top: 2upx solid #D8D8D8;
+            .rb-line{
+                @include centerFlex(space-between);
+                >view{
+                    line-height: 40upx;
+                    font-size: 24upx;
+                    color: #9c9c9f;
+                    &:first-child{
+                        margin-right: 20upx;
+                        flex-shrink: 0;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        text-align: right;
+                        @include textHide(1);
+                    }
+                }
+            }
+            .rb-total{
+                line-height: 40upx;
+                text-align: right;
+                font-size: 24upx;
+                color: #9c9c9f;
+                >text{
+                    color: #1A1A1A;
+                }
+            }
+        }
+        .ro-bot-line{
+            height: 90upx;
+            line-height: 90upx;
+            border-top: 2upx solid #D8D8D8;
+            font-size: 24upx;
+            color: #9c9c9f;
+            @include textHide(1);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index fd34209..975a166 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,6 +1,12 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/order_search/order_search",
+			"style": {
+				"navigationBarTitleText": "搜索"
+			}
+		},
+		{
 			"path": "pages/order_list/order_list",
 			"style": {
 				"navigationBarTitleText": "订单列表"
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index 6997d8c..fd70799 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -26,24 +26,78 @@
               </view>
           </view>
       </view>
-      <view class="ox-dark-mask">
-          <view class="ol-classify"></view>
+      <view class="ol-order-list">
+          <view class="ool-item">
+              <reservation-order></reservation-order>
+          </view>
+          <view class="ool-item">
+              <membership-order></membership-order>
+          </view>
+          <view class="ool-item">
+              <integral-order></integral-order>
+          </view>
+      </view>
+      <!-- 分类tab -->
+      <view class="ox-dark-mask" v-if="false">
+          <view class="ol-classify">
+              <view class="oc-title">
+                  预约订单
+              </view>
+              <view class="oc-tabs">
+                  <view class="ot-item">全部</view>
+                  <view class="ot-item">待使用</view>
+                  <view class="ot-item">已使用</view>
+                  <view class="ot-item">已失效</view>
+                  <view class="ot-item">已退款</view>
+              </view>
+          </view>
+      </view>
+      <!-- 时间段选择 -->
+      <view class="ox-dark-mask" v-if="false">
+          <view class="ol-period">
+              <view>日期范围</view>
+              <picker>
+                  <view class="op-time">
+                      <text>开始时间</text>
+                      <view>
+                          <input placeholder="选择时间" disabled />
+                          <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
+                      </view>
+                  </view>
+              </picker>
+              <picker>
+                  <view class="op-time">
+                      <text>截止时间</text>
+                      <view>
+                          <input placeholder="选择时间" disabled />
+                          <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
+                      </view>
+                  </view>
+              </picker>
+              <view class="pl-btn active">确定</view>
+          </view>
       </view>
-      
   </view>
 </template>
 
 <script>
-export default {
-
-}
+    import reservation_order from '../../components/order/reservation/reservation';
+    import membership_order from '../../components/order/membership/membership';
+    import integral_order from '../../components/order/integral/integral';
+    export default {
+        components: {
+            'reservation-order': reservation_order,
+            'membership-order': membership_order,
+            'integral-order': integral_order,
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
     @import "../../style/public.scss";
     .order-list{
         
-    }
+    }   
     .ol-header{
         .oh-cur-store{
             padding: 0 24upx;
@@ -125,6 +179,12 @@ export default {
             }
         }
     }
+    .ol-order-list{
+        padding: 0 24upx;
+        .ool-item{
+            margin-bottom: 24upx;
+        }
+    }
     .ol-classify{
         position: absolute;
         right: 0;
@@ -133,6 +193,84 @@ export default {
         width: 500upx;
         padding-left: 42upx;
         background-color: #fff;
+        padding-top: 26upx;
+        padding-left: 42upx;
+        .oc-title{
+            margin-bottom: 58upx;
+            padding: 50upx 0;
+            border-bottom: 2upx solid #D8D8D8;
+            line-height: 34upx;
+            font-size: 24upx;
+            color: #9c9c9f;
+        }
+        .oc-tabs{
+            .ot-item{
+                margin-bottom: 50upx;
+                line-height: 44upx;
+                font-size: 32upx;
+                color: #1a1a1a;
+                @include textHide(1);
+            }
+        }
+    }
+    .ol-period{
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding-left: 38upx;
+        padding-top: 66upx;
+        height: 472upx;
+        width: 100%;
+        background-color: #fff;
+        >view:first-child{
+            line-height: 34upx;
+            font-size: 24upx;
+            color: #9c9c9f;
+        }
+        picker{
+            width: 100%;
 
+        }
+        .op-time{
+            padding-right: 40upx;
+            height: 124upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >text{
+                flex-shrink: 0;
+                line-height: 44upx;
+                font-size: 32upx;
+                color: #1a1a1a;
+            }
+            >view{
+                flex-grow: 1;
+                @include centerFlex(flex-end);
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    line-height: 44upx;
+                    text-align: right;
+                    font-size: 32upx;
+                    color: #1a1a1a;
+                }
+                >image{
+                    flex-shrink: 0;
+                    margin-left: 36upx;
+                    width: 28upx;
+                    height: 28upx;
+                }
+            }
+        }
+        .pl-btn{
+            height: 124upx;
+            line-height: 124upx;
+            text-align: center;
+            font-size: 32upx;
+            font-weight: 500;
+            color: rgba(0, 152, 116, .2);
+            &.active{
+                color: $themeColor;
+            }
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/pages/order_search/order_search.vue b/src/pages/order_search/order_search.vue
new file mode 100644
index 0000000..03e9bb2
--- /dev/null
+++ b/src/pages/order_search/order_search.vue
@@ -0,0 +1,82 @@
+<template>
+    <view class="order-search">
+        <view class="os-bar">
+            <view>
+                <image mode="aspectFit" src="/static/images/icon/search.png"></image>
+                <input placeholder="你输入订单号" />
+                <image mode="aspectFit" src="/static/images/icon/round_close.png"></image>
+            </view>
+        </view>
+        <view class="os-none">
+            <image mode="aspectFit" src="/static/images/icon/no_order.png"></image>
+            <view>没有该订单数据</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "../../style/public.scss";
+    .order-search{
+        .os-bar{
+            margin-bottom: 24upx;
+            height: 144upx;
+            background-color: #fff;
+            @include centerFlex(center);
+            >view{
+                padding: 0 20upx;
+                height: 92upx;
+                width: 702upx;
+                border-radius: 10upx;
+                background-color: #f2f2f7;
+                @include centerFlex(center);
+                >image{
+                    margin-right: 20upx;
+                    flex-shrink: 0;
+                    width: 40upx;
+                    height: 40upx;
+                }
+                >input{
+                    flex-grow: 1;
+                    font-size: 32upx;
+                    line-height: 44upx;
+                    color: #1A1A1A;
+                    &+image{
+                        flex-shrink: 0;
+                        margin-right: 0;
+                        margin-left: 20upx;
+                        width: 32upx;
+                        height: 32upx;
+                    }
+                }
+            }
+        }
+        .os-none{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            top: 168upx;
+            top: calc(168upx + var(--window-top));
+            padding-top: 164upx;
+            background-color: #fff;
+            >image{
+                margin: 0 auto 12upx;
+                display: block;
+                width: 380upx;
+                height: 380upx;
+            }
+            >view{
+                font-size: 28upx;
+                line-height: 40upx;
+                text-align: center;
+                color: #9c9c9f;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/static/images/icon/no_order.png b/src/static/images/icon/no_order.png
new file mode 100644
index 0000000..7364627
Binary files /dev/null and b/src/static/images/icon/no_order.png differ