luoshan_web/pages/throughTrain/throughTrain.vue

<template>
	<view class="container">
		<view style="position: fixed;z-index: 2;width: 100%;background: #ffffff;top: 0;left: 0;">
			<view class="top_search">
				<u-search width="75%" shape="round" :action-style="styobj" bgColor='#f7f7f7' searchIconColor='#ccc'
					searchIconSize="28" placeholderColor="#BDBDBD" height="72" clearabled placeholder="请输入关键字搜索"
					v-model="form.content" @custom="custom" @search="search" @clear="clear" />
			</view>
			<view style="margin-top: 24rpx;">
				<u-tabs :list="typeList" :is-scroll="true" :current="current" @change="change" inactive-color="#999999"
					font-size='32' gutter='26' height="88" active-color="#DE2E27" bar-height="4" bar-width="64"
					:offset="offset" :bold='true'></u-tabs>
			</view>
		</view>
		<view class="list" v-if="list.length">
			<view class="mim-view" v-for="(item) in list" :key="item.id" @click="goComplaintDetails(item.id)">
				<view class="p1 mim-font-14 mim-multi-line">{{item.content || '--' }}</view>
				<view class="mim-flex-wrap-space-between" style="margin-top: 32rpx;">
					<view class="t mim-font-14">投诉人</view>
					<view class="t mim-font-14">{{item.complaint_name}}</view>
				</view>
				<view class="mim-flex-wrap-space-between" style="margin-top: 16rpx;">
					<view class="t mim-font-14">投诉时间</view>
					<view class="t mim-font-14">{{item.created_at}}</view>
				</view>
			</view>
			<u-divider bg-color='#f7f7f7' fontSize='24'>{{divider}}</u-divider>
		</view>
		<view v-else style="margin-top: 350rpx;">
			<u-empty></u-empty>
		</view>
		<view class="mim-view-list"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '1',
				styobj: {
					'width': '104rpx',
					'height': '56rpx',
					'background': '#de2e27',
					'border-radius': '32rpx',
					'line-height': '32px',
					'opacity': '1',
					'display': 'flex',
					'align-items': 'center',
					'justify-content': 'center',
					'color': '#ffffff',
					'font-size': '28rpx',
					'z-index': '2'
				},
				typeList: [],
				current: 0,
				offset: [10, -2],
				form: {
					deal_status: '',
					page: 1,
					per_page: 10,
					content: ''
				},
				list: [],
				page: '',
				divider: '没有更多数据啦~',
			}
		},
		// onLoad(e) {
		// 	this.form.deal_status = e.current || ''
		// },
		onShow() {
			this.throughTrainListFn()
			this.throughTrainNumFn()
		},
		onPullDownRefresh() {
			//下拉刷新
			this.throughTrainListFn()
			this.throughTrainNumFn()
		},
		onReachBottom() {
			//触底加载
			console.log('触底加载')
			this.divider = '加载中。。。'
			if (this.page > this.form.page) {
				this.form.page++
				this.throughTrainListFn(false)
			} else {
				this.divider = '没有更多数据啦~'
				this.$u.toast('没有更多数据啦~')
			}
		},
		methods: {
			async throughTrainListFn(empty) {
				try {
					uni.showNavigationBarLoading();
					if (empty !== false) {
						this.form.page = 1
						this.list = [];
					}
					const {
						data: {
							data,
							meta
						},
					} = await this.$u.api.throughTrainList(this.form);
					this.page = meta.pagination.total_pages;
					this.list = this.page > 1 ? [...this.list, ...data] : data;
					this.divider = '没有更多数据啦~';
				} catch (error) {
					console.error(error);
				} finally {
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
				}
			},
			//社情民意直通车数量查询
			async throughTrainNumFn() {
				const res = await this.$u.api.throughTrainNum()
				if (res.status === "success") {
					this.typeList = res.data
				}
				if (this.form.deal_status) {
					this.current = this.form.deal_status
				}
			},
			//切换
			change(index) {
				this.current = index;
				if (index == 0) {
					this.form.deal_status = ''
				} else {
					this.form.deal_status = index
				}
				this.throughTrainListFn()
			},
			search() {
				//搜索输入框内容
				this.throughTrainListFn()
			},
			custom() {
				//搜索输入框内容
				this.throughTrainListFn()
			},
			clear() {
				//清空输入框内容
				this.form.content = ''
				this.throughTrainListFn()
			},
			goComplaintDetails(e) {
				this.$u.route('/pages/throughTrain/throughTrainDetails', {
					id: e
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			/deep/.u-badge {
				min-width: 36rpx;
				height: 36rpx;
				padding: 0;
			}

			.top_search {
				background: #f7f7f7;
				border-radius: 50rpx;
				margin: 24rpx;
				padding-right: 16rpx
			}

			.list {
				padding-top: 220rpx;

				.mim-view {
					overflow: hidden;

					.p1 {
						color: #333;
					}

					.t {
						color: #999999;
					}

					.img_type {
						position: absolute;
						bottom: -80rpx;
						right: -60rpx;
						border-bottom: none;
					}
				}
			}

		}

	}
</style>