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" />
				<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">
				<view class="name">应付# 财税·年服务费</view>
				<view class="desc">账单编号：9885</view>
				<view class="desc">创建时间：2023-10-25 14:26:08</view>
				<view class="desc">所属订单：HC25263</view>
				<view class="state state-1">49760.00</view>
			</view>
			<view class="item">
				<view class="name">应付# 财税·年服务费</view>
				<view class="desc">账单编号：9885</view>
				<view class="desc">创建时间：2023-10-25 14:26:08</view>
				<view class="desc">所属订单：HC25263</view>
				<view class="state state-2">49760.00</view>
			</view>
			<view class="item">
				<view class="name">应付# 财税·年服务费</view>
				<view class="desc">账单编号：9885</view>
				<view class="desc">创建时间：2023-10-25 14:26:08</view>
				<view class="desc">所属订单：HC25263</view>
				<view class="state state-3">49760.00</view>
			</view>
		</view>
	</view>
</template>

<script>
import billService from '@/api/bill.js';
export default {
	data() {
		return {
			listForm: {
				type: '',
				date: '最近30天',
				sort: 'desc'
			}
		};
	},
	onLoad() {
		this.getBillList();
	},
	methods: {
		async getBillList() {
			const data = await billService.getBillList(this.listForm);
		},
		handleOpenFilter() {
			uni.navigateTo({
				url: 'filter',
				success: (res) => {
					res.eventChannel.emit('updateData', this.listForm);
				}
			});
		},
		handleOpenDetail() {
			uni.navigateTo({
				url: 'detail'
			});
		}
	}
};
</script>

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