Merge remote-tracking branch 'origin/dev' into dev

src/views/ecw/order/success.vue

 <template>
-    <div v-if="order">
-        <div class="wrapper flex w-1000 pb-20" style="margin:auto">
-          <div class="icon">
-                <img src="../../../assets/svg/success.svg" />
-          </div>
-          <div class="flex-1">
-                <div class="title">{{$t('新建订单成功')}}</div>
-                <div class="line bold font-lg">{{$t('订单号')}}：{{order.orderNo}}</div>
-                <div class="line">{{$t('唛头')}}：{{order.marks}}</div>
-
-                <div class="flex">
-                  <div class="line flex-1">{{$t('运输方式')}}：<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" /></div>
-                  <div class="line flex-1" v-if="order.channelName">{{$t('出货渠道')}}：{{order.channelName}}</div>
-                </div>
-                <div class="flex">
-                  <div class="line flex-1">{{$t('路线')}}：{{$l(order.logisticsInfoDto, 'startTitle')}} >> {{$l(order.logisticsInfoDto, 'destTitle')}}</div>
-                  <div class="line flex-1">{{$t('单证报关')}}：<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" /></div>
-                </div>
-                <div class="line">{{$t('控货')}}：<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCargoControl" /></div>
+    <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>
 
-                <div class="line">{{$t('商品列表')}}：
+          <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')}}
+              {{ $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 class="line">{{$t('总件数')}}：{{order.costVO.totalNum}}</div>
-          </div>
-        </div>
-        <div class="w-800" style="margin: auto">
-          <div class="line mt-20">{{$t('仓库地址')}}：{{$l(order.logisticsInfoDto, 'startAddress')}}</div>
-          <div class="line">{{$t('仓库电话')}}： {{order.logisticsInfoDto.startTell}}</div>
-          <!-- v1.7新增 -->
-          <div class="line">{{$t('为保证入仓数据准确性，入仓请带上一份装箱单（品名，件数，毛重，尺寸方数，是否有牌）')}}</div>
-          <div class="line"></div>
-          <div class="line">{{$t('您的订单已提交，谢谢您选择捷道物流！')}}</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">
@@ -56,6 +73,9 @@ 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},
@@ -66,12 +86,28 @@ export default {
             // noticeUrl: 'http://v4.groupage.cn/Public/images/notice.png'
         }
     },
-    created(){
-        this.loadData()
+  computed:{
+      orderInfoForCopy(){
+        return `订单号：${this.order.orderNo}\n唛头：${this.order.marks}\n提货点：${this.order.logisticsInfoDto?.destTitleZh}\n送货地址：${this.order.logisticsInfoDto?.startAddressZh}`
+      }
+  },
+    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:{
-        loadData(){
-            getOrder(this.$route.query.orderId)
+      async loadData(){
+          await getOrder(this.$route.query.orderId)
               .then(res => {
                   this.order = res.data
               })