jingrunTechnology-ui/pages/home/myorder/index.vue

<template>
	<view>
		<view class="condition">
			<view class="conditionone">
				<view :style="{'border-bottom':(underline =='0'?'3rpx solid #fff':'none')}" @click="whole">全部</view>
				<view :style="{'border-bottom':(underline =='1'?'3rpx solid #fff':'none')}" @click="show = !show,underline = '1'">下单日期</view>
				<view :style="{'border-bottom':(underline =='2'?'3rpx solid #fff':'none')}" @click="suitcase = !suitcase,underline = '2'">提箱日期</view>
				<view :style="{'border-bottom':(underline =='3'?'3rpx solid #fff':'none')}" @click="choiceState = !choiceState,underline = '3'">状态</view>
			</view>
		</view>
		<view class="search">
			<u-search shape="round" placeholder="请输入提单号" @custom="custom" @search="custom" :clearabled="false">
			</u-search>
		</view>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">车号：{{item.carregNo}}</text>
				<view class="various" @click="viewDetails(item.id)" v-if="item.orderStatus == 10">待接单</view>
				<view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus == 20">待提箱</view>
				<!-- <view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus == 40 && item.billType == 2">待装货</view> -->
				<!-- <view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus == 40 && item.billType == 1">待卸货</view> -->
				<view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus == 40">待装卸</view>
				<view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus == 50">还卸柜</view>
				<view class="various" @click="viewDetails(item.id)" v-else-if="item.orderStatus > 50">已完成</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="oddnumber">
				<view v-if="item.mblno">
					提单号：{{item.mblno}}
				</view>
				<view v-else>
					提单号：
				</view>
				<view v-if="item.loadDate">
					提箱日期：{{item.loadDate.slice(0,10)}}
				</view>
				<view v-else>
					提箱日期：
				</view>
				<view v-if="item.loadAddr">
					装卸地点：{{item.loadAddr}}
				</view>
				<view v-else>
					装卸地点：
				</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="view" @click="viewDetails(item.id)">
				<view>
					<text>查看订单详情</text>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-calendar v-model="show" :mode="mode" @change="orderdate"></u-calendar>
		<u-calendar v-model="suitcase" :mode="mode" @change="suitcaSe"></u-calendar>
		<u-action-sheet :list="column" @close="underline = '0'" @click="thatOne" v-model="choiceState"></u-action-sheet>
	</view>
</template>

<script>
	import {request} from '@/common/request/request'
	export default {
		data() {
			return {
				lisi: [],
				column: [{
					text: '全部',
					value: null
				}, {
					text: '未接单',
					value: '10'
				}, {
					text: '未提箱',
					value: '20'
				}, {
					text: '未装卸货',
					value: '40'
				}, {
					text: '未还卸柜',
					value: '50'
				}, {
					text: '未回单',
					value: '70'
				}, {
					text: '已完成',
					value: '60'
				},],
				// column: [{
				// 	text: '新录入',
				// 	value:'0'
				// }, {
				// 	text: '车队安排',
				// 	value:'10'
				// }, {
				// 	text: '司机受理',
				// 	value:'20'
				// }, {
				// 	text: '司机出车',
				// 	value:'30'
				// }, {
				// 	text: '提箱',
				// 	value:'40'
				// }, {
				// 	text: '装卸货',
				// 	value:'50'
				// }, {
				// 	text: '还卸柜子',
				// 	value:'60'
				// }, {
				// 	text: '费用确认',
				// 	value:'70'
				// }, {
				// 	text: '回单',
				// 	value:'80'
				// },
				// ],
				show: false,
				suitcase: false,
				choiceState: false,
				underline: '0',
				mode: 'range',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				total: 0,
			}
		},
		onShow(){
			this.whole()
		},
		onReachBottom() {
			this.status = 'loading'
			console.log(this.queryParams.pageNum)
			console.log(this.lisi.length, this.total)
			if (this.lisi.length < this.total) {
				this.queryParams.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		created() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function () {
			    uni.hideLoading();
			}, 1000);
			// #ifdef MP-WEIXIN  
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
		},
		methods: {
			thatOne(index){
				console.log(index)
				console.log(this.column[index].value)
				this.lisi = []
				this.queryParams = {}
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					orderStatus:this.column[index].value
				}
				this.query()
			},
			whole() {
				this.underline = '0'
				// this.underline = null
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
				this.query()
			},
			custom(res) {
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					mblno: res
				}
				console.log(this.queryParams)
				this.query()
			},
			orderdate(e) {
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					planStartDate: e.startDate + ' ' + '00:00:00',
					planEndDate: e.endDate + ' ' + '23:59:59'
				}
				this.query()
			},
			suitcaSe(e) {
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					sLoadStartDate: e.startDate + ' ' + '00:00:00',
					sLoadEndDate: e.endDate + ' ' + '23:59:59'
				}
				this.query()
			},
			query() {
				request({
					url: '/fleet/ftmsorderbillscars/wechatQuery',
					method: 'get',
					params: this.queryParams
				}).then(res => {
					console.log(res.data)
					if(res.data.code == 500){
						uni.showToast({
							icon: 'none',
							title: res.msg,
							position: "bottom"
						})
					}else if(res.data.code == 403){
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					}else if(res.data.dataTable.code == 200){
						this.total = res.data.dataTable.total
						this.lisi = this.lisi.concat(res.data.dataTable.rows)
						this.status = 'nomore'
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: err.msg,
						position: "bottom"
					})
				})
			},
			viewDetails(id) {
				uni.navigateTo({
					url: './orderDetails/index?id=' + id
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.oddnumber {
		width: 96%;
		margin: 20rpx auto;
		margin-bottom: 20rpx;
	}

	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		width: 150rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #3a63cf;
	}

	.condition {
		background-color: #3a63cf;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>