生成二维码小程序和H5码

html代码:

html 复制代码
<el-table-column label="二维码">
  <template slot-scope="{ row }">
    <el-button type="primary" @click="showQrCode1(row)">查看</el-button>
  </template>
</el-table-column>

<el-dialog :close-on-click-modal="false" title="二维码" :visible.sync="qrCodeShow1" append-to-body>
  <div class="btns">
    <el-button type="primary" @click="showQrCode2(1)">H5码</el-button>
    <el-button type="primary" @click="showQrCode2(2)">小程序码</el-button>
  </div>
  <div>
    <div class="copy_main">
      <p>
        h5链接:
        <span id="inviteH5Code">{{ `${users.merchant.domain}/h5/#/pages/videoDetail/videoDetail?id=${qrCodeCurrentData.id}` }}</span> 
      </p>
      <el-button @click="copyData(0)" style="color: skyblue">复制</el-button>
    </div>
    <div class="copy_main">
      <p>
        小程序路径:
        <span id="invitePcCode">{{ `/pages/videoDetail/videoDetail?id=${qrCodeCurrentData.id}` }}</span>
      </p>
      <el-button @click="copyData(1)" style="color: skyblue">复制</el-button>
    </div>
  </div>
</el-dialog>

<el-dialog :close-on-click-modal="false" :title="qrCodeType == 1 ? 'H5码' : '小程序码'" width="500px" :visible.sync="qrCodeShow2" append-to-body>
  <div style="text-align: center" v-loading="qrCodeLoading">
    <vue-qr v-if="qrCodeType == 1" :logoSrc="users.merchant.logo" :logoScale="0.2" :text="qrCodeSrc" :size="300"></vue-qr>
    <div v-else>
      <img style="width: 60%" :src="users.hostUrl + qrCodeSrc" />
      <div style="margin-top: 10px">
        <el-button type="primary" @click="showQrCode2(2)">刷新二维码</el-button>
      </div>
    </div>
  </div>
</el-dialog>

js组件和变量:

javascript 复制代码
import vueQr from "vue-qr";

components: { vueQr }

qrCodeShow1: false,  // 二维码1显示
qrCodeShow2: false,  // 二维码2显示
qrCodeType: "",  // 二维码类型
qrCodeSrc: "",  // 二维码链接
qrCodeCurrentData: {},  // 详情
qrCodeLoading: false  // 二维码重新加载loading

js方法:

javascript 复制代码
/**
 * 显示二维码弹框1
 */
showQrCode1(row) {
  this.qrCodeShow1 = true;
  this.qrCodeCurrentData = row;
},
/**
 * 显示二维码弹框2
 */
async showQrCode2(type) {
  this.qrCodeType = type;
  switch (type) {
    case 1:
      this.qrCodeSrc = `${this.users.merchant.domain}/h5/#/pages/videoDetail/videoDetail?id=${this.qrCodeCurrentData.id}`;
      break;
    case 2:
      this.qrCodeLoading = true;
      let params = {
        path: `/pages/videoDetail/videoDetail?id=${this.qrCodeCurrentData.id}`
      }
      let res = await question.getCodeImg(params);
      if (res.code == 200) {
        this.qrCodeSrc = res.data.src;
      } else {
        this.$message.error("生成失败,请点击刷新二维码按钮重新生成");
      }
      this.qrCodeLoading = false;
      break;
  }
  this.qrCodeShow2 = true;
}
相关推荐
秋天的一阵风3 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风4 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺24 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺25 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码25 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
JustHappy28 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
编程毕设42 分钟前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理1 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron
海天胜景1 小时前
vue3 el-table 右击
javascript·vue.js·elementui