yiliangyiyun-app/pages/task/my_task.vue

<template name="task">
	<view class="content">
		<view class="cu-bar search bg-white">
			<view class="search-form round" @click="naviageToPage('/pageA/product/search?TabCur=')">
				<text style='color: #ccc;' class="cuIcon-search"></text>
				<input type="text" placeholder="请输入合同编号、车牌号或派车编号" confirm-type="search"></input>
			</view>

		</view>
		<view style='background:#fff;padding:0 145px;display:table-footer-group ;'>
			<view @click='tabcarchange(1)' class='line' :class='TabCur==1?"active":""'>未完成</view>
			<view @click='tabcarchange(3)' class='line' :class='TabCur==3?"active":""'>已完成</view>
		</view>
		<view class="introduce-section">
			<view v-for="(item, index) in taskInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="price-box">
					<view class='tag tag-bule radius line-pink'>入库任务</view>
					<view class="title">辽H12345（C001）{{item.car_no}}{{item.tran_car_no}}</view>
				</view>
				<view class="titles ">CG12345678{{item.contract_no}}</view>
				<view class="titles titleds_aa">2021-06-30{{item.predict_date}}</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "task",
		data() {
			return {
				PageCur: "task",
				taskInfo: [],
				pages: 1, //页数
				limit: 10, //每次取条目数
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				showTran: true,
				scrollTop: 0,
				statusFlag: 1,
				TabCur: 0,
				current: 1,
				warehouseInOutInfo: {
					pageSize: 10,
					currentPage: 1
				}
			};
		},
		onLoad(options) {

			this.getIndexBuyData();
			this.getIndexBuyData()
		},
		methods: {
			getIndexBuyData() {
				console.log(11111)
				const that = this
				var pages = that.pages
				var limit = that.limit
				console.log(2112454)
				this.warehouseInOutInfo.statusFlag = this.statusFlag
				this.$api.doRequest('get', '/warehouseInOutInfo/selectInfo', this.warehouseInOutInfo).then(res => {
					console.log(12545645)
					if (res.data.code == 200) {
						let data = res.data.data
						//采购信息
						if (data.length > 0) {
							that.taskInfo = that.taskInfo.concat(data)
							that.isLoadMore = false
						} else {
							if (that.pages > 1) {
								that.pages -= 1
							}
							that.isLoadMore = true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			tabcarchange(statusFlag) {
				this.statusFlag = statusFlag
				this.pageSize = 1
				this.getIndexBuyData()
			},

		}
	}
</script>

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

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

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

	.line.active:after {
		content: '';
		display: block;
		position: absolute;
		width: 18px;
		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: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

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

	.tag-bule {
		background: #CDE7FB;
		color: #0B4572;
	}

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

	.tag-yellow {
		background: #FBF4B1;
		color: #5C4409;
	}

	.tag {
		padding: 5px;
		display: inline-flex;
		font-size: 22rpx;
		margin: 3px;
	}

	.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: 0 30upx;
		background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 98%;
			border-bottom: 1px solid #ccc;
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-lg;
			color: #121212;
		}

		.price-orther {
			font-size: $font-sm;
			color: $font-color-base;
		}

		.price {
			font-size: 64rpx;
			color: #39b54a;
			line-height: 1;
			padding-right: 10upx;
		}

		.goods1 {
			font-size: $font-sm;
			color: $font-color-base;
		}

		.goods2 {
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}

		.goods3 {
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}

		.goods4 {
			font-size: $font-sm;
			color: #ff5500;
		}

		.goods5 {
			font-size: $font-sm;
			color: $font-color-base;
		}

		.view-item {
			width: 100%;
			// line-height: 40upx;
			padding-top: 10upx;
		}

		.confirm-btn {
			margin-left: 20%;
		}

		.date-time {
			margin-left: 30%;
		}

		.padding-xs-tmp {
			padding: 15upx 10upx 10upx 10upx;
		}
	}

	.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 {
		background: #fff;
		padding: 20upx 30upx;
		padding-bottom: 100upx;

		.guess-item {
			padding-bottom: 20upx;
			border-bottom: 1px solid #ccc;
		}

		.title {
			font-size: 13upx;
			color: $font-color-dark;
			font-weight: bold;
			height: 100upx;
			line-height: 50upx;
			flex: 2.5;
			margin-left: -4px;
			padding: 0px 24px;

		}

		.title-tip {
			flex: 1;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 57px;
			padding: 5px 0;
			font-size: 13px;
			color: #fa436a;
		}

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

	.titles {
		display: -webkit-inline-box;

	}

	.titleds_aa {
		float: right;
	}
</style>