uniapp-shunfengche/pageA/invoice/kpjl.vue

<template>
	<view>
		<!-- 可开发票列表 -->
		<view class="fpList flex justify-center flex-wrap" v-if="orderList.length>0">
			<view class="fpList-box">
				<view class="fpList-box-item flex justify-center" v-for="(item,index) in orderList" :key="index">
					<view class="fpList-box-item-c flex justify-between align-center">
						<view class="fpList-box-item-c-l flex align-center">
							<view class="fpList-box-item-c-l-info">
								<view class="flex justify-between align-center" style="font-weight: bold;width: 646rpx;" :style="item.status==3?'color:red;':'color:green;'">
									{{item.status==1?'处理中':(item.status==2?'开票完成':'开票失败')}}
									
									<span style="font-weight: bold;color: black;">{{item.invoiceMoney}}元</span>
								</view>
								<view class="" style="color: rgb(126, 126, 126);margin-top: 10rpx;">
									<view class="">
										发票抬头：{{item.invoiceHeader}}
									</view>
									<view class="">
										纳税人识别号：{{item.taxPayerNumber}}
									</view>
									<view class="">
										发票金额：{{item.invoiceMoney}}
									</view>
									<view class="">
										开户行：{{item.bankDeposit}}
									</view>
									<view class="">
										银行卡号：{{item.bankNumber}}
									</view>
									<view class="">
										开户手机号：{{item.bankPhone}}
									</view>
									
								</view>
								<view class="fpList-box-item-c-l-info-c">
									开票内容：{{item.invoiceTitle}}
								</view>
								<view class="fpList-box-item-c-l-info-c">
									接收邮箱：{{item.userEmail}}
								</view>
								<view class="fpList-box-item-c-l-info-b">
									接收手机号：{{item.userPhone}}
								</view>
								<view class="fpList-box-item-c-l-info-t">
									<span>{{item.createTime}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>

		<empty v-if="orderList.length==0" style="height: 100vh;"/>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		data() {
			return {
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				orderList: [],
				page: 1,
				limit: 10,
				totalPage: 0,
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			this.getOrderList();
		},
		onReachBottom: function() {
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.status = 'loading'
				this.getOrderList();
			} else {
				this.status = 'nomore'
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getOrderList();
		},
		methods: {
			//开票数据
			getOrderList() {
				let data = {
					page: this.page,
					limit: this.limit,
				}
				this.$Request.getT("/app/invoice/getMyInvoiceList", data).then(res => {
					if (res.code == 0) {
						this.totalPage = res.data.pages
						let data = res.data.records
						if (this.page == 1) {
							this.orderList = data
						} else {
							if (data.length > 0) {
								this.orderList = this.orderList.concat(data)
							}
						}

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fpList {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		margin-bottom: 190rpx;

		.fpList-box {
			width: 686rpx;
			height: 100%;

			.fpList-box-item {
				width: 100%;
				// height: 200rpx;
				padding: 20rpx 0;
				border-radius: 26rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
			}

			.fpList-box-item-c {
				width: 646rpx;
				height: 100%;

				.fpList-box-item-c-l-info-t {
					font-size: 30rpx;
					font-weight: bold;

					span {
						color: #cccccc;
						font-size: 22rpx;
						font-weight: 300;
					}
				}

				.fpList-box-item-c-l-info-c {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: #FF7F00;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-l-info-b {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: black;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-r {
					margin-top: 94rpx;

					span {
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>