zjt

pages/command/command.vue

@@ -1,272 +1,286 @@
-<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;
-					}
-				}
-			}
-
-		}
-
-	}
+<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>