emsapp/pages/index.vue

<template>
  <view class="container">
	  <view class="btn-list">
	  	<uni-row >
	  		<uni-col :span="12">
	  			<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}" @click="changeTab('undone')">未处理</button>
	  		</uni-col>
	  		<uni-col :span="12">
	  			<button type="default" class="btns" :class="{'active-btn' : active === 'done'}" @click="changeTab('done')">已处理</button>
	  		</uni-col>
	  	</uni-row>
	  </view>
	  <scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" >
	  	<view class="content">
	  		<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
	  	  		<view class="item-title" :class="item.status === 1 ? 'done' : 'undone'" >工单号：{{item.ticketNo}}</view>
	  	  		<view class="item-content">
	  	  			<view class="item-info">工单标题:{{item.title}}</view>
	  	  			<view class="item-info">问题描述:{{item.content}}</view>
	  	  			<view class="item-info">工单状态:{{ticketStatusOptions[item.status]}}</view>
	  	  			<view class="item-info">预期完成时间:{{item.expectedCompleteTime || '-'}}</view>
	  	  			<view class="item-info">处理人:{{item.workName || '-'}}</view>
	  	  		</view>
	  	  	</view>
	  		</view>
	  </scroll-view>
  </view>
</template>
<script>
	import {mapState} from 'vuex'
	import {listTicket} from 'api/ems/ticket'
	export default{
		computed:{
			...mapState({
				ticketStatusOptions:(state)=>state.ems.ticketStatusOptions
			})
		},
		data(){
			return {
				active:'undone',
				total:0,
				list:[],
				pageNum:1,
				pageSize:10
			}
		},
		methods:{
			changeTab(active){
				if(active===this.active)return
				this.active = active
				this.reset()
				this.init()
			},
			lower(){
				if(this.list.length>=this.total){
					return console.log('数据已经加载完成')
				}
				this.pageNum+=1;
				this.init().catch(()=>{this.pageNum-=1})
			},
			init(){
				//0:'待处理', 1:'已处理', 2:'处理中'
				let url=`/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
				if(this.active === 'done'){
					url +=`&status=1`
				}else{
					url +=`&status=0&status=2`
				}
				uni.showLoading()
				return listTicket(url).then(response=>{
					const data =  JSON.parse(JSON.stringify(response?.rows || []))
					this.list =this.list.concat(data)
					this.total = response?.total || 0
				}).finally(()=>{uni.hideLoading()})
			},
			toDetail(id) {
			  this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
			},
			reset(){
				this.list = []
				this.total = 0
				this.pageNum=1
			}
		},
		onShow(){
			this.reset()
			this.init()
		}
	}
</script>

<style scoped lang="scss">
	.container{
		position: relative;
	}
	uni-button:after{
		border:none;
		border-radius: 0;
	}
	.btn-list{
		position: absolute;
		top:0;
		left: 0;
		width:100%;
		z-index:2;
		.btns{
			border-radius: 0;
			border:none;
			border-bottom: 1px solid #eee;
			width:100%;
			text-align: center;
			font-size: 16px;
			line-height: 50px;
			background-color: #fff;
			&.active-btn{
				background-color: #3a98ff;
				color:#fff;
			}
		}
	}
.scroll-y{
	height: calc(100vh - 50px);
	z-index:1;
}
.content {
	background-color: #ffffff;
	padding:70px 20px 50px 20px;//todo 根据顶部tab设置padding-top
}
.item-list{
	border-radius: 7px;
	box-shadow: 0 0 10px rgba(0,0,0,.1),0 0 0 rgba(0,0,0,.5);
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px;
	border:1px solid #eee;
	.item-title{
		border-radius: 7px 7px 0 0;
		font-size: 18px;
		border-bottom:1px solid #eee ;
		padding:10px 15px;
		background-color: #FC6B69;
		color:#fff;
		&.done{
			background-color: #05AEA3;
		}
	}
	.item-content{
		padding:15px 15px;
		.item-info{
			margin-bottom:20px;
		}
	}
	
	.item-content .item-info:last-child{
		margin-bottom:0;
	}
}
.content .item-list:last-child{
	margin-bottom:0;
}
	
	
	
</style>