37 changed files with 1717 additions and 518 deletions
@ -0,0 +1,614 @@
|
||||
<template> |
||||
<!-- 顶部导航栏 --> |
||||
<u-navbar title="运单查询" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff' |
||||
titleStyle='color:#ffffff'></u-navbar> |
||||
|
||||
<view class="container primaryColor"> |
||||
<!-- 顶部搜索栏 --> |
||||
<view class="header-search"> |
||||
<view class="mr20 flex-c-c picker rem-0-8"> |
||||
<picker @change="bindPickerChange" :value="searchForm.scanStateChooseIndex" |
||||
:range="searchForm.searchTypeList.map(val => val.label)"> |
||||
<view class="uni-input"> |
||||
{{searchForm.searchTypeList.map(val => val.label)[searchForm.scanStateChooseIndex]}} |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="search flex1 mr20"> |
||||
<input class="searchInput" v-model="searchForm.code" type="text"> |
||||
<view class="clear_icon" v-if="searchForm.code" @click="searchForm.code = ''"> |
||||
<u-icon size="40" color="#172e60" name="close-circle"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="search"> |
||||
<view class="searchType" @click="scandata"> |
||||
搜索 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 数据详情 --> |
||||
<view class="dataInfo"> |
||||
<!-- 运单数据 --> |
||||
<view class="pd15"> |
||||
<!-- 运单号 --> |
||||
<view class="mb10 fwb rem-1 flex"> |
||||
<view> |
||||
运单号： |
||||
</view> |
||||
|
||||
<view> |
||||
{{waybillInfo.waybillNo}} |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 发货仓和目的仓 --> |
||||
<view class="mb20 rem-0-9 flex-c-sb"> |
||||
<!-- 发货仓 --> |
||||
<view class="text-start"> |
||||
<view> |
||||
发货仓 |
||||
</view> |
||||
|
||||
<view class="mt20"> |
||||
发货单位 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="text-center"> |
||||
<!-- 箭头 --> |
||||
<view class="flex-c-c"> |
||||
<view class="status-garden"> |
||||
|
||||
</view> |
||||
|
||||
<view class="status-line"> |
||||
|
||||
</view> |
||||
|
||||
<view class="status-triangle"> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class=""> |
||||
状态 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="text-end"> |
||||
<view> |
||||
目的仓 |
||||
</view> |
||||
|
||||
<view class="mt20"> |
||||
收货单位 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
|
||||
<!-- 虚线 --> |
||||
<view class="border-bottom-dashed mb20"></view> |
||||
|
||||
<!-- 服务信息 --> |
||||
<view class="mb20 pd15 rem-0-9"> |
||||
<view class="flex mb10"> |
||||
<view class="mr10"> |
||||
<u-icon size="40" color="#172e60" name="server-man"></u-icon> |
||||
</view> |
||||
|
||||
<view class=""> |
||||
服务类型： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
发货人： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
发货人联系方式： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
收件人： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
收件人联系方式： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
收货地址： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
货物总数： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 虚线 --> |
||||
<view class="border-bottom-dashed mb20"></view> |
||||
|
||||
<!-- 始发仓数据 --> |
||||
<view class="mb20 pd15 rem-0-9"> |
||||
<view class="flex mb10"> |
||||
<view class="mr10"> |
||||
<u-icon size="40" color='#172e60' name="map-fill"></u-icon> |
||||
</view> |
||||
<view class=""> |
||||
始发仓： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
在库数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
在途数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 虚线 --> |
||||
<view class="border-bottom-dashed mb20"></view> |
||||
|
||||
<!-- 中转仓数据 --> |
||||
<view class="mb20 pd15 rem-0-9"> |
||||
<view class="flex mb10"> |
||||
<view class="mr10"> |
||||
<u-icon size="40" color='#172e60' name="map-fill"></u-icon> |
||||
</view> |
||||
<view class=""> |
||||
中转仓： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
在途数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
中转仓A： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
在库数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
中转仓B： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex"> |
||||
<view class="label"> |
||||
在库数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 虚线 --> |
||||
<view class="border-bottom-dashed mb20"></view> |
||||
|
||||
<!-- 目的仓数据 --> |
||||
<view class="mb20 pd15 rem-0-9"> |
||||
<view class="flex mb10"> |
||||
<view class="mr10"> |
||||
<u-icon size="40" color='#172e60' name="map-fill"></u-icon> |
||||
</view> |
||||
<view class=""> |
||||
目的仓： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
在库数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex"> |
||||
<view class="label"> |
||||
在途数量： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
1 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 虚线 --> |
||||
<view class="border-bottom-dashed mb20"></view> |
||||
|
||||
<!-- 目的仓数据 --> |
||||
<view class=" pd15 rem-0-9"> |
||||
<view class="flex mb10"> |
||||
<view class="mr10 "> |
||||
<u-icon size="40" color="#172e60" name="car-fill"></u-icon> |
||||
</view> |
||||
|
||||
<view class=""> |
||||
配送： |
||||
</view> |
||||
|
||||
<view class=""> |
||||
{{waybillInfo.deliveryNum || 0}} |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex mb10"> |
||||
<view class="label"> |
||||
已签收数量： |
||||
</view> |
||||
|
||||
<view class="success"> |
||||
{{waybillInfo.signingNum || 0}} |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="flex"> |
||||
<view class="label"> |
||||
未签收数量： |
||||
</view> |
||||
|
||||
<view class="danger"> |
||||
{{(waybillInfo.deliveryNum || 0) - (waybillInfo.signingNum || 0)}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<tiplist ref="tiplists"></tiplist> |
||||
<!-- #ifdef APP --> |
||||
<saomiao2 :ishidestop="scanState !== 0"></saomiao2> |
||||
<!-- #endif --> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, reactive, shallowRef } from 'vue'; |
||||
import { |
||||
onShow, |
||||
onLoad, |
||||
onPullDownRefresh |
||||
} from '@dcloudio/uni-app' |
||||
import utils from '@/utils/utils.js'; |
||||
import { |
||||
postDeliveryInfo, |
||||
} from '@/api/user.js' |
||||
import useSystemSettingsStore from '@/store/useSystemSettingsStore'; |
||||
import { storeToRefs } from 'pinia'; |
||||
const { scanState } = storeToRefs(useSystemSettingsStore()) |
||||
|
||||
/** 订单详情 */ |
||||
const dataInfo = shallowRef<any>({}) |
||||
|
||||
/** 包件列表 */ |
||||
const packageList = ref([]) |
||||
|
||||
|
||||
/** 扫码码值 */ |
||||
const scancode = ref<string>('') |
||||
|
||||
/** 订单状态字典 */ |
||||
const orderStateDictionaries = reactive({ |
||||
'10': '部分入库', |
||||
'20': '已入库', |
||||
'30': '部分出库', |
||||
'40': '已出库', |
||||
'50': '部分装车', |
||||
'60': '已装车', |
||||
'70': '部分签收', |
||||
'80': '已签收', |
||||
}) |
||||
|
||||
/** 顶部搜素表单 */ |
||||
const searchForm = reactive({ |
||||
code: '', |
||||
searchTypeList: [ |
||||
{ |
||||
label: '运单查询', |
||||
type: 1 |
||||
}, |
||||
{ |
||||
label: '订单查询', |
||||
type: 2 |
||||
}, |
||||
], |
||||
scanStateChooseIndex: 0, |
||||
}) |
||||
|
||||
const waybillInfo = ref({}) |
||||
|
||||
// 组件实例 |
||||
const tiplists = ref(null) |
||||
|
||||
onLoad(() => { |
||||
// #ifdef APP |
||||
utils.ttsspke('订单查询, 请扫描或输入包条码') |
||||
// #endif |
||||
}) |
||||
|
||||
// 开启监听扫描 |
||||
onShow(async () => { |
||||
// #ifdef APP |
||||
uni.$off('scancodedate') |
||||
uni.$on('scancodedate', function (code) { |
||||
if (code) { |
||||
scancode.value = code |
||||
|
||||
searchForm.code = code |
||||
scandata() |
||||
} |
||||
}) |
||||
// #endif |
||||
}) |
||||
|
||||
onPullDownRefresh(() => { |
||||
const timer = setTimeout(() => { |
||||
dataInfo.value = {} |
||||
searchForm.code = '' |
||||
packageList.value = [] |
||||
|
||||
uni.stopPullDownRefresh() |
||||
clearTimeout(timer) |
||||
}, 500) |
||||
}) |
||||
|
||||
async function scandata() { |
||||
if (searchForm.code === '') return utils.handleToast('请输入正确的订单号') |
||||
const submitData = { |
||||
type: searchForm.searchTypeList[searchForm.scanStateChooseIndex].type, |
||||
code: searchForm.code |
||||
} |
||||
const res = await postDeliveryInfo(submitData) |
||||
const { code, data } = res |
||||
|
||||
if (code !== 200) return |
||||
|
||||
|
||||
waybillInfo.value = data |
||||
waybillInfo.value.waybillNo = searchForm.code |
||||
} |
||||
|
||||
/** |
||||
* 选择搜索类型 |
||||
*/ |
||||
function bindPickerChange(e) { |
||||
if (e.detail.value !== searchForm.scanStateChooseIndex) uni.showToast({ |
||||
title: '切换成功', |
||||
icon: 'none', |
||||
duration: 1500 |
||||
}) |
||||
console.log('picker发送选择改变，携带值为', e.detail.value) |
||||
searchForm.scanStateChooseIndex = e.detail.value |
||||
// 传入索引, 修改仓库中存储的状态 |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url("@/utils/style/common.scss"); |
||||
|
||||
// 最外层容器 |
||||
.container { |
||||
padding: 20upx; |
||||
font-size: 28upx; // 本页字体大小 |
||||
} |
||||
|
||||
// 顶部搜索栏 |
||||
.header-search { |
||||
height: 60upx; |
||||
padding: 0 0 20upx; |
||||
// border-bottom: 1upx solid #aaa; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.picker { |
||||
color: #fff; |
||||
background: var(--subjectColor); |
||||
padding: 0 30upx; |
||||
border-radius: 10upx; |
||||
} |
||||
} |
||||
|
||||
.search { |
||||
position: relative; |
||||
|
||||
// 查询结果的列表 |
||||
.searchResultList { |
||||
position: absolute; |
||||
top: 120%; |
||||
width: 100%; |
||||
background: #fff; |
||||
z-index: 80; |
||||
text-align: center; |
||||
line-height: 60upx; |
||||
max-height: 300upx; |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
.clear_icon { |
||||
position: absolute; |
||||
top: 52%; |
||||
right: 20upx; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
|
||||
// 搜索输入框 |
||||
.searchInput { |
||||
background: #fff; |
||||
// width: 500upx; |
||||
height: 100%; |
||||
padding-left: 20upx; |
||||
border: 1upx solid var(--subjectColor); |
||||
border-radius: 30upx; |
||||
padding-right: 60upx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
// 搜索类型 |
||||
.searchType { |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 40upx; |
||||
background: var(--subjectColor); |
||||
border-radius: 10upx; |
||||
color: #fff; |
||||
} |
||||
|
||||
// 数据详情 |
||||
.dataInfo { |
||||
// border: 1upx solid #aaa; |
||||
background: #fff; |
||||
border-radius: 10upx; |
||||
|
||||
.label { |
||||
min-width: 150upx; |
||||
flex: none; |
||||
} |
||||
} |
||||
|
||||
.border-bottom-solid { |
||||
border-bottom: 1upx solid #172e60; |
||||
} |
||||
|
||||
.border-bottom-dashed { |
||||
border-bottom: 1upx dashed #172e60; |
||||
} |
||||
|
||||
$arrowsColor: #f94a56; |
||||
|
||||
.status-garden { |
||||
width: 24upx; |
||||
height: 24upx; |
||||
background: $arrowsColor; |
||||
border-radius: 50%; |
||||
margin-left: 10upx; |
||||
} |
||||
|
||||
.status-line { |
||||
width: 200upx; |
||||
height: 6upx; |
||||
background: $arrowsColor; |
||||
} |
||||
|
||||
.status-triangle { |
||||
width: 0; |
||||
height: 0; |
||||
border: 16upx solid transparent; |
||||
border-right: none; |
||||
border-left: 34upx solid; |
||||
border-left-color: $arrowsColor; |
||||
border-radius: 10upx; |
||||
} |
||||
|
||||
.success { |
||||
color: #0f0; |
||||
} |
||||
|
||||
.danger { |
||||
color: #f94a56; |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,121 @@
|
||||
.flex{ |
||||
display: flex; |
||||
} |
||||
|
||||
.flex-c-c{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.flex-c-sb{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.flex-c-sa{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.flex1{ |
||||
flex: 1; |
||||
} |
||||
|
||||
.flexnone{ |
||||
flex: none; |
||||
} |
||||
|
||||
.mt10{ |
||||
margin-top: 10upx; |
||||
} |
||||
|
||||
.mt20{ |
||||
margin-top: 20upx; |
||||
} |
||||
|
||||
.ml10{ |
||||
margin-left: 10upx; |
||||
} |
||||
|
||||
.ml20{ |
||||
margin-left: 20upx; |
||||
} |
||||
|
||||
.mb10{ |
||||
margin-bottom: 10upx; |
||||
} |
||||
|
||||
.mb20{ |
||||
margin-bottom: 20upx; |
||||
} |
||||
|
||||
.mr10{ |
||||
margin-right: 10upx; |
||||
} |
||||
|
||||
.mr20{ |
||||
margin-right: 20upx; |
||||
} |
||||
|
||||
.pd10{ |
||||
padding: 10upx; |
||||
} |
||||
|
||||
.pd15{ |
||||
padding: 15upx; |
||||
} |
||||
|
||||
.pd20{ |
||||
padding: 20upx; |
||||
} |
||||
|
||||
.w100{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.h100{ |
||||
height: 100%; |
||||
} |
||||
|
||||
.text-center{ |
||||
text-align: center; |
||||
} |
||||
|
||||
.text-start{ |
||||
text-align: start; |
||||
} |
||||
|
||||
.text-end{ |
||||
text-align: end; |
||||
} |
||||
|
||||
.fwb{ |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.rem-1{ |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.rem-0-8{ |
||||
font-size: 0.8rem; |
||||
} |
||||
|
||||
.rem-0-9{ |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
.rem-1-5{ |
||||
font-size: 1.5rem; |
||||
} |
||||
|
||||
.primaryColor{ |
||||
color: #172e60; |
||||
} |
||||
|
||||
.primaryColorIm{ |
||||
color: #172e60 !important; |
||||
} |
||||
Loading…
Reference in new issue