351 lines
9.5 KiB
Vue
351 lines
9.5 KiB
Vue
<template>
|
|
<tpx-page>
|
|
<view class="dt-block" style="margin-top: 0;">
|
|
|
|
<!-- <tpx-text-dic :value="modelInfo.waybillStatus" :list="dicData.emis_waybill_status" ></tpx-text-dic> -->
|
|
<!-- <view class="dt-tle">
|
|
<view class="t1">订单号: {{modelInfo.orderSn}}</view>
|
|
<view class="t2">
|
|
<text class="clr-prm">
|
|
<tpx-text-dic :value="modelInfo.orderStatus" :list="dicData.emis_order_status" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view> -->
|
|
<view class="dt-tle">
|
|
<view class="t1">运单号: {{modelInfo.billCode}}</view>
|
|
<view class="t2">
|
|
<text class="clr-prm">
|
|
<tpx-text-dic :value="modelInfo.billCode" :list="dicData.emis_waybill_status" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view>
|
|
<bpe-addressjiami-tmp v-model:value="modelInfo"></bpe-addressjiami-tmp>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-tle">
|
|
<view class="t1">托寄货物描述</view>
|
|
<view class="t2">
|
|
<text class="clr-prm">
|
|
<tpx-text-dic :value="modelInfo.waybillStatus" :list="dicData.emis_waybill_status" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view v-for="(item) in (modelInfo.cargoList || [])" class="yditem">
|
|
<view class="ydi-lab">
|
|
<text class="font-weight">{{item.goodsName}}</text>
|
|
<text>预报: {{item.cargoQty}}</text>
|
|
</view>
|
|
<view class="ydi-lab mt-10">
|
|
<text class="clr-sub">{{item.nationArea}}</text>
|
|
<text>实入仓: {{ item.cargoQty - (item.abnormalQty || 0) }}</text>
|
|
</view>
|
|
<view class="ydi-lab mt-10">
|
|
<text class="clr-prm">{{item.price}} CNY</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="dt-item">
|
|
<view class="font-weight">
|
|
<text>总重量:{{modelInfo.totalWeight || '-'}}kg</text>
|
|
<text class="pl-20">总体积:{{modelInfo.totalVolume || '-'}}m³</text>
|
|
</view>
|
|
</view>
|
|
|
|
<u-row justify="end">
|
|
<view style="display: inline-block;white-space: nowrap;" class="mt-10">
|
|
<u-row>
|
|
<u-button @click="goto(`warehousing/detail?id=${211}`)" shape="circle" type="primary"
|
|
custom-style="height: 54rpx;margin-left: 20rpx;">入仓单</u-button>
|
|
<u-button shape="circle" type="primary" :plain="true"
|
|
custom-style="height: 54rpx;margin-left: 20rpx;">单证</u-button>
|
|
</u-row>
|
|
</view>
|
|
</u-row>
|
|
</view>
|
|
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-tle">
|
|
<view class="t1">产品类型及费用</view>
|
|
<view class="t2">
|
|
<text class="clr-prm">
|
|
<tpx-text-dic :value="modelInfo.paymentStatus" :list="dicData.emis_payment_status" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view class="blcok-grey-sm">
|
|
<view class="dt-item">
|
|
<view v-if="modelInfo.reciever">
|
|
<text class="clr-sub pr-10">寄件网点:</text>
|
|
<text class="">{{ modelInfo.sendSiteName }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="clr-sub pr-10">目的网点:</text>
|
|
<text class="">{{ modelInfo.dispatchUnderlingSiteName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view v-if="modelInfo.reciever">
|
|
<text class="clr-sub pr-10">目的地:</text>
|
|
<text class="">{{ modelInfo.destinationName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view v-if="modelInfo.reciever">
|
|
<text class="clr-sub pr-10">目的国家:</text>
|
|
<text class="">{{ modelInfo.reciever.countryName }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="clr-sub pr-10">线路:</text>
|
|
<text class="">{{ modelInfo.transLineTypeName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">产品类型:</text>
|
|
<text class="">{{ modelInfo.productTypeName }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="clr-sub pr-10">时效:</text>
|
|
<text class="">{{modelInfo.timeType}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">基础运费:</text>
|
|
<text class="">￥{{modelInfo.freight}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="clr-sub pr-10">付款方式:</text>
|
|
<text class="">
|
|
<tpx-text-dic :value="modelInfo.paymentType" :list="dicData.emis_payment_type" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">报关方式:</text>
|
|
<text class="">
|
|
<tpx-text-dic :value="modelInfo.customsEclaration" :list="dicData.emis_declare_mode" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
<view>
|
|
<text class="clr-sub pr-10">清关方式:</text>
|
|
<text class="">
|
|
<tpx-text-dic :value="modelInfo.customsClear" :list="dicData.emis_customs_clear" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">运费:</text>
|
|
<text class="clr-prm font-32">￥ {{modelInfo.freight}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-tle">
|
|
<view class="t1">取件信息</view>
|
|
<view class="t2">
|
|
<text class="clr-prm">
|
|
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view class="blcok-grey-sm">
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">取货方式:</text>
|
|
<text class="">
|
|
<tpx-text-dic :value="modelInfo.pickupMethod" :list="dicData.emis_qujian_fangshi" ></tpx-text-dic>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">预约上门:</text>
|
|
<text class=""> {{modelInfo.pickStartDate}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dt-item">
|
|
<view>
|
|
<text class="clr-sub pr-10">安排信息:</text>
|
|
<text >
|
|
<text v-if="modelInfo.pickupMethod == 1">{{modelInfo.operateEmployeeName}}</text>
|
|
<text v-if="modelInfo.pickupMethod == 2">{{modelInfo.takePieceEmployeeName}}</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-line margin="20rpx 0 10rpx 0"></u-line>
|
|
<u-row justify="between">
|
|
<u-text text="快递员" size="28" :bold="true"></u-text>
|
|
<u-row>
|
|
<u-text :text="modelInfo.takePieceEmployeeName" size="28" :bold="true" margin="0 30rpx 0 0"></u-text>
|
|
<view>
|
|
<u-avatar size="50" :src="''"></u-avatar>
|
|
</view>
|
|
</u-row>
|
|
</u-row>
|
|
</view>
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-tle">
|
|
<view class="t1">物流动态</view>
|
|
<view class="t2">
|
|
<u-button @click="goto(`post/locus?billCode=${billCode}`)" shape="circle" :plain="true" custom-style="height: 50rpx;font-size:28rpx;">查看轨迹</u-button>
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view class="mb-20">
|
|
<buns-locus-pos :billCode="billCode"></buns-locus-pos>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-tle">
|
|
<view class="t1">底单图片</view>
|
|
<view class="t2"></view>
|
|
</view>
|
|
<u-line margin="20rpx 0 20rpx"></u-line>
|
|
<view class="blcok-grey-sm" style="margin-top: 0;">
|
|
<view>收件进仓单图片</view>
|
|
<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
|
|
custom-style="margin: 20rpx 20rpx 0 0;"
|
|
></u-image>
|
|
</view>
|
|
<view class="blcok-grey-sm mt-20">
|
|
<view>签收货物图片</view>
|
|
<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
|
|
custom-style="margin: 20rpx 20rpx 0 0;"
|
|
></u-image>
|
|
</view>
|
|
<view class="blcok-grey-sm mt-20">
|
|
<view>签收签名图片</view>
|
|
<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
|
|
custom-style="margin: 20rpx 20rpx 0 0;"
|
|
></u-image>
|
|
</view>
|
|
</view>
|
|
<view style="height: 30rpx;"></view>
|
|
</tpx-page>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import BpeAddressjiamiTmp from "@/components/buns-post-edit-templates/bpe-addressjiami-tmp"
|
|
import * as apiService from "@/common/api"
|
|
|
|
export default {
|
|
components: { BpeAddressjiamiTmp },
|
|
computed: {
|
|
dicData() {
|
|
return this.$store.getters.dicData
|
|
},
|
|
modelInfo: {
|
|
get(){
|
|
return this.value
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
value: {
|
|
default () {
|
|
return { }
|
|
}
|
|
},
|
|
billCode: {
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted(){
|
|
this.initData()
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {
|
|
|
|
},
|
|
methods: {
|
|
async initData(){
|
|
if(this.billCode) {
|
|
let res = await apiService.getOrderDetail({billCode: this.billCode, _loading: true})
|
|
// 通过对象合并才能修改父级 数据
|
|
Object.assign(this.modelInfo, res.data || {})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/uni-nvue.scss';
|
|
page {
|
|
background-color: #F6F6F6;
|
|
height: 100% !important;
|
|
}
|
|
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.dt-block {
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
background-color: #FFF;
|
|
position: relative;
|
|
}
|
|
.dt-tle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.t1 {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
.t2{
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.dt-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.yditem{
|
|
padding: 20rpx 20rpx;
|
|
background-color: #F6F6F6;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.ydi-lab{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
</style> |