add end balling api

src/components/order_list/club_rental/club_rental.vue

@@ -31,9 +31,12 @@
             </block>
             
         </view>
-        <view class="vcc-total">
+        <view class="vcc-total" v-if="orderInfo.pay_status != 1">
             <view class="vt-view"><text class="vv-text">合计支付：</text>￥{{ orderInfo.pay_amount || '0' }}</view>
         </view>
+        <view class="vcc-end-btn" v-if="orderInfo.order_type != 'deposit'&&orderInfo.pay_status == 1">
+            <view class="veb-item" @click.stop="toInfo(1)">结束计费</view>
+        </view>
     </view>
 </template>
 
@@ -57,9 +60,9 @@ export default {
     mounted(){
     },
     methods: {
-        toInfo(){
+        toInfo(isEnd = 0){
             let { orderInfo } = this;
-            util.routeTo(`/subpackage/order/pages/club_rental/detail/detail?order_no=${orderInfo.order_no}`, 'nT');
+            util.routeTo(`/subpackage/order/pages/club_rental/detail/detail?order_no=${orderInfo.order_no}&is_end=${ isEnd }`, 'nT');
         },
         getStatusTxt(status = -1){
             let _obj = {
@@ -81,6 +84,9 @@ export default {
         padding: 0 20upx 20upx;
         border-radius: 10upx;
     }
+    .vcc-info{
+        padding-top: 20upx;
+    }
     .crc-line{
         margin-top: 10upx;
         @include centerFlex(flex-start);
@@ -110,4 +116,19 @@ export default {
             }
         }
     }
+    .vcc-end-btn{
+        padding-top: 20upx;
+        @include centerFlex(flex-end);
+        .veb-item{
+            width: 192upx;
+            height: 80upx;
+            line-height: 80upx;
+            text-align: center;
+            border-radius: 10upx;
+            font-size: 32upx;
+            font-weight: 500;
+            color: #fff;
+            background-color: $themeColor;
+        }
+    }
 </style>

src/subpackage/order/components/club_rental/end_billing/end_billing.vue

@@ -0,0 +1,156 @@
+<template>
+    <view class="end-billing">
+        <view class="end-mask" @click="close">
+            <view class="em-content" @click.stop="_=>false">
+                <image class="ec-close" src="/subpackage/order/static/images/close.png" @click="close"></image>
+                <view class="ec-main">
+                    <view class="em-tit">结束计费</view>
+                    <view class="em-line">订单号：{{ orderInfo.order_no || '-' }}</view>
+                    <view class="em-line">时长合计：<text class="el-txt">{{ orderInfo.rent_duration || '-' }}</text></view>
+                    <view class="em-settlement">
+                        <view class="es-tit">结算金额(元)</view>
+                        <view class="es-frame">
+                            <input class="ef-ipt" type="number" v-model="amount" />
+                        </view>
+                    </view>
+
+                    <view class="em-remark">
+                        <view class="er-view">备注：</view>
+                        <view class="er-view">1、请确保用户已将球归还到柜子后，才手动帮用户“结束计费”；</view>
+                        <view class="er-view">2、确认结束计费后将从用户押金里自动扣取相应费用，剩余的押金将会原路退还给用户</view>
+                    </view>
+
+                    
+                </view>
+                <view class="em-btns">
+                    <view class="eb-btn" @click="close">取消</view>
+                    <view class="eb-btn" @click="confirm">确认</view>
+                </view>
+                
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        orderInfo: {
+            type: Object,
+            default: {}
+        }
+    },
+    data(){
+        return {
+            amount: '',
+        }
+    },
+    methods: {
+        close(){
+            this.$emit('close');
+        },
+        confirm(){
+            let _amount = this.amount || 0;
+            this.$emit('confirm', { amount: +_amount });
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .end-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        background-color: rgba($color: #000000, $alpha: .5);
+    }
+    .em-content{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding: 78upx 56upx 130upx;
+        width: 620upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .ec-main {
+            .em-tit{
+                margin-bottom: 34upx;
+                line-height: 44upx;
+                text-align: center;
+                font-weight: 500;
+                font-size: 32upx;
+                color: #333;
+            }
+
+            .em-line{
+                line-height: 48upx;
+                font-size: 28upx;
+                color: #1a1a1a;
+                .el-txt{
+                    color: $themeColor;
+                }
+            }
+            .em-settlement{
+                margin-top: 8upx;
+                margin-bottom: 28upx;
+                .es-tit{
+                    margin-bottom: 8upx;
+                    line-height: 48upx;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+                .es-frame{
+                    padding: 0 24upx;
+                    height: 88upx;
+                    border-radius: 10upx;
+                    border: 2upx solid #D8D8D8;
+                    border-radius: 10upx;
+                    .ef-ipt{
+                        height: 100%;
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                }
+
+            }
+
+        }       
+        .em-remark{
+            .er-view{
+                line-height: 48upx;
+                font-size: 28upx;
+                color: #1a1a1a;
+            }
+        }
+        .em-btns{
+            padding-top: 52upx;
+            @include centerFlex(space-between);
+            .eb-btn{
+                height: 88upx;
+                width: 240upx;
+                border-radius: 10upx;
+                border: 2upx solid $themeColor;
+                line-height: 84upx;
+                text-align: center;
+                font-size: 32upx;
+                font-weight: 500;
+                color: $themeColor;
+                &+.eb-btn{
+                    background-color: $themeColor;
+                    color: #fff;
+                }
+            }
+        }
+        .ec-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 34upx;
+            height: 34upx;
+        }
+    }
+</style>

src/subpackage/order/js/api.js

@@ -30,7 +30,8 @@ export const ORDER_API = {
 	ymCardUsage:`${ORIGIN}/admin/userMonthlyCard/usages`,  // 用户年月卡使用记录-后台
 	// 20220725 
 	userValueOrderGet:`${ORIGIN}/admin/userValueOrder/get`,  // 储值卡订单详情
-
+	// 20220726 
+	rentballEndBilling:`${ORIGIN}/admin/stadium/rentball/order/end`,  // 结束订单-后台
 }
 
 export default ORDER_API;

src/subpackage/order/pages/club_rental/detail/detail.vue

@@ -134,6 +134,15 @@
         </view>
         <view class="cr-btn" @click="depositRefundBtn" v-if="orderInfo.order_type == 'deposit'&&orderInfo.pay_status == 2">退押金</view>
         <view class="cr-btn" @click="overBillingBtn" v-if="orderInfo.order_type != 'deposit'&&orderInfo.pay_status == 1">结束计费</view>
+        <!-- <view class="cr-btn" @click="overBillingBtn">结束计费</view> -->
+
+        <end-billing
+            v-if = 'isShowEndBilling'
+            @close = 'isShowEndBilling = false'
+            @confirm = 'endBillingBtn'
+            :orderInfo = 'orderInfo'
+        ></end-billing>
+        
     </view>
 </template>
 
@@ -141,48 +150,87 @@
 import { ORDER_API } from '../../../js/api';
 import server from '../../../js/server';
 import a_line from '../../../../../components/order_list/a_line/a_line.vue';
+import end_billing from '../../../components/club_rental/end_billing/end_billing.vue';
 import util from '../../../../../utils/util';
+
 // 租用中 1  已完成2   已退款4
 // 押金类型只有2,4
 export default {
     components: {
         'a-line': a_line,
+        'end-billing': end_billing
     },
     data(){
         return {
             orderInfo: {
                 extension: {},
                 cabinet: {},
-            }
+            },
+            isShowEndBilling: false,
         }
     },
     onLoad(options){
-        this.getOrderInfo(options.order_no);
+        this.getOrderInfo({ 
+            order_no: options.order_no,
+            isEndBilling: !!+options.is_end || false
+         });
     },
     methods: {
+        endBillingBtn: util.debounce(function(e){
+            this.isShowEndBilling = false;
+            util.showModal({
+                title: '提示',
+                content: `结算金额为${ e.amount || 0 }元`,
+                showCancel: true,
+                success: mRes => {
+                    if(mRes.confirm == true)this.endBillingReq(e.amount);
+                }
+            })
+
+        }, 300, true),
         overBillingBtn: util.debounce(function(){
+            let { orderInfo } = this;  
+            this.getOrderInfo({ 
+                order_no: orderInfo.order_no || '',
+                isEndBilling: true
+            });
+
+        }, 300, true), 
+        endBillingReq(amount = 0){
             util.showLoad();
             let { orderInfo } = this;
             server.post({
-                url: ORDER_API.rentballOrderEnd,
+                url: ORDER_API.rentballEndBilling,
                 data: {
-                    order_no: orderInfo.order_no
+                    order_no: orderInfo.order_no,
+                    pay_amount: amount,
+                    amount
                 },
                 isDefaultGet: false,
             })
             .then(res => {
                 util.hideLoad();
+                
                 if(res.data.code == 0){
                     util.showNone(res.data.message || '操作成功！');
-                    setTimeout(_=>this.getOrderInfo(orderInfo.order_no), 1200);
+                    setTimeout(_=>{
+                        this.getOrderInfo({ order_no: orderInfo.order_no });
+                        util.previousPageFunction({ // 刷新上一页
+                            fnName: 'refreshList',
+                            query: null
+                        })
+                    }, 1200);
                 }else{
                     util.showNone(res.data.message || '操作失败！');
                 }   
             })
             .catch(util.hideLoad)
-        }), 
+        },
         payTypeTxt: util.order_pay_type_txt,
-        getOrderInfo(order_no = ''){
+        getOrderInfo({
+            order_no = '',
+            isEndBilling = false
+        }){
             util.showLoad();
             server.get({
                 url: ORDER_API.hardwareOrderInfo,
@@ -193,6 +241,7 @@ export default {
                 util.hideLoad();
                 let _order = res || { extension: {} };
                 this.orderInfo = _order;
+                this.isShowEndBilling = isEndBilling;
             })
         },
         depositRefundBtn: util.debounce(function(){
@@ -348,4 +397,5 @@ export default {
             background-color: $themeColor;
         }
     }
+    
 </style>