Skip to content

梁建民 / wmsApp

Go to a project
Commit 2a063663 by liangjianmin
Options

feat(tallyReceive): Enhance drawer layout and styling 

- Added full height and flexbox layout to the tally receive and record drawers for improved responsiveness.
- Introduced a scrollable area within the drawer to accommodate content overflow.
- Updated button styles for better visual separation and interaction feedback.
- Adjusted color for button text to enhance visibility and user experience.
parent 97bdcd5d
Expand all
Inline Side-by-side
Showing with 65 additions and 43 deletions
assets/css/tallyReceive/index.scss
...@@ -459,11 +459,16 @@ ...@@ -459,11 +459,16 @@
.uni-drawer-tally-receive { .uni-drawer-tally-receive {
width: 100%; width: 100%;
height: 100vh;
background-color: #ffffff; background-color: #ffffff;
padding: 22rpx 22rpx 0 22rpx; padding: 22rpx 22rpx 0 22rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title { .title {
position: relative; position: relative;
flex-shrink: 0;
.iconfont { .iconfont {
position: absolute; position: absolute;
...@@ -480,6 +485,11 @@ ...@@ -480,6 +485,11 @@
} }
} }
.drawer-scroll-area {
flex: 1;
overflow: hidden;
}
.p-text { .p-text {
margin-top: 38rpx; margin-top: 38rpx;
margin-bottom: 25rpx; margin-bottom: 25rpx;
...@@ -726,18 +736,18 @@ ...@@ -726,18 +736,18 @@
} }
.btn { .btn {
position: absolute; flex-shrink: 0;
bottom: 0;
left: 0;
width: 100%; width: 100%;
z-index: 99; z-index: 99;
margin-top: 20rpx;
border-top: 1px solid #f0f0f2;
.btn1 { .btn1 {
width: 50%; width: 50%;
height: 75rpx; height: 75rpx;
background: #f5f5f7; background: #f5f5f7;
font-size: 23rpx; font-size: 23rpx;
color: #1969f9; color: #ff3700;
font-weight: bold; font-weight: bold;
} }
......
assets/css/tallyReceive/record.scss
...@@ -622,11 +622,16 @@ ...@@ -622,11 +622,16 @@
.uni-drawer-tally-receive-detail { .uni-drawer-tally-receive-detail {
width: 100%; width: 100%;
height: 100vh;
background-color: #ffffff; background-color: #ffffff;
padding: 22rpx 22rpx 0 22rpx; padding: 22rpx 22rpx 0 22rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title { .title {
position: relative; position: relative;
flex-shrink: 0;
.iconfont { .iconfont {
position: absolute; position: absolute;
...@@ -643,6 +648,11 @@ ...@@ -643,6 +648,11 @@
} }
} }
.drawer-scroll-area {
flex: 1;
overflow: hidden;
}
.field-item { .field-item {
flex-wrap: wrap; flex-wrap: wrap;
...@@ -769,11 +779,11 @@ ...@@ -769,11 +779,11 @@
} }
.btn { .btn {
position: absolute; flex-shrink: 0;
bottom: 0;
left: 0;
width: 100%; width: 100%;
z-index: 99; z-index: 99;
margin-top: 20rpx;
border-top: 1px solid #f0f0f2;
.btn1 { .btn1 {
width: 100%; width: 100%;
......
pages/tallyReceive/index.vue
...@@ -226,47 +226,49 @@ ...@@ -226,47 +226,49 @@
<text class="iconfont icon-juxing2" @click="closeDrawer()"></text> <text class="iconfont icon-juxing2" @click="closeDrawer()"></text>
<text class="text">一键理货</text> <text class="text">一键理货</text>
</view> </view>
<view class="p-text"> <scroll-view scroll-y class="drawer-scroll-area">
<text class="tt">您已选中</text> <view class="p-text">
<text class="ed">{{ filter_id.length }}</text> <text class="tt">您已选中</text>
<text class="tt">个理货任务</text> <text class="ed">{{ filter_id.length }}</text>
</view> <text class="tt">个理货任务</text>
<view class="pack">
<view class="h2" v-if="is_dc_required">
<text>D / C：</text>
<text style="color: red;">*</text>
</view>
<view class="h2" v-else>D / C：</view>
<view class="dc-input-box">
<input class="uni-input" :placeholder="is_dc_required ? '请输入D/C，该项必填' : '请输入D/C'" placeholder-style="color:#919399" v-model="formParams.date_code" />
</view> </view>
<view class="h2 row bothSide verCenter" style="margin-top: 25rpx;"> <view class="pack">
<view> <view class="h2" v-if="is_dc_required">
<text>理货照片：</text> <text>D / C：</text>
<text class="tt">最多只支持{{ maxNum }}张图</text> <text style="color: red;">*</text>
</view> </view>
<view class="num"> <view class="h2" v-else>D / C：</view>
<text class="t1">{{ image_list.length }}</text> <view class="dc-input-box">
<text class="t2">/{{ maxNum }}</text> <input class="uni-input" :placeholder="is_dc_required ? '请输入D/C，该项必填' : '请输入D/C'" placeholder-style="color:#919399" v-model="formParams.date_code" />
</view> </view>
</view> <view class="h2 row bothSide verCenter" style="margin-top: 25rpx;">
<view class="pic-list row"> <view>
<template v-if="image_list.length > 0"> <text>理货照片：</text>
<view class="box" v-for="(item, index) in image_list" :key="index"> <text class="tt">最多只支持{{ maxNum }}张图</text>
<image :src="item" mode="aspectFill" @click="previewChange(image_list, index)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index)"></text>
</view> </view>
</template> <view class="num">
<view class="default row rowCenter verCenter" @click="chooseImageChange()" v-if="image_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view> <text class="t1">{{ image_list.length }}</text>
</view> <text class="t2">/{{ maxNum }}</text>
<p style="color: red;font-size: 17rpx;margin-bottom: 10rpx;" v-if="is_watch">选中包含有采购需看货的物料，建议上传理货照片！</p> </view>
<view class="print row verCenter" @click="toggle()"> </view>
<text class="check-box-icon" :class="{ curr: print_flag }"></text> <view class="pic-list row">
<text class="tt">打印入库标签</text> <template v-if="image_list.length > 0">
<view class="box" v-for="(item, index) in image_list" :key="index">
<image :src="item" mode="aspectFill" @click="previewChange(image_list, index)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index)"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange()" v-if="image_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
</view>
<p style="color: red;font-size: 17rpx;margin-bottom: 10rpx;" v-if="is_watch">选中包含有采购需看货的物料，建议上传理货照片！</p>
<view class="print row verCenter" @click="toggle()">
<text class="check-box-icon" :class="{ curr: print_flag }"></text>
<text class="tt">打印入库标签</text>
</view>
<view class="h2">理货备注：</view>
<view class="textarea-box"><textarea placeholder-style="color:#919399" placeholder="请输入" v-model="formParams.tally_remark" /></view>
</view> </view>
<view class="h2">理货备注：</view> </scroll-view>
<view class="textarea-box"><textarea placeholder-style="color:#919399" placeholder="请输入" v-model="formParams.tally_remark" /></view>
</view>
<view class="btn row verCenter bothSide"> <view class="btn row verCenter bothSide">
<view class="btn1 row rowCenter verCenter" @click="closeDrawer()">取 消</view> <view class="btn1 row rowCenter verCenter" @click="closeDrawer()">取 消</view>
<view class="btn2 row rowCenter verCenter" @click="createTallyReceiveSubmit()">一键理货</view> <view class="btn2 row rowCenter verCenter" @click="createTallyReceiveSubmit()">一键理货</view>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment