账单列表接口交互；账单列表参数与筛选参数格式化对齐；post请求适配form格式；

api/bill.js

@@ -4,9 +4,14 @@ const openid = uni.getStorageSync('openid')
 
 const billService = {
 	// 获取我的账单列表
-	getBillList: params => request.post('/bill/list', {
+	getBillList: params => request.postForm('/bill/list', {
 		...params,
 		openid
+	}),
+	// 获取我的账单列表
+	getBillDetail: id => request.postForm('/bill/info', {
+		id,
+		openid
 	})
 }
 

api/enterprise.js

@@ -14,7 +14,7 @@ const enterpriseService = {
 		openid
 	}),
 	// 获取绑定企业详细信息
-	getEnterpriseDetail: (customer_id) => request.post('/company/info', {
+	getEnterpriseDetail: (customer_id) => request.postForm('/company/info', {
 		customer_id,
 		openid
 	})

api/index.js

@@ -1,5 +1,4 @@
-const baseRequest = async (url, method, data = {}, loading = true) => {
-	let header = {}
+const baseRequest = async (url, method, data = {}, loading = true, header = {}) => {
 	url = url.indexOf('https://') > -1 ? url : 'https://xnh.xazhima.com/prod-api/wap/business/weixin' + url
 	return new Promise((reslove, reject) => {
 		loading && uni.showLoading({
@@ -8,7 +7,7 @@ const baseRequest = async (url, method, data = {}, loading = true) => {
 		uni.request({
 			url,
 			method: method || 'GET',
-			header: header,
+			header,
 			timeout: 10000,
 			data: data || {},
 			success: (successData) => {
@@ -56,6 +55,9 @@ const request = {
 		return baseRequest(newRequestPath, 'GET', data, loading)
 	},
 	post: (api, data, loading) => baseRequest(api, 'POST', data, loading),
+	postForm: (api, data, loading) => baseRequest(api, 'POST', data, loading, {
+		'content-type': 'application/x-www-form-urlencoded'
+	}),
 }
 
 export default request

api/order.js

@@ -4,7 +4,7 @@ const openid = uni.getStorageSync('openid')
 
 const orderService = {
 	// 获取我的订单列表
-	getOrderList: status => request.post('/order/list', {
+	getOrderList: status => request.postForm('/order/list', {
 		status,
 		openid
 	})

pages.json

@@ -124,7 +124,8 @@
 		{
 			"path": "pages/self/bill/index",
 			"style": {
-				"navigationBarTitleText": "我的账单"
+				"navigationBarTitleText": "我的账单",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

pages/self/bill/detail.vue

@@ -100,13 +100,23 @@
 </template>
 
 <script>
+import billService from '@/api/bill.js';
 export default {
 	data() {
 		return {
-			isCollapse: false
+			isCollapse: false,
+			billId: ''
 		};
 	},
-	methods: {}
+	onLoad(option) {
+		this.billId = option.id;
+		this.getBillDetail();
+	},
+	methods: {
+		async getBillDetail() {
+			const data = await billService.getBillDetail(this.billId);
+		}
+	}
 };
 </script>
 

pages/self/bill/filter.vue

@@ -24,11 +24,13 @@
 		<view class="filter-item">
 			<view class="label">日期排序</view>
 			<view class="tag-group">
-				<view :class="{ item: true, active: item.value === filterForm.sort }" v-for="(item, index) in sortOption" :key="index">{{ item.label }}</view>
+				<view :class="{ item: true, active: item.value === filterForm.sort }" v-for="(item, index) in sortOption" :key="index" @click="filterForm.sort = item.value">
+					{{ item.label }}
+				</view>
 			</view>
 		</view>
 		<view class="btn-group">
-			<button class="btn btn-1">重置</button>
+			<button class="btn btn-1" @click="handleReset">重置</button>
 			<button class="btn" @click="handleSubmit">确定</button>
 		</view>
 	</view>
@@ -39,10 +41,11 @@ export default {
 	data() {
 		return {
 			filterForm: {
-				type: '',
-				dateType: '最近30天',
+				keyword: '',
+				type: '全部',
+				date: '最近30天',
 				dateRanges: [],
-				sort: 'desc'
+				sort: 'asc'
 			},
 			typeOption: ['全部', '应付账单', '应收账单'],
 			dateOption: ['最近30天', '最近90天', '本季度', '本年度'],
@@ -61,13 +64,42 @@ export default {
 	onLoad(option) {
 		const eventChannel = this.getOpenerEventChannel();
 		eventChannel.on('updateData', (data) => {
-			console.log(data);
-			// filterForm.
+			const isCustomDate = data.date.indexOf('至') > -1;
+			this.filterForm = {
+				keyword: data.keyword,
+				type: data.type === '' ? '全部' : data.type,
+				date: isCustomDate ? '自定义' : data.date,
+				dateRanges: isCustomDate ? data.date.split('至') : [],
+				sort: data.sort
+			};
 		});
 	},
 	methods: {
 		handleSubmit() {
+			const { keyword, type, date, dateRanges, sort } = this.filterForm;
+			if (date === '自定义' && !dateRanges.length) {
+				uni.showToast({
+					title: '请选择自定义日期',
+					icon: 'none'
+				});
+				return;
+			}
+			uni.$emit('updateData', {
+				keyword,
+				type: type === '全部' ? '' : type,
+				date: date === '自定义' ? dateRanges.join('至') : date,
+				sort
+			});
 			uni.navigateBack();
+		},
+		handleReset() {
+			this.filterForm = {
+				keyword: this.filterForm.keyword,
+				type: '全部',
+				date: '最近30天',
+				dateRanges: [],
+				sort: 'asc'
+			};
 		}
 	}
 };

pages/self/bill/index.scss

@@ -12,6 +12,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 0 68.68rpx;
+	z-index: 2;
 
 	&::before {
 		content: '';
@@ -26,14 +27,14 @@
 		width: 439.56rpx;
 		height: 61.81rpx;
 		position: relative;
-		&::after{
+		&::after {
 			content: '';
 			position: absolute;
 			left: -50%;
 			top: -50%;
 			right: -50%;
 			bottom: -50%;
-			transform: scale(.5);
+			transform: scale(0.5);
 			border: 2rpx solid #d0dde9;
 			border-radius: 8.24rpx;
 		}
@@ -89,7 +90,9 @@
 		justify-content: center;
 		font-size: 32.97rpx;
 		color: #fff;
+		background: #ccc;
 		&::after {
+			content: '未知';
 			font-size: 27.47rpx;
 			margin-top: 13.74rpx;
 		}

pages/self/bill/index.vue

@@ -2,32 +2,31 @@
 	<view class="page-wrap">
 		<view class="fixed-header">
 			<view class="search-input">
-				<input class="input" placeholder-style="color: #999" type="text" placeholder="关键词" maxlength="20" />
+				<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">
-				<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 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="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 class="c-abnor" v-if="!listData.length">
+				<image class="icon" src="@/static/svg/bags.svg"></image>
+				暂无数据
 			</view>
 		</view>
 	</view>
@@ -35,23 +34,38 @@
 
 <script>
 import billService from '@/api/bill.js';
+import { numberfilter } from '@/utils/filter';
 export default {
 	data() {
 		return {
 			listForm: {
+				keyword: '',
 				type: '',
 				date: '最近30天',
-				sort: 'desc'
-			}
+				sort: 'asc'
+			},
+			listData: []
 		};
 	},
-	onLoad() {
+	onLoad(option) {
+		this.getBillList();
+		uni.$on('updateData', (data) => {
+			this.listForm = data;
+			this.getBillList();
+		});
+	},
+	onPullDownRefresh() {
 		this.getBillList();
 	},
 	methods: {
+		// 获取账单列表
 		async getBillList() {
-			const data = await billService.getBillList(this.listForm);
+			const { rows } = await billService.getBillList(this.listForm);
+			this.listData = rows;
+			uni.pageScrollTo({ scrollTop: 0 });
+			uni.stopPullDownRefresh();
 		},
+		// 打开筛选
 		handleOpenFilter() {
 			uni.navigateTo({
 				url: 'filter',
@@ -60,11 +74,13 @@ export default {
 				}
 			});
 		},
-		handleOpenDetail() {
+		// 打开详账单情
+		handleOpenDetail(id) {
 			uni.navigateTo({
-				url: 'detail'
+				url: 'detail?id=' + id
 			});
-		}
+		},
+		numberfilter
 	}
 };
 </script>