jje_uniapp/myPages/transactionRecord/index.vue

<template>
    <view class="page">
        <u-sticky  :disabled="isSticky">
            <View class=" tabs">
                <u-tabs :list="tabList" :scrollable="false"
                        lineWidth="30"
                        lineColor="#FFE05C"
                        :activeStyle="{
            					color: '#333333',
            					fontWeight: 'bold',
            					transform: 'scale(1.05)'
       							 }"
                        :current="tabIndex" @click="clickTab"></u-tabs>
            </View>

            <view class="statistics flex-row justify-between ">
                <view class="left flex-row" @click="showDate">
                    <text>{{dataTime || '全部'}}</text>
                    <image class="xialaImage" src="/static/transaction/u5.png"></image>
                </view>
                <view class="right flex-row justify-around">
                    <text>储值￥{{tranFlowstatistic.rechargeAmount || 0}}</text>
                    <text>消费-￥{{tranFlowstatistic.consumeAmount || 0 }}</text>
                    <text>退款-￥{{tranFlowstatistic.refundAmount || 0 }}</text>
                </view>
            </view>

        </u-sticky>

        <!-- 订单列表 -->
        <view :style="{'height':windowHeight}" >
            <swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
                <swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index" >
                    <view>
                        <mescroll-item ref="MescrollItem" :i="index"  :index="tabIndex" :dataTime="dataTime" :tabs="tabList" :height="windowHeight">
                        </mescroll-item>
                    </view>
                </swiper-item>
            </swiper>
        </view>


        <u-datetime-picker
                :show="serviceTimeShow"
                v-model="value1"
                mode="year-month"
                :closeOnClickOverlay="true"
                @confirm="sureChooseDate()"
        ></u-datetime-picker>


    </view>
</template>
<script>
    import MescrollItem from "./module/mescrollUni-item.vue";

    export default {
        components: {
            MescrollItem
        },
        data() {
            return {
                windowHeight:'',
                tabIndex:0,
                tabList: [{
                    name: '全部',
                }, {
                    name: '消费'
                }, {
                    name: '储值',
                }, {
                    name: '退款'
                }],

                showDataLoading: false,
                serviceTimeShow: false,
                show: false,
                mode: 'single',
                searchTime: '2023-8-9',
                value1: '',
                dataTime:'',
                tranRecordsList: [],
                tranFlowstatistic: {}
            };
        },
        onLoad() {
            let sysInfo = uni.getSystemInfoSync()
            this.windowHeight =sysInfo.windowHeight-94+'px'//除标题栏栏外的屏幕可用高度

            this.value1 = Date.now();
            // 查询交流流水统计
            this.transactionFlowstatistic();
        },
        methods: {

            clickTab(e){
                this.tabIndex = e.index
            },
            swiperChange(e){
                this.tabIndex = e.detail.current
                // if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
                // 	this.$refs.MescrollItem[e.detail.current].downCallback()
                // }
            },


            // 确定选择的服务日期
            sureChooseDate(e){
                this.serviceTimeShow = false;
                this.dataTime = uni.$u.timeFormat(e.value, 'yyyy-mm');
                this.$refs.MescrollItem[this.tabIndex].downCallback()

            },
            // 交易列表

            // 查询交易流水统计
            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: "操作失败"
                    })
                });
            },

            // 详情
            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>
    @import '/common/css/common.css';
    @import './index.rpx.css';
</style>