Skip to content

梁建民 / wmsMin

Go to a project
Commit b5ca6d69 by liangjianmin
Options

新增快递回单上传页面及相关API，优化首页导航逻辑

parent d093ade7
Expand all
Inline Side-by-side
Showing with 824 additions and 4 deletions
assets/css/stockOut/stockOutReceiptUpload.scss 0 → 100644
.page-box {
padding: 15rpx 22rpx;
height: 100vh;
display: flex;
flex-direction: column;
.search-all-box {
margin-top: 15rpx;
}
.tips {
margin-top: 15rpx;
.text {
font-size: 20rpx;
color: #919399;
}
.summary {
font-size: 20rpx;
color: #919399;
}
.blue {
color: #1969f9;
margin: 0 4rpx;
}
}
.list-scroll {
flex: 1;
margin-top: 15rpx;
height: 0;
}
.pick_img_list {
flex: 1;
flex-wrap: wrap;
.img_list {
position: relative;
width: 120rpx;
height: 120rpx;
margin-right: 16rpx;
margin-bottom: 12rpx;
image {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.delete-btn {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 36rpx;
height: 36rpx;
background: #ff4757;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 20rpx;
color: #ffffff;
}
}
}
.default {
width: 120rpx;
height: 120rpx;
background: #f5f7fa;
border: 2rpx dashed #dcdfe6;
border-radius: 8rpx;
.iconfont {
font-size: 48rpx;
color: #c0c4cc;
}
}
}
}
components/DateRangePicker.vue 0 → 100644
<template>
<view class="time-interval-box row bothSide verCenter">
<view class="time-interval row verCenter bothSide">
<view class="row verCenter">
<text class="iconfont icon-juxing41"></text>
<picker mode="date" @change="handleDateChange(1, $event)">
<input type="text" class="uni-input" :placeholder="startPlaceholder" placeholder-style="color:#919399" :value="startTime" />
</picker>
</view>
<text class="iconfont icon-jinggao2" @click="clearStartTime" v-if="startTime"></text>
</view>
<view class="time-interval row verCenter bothSide">
<view class="row verCenter">
<text class="iconfont icon-juxing41"></text>
<picker mode="date" @change="handleDateChange(2, $event)">
<input type="text" class="uni-input" :placeholder="endPlaceholder" placeholder-style="color:#919399" :value="endTime" />
</picker>
</view>
<text class="iconfont icon-jinggao2" @click="clearEndTime" v-if="endTime"></text>
</view>
</view>
</template>
<script>
export default {
props: {
// 开始时间
startTime: {
type: String,
default: ''
},
// 结束时间
endTime: {
type: String,
default: ''
},
// 开始时间占位符
startPlaceholder: {
type: String,
default: '请选择开始日期'
},
// 结束时间占位符
endPlaceholder: {
type: String,
default: '请选择结束日期'
},
// 是否自动校验时间范围
autoValidate: {
type: Boolean,
default: true
}
},
methods: {
/**
* 处理日期选择变化
* @param {Number} type 1-起始时间 2-结束时间
* @param {Object} event 事件对象
*/
handleDateChange(type, event) {
var selectedDate = event.detail.value;
var newStartTime = this.startTime;
var newEndTime = this.endTime;
if (type === 1) {
newStartTime = selectedDate;
} else if (type === 2) {
newEndTime = selectedDate;
}
// 时间范围校验
if (this.autoValidate && newStartTime && newEndTime && newStartTime > newEndTime) {
uni.showToast({
title: '开始时间不能大于结束时间',
icon: 'none'
});
return;
}
// 触发更新事件
this.$emit('change', {
startTime: newStartTime,
endTime: newEndTime,
dateRange: this.formatDateRange(newStartTime, newEndTime)
});
},
/**
* 清除开始时间
*/
clearStartTime() {
this.$emit('change', {
startTime: '',
endTime: this.endTime,
dateRange: this.formatDateRange('', this.endTime)
});
},
/**
* 清除结束时间
*/
clearEndTime() {
this.$emit('change', {
startTime: this.startTime,
endTime: '',
dateRange: this.formatDateRange(this.startTime, '')
});
},
/**
* 格式化日期范围
* @param {String} start 开始时间
* @param {String} end 结束时间
*/
formatDateRange(start, end) {
if (start && end) {
return `${start} ~ ${end}`;
} else if (start) {
return `${start} ~ ${start}`;
} else if (end) {
return `${end} ~ ${end}`;
} else {
return '';
}
}
}
};
</script>
<style scoped lang="scss">
.time-interval-box {
.time-interval {
width: 48%;
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
padding-left: 17rpx;
padding-right: 10rpx;
box-sizing: border-box;
.iconfont {
font-size: 32rpx;
color: #919399;
}
.uni-input {
margin-left: 13rpx;
font-size: 24rpx;
}
}
}
</style>
\ No newline at end of file
components/ScrollList.vue 0 → 100644
<template>
<scroll-view
class="scroll-list"
:scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="handleLoadMore"
:refresher-enabled="refresherEnabled"
:refresher-triggered="refreshing"
@refresherrefresh="handleRefresh"
>
<!-- 数据列表插槽，使用 key 强制完整渲染，解决 APP 端首次加载 flex 布局计算问题 -->
<view class="slot-wrapper" :key="slotKey">
<slot></slot>
</view>
<!-- 骨架屏 -->
<view class="skeleton-list" v-if="skeleton">
<view class="skeleton-item" v-for="i in skeletonCount" :key="i">
<slot name="skeleton">
<view class="skeleton-checkbox"></view>
<view class="skeleton-content">
<view class="skeleton-row">
<view class="skeleton-line skeleton-line-short"></view>
<view class="skeleton-line skeleton-line-short"></view>
</view>
<view class="skeleton-row">
<view class="skeleton-line skeleton-line-medium"></view>
<view class="skeleton-line skeleton-line-medium"></view>
</view>
<view class="skeleton-row">
<view class="skeleton-line skeleton-line-long"></view>
</view>
<view class="skeleton-row">
<view class="skeleton-line skeleton-line-short"></view>
<view class="skeleton-line skeleton-line-short"></view>
</view>
</view>
<view class="skeleton-btn"></view>
</slot>
</view>
</view>
<!-- 无数据展示 -->
<view class="scroll-list-empty" v-if="showEmpty">
<text class="iconfont icon-wushuju"></text>
<text class="text">{{ emptyText }}</text>
</view>
<!-- 加载更多 -->
<view class="loading-more" v-if="loadingMore">
<view class="loading-icon"></view>
<text class="loading-text">加载中...</text>
</view>
<!-- 数据到底提示 -->
<view class="load-bottom" v-if="showBottom">—— {{ bottomText }} ——</view>
</scroll-view>
</template>
<script>
export default {
name: 'ScrollList',
props: {
// 列表数据
list: {
type: Array,
default: () => []
},
// 骨架屏显示状态
skeleton: {
type: Boolean,
default: false
},
// 下拉刷新状态
refreshing: {
type: Boolean,
default: false
},
// 加载更多状态
loadingMore: {
type: Boolean,
default: false
},
// 数据到底标识
loadBottom: {
type: Boolean,
default: false
},
// 是否还有更多数据
hasMoreData: {
type: Boolean,
default: true
},
// 当前页码
page: {
type: Number,
default: 1
},
// 骨架屏数量
skeletonCount: {
type: Number,
default: 4
},
// 空数据提示文字
emptyText: {
type: String,
default: '查不到当前数据'
},
// 数据到底提示文字
bottomText: {
type: String,
default: '数据已经到底'
},
// 触底距离（单位px）
lowerThreshold: {
type: Number,
default: 100
},
// 是否启用下拉刷新
refresherEnabled: {
type: Boolean,
default: true
}
},
computed: {
// slot 的 key，基于 list 长度和 skeleton 状态生成，强制重新渲染
slotKey() {
return `slot-${this.list.length}-${this.skeleton ? 1 : 0}`;
},
// 显示空数据提示
showEmpty() {
return !this.skeleton && this.list.length === 0 && !this.loadingMore && !this.refreshing;
},
// 显示到底提示：第一页不显示，只有翻页后数据到底才显示
showBottom() {
return this.loadBottom && this.list.length > 0 && !this.loadingMore && this.page > 1;
}
},
methods: {
/**
* 下拉刷新
*/
handleRefresh() {
if (this.refreshing) return;
// #ifdef APP-PLUS
uni.vibrateShort();
// #endif
this.$emit('refresh');
},
/**
* 加载更多
*/
handleLoadMore() {
if (!this.hasMoreData || this.loadingMore || this.loadBottom) return;
this.$emit('loadmore');
}
}
};
</script>
<style scoped lang="scss">
.scroll-list {
flex: 1;
height: 100%;
}
.slot-wrapper {
width: 100%;
}
.skeleton-list {
padding: 0;
.skeleton-item {
display: flex;
flex-wrap: wrap;
position: relative;
padding: 15px 17rpx 18rpx 17rpx;
background: #ffffff;
box-shadow: 0px 3rpx 3rpx 0px rgba(198, 199, 204, 0.3);
border-radius: 10rpx;
margin-bottom: 15rpx;
}
.skeleton-checkbox {
width: 36rpx;
height: 36rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 6rpx;
margin-right: 10rpx;
}
.skeleton-content {
flex: 1;
}
.skeleton-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 12rpx;
}
.skeleton-line {
height: 24rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4rpx;
margin-right: 20rpx;
margin-bottom: 8rpx;
}
.skeleton-line-short {
width: 35%;
}
.skeleton-line-medium {
width: 45%;
}
.skeleton-line-long {
width: 90%;
}
.skeleton-btn {
position: absolute;
right: 17rpx;
bottom: 18rpx;
width: 80rpx;
height: 38rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8rpx;
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.scroll-list-empty {
padding: 100rpx 0;
.iconfont {
font-size: 160rpx;
color: #ccc;
}
.text {
font-size: 20rpx;
color: #484B59;
margin-top: 20rpx;
}
}
.loading-more {
padding: 30rpx 0;
.loading-icon {
width: 36rpx;
height: 36rpx;
border: 4rpx solid #e5e5e5;
border-top-color: #1969f9;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 16rpx;
}
.loading-text {
font-size: 26rpx;
color: #999;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.load-bottom {
padding: 30rpx 0;
font-size: 24rpx;
color: #999;
}
.scroll-list-empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loading-more {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.load-bottom {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
components/SearchBoxWithPicker.vue 0 → 100644
<template>
<view class="search-box-container row bothSide verCenter">
<!-- 选择器区域 -->
<view class="picker-wrapper row rowCenter verCenter" v-if="showPicker">
<picker @change="handlePickerChange" :value="currentPickerIndex" :range="pickerOptions">
<view class="picker-content row verCenter">
<view class="picker-text">{{ pickerOptions[currentPickerIndex] }}</view>
<view class="picker-arrow"></view>
</view>
</picker>
</view>
<!-- 搜索输入框区域 -->
<view class="input-wrapper row bothSide verCenter" :class="{ 'full-width': !showPicker }">
<view class="input-content row verCenter">
<text class="search-icon iconfont icon-juxing11" @click="handleSearchIconClick"></text>
<input class="search-input" :placeholder="placeholder" :placeholder-style="placeholderStyle" :focus="inputFocus" v-model="inputValue" @input="handleInput" maxlength="-1" />
</view>
<text class="clear-icon iconfont icon-a-juxing111" @click="handleClearInput" v-if="showClearIcon"></text>
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS
import { openScan } from '@/uni_modules/xtf-scanqrcode';
// #endif
export default {
name: 'SearchBoxWithPicker',
props: {
// 是否显示选择器
showPicker: {
type: Boolean,
default: true
},
// 选择器选项数组
pickerOptions: {
type: Array,
default: () => ['全量搜索']
},
// 选择器默认选中索引
pickerIndex: {
type: Number,
default: 0
},
// 输入框占位符
placeholder: {
type: String,
default: '请输入搜索关键词'
},
// 占位符样式
placeholderStyle: {
type: String,
default: 'color:#919399'
},
// 输入框是否自动获取焦点
focus: {
type: Boolean,
default: false
},
// 输入框默认值
value: {
type: String,
default: ''
},
// 是否显示清空图标
showClear: {
type: Boolean,
default: false
},
// 是否启用扫码功能
showScan: {
type: Boolean,
default: false
}
},
data() {
return {
currentPickerIndex: this.pickerIndex,
inputValue: this.value,
inputFocus: this.focus,
showClearIcon: this.showClear
};
},
watch: {
value(newVal) {
this.inputValue = newVal;
},
focus(newVal) {
this.inputFocus = newVal;
},
showClear(newVal) {
this.showClearIcon = newVal;
},
pickerIndex(newVal) {
this.currentPickerIndex = newVal;
}
},
methods: {
/**
* 选择器变化事件
*/
handlePickerChange(e) {
this.currentPickerIndex = e.detail.value;
this.$emit('picker-change', {
index: this.currentPickerIndex,
value: this.pickerOptions[this.currentPickerIndex]
});
},
/**
* 输入框输入事件
*/
handleInput(e) {
const value = e.detail.value;
this.inputValue = value;
this.showClearIcon = !!value;
this.$emit('input', value);
this.$emit('update:value', value);
},
/**
* 清空输入
*/
handleClearInput() {
this.inputValue = '';
this.showClearIcon = false;
this.$emit('clear');
this.$emit('update:value', '');
// 重新获取焦点
this.inputFocus = false;
setTimeout(() => {
this.inputFocus = true;
}, 200);
},
/**
* 搜索图标点击事件
*/
handleSearchIconClick() {
if (!this.showScan) return;
// #ifdef APP-PLUS
openScan({
scanHintText: '请将条码/二维码对准扫描框',
fullScreenScan: true,
isShowBeep: false,
isShowVibrate: true,
isShowLightController: true,
isShowPhotoAlbum: false,
success: (type, data) => {
if (type === 0) {
this.inputValue = data;
this.showClearIcon = true;
this.$emit('update:value', data);
this.$emit('scan', data);
}
}
});
// #endif
// #ifdef MP-WEIXIN
uni.scanCode({
success: (res) => {
var data = res.result;
this.inputValue = data;
this.showClearIcon = true;
this.$emit('update:value', data);
this.$emit('scan', data);
}
});
// #endif
}
}
};
</script>
<style scoped lang="scss">
.search-box-container {
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
padding: 0 18rpx;
.picker-wrapper {
width: 160rpx;
height: 100%;
border-right: 1px solid #f0f0f2;
padding: 0 12rpx 0 0;
.picker-text {
font-size: 24rpx;
color: #292b33;
font-weight: 600;
}
.picker-arrow {
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 11rpx solid #666;
margin-left: 12rpx;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center 30%;
&:active {
transform: rotate(180deg) scale(1.1);
border-top-color: #1969f9;
}
}
}
.input-wrapper {
flex: 1;
height: 100%;
margin-left: 2rpx;
&.full-width {
margin-left: 0;
}
.input-content {
flex: 1;
}
.search-icon {
font-size: 30rpx;
color: #919399;
margin-left: 10rpx;
margin-right: 14rpx;
flex-shrink: 0;
}
.search-input {
flex: 1;
font-size: 24rpx;
color: #484b59;
height: 100%;
}
.clear-icon {
font-size: 30rpx;
color: #c6c7cc;
margin-left: 10rpx;
flex-shrink: 0;
}
}
}
</style>
pages.json
......@@ -278,6 +278,11 @@
"style": {
"navigationBarTitleText": "滞留预警"
}
}, {
"path": "pages/stockOut/stockOutReceiptUpload",
"style": {
"navigationBarTitleText": "快递回单上传"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
......
pages/home/index.vue
......@@ -214,7 +214,9 @@
},
gridClick(item, index) {
if (item.name == '快递回单上传') {
this.scanChange();
uni.navigateTo({
url: '/pages/stockOut/stockOutReceiptUpload'
});
} else if (item.name == '打印标签') {
uni.navigateTo({
url: '/pages/tag/printNew'
......
util/api.js
......@@ -7,13 +7,15 @@ var ENV_CONFIG = {
API_BASE: 'https://api.ichunt.com',
API_BASE_OSS: 'https://image.ichunt.net',
API_BASE_OSS_HK: 'http://hk.image.semour.com',
API_BASE_WMS: 'https://wms.ichunt.net'
API_BASE_WMS: 'https://wms.ichunt.net',
API_BASE_SCWMS: 'http://scwms.ichunt.net'
},
development: {
API_BASE: 'http://api.liexin.com',
API_BASE_OSS: 'http://image.liexindev.net',
API_BASE_OSS_HK: 'http://image.liexindev.net',
API_BASE_WMS: 'http://wms.liexindev.net'
API_BASE_WMS: 'http://wms.liexindev.net',
API_BASE_SCWMS: 'http://adminwms.liexindev.net'
}
};
......@@ -23,6 +25,7 @@ var API_BASE = currentEnv.API_BASE;
var API_BASE_OSS = currentEnv.API_BASE_OSS;
var API_BASE_OSS_HK = currentEnv.API_BASE_OSS_HK;
var API_BASE_WMS = currentEnv.API_BASE_WMS;
var API_BASE_SCWMS = currentEnv.API_BASE_SCWMS;
// 环境日志输出
var envText = ENV === 'production' ? '🔴 正式环境' : '🟢 测试环境';
......@@ -425,7 +428,15 @@ var API = {
/**
* 滞留数据详情
*/
getRetentionList: API_BASE + '/supplywechatwms/getRetentionList'
getRetentionList: API_BASE + '/supplywechatwms/getRetentionList',
/**
* 销售出库单列表（快递回单上传）
*/
stockOutList: API_BASE_SCWMS + '/api/stockOut/stockOutList',
/**
* 快递回单上传
*/
uploadExpressPic: API_BASE_SCWMS + '/api/stockOut/uploadExpressPic'
}
......
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