add tid1553 style

src/subpackage/order/pages/timekeeping/modules/order_detail/bf_button.vue

@@ -0,0 +1,23 @@
+<template>
+    <view class="bf-button">
+        <slot>取消预约</slot>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.bf-button{
+    padding: 0 32upx;
+    display: inline-block;
+    min-width: 192upx;
+    text-align: center;
+    border-radius: 10upx;
+    background: #fff;
+    @include flcw(32upx, 88upx, $mColor, 500);
+}
+</style>

src/subpackage/order/pages/timekeeping/modules/order_detail/bottom_fixed.vue

@@ -0,0 +1,30 @@
+<template>
+    <view class="bottom-fixed">
+        <view class="bf-placeholder"></view>
+        <view class="bf-content">
+            <view class="bc-btns">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    created(){
+        console.log('bottom_fixed')
+    }
+}
+</script>
+
+<style lang="scss">
+.bottom-fixed{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 10upx 24upx;
+    background: #f2f2f7;
+    @include ctf(flex-end);
+}
+</style>

src/subpackage/order/pages/timekeeping/modules/order_detail/end_billing_modal.vue

@@ -0,0 +1,180 @@
+<template>
+    <view class="end-billing-modal">
+        <view class="ebm-mask" v-if="false">
+            <view class="em-container">
+                <view class="ec-close"></view>
+                <view class="ec-title">结束计费</view>
+                <view class="ec-info">
+                    <view class="ei-line"><text class="el-txt">操作人：</text>张三</view>
+                    <view class="ei-line"><text class="el-txt">时长合计：</text>1小时25分9秒</view>
+                    <view class="ei-line"><text class="el-txt">金额合计：</text>¥100.2</view>
+                </view>
+
+                <view class="ec-opts">
+                    <view class="eo-item active">
+                        <view class="ei-icon"></view>
+                        <view class="ei-txt">停止计时</view>
+                    </view>
+                    <view class="eo-item">
+                        <view class="ei-icon"></view>
+                        <view class="ei-txt">完结订单</view>
+                    </view>
+                </view>
+
+                <view class="ec-amount">
+                    <view class="et-name"><text class="en-txt">*</text>请输入金额</view>
+                    <input type="digit" class="ea-ipt">
+                </view>
+
+                <view class="ec-btn">确认</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .ebm-mask{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        
+    }
+    .em-container{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding: 0upx 80upx;
+        width: 620upx;
+        height: 806upx;
+        border-radius: 10upx;
+        background: #fff;
+        .ec-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 48upx;
+            height: 48upx;
+            transform: rotate(45deg);
+            &::before, &::after{
+                content: '';
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 100%;
+                height: 4upx;
+                background: #9a9a9d;
+                border-radius: 4upx;
+            }
+            &::after{
+                transform: translate(-50%, -50%) rotate(90deg);
+            }
+        }
+
+        .ec-title{
+            padding-top: 78upx;
+            text-align: center;
+            @include flcw(32upx, 44upx, #1A1A1A, 500);
+        }
+
+        .ec-btn{
+            margin: 60upx auto 0upx;
+            width: 240upx;
+            text-align: center;
+            border-radius: 10upx;
+            background: $mColor;
+            @include flcw(32upx, 88upx, #fff, 500);
+        }
+
+    }
+
+    .ec-info{
+        padding-top: 34upx;
+        .ei-line{
+            @include flcw(28upx, 48upx, #1A1A1A);
+            @include tHide;
+            .el-txt{
+                color: #1A1A1A;
+            }
+            &:nth-child(2){
+                color: $mColor;
+            }
+            &:nth-child(3){
+                color: #FF873D;
+            }
+            
+        }
+    }
+
+    .ec-opts{
+        padding-top: 58upx;
+        @include ctf(space-between);
+        .eo-item{
+            flex-shrink: 0;
+            width: 50%;
+            @include ctf;
+            .ei-icon{
+                flex-shrink: 0;
+                margin-right: 12upx;
+                padding: 4upx;
+                width: 32upx;
+                height: 32upx;
+                border: 4upx solid #d8d8d8;
+                border-radius: 50%;
+                @include ctf(center);
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    background: #d8d8d8;
+                    border-radius: 50%;
+                }
+            }
+            .ei-txt{
+                @include flcw(28upx, 48upx, #d8d8d8);
+            }
+            &.active{
+                .ei-icon{
+                    border-color: $mColor;
+                    &::after{
+                        background: $mColor;
+                    }
+                }
+                .ei-txt{
+                    color: #1A1A1A;
+                }
+            }
+        }
+    }
+
+    .ec-amount{
+        padding-top: 48upx;
+        .et-name{
+            @include flcw(28upx, 48upx, #1A1A1A);
+            .en-txt{
+                color: #EA5061;
+            }
+        }
+        .ea-ipt{
+            margin-top: 8upx;
+            padding: 0 12upx;
+            height: 88upx;
+            border-radius: 10upx;
+            border: 2upx solid #D8D8D8;
+            @include flcw(28upx, 48upx, #1A1A1A);
+        }
+        
+    }
+</style>

src/subpackage/order/pages/timekeeping/order_detail/person.vue

@@ -43,6 +43,20 @@
             <kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
             <kv-line label="退款原因：">商家主动退款</kv-line>
         </info-temp>
+        <view class="pod-margin"></view>
+        <view class="pod-margin"></view>
+
+        <view class="pod-btn" v-if="false">完结订单</view>
+        <view class="pod-btn" v-else>结束计费</view>
+
+        <!-- <view class="pod-fixed">
+            <view class="pf-btn">取消预约</view>
+        </view> -->
+        <bottom-fixed>
+            <view class="pf-btn">取消预约</view>
+        </bottom-fixed>
+
+        <end-billing-modal></end-billing-modal>
     </view>
 </template>
 
@@ -51,20 +65,25 @@ import headerTemp from "../modules/order_detail/header_temp.vue";
 import infoTemp from "../modules/order_detail/info_temp.vue";
 import kvLine from "../../../components/kv_line.vue";
 import kvsLine from "../../../components/kvs_line.vue";
+import endBillingModal from "../modules/order_detail/end_billing_modal.vue";
+import bottomFixed from "../modules/order_detail/bottom_fixed.vue";
+// import bottomFixed from "../modules/order_detail/bf_button.vue";
 export default {
     components: {
         'header-temp': headerTemp,
         'info-temp': infoTemp,
         'kv-line': kvLine,
-        'kvs-line': kvsLine
+        'kvs-line': kvsLine,
+        'end-billing-modal': endBillingModal,
+        'bottom-fixed': bottomFixed
     }
 }
 </script>
 
 <style lang="scss">
     .person-order-detail{
-        padding: 24upx;
-        @include isPd(24upx);
+        padding: 24upx 24upx 132upx;
+        @include isPd(132upx);
         .pod-status{
             margin-left: auto;
             flex-shrink: 0;
@@ -89,4 +108,30 @@ export default {
             font-weight: 400;
         }
     }
+
+    .pod-btn{
+        text-align: center; 
+        border-radius: 10upx;
+        background: $mColor;
+        @include flcw(32upx, 112upx, #fff, 500);
+    }
+
+    .pod-fixed{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 10upx 24upx;
+        background: #f2f2f7;
+        @include ctf(flex-end);
+        
+    }
+    .pf-btn{
+        padding: 0 32upx;
+        display: inline-block;
+        text-align: center;
+        border-radius: 10upx;
+        background: #fff;
+        @include flcw(32upx, 88upx, $mColor, 500);
+    }
 </style>