add list item temp

src/subpackage/order/components/kv_line.vue

@@ -1,14 +1,19 @@
 <template>
     <view class="kv-line">
-        <view class="kl-name"><slot name="key">key：</slot></view>
-        <view class="kl-val"><slot name="value">value</slot></view>
+        <view class="kl-name">{{ label || '' }}</view>
+        <view class="kl-val"><slot name="default">value</slot></view>
         <slot name="right"></slot>
     </view>
 </template>
 
 <script>
 export default {
-
+    props: {
+        label: {
+            type: String,
+            default: ''
+        },
+    }
 }
 </script>
 

src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue

@@ -0,0 +1,55 @@
+<template>
+    <view class="list-item-temp">
+        <view class="lit-stadium-status">
+            <view class="lss-stadium">欧轩智能场馆(永泰店)</view>
+            <view class="lss-status">计费中</view>
+        </view>
+        <slot name="default">content</slot>
+        <view class="lit-price">
+            <text class="lp-txt">支付金额</text>¥240
+        </view>
+        <slot name="bottom">bottom</slot>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return{ }
+    }
+}
+</script>
+
+<style lang="scss">
+    .list-item-temp{
+        padding: 0 20upx 30upx;
+        border-radius: 10upx;
+        background: #fff;
+        .lit-stadium-status{
+            padding: 30upx 0 26upx;
+            border-bottom: 1px solid #D8D8D8;
+            @include ctf(space-between);
+            .lss-stadium{
+                @include flcw(28upx, 40upx, #1A1A1A, 500);
+                @include tHide;
+            }
+            .lss-status{
+                flex-shrink: 0;
+                margin-left: 12upx;
+                @include flcw(28upx, 40upx, #9A9A9D);
+            }
+        }
+        .lit-price{
+            margin-top: 30upx;
+            padding-top: 20upx;
+            text-align: right;
+            border-top: 1px solid #D8D8D8;
+            @include flcw(28upx, 40upx, #1A1A1A);
+            @include tHide;
+            .lp-txt{
+                margin-right: 6upx;
+                color: #9C9C9F;
+            }
+        }
+    }
+</style>

src/subpackage/order/pages/timekeeping/modules/person_list_item.vue

@@ -1,71 +1,46 @@
 <template>
-    <view class="list-item">
-        <view class="li-content">
-            <view class="lc-stadium-status">
-                <view class="lss-stadium">欧轩智能场馆(永泰店)</view>
-                <view class="lss-status">计费中</view>
-            </view>
+    <list-item-temp>
+        <template v-slot:default>
             <view class="lc-info">
-                <kv-line>
-                    <template v-slot:key>订单编号：</template>
-                    <template v-slot:value>qp20200150150245569</template>
+                <kv-line label="订单编号：">
+                    <template v-slot:default>qp20200150150245569</template>
                     <template v-slot:right>
                         <image class="li-icon"></image>
                     </template>
                 </kv-line>
-                <kv-line>
-                    <template v-slot:key>项目类型：</template>
-                    <template v-slot:value>人时（1号门闸）</template>
+                <kv-line label="项目类型：">
+                    人时（1号门闸）
                 </kv-line>
-                <kv-line>
-                    <template v-slot:key>计费时长：</template>
-                    <template v-slot:value><text style="color: #009874;">1小时58分46秒</text></template>
+                <kv-line label="计费时长：">
+                    <text style="color: #009874;">1小时58分46秒</text>
                 </kv-line>
-                <kv-line>
-                    <template v-slot:key>创建时间：</template>
-                    <template v-slot:value>2019-08-17 18:02:58</template>
+                <kv-line label="创建时间：">
+                    2019-08-17 18:02:58
                 </kv-line>
             </view>
+        </template>
+        <template v-slot:bottom>
             <view class="lc-btns">
                 <view class="lb-item">结束计费</view>
             </view>
-            <view class="lc-price">
-                <text class="lp-txt">支付金额</text>¥240
-            </view>
-        </view>
-    </view>
+        </template>
+    </list-item-temp>
 </template>
 
 <script>
 import pLine from "../../../components/p_line/p_line.vue";
 import kvLine from "../../../components/kv_line.vue";
+import listItemTemp from "./list_item_temp.vue";
 export default {
     components: {
         'p-line': pLine,
-        'kv-line': kvLine
+        'kv-line': kvLine,
+        'list-item-temp': listItemTemp
     }
 }
 </script>
 
 <style lang="scss">
-    .li-content{
-        padding: 0 20upx 30upx;
-        border-radius: 10upx;
-        background: #fff;
-        .lc-stadium-status{
-            padding: 30upx 0 26upx;
-            border-bottom: 1px solid #D8D8D8;
-            @include ctf(space-between);
-            .lss-stadium{
-                @include flcw(28upx, 40upx, #1A1A1A, 500);
-                @include tHide;
-            }
-            .lss-status{
-                flex-shrink: 0;
-                margin-left: 12upx;
-                @include flcw(28upx, 40upx, #9A9A9D);
-            }
-        }
     .lc-info{
         padding-top: 12upx;
         .li-icon{
@@ -76,8 +51,9 @@ export default {
             background: skyblue;
         }
     }
+
     .lc-btns{
-            margin-top: 8upx;
+        margin-top: 24upx;
         @include ctf(flex-end);
         .lb-item{
             width: 192upx;
@@ -88,18 +64,4 @@ export default {
             @include flcw(32upx, 76upx, $mColor, 500);
         }
     }
-        
-        .lc-price{
-            margin-top: 30upx;
-            padding-top: 20upx;
-            text-align: right;
-            border-top: 1px solid #D8D8D8;
-            @include flcw(28upx, 40upx, #1A1A1A);
-            @include tHide;
-            .lp-txt{
-                margin-right: 6upx;
-                color: #9C9C9F;
-            }
-        }
-    }
 </style>

src/subpackage/order/pages/timekeeping/order_list.vue

@@ -76,9 +76,6 @@ export default {
 </script>
 
 <style lang="scss">
-    .timekeeping-order-list{
-
-    }
     .tol-list{
         padding: 0 24upx;
         .tl-item + .tl-item{