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

<template>
    <view class="income-main">
        <view class="income-header card-box">
            <text class="income-title" @click="onShows">
                2025年4月
            </text>
            <view class="income-header-right">
                <text>收入:{{ data.totalEarning }}</text>
                <text>支出:{{ data.totalExpend }}</text>
            </view>
        </view>

        <view class="card-box icome-item" v-for="item in data.clientAccountChangeVOlist" :key="item.code">
            <view class="card-left">
                <!-- <img :src="baseUrl" alt="" class="income-img"> -->
                <!-- <view class="plus-box"><up-icon name="plus" color="rgba(244, 67, 54, 1)" size="25" ></up-icon></view>
                <view class="minus-box"> <up-icon name="minus" color="rgba(76, 175, 80, 1)" size="25" ></up-icon>></view> -->
                <view class="card-left-text">
                    <view class="card-left-name">
                      <text>  {{ item.businessTierName }}</text>
                      (<dict-tag :options="jlzj_money_change_type"
                      :value="item.sourceType" />)
                    </view>
                    <view class="card-left-date" :style="`color: ${item.color};`">{{ item.createTime }}</view>
                </view>
            </view>
            <view class="card-rigth">
                {{ item.changeMoney }}
            </view>

        </view>


        <up-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm"
            @change="changeHandler"></up-picker>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getAccountChangeList } 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';
    const {
        jlzj_money_change_type
	} = useDict('jlzj_money_change_type');
const baseUrl = config.baseUrl
const userType = uni.getStorageSync('userType') //读取本地存储
const data = ref({})

const show = ref(false);
const columns = reactive([
    ['中国', '美国'],
    ['深圳', '厦门', '上海', '拉萨']
]);
const columnData = reactive([
    ['深圳', '厦门', '上海', '拉萨'],
    ['得州', '华盛顿', '纽约', '阿拉斯加']
]);

const uPickerRef = ref(null)
const changeHandler = (e) => {
    const {
        columnIndex,
        value,
        values,
        index,
    } = e;

    if (columnIndex === 0) {
        uPickerRef.value.setColumnValues(1, columnData[index]);
    }
};

const onShows = () => {
    show.value = true;
};

const confirm = (e) => {
    console.log('confirm', e);
    show.value = false;
};

const init = async() => {
	try {
		uni.showLoading({
			title: '数据加载中...'
		});

		if(userType === 2){
			// const res = await getVolunteerAccountInfo();
			// data.value =res.data;			
		}
        if(userType === 1){
            const res = await getAccountChangeList();
            console.log(1,res);
            data.value = res.data;	
        }
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		uni.hideLoading();
	}
}
onShow(()=>{
    init();
})
</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;
    background: rgba(245, 245, 245, 1);
    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;
            flex-direction: column;
            justify-content: center;

        }

    }

}

.icome-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .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);
        }
    }

}


</style>