xcx

package-lock.json

@@ -15248,6 +15248,14 @@
         "uppercamelcase": "1.1.0"
       }
     },
+    "vue-clipboard2": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz",
+      "integrity": "sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==",
+      "requires": {
+        "clipboard": "2.0.1"
+      }
+    },
     "vue-cookie": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/vue-cookie/-/vue-cookie-1.1.4.tgz",

package.json

@@ -24,6 +24,7 @@
     "js-md5": "^0.7.3",
     "vue": "^2.5.2",
     "vue-amap": "^0.5.8",
+    "vue-clipboard2": "^0.2.1",
     "vue-cookie": "^1.1.4",
     "vue-fullcalendar": "^1.0.9",
     "vue-morris": "0.0.13",

src/pages/system/cardAndCouponManager/bodyBuildingCardManager/index.vue

@@ -82,7 +82,13 @@
               size="mini"
               type="danger"
               @click="sendCard(scope.$index, scope.row)">赠送客户</el-button>
-            <a v-if="scope.row.SendType === 'channel'" class="copyBtn" :data-clipboard-text="'www.baidu.com'" :ref="'copy' + scope.$index" @click="toCopy(scope.$index, scope.row)">点击复制链接</a>
+            <el-button
+              size="mini"
+              type="success"
+              v-clipboard:copy="'www.baidu.com' + scope.$index"
+              v-clipboard:success="onCopy"
+              v-clipboard:error="onError"
+              >点击复制链接</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -201,7 +207,6 @@
           v-model="currentCopyUrl"
           clearable>
         </el-input>
-        <!-- <a :data-clipboard-text="currentCopyUrl" ref="copy" @click="toCopy">复制链接</a> -->
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="copyDialogVisible = false">确 定</el-button>
@@ -211,7 +216,6 @@
 </template>
 
 <script>
-import Clipboard from 'clipboard'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapState: mapGymCardState, mapActions: mapGymCardActions } = createNamespacedHelpers('gymcard')
 const { mapState: mapCustomerState, mapActions: mapCustomerActions } = createNamespacedHelpers('customer')
@@ -220,6 +224,7 @@ export default {
   name: '',
   data () {
     return {
+      clipboardArr: [],
       currentCopyUrl: '',
       copyDialogVisible: false,
       selectCustomer: [],
@@ -293,7 +298,6 @@ export default {
     },
     toSendCard () { // 赠送卡
       if (this.selectCustomer.length) {
-        console.log(this.selectCustomer)
         this.selectCustomer = this.selectCustomer.map(x => x.CustomerId).join(',')
         this.giveCard({
           id: this.currentCardId,
@@ -338,7 +342,6 @@ export default {
         caseid: this.CaseId || this.defaultCaseId
       }).then((res) => {
         this.total = res.pagenum
-        // console.log(JSON.stringify(res))
       })
     },
     handleCurrentChange (val) { // 跳转到分页
@@ -347,21 +350,21 @@ export default {
     handleEdit (index, row) { // 编辑
       this.$router.push({ name: 'editBodyBuildingCard', query: { id: row.GymCardId } })
     },
-    toCopy (index, row) { // 复制
-      console.log(1)
-      var clipboard = new Clipboard(this.$refs['copy' + index])
-      clipboard.on('success', e => {
-        console.log('复制成功')
-        clipboard.destroy()
+    addCard () {
+      this.$router.push({ name: 'editBodyBuildingCard', query: {} })
+    },
+    onCopy () {
+      this.$message({
+        type: 'success',
+        message: '复制成功！'
       })
-      clipboard.on('error', e => {
-        console.log('该浏览器不支持自动复制')
-        clipboard.destroy()
+    },
+    onError () {
+      this.$message({
+        type: 'error',
+        message: '复制失败！'
       })
     },
-    addCard () {
-      this.$router.push({ name: 'editBodyBuildingCard', query: {} })
-    }
   }
 }
 </script>
@@ -382,7 +385,7 @@ export default {
     }
   }
 }
-.copyBtn{
+.copyBtn {
   line-height: 29px;
   border-radius: 3px;
   color: #fff;

src/store/index.js

@@ -2,7 +2,10 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import Ajax from '../util/ajax'
 import api from '../util/api'
+import VueClipboard from 'vue-clipboard2'
+
 Vue.use(Vuex)
+Vue.use(VueClipboard)
 
 const store = new Vuex.Store({
   state: {