yanzong_qianduan/pages/invoice/index.vue

<template>
	<view class="invoice">
		<view class="invoice-bd">
			<view class="item" :class="tabIndex == index?'item-on':''" v-for="(item,index) in invoicList" :key="index">
				<view class="hd">
					<view class="l" @click="toDetail(item.id)">
						<view class="a">
							<text>单位</text>{{item.header}}
						</view>
						<view class="b">
							<text>税号</text>{{item.duty_no}}
						</view>
					</view>
					<view class="r" @click.stop="onUse(item)">使用</view>
				</view>
				<view class="bd">
					<view class="c" @click.stop="selectItem(index,item.id)">
						<image v-if="tabIndex == i" src="/static/invoice/select-on.png"></image>
						<image v-else src="/static/invoice/select.png"></image>
						{{tabIndex == i?'已设为默认':'设为默认'}}
					</view>
					<view class="d">
						<text @click.stop="onEdit(item)">编辑</text>
						<text @click.stop="onDel(item.id)">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="invoice-fd" @click="onAddInvoice">
			<text>+</text>添加发票抬头
		</view>
		<empty v-if="isShow" :isLoading="isLoading" tips="暂无相关信息" />
	</view>
</template>

<script>
	import * as InvoiceApi from '@/api/invoice'
	export default {
		data() {
			return {
				isLoading: false,
				tabIndex: 1,
				isShow: true,
				invoicList: [],
				orderId: '',
				order: ''
			};
		},
		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
			// 卸载全局事件订阅
			uni.$off('updateDataEvent')
		},
		onLoad(op) {
			this.order = op.order ? JSON.parse(op.order) : '';
			this.orderId = op.orderId,
			this.getMyInvoicing()
		},
		onShow() {
			uni.$on('updateDataEvent', () => {
				this.getMyInvoicing()
			})
		},
		methods: {
			// 确认收货
			onDel(Id) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认删除了吗？',
					success(o) {
						if (o.confirm) {
							InvoiceApi.invoicingDel(Id)
								.then(result => {
									// 显示成功信息
									app.$success(result.message)
									// 刷新订单列表
									app.getMyInvoicing()
								})
						}
					}
				});
			},
			getMyInvoicing(canReset = false) {
				let app = this;
				InvoiceApi.myInvoicing()
					.then(result => {
						app.invoicList = result.data.list

					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefresh', true, true)
			},
			selectItem(i, Id) {
				this.tabIndex = i
			},
			onUse(item) {
				uni.navigateTo({
					url: "/pages/invoice/edit?detail=" + JSON.stringify(item) + '&source=' + 1 + '&orderId=' + this
						.orderId + '&order=' + (this.order ? JSON.stringify(this.order) : '')
						.orderId
				})
			},
			onEdit(item) {
				uni.navigateTo({
					url: "/pages/invoice/edit?detail=" + JSON.stringify(item) + '&source=' + 4
						.orderId
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/invoice/detail?id=" + id
				})
			},
			onAddInvoice() {
				uni.navigateTo({
					url: "/pages/invoice/edit?source=" + 3
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.invoice {
		padding: 0 0 30rpx;
		overflow: hidden;

		&-bd {
			overflow: hidden;

			.item {
				padding: 10rpx 14rpx 10rpx 60rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-top: 20rpx;
				background-color: #FFFFFF;

				&:first-child {
					margin-top: 0;
				}

				.hd {
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					border-bottom: 1px solid #F3F3F3;

					.a {
						padding-top: 15rpx;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 400;
						color: #262626;

						text {
							width: 98rpx;
							height: 44rpx;
							background: #FDF4F4;
							border-radius: 8rpx;
							text-align: center;
							display: block;
							margin-right: 30rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #E02E24;
							line-height: 44rpx;
						}
					}

					.b {
						padding: 20rpx 0;
						font-size: 32rpx;
						font-weight: 400;
						color: #838383;

						text {
							color: #262626;
							margin-right: 30rpx;
						}
					}

					.r {
						width: 104rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						text-align: center;
						line-height: 60rpx;
						border: 1px solid #CACACA;
						font-size: 28rpx;
						font-weight: 400;
						color: #555555;
					}
				}

				.bd {
					padding: 20rpx 0;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.c {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 400;
						color: #A2A2A2;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 30rpx;
						}
					}

					.d {
						width: 200rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #B8B8B8;

						text {
							margin-left: 30rpx;
							cursor: pointer;
						}
					}
				}

				&-on {
					.bd .c {
						color: #E02E24;
					}
				}
			}

		}

		&-fd {
			width: 664rpx;
			height: 104rpx;
			background: #F55349;
			border-radius: 8rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 60rpx;
				margin-right: 14rpx;
				margin-top: -5px;
			}
		}
	}
</style>