拣货任务

components/task-item/task-item.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="task-item">
+		<view class="task-head">
+			<view class="sn-box">单据编号：CGDD00000000692</view>
+			<view class="tips tips-red">待拣货</view>
+		</view>
+		<view class="task-line">
+			<view>客户名称：</view>
+			<view>快马阳光便利店</view>
+		</view>
+		<view class="task-line">
+			<view>客户名称：</view>
+			<view>快马阳光便利店</view>
+		</view>
+		<view class="task-line">
+			<view class="task-line2">
+				<view>货物总数：</view>
+				<view class="task-num">55件</view>
+			</view>
+			<view class="task-line2">
+				<view>货物种类：</view>
+				<view class="task-num">55件</view>
+			</view>
+		</view>
+		<view class="task-bottom">
+			<view class="btn-1">去出库</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			item:{
+				type:Object,
+				default:()=>{}
+			}
+		},
+		data() {
+			return{
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.task-item {
+		width: 100%;
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 24rpx 24rpx 0;
+		margin-bottom: 24rpx;
+		.task-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.sn-box {
+				color: #333;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				font-weight: 500;
+			}
+			.tips {
+				font-family: "PingFang SC";
+				font-size: 22rpx;
+				font-weight: 400;
+				width: 120rpx;
+				height: 44rpx;
+				border-radius: 8rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.tips-red {
+				color: #FF3B1D;
+				background-color: #fff;
+				background: rgba(255, 59, 29, 0.20);
+			}
+		}
+	
+		.task-line {
+			display: flex;
+			align-items: center;
+			color: #666;
+			font-family: "PingFang SC";
+			font-size: 28rpx;
+			font-weight: 400;
+			margin-top: 16rpx;
+		}
+		.task-line2 {
+			width: 50%;
+			display: flex;
+			align-items: center;
+			.task-num {
+				color: #0256FF;;
+			}
+		}
+	
+		.task-bottom {
+			border-top: 1px solid #F0F0F0;
+			margin-top: 32rpx;
+			height: 104rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.btn-1 {
+				width: 144rpx;
+				height: 56rpx;
+				border-radius: 8rpx;
+				background: #0256FF;
+				color: #FFF;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="container_box">
-		<u-navbar height="80rpx" title=" " bgColor="transparent">
+		<u-navbar height="40px" title=" " bgColor="transparent">
 			<view class="u-nav-slot btn-left" slot="left" @click="meunClick">
 				<image src="@/static/image/home/bulletpoint.png" mode=""></image>
 			</view>

pages/picking-task/index.vue

@@ -1,18 +1,131 @@
 <template>
-	<view>
-		<u-navbar height="80rpx" title="拣货任务" bgColor="transparent" autoBack>
-		<!-- 	<view class="u-nav-slot btn-left" slot="left" @click="meunClick">
-				<image src="@/static/image/home/bulletpoint.png" mode=""></image>
-			</view> -->
-			<!-- <view class="u-nav-slot btn-right" slot="right">
-				<image src="@/static/image/home/notice-icon.png" mode=""></image>
-			</view> -->
+	<view class="picking-task-page">
+		<u-navbar height="40px" title="拣货任务" bgColor="#F0F6FB" autoBack placeholder>
+			<view class="u-nav-slot btn-right" slot="right">
+				<view class="cang-name">{{cangName}}</view>
+				<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
+			</view>
 		</u-navbar>
+		<view class="container_main">
+			<u-sticky :offsetTop="offsetTop" bgColor="#F0F6FB">
+				<view class="search-box">
+					<u-search placeholder="请输入单据编号" bgColor="#fff" shape="square" v-model="searchKey" :showAction="false"></u-search>
+					<view class="flex_box">
+						<view class="scan-text">扫描单据二维码</view>
+						<view class="scan-icon">
+							<image src="@/static/image/scan-icon.png" mode=""></image>
+						</view>
+					</view>
+				</view>
+				<view class="type-box flex_box">
+					<view class="type-item">
+						<view class="type-val">{{type1}}</view>
+						<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
+					</view>
+					<view class="type-item">
+						<view class="type-val">{{type2}}</view>
+						<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
+					</view>
+				</view>
+			</u-sticky>
+			<view class="task-cont">
+				<block v-for="item in 10" :key="">
+					<task-item></task-item>
+				</block>
+			</view>
+		</view>
+		
 	</view>
 </template>
 
 <script>
+	import taskItem from '@/components/task-item/task-item.vue'
+	export default{
+		components:{
+			taskItem
+		},
+		data() {
+			return {
+				offsetTop:0,
+				cangName:'鹏越中心仓',
+				searchKey:'',
+				type1:'全部',
+				type2:'月份'
+			}
+		},
+		onLoad() {
+			let systemInfo = uni.getSystemInfoSync();
+			let statusBarHeight = systemInfo.statusBarHeight;
+			this.offsetTop = statusBarHeight + 40
+			console.log('状态栏的高度是：' + statusBarHeight + 'px');
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.btn-right {
+		display: flex;
+		align-items: center;
+		.cang-name {
+			color: #0256FF;
+			text-align: center;
+			font-family: "PingFang SC";
+			font-size: 28rpx;
+			font-weight: 600;
+			margin-right: 10rpx;
+		}
+	}
+	.picking-task-page {
+		min-height: 100vh;
+		background: #F0F6FB;
+		.container_main {
+			.search-box {
+				display: flex;
+				align-items: center;
+				padding: 0 32rpx;
+				.scan-text {
+					color: #333;
+					font-family: "PingFang SC";
+					font-size: 24rpx;
+					font-weight: 400;
+					margin-right: 20rpx;
+					margin-left: 30rpx;
+				}
+				.scan-icon {
+					width: 36rpx;
+					height: 36rpx;
+					background-color: #fff;
+					border-radius: 50%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					image {
+						width: 24rpx;
+						height: 24rpx;
+					}
+				}
+			}
+		
+			.type-box {
+				.type-item {
+					width: 50%;
+					height: 88rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					.type-val {
+						color: #000;
+						font-family: "PingFang SC";
+						font-size: 28rpx;
+						font-weight: 400;
+						margin-right: 10rpx;
+					}
+				}
+			}
+			
+			.task-cont {
+				padding: 0 24rpx;
+			}
+		}
+	}
 </style>

uni_modules/uview-ui/components/u-navbar/u-navbar.vue

@@ -27,7 +27,13 @@
 					@tap="leftClick"
 				>
 					<slot name="left">
-						<zui-svg-icon v-if="leftIcon&&leftIcon==='arrow-left'" width="48rpx" height="50rpx" icon="back" :color="leftIconColor"></zui-svg-icon>
+						<!-- <zui-svg-icon v-if="leftIcon&&leftIcon==='arrow-left'" width="48rpx" height="50rpx" icon="back" :color="leftIconColor"></zui-svg-icon> -->
+						<u-icon
+							v-if="leftIcon&&leftIcon==='arrow-left'"
+							name="arrow-left"
+							size="22"
+							color="#1F1F39"
+						></u-icon>
 						<u-icon
 							v-if="leftIcon&&leftIcon!=='arrow-left'"
 							:name="leftIcon"