You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
614 lines
11 KiB
614 lines
11 KiB
<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: 2upx 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: 2upx 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: 2upx solid #aaa; |
|
background: #fff; |
|
border-radius: 10upx; |
|
|
|
.label { |
|
min-width: 150upx; |
|
flex: none; |
|
} |
|
} |
|
|
|
.border-bottom-solid { |
|
border-bottom: 2upx 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> |