yijianbao_user_uniapp/pages_order/invoice/invoiceList.vue

<template>
	<view class="content">
		<mescroll-body top="0" bottom="0" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="list">
				<view class="listitem" v-for="(item,index) in dataList" :key="index">
					<view class="listitem-head es-pt-24 es-pr-24 es-pb-24 es-pl-24 x-bc">
						<view class="listitem-tag" :style="{visibility:item.invoiceKind ? 'visible':'hidden'}">{{item.invoiceKind}}</view>
						<!-- 开票状态0未开始2 :开票完成（ 最终状 态），
						其他状态分别为: 20:开票中; 21:开票成功签章中;22:开票失败;24: 开票成功签章失败;3:发票已作废 31: 发票作废中 
						备注：22、24状态时，无需再查询，请确认开票失败原因以及签章失败原因； 注：请以该状态码区分发票状态 -->
						<view class="tag tag_error" v-if="item.redStatus == '01'">作废</view>
						<template v-else>
							<view class="tag" :class="item.tagColor">{{statusOption(item)}}</view>
						</template>
					</view>
					<view class="listitem-con es-pr-24 es-pb-24 es-pl-24">
						<view class="x-f">
							<view class="label">开票类型：</view><text>{{item.billType==1 ? "个人/非企业单位" : "企业单位"}}</text>
						</view>
						<view class="x-f">
							<view class="label">发票抬头：</view><text>{{item.payerName}}</text>
						</view>
						<view class="x-f" v-show="item.payerTaxNo">
							<view class="label">发票税号：</view><text>{{item.payerTaxNo}}</text>
						</view>
						<view class="x-start" v-show="item.invoiceTime">
							<view class="label">开票时间：</view><text>{{item.invoiceTime}}</text>
						</view>
					</view>
					<view class="listitem-footer x-bc">
						<view class="priceinfo" :style="{visibility:item.orderAmount ? 'visible':'hidden'}">开票金额:<text class="price" style="font-size: 24rpx;">￥</text><text class="price">{{item.orderAmount}}</text></view>
						<view class="x-bc">
							<view class="btn x-c es-mr-20" v-if="!orderId" @click="handleOrder(item)">相关订单</view>
							<view class="btn x-c" @click="handleDetail(item)">查看详情</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {billList} from "@/api/store.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				userInfo: {},
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/empty_icon.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
				orderId: ''
			}
		},
		computed: {
			// // 开票状态0未开始2 :开票完成（ 最终状 态），
			// // 其他状态分别为: 20:开票中; 21:开票成功签章中;22:开票失败;24: 开票成功签章失败;3:发票已作废 31: 发票作废中 
			// // 备注：22、24状态时，无需再查询，请确认开票失败原因以及签章失败原因； 注：请以该状态码区分发票状态
			// tagColor() {
			// 	return (item)=> {
			// 		const tagColor = {
			// 			0: 'tag_info',
			// 			2: 'tag_success',
			// 			20: 'tag_info',
			// 			21: 'tag_info',
			// 			22: 'tag_error',
			// 			24: 'tag_error',
			// 			3: 'tag_error',
			// 			31: 'tag_error',
			// 		}
			// 		return item ? tagColor[item.status] || 'tag_info' : 'tag_info' 
			// 	}
			// },
			statusOption() {
				return (item)=> {
					const status = {
						0: '未开始',
						2: '开票完成',
						20: '开票中',
						21: '开票成功签章中',
						22: '开票失败',
						24: '开票成功签章失败',
						3: '发票已作废',
						31: '发票作废中',
					}
					return item&&item.statusMsg ? item.status == 2 ? status[item.status] : item.statusMsg : status[item.status]
				}
			},
		},
		onLoad(option) {
			this.orderId = option.orderId || ''
			if(this.orderId) {
				uni.setNavigationBarTitle({
					title: "开票记录"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "开票历史"
				})
			}
			this.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {}
		},
		onShow() {
			if(this.mescroll) this.mescroll.resetUpScroll()
		},
		methods: {
			tagColor(item) {
			    const map = {
			      0: 'tag_info',
			      2: 'tag_success',
			      20: 'tag_info',
			      21: 'tag_info',
			      22: 'tag_error',
			      24: 'tag_error',
			      3: 'tag_error',
			      31: 'tag_error',
			    };
			    return item ? map[item.status] || 'tag_info' : 'tag_info';
			  },
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调*/
			upCallback(page) {   
				//联网加载数据
				var that = this;
				var data = {
					orderId:this.orderId,
					userId: this.userInfo.userId,
					pageNum: page.num,
					pageSize: page.size
				};
				billList(data).then(res => {
					if(res.code==200){
						if (page.num == 1) {
							that.dataList = res.data.list.map(item=>({
								...item,
								tagColor:this.tagColor(item)
							}));
						} else {
							that.dataList = that.dataList.concat(res.data.list);
							that.dataList = that.dataList.map(item=>({
								...item,
								tagColor:this.tagColor(item)
							}));
						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			handleDetail(item) {
				uni.navigateTo({
					url: '/pages/store/invoice/invoiceDetail?id='+item.id
				})
			},
			handleOrder(item) {
				uni.navigateTo({
					url: '/pages/store/storeOrderDetail?orderId='+item.orderId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		background-color: #fff;
	}
	.tag {
		display: inline-flex;
		min-height: 20px;
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		box-sizing: border-box;
		white-space: nowrap;
		text-align: center;
		justify-content: center;
	}
	.tag_info {
		color: #909399;
	}
	.tag_success {
		color: #67c23a;
	}
	.tag_error{
		color: #f56c6c;
	}
	.content {
		padding: 24rpx;
		.listitem {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			word-break: break-all;
			&-head {
				// border-bottom: 1rpx solid #f7f7f7;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #9B9B9B;
			}
			&-tag {
				padding: 4rpx 10rpx;
				background: #fff;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #eee;
				margin-right: 10rpx;
				border-radius: 5rpx;
			}
			&-con {
				font-size: 24rpx;
				color: #626468;
			}
			.label {
				flex-shrink: 0;
				color: #222222;
			}
			.price {
				font-weight: 500;
				font-size: 30rpx;
				color: #FF5C03;
			}
			&-footer {
				font-size: 24rpx;
				padding: 0 24rpx 24rpx 24rpx;
			}
			.btn {
				width: 150rpx;
				height: 56rpx;
				border-radius: 66rpx 66rpx 66rpx 66rpx;
				border: 1px solid #DDDDDD;
				color: #666666;
			}
		}
	}
</style>