yanzong_qianduan/pages/invoice/list.vue

<template>
	<view class="invoice">
		<view class="invoice-tab">
			<u-tabs height="126" :list="list" :is-scroll="false" v-model="current" active-color="#FF2525"
				inactive-color="#6F6F6F" font-size="30" @change="onTab"></u-tabs>
		</view>
		<view class="invoice-bd" v-if="current == 0">
			<view class="item" v-for="(item,index) in invoicList" :key="index">
				<view class="a">{{item.header}}</view>
				<view class="b">
					<view class="p">￥<text>{{item.price}}</text></view>
					<view class="t">{{item.created_at}}</view>
				</view>
			</view>
		</view>
		<view class="invoice-bd" v-else>
			<view class="li" v-for="(item,index) in invoicMyList" :key="index">
				<view class="a">{{item.type==1?'普通增值税发票':'普通发票'}}-{{item.invoice.source==1?'个人':'单位'}}</view>
				<view class="b">
					<view class="d">
						<view class="n">{{item.header}}</view>
						<view class="s">税号：{{item.duty_no}}</view>
					</view>
					<view class="e" @click="toEdit(item)">
						<image :src="$picUrl+'/static/order/edit.png'"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as InvoiceApi from '@/api/invoice'
	export default {
		data() {
			return {
				list: [{
					name: '发票记录'
				}, {
					name: '发票抬头'
				}],
				current: 0,
				invoicList: [],
				invoicMyList: [],
			};
		},
		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
			// 卸载全局事件订阅
			uni.$off('updateDataEvent')
		},
		onLoad(op) {
			this.current = op.current || 0
			if (this.current == 0) {
				this.getInvoicingLog()
			}
			if (this.current == 1) {
				this.getInvoicingMy()
			}
		},
		onShow() {
			uni.$on('updateDataEvent', () => {
				if (this.current == 0) {
					this.getInvoicingLog()
				}
				if (this.current == 1) {
					this.getInvoicingMy()
				}
			})
		},
		methods: {
			toEdit(item) {
				uni.navigateTo({
					url: "/pages/invoice/edit?detail=" + JSON.stringify(item) + '&source=' + 2
				})
			},
			onTab(e) {
				this.current = e
				console.log(e)
				if (e == 0) {
					this.getInvoicingLog()
				}
				if (e == 1) {
					this.getInvoicingMy()
				}
			},
			timestampToYds(timestamp) {
				//时间戳为10位需*1000，为13位不需乘1000
				let times = timestamp.length == 10 ? times * 1000 : timestamp;
				var date = new Date(times);
				let Y = date.getFullYear(),
					M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
					D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
					h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()),
					m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()),
					s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
			},
			getInvoicingMy(canReset = false) {
				let app = this;
				InvoiceApi.myInvoicing()
					.then(result => {
						app.invoicMyList = result.data.list
					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefresh', true, true)
			},
			getInvoicingLog(canReset = false) {
				let app = this;
				InvoiceApi.invoicingLog()
					.then(result => {
						if (result.data.list.length > 0) {
							result.data.list.forEach((elem) => {
								elem.created_at = app.timestampToYds(elem.created_at)
							});
						}
						app.invoicList = result.data.list

					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefresh', true, true)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.invoice {
		&-tab {
			margin-top: 6rpx;
			overflow: hidden;
		}

		&-bd {
			overflow: hidden;

			.li {
				padding: 40rpx 35rpx 40rpx 64rpx;
				overflow: hidden;
				background-color: #fff;

				.a {
					font-size: 32rpx;
					font-weight: 400;
					color: #454545;
				}

				.b {
					display: flex;
					align-items: baseline;
					justify-content: space-between;
					margin-top: 30rpx;

					.d {
						color: #AEAEAE;
						font-size: 32rpx;
						line-height: 60rpx;
					}

					.e {
						width: 44rpx;
						height: 44rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.item {
				padding: 40rpx 35rpx 40rpx 64rpx;
				overflow: hidden;
				background-color: #fff;
				margin-top: 10rpx;

				.a {
					font-size: 32rpx;
					font-weight: 400;
					color: #454545;
				}

				.b {
					display: flex;
					align-items: baseline;
					justify-content: space-between;
					margin-top: 30rpx;

					.p {
						color: #F21A1C;
						font-size: 24rpx;

						text {
							font-size: 32rpx;
						}
					}

					.t {
						font-size: 32rpx;
						font-weight: 400;
						color: #AEAEAE;
					}
				}
			}
		}
	}
</style>