From 319f3c2e0d96497d45ad2e8669ea030c317df86c Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 18 Jul 2024 18:15:57 +0800
Subject: [PATCH] add tid1553 style

---
 src/pages.json                                     |  6 ++
 src/subpackage/order/components/kvs_line.vue       | 36 +++++++++
 .../pages/timekeeping/modules/list_item_temp.vue   | 55 -------------
 .../modules/order_detail/header_temp.vue           | 44 +++++++++++
 .../timekeeping/modules/order_detail/info_temp.vue | 34 ++++++++
 .../timekeeping/modules/order_list/deposit.vue     | 40 ++++++++++
 .../timekeeping/modules/order_list/item_temp.vue   | 55 +++++++++++++
 .../timekeeping/modules/order_list/person.vue      | 65 +++++++++++++++
 .../pages/timekeeping/modules/order_list/site.vue  | 67 ++++++++++++++++
 .../pages/timekeeping/modules/person_list_item.vue | 67 ----------------
 .../pages/timekeeping/order_detail/person.vue      | 92 ++++++++++++++++++++++
 .../order/pages/timekeeping/order_list.vue         | 19 ++++-
 12 files changed, 456 insertions(+), 124 deletions(-)
 create mode 100644 src/subpackage/order/components/kvs_line.vue
 delete mode 100644 src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
 delete mode 100644 src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/order_detail/person.vue

diff --git a/src/pages.json b/src/pages.json
index 0bc2647..7805fb2 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -492,6 +492,12 @@
 					}
 				},
 				{
+					"path": "pages/timekeeping/order_detail/person",
+					"style" : {
+						"navigationBarTitleText": "散客计时订单详情" 
+					}
+				},
+				{
 					"path": "pages/stored_value_card/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "储值卡订单详情" 
diff --git a/src/subpackage/order/components/kvs_line.vue b/src/subpackage/order/components/kvs_line.vue
new file mode 100644
index 0000000..25de1f6
--- /dev/null
+++ b/src/subpackage/order/components/kvs_line.vue
@@ -0,0 +1,36 @@
+<template>
+    <view class="s-line">
+        <view class="sl-view">{{ label }}</view>
+        <view class="sl-view">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            default: ''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+    .s-line{
+        @include ctf(space-between);
+        .sl-view{
+            &:first-child{
+                flex-shrink: 0;
+                @include flcw(28upx, 60upx, #1A1A1A);
+            }
+            &+.sl-view{
+                margin-left: 20upx;
+                @include flcw(24upx, 60upx, #1A1A1A);
+                @include tHide;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue b/src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue
deleted file mode 100644
index 89a8661..0000000
--- a/src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue b/src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue
new file mode 100644
index 0000000..4560b9a
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue
@@ -0,0 +1,44 @@
+<template>
+    <view class="order-detail-header">
+        <view class="odh-stadium">
+            <image class="os-img"></image>
+            <view class="os-name">欧轩智能场馆(羽毛球永泰店)</view>
+        </view>
+        <view class="odh-content">
+            <slot>content</slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .order-detail-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;
+                background: skyblue;
+            }
+            .os-name{
+                @include flcw(28upx, 40upx, #333333, 500);
+                @include tHide;
+            }
+        }
+        .odh-content{
+            padding-top: 26upx;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue b/src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue
new file mode 100644
index 0000000..171d77d
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue
@@ -0,0 +1,34 @@
+<template>
+    <view class="order-detail-info">
+        <view class="odi-title">{{ title }}</view>
+        <view class="odi-content">
+            <slot name="default">content</slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+    .order-detail-info{
+        padding: 30upx;
+        border-radius: 10upx;
+        background: #fff;
+        .odi-title{
+            @include flcw(28upx, 40upx, #9C9C9F);
+            @include tHide;
+        }
+        .odi-content{
+            padding-top: 20upx;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
new file mode 100644
index 0000000..3282e1c
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
@@ -0,0 +1,40 @@
+<template>
+    <list-item-temp>
+        <template v-slot:default>
+            <view class="lc-info">
+                <kv-line label="订单编号：">
+                    <template v-slot:default>qp20200150150245569</template>
+                    <template v-slot:right>
+                        <image class="li-icon"></image>
+                    </template>
+                </kv-line>
+                <kv-line label="项目类型：">押金</kv-line>
+                <kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
+            </view>
+        </template>
+    </list-item-temp>
+</template>
+
+<script>
+import kvLine from "../../../../components/kv_line.vue";
+import listItemTemp from "./item_temp.vue";
+export default {
+    components: {
+        'kv-line': kvLine,
+        'list-item-temp': listItemTemp
+    }
+}
+</script>
+
+<style lang="scss">
+    .lc-info{
+        padding-top: 12upx;
+        .li-icon{
+            margin-left: auto;
+            flex-shrink: 0;
+            width: 32upx;
+            height: 32upx;
+            background: skyblue;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue
new file mode 100644
index 0000000..1938022
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_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"></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>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
new file mode 100644
index 0000000..efa848c
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
@@ -0,0 +1,65 @@
+<template>
+    <list-item-temp>
+        <template v-slot:default>
+            <view class="lc-info">
+                <kv-line label="订单编号：">
+                    <template v-slot:default>qp20200150150245569</template>
+                    <template v-slot:right>
+                        <image class="li-icon"></image>
+                    </template>
+                </kv-line>
+                <kv-line label="项目类型：">
+                    人时（1号门闸）
+                </kv-line>
+                <kv-line label="计费时长：">
+                    <text style="color: #009874;">1小时58分46秒</text>
+                </kv-line>
+                <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>
+        </template>
+    </list-item-temp>
+</template>
+
+<script>
+import kvLine from "../../../../components/kv_line.vue";
+import listItemTemp from "./item_temp.vue";
+export default {
+    components: {
+        'kv-line': kvLine,
+        'list-item-temp': listItemTemp
+    }
+}
+</script>
+
+<style lang="scss">
+    .lc-info{
+        padding-top: 12upx;
+        .li-icon{
+            margin-left: auto;
+            flex-shrink: 0;
+            width: 32upx;
+            height: 32upx;
+            background: skyblue;
+        }
+    }
+
+    .lc-btns{
+        margin-top: 24upx;
+        @include ctf(flex-end);
+        .lb-item{
+            width: 192upx;
+            height: 80upx;
+            text-align: center;
+            border-radius: 10upx;
+            border: 2upx solid $mColor;
+            @include flcw(32upx, 76upx, $mColor, 500);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
new file mode 100644
index 0000000..bedb4d4
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
@@ -0,0 +1,67 @@
+<template>
+    <list-item-temp>
+        <template v-slot:default>
+            <view class="lc-info">
+                <kv-line label="项目类型：">
+                    <template v-slot:default>人时（1号门闸）</template>
+                    <template v-slot:right>
+                        <image class="li-icon"></image>
+                    </template>
+                </kv-line>
+                <kv-line label="开始时间：">2019-08-17 18:02:58</kv-line>
+                <kv-line label="结束时间：">2019-08-17 18:02:58</kv-line>
+                <kv-line label="时长合计：">
+                    <text style="color: #009874;">1小时58分46秒</text>
+                </kv-line>
+                <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 class="lb-item">结束计费</view>
+            </view>
+        </template>
+    </list-item-temp>
+</template>
+
+<script>
+import kvLine from "../../../../components/kv_line.vue";
+import listItemTemp from "./item_temp.vue";
+export default {
+    components: {
+        'kv-line': kvLine,
+        'list-item-temp': listItemTemp
+    }
+}
+</script>
+
+<style lang="scss">
+    .lc-info{
+        padding-top: 12upx;
+        .li-icon{
+            margin-left: auto;
+            flex-shrink: 0;
+            width: 32upx;
+            height: 32upx;
+            background: skyblue;
+        }
+    }
+
+    .lc-btns{
+        margin-top: 24upx;
+        @include ctf(flex-end);
+        .lb-item{
+            width: 192upx;
+            height: 80upx;
+            text-align: center;
+            border-radius: 10upx;
+            border: 2upx solid $mColor;
+            @include flcw(32upx, 76upx, $mColor, 500);
+            &+.lb-item{
+                margin-left: 24upx;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue b/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
deleted file mode 100644
index 8eae933..0000000
--- a/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <list-item-temp>
-        <template v-slot:default>
-            <view class="lc-info">
-                <kv-line label="订单编号：">
-                    <template v-slot:default>qp20200150150245569</template>
-                    <template v-slot:right>
-                        <image class="li-icon"></image>
-                    </template>
-                </kv-line>
-                <kv-line label="项目类型：">
-                    人时（1号门闸）
-                </kv-line>
-                <kv-line label="计费时长：">
-                    <text style="color: #009874;">1小时58分46秒</text>
-                </kv-line>
-                <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>
-        </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,
-        'list-item-temp': listItemTemp
-    }
-}
-</script>
-
-<style lang="scss">
-    .lc-info{
-        padding-top: 12upx;
-        .li-icon{
-            margin-left: auto;
-            flex-shrink: 0;
-            width: 32upx;
-            height: 32upx;
-            background: skyblue;
-        }
-    }
-
-    .lc-btns{
-        margin-top: 24upx;
-        @include ctf(flex-end);
-        .lb-item{
-            width: 192upx;
-            height: 80upx;
-            text-align: center;
-            border-radius: 10upx;
-            border: 2upx solid $mColor;
-            @include flcw(32upx, 76upx, $mColor, 500);
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/order_detail/person.vue b/src/subpackage/order/pages/timekeeping/order_detail/person.vue
new file mode 100644
index 0000000..0ad0066
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/order_detail/person.vue
@@ -0,0 +1,92 @@
+<template>
+    <view class="person-order-detail">
+        <header-temp>
+            <kv-line label="订单编号：">
+                <template v-slot:default>qp20200150150245569qp20200150150245569qp20200150150245569</template>
+                <template v-slot:right>
+                    <text class="pod-status">已完成</text>
+                </template>
+            </kv-line>
+            <kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
+            <kv-line label="手机号码：">18316553478</kv-line>
+            <kv-line label="用户昵称：">i术生</kv-line>
+        </header-temp>
+
+        <view class="pod-margin"></view>
+        <info-temp title="计时信息">
+            <kv-line label="项目类型：">人时(1号门闸)</kv-line>
+            <kv-line label="进场时间：">2020-01-10 15:02:24</kv-line>
+            <kv-line label="离场时间：">2020-01-10 17:20:24</kv-line>
+            <kv-line label="时长合计：">1小时35分9秒   </kv-line>
+            <view class="pod-pay-info">
+                <kvs-line label="金额小计">¥10.5</kvs-line>
+                <kvs-line label="折扣金额">-¥0</kvs-line>
+                <kvs-line label="积分抵扣">-¥0</kvs-line>
+                <kvs-line label="优惠券优惠">-¥1</kvs-line>
+            </view>
+            <view class="pod-total">
+                <text class="pt-name">合计支付：</text>￥9.5
+            </view>
+        </info-temp>
+
+        <view class="pod-margin"></view>
+        <info-temp title="支付信息">
+            <kv-line label="支付方式：">微信支付</kv-line>
+            <kv-line label="支付时间：">2019年6月18日   10:30:40</kv-line>
+            <kv-line label="微信交易号：">424736746998493847989434</kv-line>
+        </info-temp>
+
+        <view class="pod-margin"></view>
+        <info-temp title="退款信息1">
+            <kv-line label="退款金额：">￥7</kv-line>
+            <kv-line label="退款单号：">TF-20195171564566</kv-line>
+            <kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="退款原因：">商家主动退款</kv-line>
+        </info-temp>
+    </view>
+</template>
+
+<script>
+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";
+export default {
+    components: {
+        'header-temp': headerTemp,
+        'info-temp': infoTemp,
+        'kv-line': kvLine,
+        'kvs-line': kvsLine
+    }
+}
+</script>
+
+<style lang="scss">
+    .person-order-detail{
+        padding: 24upx;
+        @include isPd(24upx);
+        .pod-status{
+            margin-left: auto;
+            flex-shrink: 0;
+            @include flcw(28upx, 40upx, #9C9C9F);
+        }
+    }
+    .pod-margin{
+        height: 24upx;
+        background: transparent;
+    }
+    .pod-pay-info{
+        margin-top: 20upx;
+        border-top: 1px solid #D8D8D8;
+    }
+    .pod-total{
+        padding-top: 10upx;
+        text-align: right;
+        @include flcw(28upx, 50upx, #1A1A1A, 500);
+        @include tHide;
+        .pt-name{
+            color: #9A9A9D;
+            font-weight: 400;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/order_list.vue b/src/subpackage/order/pages/timekeeping/order_list.vue
index 7172a5e..699aca0 100644
--- a/src/subpackage/order/pages/timekeeping/order_list.vue
+++ b/src/subpackage/order/pages/timekeeping/order_list.vue
@@ -10,6 +10,12 @@
             <view class="tl-item">
                 <person-list-item></person-list-item>
             </view>
+            <view class="tl-item">
+                <site-list-item></site-list-item>
+            </view>
+            <view class="tl-item">
+                <deposit-list-item></deposit-list-item>
+            </view>
         </view>
         <!-- 时间段选择 -->
         <period-modal 
@@ -24,7 +30,11 @@
 import orderListHeader from "../../components/order_list/header.vue";
 import periodModal from "../../components/order_list/period_modal.vue";
 import filterModal from "../../components/order_list/filter_modal.vue";
-import personListItem from "./modules/person_list_item.vue";
+
+import personListItem from "./modules/order_list/person.vue";
+import siteListItem from "./modules/order_list/site.vue";
+import depositListItem from "./modules/order_list/deposit.vue";
+
 import { ORDER_API } from '../../js/api';
 import server from '../../js/server';
 import { showLoad, hideLoad } from '@/utils/util';
@@ -33,7 +43,9 @@ export default {
         'order-list-header': orderListHeader,
         'period-modal': periodModal,
         'filter-modal': filterModal,
-        'person-list-item': personListItem
+        'person-list-item': personListItem,
+        'site-list-item': siteListItem,
+        'deposit-list-item': depositListItem
     },
     async onLoad(options){
         let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
@@ -76,6 +88,9 @@ export default {
 </script>
 
 <style lang="scss">
+    .timekeeping-order-list{
+        @include isPd(20upx);
+    }
     .tol-list{
         padding: 0 24upx;
         .tl-item + .tl-item{