kaipiaolishi.vue 2.6 KB
<template>
	<view class="box">
		<view class="kaipiaolist" v-for="(item,index) in fapiaolist" :key="index"
								:value="item.id"  @click="detail" :data-id="item.id">
			<view class="kaipiaotop">
				<view class="kaipiaotime">{{item.createtime}}</view>
				<view class="kaipiaostate" v-if="item.status==0">待审核</view>
				<view class="kaipiaostate" v-if="item.status==1">待开票</view>
				<view class="kaipiaostate" v-if="item.status==2">待邮寄</view>
				<view class="kaipiaostate yiyou" v-if="item.status==3">已邮寄</view>
			</view>
			<view class="kaipiaobottom">
				<view class="btleft">
					{{item.mark}}
				</view>
				<view class="btright">{{item.money}}元</view>
			</view>
		</view>
		<!-- <view class="kaipiaolist">
			<view class="kaipiaotop">
				<view class="kaipiaotime">2018-01-29 10:52</view>
				<view class="kaipiaostate yiyou">已邮寄</view>
			</view>
			<view class="kaipiaobottom">
				<view class="btleft">
					发票内容xxxxxx
				</view>
				<view class="btright">12.34元</view>
			</view>
		</view>
		<view class="kaipiaolist">
			<view class="kaipiaotop">
				<view class="kaipiaotime">2018-01-29 10:52</view>
				<view class="kaipiaostate">待开票</view>
			</view>
			<view class="kaipiaobottom">
				<view class="btleft">
					发票内容xxxxxx
				</view>
				<view class="btright">12.34元</view>
			</view>
		</view>
 -->

	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				page: 1,
				fapiaolist:[]
			}
		},
		methods: {
			//获取开票历史
			gethistory() {
				let param = {
					page: this.page
				}

				app.post("api/person/invoiceRecord", param, 'get')
					.then(res => {
						console.log(res);
						this.fapiaolist=res
					})
					.catch(err => {});
			},
			detail(e){
				console.log(e)
				let id=e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/fapiaodetail/fapiaodetail?id='+id
				})
			}
				
		},

		mounted() {
			this.gethistory()
		}
	}
</script>

<style>
	.kaipiaolist {
		width: 686rpx;
		margin: 20rpx auto 0;
		background: #fff;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		border-radius: 14rpx;
	}

	.kaipiaotime {
		color: #7F8389;
		font-size: 30rpx;


	}

	.btleft {
		color: #0A0808;
		font-size: 32rpx;
	}

	.btright {
		color: #F29600;
		font-size: 36rpx;
	}

	.kaipiaostate {
		color: #F29600;
		font-size: 28rpx;
	}

	.kaipiaotop {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kaipiaobottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 66rpx;
	}

	.yiyou {
		color: #7F8389
	}
</style>