leromro-mini/pages_mine/pages/income/index.vue

<template>
    <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
        class="scroll-view-class" @scrolltolower="scrolltolower" scroll-y>
        <view class="income-main">
            <view class="income-header card-box">
                <!-- <text class="income-title" @click="onShows">
                    {{ dataYMD }}
                </text>
                <view class="income-header-right">
                    <text>收入: ¥{{ data.totalEarning }}</text>
                    <text class="income-header-right-right">支出: ¥{{ data.totalExpend }}</text>
                </view> -->
                <text>收入: ¥{{ data.totalEarning }}</text>
                <text class="income-header-right-right">支出: ¥{{ data.totalExpend }}</text>
            </view>

            <view v-if="data.clientAccountChangeVOlist && data.clientAccountChangeVOlist.length > 0">
                <view class="card-box " v-for="item in data.clientAccountChangeVOlist" :key="item.code"
                   style="padding-bottom: 0;" >
                    <view class="icome-item hr-solid ">
                        <view class="card-left">
                            <!-- <img :src="baseUrl" alt="" class="income-img"> -->
                            <view class="card-left-text">
                                <view class="card-left-name">
                                    <dict-tag
                                        :options="userType === 1 ? jlzj_client_source_type : jlzj_volunteer_source_type"
                                        :value="item.sourceType" />

                                    <!-- ({{ item.businessTierName }}) -->
                                </view>
                                <view class="card-left-date">
                                    {{ item.createTime }}

                                </view>
                            </view>
                        </view>

                        <view class="card-rigth">
                            <view
                                :style="{ color: item.changeType === '1' ? 'rgba(76, 175, 80, 1)' : 'rgba(244, 67, 54, 1)' }">
                                {{ item.changeType === '1' ? '+' : '-' }}{{ item.changeMoney }}</view>

                            <view class="is_pay_class" >
                                {{ item.afterBalance }}
                                <!-- <dict-tag :options="is_pay" :value="item.isPay" /> -->
                            </view>
                        </view>
                    </view>
                    <view class="flex_c_s card-item" @click="onBillClick(item)" v-if="['10', '11'].includes(item.sourceType)">
                        <view class="font-28-14">账单详情</view>
                       <view class="flex_c_r">
                            <view class="font-28-grey">点击查看账单详情</view>
                            <up-icon name="arrow-right" color="#7B7B7B" size="16"></up-icon>
                       </view>
                    </view>
                    <view class="flex_c_s card-item hr-solid-top" @click="onClick(item)" v-else>
                        <view class="font-28-14">订单详情</view>
                        <view class="flex_c_r">
                            <view class="font-28-grey">点击查看订单详情</view>
                            <up-icon name="arrow-right" color="#7B7B7B" size="16"></up-icon>
                       </view>
                    </view>
                </view>
                <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
                    :loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
                    :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" />
            </view>
            <view v-else>
                <NoneView value="您还没有相关账单" />
            </view>


            <up-datetime-picker :show="show" v-model="datetime" mode="date" ref="uPickerRef" @confirm="confirm"
                @cancel="cancel"></up-datetime-picker>
        </view>
    </scroll-view>

</template>

<script setup>
import { ref, computed } from 'vue'
import { getAccountChangeList, getTotalMoney, getVolunteerTotalMoney, getVolunteerChangeList } from "@/api/mine";
import {
    onShow
} from '@dcloudio/uni-app';
import config from '@/config'
import DictTag from '@/components/DictTag/index.vue'
import {
    useDict
} from '@/utils/dict.js';
import dayjs from 'dayjs/esm/index'
import NoneView from '@/components/NoneView/index.vue'
const {
    jlzj_money_change_type,
    jlzj_client_source_type,
    jlzj_volunteer_source_type,
    is_pay
} = useDict('jlzj_money_change_type', 'jlzj_client_source_type', 'jlzj_volunteer_source_type', 'is_pay');
const userType = uni.getStorageSync('userType') //读取本地存储
const data = ref({
    totalEarning: 0,
    totalExpend: 0,
    clientAccountChangeVOlist: []
})

const show = ref(false);
const datetime = ref(Date.now());

const dataYMD = computed(() => {
    return dayjs(datetime.value).format("YYYY年MM月DD日")
})

const uPickerRef = ref(null)
const isRefreshing = ref(false)


const loadmoreInfo = ref({
    status: 'loadmore',
    loadingText: '努力加载中...',
    loadmoreText: '点击加载更多~',
    nomoreText: '已经到底啦～'
})
const pages = ref({
    current: 1,
    pageSize: 10,
    total: 0,
})
const onShows = () => {
    show.value = true;
};

const confirm = () => {
    show.value = false;
    init('top');
    totalInit();
};

const cancel = () => {
    show.value = false;
};
const onBillClick = (record) => { 
    uni.navigateTo({
            url: `/pages_mine/pages/income/details?sourceId=${record.sourceId}&sourceType=${record.sourceType}`
        })
};
const onClick = (record) => {
    console.log("TCL: onClick -> record", record);

    if (userType === 1) {
        record.mainOrderId ? uni.navigateTo({
            url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${record.mainOrderId}`
        }): uni.showToast({
            title: '订单不存在',
            icon: 'none',
        });
    } else {
        record.secondOrderId ?uni.navigateTo({
            url: `/pages_classify/pages/order/index?secondOrderId=${record.secondOrderId}&type=details`,
        }): uni.showToast({
            title: '订单不存在',
            icon: 'none',
        });
    }

}
const scrolltolower = () => {
    init('bottom')
};

const onCustomRefresh = () => {
    isRefreshing.value = true;
    pages.value.current = 1;
    // data.value.clientAccountChangeVOlist = [];
    init('top')
};

const init = async (type) => {
    try {


        if (type === 'bottom') {
            if (data.value.clientAccountChangeVOlist.length < pages.value.total) {
                loadmoreInfo.value.status = 'loading';
                pages.value.current++;
            } else {
                loadmoreInfo.value.status = 'nomore';
                return;
            }
        } else {
            uni.showLoading({
                title: '数据加载中...',
            })
        }

        const listApi = userType === 1 ? getAccountChangeList : getVolunteerChangeList;
        const res = await listApi({
            // createTime: dayjs(datetime.value).format('YYYY-MM-DD'),
            pageNum: pages.value.current,
            pageSize: pages.value.pageSize,
        });
        data.value.clientAccountChangeVOlist = type === 'top' ? res.rows : [...data.value.clientAccountChangeVOlist, ...res.rows];
        pages.value.total = res.total;
    } catch (error) {
        console.log('error', error);
        uni.showToast({
            title: error.msg,
            icon: 'error',
        });
    } finally {
        if (type === 'top') {
            isRefreshing.value = false;
            uni.hideLoading();
        }

        if (data.value.clientAccountChangeVOlist.length === pages.value.total) {
            loadmoreInfo.value.status = 'nomore';
        }
        // 
    }
}

const totalInit = async () => {
    try {
        const listApi = userType === 1 ? getTotalMoney : getVolunteerTotalMoney;
        const res = await listApi({
            // createTime: dayjs(datetime.value).format('YYYY-MM-DD'),
        });
        data.value.totalEarning = res.data.totalEarning;
        data.value.totalExpend = res.data.totalExpend;
    } catch (error) {
        console.log('error', error);
        uni.showToast({
            title: error.msg,
            icon: 'error',
        });
    }
}
onShow(() => {
    init('top');
    totalInit();
})
</script>

<style lang="scss" scoped>
.card-box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    padding: 12px;
    margin-bottom: 12px;
}

.income-main {
    // position: fixed;
    // top: 0px;
    // left: 0px;
    // right: 0px;
    // bottom: 0px;

    padding: 12px;
    // overflow: auto;

    .income-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 23.17px;
        color: rgba(0, 0, 0, 1);
    }

    .income-header {
        display: flex;
        align-items: center;
        justify-content: space-between;



        .income-header-right {
            font-size: 14px;
            font-weight: 500;
            line-height: 20.27px;
            color: rgba(0, 0, 0, 1);
            display: flex;
            align-items: flex-start;
            justify-content: center;

            .income-header-right-right {
                margin-left: 8rpx;
            }
        }

    }

}

.icome-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24rpx;

    .card-left {
        display: flex;
        align-items: center;

        .income-img {
            width: 40px;
            height: 40px;
        }

        .card-left-text {
            // margin-left: 12px;

            .card-left-name {
                font-size: 16px;
                font-weight: 700;
                line-height: 23.17px;
                color: rgba(0, 0, 0, 1);
                margin-bottom: 6px;

                display: flex;
                align-items: center;
            }

            .card-left-date {
                font-size: 14px;
                font-weight: 500;
                line-height: 16.41px;
                color: rgba(153, 153, 153, 1);


            }

        }

        .card-rigth {
            font-size: 20px;
            font-weight: 700;
            line-height: 23.44px;
            color: rgba(51, 51, 51, 1);



        }
    }

}

.card-rigth {
    display: flex;
    flex-direction: column;
    text-align: end;
}

.scroll-view-class {
    // height: 100%;
    height: 100vh;
    background: rgba(245, 245, 245, 1);
    // position: fixed;
    // top: 0px;
    // bottom: 0;
    // left: 0;
    // right: 0;
}

.is_pay_class {
    margin-top: 8rpx;
    font-size: 14px;


}

.card-item {
    padding: 24rpx 0;
}
</style>