operation-applet/pages/index/order.vue

<template>
	<view class="page-content">
		<view class="page-search-container">
			<u-input type="select" class="page-search-text" :select-open="show" placeholder="请选择换电站" v-model="formData.name" @click="show = true"/>
			<view class="searchType-top-container">
				<view :class="current == 1 ? 'searchType-top-left-active' : 'searchType-top-left'" @click="tabsChange(1)">
					{{"待处理(" + pending + ")"}}
				</view>
				<view :class="current == 0 ? 'searchType-top-left-active' : 'searchType-top-left'" @click="tabsChange(0)">
					{{"未处理(" + notProcessed + ")"}}
				</view>
				<view :class="current == 2 ? 'searchType-top-left-active' : 'searchType-top-left'" @click="tabsChange(2)">
					{{"已完结(" + closed + ")"}}
				</view>
			</view>
			<!-- <u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChange" ></u-tabs-swiper> -->
		</view>
		<view class="swiper-group">
			<scroll-view  class="scroll-content-container" :style="{height:scrollerHeight}"  scroll-y @scrolltolower="onreachBottom">
				<view class="order-container" v-for="(order,i) in orderlist" :key="i" @click="gotoDetail(order)">
					<view class="order-title-container">
						<view class="order-title-text">
							{{order.problemTitle || '-'}}
						</view>
						<view class="order-status">
							{{order.status == 0 ? '未处理' : (order.status == 1 ? '待处理' : '已完结')}}
						</view>
					</view>
					<view class="order-time">
						{{order.occurrenceTime || '-'}}
					</view>
					<view class="order-site">
						{{order.stationName || '-'}}
					</view>
					<view class="order-reason">
						{{order.deviceProblem || '-'}}
					</view>
				</view>
				<view v-if="noMore" class="more-data">
					{{textInfo}}
				</view>
			</scroll-view>
			<view v-if="!orderlist.length">
				<view class="yoshop-notcont">
					<text class="cont">暂无工单</text>
				</view>
			</view>
		</view>	
		<u-select :list="siteList" v-model="show" value-name="stationCode" label-name="stationName" @confirm="siteSelectCallback"> </u-select>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			//当前下标
			current: 0,
			swiperCurrent: 0,
			scrollerHeight: 0,
			swiperContentHeight: 0,
			//查询条件
			formData: {
				name: '全部站点',
				stationCode: '',
				pageIndex: 1,
				pageSize: 10,
				orderStatus: null,
			},
			//是否显示站点
			show: false,
			//站点列表
			siteList: [],
			//是否更多
			noMore: false,
			//工单列表
			orderlist: [],
			//总条数
			pageTotal: 0,
			//提示
			textInfo: '',
			//待处理
			pending: 0,
			//已完结
			closed: 0,
			//未处理
			notProcessed: 0,
	    }
	  },
		//第一次加载
		onLoad(e) {
			  this.swiperCurrent = e.type;
			  this.current = e.type;
			  this.formData.orderStatus = Number(e.type);
		},
       onReady() {
            let that = this
            uni.getSystemInfo({
                success: function (res) {
                    let windowHeight= res.windowHeight;
                    that.swiperContentHeight = (windowHeight-158) + 'px';
                    that.scrollerHeight = (windowHeight - 60) + 'px'; // 给5px的底部间距
                }
            });
        },
		//页面显示
		onShow() {
	
		},
		mounted() {
			this.getSites();
			this.getDataList();
			this.getIndexOptionData();
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
				this.formData.pageIndex = 1;
				this.formData.orderStatus = index;
				this.getDataList();
			},
			
			// scroll-view到底部加载更多
			onreachBottom() {
				this.noMore = true;
				this.textInfo = '向上拉加载更多';
				if(this.pageTotal > this.formData.pageIndex * this.formData.pageSize) {
					this.textInfo = '加载中...'
					this.formData.pageIndex += 1;
					this.getDataList();
				} else {
					this.textInfo = '我是有底线的';
					setTimeout(() => {
						this.noMore = false;
					}, 1000);
				}
			},
			//获取工单信息数据
			getIndexOptionData() {
				const _that = this;
				_that.dataInfo = {};
				uni.showLoading({
					title: '搜索中...',
				})
				_that.$http.getOpsOrderOverview(_that.formData.stationCode).then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						let {pending, closed, notProcessed} = res.data
						_that.pending = pending;
						_that.closed = closed;
						_that.notProcessed = notProcessed;
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//站点选择
			siteSelectCallback(data) {
				uni.hideKeyboard();
				this.formData.name = data[0].label;
				this.formData.stationCode = data[0].value;
				this.getDataList();
				this.getIndexOptionData();
			},
			//跳转详情页面
			gotoDetail(item) {
				uni.navigateTo({
					url: '/pages/index/orderDetail?id=' + item.id
				})
			},
			//获取权限内所有站点列表
			getSites() {
				this.siteList = [];
				let siteList = [{stationName: '全部站点', stationCode: ''}];
				let _that = this;
				_that.$http.getHasStationCodeAndName().then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						siteList = siteList.concat(res.data);
						_that.siteList = siteList
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//获取列表数据
			getDataList() {
				uni.showLoading({
					title: '搜索中...',
				})
				let _that = this;
				_that.$http.getOrderList(_that.formData).then(res => {
					if(res.code == 200) {
						if (_that.formData.pageIndex == 1) _that.orderlist = [];
						 _that.pageTotal = res.data.total;
						 _that.orderlist = _that.orderlist.concat(res.data.list);
						 _that.noMore = false;
					} else {
						_that.$utils.msg(res.msg);
					}
					uni.hideLoading();
				})
			}
		}	
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		background: $uni-bg-color;
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
		.page-search-container {
			display: flex;
			background: #FFFFFF;
			.page-search-text {
				margin-left: 30rpx;
				width: 30%;
			}
			.searchType-top-container {
				display: flex;
				width: 70%;
				height: 80rpx;
				margin-left: 40rpx;
				.searchType-top-left {
					width: 33%;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #131212;
					line-height: 80rpx;
				}
				.searchType-top-left-active {
					width: 33%;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #3F8CFF;
					line-height: 80rpx;
					border-bottom: 1rpx solid #3F8CFF;
				}
			}
		}
		.swiper-group {
			padding: 0 32rpx 40rpx 32rpx;
			.order-container {
				height: 270rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 10rpx;
				padding: 32rpx;
				.order-title-container {
					display: flex;
					.order-title-text {
						height: 44rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #1D2129;
						line-height: 44rpx;
						width: calc(100% - 154rpx);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.order-status {
						height: 44rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #3F8CFF;
						line-height: 44rpx;
						width: 80rpx;
						text-align: center;
						background: #e8F1FF;
						border-radius: 16rpx;
						margin-left: 10rpx;
					}
				}
				.order-time {
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #86909C;
					line-height: 40rpx;
					margin-top: 16rpx;
				}
				.order-site {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4E5969;
					line-height: 40rpx;
					margin-top: 16rpx;
				}
				.order-reason {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4E5969;
					line-height: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-top: 16rpx;
				}
			}
		}
		.more-data {
			background: #FFFFFF;
			margin-top: 10rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #989796;
		}
		.yoshop-notcont {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -30%);
			.cont {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #4E5969;
				line-height: 40rpx;
			}
		}
	}
    
</style>