生成二维码小程序和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;
}
相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.7 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖8 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
郭wes代码9 小时前
Cmd命令大全(万字详细版)
python·算法·小程序
black^sugar9 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_8576009510 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009510 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL10 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据10 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具