新建订单成功页面复制

src/views/ecw/order/success.vue

@@ -40,6 +40,7 @@
             <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 +57,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,16 +70,32 @@ 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)
-                .then(res => {
-                    this.order = res.data
-                })
-        }
+      async loadData(){
+          await getOrder(this.$route.query.orderId)
+              .then(res => {
+                  this.order = res.data
+              })
+      }
     }
 }
 </script>