XEH-miniProgram/pages/self/bill/index.vue

<template>
	<view class="page-wrap">
		<view class="fixed-header">
			<view class="search-input">
				<input
					class="input"
					placeholder-style="color: #999"
					type="text"
					placeholder="关键词"
					maxlength="20"
					confirm-type="search"
					v-model="listForm.keyword"
					@confirm="getBillList"
				/>
				<image class="icon" src="../../../static/icon_search.png"></image>
			</view>
			<button class="filter" @click="handleOpenFilter">筛选</button>
		</view>
		<view class="invoice-panel">
			<view class="item" @click="handleOpenDetail(item.billId)" v-for="(item, index) in listData" :key="index">
				<view class="name">{{ item.payType }}# {{ item.billType }}</view>
				<view class="desc">账单编号：{{ item.billId }}</view>
				<view class="desc">创建时间：{{ item.createTime }}</view>
				<view class="desc">所属订单：--</view>
				<view class="state">{{ numberfilter(item.amount) }}</view>
			</view>
			<view class="c-abnor" v-if="!listData.length">
				<image class="icon" src="@/static/svg/bags.svg"></image>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
import billService from '@/api/bill.js';
import { numberfilter } from '@/utils/filter';
export default {
	data() {
		return {
			listForm: {
				keyword: '',
				type: '',
				date: '最近30天',
				sort: 'asc'
			},
			listData: []
		};
	},
	onLoad(option) {
		this.getBillList();
		uni.$on('updateData', (data) => {
			this.listForm = data;
			this.getBillList();
		});
	},
	onPullDownRefresh() {
		this.getBillList();
	},
	methods: {
		// 获取账单列表
		async getBillList() {
			const { rows } = await billService.getBillList(this.listForm);
			this.listData = rows;
			uni.pageScrollTo({ scrollTop: 0 });
			uni.stopPullDownRefresh();
		},
		// 打开筛选
		handleOpenFilter() {
			uni.navigateTo({
				url: 'filter',
				success: (res) => {
					res.eventChannel.emit('updateData', this.listForm);
				}
			});
		},
		// 打开详账单情
		handleOpenDetail(id) {
			uni.navigateTo({
				url: 'detail?id=' + id
			});
		},
		numberfilter
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>