feat: add shareQrcode component

f01375cf · 王鹏飞 · 65d5cdd7 · f01375cf · f01375cf · f01375cf
--- a/package-lock.json
+++ b/package-lock.json
 {
-  "name": "crm-admin",
+  "name": "marketing-admin",
  "version": "0.0.0",
  "lockfileVersion": 2,
  "requires": true,
@@ -8,7 +8,9 @@
      "version": "0.0.0",
      "dependencies": {
        "axios": "^0.21.1",
+        "clipboard": "^2.0.8",
        "element-ui": "^2.15.5",
+        "qrcode.vue": "^1.7.0",
        "query-string": "^7.0.1",
        "vue": "^2.6.14",
        "vue-router": "^3.5.2",
@@ -1828,6 +1830,16 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "node_modules/co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -2063,6 +2075,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
    "node_modules/depd": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -2515,6 +2532,14 @@
        "node": ">=4"
      }
    },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -3291,6 +3316,14 @@
        "once": "^1.3.1"
      }
    },
+    "node_modules/qrcode.vue": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
+      "integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
    "node_modules/qs": {
      "version": "6.10.1",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
@@ -3522,6 +3555,11 @@
        "get-ready": "~1.0.0"
      }
    },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
    "node_modules/semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -3773,6 +3811,11 @@
      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
      "dev": true
    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
    "node_modules/to-arraybuffer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -5635,6 +5678,16 @@
        "readdirp": "~3.6.0"
      }
    },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5806,6 +5859,11 @@
        "esprima": "^4.0.0"
      }
    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
    "depd": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6151,6 +6209,14 @@
      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
      "dev": true
    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
    "graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -6768,6 +6834,12 @@
        "once": "^1.3.1"
      }
    },
+    "qrcode.vue": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
+      "integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
+      "requires": {}
+    },
    "qs": {
      "version": "6.10.1",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
@@ -6955,6 +7027,11 @@
        "get-ready": "~1.0.0"
      }
    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
    "semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -7149,6 +7226,11 @@
      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
      "dev": true
    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
    "to-arraybuffer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
  },
  "dependencies": {
    "axios": "^0.21.1",
+    "clipboard": "^2.0.8",
    "element-ui": "^2.15.5",
+    "qrcode.vue": "^1.7.0",
    "query-string": "^7.0.1",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2",

--- a/src/components/base/ShareQrcode.vue
+++ b/src/components/base/ShareQrcode.vue
+<template>
+  <el-dialog
+    :title="title"
+    width="700px"
+    :close-on-click-modal="false"
+    @opened="handleOpened"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <div class="qrcode">
+      <div class="qrcode-left">
+        <qrcode-vue :value="value" size="180" ref="qrcode" />
+      </div>
+      <div class="qrcode-right">
+        <h4>分享链接</h4>
+        <el-input readonly :value="value" id="qrcodeValue">
+          <el-button slot="append" data-clipboard-target="#qrcodeValue" ref="copy">复制</el-button>
+        </el-input>
+        <p>可推广至微信、支付宝、QQ等任意渠道</p>
+        <a :href="qrcodeUrl" download="下载二维码">
+          <el-button type="text">下载二维码</el-button>
+        </a>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import QrcodeVue from 'qrcode.vue'
+import Clipboard from 'clipboard'
+export default {
+  components: { QrcodeVue },
+  props: {
+    title: { type: String, default: '推广' },
+    value: { type: String, default: '' }
+  },
+  data() {
+    return {
+      qrcodeUrl: '',
+      clipboard: null
+    }
+  },
+  methods: {
+    getQrcodeUrl() {
+      this.qrcodeUrl = this.$refs.qrcode.$el
+        .querySelector('canvas')
+        .toDataURL('image/png')
+        .replace('image/png', 'image/octet-stream')
+    },
+    initClipboard() {
+      if (this.clipboard) {
+        return
+      }
+      this.clipboard = new Clipboard(this.$refs.copy.$el)
+      this.clipboard.on('success', () => {
+        this.$message({ message: '复制成功！', type: 'success' })
+      })
+      this.clipboard.on('error', () => {
+        this.$message({ message: '复制失败，请手动选择复制！', type: 'error' })
+      })
+    },
+    handleOpened() {
+      this.$nextTick(function () {
+        this.initClipboard()
+        this.getQrcodeUrl()
+      })
+    }
+  },
+  destroyed() {
+    this.clipboard && this.clipboard.destroy()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.qrcode {
+  margin: 0 10px 20px;
+  display: flex;
+}
+.qrcode-left {
+  background-color: #f7f8fa;
+  box-sizing: border-box;
+  width: 292px;
+  height: 292px;
+  padding: 56px;
+}
+.qrcode-right {
+  flex: 1;
+  margin-left: 20px;
+  h4 {
+    font-weight: normal;
+    margin-bottom: 12px;
+  }
+  p {
+    font-size: 14px;
+    color: #969799;
+    line-height: 20px;
+    height: 16px;
+    margin: 8px 0;
+  }
+}
+</style>
--- a/src/modules/tools/signIn/views/List.vue
+++ b/src/modules/tools/signIn/views/List.vue
@@ -32,7 +32,7 @@
            <div class="sign-item-bd-aside">
              <el-button type="text">编辑活动</el-button>
              <el-button type="text">导入人员</el-button>
-              <el-button type="text">推广</el-button>
+              <el-button type="text" @click="handlePromote(item)">推广</el-button>
              <el-button type="text">人员列表</el-button>
              <el-button type="text">删除</el-button>
            </div>
@@ -40,6 +40,9 @@
        </div>
      </template>
    </app-list>
+    <!-- 推广 -->
+    <share-qrcode :visible.sync="shareDialogVisible" :value="shareUrl"></share-qrcode>
  </app-card>
 </template>
@@ -47,13 +50,17 @@
 // 组件
 import AppList from '@/components/base/AppList.vue'
 import AppCard from '@/components/base/AppCard.vue'
+import ShareQrcode from '@/components/base/ShareQrcode.vue'
 // 接口
 // import { getRoleList } from '../api'
 export default {
-  components: { AppCard, AppList },
+  components: { AppCard, AppList, ShareQrcode },
  data() {
-    return {}
+    return {
+      shareDialogVisible: false,
+      shareUrl: ''
+    }
  },
  computed: {
    // 列表配置
@@ -111,6 +118,11 @@ export default {
      deleteGoods({ shop_id: this.shopId, data }).then(res => {
        this.$refs.list.refetch(true)
      })
+    },
+    // 推广
+    handlePromote(row) {
+      this.shareUrl = 'https://www.baidu.com/'
+      this.shareDialogVisible = true
    }
  }
 }