会议报名二维码

public/api_address_config.js

@@ -10,3 +10,7 @@ window._CONFIG["pdfDomainURL"] = window._CONFIG["domianURL"] + "/sys/common/pdf/
 window._CONFIG["casPrefixUrl"] = "http://cas.example.org:8443/cas";
 // 预览文件地址
 window._CONFIG["onlinePreviewDomainURL"] = "http://localhost:8012/onlinePreview";
+
+// 会议管理报名二维码地址
+window._CONFIG['singUpQRCodeURL'] = 'http://localhost:9000'
+

src/api/incomeMeetingApi.js

@@ -10,11 +10,14 @@ const getAllWorkProjects = () => getAction('/project/payWorkingGroup/listAll')
 const getSingUpUserInfo = (params) => getAction('/meeting/payMeetingSituation/queryById',params)
 // 会议管理上传会议资料
 const  uploadMeetingFiles = (params) => postAction('/meeting/payMeeting/uploadFile',params)
+// 生成会议二维码
+const createQcCode = (params) => getAction('/meeting/payMeeting/createBase64',params)
 
 export {
   getUserInfo,
   getMeetInfoById,
   getAllWorkProjects,
   getSingUpUserInfo,
-  uploadMeetingFiles
+  uploadMeetingFiles,
+  createQcCode
 }

src/views/incomePayments/meetManage/Attendance.vue

@@ -71,13 +71,13 @@
           :file-id="currentMeetingInfo.meetingFiles"></preview-file></span>
         </a-col>
         <a-col :xxl="8" :xl="12" :sm="24">
-          <label>报名链接：</label><span></span>
+          <label>报名链接：</label><span>{{signUpHerfUrl}}</span>
         </a-col>
         <a-col :xxl="8" :xl="12" :sm="24">
-          <label>报名二维码：</label><img alt="报名二维码"/>
+          <label>报名二维码：</label><img class="qr-code" :src="signUpQRCode" alt="报名二维码"/><i class="copy primary-color" @click="copy(signUpHerfUrl)">复制</i>
         </a-col>
         <a-col :xxl="8" :xl="12" :sm="24">
-          <label>签到二维码：</label><img alt="签到二维码"/>
+          <label>签到二维码：</label><img class="qr-code" :src="signInQRCode" alt="签到二维码"/><i class="copy primary-color" @click="copy(signUpHerfUrl)">复制</i>
         </a-col>
       </a-row>
       <a-row v-show="currentMeetingInfo.meetingType === '2' ">
@@ -226,7 +226,7 @@
 <script>
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {mixinDevice} from '@/utils/mixin'
-import {getMeetInfoById} from '@api/incomeMeetingApi'
+import {getMeetInfoById, createQcCode} from '@api/incomeMeetingApi'
 import JYearDate from '@comp/jero/JYearDate'
 import JDictSelectTag from '@comp/dict/JDictSelectTag'
 import ImportParticipantModal from '@views/incomePayments/meetManage/modules/ImportParticipantModal'
@@ -364,6 +364,10 @@ export default {
       // 当前的会议信息详情
       currentMeetingInfo: {},
       meetingType: '',
+      // 报名二维码
+      signUpQRCode:'',
+      // 签到二维码
+      signInQRCode:'',
     }
   },
   created() {
@@ -382,6 +386,12 @@ export default {
     this.filters.meetingId = this.$route.query.id
     this.loadData(1)
   },
+  async mounted() {
+    // 生成会议报名二维码
+    this.signUpQRCode = await this.generateQRCode('https://www.baidu.com')
+    // 生成签到二维码
+    this.signInQRCode = await this.generateQRCode('https://www.baidu.com')
+  },
   computed: {
     // 标协会议类型
     tbMeetingType() {
@@ -393,6 +403,10 @@ export default {
       } else {
         return ''
       }
+    },
+    // 报名链接
+    signUpHerfUrl() {
+      return `${window._CONFIG['singUpQRCodeURL']}/?id=${this.$route.query.id}`
     }
   },
   methods: {
@@ -508,7 +522,47 @@ export default {
         default:
           return '其他会议'
       }
-    }
+    },
+    /*
+    * 生成二维码
+    * */
+    generateQRCode(params) {
+      return new Promise(resolve => {
+        let code = ''
+        createQcCode({contact: params}).then(res => {
+          if(res.success){
+            code = res.result
+          }else {
+            console.error('生成二维码失败')
+          }
+        }).finally( () => {
+          resolve(code)
+        })
+      })
+    },
+    /*
+    * 复制地址
+    * */
+    copy(data) {
+      // 存储传递过来的数据
+      let OrderNumber = data
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement('input')
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput)
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select()
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand('Copy')
+      // 清空输入框
+      newInput.remove()
+      this.$message.success('复制成功')
+    },
   }
 }
 </script>
@@ -537,5 +591,12 @@ export default {
 .content {
   color: black;
 }
-
+.qr-code {
+  width: 100px;
+  height: 100px;
+}
+.copy {
+  font-style: normal;
+  cursor: pointer;
+}
 </style>