jje_uniapp/myPages/transactionRecord/index.vue

<template>
    <view class="page">
        <u-sticky>
            <View class=" tabs">
                <u-tabs :list="tabList"
                        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 ">


                <picker class="picker" :end="endDate" @change="sureChooseDate" mode='date' fields="month"  range-key="label" >
                    <view class="left flex-row">
                        <text>{{dataTime || '全部'}}</text>
                        <image class="xialaImage" src="/static/transaction/u5.png"></image>
                    </view>
                </picker>

                <view v-if="dataTime" class="left flex-row" @click="showDate">
                    <text>全部</text>
                </view>

                <view class="right flex-row justify-around">
                    <text>新增:{{tranFlowstatistic.rechargeAmount || '0.00'}}</text>
                    <text>消费:{{tranFlowstatistic.consumeAmount || '0.00' }}</text>
                    <text>退款:{{tranFlowstatistic.refundAmount || '0.00' }}</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>


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

    export default {
        components: {
            MescrollItem
        },
        data() {
            return {
                windowHeight:'',
                tabIndex:0,
                tabList: [{
                    name: '全部',
                }, {
                    name: '消费'
                }, {
                    name: '新增',
                }, {
                    name: '微信退款'
                }, {
                    name: '余额退款'
                }],

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

            this.value1 = Date.now();
            // 查询交流流水统计
            this.transactionFlowstatistic();
        },
      computed: {
        endDate() {
          return this.getDate('end');
        }
      },
        methods: {
          getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
              year = year - 60;
            } else if (type === 'end') {
              year = year ;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
          },
            clickTab(e){
                this.tabIndex = e.index
            },
            swiperChange(e){
                this.tabIndex = e.detail.current
                this.transactionFlowstatistic()
                // if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
                // 	this.$refs.MescrollItem[e.detail.current].downCallback()
                // }
            },


            // 确定选择的服务日期
            sureChooseDate(e){
                this.dataTime = e.detail.value
                setTimeout(f=>{
                    this.$refs.MescrollItem[this.tabIndex].downCallback()
                },100)

                this.transactionFlowstatistic()
            },
            // 交易列表

            // 查询交易流水统计
            transactionFlowstatistic(){
                let that = this;
                let param = {
                    dataTime:this.dataTime,
                    tradeNoType:this.tabIndex
                }
                if (this.tabIndex === 0){
                    param={
                        dataTime:this.dataTime
                    }
                }
                this.$api.transactionFlowstatistic(param).then((res)=>{
                    that.tranFlowstatistic = res.data.data;
                })
            },

            // 详情
            orderDetail(item){
                uni.$u.route({
                    url: '/pages/transaction/transaction-detail',
                    params: {
                        data: JSON.stringify(item)
                    }
                })
            },
            showDate(){
                this.dataTime = '';
                setTimeout(f=>{
                    this.$refs.MescrollItem[this.tabIndex].downCallback()
                },100)
                this.transactionFlowstatistic()
            },

            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>