1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
<div v-if="order" style="width: 1120px">
<div style="display: flex;justify-content: space-around;margin-top: 30px;">
<div class="el-icon-check" style="font-size: 100px;color: #67C23A;" />
<div>
<el-row>
<span style="font-weight: bold;font-size: 18px;">{{ $t('新建订单成功') }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 16px; font-weight: bold; color: #666;">{{ $t('您的订舱号') }}：{{ order.orderNo }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('唛头') }}：{{ order.marks }}</span>
</el-row>
<el-row v-if="order.channelId" style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('出货渠道') }}：{{ order.channelName }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('路线') }}：{{ $l(order.logisticsInfoDto, 'startTitle') }} >> {{ $l(order.logisticsInfoDto, 'destTitle') }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('单证报关') }}：<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" /></span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('是否控货') }}：<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCargoControl" /></span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">
{{ $t('商品列表') }}：
<span v-for="(item, index) in order.orderItemVOList" :key="index">
{{ $l(item, 'prodTitle') }}
<template v-if="index < order.orderItemVOList.length - 1">{{ $t('、') }}</template>
</span>
</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('总件数') }}：{{ order.costVO.totalNum }}</span>
</el-row>
<el-row style="margin-top: 30px;">
<span style="font-size: 14px;color: #666;">{{ $t('仓库地址') }}：{{ order.logisticsInfoDto.startAddressZh }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('仓库电话') }}：{{ order.logisticsInfoDto.startTell }}</span>
</el-row>
<el-row style="margin-top: 10px;">
<span style="font-size: 14px;color: #666;">{{ $t('为保证入仓数据准确性，入仓请带上一份装箱单（品名，件数，毛重，尺寸方数，是否有牌）') }}</span>
</el-row>
<el-row style="margin-top: 20px;">
<span style="text-decoration: underline;font-size: 14px;color: #999;">{{ $t('您的订单已提交，谢谢您选择捷道物流！') }}</span>
</el-row>
</div>
</div>
<div class="actions mt-50">
<el-button type="primary" @click="$redirect('detail?orderId=' + order.orderId)">{{$t('查看订单')}}</el-button>
<el-button type="warning" @click="showNotice = true">{{$t('入仓须知')}}</el-button>
<el-button type="info" @click="$redirect('create')">{{$t('再来一单')}}</el-button>
<el-button class="copy-btn" :data-clipboard-text="orderInfoForCopy">{{$t('复制订单信息')}}</el-button>
</div>
<el-dialog :title="$t('查看须知')" :visible.sync="showNotice" width="700px">
<!-- <img :src="noticeUrl" id="noticeImg" /> -->
<need-know keyname="warehousing" ref="needKnow" />
<div style="text-align:center">
<el-button type="primary" @click="$refs.needKnow.downloadPdf()">{{$t('下载')}}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import FileSaver from 'file-saver'
import {dataURLtoBlob} from '@/utils/index'
import NeedKnow from '@/components/NeedKnow'
import ClipboardJS from "clipboard";
let clipboard;
export default {
components: {NeedKnow},
data(){
return {
order: null,
showNotice: false,
// noticeUrl: 'http://v4.groupage.cn/Public/images/notice.png'
}
},
computed:{
orderInfoForCopy(){
return `订单号：${this.order.orderNo}\n唛头：${this.order.marks}\n提货点：${this.order.logisticsInfoDto?.destTitleZh}\n送货地址：${this.order.logisticsInfoDto?.startAddressZh}\n仓库电话: ${this.order.logisticsInfoDto?.startTell}`
}
},
async created(){
await this.loadData()
await this.$nextTick()
clipboard = new ClipboardJS('.copy-btn')
clipboard.on('success', () => {
this.$message.success(this.$t('复制成功'))
})
clipboard.on('error', () => {
this.$message.error(this.$t('复制失败'))
})
},
destroyed() {
clipboard.destroy()
},
methods:{
async loadData(){
await getOrder(this.$route.query.orderId)
.then(res => {
this.order = res.data
})
}
}
}
</script>
<style scoped lang="scss">
.wrapper{
padding:100px;
display: flex;
justify-content: center;
.icon{
display: flex;
justify-content: flex-end;
margin-right: 50px;
align-items: center;
img{
width: 100px;
height: 100px;
}
}
.title{
font-size: 30px;
margin-bottom: 20px;
}
}
.line{
font-size: 14px;
margin-bottom: 10px;
}
.actions{
display: flex;
justify-content: center;
}
.bold{
font-weight: bold;
}
.font-lg{
font-size: 1.5rem !important;
}
</style>