From 949e09327ce97a998fc565f6ccc22978f3f79d82 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 12 Sep 2024 18:23:09 +0800
Subject: [PATCH] add shower order style

---
 src/components/filter/stadium_select.vue           |   5 +-
 src/components/kvs_line.vue                        |  36 +++++
 src/pages.json                                     |  12 ++
 src/subpackage/order/components/kv_line.vue        |  32 ----
 src/subpackage/order/components/kvs_line.vue       |  36 -----
 .../timekeeping/modules/order_list/deposit.vue     |   5 +-
 .../timekeeping/modules/order_list/person.vue      |   5 +-
 .../pages/timekeeping/modules/order_list/site.vue  |   5 +-
 .../pages/timekeeping/order_detail/deposit.vue     |  16 +-
 .../pages/timekeeping/order_detail/person.vue      |  12 +-
 .../order/pages/timekeeping/order_detail/site.vue  |  12 +-
 src/subpackage/shower/pages/card/manage.vue        |   6 +-
 src/subpackage/shower/pages/order/detail.vue       | 140 +++++++++++++++++
 src/subpackage/shower/pages/order/list.vue         | 170 +++++++++++++++++++++
 src/subpackage/shower/static/images/locate.png     | Bin 0 -> 714 bytes
 15 files changed, 392 insertions(+), 100 deletions(-)
 create mode 100644 src/components/kvs_line.vue
 delete mode 100644 src/subpackage/order/components/kv_line.vue
 delete mode 100644 src/subpackage/order/components/kvs_line.vue
 create mode 100644 src/subpackage/shower/pages/order/detail.vue
 create mode 100644 src/subpackage/shower/pages/order/list.vue
 create mode 100644 src/subpackage/shower/static/images/locate.png

diff --git a/src/components/filter/stadium_select.vue b/src/components/filter/stadium_select.vue
index 8bd3de2..fc9132a 100644
--- a/src/components/filter/stadium_select.vue
+++ b/src/components/filter/stadium_select.vue
@@ -3,7 +3,7 @@
         <text class="ss-txt">当前门店</text>
         <picker mode="selector" class="ss-picker" :range="stadiumList" range-key="name" @change="pickerChange"> 
             <view class="ss-frame">
-                <input type="text" disabled class="sf-ipt" :value="curStadium.name || ''"  placeholder="全部"/>
+                <input type="text" disabled class="sf-ipt" :value="curStadium.name || ''"  placeholder="选择门店"/>
                 <image class="sf-img" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
             </view> 
         </picker>
@@ -38,8 +38,7 @@ export default {
         async initStadiums({ brand_id, stadium_id }){
             if(!brand_id) return;
             let _ls = await this.getStadiumList(brand_id);
-            console.log('initStadiums:', _ls);
-            let _curStadium = _ls.find(e=>e.id === stadium_id);
+            let _curStadium = _ls.find(e=>+e.id === +stadium_id);
             if(_curStadium)this.curStadium = _curStadium;
         },
         // 获取品牌店铺列表
diff --git a/src/components/kvs_line.vue b/src/components/kvs_line.vue
new file mode 100644
index 0000000..25de1f6
--- /dev/null
+++ b/src/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/pages.json b/src/pages.json
index 548efef..6b6ba06 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -934,6 +934,18 @@
 					"style" : {
 						"navigationBarTitleText": "水阀使用详情" 
 					}
+				},
+				{
+					"path": "pages/order/list",
+					"style" : {
+						"navigationBarTitleText": "浴室订单列表" 
+					}
+				},
+				{
+					"path": "pages/order/detail",
+					"style" : {
+						"navigationBarTitleText": "浴室订单详情" 
+					}
 				}
 			]
 		}
diff --git a/src/subpackage/order/components/kv_line.vue b/src/subpackage/order/components/kv_line.vue
deleted file mode 100644
index 7739be3..0000000
--- a/src/subpackage/order/components/kv_line.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <view class="kv-line">
-        <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>
-
-<style lang="scss">
-.kv-line{
-    @include ctf;
-    .kl-name{
-        flex-shrink: 0;
-        @include flcw(28upx, 48upx, #9C9C9F);
-    }
-    .kl-val{
-        @include flcw(28upx, 48upx, #1A1A1A);
-        @include tHide;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/subpackage/order/components/kvs_line.vue b/src/subpackage/order/components/kvs_line.vue
deleted file mode 100644
index 25de1f6..0000000
--- a/src/subpackage/order/components/kvs_line.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<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/order_list/deposit.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
index e41c60c..0de99eb 100644
--- a/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import kvLine from "../../../../components/kv_line.vue";
+import kvLine from "@/components/kv_line.vue";
 import listItemTemp from "./item_temp.vue";
 import { routeTo } from '@/utils/util';
 export default {
@@ -49,8 +49,9 @@ export default {
     .lc-info{
         padding-top: 12upx;
         .li-icon{
+            display: block;
             margin-left: auto;
-            flex-shrink: 0;
+            margin-right: 0;
             width: 32upx;
             height: 32upx;
         }
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
index c1e25a0..e6402a2 100644
--- a/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import kvLine from "../../../../components/kv_line.vue";
+import kvLine from "@/components/kv_line.vue";
 import listItemTemp from "./item_temp.vue";
 import { routeTo } from '@/utils/util';
 export default {
@@ -62,8 +62,9 @@ export default {
     .lc-info{
         padding-top: 12upx;
         .li-icon{
+            display: block;
             margin-left: auto;
-            flex-shrink: 0;
+            margin-right: 0;
             width: 32upx;
             height: 32upx;
         }
diff --git a/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue b/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
index 03ebd2d..af06ba3 100644
--- a/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
+++ b/src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import kvLine from "../../../../components/kv_line.vue";
+import kvLine from "@/components/kv_line.vue";
 import listItemTemp from "./item_temp.vue";
 import { routeTo } from '@/utils/util';
 export default {
@@ -69,8 +69,9 @@ export default {
     .lc-info{
         padding-top: 12upx;
         .li-icon{
+            display: block;
             margin-left: auto;
-            flex-shrink: 0;
+            margin-right: 0;
             width: 32upx;
             height: 32upx;
         }
diff --git a/src/subpackage/order/pages/timekeeping/order_detail/deposit.vue b/src/subpackage/order/pages/timekeeping/order_detail/deposit.vue
index 5553719..7fab5b4 100644
--- a/src/subpackage/order/pages/timekeeping/order_detail/deposit.vue
+++ b/src/subpackage/order/pages/timekeeping/order_detail/deposit.vue
@@ -7,7 +7,7 @@
             <kv-line label="订单编号：">
                 <template v-slot:default>{{ orderInfo.order_no || '-' }}</template>
                 <template v-slot:right>
-                    <text class="dod-status">{{ orderInfo.status_text || '-' }}</text>
+                    <view class="dod-status">{{ orderInfo.status_text || '-' }}</view>
                 </template>
             </kv-line>
             <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
@@ -38,7 +38,7 @@
             <kv-line label="押金订单号：">
                 <template v-slot:default>{{ link_order.order_no || '-' }}</template>
                 <template v-slot:right>
-                    <text class="od-check" @click="toTimingOrder">查看计时订单</text>
+                    <view class="od-check" @click="toTimingOrder">查看计时订单</view>
                 </template>
             </kv-line>
             <kv-line label="押金金额：">￥{{ orderInfo.amount || '-' }}</kv-line>
@@ -84,8 +84,8 @@
 <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";
+import kvLine from "@/components/kv_line.vue";
+import kvsLine from "@/components/kvs_line.vue";
 
 import bottomFixed from "../modules/order_detail/bottom_fixed.vue";
 import refundButton from "@/components/order_refund/permission_btn.vue";
@@ -179,8 +179,8 @@ export default {
 .deposit-order-detail{
     padding: 24upx;
     .dod-status{
-        margin-left: auto;
-        flex-shrink: 0;
+        margin-left: 10upx;
+        text-align: right;
         @include flcw(28upx, 40upx, #9C9C9F);
     }
 
@@ -203,8 +203,8 @@ export default {
         }
     }
     .od-check{
-        margin-left: auto;
-        flex-shrink: 0;
+        margin-left: 10upx;
+        text-align: right;
         @include flcw(24upx, 40upx, $mColor);
     }
 }
diff --git a/src/subpackage/order/pages/timekeeping/order_detail/person.vue b/src/subpackage/order/pages/timekeeping/order_detail/person.vue
index 89c54dd..9bd3b3d 100644
--- a/src/subpackage/order/pages/timekeeping/order_detail/person.vue
+++ b/src/subpackage/order/pages/timekeeping/order_detail/person.vue
@@ -7,10 +7,10 @@
             <kv-line label="订单编号：">
                 <template v-slot:default>{{ orderInfo.order_no || '-' }}</template>
                 <template v-slot:right>
-                    <text 
+                    <view 
                         class="pod-status"
                         :class="{ active: [ '计费中', '待支付' ].includes(orderInfo.status_text) }"
-                    >{{ orderInfo.status_text || '-' }}</text>
+                    >{{ orderInfo.status_text || '-' }}</view>
                 </template>
             </kv-line>
             <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
@@ -98,8 +98,8 @@
 <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";
+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";
@@ -232,8 +232,8 @@ export default {
     .person-order-detail{
         padding: 24upx;
         .pod-status{
-            margin-left: auto;
-            flex-shrink: 0;
+            margin-left: 10upx;
+            text-align: right;
             @include flcw(28upx, 40upx, #9C9C9F);
             &.active{
                 color: $mColor;
diff --git a/src/subpackage/order/pages/timekeeping/order_detail/site.vue b/src/subpackage/order/pages/timekeeping/order_detail/site.vue
index 8d9d7b9..1215a54 100644
--- a/src/subpackage/order/pages/timekeeping/order_detail/site.vue
+++ b/src/subpackage/order/pages/timekeeping/order_detail/site.vue
@@ -7,10 +7,10 @@
             <kv-line label="订单编号：">
                 <template v-slot:default>{{ orderInfo.order_no || '-' }}</template>
                 <template v-slot:right>
-                    <text 
+                    <view 
                         class="od-status"
                         :class="[ '待使用', '使用中', '待支付', '计费中' ].includes(orderInfo.status_text) ? 'active' : ''"
-                    >{{ orderInfo.status_text || '-' }}</text>
+                    >{{ orderInfo.status_text || '-' }}</view>
                 </template>
             </kv-line>
             <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
@@ -172,8 +172,8 @@
 */
 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 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 refundButton from "@/components/order_refund/permission_btn.vue";
@@ -335,8 +335,8 @@ export default {
     .site-order-detail{
         padding: 24upx;
         .od-status{
-            margin-left: auto;
-            flex-shrink: 0;
+            margin-left: 10upx;
+            text-align: right;
             @include flcw(28upx, 40upx, #9C9C9F);
             &.active{
                 color: $mColor;
diff --git a/src/subpackage/shower/pages/card/manage.vue b/src/subpackage/shower/pages/card/manage.vue
index dd87a2e..0bd3fa1 100644
--- a/src/subpackage/shower/pages/card/manage.vue
+++ b/src/subpackage/shower/pages/card/manage.vue
@@ -66,8 +66,8 @@ export default {
             brand_id: '',
             condition: {
                 stadium_id: '', // 场馆id
-                start_time: '2020-08-20',
-                end_time: '2025-08-20',
+                start_time: '',
+                end_time: '',
                 status: '', // 0: 未激活 1: 已激活 
             },
             cardOrderList: [],
@@ -81,7 +81,7 @@ export default {
     onLoad(options){
         let _bid = options?.brand_id || '';
         this.brand_id = _bid;
-        this.$refs.orderFilter.initStadiumSelect(_bid);
+        this.$refs.orderFilter.initStadiumSelect({ brand_id: _bid });
         // this.getCardList({ brand_id: _bid });
         this.initDate(); // watch 监听触发
     },
diff --git a/src/subpackage/shower/pages/order/detail.vue b/src/subpackage/shower/pages/order/detail.vue
new file mode 100644
index 0000000..2987af1
--- /dev/null
+++ b/src/subpackage/shower/pages/order/detail.vue
@@ -0,0 +1,140 @@
+<template>
+    <view class="order-detail">
+        <view class="od-header">
+            <view class="oh-stadium">
+                <image class="os-img"></image>
+                <view class="os-name">欧轩智能场馆(羽毛球永泰店)</view>
+            </view>
+            <view class="oh-bot">
+                <kv-line label="手机号码：">
+                    <template slot="default">13800138000</template>
+                    <template slot="right">
+                        <view class="ob-status">交易完成</view>
+                    </template>
+                </kv-line>
+                <kv-line label="用户昵称：">yiming</kv-line>
+            </view>
+        </view>
+
+        <view class="od-goods">
+            <view class="og-tit">商品详情</view>
+            <view class="og-lines">
+                <kv-line label="名称：">沐浴</kv-line>
+                <kv-line label="时长：">10分钟</kv-line>
+                <kv-line label="价格：">￥4</kv-line>
+            </view>
+        </view>
+
+        <view class="od-price-info">
+            <kvs-line label="金额小计">¥4</kvs-line>
+            <kvs-line label="积分抵扣">-¥0.5</kvs-line>
+            <kvs-line label="折扣金额">-¥0</kvs-line>
+            <kvs-line label="优惠券优惠">-¥0</kvs-line>
+            <view class="opi-total">
+                合计支付：<text class="ot-num">￥3.5</text>
+            </view>
+        </view>
+
+        <view class="od-pay-info">
+            <view class="opi-tit">支付详情</view>
+            <view class="opi-lines">
+                <kv-line label="订单编号：">
+                    <template slot="default">sc20 0822 0815 6894</template>
+                    <template slot="right">
+                        <view class="ob-copy">复制</view>
+                    </template>
+                </kv-line>
+                <kv-line label="支付方式：">微信支付</kv-line>
+                <kv-line label="支付时间：">2020-08-22 10:12:25</kv-line>
+                <kv-line label="交易流水号：">202009181255364564612622</kv-line>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import kv_line from "@/components/kv_line.vue";
+import kvs_line from "@/components/kvs_line.vue";
+export default {
+    components: {
+        'kv-line': kv_line,
+        'kvs-line': kvs_line,
+
+    }
+}
+</script>
+
+<style lang="scss">
+    .order-detail{
+        .od-header{
+            padding: 0 24upx;
+            background: #fff;
+            .oh-stadium{
+                padding: 24upx 0;
+                border-bottom: 1px solid #D8D8D8;
+                @include ctf;
+                .os-img{
+                    flex-shrink: 0;
+                    margin-right: 14upx;
+                    width: 40upx;
+                    height: 40upx;
+                    background: skyblue;
+                }
+                .os-name{
+                    @include flcw(28upx, 40upx, #1A1A1A, 500);
+                    @include tHide;
+                }
+            }
+            .oh-bot{
+                padding-top: 24upx;
+                padding-bottom: 30upx;
+                .ob-status{
+                    text-align: right;
+                    @include flcw(28upx, 40upx, #9A9A9D);
+                }
+            }
+        }
+        .od-goods{
+            margin-top: 24upx;
+            padding: 20upx 24upx 0;
+            background: #fff;
+            
+            .opi-tit{
+                @include flcw(32upx, 44upx, #1A1A1A);
+            }
+            .og-lines{
+                margin-top: 28upx;
+                padding-bottom: 30upx;
+                border-bottom: 1px solid #D8D8D8;
+            }
+
+        }
+        .od-price-info{
+            padding: 30upx;
+            background: #fff;
+            .opi-total{
+                text-align: right;
+                @include flcw(28upx, 50upx, #9A9A9D);
+                .ot-num{
+                    color: #1A1A1A;
+                    font-weight: 500;
+                }
+            }
+        }
+        .od-pay-info{
+            margin-top: 24upx;
+            padding: 30upx 24upx;
+            background: #fff;
+            .opi-tit{
+                @include flcw(32upx, 44upx, #1A1A1A);
+            }
+            .opi-lines{
+                margin-top: 16upx;
+                .ob-copy{
+                    margin-left: 20upx;
+                    @include flcw(28upx, 40upx, $mColor);
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/order/list.vue b/src/subpackage/shower/pages/order/list.vue
new file mode 100644
index 0000000..ff52db4
--- /dev/null
+++ b/src/subpackage/shower/pages/order/list.vue
@@ -0,0 +1,170 @@
+<template>
+    <view class="order-list">
+
+        <order-filter 
+            ref="orderFilter"
+            @change:stadium="condition.stadium_id = $event.id"
+            @click:time="showPeriodModal"
+            @click:filter="showFilterModal"
+            :start-time="condition.start_time"
+            :end-time="condition.end_time"
+        ></order-filter>
+
+        <view class="ol-ls">
+            <view class="ol-item" v-for="i in 10" :key="i" @click="itemClick">
+                <view class="oi-header">
+                    <view class="oh-top">
+                        <view class="ot-name">广州欧轩智能羽毛球馆(永泰店)</view>
+                        <view class="ot-status">交易成功</view>
+                    </view>
+                    <view class="oh-device-name">
+                        <image class="odn-img" mode="aspectFit" src="/subpackage/shower/static/images/locate.png"></image>
+                        <view class="odn-txt">1号女沐浴间</view>
+                    </view>
+                </view>
+                <view class="oi-lines">
+                    <kv-line label="订单编号：">sc20 0822 0815 6894</kv-line>
+                    <kv-line label="名称：">豆奶</kv-line>
+                    <kv-line label="时长：">10分钟</kv-line>
+                    <kv-line label="购买时间：">2020-08-22   10:30:40</kv-line>
+                </view>
+                <view class="oi-total">
+                    合计支付：<text class="ot-price">¥2</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 时间段选择 -->
+        <period-modal ref="periodModal"></period-modal>
+        <!-- status窗口 -->
+        <filter-modal ref="filterModal"></filter-modal>
+    </view>
+</template>
+
+<script>
+import orderFilter from "@/components/filter/header.vue";
+import periodModal from "@/components/filter/period_modal.vue";
+import filterModal from "@/components/filter/filter_modal.vue";
+
+import kv_line from "@/components/kv_line.vue";
+import { routeTo, formatDate } from "@/utils/util";
+export default {
+    components: {
+        'order-filter': orderFilter,
+        'period-modal': periodModal,
+        'filter-modal': filterModal,
+        'kv-line': kv_line
+    },
+    data(){
+        return {
+            condition: {
+                stadium_id: '',
+                start_time: '',
+                end_time: '',
+            }
+        }
+    },
+    onLoad(options){
+        this.$refs.orderFilter.initStadiumSelect({ brand_id: options?.brand_id });
+        this.initDate(); // watch 监听触发
+    },
+    methods: {
+        itemClick(){
+            routeTo(`/subpackage/shower/pages/order/detail`, 'nT');
+        },
+        // 默认显示三个月内的水阀卡数据
+        initDate(){
+            let _Date = new Date();
+            let _timeStamp = _Date.getTime();
+            let _start = _timeStamp - 90 * 24 * 60 * 60 * 1000;
+            this.condition.start_time = formatDate({ date: _start });
+            this.condition.end_time = formatDate({ date: _timeStamp });
+        },
+        // 时间段选择
+        showPeriodModal(){
+            let { start_time, end_time } = this.condition;
+            this.$refs.periodModal.init({
+                start: start_time,
+                end: end_time,
+                success: res=>{
+                    this.condition.start_time = res.start;
+                    this.condition.end_time = res.end;
+                }
+            });
+        },
+        // 订单状态筛选
+        showFilterModal(){
+            this.$refs.filterModal.init({
+                title: '订单状态',
+                list: [
+                    { label: '全部', value: '' },
+                    { label: '已完成', value: '1' },
+                    { label: '已退款', value: '0' },
+                ],
+                curValue: this.condition.status,
+                success: res=>{
+                    this.condition.status = res.value;
+                }
+            });
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+    .order-list{
+        
+    }
+    .ol-ls{
+        padding: 24upx;
+        .ol-item{
+            padding: 30upx 20upx;
+            border-radius: 10upx;
+            background: #fff;
+            &+.ol-item{
+                margin-top: 24upx;
+            }
+            .oi-header{
+                padding-bottom: 20upx;
+                border-bottom: 1px solid #D8D8D8;
+                .oh-top{
+                    @include ctf(space-between);
+                    .ot-name{
+                        @include flcw(28upx, 40upx, #1A1A1A, 500);
+                        @include tHide;
+                    }
+                    .ot-status{
+                        margin-left: 10upx;
+                        flex-shrink: 0;
+                        @include flcw(28upx, 40upx, #9A9A9D);
+                    }
+                }
+                .oh-device-name{
+                    margin-top: 10upx;
+                    @include ctf;
+                    .odn-img{
+                        margin-right: 12upx;
+                        flex-shrink: 0;
+                        width: 28upx;
+                        height: 28upx;
+                    }
+                    .odn-txt{
+                        @include flcw(28upx, 40upx, #9A9A9D);
+                        @include tHide;
+                    }
+                }
+            }
+            .oi-lines{
+                padding-top: 20upx;
+            }
+            .oi-total{
+                text-align: right;
+                @include flcw(28upx, 40upx, #9A9A9D);
+                .ot-price{
+                    font-weight: 500;
+                    color: #333333;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/static/images/locate.png b/src/subpackage/shower/static/images/locate.png
new file mode 100644
index 0000000000000000000000000000000000000000..de596fdec465396ba41cc8e6db3df6cd8828148f
GIT binary patch
literal 714
zcmV;*0yX`KP)<h;3K|Lk000e1NJLTq000~S000~a1ONa4*aR0J00001b5ch_0Itp)
z=>Px%gh@m}RCwCWlwC+uVI0Pv|2a!b%Q=-)h=}Y1F(gD2EHW@}?Mm;8Y?Sk>i@@q4
zWwGeSpfA~W6qTYNyh{V`g31u7NGz`kyosTy$GKr+y7T^<>oq)cOS|)TZVtTs-sj={
zA|%0S$+4zp0JQic;EZ4cgal}5e41*-0YpUvcuF0>NW-s9#HZ<@YTOlt5EKv#fMVke
zC^X48mDlTK3rsM1u2VCz@lEYsnNW3rvXo+@fs4?OM{sRSlogE|)B&B^)1F*d!e4s#
ztX$;Vuqho&_pXHyLowx5QxoQuThm^tN$kNaH#)E&T6a~M6J;JgibAx`xSawU7*OY0
z={~+>m)C{j5~(t(eNXRCqycqCq>ra?%zrYjs?#EBA;_~<vM1N;^7uSHud62)F|Gy_
z4KV5kRMV>Nw}lVFuS`H<v~U|z0d6yZcEsRuTI7O&75ciwkQEuwjd@7e9@SP!WjiE1
z$2zRbnWn0w!UBU0`~wmYP*^dEMi2p5qo0I&5ymRv=$|Au9!v?E#N9g2AcqPdQM;%U
zKKQ6p?Se!(1RJJ9{<wYg)^i`;&Qv)g$?i+;8&uGF$FsP7OnC(z6?v6NLf%=FV>U7j
z#EF+?aR)2Ht(`&wJZJbZmdVvJZxSWXX_yZ4LoFY1^z5StD8SJ2izN54KQlbY75Hp%
zT>i8!?F4zbnBMKEu?K-fiKzE;6OW?AaIYOSK+7i&AIAuqrIzgJ&~kW?%lU)Fab+CP
zN`x0Bc)#;py?@g;$6c&+a~X|MjZkQaOEC&Z<5yr)5%BEA5K1vg;G)$D8s>m4iLzoD
wz+-<ZZ%veoB3_c<n#P~_U))E#k6_#I8^0X&|0)%Ns{jB107*qoM6N<$f(S80<p2Nx

literal 0
HcmV?d00001