fude/pages/index/index.vue

<template>
	<view class="index">
		<navbar title="工单" :isCenter="true"></navbar>
		<view>
			<view class="searchContent">
				<u-search placeholder="条形码编号" @custom="searchHandle" @search="searchHandle" shape="square" bgColor="#F4F5F7" v-model="keyword" :animation="true"></u-search>
			</view>
			<view class="content" style="padding-bottom: 40rpx;" v-if="orderList.length!=0">
				<image src="../../static/banner.png" mode="widthFix" style="width:100%;height:auto"></image>
				<view class="order">
					<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goDetails(item)">
						<view class="orderTitle">
							<view class="titleName">{{item.product_name}}</view>
							<view  :class="item.status==1?'titleStatus progress'
								:item.status==4?'titleStatus already'
								:item.status==5?'titleStatus failed':'titleStatus'">
									{{item.status==1?'调试中'
									:item.status==2?'待审核人员验收'
									:item.status==3?'待用户验收'
									:item.status==4?'已验收'
									:item.status==5?'验收失败':''
									}}
							</view>
						</view>
						<view class="itemContent">
							<view class="contentItem">
								<view class="left">条形编号</view>
								<view class="right">{{item.barcode}}</view>
							</view>
							<view class="contentItem">
								<view class="left">代理商</view>
								<view class="right">{{item.agent_company_name}}</view>
							</view>
							<view class="contentItem">
								<view class="left">省份</view>
								<view class="right">{{item.province}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="orderList.length==0">
			<view>
				<image src="../../static/kong.png" mode="widthFix"></image>
				<view class="title">请创建工单</view>
				<view class="subtitle">您还没有任何工单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {orderList} from '@/common/api.js'
	import {getToken,getUserInfo} from '@/common/auth.js'
	export default {
		components:{navbar},
		data() {
			return {
				keyword:'',
				orderList:[],
				page:1,
				limit:20
			}
		},
		onLoad() {
			console.log("页面加载")
			console.log(getUserInfo(),"userInfo")
		},
		onShow() {
			this.orderList.length=0;
			this.getorderList();
		},
		methods: {
			getorderList(){
				let params={
					page:this.page,
					limit:this.limit,
					barcode:this.keyword
				}
				orderList({...params,custom: { auth: true }}).then(res=>{
					this.orderList.push(...res.data.data);
					this.total = res.data.total
				})
			},
			goDetails(item){
				console.log(item)
				uni.navigateTo({
					url:`/pages/index/details?id=`+item.id
				})
			},
			searchHandle(){
				this.orderList=[]
				this.page = 1;
				this.getorderList()
			}
		},
		onReachBottom(){
			console.log('已触底');
			if(this.orderList.length<this.total){
				this.page++
				this.getorderList()
			}
		}

		
	}
</script>

<style lang="scss" scoped>
.index{
	min-height: calc(100vh);
	background-color: #F4F5F7;
}
.searchContent{
	border-top:1px solid #EAEAEA;
	background-color: #ffffff;
	padding:20rpx 25rpx;
}
.order{
	.orderItem{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin:20rpx 24rpx;
		.orderTitle{
			display:flex;
			justify-content: space-between;
			padding:36rpx 30rpx;
			border-bottom:1px solid #EAEAEA;
			.titleName{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.titleStatus{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8EC31F;
			}
			.progress{
				color: #8EC31F;
			}
			.already{
				color:#999999;
			}
			.failed{
				color:#E72525;
			}
		}
		.itemContent{
			padding:27rpx 30rpx;
			:first-child{
				margin-top:0rpx !important;
			}
			.contentItem{
				display: flex;
				margin-top:36rpx;
				
				.left{
					width: 150rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-right:52rpx;
					text-align-last: justify;
				}
				.right{
					font-size: 28rpx;
					width: calc(100% - 150rpx - 54rpx);
					word-break: break-all;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
			
			
		}
	}
}
.empty{
	display:flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	&>view{
		text-align: center;
		image{
			width:297rpx;
			height:auto;
		}
		.title{
			
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-top:31rpx;
		}
		.subtitle{
			margin-top:31rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
}
</style>