yiliangyiyun-app/pageA/freightTransport/index.vue

<template>
	<view class="">
		<view class="content">
			<view style='background:#fff;display:flex;' class="cu-bar search">
				<u-search placeholder="请输入业务编号或对方名称" v-model="searchKeyWord" @custom="doSearch"></u-search>
			</view>
			<view style='background:#fff;padding:0 15px;'>
				<view @click='tabcarchange(0)' class='line' :class='status==0?"active":""'>全部</view>
				<view @click='tabcarchange(1)' class='line' :class='status==1?"active":""'>待签收</view>
				<view @click='tabcarchange(2)' class='line' :class='status==2?"active":""'>待结算</view>
			</view>
			<view class="no-data" v-if="isShowNoData">
				暂无相关结果
			</view>
			<view class="" v-if="!isShowNoData">
				<view v-for="(item,index) in listData" :key="index">
					<view @click='sendreceiverecord(item)' class="guess-section">
						<view class="list-item">
							<view class="list-item-left">
								<view class='type send' v-if="item.status=='发货'">发</view>
								<view class='type put' v-if="item.status=='收货'">收</view>
								<view class="number">
									<view class='businessnumber'>{{item.businessNumber}}</view>
									<view class='consigner'>{{item.consignee}}</view>
								</view>
							</view>

							<view class="list-item-right">
								<view class='time'>{{item.createDate}}</view>
								<view class='goods'>{{item.goodsName}}</view>
							</view>
						</view>
						<view style='width:100%;' class='goodsstatus'>
							<text style='margin-right:10px;'>待签收：{{item.signedFor}}</text>
							<text>待结算：{{item.toSettled}}</text>
						</view>
						<view style='width:100%;' class='flex justify-end'>
							<view class='del' @click="delRow(item)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>

		</view>
		<view class="footer">
			<button @click='addgoods' class='addgoods'>新建发货任务</button>
		</view>
	</view>
</template>

<script>
	import store from "@/store";
	export default {
		name: "business",
		data() {
			return {
				searchKeyWord: '',
				content: '搜索',
				status: 0,
				listData: [],
				searchData: {},
				userinfo: {},
				isShowNoData: false,
				currentPage: 1, //页数
				pageSize: 10, //每次取条目数
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				scrollTop: 0,

			}
		},
		onShow() {

		},
		onLoad(options) {
			// 获取用户信息
			this.getUserInfo()
			//获取列表数据
			this.initData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() { //上拉触底函数
		debugger
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				this.getListData(this.status)
			}
		},
		onPullDownRefresh() {
			debugger
			this.currentPage = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.listData=[]
			this.getListData(this.status)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getUserInfo() {
				this.userinfo = store.getters.getUserInfo
			},
			addgoods() {
				uni.navigateTo({
					url: '/pageA/freightTransport/addsendgoods?phone=' + this.userInfo.phone
				})
			},
			sendreceiverecord(item) {

				if (item.status == '发货') {
					uni.navigateTo({
						url: '/pageA/freightTransport/record/sendrecord?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pageA/freightTransport/record/payrecord?id=' + item.id
					})
				}
			},
			initData() {
				this.currentPage = 1
				this.isLoadMore = false
				this.loadStatus = 'more'
				this.getListData(0)
			},
			getListData(state, type) {
				let _data = {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}

				if (state == "searchKeyWord") {
					_data.searchKeyWord = type
					_data.accountNumber = this.userInfo.phone

				} else {
					_data.searchType = state
					_data.accountNumber = this.userInfo.phone
				}
				let that = this
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				this.$api.doRequest('get', '/freightReceivingDispatching/selectFreightReceivingDispatchingPage', _data)
					.then(res => {
						if (res.data.code == 200) {
							that.listData = that.listData.concat(res.data.data.records);
							for (let i = 0; i < that.listData.length; i++) {
								that.utils.nullToString(that.listData[i])
								that.listData[i].toSettled = that.listData[i].toSettled == '' ? 0 : that.listData[i]
									.toSettled
								that.listData[i].signedFor = that.listData[i].signedFor == '' ? 0 : that.listData[i]
									.signedFor
							}
							console.log(that.listData)
							that.isLoadMore = false
						} else {
							if (that.currentPage > 1) {
								that.currentPage = 1
							}
							that.isLoadMore = true
							that.loadStatus = 'nomore'
						}

						uni.hideLoading()

					}).catch(res => {
						that.$api.msg(res.data.data.errmsg)
						that.isLoadMore = false
						that.loadStatus = 'nomore'
						if (that.currentPage > 1) {
							that.currentPage = 1
						}
						uni.hideLoading()
						// uni.showToast({
						// 	title: res.data.message,
						// 	icon: 'none',
						// 	duration: 2000
						// })
					})
			},
			tabcarchange(val) {
				this.searchKeyWord = ""
				console.log(val)
				this.status = val
				this.getListData(val)

			},
			// 搜索
			doSearch() {
				console.log(this.searchKeyWord)
				this.getListData("searchKeyWord", this.searchKeyWord)
			},
			//删除
			delRow(val) {
				this.$api.doRequest('post', 'freightReceivingDispatching/api/deleteFreightReceivingDispatching', {
					"id": val.id
				}).then(res => {
					if (res.data.code == 200) {
						// this.listData = res.data.data.records;
						uni.showToast({
							title: "删除成功！",
							icon: 'none',
							duration: 2000
						})
						this.getListData(0)
					}

				}).catch(res => {
					// uni.showToast({
					// 	title: res.data.message,
					// 	icon: 'none',
					// 	duration: 2000
					// })
				})
			}

		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		background: #F5F6FA;
	}

	.line {
		display: inline-block;
		padding: 5px;
		position: relative;
		font-size: 17px;
	}

	.line:nth-last-of-type(2),
	.line:nth-last-of-type(1) {
		margin-left: 68rpx;
	}

	.line.active {
		font-size: 19px;
		font-weight: 900;
	}

	.line.active:after {
		content: '';
		display: block;
		position: absolute;
		width: 38px;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		border-bottom: 1px solid #22C572;
	}

	.cu-tag.badge {
		right: 26rpx;
	}

	.cu-item {
		height: 80rpx;
		display: inline-block;
		line-height: 80rpx;
	}

	.search-form {
		background: #F5F6F9;
		padding-left: 20rpx;
	}

	.title-tip {
		color: #E63113;
		text-align: right;
	}

	.tag1 {
		background: #F5F6F9;
		padding: 5px;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 3px;
		margin: 3px;
	}

	.tag {
		background: #F5F6F9;
		padding: 7px 12px;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 15px;
		margin: 3px;
	}

	.tag-bule {
		background: #EBEEFA;
		color: #5C76DF;
	}

	.tag-green {
		background: #C6F7BC;
		color: #065112;
	}

	.tag-yellow {
		background: #F9F2EA;
		color: #BE9C69;
	}

	.tag-red {
		background: #FEECE6;
		color: #FE6430;
	}

	.text-white {
		color: #fff;
	}

	.text-white text {
		position: relative;
		z-index: 2;
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}

	.guess-section {
		padding-bottom: 100upx;
		display: flex;
		flex-wrap: wrap;
		padding: 30upx;
		background: #fff;
		margin: 10px;
		border-radius: 6px;

		.type {
			border-radius: 10px;
			padding: 5px;
			wdith: 22px;
			height: 22px;
			line-height: 14px;
			font-size: 12px;
		}

		.type.send {
			background: #22C572;
			color: #fff;
		}

		.type.put {
			background: #FD714F;
			color: #fff;
		}

		.businessnumber {
			font-size: 16px;
			font-weight: 600;
		}

		.time {
			color: #878C9C;
		}

		.goods,
		.consigner {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			text-align: right;
			margin: 20rpx 0
		}

		.goodsstatus {
			background: #F9F9FA;
			color: #9698A2;
			padding: 10px 0;
			padding-left: 47px;
			margin: 10px 0;
		}

		.del {
			width: 60px;
			height: 33px;
			line-height: 33px;
			font-size: 14px;
			background: #fff;
			border: 1px solid #CDCDCD;
			border-radius: 30px;
			text-align: center;
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	.introduce-section .title {
		font-size: 17px;
		font-weight: bold;
		height: 40px;
		line-height: 40px;
		flex: 2.5;
		border-bottom: 1px solid #EEEEEE;
	}

	.introduce-section .address {
		color: #878C9C;
		font-size: 12px;
		padding: 10px 0 10px;
	}

	.introduce-section .price {
		padding: 10px 0 10px;
		color: #FD714F;
		font-size: 19px;
		font-weight: 700;
	}

	.introduce-section .guess-item {
		border-radius: 10px;
		background: #fff;
		padding: 0upx 30upx 20upx;
		margin: 8px;
		border-bottom: 1px solid #ccc;
	}

	/* 销售信息 */
	.introduce-section {
		.title-tip {
			flex: 1;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			font-size: 26upx;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			view {
				flex: 1;
			}
		}
	}

	.footer {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20px 0;
	}

	.addgoods {
		width: 90%;
		background: #22C572;
		color: #fff;
		border-radius: 30px;
	}

	.addgoods:after {
		border: none;
	}

	.cu-bar {
		padding: 0 30rpx;
	}

	.no-data {
		/* background: red; */
		text-align: center;
		font-size: 36rpx;
		margin-top: 300rpx;
	}

	.list-item {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.list-item-left {
			display: flex;
			align-items: center;

			.number {
				margin-left: 40rpx;
			}

		}
	}
</style>