11

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",

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;