出售订单列表地址复制

@@ -9,7 +9,9 @@
             收货人地址: {{ appraiseAddress.addressName }}
             收货人地址: {{ appraiseAddress.addressName }}
           </p>
           </p>
           <p class="area">{{ appraiseAddress.address }}</p>
           <p class="area">{{ appraiseAddress.address }}</p>
-          <p class="mobile">{{ appraiseAddress.mobile }}</p>
+          <p class="mobile">
+            {{ appraiseAddress.mobile }}<i ref="copy" class="copy"></i>
+          </p>
         </div>
         </div>
       </div>
       </div>
       <router-link
       <router-link
@@ -39,6 +41,7 @@
 
 
 <script>
 <script>
 import { createNamespacedHelpers } from "vuex";
 import { createNamespacedHelpers } from "vuex";
+import Clipboard from "clipboard";
 const { mapGetters } = createNamespacedHelpers("order/orderDetail");
 const { mapGetters } = createNamespacedHelpers("order/orderDetail");
 
 
 export default {
 export default {
@@ -50,6 +53,20 @@ export default {
   },
   },
   computed: {
   computed: {
     ...mapGetters(["userAddress", "appraiseAddress"])
     ...mapGetters(["userAddress", "appraiseAddress"])
+  },
+  activated() {
+    this.copyBtn = new Clipboard(this.$refs.copy, {
+      text: () => {
+        const { addressName, address, mobile } = this.appraiseAddress;
+        return `${addressName} ${address} ${mobile}`;
+      }
+    });
+    this.copyBtn.on("success", () => {
+      this.$createToast({
+        txt: "复制成功",
+        type: "txt"
+      }).show();
+    });
   }
   }
 };
 };
 </script>
 </script>
@@ -98,6 +115,15 @@ export default {
       font-weight: bold;
       font-weight: bold;
     }
     }
 
 
+    .copy {
+      width: 50px;
+      height: 25px;
+      display: inline-block;
+      background: url("~statics/image/order/copy@3x.png") no-repeat;
+      background-size: contain;
+      background-position: center;
+    }
+
     .address-icon {
     .address-icon {
       width: 48px;
       width: 48px;
       height: 48px;
       height: 48px;