diff --git a/src/subpackage/shower/components/number_edit.vue b/src/subpackage/shower/components/number_edit.vue
index edcc564..6788e72 100644
--- a/src/subpackage/shower/components/number_edit.vue
+++ b/src/subpackage/shower/components/number_edit.vue
@@ -22,11 +22,24 @@ export default {
         unit: {
             type: String,
             default: '分钟'
+        },
+        value: {
+            default: 0
+        },
+    },
+    computed: {
+        number: {
+            get(){
+                return this.$props.value;
+            },
+            set(val){
+                this.$emit('input', val);
+            }
         }
     },
     data(){
         return {
-            number: 0
+            
         }
     }
 }
diff --git a/src/subpackage/shower/components/popup/deduction.vue b/src/subpackage/shower/components/popup/deduction.vue
index 6e84e0e..5cdf8dc 100644
--- a/src/subpackage/shower/components/popup/deduction.vue
+++ b/src/subpackage/shower/components/popup/deduction.vue
@@ -2,24 +2,37 @@
     <view class="deduction-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.deductDuration"></number-edit>
+                <view class="rc-time-select">
+                    <view class="rts-name">开始日期</view>
+                    <picker mode="date" :value="editData.sDate" @change="sDateChange">
+                        <input disabled type="text" v-model="editData.sDate" 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 mode="multiSelector" :range="timePickerList" :value="editData.sTime" @change="sTimeChange">
+                        <input disabled type="text" v-model="editData.sTime" class="rts-ipt" placeholder="开始时间">
+                    </picker>
+                </view>
+                <view class="rc-time-select">
+                    <view class="rts-name">结束日期</view>
+                    <picker mode="date" :value="editData.eDate" @change="eDateChange">
+                        <input disabled type="text" v-model="editData.eDate" 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  mode="multiSelector" :range="timePickerList" :value="editData.eTime" @change="eTimeChange">
+                        <input disabled type="text" v-model="editData.eTime" class="rts-ipt" placeholder="结束时间">
                     </picker>
                 </view>
                 <textarea class="rc-remark" placeholder="备注（选填）"></textarea>
@@ -33,15 +46,131 @@
 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";
 export default {
     components: {
         'popup-template': popup_template,
         'kv-line': kv_line,
         'number-edit': number_edit
     },
+    watch: {
+        'editData.deductDuration': {
+            handler(nVal, oVal){
+                this.initDeductTime();
+            },
+            deep: true
+        }
+    },
     data(){
         return {
-            show: true
+            isShow: false,
+            timePickerList: this.getTimePickerList(),
+            initData: {
+                /**
+                 * @param {String} water_card_no
+                 * @param {String} mobile
+                 * @param {String} valid_duration_text
+                 * @param {Number} valid_duration
+                 * @param {Function} success
+                 * */ 
+            },
+            editData: {
+                deductDuration: 10,
+                sDate: '',
+                eDate: '',
+                sTime: '',
+                eTime: '',
+            }
+        }
+    },
+    methods: {
+        sDateChange(e){
+            if(!this.isCorrectTimeScope({ sDate: e.detail.value }))return;
+            this.editData.sDate = e.detail.value;
+            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({});
+        },
+        eDateChange(e){
+            if(!this.isCorrectTimeScope({ eDate: e.detail.value }))return;
+            this.editData.eDate = e.detail.value;
+            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({});
+        },
+        getDeductDurationForTimeChange(){
+            let { sDate, sTime, eDate, eTime } = this.editData;
+            let _startStr = `${sDate} ${sTime}`;
+            let _endStr = `${eDate} ${eTime}`;
+            let _startStamp = new Date(this.getCalDate(_startStr)).getTime();
+            let _endStamp = new Date(this.getCalDate(_endStr)).getTime();
+            this.editData.deductDuration = (_endStamp - _startStamp) / 1000 / 60;
+        },
+        isCorrectTimeScope({
+            sDate = '', sTime = '', eDate = '', eTime = ''
+        }){
+            let _sDate = sDate || this.editData.sDate;
+            let _sTime = sTime || this.editData.sTime;
+            let _eDate = eDate || this.editData.eDate;
+            let _eTime = eTime || this.editData.eTime;
+            let _startStr = `${_sDate} ${_sTime}`;
+            let _endStr = `${_eDate} ${_eTime}`;
+            let _startStamp = new Date(this.getCalDate(_startStr)).getTime();
+            let _endStamp = new Date(this.getCalDate(_endStr)).getTime();
+            if(_startStamp >= _endStamp){
+                showNone('开始时间不能大于结束时间！');
+                return false;
+            }else{
+                return true;
+            }
+        },
+        getPickerTimeStr(value = [], pickList = []){
+            let [ _hourList, _minuteList, _secondList ] = pickList;
+            let [ _hour, _minute, _second ] = value;
+            return `${_hourList[_hour]}:${_minuteList[_minute]}:${_secondList[_second]}`;
+        },
+        getCalDate(dateStr){
+            return dateStr.replace(/\-/g, '/') || '';
+        },
+        initDeductTime(){
+            let { deductDuration, sDate, sTime } = this.editData;
+            let _startStr = `${this.getCalDate(sDate)} ${sTime}`;
+            let _curDate = _startStr === ' ' ? new Date() : new Date(_startStr);
+            let _curTimeStamp = _curDate.getTime();
+            let _deductLaterTimeStamp = _curTimeStamp + deductDuration * 60 * 1000;
+            let _startArr = formatTime(new Date(_curTimeStamp)).split(' ');
+            let _endStr = formatTime(new Date(_deductLaterTimeStamp)).split(' ');
+            this.editData.sDate = _startArr[0];
+            this.editData.sTime = _startArr[1];
+            this.editData.eDate = _endStr[0];
+            this.editData.eTime = _endStr[1];
+        },
+        getTimePickerList(){
+            let _hourList = new Array(24).fill(0).map((e, i) => formatNumber(i));
+            let _minuteList = new Array(60).fill(0).map((e, i) => formatNumber(i));
+            let _secondList = new Array(60).fill(0).map((e, i) => formatNumber(i));
+            return [_hourList, _minuteList, _secondList];
+        },
+        init(data){
+            this.initData = data || {};
+            this.show();
+            this.initDeductTime();
+        },
+        show(){
+            this.isShow = true;
+        },
+        hide(){
+            this.isShow = false;
         }
     }
 }
@@ -66,7 +195,7 @@ export default {
             .rts-ipt{
                 display: block;
                 box-sizing: border-box;
-                padding: 10upx 30upx;
+                padding: 0upx 30upx;
                 width: 358upx;
                 height: 56upx;
                 border-radius: 10upx;
diff --git a/src/subpackage/shower/js/api.js b/src/subpackage/shower/js/api.js
index 5886ee0..1b09c2d 100644
--- a/src/subpackage/shower/js/api.js
+++ b/src/subpackage/shower/js/api.js
@@ -3,6 +3,7 @@ import { ORIGIN } from '../../../js/api';
 export const SHOWER_API = { 
 	CardList:`${ORIGIN}/admin/stadiumWaterCard/list`,  //  后台-水卡-列表
 	CardDetails:`${ORIGIN}/admin/stadiumWaterCard/details`,  //  后台-水卡-详情
+	CardUseRecord:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`,  //  后台-水卡使用记录-（某张水卡的）列表
 	CardRecharge:`${ORIGIN}/admin/stadiumWaterCard/recharge`,  //  后台-水卡-充值
 	CardFeeDeduction:`${ORIGIN}/admin/stadiumWaterCard/feeDeduction`,  //  后台-水卡-扣费
 	// CardList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水卡使用记录-列表
diff --git a/src/subpackage/shower/pages/card/detail.vue b/src/subpackage/shower/pages/card/detail.vue
index 5bc0f2c..9a203e6 100644
--- a/src/subpackage/shower/pages/card/detail.vue
+++ b/src/subpackage/shower/pages/card/detail.vue
@@ -1,33 +1,33 @@
 <template>
     <view class="card-detail">
         <view class="cd-box cb-card">
-            <view class="cc-stadium">欧轩智能场馆(永泰店)</view>
+            <view class="cc-stadium">{{ water_card.stadium_name || '' }}</view>
             <view class="cc-lines">
-                <kv-line label-style="color: #1A1A1A;" label="水阀卡卡号：">124646</kv-line>
-                <kv-line label-style="color: #1A1A1A;" label="手机号码：">18316466456</kv-line>
-                <kv-line label-style="color: #1A1A1A;" label="微信昵称：">张三</kv-line>
-                <kv-line label-style="color: #1A1A1A;font-weitht: 500;" label="可用时长："><text class="cl-orange">100分00秒</text></kv-line>
+                <kv-line label-style="color: #1A1A1A;" label="水阀卡卡号：">{{ water_card.water_card_no || '' }}</kv-line>
+                <kv-line label-style="color: #1A1A1A;" label="手机号码：">{{ water_card.mobile || '' }}</kv-line>
+                <kv-line label-style="color: #1A1A1A;" label="微信昵称：">{{ water_card.nick_name || '' }}</kv-line>
+                <kv-line label-style="color: #1A1A1A;font-weitht: 500;" label="可用时长："><text class="cl-orange">{{ water_card.valid_duration_text || '' }}</text></kv-line>
             </view>
             <view class="cc-btns">
-                <view class="cb-item">消费记录</view>
-                <view class="cb-item red">扣费</view>
+                <view class="cb-item" @click="toRecords">消费记录</view>
+                <view class="cb-item red" @click="deductionBtn">扣费</view>
                 <view class="cb-item orange">充值</view>
             </view>
         </view>
         <view class="cd-box cd-record">
             <view class="cr-tit">购卡记录</view>
-            <view class="cr-time">购卡  2020-05-23  13:25</view>
+            <view class="cr-time">购卡  {{ water_card_order.pay_time || '-' }}</view>
             <view class="cr-lines">
-                <kv-line label="名称：">智能浴室用水卡</kv-line>
-                <kv-line label="时长：">100分钟</kv-line>
-                <kv-line label="售价：">￥999</kv-line>
-                <kv-line label="支付金额：">￥999</kv-line>
-                <kv-line label="途径：">小程序</kv-line>
+                <kv-line label="名称：">{{ water_card.water_card_name || '-' }}</kv-line>
+                <kv-line label="时长：">{{ water_card_order.duration_text || '-' }}</kv-line>
+                <kv-line label="售价：">￥{{ water_card_order.amount || '0' }}</kv-line>
+                <kv-line label="支付金额：">￥{{ water_card_order.pay_amount || '0' }}</kv-line>
+                <kv-line label="途径：">{{ water_card.resource_text || '-' }}</kv-line>
             </view>
         </view>
 
         <recharge-popup v-if="false"></recharge-popup>
-        <deduction-popup v-if="false"></deduction-popup>
+        <deduction-popup ref="deductionPopup"></deduction-popup>
     </view>
 </template>
 
@@ -45,15 +45,46 @@ export default {
         'recharge-popup': rechargePopup,
         'deduction-popup': deductionPopup
     },
+    computed: {
+        water_card(){
+            let { cardInfo } = this;
+            return cardInfo?.water_card || {};
+        },
+        water_card_order(){
+            let { cardInfo } = this;
+            return cardInfo?.water_card_order || {};
+        }
+    },
     data(){
         return {
             cardInfo: {}
         }
     },
-    onLoad(){
-
+    onLoad(options){
+        let { id, brand_id } = options;
+        this.getCardInfo({ id, brand_id });
+        setTimeout(_=>{
+            this.deductionBtn();
+        }, 1200)
     },
     methods: {
+        deductionBtn(){
+            let { water_card } = this;
+            this.$refs.deductionPopup.init({
+                water_card_no: water_card?.water_card_no || '',
+                mobile: water_card?.mobile || '',
+                valid_duration_text: water_card?.valid_duration_text || '',
+                valid_duration: water_card?.valid_duration || '',
+                success: () => {
+                    this.getCardInfo({ id: water_card?.id, brand_id: water_card?.brand_id });
+                }
+            });
+        },
+        toRecords(){
+            let { water_card } = this;
+            let _qryStr = `brand_id=${water_card?.brand_id || ''}&id=${water_card?.id || ''}`;
+            routeTo(`/subpackage/shower/pages/card/use_record?${_qryStr}`, 'nT');
+        },
         getCardInfo({
             id = '', brand_id = ''
         }){
@@ -70,7 +101,7 @@ export default {
             })
             .catch(err => {
                 hideLoad();
-                console.warn('recharge_record getWaterCardOrderList err --->', err);
+                console.warn('card detail getCardInfo err --->', err);
                 // return Promise.reject(err);
             })
         },
diff --git a/src/subpackage/shower/pages/card/manage.vue b/src/subpackage/shower/pages/card/manage.vue
index 99c70fd..dd87a2e 100644
--- a/src/subpackage/shower/pages/card/manage.vue
+++ b/src/subpackage/shower/pages/card/manage.vue
@@ -87,7 +87,7 @@ export default {
     },
     methods: {
         toDetail(e){
-            routeTo(`/subpackage/shower/pages/card/detail?id=${e?.id || ''}`, 'nT')
+            routeTo(`/subpackage/shower/pages/card/detail?id=${e?.id || ''}&brand_id=${e?.brand_id || ''}`, 'nT')
         },
         // 默认显示三个月内的水阀卡数据
         initDate(){
diff --git a/src/subpackage/shower/pages/card/use_record.vue b/src/subpackage/shower/pages/card/use_record.vue
index 08170ef..9bb64c6 100644
--- a/src/subpackage/shower/pages/card/use_record.vue
+++ b/src/subpackage/shower/pages/card/use_record.vue
@@ -33,6 +33,10 @@
 <script>
 import time_range from "../../components/time_range.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: {
         'time-range': time_range,
@@ -62,6 +66,36 @@ export default {
                 }
             ]
         }
+    },
+    onLoad(options){
+        let { brand_id, id } = options;
+        this.getCardUseRecord({ brand_id, id });
+    },
+    methods: {
+        getCardUseRecord({ 
+            brand_id = '', id = '', page = 1, page_size = 10
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.CardUseRecord,
+                data: { brand_id, id, page, page_size },
+                failMsg: '获取用水卡使用记录失败'
+            })
+            .then(res => {
+                hideLoad();
+                let _ls = res?.list || [];
+                if(page === 1)return this.recordList = _ls;
+                if(!_ls.length)return showNone('没有更多！');
+                this.page = page;
+                return this.recordList = [...this.recordList, ..._ls];
+                
+            })
+            .catch(err => {
+                hideLoad();
+                console.warn('manage getCardList err --->', err);
+                // return Promise.reject(err);
+            })
+        },
     }
 }
 </script>