From bd8014b7bd4a09bcb113eeb6123e6f2121e7985b Mon Sep 17 00:00:00 2001
From: Sliverber <2622874537@qq.com>
Date: Fri, 1 Mar 2024 14:01:19 +0800
Subject: [PATCH] 11
---
package.json | 1 +
src/views/channel/index.vue | 70 ++++++++++++++++++++++++++++++++++---
2 files changed, 66 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index 976277c..695404a 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
"pdfjs-dist": "^2.0.943",
"print-js": "^1.6.0",
"printjs": "^1.1.0",
+ "qrcode": "^1.5.3",
"qrcodejs2": "^0.0.2",
"sass": "1.26.2",
"sass-loader": "^7.2.0",
diff --git a/src/views/channel/index.vue b/src/views/channel/index.vue
index 26e8ef0..3bedee4 100644
--- a/src/views/channel/index.vue
+++ b/src/views/channel/index.vue
@@ -28,8 +28,9 @@
</el-table>
<el-table v-loading="listLoading" :data="listData.list" style="width: 100%" size="mini">
<el-table-column prop="name" label="名称" min-width="50" align="center"/>
- <el-table-column prop="createTime" label="添加日期" min-width="100" align="center"/>
+ <el-table-column prop="createTime" label="添加日期" min-width="50" align="center"/>
<el-table-column prop="totalClickNum" label="总点击" min-width="50" align="center"/>
+ <el-table-column prop="todayClickNum" label="今日点击" min-width="50" align="center"/>
<el-table-column prop="totalRegisterNum" label="总注册" min-width="50" align="center"/>
<!-- <el-table-column prop="totalOrderNum" label="总订单(金额/数量)" min-width="120" /> -->
<el-table-column prop="totalOrderNum" label="总订单(金额/数量)" min-width="100" align="center">
@@ -77,6 +78,13 @@
<div class="tj" v-show="titindex==0">
<div class="mintit">基础信息</div>
<div class="infobox">
+ <div class="img_box">
+ <!-- <canvas ref="qrcodeCanvas"></canvas> -->
+ <!-- <div id="payQrcode"></div> -->
+
+ <div id="qrcode" ref="qrcode" style="margin-bottom: 20px;"></div>
+ <el-button type="primary" @click="downloadimg()" style="margin-left: 30px;" >下载图片</el-button>
+ </div>
<div class="infoli">
<div class="li">渠道名称：{{ chooselist.name }} </div>
<div class="li"> 添加日期：{{ chooselist.createTime }} </div>
@@ -93,8 +101,8 @@
<div class="li">总订单数量：{{ chooselist.totalOrderNum }} </div>
</div>
<div class="infoli">
- <div class="li" style="width: 100%;">渠道链接：{{ chooselist.url }}</div>
-
+ <div class="li" style="width: 50%;">渠道链接：{{ chooselist.url }}</div>
+ <div class="li">今日点击:{{ chooselist.todayClickNum }}</div>
</div>
<div class="infoli" style="justify-content: start;" v-if="chooselist.account">
<div class="li" style="width: 33%;">渠道账号：{{ chooselist.account }}</div>
@@ -171,9 +179,12 @@
</template>
<script>
+import QRCode from "qrcodejs2";
+let qrcode = "";
import { ListChannel,ListChannels,Listuser, AddChannel, UpdateChannel, InfoChannel, DelChannel } from '@/api/channel';
import creatChannel from './creatChannel';
import { checkPermi } from '@/utils/permission'; // 权限判断函数
+import download from "@/plugins/download";
export default {
name: 'Channel',
filters: {
@@ -224,6 +235,8 @@ export default {
data: [],
total: 0,
},
+ codeurl:'',
+
};
},
mounted() {
@@ -231,6 +244,35 @@ export default {
this.getList();
},
methods: {
+
+ qrcode(qWidth, qHeight, qText, qRender) {
+ new QRCode("qrcode", {
+ width: qWidth,
+ height: qHeight,
+ text: qText,
+ render: qRender,
+ });
+ },
+ downloadimg() {
+ // 获取生成二维码的canvas元素
+ const canvas = document.querySelector("#qrcode canvas");
+ if (canvas) {
+ // 创建一个临时的a元素
+ const link = document.createElement('a');
+ // 将canvas的内容转换为图片的DataURL
+ link.href = canvas.toDataURL("image/png");
+ // 设置下载的文件名
+ link.download = 'qrcode.png';
+ // 模拟点击下载
+ link.click();
+ } else {
+ console.error("无法找到二维码画布。");
+ }
+ },
+
+
+
+
handleClose() {
this.userPrams.page=1
this.listPrams.page=1
@@ -300,7 +342,7 @@ export default {
});
},
- showdlg(row) {
+ async showdlg(row) {
this.listPrams.channelId=row.id
this.userPrams.channelId=row.id
@@ -309,6 +351,13 @@ export default {
console.log(row,'rowrow');
this.chooselist=row
this.dialogVisibles = true
+ // await this.generateQRCode(row.url)
+ if (this.$refs.qrcode) this.$refs.qrcode.innerHTML = "";
+ this.$nextTick(function () {
+ this.qrcode(150, 150, row.url, "canvas");
+ console.log(QRCode.CorrectLevel.L);
+ });
+
},
formatPercentage(value) {
if (value == "0.00" || value == "0.0" || value == "0" || value == 0 || value == null) {
@@ -448,11 +497,22 @@ export default {
}
.infobox {
+ position: relative;
width: 90%;
margin: 5px auto;
display: flex;
flex-wrap: wrap;
-
+ .img_box{
+ right: 70px;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ img{
+ width: 150px;
+ height: 150px;
+ background-color: red;
+ }
+ }
.infoli {
width: 100%;
display: flex;