pco/app/pages/business-order/business-order.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">业务订单</text>
			</view>
		</view>
		<u-sticky offset-top="0">
			<u-tabs :list="tabs" @change="change" :current="current" :is-scroll="false"></u-tabs>
		</u-sticky>
		<view class="card-box">
			<view class="card" v-for="(businessItem,index) in businessItemList" :key="index">
				<view class="t">
					<image class="icon" src="../../static/home-icon-01.png"></image>
					<text class="title">{{businessItem.companyName}}</text>
				</view>
				<view class="c">
					<view class="item car-num-item">
						<text class="car-num">{{businessItem.carNum}}</text>
					</view>
					<view class="item">
						<text class="p1">车型:</text>
						<text class="p2">{{businessItem.carType}}</text>
					</view>
					<view class="item">
						<text class="p1">载重:</text>
						<text class="p2">{{businessItem.weight}}</text>
					</view>
					<view class="item">
						<text class="p1">状态:</text>
						<text class="p2">{{businessItem.state}}</text>
					</view>
				</view>
				<view class="b">
					<view class="btn b3" v-if="businessItem.btnShow==1" @click="fk(index)">确认付款</view>
					<view class="btn b1" v-if="businessItem.btnShow==1" @click="rc(index)">确认入场</view>
					<view class="btn b1" v-if="businessItem.btnShow==2" @click="cc(index)">确认出场</view>
					<view class="btn b3" v-if="businessItem.btnShow==2" @click="zd(index)">确认账单</view>
				</view>
			</view>
		</view>
		<!-- 没有数据时显示noData -->
		<noData v-if="businessItemList.length==0"></noData>
		<u-loadmore style="margin: 30rpx;" :status="status"/>
		<uni-popup ref="fkpopup" type="dialog">
		    <uni-popup-dialog type="success" title="确定已付款吗？" :duration="2000" @confirm="fkconfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="rcpopup" type="dialog">
		    <uni-popup-dialog type="success" title="确定已入场吗？" :duration="2000" @confirm="rcconfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="ccpopup" type="dialog">
		    <uni-popup-dialog type="success" title="确定已出场吗？" :duration="2000" @confirm="ccconfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="zdpopup" type="dialog">
		    <uni-popup-dialog type="success" title="确认账单吗？" :duration="2000" @confirm="zdconfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				status: 'loadmore',
				page: 0,
				tabs: [{
						name: '进场',
					}, {
						name: '出场',
					}
				],
				businessItemList:[
					{
						companyName:'广西医科大一附院',
						carNum:'桂A.B5W61',
						carType:'小型汽车',
						weight:'5吨',
						state:'进场',
						btnShow:1
					},
					{
						companyName:'广西中医院',
						carNum:'桂A.A7JJ8',
						carType:'卡车',
						weight:'10吨',
						state:'出场',
						btnShow:2
					},
					{
						companyName:'广西中医院',
						carNum:'桂A.A7JJ8',
						carType:'卡车',
						weight:'10吨',
						state:'出场',
						btnShow:2
					},
					{
						companyName:'广西中医院',
						carNum:'桂A.A7JJ8',
						carType:'卡车',
						weight:'10吨',
						state:'出场',
						btnShow:2
					},
					{
						companyName:'广西中医院',
						carNum:'桂A.A7JJ8',
						carType:'卡车',
						weight:'10吨',
						state:'出场',
						btnShow:2
					}
				]
			}
		},
		methods: {
			//点击上方切换栏，根据点击项重新加载数据
			change(index) {
				this.current = index;
				if(index==0){
					//只加载进场订单
				}
				if(index==1){
					//只加载出场订单
				}
			},
			//点击按钮
			//------------------------------------------
			fk(){
				this.$refs.fkpopup.open('center')
			},
			fkconfirm(index) {
				console.log('付款')
				this.$refs.fkpopup.close()
			},
			rc(){
				this.$refs.rcpopup.open('center')
			},
			rcconfirm(index) {
				console.log('入场')
				this.$refs.rcpopup.close()
			},
			cc(){
				this.$refs.ccpopup.open('center')
			},
			ccconfirm(index) {
				console.log('出场')
				this.$refs.ccpopup.close()
			},
			zd(){
				this.$refs.zdpopup.open('center')
			},
			zdconfirm(index) {
				console.log('账单')
				this.$refs.zdpopup.close()
			},
			//------------------------------------------
			//上拉加载更多，分页模拟数据
			onReachBottom() {
				if(this.page >= 3) return ;
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.businessItemList += 5;//接接口后把数据加上，懒得写假数据了
					if(this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	.card-box{
		display: flex;
		width: 100%;
		flex-direction: column;
		.card{
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.t{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				.title{
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
			.c{
				padding:15rpx 0 30rpx 0;
				display: flex;
				flex-wrap: wrap;
				border-bottom: 1rpx solid #f5f5f5;
				.item{
					width: 50%;
					padding: 20rpx 0;
					.car-num{
						background-color: #edf6ff;
						color: #0080ff;
						font-size: 44rpx;
						padding: 15rpx 0;
						text-align: center;
						width: 100%;
						border-radius: 10rpx;
						font-weight: bold;
						letter-spacing: 20rpx;
					}
					.p1{
						font-size: 28rpx;
						color: #999;
					}
					.p2{
						font-size: 28rpx;
						color: #191919;
						font-weight: bold;
						margin-left: 20rpx;
					}
				}
				.car-num-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.b{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				.btn{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(50% - 15rpx);
					margin: 30rpx 0 0 0;
					border-radius: 10rpx;
					border-width: 1rpx;
					box-sizing: border-box;
				}
				.b1{
					background-color: #0080ff;
					color: #fff;
				}
				.b2{
					background-color: #f7f7f7;
					color: #191919;
				}
				.b3{
					background-color: #fff;
					color: #0080ff;
					border: 1rpx solid #0080ff;
				}
			}
		}
	}
	@import '@/common/common.scss'
</style>