luoshan_web/pages/command/command.vue

<template>
	<view class="container">
		<view style="position: fixed; z-index: 2; top: 0; width: 100%; background: #ffffff">
			<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.body"
					@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="gutter"
					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)">
				<view class="h mim-font-16">
					{{ item.category_1 ? item.category_1.name : '' }}
					{{ item.category_2 ? '/' + item.category_2.name : '' }}
					{{ item.category_3 ? '/' + item.category_3.name : '' }}
					{{ item.category_4 ? '/' + item.category_4.name : '' }}
					{{ item.category_5 ? '/' + item.category_5.name : '' }}
					<u-tag v-if="item.is_more_department == 1 && item.check_status == 1" text="待指派" type="warning" size="mini" />
					<u-tag v-if="item.is_more_department == 1 && item.check_status == 2" text="指派任务" type="warning" size="mini" />
					<u-tag v-if="item.is_more_department == 0" text="主任务" type="success" size="mini" />
				</view>
				<view class="p1 mim-font-14 mim-multi-line">{{ item.body }}</view>
				<view class="t mim-font-14">{{ item.created_at }}</view>
				<view class="img_type">
					<u-image v-if="item.deal_status == '1'" src="@/static/images/index/dcl.png" width="240rpx" height="240rpx"></u-image>
					<u-image v-else-if="item.deal_status == '2'" src="@/static/images/index/clz.png" width="240rpx" height="240rpx"></u-image>
					<u-image v-else-if="item.deal_status == '3'" src="@/static/images/index/clwj.png" width="240rpx" height="240rpx"></u-image>
				</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 {
			name: '',
			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,
				body: '',
				is_more_department: '',
				check_status: ''
			},
			list: [],
			page: '',
			divider: '没有更多数据啦~',
			gutter: '42',
			admin: false //当前用户是否为管理员
		};
	},
	onShow() {
		let roles = this.userRoles;
		let arr = roles.filter((item) => {
			return item.name == 'admin';
		});
		if (arr.length > 0) {
			this.admin = true;
		} else {
			this.admin = false;
		}
		this.commandListFn();
		this.commandNumFn();
	},
	onPullDownRefresh() {
		//下拉刷新
		this.commandListFn();
		this.commandNumFn();
	},
	onReachBottom() {
		//触底加载
		console.log('触底加载');
		this.divider = '加载中。。。';
		if (this.page > this.form.page) {
			this.form.page++;
			this.commandListFn(false);
		} else {
			this.divider = '没有更多数据啦~';
			this.$u.toast('没有更多数据啦~');
		}
	},
	methods: {
		async commandListFn(empty) {
			try {
				uni.showNavigationBarLoading();
				if (empty !== false) {
					this.form.page = 1;
					this.list = [];
				}
				const {
					data: { data, meta }
				} = await this.$u.api.commandList(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 commandNumFn() {
			const res = await this.$u.api.commandNum();
			if (res.status === 'success') {
				this.typeList = res.data;
			}
			if (this.typeList.length == 5) {
				this.gutter = '26';
			}
		},
		//切换
		change(index) {
			this.current = index;
			if (index == 0) {
				this.form.deal_status = '';
			} else {
				if (this.typeList.length == 4) {
					this.form.deal_status = index;
				} else {
					switch (index) {
						case 2:
							this.form.deal_status = 1;
							this.form.is_more_department = 1;
							this.form.check_status = 1;
							this.form.sortedBy = 'asc';
							this.form.orderBy = 'created_at';
							break;
						case 3:
							this.form.deal_status = 2;
							this.form.is_more_department = '';
							this.form.check_status = '';
							this.form.sortedBy = 'asc';
							this.form.orderBy = 'created_at';
							break;
						case 4:
							this.form.deal_status = 3;
							this.form.is_more_department = '';
							this.form.check_status = '';
							this.form.sortedBy = 'desc';
							this.form.orderBy = 'created_at';
							break;
						default:
							this.form.deal_status = index;
							this.form.is_more_department = '';
							this.form.check_status = '';
							this.form.sortedBy = 'asc';
							this.form.orderBy = 'created_at';
							break;
					}
				}
			}
			this.commandListFn();
		},
		search() {
			this.commandListFn();
		},
		custom() {
			this.commandListFn();
		},
		clear() {
			//清空输入框内容
			this.form.body = '';
			this.commandListFn();
		},
		goComplaintDetails(item) {
			if (item.is_more_department == 1 && item.check_status == 1 && this.admin) {
				this.$u.route('/pages/command/application', {
					id: item.id,
					type: 2
				});
			} else {
				this.$u.route('/pages/command/commandDetails', {
					id: item.id
				});
			}
		}
	}
};
</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 {
			// margin-top: 240rpx;
			padding-top: 220rpx;

			.mim-view {
				overflow: hidden;

				.h {
					font-weight: bold;
				}

				.p1 {
					color: #999;
					margin-top: 24rpx;
				}

				.t {
					color: #bdbdbd;
					margin-top: 48rpx;
				}

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