TuBaoSoft-Ui-Zd/pages/home/delivery/detailed.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> -->
		<!-- 导航条 -->
		<u-navbar :background="background" back-icon-color="#fff" title-color="#fff" title="出库明细列表">
			<!-- <view class="navbar-right" slot="right" @click="newly">
				<view class="message-box right-item" style="padding-right: 20rpx;color: #FFFFFF;">
					<span>新行</span>
				</view>
			</view> -->
		</u-navbar>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">提单号：{{item.fMblno}}</text>
				<view class="various" @click="viewDetails(item)">{{item.fBillstatus}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>货主</view>
				<view>{{item.corpName}}</view>
			</view>
			<view class="basic">
				<view>出库日期</view>
				<view>{{item.fBsdate}}</view>
			</view>
			<view class="basic">
				<view>件数/毛重(吨)</view>
				<view>{{item.fQty}}/{{item.fGrossweight}}</view>
			</view>
			<view class="basic">
				<view>品名/库位</view>
				<view>{{item.goodsName}}/{{item.fWarehouseInformation}}</view>
			</view>
			<view class="basic">
				<view>叉车工</view>
				<view>{{item.fForkliftman}}</view>
			</view>
			<view class="basic">
				<view>箱型/箱量/箱号</view>
				<!-- <view>{{item.fCntrtypes}}/{{item.fCntqty}}/{{item.fCntrno}}</view> -->
				<view>{{item.fCntrtype}}/{{item.fCntqty}}/{{item.fCntrno}}</view>
			</view>
			<view class="basic" @tap="call_phone(item.fDriverTel)">
				<view>车号/司机</view>
				<view>{{item.fTruckno}}/{{item.fDriverName}}</view>
			</view>
			<view class="basic">
				<view>司机电话</view>
				<view>{{item.fDriverTel}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="view" @click="viewDetails(item)">
				<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>
	export default {
		data() {
			return {
				lisi: [],
				background: {
					backgroundColor: '#1669e6'
				},
				column: [{
					text: '待出库',
					value: '20'
				}, {
					text: '出库中',
					value: '30'
				}],
				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,
			}
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.queryParams.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数.
			this.form = JSON.parse(decodeURIComponent(option.item))
			this.queryParams.fId = this.form.fId
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
		},
		onShow() {
			this.lisi =[]
			this.query()
		},
		created() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
			// #ifdef MP-WEIXIN  
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
		},
		methods: {
			call_phone(bphone) {
				uni.makePhoneCall({
					phoneNumber: '' + bphone, // 手机号
				});
			},
			thatOne(index) {
				// console.log(index)
				// console.log(this.column[index].value)
				this.lisi = []
				this.queryParams = {}
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					fBillstatus: this.column[index].value
				}
				this.query()
			},
			whole() {
				this.underline = '0'
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
				this.query()
			},
			custom(res) {
				// console.log(res)
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					fMblno: res
				}
				// console.log(this.queryParams)
				this.query()
			},
			orderdate(e) {
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					timeStartBsdate: e.startDate + ' ' + '00:00:00',
					timeEndBsdate: e.endDate + ' ' + '23:59:59'
				}
				this.query()
			},
			suitcaSe(e) {
				// console.log(e)
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					timeStartBsdate: e.startDate + ' ' + '00:00:00',
					timeEndBsdate: e.endDate + ' ' + '23:59:59'
				}
				this.query()
			},
			query() {
				this.$u.get('/warehouseBusiness/applets/warehouseItemById',this.queryParams).then(res => {
					console.log(res)
					if (res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							position: "bottom"
						})
					} else if (res.code == 200) {
						this.total = res.total
						this.lisi = this.lisi.concat(res.rows)
						// this.lisi = res.rows
						this.status = 'nomore'
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
			viewDetails(item) {
				let data ={
					fId:item.fId,
					fPid:item.fPid
				}
				uni.navigateTo({
					url: './orderDetails/index?item=' + JSON.stringify(data)
				});
			},
			newly(){
				uni.navigateTo({
					url: './orderDetails/newlyAdded?item='+JSON.stringify(this.form)
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.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>