|
|
@@ -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>
|
hi