renshou/mine/invoice/invoice.vue

<template>
	<view>
		<view class="search-box">
			<view class="search ddflex">
				<image src="../static/mine/images/ssico.png" class="ssico"></image>
				<input placeholder="搜索发票抬头" placeholder-class="placeholder" v-model="title" @confirm="confirmTitle" class="ipt fflex" />
			</view>
		</view>
		<view class="filter ddflex">
			<view class="li">
				<picker class="picker" :range="state" range-key="label" @change="changeState">
					<view>{{stateName}}</view>
					<image src="../static/mine/images/bico.png" class="bico"></image>
				</picker>
			</view>
			<view class="li">
				<picker class="picker" :range="dateType" range-key="label" @change="changeDateType">
					<view>{{dateTypeName}}</view>
					<image src="../static/mine/images/bico.png" class="bico"></image>
				</picker>
			</view>
		</view>
		<block v-if="isShow">
		<view class="list" v-if="pageList && pageList.length > 0">
			<navigator :url="'/invoice/detail/detail?id=' + item.id" hover-class="none" class="li" v-for="(item,index) in pageList" :key="index">
				<image src="../static/mine/images/left.png" class="left"></image>
				<image src="../static/mine/images/right.png" class="right"></image>
				<view class="licon">
					<view class="lis ddflex">
						<label>发票抬头</label>
						<view class="fflex tover">{{item.title}}</view>
						<view class="sta ddflex" v-if="item.state == 1">待开票</view>
						<view class="sta ddflex" v-else><image src="../static/mine/images/fpico.png" class="fpico"></image>已开票</view>
					</view>
					<view class="lis ddflex ddflex">
						<label>开票金额</label>
						<view class="fflex">￥{{item.money}}</view>
					</view>
					<view class="lis ddflex">
						<label>开票内容</label>
						<view class="fflex tovers">{{item.content}}</view>
					</view>
				</view>
			</navigator>
		</view>
		<view class="no-invoice" v-else>
			<image src="../static/mine/images/empty.png"></image>
			<view class="tip">暂无开票记录~</view>
			<navigator url="/mine/order/order" hover-class="none" class="btn">去开票</navigator>
		</view>
		</block>
	</view>
</template>

<script>
	const req = require('../../utils/request.js');
	export default {
		data() {
			return{
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				title: '',
				state: [
					{
						label: '待开票',
						value: 1
					},
					{
						label: '已开票',
						value: 2
					}
				],
				stateIndex: -1,
				stateName: '状态',
				dateType: [
					{
						label: '一周内',
						value: 1
					},
					{
						label: '一月内',
						value: 2
					},
					{
						label: '一季度内',
						value: 3
					},
					{
						label: '一年内',
						value: 4
					}
				],
				dateTypeIndex: -1,
				dateTypeName: '发票日期',
				isShow: false
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: req.public.titleTopBgColor
			});
			this.getPageList();
		},
		onReachBottom() {
			this.form.page++;
			this.getPageList();
		},
		methods:{
			confirmTitle(e){
				this.title = e.detail.value;
				this.form.page = 1;
				this.isLoad = true;
				this.getPageList()
			},
			changeState(e){
				this.stateIndex = e.detail.value;
				this.stateName = this.state[this.stateIndex].label;
				this.form.page = 1;
				this.isLoad = true;
				this.getPageList()
			},
			changeDateType(e){
				this.dateTypeIndex = e.detail.value;
				this.dateTypeName = this.dateType[this.dateTypeIndex].label;
				this.form.page = 1;
				this.isLoad = true;
				this.getPageList()
			},
			getPageList(){
				let isShowLoading = false;
				if (this.form.page == 1 && !isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = that.form;
				if(that.title){
					form.title = that.title;
				}else{
					delete form.state;
				}
				if(this.stateIndex > -1){
					form.state = this.state[this.stateIndex].value;
				}else{
					delete form.state;
				}
				if(this.dateTypeIndex > -1){
					form.dateType = this.dateType[this.dateTypeIndex].value;
				}else{
					delete form.dateType;
				}
				req.getRequest('/api/invoice/list', form, data => {
					if (data.list && data.list.length == 10) this.isLoad = true;
					if (that.form.page > 1) data.list = that.pageList.concat(data.list);
					that.pageList = data.list
					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
					that.isShow = true;
				});
			}
		}
	}
</script>

<style>
	@import "./invoice.css";
</style>