我的任务

pages/task/my_task.vue

@@ -1,22 +1,484 @@
-<template>
-	<view>
-		
+<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
+				}
+			};
 		},
-		methods: {
+		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>
+<style lang="scss" scoped>
+	page,
+	.content {
+	}
+	.line{
+		display:inline-block;
+		padding:5px;
+		position:relative;
+		font-size:17px;
+		margin-right: 126px;
+	}
+
+	.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>