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 @@
.uni-drawer-tally-receive {
width: 100%;
height: 100vh;
background-color: #ffffff;
padding: 22rpx 22rpx 0 22rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title {
position: relative;
flex-shrink: 0;
.iconfont {
position: absolute;
......@@ -480,6 +485,11 @@
}
}
.drawer-scroll-area {
flex: 1;
overflow: hidden;
}
.p-text {
margin-top: 38rpx;
margin-bottom: 25rpx;
......@@ -726,18 +736,18 @@
}
.btn {
position: absolute;
bottom: 0;
left: 0;
flex-shrink: 0;
width: 100%;
z-index: 99;
margin-top: 20rpx;
border-top: 1px solid #f0f0f2;
.btn1 {
width: 50%;
height: 75rpx;
background: #f5f5f7;
font-size: 23rpx;
color: #1969f9;
color: #ff3700;
font-weight: bold;
}
......
assets/css/tallyReceive/record.scss
......@@ -622,11 +622,16 @@
.uni-drawer-tally-receive-detail {
width: 100%;
height: 100vh;
background-color: #ffffff;
padding: 22rpx 22rpx 0 22rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title {
position: relative;
flex-shrink: 0;
.iconfont {
position: absolute;
......@@ -643,6 +648,11 @@
}
}
.drawer-scroll-area {
flex: 1;
overflow: hidden;
}
.field-item {
flex-wrap: wrap;
......@@ -769,11 +779,11 @@
}
.btn {
position: absolute;
bottom: 0;
left: 0;
flex-shrink: 0;
width: 100%;
z-index: 99;
margin-top: 20rpx;
border-top: 1px solid #f0f0f2;
.btn1 {
width: 100%;
......
pages/tallyReceive/index.vue
......@@ -226,47 +226,49 @@
<text class="iconfont icon-juxing2" @click="closeDrawer()"></text>
<text class="text">一键理货</text>
</view>
<view class="p-text">
<text class="tt">您已选中</text>
<text class="ed">{{ filter_id.length }}</text>
<text class="tt">个理货任务</text>
</view>
<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" />
<scroll-view scroll-y class="drawer-scroll-area">
<view class="p-text">
<text class="tt">您已选中</text>
<text class="ed">{{ filter_id.length }}</text>
<text class="tt">个理货任务</text>
</view>
<view class="h2 row bothSide verCenter" style="margin-top: 25rpx;">
<view>
<text>理货照片：</text>
<text class="tt">最多只支持{{ maxNum }}张图</text>
<view class="pack">
<view class="h2" v-if="is_dc_required">
<text>D / C：</text>
<text style="color: red;">*</text>
</view>
<view class="num">
<text class="t1">{{ image_list.length }}</text>
<text class="t2">/{{ maxNum }}</text>
<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="pic-list row">
<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 class="h2 row bothSide verCenter" style="margin-top: 25rpx;">
<view>
<text>理货照片：</text>
<text class="tt">最多只支持{{ maxNum }}张图</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 class="num">
<text class="t1">{{ image_list.length }}</text>
<text class="t2">/{{ maxNum }}</text>
</view>
</view>
<view class="pic-list row">
<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 class="h2">理货备注：</view>
<view class="textarea-box"><textarea placeholder-style="color:#919399" placeholder="请输入" v-model="formParams.tally_remark" /></view>
</view>
</scroll-view>
<view class="btn row verCenter bothSide">
<view class="btn1 row rowCenter verCenter" @click="closeDrawer()">取 消</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