diff --git a/src/pages.json b/src/pages.json
index b568132..e30adf4 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -651,6 +651,12 @@
 					"style" : {
 						"navigationBarTitleText": "订场卡订单列表" 
 					}
+				},
+				{
+					"path": "pages/booking_card/order_info",
+					"style" : {
+						"navigationBarTitleText": "订场卡订单详情" 
+					}
 				}
 			]
 		},
diff --git a/src/subpackage/order/pages/booking_card/order_info.vue b/src/subpackage/order/pages/booking_card/order_info.vue
new file mode 100644
index 0000000..fae2e24
--- /dev/null
+++ b/src/subpackage/order/pages/booking_card/order_info.vue
@@ -0,0 +1,192 @@
+<template>
+    <view class="booking-card">
+        <view class="bc-header">
+            <view class="odh-stadium">
+                <image class="os-img" mode="aspectFit" :src="''"></image>
+                <view class="os-name">{{ 'stadiumName' || '-' }}</view>
+            </view>
+            <view class="bh-content">
+                <kv-line label="订单编号：">
+                    <template v-slot:default>{{ orderInfo.order_no || '-' }}</template>
+                    <template v-slot:right>
+                        <text 
+                            class="od-status"
+                            :class="true ? 'active' : ''"
+                        >{{ `orderInfo.status_text` || '-' }}</text>
+                    </template>
+                </kv-line>
+                <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
+                <kv-line label="手机号码：">{{ orderInfo.mobile || '-' }}</kv-line>
+                <kv-line label="用户昵称：">{{ orderInfo.nickname || '-' }}</kv-line>
+            </view>
+        </view>
+        <view class="bc-box bc-cards">
+            <view class="bb-tit">
+                <view class="bt-name">订场卡信息</view>
+                <view class="bt-record">使用记录</view>
+            </view>
+            <view class="bb-content">
+                <kv-line label="订场卡名称：">{{ orderInfo.created_at || '-' }}</kv-line>
+                <kv-line label="订场卡号：">{{ orderInfo.mobile || '-' }}</kv-line>
+                <kv-line label="来源：">{{ orderInfo.nickname || '-' }}</kv-line>
+            </view>
+            <view class="bc-discount">
+                <kvs-line label="金额小计">¥{{ orderInfo.amount || '0' }}</kvs-line>
+                <kvs-line label="折扣金额">-¥{{ orderInfo.discount_amount || '0' }}</kvs-line>
+                <kvs-line label="积分抵扣">-¥{{ orderInfo.deduction_amount || '0' }}</kvs-line>
+                <kvs-line label="优惠券优惠">-¥{{ orderInfo.coupons_amount || '0' }}</kvs-line>
+                <view class="od-total">
+                    <text class="pt-name">合计支付：</text>￥{{ orderInfo.pay_amount || '0' }}
+                </view>
+            </view>
+        </view>
+        <view class="bc-box bc-payment">
+            <view class="bb-tit">
+                <view class="bt-name">支付信息</view>
+            </view>
+            <view class="bb-content">
+                <kv-line label="支付方式：">支付方式支付方式支付方式支付方式支付方式支付方式支付方式支付方式支付方式</kv-line>
+                <kv-line label="支付时间：">{{ orderInfo.mobile || '-' }}</kv-line>
+                <kv-line label="微信交易号：">{{ orderInfo.nickname || '-' }}</kv-line>
+            </view>
+        </view>
+
+        <view class="bc-fixed">
+            <view class="bf-btn" @click="refundBtn">退款</view>
+        </view>
+
+        <!-- 退款弹窗 -->
+        <order-refund-modal ref="orderRefundModal" ></order-refund-modal>
+    </view>
+</template>
+
+<script>
+import kvLine from "../../components/kv_line.vue";
+import kvsLine from "../../components/kvs_line.vue";
+import orderRefundModal from '@/components/order_refund/modal.vue';
+import orderRefundInfo from '@/components/order_refund/info.vue';
+export default {
+    components: {
+        kvLine,
+        kvsLine,
+        orderRefundModal,
+        orderRefundInfo
+    },
+    methods: {
+        refundBtn(){
+            this.$refs.orderRefundModal.show({});
+        }
+    }
+}
+
+// 1. produce process
+// p(s1) s1 = 0 finish p(s1) and go
+// v(s2) s2 = 1 finish v(s2) and go
+// 2. loop produce process
+// p(s1) s1 = -1 stop p(s1) and push in queue[1]
+// 3. consume process
+// p(s2) s2 = 0 finish p(s2) and go
+// v(s1) s1 = 0 stop v(s1) and pull queue[1]
+// 4. cp v(s1) ->  produce process
+// v(s2) s2 = 1 finish & go
+</script>
+
+<style lang="scss">
+    .booking-card{
+        padding: 24upx;
+        @include isPd(132upx);
+        .bc-header{
+            padding: 0 30upx 40upx;
+            border-radius: 10upx;
+            background: #fff;
+            .odh-stadium{
+                padding: 26upx 0;
+                border-bottom: 1px solid #D8D8D8;
+                @include ctf(flex-start);
+                .os-img{
+                    flex-shrink: 0;
+                    margin-right: 14upx;
+                    width: 40upx;
+                    height: 40upx;
+                }
+                .os-name{
+                    @include flcw(28upx, 40upx, #333333, 500);
+                    @include tHide;
+                }
+            }
+            .bh-content{
+                margin-top: 26upx;
+                .od-status{
+                    margin-left: auto;
+                    flex-shrink: 0;
+                    @include flcw(28upx, 40upx, #9C9C9F);
+                    &.active{
+                        color: $mColor;
+                    }
+                }
+            }
+        }
+        .bc-box{
+            margin-top: 24upx;
+            padding: 30upx;
+            border-radius: 10upx;
+            background: #fff;
+            .bb-tit{
+                @include ctf(space-between);
+                .bt-name{
+                    @include flcw(28upx, 40upx, #9C9C9F);
+                    @include tHide;
+                }
+                .bt-record{
+                    flex-shrink: 0;
+                    max-width: 250upx;
+                    @include flcw(28upx, 40upx, $mColor);
+                    @include tHide;
+                }
+            }
+            .bb-content{
+                padding-top: 20upx;
+            }
+        }
+        .bc-cards{
+            .bc-discount{
+                margin-top: 20upx;
+                border-top: 1px solid #D8D8D8;
+                .od-total{
+                    padding-top: 10upx;
+                    text-align: right;
+                    @include flcw(28upx, 50upx, #1A1A1A, 500);
+                    @include tHide;
+                    .pt-name{
+                        color: #9A9A9D;
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+        .bc-fixed{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            padding: 10upx 24upx;
+            width: 100%;
+            background: #f2f2f7;
+            @include ctf(flex-end);
+            .bf-btn{
+                width: 192upx;
+                border-radius: 10upx;
+                text-align: center;
+                background: #fff;
+                @include flcw(32upx, 88upx, $mColor, 500);
+            }
+        }
+    }
+</style>
+
+
+
+
+
+
+
+
diff --git a/src/subpackage/order/pages/booking_card/order_list.vue b/src/subpackage/order/pages/booking_card/order_list.vue
index 270fb2d..01f0e7b 100644
--- a/src/subpackage/order/pages/booking_card/order_list.vue
+++ b/src/subpackage/order/pages/booking_card/order_list.vue
@@ -20,7 +20,6 @@
         </view>
     </view>
 </template>
-
 <script>
 import orderListHeader from "../../components/order_list/header.vue";
 import itemTemp from "../../components/order_list/item_temp.vue";
diff --git a/src/subpackage/order/pages/booking_card/use_record.vue b/src/subpackage/order/pages/booking_card/use_record.vue
new file mode 100644
index 0000000..e69de29