wangluohuoyun-huozhuapp/pages/mine/myAccount/bill.vue

<template>
	<view class="center">
		<view @click="dataShow = true" class="data_top">{{data}} 年
			<image src="../../../static/images/myimg/gengduo1@3x.png" mode=""
				style="width:12rpx ;height: 20rpx;margin-left: 20rpx;"></image>
		</view>
		<u-picker :show="dataShow" :columns="columns" @confirm="dataChange" @cancel="dataShow = false"
			@close="dataShow = false"></u-picker>
		<view v-if='formlist.length>0' class="dataInfo_css">
			<view class="formData" v-for="(item,index) in formlist" @click="billSee(item)">
				<view class="flex row">
					<view class="left-text">{{item.types}}</view>
					<view class="flex right-text">
						{{item.amountMoney}}
					</view>
				</view>
				<view class="flex">
					<view class="order_no">
						
						<text v-if="item.types == '提现'">{{item.status}}</text>
						<text v-else>{{item.orderNo?item.orderNo:""}}</text>
						
					</view>
					<view class="date_css">
						{{item.createDate}}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="noBill">暂无账单</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "", //1个人  2 企业
				companyId: "",
				pageSize: 10,
				currentPage: 1,
				data: "2023",
				dataShow: false,
				value1: Number(new Date()),
				columns: [
					["2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033",
						"2034", "2035"
					],
				],
				startDate: "",
				endDate: "",
				formlist: []


			}
		},
		onLoad(options) {
			this.type = options.type
			this.companyId = options.id
			this.getList()

		},
		onShow() {

		},
		methods: {
			billSee(val){
				if(val.types == '提现'){
					uni.$u.route('/pages/mine/myAccount/billView?id=' + val.id)
				}
			},
			dataChange(e) {
				this.data = e.value[0]
				this.dataShow = false
				this.getList()
			},
			getList() {
				// commonId ，companyId，date
				this.startDate = this.data + "-01-01"
				this.endDate = this.data + "-12-31"
				if (this.type == 1) { //个人
					this.$request.baseRequest('get', '/hyCargoOwnerCapitalInfo/selectBill', {
						commonId: uni.getStorageSync("userInfo").id,
						startDate: this.startDate,
						endDate: this.endDate,
						pageSize: this.pageSize,
						currentPage: this.currentPage,
					}).then(res => {
						this.formlist = res.data.records
					})
				} else if (this.type == 2) {
					this.$request.baseRequest('get', '/hyCargoOwnerCapitalInfo/selectBill', {
						companyId: this.companyId,
						startDate: this.startDate,
						endDate: this.endDate,
						pageSize: this.pageSize,
						currentPage: this.currentPage,
					}).then(res => {
						this.formlist = res.data.records

					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		// padding:0 20rpx;
		background: #F5F6FA;
		height: calc(100vh - 1vh);
		overflow: scroll;
		.data_top{
			padding: 20rpx 30rpx 0;
			background: #ffffff;
			height: 80rpx;
		}
		.dataInfo_css{
			padding: 10rpx 30rpx 20px;
			background: #ffffff;
			width: 85%;
			border-radius: 20rpx;
			margin: 20rpx auto;
			
			.formData {
				height: 140rpx;
				border-bottom: 2rpx solid #EEEEEE ;
				.tips {
					text-align: right;
					border-bottom: 2rpx solid #e6e6e6;
					height: 60rpx;
				}
			
				.row {
					margin: 30rpx 0;
				}
			
				.left-text {
					// background: red;
					width: 40%;
					color: #333333;
					display: flex;
					align-items: center;
				}
			
				.right-text {
					width: 60%;
					justify-content: flex-end;
				}
			
				.order_no {
					width: 50%;
					color: #999999 ;
					font-size: 28rpx;
				}
			
				.date_css {
					width: 50%;
					text-align: right;
					color: #999999 ;
					font-size: 28rpx;
				}
			}
		}
		.noBill{
			text-align:center;padding:10px;
			background: #FFFFFF;
			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			height: 70rpx;
		}
	}
</style>