工单列表、工单详情

pages/index.vue

@@ -1,36 +1,109 @@
 <template>
   <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">Hello EMS</text>
-    </view>
+	  <scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" >
+	    <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>
+	  </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 {
+				total:0,
+				list:[],
+				pageNum:1,
+				pageSize:10
+			}
+		},
+		methods:{
+			lower(){
+				if(this.list.length>=this.total){
+					return console.log('数据已经加载完成')
+				}
+				this.pageNum+=1;
+				this.init().catch(()=>{this.pageNum-=1})
+			},
+			init(){
+				uni.showLoading()
+				return listTicket({pageNum:this.pageNum,pageSize:this.pageSize}).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>
+<style scoped lang="scss">
   .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .logo {
-    height: 200rpx;
-    width: 200rpx;
-    margin-top: 200rpx;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50rpx;
-  }
-
-  .text-area {
-    display: flex;
-    justify-content: center;
-  }
-
-  .title {
-    font-size: 36rpx;
-    color: #8f8f94;
+    background-color: #ffffff;
+    padding:20px;
+	.scroll-y{
+		height: 100vh;
+	}
   }
+	.item-list{
+		border-radius: 5px;
+		box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.3);
+		font-size: 16px;
+		line-height: 24px;
+		margin-bottom: 20px;
+		border:1px solid #eee;
+		.item-title{
+			border-radius: 5px 5px 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>