diff --git a/src/subpackage/common/pages/pay_type_select.vue b/src/subpackage/common/pages/pay_type_select.vue
index 78937d3..4cfbf1f 100644
--- a/src/subpackage/common/pages/pay_type_select.vue
+++ b/src/subpackage/common/pages/pay_type_select.vue
@@ -5,7 +5,7 @@
                 <image mode="aspectFill" :src="stadiumInfo.logo"></image>
                 <view>{{ stadiumInfo.name || '-' }}</view>
             </view>
-            <view class="ph-type-text">订场支付金额</view>
+            <view class="ph-type-text">支付金额</view>
             <view class="ph-price"><text>¥</text>{{ payAmount || 0 }}</view>
             <view class="ph-discount-tip">
                 <block v-if="payMethodsID == 3&&selectedCard&&selectedCard.discount&&selectedCard.discount<10">
@@ -71,7 +71,7 @@
 <script>
 import server from '../js/server.js';
 import API from '../js/api.js';
-import util from '../../../utils/util.js';
+import util, { routeTo } from '../../../utils/util.js';
 import cardSearch from '../components/card_search';
 export default {
     components: {
@@ -111,7 +111,8 @@ export default {
     },
     /**
      * @param {Object} _options = JSON.parse(decodeURIComponent(option.query))
-     * @param {String} _options.type 1 -> 客户订场， 2-> 散客， 3-> 锁场, 4 -> 挂账
+     *  type: 场地面板(1 -> 客户订场， 2-> 散客， 3-> 锁场, 4 -> 挂账)； 水阀卡(5 -> 充值)
+     * @param {String} _options.type
      * @param {String} _options.brand_id 
      * @param {String} _options.amount 
      * @param {Object} _options.stadiumInfo 
@@ -136,9 +137,23 @@ export default {
         submitBtn: util.debounce(function(){
             let _type = this.optionsQuery?.type;
             if(+_type === 4)return this.takeUpBbocPay();
-            if(_type !== 4)return this.takeUpSubmit();
+            if([1,2,3].includes(+_type))return this.takeUpSubmit();
+            if(+_type === 5)return this.rechargeSubmit();
 
         }, 300, true),
+        // 水阀卡充值提交
+        rechargeSubmit(){
+            let { payMethodsID, otherTypeRemark, selectedCard, payAmount } = this;
+            let _data = {
+                payTypeName: this.getPayMethodsName(payMethodsID) || '',
+                amount: +payAmount,
+                selectedCardNo: selectedCard?.card_no || '',
+                remark: otherTypeRemark || '其它'
+            }
+            const eventChannel = this.getOpenerEventChannel();
+            eventChannel.emit('payConfirm', _data);
+            routeTo();
+        },
         payMethodsChange(e){
             if(e.id == 3)return this.$refs.cardSearch.show();
             this.payMethodsID = e.id;
diff --git a/src/subpackage/shower/components/popup/deduction.vue b/src/subpackage/shower/components/popup/deduction.vue
index 5cdf8dc..810cd9d 100644
--- a/src/subpackage/shower/components/popup/deduction.vue
+++ b/src/subpackage/shower/components/popup/deduction.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="deduction-popup">
         <popup-template 
-            title="充值时长" 
+            title="扣减时长" 
             :show="isShow"
             @click:close="hide"
         >
@@ -35,8 +35,8 @@
                         <input disabled type="text" v-model="editData.eTime" class="rts-ipt" placeholder="结束时间">
                     </picker>
                 </view>
-                <textarea class="rc-remark" placeholder="备注（选填）"></textarea>
-                <view class="rc-btn">确认</view>
+                <textarea class="rc-remark" placeholder="备注（选填）" v-model="editData.remark"></textarea>
+                <view class="rc-btn" @click="confirmBtn">确认</view>
             </view>
         </popup-template>
     </view>
@@ -46,7 +46,10 @@
 import popup_template from "./template.vue";
 import kv_line from "@/components/kv_line.vue";
 import number_edit from "../number_edit.vue";
-import { formatDate, formatNumber, formatTime, showNone } from "@/utils/util";
+
+import { SHOWER_API } from "../../js/api";
+import server from "../../js/server";
+import { formatDate, formatNumber, formatTime, showNone, debounce, showLoad, hideLoad, showModal } from "@/utils/util";
 export default {
     components: {
         'popup-template': popup_template,
@@ -80,33 +83,81 @@ export default {
                 eDate: '',
                 sTime: '',
                 eTime: '',
+                remark: ''
             }
         }
     },
     methods: {
+        confirmBtn: debounce(function(){
+            let { deductDuration, sDate, sTime, eDate, eTime, remark } = this.editData;
+            let { initData } = this;
+            let _queryObj = {
+                duration: deductDuration,
+                start_time: `${sDate} ${sTime}`,
+                end_time: `${eDate} ${eTime}`,
+                remark,
+                water_card_no: initData?.water_card_no || '',
+                brand_id: initData?.brand_id || '',
+                stadium_id: initData?.stadium_id || '',
+            }
+            // console.log('扣减时长提交参数：', _queryObj);
+            // initData?.success?.();
+            this.deductionReq(_queryObj);
+            this.hide();
+        }, 300, true),
+        deductionReq(data){
+            showLoad();
+            return server.post({
+                url: SHOWER_API.CardFeeDeduction,
+                data,
+                isDefaultGet: false,
+            })
+            .then(res => {
+                hideLoad();
+                let _data = res?.data || {};
+                if(_data.code === 0){
+                    showModal({
+                        title: '提示',
+                        content: _data.message || '操作成功！'
+                    })
+                    this.initData?.success?.('SUCCESS');
+                }else{
+                    return Promise.reject(_data);
+                }
+                
+            })
+            .catch(err => {
+                hideLoad();
+                showModal({
+                    title: '提示',
+                    content: err.message || '操作失败！'
+                })
+                console.warn('deduction deductionReq err --->', err);
+            })
+        },
         sDateChange(e){
             if(!this.isCorrectTimeScope({ sDate: e.detail.value }))return;
             this.editData.sDate = e.detail.value;
-            this.getDeductDurationForTimeChange({});
+            this.getDeductDurationForTimeChange();
         },
         sTimeChange(e){
             let { timePickerList, editData } = this;
             let _timeStr = this.getPickerTimeStr(e.detail.value, timePickerList);
             if(!this.isCorrectTimeScope({ sTime: _timeStr }))return;
             this.editData.sTime = _timeStr;
-            this.getDeductDurationForTimeChange({});
+            this.getDeductDurationForTimeChange();
         },
         eDateChange(e){
             if(!this.isCorrectTimeScope({ eDate: e.detail.value }))return;
             this.editData.eDate = e.detail.value;
-            this.getDeductDurationForTimeChange({});
+            this.getDeductDurationForTimeChange();
         },
         eTimeChange(e){
             let { timePickerList } = this;
             let _timeStr = this.getPickerTimeStr(e.detail.value, timePickerList);
             if(!this.isCorrectTimeScope({ eTime: _timeStr }))return;
             this.editData.eTime = _timeStr;
-            this.getDeductDurationForTimeChange({});
+            this.getDeductDurationForTimeChange();
         },
         getDeductDurationForTimeChange(){
             let { sDate, sTime, eDate, eTime } = this.editData;
diff --git a/src/subpackage/shower/components/popup/recharge.vue b/src/subpackage/shower/components/popup/recharge.vue
index 1554ea5..b6f9600 100644
--- a/src/subpackage/shower/components/popup/recharge.vue
+++ b/src/subpackage/shower/components/popup/recharge.vue
@@ -2,17 +2,18 @@
     <view class="recharge-popup">
         <popup-template 
             title="充值时长" 
-            :show="show"
+            :show="isShow"
+            @click:close="hide"
         >
             <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>
+                <kv-line label="水阀卡卡号：">{{ initData.water_card_no || '-' }}</kv-line>
+                <kv-line label="手机号码：">{{ initData.mobile || '-' }}</kv-line>
+                <kv-line label="可用时长："><text class="rc-orange">{{ initData.valid_duration_text || '-' }}</text></kv-line>
                 <view class="rc-space"></view>
-                <number-edit label="充值时长"></number-edit>
+                <number-edit label="充值时长" v-model="editData.duration"></number-edit>
                 <view class="rc-space"></view>
-                <number-edit label="支付金额" unit="元"></number-edit>
-                <view class="rc-btn">确认</view>
+                <number-edit label="支付金额" unit="元" v-model="editData.amount"></number-edit>
+                <view class="rc-btn" @click="confirm">确认</view>
             </view>
         </popup-template>
     </view>
@@ -22,6 +23,7 @@
 import popup_template from "./template.vue";
 import kv_line from "@/components/kv_line.vue";
 import number_edit from "../number_edit.vue";
+import { debounce } from "@/utils/util";
 export default {
     components: {
         'popup-template': popup_template,
@@ -30,7 +32,32 @@ export default {
     },
     data(){
         return {
-            show: true
+            isShow: false,
+            initData: {},
+            editData: {
+                duration: 10,
+                amount: 1
+            }
+        }
+    },
+    methods: {
+        confirm: debounce(function(){
+            let { initData, editData } = this;
+            initData?.success?.({
+                pay_amount: +editData?.amount,
+                duration: +editData?.duration
+            });
+            this.hide();
+        }, 300, true),
+        init(data){
+            this.initData = data;
+            this.show();
+        },
+        show(){
+            this.isShow = true;
+        },
+        hide(){
+            this.isShow = false;
         }
     }
 }
diff --git a/src/subpackage/shower/components/time_range.vue b/src/subpackage/shower/components/time_range.vue
index 875acf6..f519748 100644
--- a/src/subpackage/shower/components/time_range.vue
+++ b/src/subpackage/shower/components/time_range.vue
@@ -2,14 +2,14 @@
     <view class="time-range">
         <view class="tr-name">日期</view>
         <view class="tr-right">
-            <picker mode="date" @change="sDate = $event.detail.value">
+            <picker mode="date" @change="startDateChange">
                 <view class="tr-frame">
                     <input type="text" disabled class="tf-ipt" :value="sDate" placeholder="请选择时间">
                     <image class="tf-icon" mode="aspectFit" src="/subpackage/shower/static/images/calendar.png"></image>
                 </view>
             </picker>
             <view class="tr-txt">至</view>
-            <picker mode="date" @change="eDate = $event.detail.value">
+            <picker mode="date" @change="endDateChange">
                 <view class="tr-frame">
                     <input type="text" disabled class="tf-ipt" :value="eDate" placeholder="请选择时间">
                     <image class="tf-icon" mode="aspectFit" src="/subpackage/shower/static/images/calendar.png"></image>
@@ -20,12 +20,41 @@
 </template>
 
 <script>
+import { showNone } from "@/utils/util";
 export default {
     data(){
         return {
             sDate: '',
             eDate: ''
         }
+    },
+    methods: {
+        init(data){
+            this.sDate = data?.start_time || '';
+            this.eDate = data?.end_time || '';
+        },
+        endDateChange(e){
+            let { sDate, getDateStrTimeStamp } = this;
+            let _val = e.detail.value || '';
+            if(getDateStrTimeStamp(_val) < getDateStrTimeStamp(sDate)){
+                return showNone('结束时间不能小于开始时间');
+            }
+            this.eDate = e.detail.value;
+            this.$emit('change:date', { start_time: this.sDate, end_time: this.eDate });
+        },
+        startDateChange(e){
+            let { eDate, getDateStrTimeStamp } = this;
+            let _val = e.detail.value || '';
+            if(getDateStrTimeStamp(_val) > getDateStrTimeStamp(eDate)){
+                return showNone('开始时间不能大于结束时间');
+            }
+            this.sDate = e.detail.value;
+            this.$emit('change:date', { start_time: this.sDate, end_time: this.eDate });
+        },
+        getDateStrTimeStamp(dateStr){
+            let _str = dateStr.replace(/-/g, '/');
+            return new Date(`${_str} 00:00:00`).getTime();
+        }
     }
 }
 </script>
diff --git a/src/subpackage/shower/js/api.js b/src/subpackage/shower/js/api.js
index 1b09c2d..8968cf1 100644
--- a/src/subpackage/shower/js/api.js
+++ b/src/subpackage/shower/js/api.js
@@ -3,9 +3,11 @@ import { ORIGIN } from '../../../js/api';
 export const SHOWER_API = { 
 	CardList:`${ORIGIN}/admin/stadiumWaterCard/list`,  //  后台-水卡-列表
 	CardDetails:`${ORIGIN}/admin/stadiumWaterCard/details`,  //  后台-水卡-详情
-	CardUseRecord:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`,  //  后台-水卡使用记录-（某张水卡的）列表
+	CardUseRecord:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCardByAssistant`,  //  后台-水卡使用记录-（某张水卡的）列表
 	CardRecharge:`${ORIGIN}/admin/stadiumWaterCard/recharge`,  //  后台-水卡-充值
 	CardFeeDeduction:`${ORIGIN}/admin/stadiumWaterCard/feeDeduction`,  //  后台-水卡-扣费
+	waterOrderList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水阀订单-列表
+	waterOrderDetail:`${ORIGIN}/admin/stadiumWaterCardOrder/details`,  //  后台-水阀订单-详情
 	// CardList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水卡使用记录-列表
 	// CardListOfCard:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`,  //  后台-水卡使用记录-（某张水卡的）列表
 }
diff --git a/src/subpackage/shower/pages/card/detail.vue b/src/subpackage/shower/pages/card/detail.vue
index 9a203e6..8d1bb43 100644
--- a/src/subpackage/shower/pages/card/detail.vue
+++ b/src/subpackage/shower/pages/card/detail.vue
@@ -11,7 +11,7 @@
             <view class="cc-btns">
                 <view class="cb-item" @click="toRecords">消费记录</view>
                 <view class="cb-item red" @click="deductionBtn">扣费</view>
-                <view class="cb-item orange">充值</view>
+                <view class="cb-item orange" @click="rechargeBtn">充值</view>
             </view>
         </view>
         <view class="cd-box cd-record">
@@ -26,7 +26,7 @@
             </view>
         </view>
 
-        <recharge-popup v-if="false"></recharge-popup>
+        <recharge-popup ref="rechangePopup"></recharge-popup>
         <deduction-popup ref="deductionPopup"></deduction-popup>
     </view>
 </template>
@@ -38,7 +38,7 @@ 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";
+import { routeTo, showLoad, hideLoad, showNone, formatDate, jsonStr, showModal } from "@/utils/util";
 export default {
     components: {
         'kv-line': kv_line,
@@ -63,11 +63,96 @@ export default {
     onLoad(options){
         let { id, brand_id } = options;
         this.getCardInfo({ id, brand_id });
-        setTimeout(_=>{
-            this.deductionBtn();
-        }, 1200)
     },
     methods: {
+        rechargeBtn(){
+            let { water_card } = this;
+            this.$refs.rechangePopup.init({
+                water_card_no: water_card?.water_card_no || '',
+                mobile: water_card?.mobile || '',
+                valid_duration_text: water_card?.valid_duration_text || '',
+                success: rData => {
+                    let _query = {
+                        type: 5,
+                        brand_id: water_card?.brand_id || '',
+                        amount: rData?.pay_amount || 0,
+                        stadiumInfo: {
+                            id: water_card?.stadium_id || '',
+                            name: water_card?.stadium_name || '',
+                            logo: water_card?.stadium_logo || '',
+                        },
+                    };
+                    uni.navigateTo({
+                        url: `/subpackage/common/pages/pay_type_select?query=${jsonStr(_query)}`,
+                        events: { payConfirm: pData => this.rechargePayConfirm({ rData, pData }) },
+                    })
+                }
+            });
+        },
+        async rechargePayConfirm({ rData, pData }){
+            let { water_card } = this;
+            let _reqData = {
+                brand_id: water_card?.brand_id || '',
+                water_card_no: water_card?.water_card_no || '',
+                duration: rData?.duration || 0,
+                mobile: water_card?.mobile || '',
+                pay_type: this.getTextForType(pData?.payTypeName || ''),
+                pay_amount: pData?.amount || 0,
+                order_no: pData?.selectedCardNo || ''
+            }
+            let _rechargeRes = await this.rechargePayReq(_reqData);
+            if(_rechargeRes === 'SUCCESS'){
+                setTimeout(_=>{
+                    this.getCardInfo({ id: water_card?.id, brand_id: water_card?.brand_id });
+                }, 1200)
+            }
+        },
+        rechargePayReq(data){
+            showLoad();
+            return server.post({
+                url: SHOWER_API.CardRecharge,
+                data,
+                isDefaultGet: false,
+            })
+            .then(res => {
+                hideLoad();
+                let _data = res?.data || {};
+                if(_data.code === 0){
+                    showModal({
+                        title: '提示',
+                        content: _data.message || '操作成功！'
+                    })
+                    return "SUCCESS";
+                    // this.initData?.success?.('SUCCESS');
+                }else{
+                    return Promise.reject(_data);
+                }
+                
+            })
+            .catch(err => {
+                hideLoad();
+                showModal({
+                    title: '提示',
+                    content: err.message || '操作失败！'
+                })
+                console.warn('deduction deductionReq err --->', err);
+            })
+        },
+
+        // // 0: 微信支付 1: 支付宝支付 2: 储值卡支付 3:商家主动 4:押金抵扣 5：任务奖品 6：抖音团购兑换 7：付款码支付
+        getTextForType(payTxt){
+            switch(payTxt){
+                case '微信支付': return 0;
+                case '支付宝支付': return 1;
+                case '储值卡支付': return 2;
+                case '商家主动': return 3;
+                case '押金抵扣': return 4;
+                case '任务奖品': return 5;
+                case '抖音团购兑换': return 6;
+                case '付款码支付': return 7;
+                default: return 8;
+            }
+        },
         deductionBtn(){
             let { water_card } = this;
             this.$refs.deductionPopup.init({
@@ -75,6 +160,10 @@ export default {
                 mobile: water_card?.mobile || '',
                 valid_duration_text: water_card?.valid_duration_text || '',
                 valid_duration: water_card?.valid_duration || '',
+                // 扣减提交参数
+                brand_id: water_card?.brand_id || '',
+                stadium_id: water_card?.stadium_id || '',
+
                 success: () => {
                     this.getCardInfo({ id: water_card?.id, brand_id: water_card?.brand_id });
                 }
@@ -82,7 +171,7 @@ export default {
         },
         toRecords(){
             let { water_card } = this;
-            let _qryStr = `brand_id=${water_card?.brand_id || ''}&id=${water_card?.id || ''}`;
+            let _qryStr = `brand_id=${water_card?.brand_id || ''}&water_card_no=${water_card?.water_card_no || ''}`;
             routeTo(`/subpackage/shower/pages/card/use_record?${_qryStr}`, 'nT');
         },
         getCardInfo({
diff --git a/src/subpackage/shower/pages/card/use_record.vue b/src/subpackage/shower/pages/card/use_record.vue
index 9bb64c6..7684549 100644
--- a/src/subpackage/shower/pages/card/use_record.vue
+++ b/src/subpackage/shower/pages/card/use_record.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="use-record">
-        <time-range></time-range>
+        <time-range ref="timeRange" @change:date="condition = $event"></time-range>
         <view class="ur-list">
             <view class="ul-item" v-for="(e, i) in recordList" :key="i">
                 <view class="ui-tit-bar">
@@ -17,7 +17,7 @@
                 </view>
                 <view class="ui-lines">
                     <kv-line label="门店名称：">{{ e.stadium_name || '-' }}</kv-line>
-                    <kv-line label="开始时间：">{{ e.start_time || '-' }}</kv-line>
+                    <kv-line label="开始时间：">{{ e.start_time || e.created_at || '-' }}</kv-line>
                     <block v-if="e.type === 0">
                         <kv-line label="设备名称：">{{ e.hardware_name || '-' }}</kv-line>
                         <kv-line label="结束时间：">{{ e.end_time || '-' }}</kv-line>
@@ -42,43 +42,65 @@ export default {
         'time-range': time_range,
         'kv-line': kv_line
     },
+    watch: {
+        condition: {
+            handler(val){
+                let { start_time, end_time } = val;
+                let { optionsQuery } = this;
+                this.recordList = [];
+                this.page = 1;
+                this.getCardUseRecord({
+                    brand_id: optionsQuery?.brand_id || '',
+                    water_card_no: optionsQuery?.water_card_no || '',
+                    start_time, end_time
+                })
+            },
+            deep: true
+        }
+    },
     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分钟'
-                }
-            ]
+            condition: {
+                start_time: '',
+                end_time: ''
+            },
+            optionsQuery: {},
+            recordList: [],
+            page: 1
         }
     },
+    onReachBottom(){
+        let { optionsQuery, page, condition } = this;
+        this.getCardUseRecord({
+            brand_id: optionsQuery?.brand_id || '',
+            water_card_no: optionsQuery?.water_card_no || '',
+            page: ++page,
+            ...condition
+        });
+    },
     onLoad(options){
-        let { brand_id, id } = options;
-        this.getCardUseRecord({ brand_id, id });
+        this.optionsQuery = options;
+        this.initDate();
+        // this.getCardUseRecord({ brand_id, water_card_no });
     },
     methods: {
+        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 });
+            this.$refs.timeRange.init(this.condition);
+            return this.condition
+        },
         getCardUseRecord({ 
-            brand_id = '', id = '', page = 1, page_size = 10
+            brand_id = '', water_card_no = '', page = 1, page_size = 10,
+            start_time, end_time
         }){
             showLoad();
             return server.get({
                 url: SHOWER_API.CardUseRecord,
-                data: { brand_id, id, page, page_size },
+                data: { brand_id, water_card_no, page, page_size, start_time, end_time },
                 failMsg: '获取用水卡使用记录失败'
             })
             .then(res => {
@@ -92,7 +114,7 @@ export default {
             })
             .catch(err => {
                 hideLoad();
-                console.warn('manage getCardList err --->', err);
+                console.warn('card use_record getCardUseRecord err --->', err);
                 // return Promise.reject(err);
             })
         },
diff --git a/src/subpackage/shower/pages/device/use_record.vue b/src/subpackage/shower/pages/device/use_record.vue
index e1d732c..48e870b 100644
--- a/src/subpackage/shower/pages/device/use_record.vue
+++ b/src/subpackage/shower/pages/device/use_record.vue
@@ -8,21 +8,27 @@
             :end-time="condition.end_time"
         ></order-filter>
         <view class="ur-list">
-            <view class="ul-item" v-for="i in 10" :key="i">
+            <!-- status 0进行中；1已完成 -->
+            <view class="ul-item" v-for="(e, i) in orderList" :key="i">
                 <view class="ui-bar">
-                    <view class="ub-name">欧轩智能羽毛球馆(永泰店)</view>
+                    <view class="ub-name">{{ e.stadium_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>
+                    <kv-line label="设备名称：">{{ e.hardware_name || '-' }}</kv-line>
+                    <kv-line label="时长合计：">
+                        {{ e.settle_duration || '-' }}
+                        <block v-if="e.free_duration">
+                            (免费时长{{ e.free_duration || 0 }})
+                        </block>
+                    </kv-line>
+                    <kv-line label="手机号码：">{{ e.mobile || '-' }}</kv-line>
+                    <kv-line label="创建时间：">{{ e.created_at || '-' }}</kv-line>
                 </view>
-                <view class="ui-deduction">
-                    <text class="ud-txt">扣减时长：</text>20分钟00秒
+                <view class="ui-deduction" v-if="e.status === 1">
+                    <text class="ud-txt">扣减时长：</text>{{ e.deduction_duration || '0' }}
                 </view>
-                <view class="ui-btn">结束计时</view>
+                <view class="ui-btn" v-if="e.status === 0">结束计时</view>
             </view>
         </view>
         <!-- 时间段选择 -->
@@ -37,6 +43,10 @@ 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 { 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,
@@ -44,18 +54,44 @@ export default {
         'filter-modal': filterModal,
         'kv-line': kv_line
     },
+    condition: {
+        handler(nVal, oVal){
+            this.orderList = [];
+            this.page = 1;
+            let { brand_id } = this;
+            // this.getOrderList({
+            //     brand_id: brand_id || '',
+            //     ...nVal,
+            // })
+        },
+        deep: true
+    },
     data(){
         return {
             condition: {
-                start_time: '2024-08-20',
-                end_time: '2024-08-20',
-            }
+                stadium_id: '',
+                start_time: '',
+                end_time: '',
+                status: '' // 状态：0进行中；1已完成
+            },
+            orderList: [],
+            page: 1
         }
     },
     onLoad(options){
         this.$refs.orderFilter.initStadiumSelect(options?.brand_id);
+        this.getOrderList({ brand_id: options?.brand_id });
+        this.initDate();
     },
     methods: {
+        // 默认显示三个月内的水阀卡数据
+        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,9 +103,51 @@ export default {
                 }
             });
         },
+        // 0：未支付；1：已支付；2：已使用；4：已退款；
+        // 5：退款中；6：拒绝退款；7：关闭支付；8：使用中
         showFilterModal(){
-            this.$refs.filterModal.show();
-        }
+            this.$refs.filterModal.init({
+                title: '订单状态',
+                list: [
+                    { label: '全部', value: '' },
+                    { label: '进行中', value: '0' },
+                    { label: '已完成', value: '1' },
+                ],
+                curValue: this.condition.status,
+                success: res=>{
+                    this.condition.status = res.value;
+                }
+            });
+        },
+        /**
+         * @param { status } 状态：0进行中；1已完成
+         * */ 
+        getOrderList({ 
+            brand_id = '', stadium_id = '', 
+            start_time = '', end_time = '',  status = '',
+            page = 1, page_size = 10 
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.waterOrderList,
+                data: { brand_id, stadium_id, start_time, end_time, status, page, page_size },
+                failMsg: '获取水阀订单失败'
+            })
+            .then(res => {
+                hideLoad();
+                let _ls = res?.list || [];
+                if(page === 1)return this.orderList = _ls;
+                if(!_ls.length)return showNone('没有更多！');
+                this.page = page;
+                return this.orderList = [...this.orderList, ..._ls];
+                
+            })
+            .catch(err => {
+                hideLoad();
+                console.warn('device user_record getOrderList err --->', err);
+                // return Promise.reject(err);
+            })
+        },
     }
 }
 </script>
diff --git a/src/utils/util.js b/src/utils/util.js
index c38a21b..cb9c6d4 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -150,10 +150,10 @@ export function debounce(func, wait, immediate) {
   }
 }
 
-function jsonStr(data){
+export function jsonStr(data){
   return encodeURIComponent(JSON.stringify(data))
 }
-function jsonPar(json){
+export function jsonPar(json){
   return JSON.parse(decodeURIComponent(json))
 }