<template>
|
<view>
|
<view class="code">
|
<uni-search-bar :focus="searchFocus" v-model="searchValue" @input="searchInput()" ma
|
maxlength="500" ancel="cancel" @clear="clear" placeholder="输入 / 扫描商品">
|
</uni-search-bar>
|
</view>
|
<view class="list" v-for="(item,i) in dataList">
|
<!-- 左侧 -->
|
<view class="list-left">
|
<!-- 左上 -->
|
<view class="list-left-top">
|
<view>工作号4099</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">工作状态</text>
|
<text>201.生成入库任务ID</text>
|
</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">入出库类型</text>
|
<text>1.入库</text>
|
</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">优先级</text>
|
<text>300</text>
|
</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">源库位</text>
|
<text>CS-101-001-01@1</text>
|
</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">目标库位</text>
|
<text>YZ-015-001-01@1</text>
|
</view>
|
<view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
|
<text style="flex: 1;">料箱码</text>
|
<text>1112223335</text>
|
</view>
|
</view>
|
<!-- 左下 -->
|
<view class="list-left-bottom">
|
<button size="mini">明细</button>
|
<button size="mini">完成</button>
|
<button size="mini">取消</button>
|
</view>
|
</view>
|
<!-- 右侧 -->
|
<!-- <view class="list-right"></view> -->
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
searchValue: '',
|
searchFocus: true,
|
dataList: [
|
{},
|
{},
|
{}
|
]
|
}
|
},
|
methods: {
|
// 搜索框输入
|
searchInput() {
|
|
},
|
// 重置搜索框
|
clear() {
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.code {
|
background-color: #d9d9d9;
|
z-index: 99;
|
position: sticky;
|
top: 80rpx;
|
left: 0;
|
}
|
.list {
|
margin: 20rpx;
|
background-color: #fff;
|
background-color: #157ec1;
|
color: #FFF;
|
border-radius: 20rpx;
|
border: 1px solid #eeeeee;
|
display: flex;
|
position: relative;
|
}
|
.list-left {
|
flex: 1;
|
position: relative;
|
}
|
.list-left-top {
|
/* border-bottom: 1px solid #eeeeee; */
|
padding: 20rpx;
|
}
|
.list-left-bottom {
|
border-bottom: 1px solid #eeeeee;
|
padding: 10rpx;
|
display: flex;
|
justify-content: space-around;
|
}
|
.list-right {
|
width: 100rpx;
|
border-left: 1px solid #eeeeee;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
