recruitment-wechat-uniapp-241012/pages_order/kepp/AnnualExpenditure.vue

<template>
	<!-- 全年收支 -->
	<view class="page">
		<navbar title="全年收支" leftClick @leftClick="$utils.navigateBack" />
		<view class="page-two">
			<view class="option">
				<select class="select">
					<option value="option1">选择项目</option>
				</select>
			</view>
			<view class="wire"></view>

			<view class="select-date">
				<select class="select">
					<option value="option1">2024</option>
				</select>
			</view>

			<view class="card">
				<view class="card-one" style="border-right: 1px dashed #BCD2FE;">
					<image src="../../static/image/keepAccounts/BlueWallet.png" mode="aspectFill" />
					<view>
						<view>总收入(元)</view>
						<view style="color: #3889FF;">￥1223</view>
					</view>
				</view>

				<view class="card-two">
					<image src="../../static/image/keepAccounts/YellowWallet.png" mode="aspectFill" />
					<view>
						<view>总支出(元)</view>
						<view style="color: #FD961A;">￥1223</view>
					</view>
				</view>
			</view>
			<view class="cell" style="margin-top: 40rpx;">
				<uv-cell v-for="(item,index) in list" 
				:key="index"
				:label="item.billDate" 
				title="佣金收入" 
				:value="`${typeNo[item.type]}${item.amount}`"></uv-cell>
			</view>
		</view>

	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	export default {
		mixins : [mixinList],
		data() {
			return {
				mixinsListApi : 'queryBill',
				apiType : '',
				typeNo : ['+', '-'],
			}
		},
		onLoad({apiType}) {
			this.apiType = apiType
			this.mixinsListApi += apiType || ''
		},
		onShow() {},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.page {
		background-color: #fff;

		.page-two {
			width: 90%;
			margin-left: 5%;

			.wire {
				border-bottom: 4rpx dashed rgb(168, 197, 255);
			}

			.option {
				padding: 40rpx 40rpx 40rpx 0rpx;

				.select {
					background-color: #EBF0FC;
					padding: 15rpx 0rpx;
					border: none;
					color: #4280FD;
					width: 150rpx;
					text-align: center;
				}
			}

			.select-date {
				padding: 30rpx 0;

				.select {
					padding: 15rpx 0rpx;
					border: none;
					color: #4280FD;
				}
			}

			.card {
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #F2F5FD;

				.card-one,
				.card-two {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 150rpx;
					width: 50%;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				image {
					height: 50rpx;
					width: 50rpx;
					margin-right: 20rpx;
				}
			}
		}


	}
</style>