Skip to content

C
center-marketing
提交 f01375cf authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: add shareQrcode component

上级 65d5cdd7
隐藏空白字符变更
内嵌 并排
正在显示 包含 202 行增加 和 4 行删除
package-lock.json
浏览文件 @ f01375cf
{
"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",
......
package.json
浏览文件 @ f01375cf
......@@ -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",
......
src/components/base/ShareQrcode.vue 0 → 100644
浏览文件 @ f01375cf
<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>
src/modules/tools/signIn/views/List.vue
浏览文件 @ f01375cf
......@@ -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
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论