生成二维码小程序和H5码

前端小凯

于 2024-05-16 15:49:22 发布

阅读量256

点赞数 3

文章标签：小程序 vue.js javascript

本文链接：https://blog.csdn.net/qq_43235503/article/details/138964201

版权

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组件和变量：

import vueQr from "vue-qr";

components: { vueQr }

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

js方法：

/**
 * 显示二维码弹框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;
}