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

<template>
	<!-- 记工记账 -->
	<view class="page">
		<navbar title="记工记账" leftClick @leftClick="$utils.navigateBack" />
		
		<view style="font-weight: 500; margin-top: 20rpx;">
			<uv-tabs :list="tabsSatus" lineWidth="0" 
			lineHeight="0" 
			:scrollable="false"
			@click="clickTabsType"
			activeStyle="color: #3796F8;"></uv-tabs>
		</view>
		<view class="page-two">
			<view class="cell" style="margin-top: 40rpx;"
			v-if="apiIndex == 0">
				<uv-cell v-for="(item,index) in list" 
				:key="index"
				:label="item.billDate" 
				:title="bill.typeTitle[item.type]" 
				:value="`${bill.typeNo[item.type]}${item.amount}`"></uv-cell>
			</view>
			
			<view class="cell" style="margin-top: 40rpx;"
			v-if="apiIndex == 1">
				<uv-cell v-for="(item,index) in list" 
				:key="index"
				:label="item.workDate" 
				:title="`工作${item.overtime}小时`" 
				:value="item.remarks"></uv-cell>
			</view>
		</view>
			
		<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	export default {
		mixins : [mixinList],
		data() {
			return {
				mixinsListApi : 'queryBill',
				apiType : '',
				tabsSatus : [
					{
						name: '记账',
						index: 0,
					}, 
					{
						name: '记工',
						index: 1,
					},
				],
				id : 0,
				bill : {
					typeNo : ['+', '-'],
					typeTitle : ['收入', '支出'],
				},
				apiIndex : 0,
				apiList : ['queryBill', 'notebookQueryWork'],
			}
		},
		onLoad({apiType, id}) {
			this.id = id
			this.queryParams.employNoteBookId = id
			this.apiType = apiType
			// this.mixinsListApi += apiType || ''
			this.mixinsListApi = this.apiList[this.apiIndex]
		},
		onShow() {},
		methods: {
			clickTabsType({index}){
				this.list = []
				this.apiIndex = index
				this.mixinsListApi = this.apiList[this.apiIndex]
				this.getData()
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		background-color: #fff;
		padding-bottom: 100rpx;
		.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 20rpx;
					border: none;
					color: #4280FD;
				}
			}

			.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>