diff --git a/src/components/kv_line.vue b/src/components/kv_line.vue
index dd1cdc5..19c2dc8 100644
--- a/src/components/kv_line.vue
+++ b/src/components/kv_line.vue
@@ -1,8 +1,10 @@
 <template>
     <view class="kv-line">
         <view class="kl-name" :style="labelStyle">{{ label || '' }}</view>
-        <view class="kl-val"><slot name="default">value</slot></view>
-        <slot name="right"></slot>
+        <view class="kl-val"><slot name="default"></slot></view>
+        <view class="kl-right">
+            <slot name="right"></slot>
+        </view>
     </view>
 </template>
 
@@ -32,5 +34,9 @@ export default {
         @include flcw(28upx, 48upx, #1A1A1A);
         @include tHide;
     }
+    .kl-right{
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 1486b78..522ff4b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -910,6 +910,18 @@
 					"style" : {
 						"navigationBarTitleText": "使用记录" 
 					}
+				},
+				{
+					"path": "pages/device/use_record",
+					"style" : {
+						"navigationBarTitleText": "水阀使用记录" 
+					}
+				},
+				{
+					"path": "pages/device/use_detail",
+					"style" : {
+						"navigationBarTitleText": "水阀使用详情" 
+					}
 				}
 			]
 		}
diff --git a/src/subpackage/shower/components/number_edit.vue b/src/subpackage/shower/components/number_edit.vue
new file mode 100644
index 0000000..edcc564
--- /dev/null
+++ b/src/subpackage/shower/components/number_edit.vue
@@ -0,0 +1,90 @@
+<template>
+    <view class="number-edit">
+        <view class="rpu-number">
+            <view class="rn-name"><text class="red">*</text>{{ label || '' }}</view>
+            <view class="rn-operate">
+                <view class="rn-btn" @click="number--"></view>
+                <input type="number" class="rn-num" v-model="number">
+                <view class="rn-btn" @click="number++"></view>
+            </view>
+            <view class="ne-unit">{{ unit || '' }}</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+            default: ''
+        },
+        unit: {
+            type: String,
+            default: '分钟'
+        }
+    },
+    data(){
+        return {
+            number: 0
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .number-edit{
+        .rpu-number{
+            @include ctf(space-between);
+            .rn-name{
+                @include flcw(28upx, 40upx, #333333);
+                .red{
+                    color: #EA5061;
+                }
+            }
+            .rn-operate{
+                margin-left: auto;
+                margin-right: 0;
+                padding: 2upx;
+                border-radius: 10upx;
+                background: #E8ECEF;
+                @include ctf;
+                .rn-btn{
+                    position: relative;
+                    width: 56upx;
+                    height: 54upx;
+                    &::before, &::after{
+                        content: '';
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                        display: block;
+                        width: 30upx;
+                        height: 4upx;
+                        background: #9A9A9D;
+                        border-radius: 2upx;
+                    }
+                }
+                .rn-num{
+                    margin: 0 2upx;
+                    text-align: center;
+                    height: 54upx;
+                    width: 104upx;
+                    background: #fff;
+                    @include flcw(28upx, 40upx, #333);
+                    &+.rn-btn{
+                        &::after{
+                            transform: translate(-50%, -50%) rotate(90deg);
+                        }
+                    }
+                }
+            }
+            .ne-unit{
+                min-width: 60upx;
+                margin-left: 28upx;
+                @include flcw(28upx, 40upx, #333333);
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/components/popup/deduction.vue b/src/subpackage/shower/components/popup/deduction.vue
new file mode 100644
index 0000000..6e84e0e
--- /dev/null
+++ b/src/subpackage/shower/components/popup/deduction.vue
@@ -0,0 +1,95 @@
+<template>
+    <view class="deduction-popup">
+        <popup-template 
+            title="充值时长" 
+            :show="show"
+        >
+            <view class="rp-container">
+                <kv-line label="水阀卡卡号：">20195171564566</kv-line>
+                <kv-line label="手机号码：">18316466456</kv-line>
+                <kv-line label="可用时长："><text class="rc-orange">100分00秒</text></kv-line>
+                <view class="rc-space"></view>
+                <number-edit  label="扣减时长"></number-edit>
+                <view class="rc-time-select">
+                    <view class="rts-name">开始时间</view>
+                    <picker>
+                        <input disabled type="text" class="rts-ipt" placeholder="开始时间">
+                    </picker>
+                </view>
+                <view class="rc-time-select">
+                    <view class="rts-name">结束时间</view>
+                    <picker>
+                        <input disabled type="text" class="rts-ipt" placeholder="结束时间">
+                    </picker>
+                </view>
+                <textarea class="rc-remark" placeholder="备注（选填）"></textarea>
+                <view class="rc-btn">确认</view>
+            </view>
+        </popup-template>
+    </view>
+</template>
+
+<script>
+import popup_template from "./template.vue";
+import kv_line from "@/components/kv_line.vue";
+import number_edit from "../number_edit.vue";
+export default {
+    components: {
+        'popup-template': popup_template,
+        'kv-line': kv_line,
+        'number-edit': number_edit
+    },
+    data(){
+        return {
+            show: true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .rp-container{
+        padding: 0 60upx;
+        .rc-space{
+            padding-top: 40upx;
+        }
+        .rc-orange{
+            color: #FF873D;
+        }
+        .rc-time-select{
+            margin-top: 40upx;
+            @include ctf(space-between);
+            .rts-name{
+                flex-shrink: 0;
+                @include flcw(28upx, 40upx, #1A1A1A);
+            }
+            .rts-ipt{
+                display: block;
+                box-sizing: border-box;
+                padding: 10upx 30upx;
+                width: 358upx;
+                height: 56upx;
+                border-radius: 10upx;
+                background: #F2F2F7;
+                @include flcw(24upx, 34upx, #333333);
+            }
+        }
+        .rc-remark{
+            width: auto;
+            margin-top: 40upx;
+            padding: 20upx 24upx;
+            height: 144upx;
+            background: #F2F2F7;
+            @include flcw(24upx, 34upx, #333333);
+        }
+        .rc-btn{
+            margin: 64upx auto 0upx;
+            width: 240upx;
+            height: 88upx;
+            text-align: center;
+            border-radius: 10upx;
+            background: $mColor;
+            @include flcw(28upx, 88upx, #fff);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/components/popup/recharge.vue b/src/subpackage/shower/components/popup/recharge.vue
new file mode 100644
index 0000000..1554ea5
--- /dev/null
+++ b/src/subpackage/shower/components/popup/recharge.vue
@@ -0,0 +1,84 @@
+<template>
+    <view class="recharge-popup">
+        <popup-template 
+            title="充值时长" 
+            :show="show"
+        >
+            <view class="rp-container">
+                <kv-line label="水阀卡卡号：">20195171564566</kv-line>
+                <kv-line label="手机号码：">18316466456</kv-line>
+                <kv-line label="可用时长："><text class="rc-orange">100分00秒</text></kv-line>
+                <view class="rc-space"></view>
+                <number-edit label="充值时长"></number-edit>
+                <view class="rc-space"></view>
+                <number-edit label="支付金额" unit="元"></number-edit>
+                <view class="rc-btn">确认</view>
+            </view>
+        </popup-template>
+    </view>
+</template>
+
+<script>
+import popup_template from "./template.vue";
+import kv_line from "@/components/kv_line.vue";
+import number_edit from "../number_edit.vue";
+export default {
+    components: {
+        'popup-template': popup_template,
+        'kv-line': kv_line,
+        'number-edit': number_edit
+    },
+    data(){
+        return {
+            show: true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .rp-container{
+        padding: 0 60upx;
+        .rc-space{
+            padding-top: 40upx;
+        }
+        .rc-orange{
+            color: #FF873D;
+        }
+        .rc-time-select{
+            margin-top: 40upx;
+            @include ctf(space-between);
+            .rts-name{
+                flex-shrink: 0;
+                @include flcw(28upx, 40upx, #1A1A1A);
+            }
+            .rts-ipt{
+                display: block;
+                box-sizing: border-box;
+                padding: 10upx 30upx;
+                width: 358upx;
+                height: 56upx;
+                border-radius: 10upx;
+                background: #F2F2F7;
+                @include flcw(24upx, 34upx, #333333);
+            }
+        }
+        .rc-remark{
+            width: auto;
+            margin-top: 40upx;
+            padding: 20upx 24upx;
+            height: 144upx;
+            background: #F2F2F7;
+            @include flcw(24upx, 34upx, #333333);
+        }
+        .rc-btn{
+            margin: 64upx auto 0upx;
+            width: 240upx;
+            height: 88upx;
+            text-align: center;
+            border-radius: 10upx;
+            background: $mColor;
+            @include flcw(28upx, 88upx, #fff);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/components/popup/template.vue b/src/subpackage/shower/components/popup/template.vue
new file mode 100644
index 0000000..791596b
--- /dev/null
+++ b/src/subpackage/shower/components/popup/template.vue
@@ -0,0 +1,72 @@
+<template>
+    <view class="popup-template" v-show="show">
+        <view class="pt-mask">
+            <view class="pm-container">
+                <image 
+                    class="pc-close" 
+                    mode="aspectFit" 
+                    src="/subpackage/shower/static/images/close.png"
+                    @click="$emit('click:close')"
+                ></image>
+                <view class="pc-title">{{ title }}</view>
+                <view class="pc-content">
+                    <slot></slot>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        show: {
+            type: Boolean,
+            default: false
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+    .pt-mask{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 99;
+        .pm-container{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding-top: 44upx;
+            padding-bottom: 48upx;
+            width: 640upx;
+            background: #fff;
+            border-radius: 10upx;
+            .pc-close{
+                position: absolute;
+                top: 24upx;
+                right: 24upx;
+                width: 34upx;
+                height: 34upx;
+            }
+            .pc-title{
+                padding: 0 30upx;
+                text-align: center;
+                @include flcw(32upx, 44upx, #333, 500);
+                @include tHide;
+            }
+            .pc-content{
+                padding-top: 24upx;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/js/api.js b/src/subpackage/shower/js/api.js
new file mode 100644
index 0000000..5886ee0
--- /dev/null
+++ b/src/subpackage/shower/js/api.js
@@ -0,0 +1,12 @@
+import { ORIGIN } from '../../../js/api';
+
+export const SHOWER_API = { 
+	CardList:`${ORIGIN}/admin/stadiumWaterCard/list`,  //  后台-水卡-列表
+	CardDetails:`${ORIGIN}/admin/stadiumWaterCard/details`,  //  后台-水卡-详情
+	CardRecharge:`${ORIGIN}/admin/stadiumWaterCard/recharge`,  //  后台-水卡-充值
+	CardFeeDeduction:`${ORIGIN}/admin/stadiumWaterCard/feeDeduction`,  //  后台-水卡-扣费
+	// CardList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水卡使用记录-列表
+	// CardListOfCard:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`,  //  后台-水卡使用记录-（某张水卡的）列表
+}
+
+export default SHOWER_API;
\ No newline at end of file
diff --git a/src/subpackage/shower/js/server.js b/src/subpackage/shower/js/server.js
new file mode 100644
index 0000000..9245726
--- /dev/null
+++ b/src/subpackage/shower/js/server.js
@@ -0,0 +1,10 @@
+import { Server } from '../../../js/server';
+
+class DeviceServer extends Server {
+    constructor(props){
+        super(props)
+    }
+}
+
+
+export default new DeviceServer();
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/card/detail.vue b/src/subpackage/shower/pages/card/detail.vue
index 500f30d..5bc0f2c 100644
--- a/src/subpackage/shower/pages/card/detail.vue
+++ b/src/subpackage/shower/pages/card/detail.vue
@@ -25,15 +25,56 @@
                 <kv-line label="途径：">小程序</kv-line>
             </view>
         </view>
+
+        <recharge-popup v-if="false"></recharge-popup>
+        <deduction-popup v-if="false"></deduction-popup>
     </view>
 </template>
 
 <script>
 import kv_line from "@/components/kv_line.vue";
+import rechargePopup from "../../components/popup/recharge.vue";
+import deductionPopup from "../../components/popup/deduction.vue";
+
+import { SHOWER_API } from "../../js/api";
+import server from "../../js/server";
+import { routeTo, showLoad, hideLoad, showNone, formatDate } from "@/utils/util";
 export default {
     components: {
-        'kv-line': kv_line
+        'kv-line': kv_line,
+        'recharge-popup': rechargePopup,
+        'deduction-popup': deductionPopup
+    },
+    data(){
+        return {
+            cardInfo: {}
+        }
     },
+    onLoad(){
+
+    },
+    methods: {
+        getCardInfo({
+            id = '', brand_id = ''
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.CardDetails,
+                data: { brand_id, id },
+                failMsg: '获取用水卡信息失败'
+            })
+            .then(res => {
+                hideLoad();
+                this.cardInfo = res || {};
+                
+            })
+            .catch(err => {
+                hideLoad();
+                console.warn('recharge_record getWaterCardOrderList err --->', err);
+                // return Promise.reject(err);
+            })
+        },
+    }
 }
 </script>
 
diff --git a/src/subpackage/shower/pages/card/manage.vue b/src/subpackage/shower/pages/card/manage.vue
index 15f4058..99c70fd 100644
--- a/src/subpackage/shower/pages/card/manage.vue
+++ b/src/subpackage/shower/pages/card/manage.vue
@@ -2,23 +2,24 @@
     <view class="card-manage">
         <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="cm-list">
-            <view class="cl-item" v-for="(e, i) in 10" :key="i">
+            <view class="cl-item" v-for="(e, i) in cardOrderList" :key="i" @click="toDetail(e)">
                 <view class="ci-bar">
-                    <view class="cb-name">欧轩智能羽毛球馆(永泰店)</view>
-                    <view class="cb-status">使用中</view>
+                    <view class="cb-name">{{ e.stadium_name || '-' }}</view>
+                    <view class="cb-status">{{ e.status_text || '' }}</view>
                 </view>
                 <view class="ci-lines">
-                    <kv-line label="卡名称：">智能浴室用水卡</kv-line>
-                    <kv-line label="水阀卡号：">20195171564566</kv-line>
-                    <kv-line label="手机号码：">18316553478</kv-line>
-                    <kv-line label="微信昵称：">yiming</kv-line>
-                    <kv-line label="可用时长："><text class="cl-txt">100分00秒</text></kv-line>
+                    <kv-line label="卡名称：">{{ e.water_card_no || '-' }}</kv-line>
+                    <kv-line label="水阀卡号：">{{ e.water_card_name || '-' }}</kv-line>
+                    <kv-line label="手机号码：">{{ e.mobile || '-' }}</kv-line>
+                    <kv-line label="微信昵称：">{{ e.nick_name || '-' }}</kv-line>
+                    <kv-line label="可用时长："><text class="cl-txt">{{ e.valid_duration_text || '-' }}</text></kv-line>
                 </view>
             </view>
         </view>
@@ -36,6 +37,9 @@ 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 { SHOWER_API } from "../../js/api";
+import server from "../../js/server";
+import { routeTo, showLoad, hideLoad, showNone, formatDate } from "@/utils/util";
 export default {
     components: {
         'order-filter': orderFilter,
@@ -43,18 +47,56 @@ export default {
         'filter-modal': filterModal,
         'kv-line': kv_line
     },
+    watch: {
+        condition: {
+            handler(nVal, oVal){
+                this.cardOrderList = [];
+                this.page = 1;
+                let { brand_id } = this;
+                this.getCardList({
+                    brand_id: brand_id || '',
+                    ...nVal,
+                })
+            },
+            deep: true
+        }
+    },  
     data(){
         return {
+            brand_id: '',
             condition: {
-                start_time: '2024-08-20',
-                end_time: '2024-08-20',
-            }
+                stadium_id: '', // 场馆id
+                start_time: '2020-08-20',
+                end_time: '2025-08-20',
+                status: '', // 0: 未激活 1: 已激活 
+            },
+            cardOrderList: [],
+            page: 1
         }
     },
+    onReachBottom(){
+        let { brand_id, condition, page } = this;
+        this.getCardList({ brand_id, page: ++page, ...condition });
+    },
     onLoad(options){
-        this.$refs.orderFilter.initStadiumSelect(options?.brand_id);
+        let _bid = options?.brand_id || '';
+        this.brand_id = _bid;
+        this.$refs.orderFilter.initStadiumSelect(_bid);
+        // this.getCardList({ brand_id: _bid });
+        this.initDate(); // watch 监听触发
     },
     methods: {
+        toDetail(e){
+            routeTo(`/subpackage/shower/pages/card/detail?id=${e?.id || ''}`, '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({
@@ -67,8 +109,48 @@ export default {
             });
         },
         showFilterModal(){
-            this.$refs.filterModal.show();
-        }
+            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;
+                }
+            });
+        },
+        /**
+         * @param {String} number 卡号或者手机号
+         * */ 
+        getCardList({ 
+            brand_id = '', stadium_id = '', 
+            start_time = '', end_time = '', number = '', status = '',
+            page = 1, page_size = 10 
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.CardList,
+                data: { brand_id, stadium_id, start_time, end_time, number, status, page, page_size },
+                failMsg: '获取用水卡列表失败'
+            })
+            .then(res => {
+                hideLoad();
+                let _ls = res?.list || [];
+                if(page === 1)return this.cardOrderList = _ls;
+                if(!_ls.length)return showNone('没有更多！');
+                this.page = page;
+                return this.cardOrderList = [...this.cardOrderList, ..._ls];
+                
+            })
+            .catch(err => {
+                hideLoad();
+                console.warn('manage getCardList err --->', err);
+                // return Promise.reject(err);
+            })
+        },
     }
 }
 </script>
diff --git a/src/subpackage/shower/pages/card/use_record.vue b/src/subpackage/shower/pages/card/use_record.vue
index 970076b..08170ef 100644
--- a/src/subpackage/shower/pages/card/use_record.vue
+++ b/src/subpackage/shower/pages/card/use_record.vue
@@ -2,22 +2,111 @@
     <view class="use-record">
         <time-range></time-range>
         <view class="ur-list">
-            9989
+            <view class="ul-item" v-for="(e, i) in recordList" :key="i">
+                <view class="ui-tit-bar">
+                    <view class="utb-tit" v-if="e.type === 0">消费时长</view>
+                    <view class="utb-tit" v-if="e.type === 1">充值时长</view>
+                    <view class="utb-right">
+                        <view class="ur-time" v-if="e.status === 0">正在计时</view>
+                        <block v-if="(e.type === 0&&e.status === 1) || e.type === 1">
+                            <view class="ur-time" v-if="e.type === 0">-{{ e.deduction_duration || '-' }}</view>
+                            <view class="ur-time orange" v-if="e.type === 1">+{{ e.recharge_duration || '-' }}分钟</view>
+                            <view class="ur-surplus">剩余：{{ e.total_duration_text || '-' }}</view>
+                        </block>
+                    </view>
+                </view>
+                <view class="ui-lines">
+                    <kv-line label="门店名称：">{{ e.stadium_name || '-' }}</kv-line>
+                    <kv-line label="开始时间：">{{ e.start_time || '-' }}</kv-line>
+                    <block v-if="e.type === 0">
+                        <kv-line label="设备名称：">{{ e.hardware_name || '-' }}</kv-line>
+                        <kv-line label="结束时间：">{{ e.end_time || '-' }}</kv-line>
+                        <kv-line label="时长合计：">{{ e.settle_duration_text || '-' }}</kv-line>
+                    </block>
+                </view>
+            </view>
+            
         </view>
     </view>
 </template>
 
 <script>
 import time_range from "../../components/time_range.vue";
+import kv_line from "@/components/kv_line.vue";
 export default {
     components: {
-        'time-range': time_range
+        'time-range': time_range,
+        'kv-line': kv_line
     },
+    data(){
+        return {
+            recordList: [
+                {
+                    type: 0,
+                    status: 0,
+                    stadium_name: '欧轩智能场馆(永泰店)',
+                    start_time: '2020-05-23 13:25',
+                    hardware_name: '智能浴室用水卡',
+                    end_time: '2020-05-23 13:25',
+                    deduction_duration: 100,
+                    settle_duration_text: '100分钟',
+                    total_duration_text: '100分钟'
+                },
+                {
+                    type: 1,
+                    status: 1,
+                    stadium_name: '欧轩智能场馆(永泰店)',
+                    start_time: '2020-05-23 13:25',
+                    recharge_duration: 100,
+                    total_duration_text: '100分钟'
+                }
+            ]
+        }
+    }
 }
 </script>
 
 <style lang="scss">
     .use-record{
-        
+        .ur-list{
+            padding: 24upx;
+            @include isPd(24upx);
+            .ul-item{
+                padding: 0 20upx;
+                background: #fff;
+                border-radius: 10upx;
+                &+.ul-item{
+                    margin-top: 24upx;
+                }
+            }
+            .ui-tit-bar{
+                padding: 16upx 0upx;
+                @include ctf(space-between);
+                .utb-tit{
+                    flex-shrink: 0;
+                    @include flcw(28upx, 40upx, #1A1A1A, 500);
+                }
+                .utb-right{
+                    .ur-time{
+                        text-align: right;
+                        @include flcw(28upx, 40upx, $mColor);
+                        @include tHide;
+                        &.orange{
+                            color: #FF873D;
+                        }
+                    }
+                    .ur-surplus{
+                        text-align: right;
+                        @include tHide;
+                        @include flcw(20upx, 28upx, #9C9C9F);
+                    }
+                }
+            }
+            .ui-lines{
+                padding-top: 10upx;
+                padding-bottom: 30upx;
+                border-top: 1px solid #D8D8D8;
+            }
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/device/use_detail.vue b/src/subpackage/shower/pages/device/use_detail.vue
new file mode 100644
index 0000000..74d609f
--- /dev/null
+++ b/src/subpackage/shower/pages/device/use_detail.vue
@@ -0,0 +1,106 @@
+<template>
+    <view class="use-detail">
+        <view class="ud-box">
+            <view class="ub-stadium">
+                <image class="us-logo"></image>
+                <view class="us-name">欧轩智能羽毛球馆(永泰店)</view>
+            </view>
+            <view class="ub-lines">
+                <kv-line label="创建时间：">
+                    <template slot="default">2019-05-17 11:12:58</template>
+                    <template slot="right">
+                        <view class="ul-status">已完成</view>
+                    </template>
+                </kv-line>
+                <kv-line label="手机号码：">18656456895</kv-line>
+                <kv-line label="用户昵称：">yiming</kv-line>
+                <kv-line label="结束计时方式：">小程序(欧轩智能场馆)</kv-line>
+            </view>
+        </view>
+        <view class="ud-box">
+            <kv-line label="计时信息"></kv-line>
+            <view class="ub-lines">
+                <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="时长合计：">35分9秒(免费时长:15分00秒)</kv-line>
+                <kv-line label="免费时长：">15分00秒</kv-line>
+            </view>
+            <view class="ui-deduction">
+                <text class="ud-txt">扣减时长：</text>20分钟00秒
+            </view>
+            <view class="ui-btn">结束计时</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import kv_line from "@/components/kv_line.vue";
+export default {
+    components: {
+        'kv-line': kv_line,
+    },
+}
+</script>
+
+<style lang="scss">
+    .use-detail{
+        padding: 24upx;
+        @include isPd(24upx);
+        .ud-box{
+            padding: 30upx;
+            background: #fff;
+            border-radius: 10upx;
+            &+.ud-box{
+                margin-top: 24upx;
+            }
+        }
+        .ub-stadium{
+            @include ctf;
+            padding-bottom: 26upx;
+            border-bottom: 1px solid #D8D8D8;
+            .us-logo{
+                margin-right: 14upx;
+                flex-shrink: 0;
+                width: 40upx;
+                height: 40upx;
+            }
+            .us-name{
+                margin-left: 20upx;
+                font-size: 28upx;
+                color: #333333;
+                @include tHide;
+                @include flcw(28upx, 40upx, #333333, 500);
+            }
+        }
+        .ub-lines{
+            padding-top: 24upx;
+            .ul-status{
+                text-align: right;
+                @include flcw(28upx, 40upx, #9C9C9F);
+            }
+        }
+
+        .ui-deduction{
+            margin-top: 30upx;
+            padding-top: 24upx;
+            text-align: right;
+            border-top: 1upx solid #D8D8D8;
+            @include flcw(28upx, 40upx, $mColor);
+            @include tHide;
+            .ud-txt{
+                color: #9C9C9F;
+            }
+        }
+
+        .ui-btn{
+            margin: 10upx 0upx 0upx auto;
+            width: 192upx;
+            height: 80upx;
+            text-align: center;
+            border-radius: 10upx;
+            background: $mColor;
+            @include flcw(32upx, 80upx, #fff);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/device/use_record.vue b/src/subpackage/shower/pages/device/use_record.vue
new file mode 100644
index 0000000..e1d732c
--- /dev/null
+++ b/src/subpackage/shower/pages/device/use_record.vue
@@ -0,0 +1,130 @@
+<template>
+    <view class="use-record">
+        <order-filter 
+            ref="orderFilter"
+            @click:time="showPeriodModal"
+            @click:filter="showFilterModal"
+            :start-time="condition.start_time"
+            :end-time="condition.end_time"
+        ></order-filter>
+        <view class="ur-list">
+            <view class="ul-item" v-for="i in 10" :key="i">
+                <view class="ui-bar">
+                    <view class="ub-name">欧轩智能羽毛球馆(永泰店)</view>
+                    <image class="ub-icon" mode="aspectFit" src="/subpackage/shower/static/images/arrow.png"></image>
+                </view>
+                <view class="ui-lines">
+                    <kv-line label="设备名称：">1号水阀</kv-line>
+                    <kv-line label="时长合计：">1小时58分46秒</kv-line>
+                    <kv-line label="手机号码：">18656456895</kv-line>
+                    <kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
+                </view>
+                <view class="ui-deduction">
+                    <text class="ud-txt">扣减时长：</text>20分钟00秒
+                </view>
+                <view class="ui-btn">结束计时</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";
+export default {
+    components: {
+        'order-filter': orderFilter,
+        'period-modal': periodModal,
+        'filter-modal': filterModal,
+        'kv-line': kv_line
+    },
+    data(){
+        return {
+            condition: {
+                start_time: '2024-08-20',
+                end_time: '2024-08-20',
+            }
+        }
+    },
+    onLoad(options){
+        this.$refs.orderFilter.initStadiumSelect(options?.brand_id);
+    },
+    methods: {
+        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.show();
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .use-record{
+        .ur-list{
+            padding: 24upx;
+            @include isPd(24upx);
+            .ul-item{
+                padding: 0upx 20upx 30upx;
+                border-radius: 10upx;
+                background: #fff;
+                &+.ul-item{
+                    margin-top: 24upx;
+                }
+                .ui-bar{
+                    padding: 30upx 0upx;
+                    border-bottom: 1upx solid #D8D8D8;
+                    @include ctf(space-between);
+                    .ub-name{
+                        @include flcw(28upx, 40upx, #1A1A1A, 500);
+                        @include tHide;
+                    }
+                    .ub-icon{
+                        margin-left: 12upx;
+                        flex-shrink: 0;
+                        width: 28upx;
+                        height: 28upx;
+                    }
+                }
+                .ui-lines{
+                    padding-top: 14upx;
+                }
+                .ui-deduction{
+                    margin-top: 30upx;
+                    padding-top: 24upx;
+                    text-align: right;
+                    border-top: 1upx solid #D8D8D8;
+                    @include flcw(28upx, 40upx, #1A1A1A);
+                    @include tHide;
+                    .ud-txt{
+                        color: #9C9C9F;
+                    }
+                }
+                .ui-btn{
+                    margin: 10upx 0upx 0upx auto;
+                    width: 192upx;
+                    height: 80upx;
+                    text-align: center;
+                    border-radius: 10upx;
+                    background: $mColor;
+                    @include flcw(32upx, 80upx, #fff);
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/static/images/arrow.png b/src/subpackage/shower/static/images/arrow.png
new file mode 100644
index 0000000..0d85a53
Binary files /dev/null and b/src/subpackage/shower/static/images/arrow.png differ
diff --git a/src/subpackage/shower/static/images/close.png b/src/subpackage/shower/static/images/close.png
new file mode 100644
index 0000000..20f26c8
Binary files /dev/null and b/src/subpackage/shower/static/images/close.png differ