jje_uniapp/myPages/transactionRecord/index.vue

<template>
    <view class="page">



    </view>
</template>
<script>

    export default {
        data() {
            return {
                showDataLoading: false,
                serviceTimeShow: false,
                show: false,
                mode: 'single',
                currentTab: 'tab1', // 当前选中的 Tab
                currentServiceTab: 'orderTab1', // 当前选中的 Tab
                searchTime: '2023-8-9',
                reqParm: {
                    auth: true,
                    pageSize: 20,
                    pageNum: 1,
                    dataTime: null,
                },
                value1: '',
                tranRecordsList: [],
                tranFlowstatistic: {}
            };
        },
        onLoad() {
            // 查询交易列表
            this.transactionRecordsList();
            this.value1 = Date.now();
            // 查询交流流水统计
            this.transactionFlowstatistic();
        },
        methods: {
            // 确定选择的服务日期
            sureChooseDate(){
                this.serviceTimeShow = false;
                // this.reqParm.startTime = uni.$u.timeFormat(this.value1, 'yyyy-mm-dd hh:MM:ss');
                this.reqParm.dataTime = uni.$u.timeFormat(this.value1, 'yyyy-mm');
            },
            // 交易列表
            transactionRecordsList(){
                let that = this;
                that.showDataLoading = true;
                this.$api.transactionRecordsList({data:this.reqParm}).then((res)=>{
                    that.tranRecordsList = res.data.rows;
                    that.showDataLoading = false;
                }).catch(() =>{
                    uni.showToast({
                        title: "操作失败"
                    })
                });
            },
            // 查询交易流水统计
            transactionFlowstatistic(){
                let that = this;
                that.showDataLoading = true;
                this.$api.transactionFlowstatistic({data:this.reqParm}).then((res)=>{
                    that.tranFlowstatistic = res.data.data;
                    that.showDataLoading = false;
                }).catch(() =>{
                    uni.showToast({
                        title: "操作失败"
                    })
                });
            },
            // 服务订单
            changeServiceTab(tab){
                // 交易号类型(订单号、退款单号):1 消费 2 充值 3退款
                if(tab == 'orderTab1'){
                    delete this.reqParm.tradeNoType;
                } else if(tab == 'orderTab2'){
                    this.reqParm.tradeNoType = '2';
                } else if(tab == 'orderTab3'){
                    this.reqParm.tradeNoType = '1';
                } else if(tab == 'orderTab4'){
                    this.reqParm.tradeNoType = '3';
                }
                // 处理查询参数
                if(!this.reqParm.dataTime){
                    let time = this.reqParm.dataTime;
                    this.reqParm.beginTime = time+'-01 00:00:00';
                    this.reqParm.endTime = this.maxDate(this.reqParm.beginTime);
                }
                this.transactionFlowstatistic();
                this.transactionRecordsList();
                this.currentServiceTab = tab;
            },

            // 详情
            orderDetail(item){
                uni.$u.route({
                    url: '/pages/transaction/transaction-detail',
                    params: {
                        data: JSON.stringify(item)
                    }
                })
            },
            showDate(){
                // this.show = true;
                this.serviceTimeShow = true;
            },
            confirm(e) {
                this.searchTime = e[0];
                this.show = false;
            },
            close() {
                this.show = false;
            },
            maxDate(selectedMonth) {
                if (!this.$isDataEmpty(selectedMonth)) {
                    // 将选定的月份转换为Date对象
                    let selected = new Date(selectedMonth);
                    // 获取下个月的第一天
                    let nextMonth = new Date(selected.getFullYear(), selected.getMonth() + 1, 1);
                    // 获取本月的最后一天
                    let lastDay = new Date(nextMonth - 1);
                    // 返回最大日期
                    return lastDay.toISOString().slice(0, 10);
                } else {
                    // 如果没有选定月份，则返回当前月份的最大日期
                    let today = new Date();
                    let nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
                    let lastDay = new Date(nextMonth - 1);
                    return lastDay.toISOString().slice(0, 10);
                }
            }
        },
    };
</script>
<style lang="scss" scoped>

    /* 服务订单内容*/
    .service-order-tab-bar{
        background: #fff;
        display: flex;
        justify-content: space-around;
        height: 50px;
        background-color: #f5f5f5;
        .service-order-tab-item{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #333;
            line-height: 26px;
        }
        .service-order-tab-item.active {
            color: #ff0000;
        }

        .underline {
            border-bottom: 2px solid #ff0000;
        }
    }

    .h-search{
        font-size: 14px;
        display: flex;
        padding-left: 12px;
        padding-top: 12px;
        padding-right: 12px;
        .h-time{
            width: 30%;
            display: flex;
            color: #333333;
            .time{
                padding-right: 2px;
            }
        }
        .h-name{
            width: 70%;
            text-align: right;
            display: flex;
            justify-content: flex-end;
            color: #999999;
            .name{
                padding-right: 6px;
            }
        }
    }

    .service-order{
        background: #fff;
        margin-top: 12px;
        padding-top: 12px;
    }

    /* 门店列表 */
    .store-wrap{
        border-radius: 2px;
        .row-list{
            padding-bottom: 12px;
            padding-left: 12px;
            padding-right: 12px;
            .store-content{
                display: flex;
                padding-bottom: 12px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                .store-img{
                    width: 60px;
                    .title-name{
                        width: 42px;
                        height: 42px;
                        color: #fff;
                        border-radius: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .orange{
                        background: #93D21A;
                    }
                    .skyblue{
                        background: #ED569F;
                    }
                    .pink{
                        background: #FFAF36;
                    }
                }
                .content{
                    width: 100%;
                    padding-left: 8px;
                    padding-top: 2px;
                    .title-price{
                        display: flex;
                        .title{
                            width: 60%;
                            font-family: "黑体", sans-serif;
                        }
                        .price{
                            text-align: right;
                            width: 40%;
                            color: #333333;
                            font-weight: 600;
                        }
                    }

                    .desc{
                        display: flex;
                        font-size: 12px;
                        .time{
                            color: #999999;
                            width: 60%;
                        }
                        .balance{
                            text-align: right;
                            width: 40%;
                            color: #999999;
                        }
                    }

                }

            }

        }

    }

    /* 产品订单 */
    .product-order{
        margin-top: 12px;
    }

    /* 底部 */
    .footer{
        margin-top: 30px;
        height: 120px;
        font-size: 12px;
        text-align: center;
        color: #666;
    }

</style>