From f70a1f03dec860ca60767a9c8575a95019deb7e9 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Fri, 13 Sep 2024 18:28:59 +0800
Subject: [PATCH] add shower order

---
 src/components/order_refund/fixed.vue              |   4 +-
 .../order/pages/order_manage/order_manage.vue      |   2 +-
 .../order/pages/ym_card/detail/detail.vue          |   8 +-
 src/subpackage/shower/js/api.js                    |   5 +-
 src/subpackage/shower/pages/order/detail.vue       | 203 ++++++++++++++++++---
 src/subpackage/shower/pages/order/list.vue         | 120 ++++++++++--
 6 files changed, 289 insertions(+), 53 deletions(-)

diff --git a/src/components/order_refund/fixed.vue b/src/components/order_refund/fixed.vue
index 0980267..57b7bd0 100644
--- a/src/components/order_refund/fixed.vue
+++ b/src/components/order_refund/fixed.vue
@@ -33,10 +33,10 @@ export default {
             return +refund_amount || 0
         },
         isShow(){
-            console.log('brandInfo', this.brandInfo)
             let { payAmount, refundAmount, refund_times, brandInfo } = this;
+            console.log('payAmount:', payAmount, 'refundAmount:', refundAmount, 'refund_times:', refund_times)
             if(
-                payAmount - refundAmount > 0
+                +payAmount - +refundAmount > 0
                 &&[0, 1].includes(refund_times)
                 &&brandInfo?.permission?.['1018'] // 退款权限
             ){
diff --git a/src/subpackage/order/pages/order_manage/order_manage.vue b/src/subpackage/order/pages/order_manage/order_manage.vue
index 2e83782..8745960 100644
--- a/src/subpackage/order/pages/order_manage/order_manage.vue
+++ b/src/subpackage/order/pages/order_manage/order_manage.vue
@@ -36,7 +36,7 @@ export default {
             // 20240910 浴室订单独立 md0726
             if([16].includes(ele.key)){
                 let _qryStr = `brand_id=${brandInfo?.brand?.id || ''}`;
-                return util.routeTo(`/subpackage/shower/pages/device/use_record?${_qryStr}`, 'nT');
+                return util.routeTo(`/subpackage/shower/pages/order/list?${_qryStr}`, 'nT');
             }
             // 20240813 计时订单入口拆分 tid1553
             if([22, 23].includes(ele.key)){
diff --git a/src/subpackage/order/pages/ym_card/detail/detail.vue b/src/subpackage/order/pages/ym_card/detail/detail.vue
index 204b2d6..73a3675 100644
--- a/src/subpackage/order/pages/ym_card/detail/detail.vue
+++ b/src/subpackage/order/pages/ym_card/detail/detail.vue
@@ -55,6 +55,7 @@
 
             <!-- 退款列表 -->
             <view v-for="(e, i) in refundList" :key="i">
+                <view class="ym-space" v-if="i!=0"></view>
                 <order-refund-info
                     :refund_price="e.amount || 0"
                     :refund_no="e.refund_no || '-'"
@@ -66,7 +67,7 @@
         </view>
 
         
-
+        <!-- 这里没有退款金额，直接用可退款金额 - 0 也是可以判断按钮显示 -->
         <order-refund-fixed
 			:pay_amount="_extension.refundable_amount || 0"
 			:refund_amount="0"
@@ -139,7 +140,7 @@ export default {
                 order_no: orderInfo?.order_no ?? '',
                 mobile: orderInfo?.mobile ?? '',
                 refundable_amount:  +_extension?.refundable_amount || 0,
-                refundable_integral:  0,
+                refundable_integral:  +_extension?.refundable_integral || 0,
                 refund_times: refundList?.length || 0,
                 confirm: e => {
                     this.userMonthlyCardRefundFixed({
@@ -289,6 +290,9 @@ export default {
     .ym-card-info{
         @include isPd;
     }
+    .ym-space{
+        padding-top: 24upx;
+    }
     .yci-box{
         padding: 30upx;
         margin-bottom: 24upx;
diff --git a/src/subpackage/shower/js/api.js b/src/subpackage/shower/js/api.js
index f00552c..c74bcf5 100644
--- a/src/subpackage/shower/js/api.js
+++ b/src/subpackage/shower/js/api.js
@@ -9,8 +9,9 @@ export const SHOWER_API = {
 	waterOrderList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水阀订单-列表
 	waterOrderDetails:`${ORIGIN}/admin/stadiumWaterCardUseRecord/details`,  //  后台-水阀订单-详情
 	endOfUseWaterWave:`${ORIGIN}/admin/stadiumWaterCardUseRecord/endOfUseWaterWave`,  //  后台-水卡使用记录-详情
-	// CardList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`,  //  后台-水卡使用记录-列表
-	// CardListOfCard:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`,  //  后台-水卡使用记录-（某张水卡的）列表
+	cardOrderList:`${ORIGIN}/admin/stadiumWaterCardOrder/list`,  //  后台-水阀订单-列表
+	cardOrderDetails:`${ORIGIN}/admin/stadiumWaterCardOrder/details`,  //  后台-水阀订单-详情
+	orderRefund:`${ORIGIN}/admin/stadium/order/refund`,  //  A订单管理-场馆预订订单-订单退款
 }
 
 export default SHOWER_API;
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/order/detail.vue b/src/subpackage/shower/pages/order/detail.vue
index 2987af1..b51bbf0 100644
--- a/src/subpackage/shower/pages/order/detail.vue
+++ b/src/subpackage/shower/pages/order/detail.vue
@@ -2,70 +2,220 @@
     <view class="order-detail">
         <view class="od-header">
             <view class="oh-stadium">
-                <image class="os-img"></image>
-                <view class="os-name">欧轩智能场馆(羽毛球永泰店)</view>
+                <image class="os-img" mode="aspectFit" :src="orderInfo.logo || ''"></image>
+                <view class="os-name">{{ orderInfo.stadium_name || '-' }}</view>
             </view>
             <view class="oh-bot">
-                <kv-line label="手机号码：">
-                    <template slot="default">13800138000</template>
+                <kv-line label="订单编号：">
+                    <template slot="default">{{ orderInfo.order_no || '-' }}</template>
                     <template slot="right">
-                        <view class="ob-status">交易完成</view>
+                        <view class="ob-status">{{ getPayStatusTxt(orderInfo.pay_status || -1) }}</view>
                     </template>
                 </kv-line>
-                <kv-line label="用户昵称：">yiming</kv-line>
+                <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
+                <kv-line label="手机号码：">{{ orderInfo.mobile || '-' }}</kv-line>
+                <kv-line label="用户昵称：">{{ orderInfo.nick_name || '-' }}</kv-line>
+                <kv-line label="来源：">{{ orderInfo.source || '-' }}</kv-line>
             </view>
         </view>
 
         <view class="od-goods">
-            <view class="og-tit">商品详情</view>
+            <view class="og-tit">订单信息</view>
             <view class="og-lines">
-                <kv-line label="名称：">沐浴</kv-line>
-                <kv-line label="时长：">10分钟</kv-line>
-                <kv-line label="价格：">￥4</kv-line>
+                <kv-line label="名称：">{{ orderInfo.water_card_name || '-' }}</kv-line>
+                <kv-line label="水阀卡号：">{{ orderInfo.water_card_no || '-' }}</kv-line>
+                <kv-line label="时长：">{{ orderInfo.duration_text || '-' }}</kv-line>
+                <kv-line label="途径：">{{ orderInfo.desc || '-' }}</kv-line>
             </view>
         </view>
 
         <view class="od-price-info">
-            <kvs-line label="金额小计">¥4</kvs-line>
-            <kvs-line label="积分抵扣">-¥0.5</kvs-line>
-            <kvs-line label="折扣金额">-¥0</kvs-line>
-            <kvs-line label="优惠券优惠">-¥0</kvs-line>
+            <kvs-line label="金额小计">¥{{ orderInfo.amount || 0 }}</kvs-line>
+            <kvs-line label="积分抵扣">-¥{{ orderInfo.deduction_amount || 0 }}</kvs-line>
+            <kvs-line label="折扣金额">-¥{{ orderInfo.discount_amount || 0 }}</kvs-line>
+            <kvs-line label="优惠券优惠">-¥{{ orderInfo.coupons_amount || 0 }}</kvs-line>
             <view class="opi-total">
-                合计支付：<text class="ot-num">￥3.5</text>
+                合计支付：<text class="ot-num">￥{{ orderInfo.pay_amount || 0 }}</text>
             </view>
         </view>
 
         <view class="od-pay-info">
-            <view class="opi-tit">支付详情</view>
+            <view class="opi-tit">支付信息</view>
             <view class="opi-lines">
-                <kv-line label="订单编号：">
-                    <template slot="default">sc20 0822 0815 6894</template>
-                    <template slot="right">
-                        <view class="ob-copy">复制</view>
-                    </template>
-                </kv-line>
-                <kv-line label="支付方式：">微信支付</kv-line>
-                <kv-line label="支付时间：">2020-08-22 10:12:25</kv-line>
-                <kv-line label="交易流水号：">202009181255364564612622</kv-line>
+                <kv-line label="支付方式：">{{ _extension.pay_type_text || '-' }}</kv-line>
+                <kv-line label="支付时间：">{{ orderInfo.pay_time || '-' }}</kv-line>
+                <kv-line label="微信交易号：">{{ orderInfo.trade_no || '-' }}</kv-line>
             </view>
         </view>
+
+        <!-- 退款列表 -->
+        <block v-for="(e, i) in refundList" :key="i">
+            <view class="od-space"></view>
+            <order-refund-info
+                :refund_price="e.amount || 0"
+                :refund_no="e.refund_no || '-'"
+                :refund_time="e.refund_time || '-'"
+                :refund_reason="e.reason || '-'"
+                :nameKey="i + 1"
+            ></order-refund-info>
+        </block>
+
+        <order-refund-fixed
+			:pay_amount="orderInfo.pay_amount || 0"
+			:refund_amount="orderInfo.refund_amount || 0"
+			:refund_times="(refundList&&refundList.length) || 0"
+            @click:button="refunndBtn"
+		></order-refund-fixed>
+
+        <order-refund-modal
+			ref="orderRefundModal"
+		></order-refund-modal>
     </view>
 </template>
 
 <script>
 import kv_line from "@/components/kv_line.vue";
 import kvs_line from "@/components/kvs_line.vue";
+
+import orderRefundFixed from '@/components/order_refund/fixed.vue'
+import orderRefundModal from '@/components/order_refund/modal.vue';
+import orderRefundInfo from '@/components/order_refund/info.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,
         'kvs-line': kvs_line,
-
+        'order-refund-fixed': orderRefundFixed,
+        'order-refund-modal': orderRefundModal,
+        'order-refund-info': orderRefundInfo
+    },
+    computed: {
+        _extension(){
+            return this.orderInfo?.extension || {};
+        }
+    },
+    data(){
+        return {
+            orderInfo: {},
+            refundList: [],
+        }
+    },
+    onLoad(options){
+        this.getCardOrderDetails({
+            id: options?.id,
+            brand_id: options?.brand_id,
+            order_no: options?.order_no
+        })
+        .then(res=>{
+            if(res.order_no)this.getRefundInfo(res.order_no || '');
+        })
+    },
+    methods: {
+        refunndBtn(){
+            let { orderInfo, _extension, refundList } = this;
+            this.$refs.orderRefundModal.show({
+                stadium_name: orderInfo?.stadium_name ?? '',
+                order_no: orderInfo?.order_no ?? '',
+                mobile: orderInfo?.mobile ?? '',
+                refundable_amount:  +_extension?.refundable_amount || 0,
+                refundable_integral: +_extension?.refundable_integral || 0,
+                refund_times: refundList?.length || 0,
+                confirm: e => {
+                    console.log('confirm --->', e);
+                    this.orderRefund({
+                        order_no: orderInfo?.order_no || '',
+                        amount: e.refund_amount || 0,
+                        integral: e.refund_integral || 0,
+                        brand_id: orderInfo?.brand_id || ''
+                    })
+                }
+            });
+        },
+        orderRefund({ order_no = '', amount = 0, integral = 0, brand_id }){
+            showLoad();
+            server.post({
+                url: SHOWER_API.orderRefund,
+                data: { order_no, amount, integral, brand_id },
+                isDefaultGet: false
+            })
+            .then(res=>{
+                hideLoad();
+                if(res.data.code == 0){
+                    showNone(res.data.message || '操作成功！');
+                }else{
+                    showNone(res.data.message || '操作失败！');
+                }
+            })
+            .catch(hideLoad)
+            .finally(_=>
+                setTimeout(_=>{
+                    let { orderInfo } = this;
+                    this.getCardOrderDetails({
+                        id: orderInfo?.id,
+                        order_no: orderInfo?.order_no,
+                        brand_id: orderInfo?.brand_id,
+                    })
+                    .then(res=>{
+                        if(res.order_no)this.getRefundInfo(res.order_no || '');
+                    })
+                }, 1200)
+            );
+        },
+        async getRefundInfo(order_no){
+            try{
+                let _refundRes = await this.$store.dispatch('getOrderRefundList', order_no);
+                let _ls = _refundRes?.data?.data?.list || [];
+                this.refundList = _ls;
+            }catch(err){
+                console.warn('shower order detail getRefundInfo err', err);
+            }
+        },
+        getPayStatusTxt(payStatus){
+            let _txt = '';
+            switch(payStatus){
+                case 0: _txt = '未支付'; break;
+                case 1: _txt = '已支付'; break;
+                case 2: _txt = '已使用'; break;
+                case 4: _txt = '已退款'; break;
+                case 5: _txt = '退款中'; break;
+                case 6: _txt = '拒绝退款'; break;
+                case 7: _txt = '关闭支付'; break;
+                case 8: _txt = '使用中'; break;
+                default: _txt = '-';
+            }
+            return _txt;
+        },
+        getCardOrderDetails({
+            id = '', brand_id = '', order_no = ''
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.cardOrderDetails,
+                data: { brand_id, id, order_no },
+                failMsg: '获取信息失败'
+            })
+            .then(res => {
+                hideLoad();
+                return this.orderInfo = res || {};
+            })
+            .catch(err => {
+                hideLoad();
+                console.warn('shower order details err --->', err);
+            })
+        },
     }
 }
 </script>
 
 <style lang="scss">
     .order-detail{
+        @include isPd(24upx);
+        .od-space{
+            padding-top: 24upx;
+        }
         .od-header{
             padding: 0 24upx;
             background: #fff;
@@ -78,7 +228,6 @@ export default {
                     margin-right: 14upx;
                     width: 40upx;
                     height: 40upx;
-                    background: skyblue;
                 }
                 .os-name{
                     @include flcw(28upx, 40upx, #1A1A1A, 500);
diff --git a/src/subpackage/shower/pages/order/list.vue b/src/subpackage/shower/pages/order/list.vue
index ff52db4..8d1c23c 100644
--- a/src/subpackage/shower/pages/order/list.vue
+++ b/src/subpackage/shower/pages/order/list.vue
@@ -11,25 +11,26 @@
         ></order-filter>
 
         <view class="ol-ls">
-            <view class="ol-item" v-for="i in 10" :key="i" @click="itemClick">
+            <view class="ol-item" v-for="(e, i) in cardOrderList" :key="i" @click="itemClick(e)">
                 <view class="oi-header">
                     <view class="oh-top">
-                        <view class="ot-name">广州欧轩智能羽毛球馆(永泰店)</view>
-                        <view class="ot-status">交易成功</view>
+                        <view class="ot-name">{{ e.stadium_name || '-' }}</view>
+                        <view class="ot-status">{{ getPayStatusTxt(e.pay_status || -1) }}</view>
                     </view>
-                    <view class="oh-device-name">
+                    <!-- <view class="oh-device-name">
                         <image class="odn-img" mode="aspectFit" src="/subpackage/shower/static/images/locate.png"></image>
                         <view class="odn-txt">1号女沐浴间</view>
-                    </view>
+                    </view> -->
                 </view>
                 <view class="oi-lines">
-                    <kv-line label="订单编号：">sc20 0822 0815 6894</kv-line>
-                    <kv-line label="名称：">豆奶</kv-line>
-                    <kv-line label="时长：">10分钟</kv-line>
-                    <kv-line label="购买时间：">2020-08-22   10:30:40</kv-line>
+                    <kv-line label="订单编号：">{{ e.order_no || '-' }}</kv-line>
+                    <kv-line label="名称：">{{ e.water_card_name || '-' }}</kv-line>
+                    <kv-line label="手机号码：">{{ e.mobile || '-' }}</kv-line>
+                    <kv-line label="支付时间：">{{ e.pay_time || '-' }}</kv-line>
+                    <kv-line label="途径：">{{ e.source || '-' }}</kv-line>
                 </view>
                 <view class="oi-total">
-                    合计支付：<text class="ot-price">¥2</text>
+                    合计支付：<text class="ot-price">¥{{ e.pay_amount || 0 }}</text>
                 </view>
             </view>
         </view>
@@ -47,7 +48,10 @@ import periodModal from "@/components/filter/period_modal.vue";
 import filterModal from "@/components/filter/filter_modal.vue";
 
 import kv_line from "@/components/kv_line.vue";
-import { routeTo, formatDate } from "@/utils/util";
+
+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,
@@ -55,22 +59,63 @@ export default {
         'filter-modal': filterModal,
         'kv-line': kv_line
     },
+    watch: {
+        condition: {
+            handler(nVal, oVal){
+                console.log('nVal --->', nVal);
+                this.cardOrderList = [];
+                this.page = 1;
+                let { brand_id } = this;
+                this.getCardOrderList({
+                    brand_id: brand_id || '',
+                    ...nVal,
+                })
+            },
+            deep: true
+        },
+    },
     data(){
         return {
             condition: {
                 stadium_id: '',
                 start_time: '',
                 end_time: '',
-            }
+                pay_status: ''
+            },
+            brand_id: '',
+            cardOrderList: [],
+            page: 1
         }
     },
+    onReachBottom(){
+        let { brand_id, condition, page } = this;
+        this.getCardOrderList({ brand_id, page: ++page, ...condition });
+    },
     onLoad(options){
-        this.$refs.orderFilter.initStadiumSelect({ brand_id: options?.brand_id });
+        let _bid = options?.brand_id || '';
+        this.brand_id = _bid;
+        this.$refs.orderFilter.initStadiumSelect({ brand_id: _bid });
         this.initDate(); // watch 监听触发
     },
     methods: {
-        itemClick(){
-            routeTo(`/subpackage/shower/pages/order/detail`, 'nT');
+        getPayStatusTxt(payStatus){
+            let _txt = '';
+            switch(payStatus){
+                case 0: _txt = '未支付'; break;
+                case 1: _txt = '已支付'; break;
+                case 2: _txt = '已使用'; break;
+                case 4: _txt = '已退款'; break;
+                case 5: _txt = '退款中'; break;
+                case 6: _txt = '拒绝退款'; break;
+                case 7: _txt = '关闭支付'; break;
+                case 8: _txt = '使用中'; break;
+                default: _txt = '-';
+            }
+            return _txt;
+        },
+        itemClick(e){
+            let _qryStr = `id=${e.id || ''}&brand_id=${e.brand_id || ''}&order_no=${e.order_no || ''}`;
+            routeTo(`/subpackage/shower/pages/order/detail?${_qryStr}`, 'nT');
         },
         // 默认显示三个月内的水阀卡数据
         initDate(){
@@ -98,15 +143,52 @@ export default {
                 title: '订单状态',
                 list: [
                     { label: '全部', value: '' },
-                    { label: '已完成', value: '1' },
-                    { label: '已退款', value: '0' },
+                    { label: '已支付', value: '1' },
+                    { label: '已使用', value: '2' },
+                    { label: '已退款', value: '4' },
                 ],
-                curValue: this.condition.status,
+                curValue: this.condition.pay_status,
                 success: res=>{
-                    this.condition.status = res.value;
+                    this.condition.pay_status = res.value;
                 }
             });
         },
+        /**
+         * @param {String} number 卡号或者手机号
+         * @param {String} pay_status 
+         * 0：未支付；1：已支付；2：已使用；4：已退款；5：退款中；6：拒绝退款；7：关闭支付；8：使用中
+         * 
+         * */ 
+        getCardOrderList({ 
+            brand_id = '', stadium_id = '', 
+            start_time = '', end_time = '', number = '', pay_status = '',
+            page = 1, page_size = 10, order_no = ''
+        }){
+            showLoad();
+            return server.get({
+                url: SHOWER_API.cardOrderList,
+                data: { 
+                    brand_id, stadium_id, start_time, end_time, 
+                    number, pay_status, page, page_size,
+                    order_no
+                },
+                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('shower order list getCardOrderList err --->', err);
+                // return Promise.reject(err);
+            })
+        },
     }
 }
 </script>