vue-insagent-pc/src/views/Task/component/qrCode.vue

<template>
    <div>
        <el-dialog :visible.sync="codedialogVisible" width="430px" top="10vh" class="saomazhifucodeClass">
      <div class="ORcodebody" v-watermark="orderId">
        <div slot="title" class="dialog-title">
          <span>扫码付款</span>
        </div>
        <div class="ORcode">
          <div style="padding:13px;position: relative;">
            <img v-if="['太平财险', '华泰财险'].includes(carcodeForm.inscompany)" :src="paycodeimg" alt style="width:100%" />
            <div v-else id="qrcode" ref="qrcode"></div>
          </div>
        </div>
        <img style="margin-left: -16px" src="../../../assets/image/divider.png" alt />
        <div style="font-size:32px;text-align: center;color:#D42426;margin-top:20px">
          <span style="font-size:24px;font-weight:bold">￥</span>
          {{ carcodeForm.sumpremium }}
        </div>
        <div class="ORtitle">
          <div>
            <span>保险公司：</span>
            <span>{{ carcodeForm.inscompany }}</span>
          </div>
          <div>
            <span>车牌号：</span>
            <span>{{ carcodeForm.cPlateNo }}</span>
          </div>
          <div>
            <span>投保人：</span>
            <span>{{ carcodeForm.cInsuredNme }}</span>
          </div>
          <div v-show="carcodeForm.jqpremium">
            <span>交强：</span>
            <span>{{ carcodeForm.jqpremium }}</span>
          </div>

          <div v-show="carcodeForm.sypremium">
            <span>商业：</span>
            <span>{{ carcodeForm.sypremium }}</span>
          </div>
          <div v-show="carcodeForm.taxamount">
            <span>车船税：</span>
            <span>{{ carcodeForm.taxamount }}</span>
          </div>

          <div v-show="carcodeForm.jqStartDate">
            <span>交强险起保日期：</span>
            <span>{{ carcodeForm.jqStartDate }}</span>
          </div>
          <div v-show="carcodeForm.syStartDate">
            <span>商业险起保日期：</span>
            <span>{{ carcodeForm.syStartDate }}</span>
          </div>
          <div v-if="carcodeForm.jypremium">
            <span>非车险：</span>
            <span>{{ carcodeForm.jypremium }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer display">
        <el-button size="small" style="width:100px;border-color:#D42426;color:#D42426 "
          @click="codedialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!--第二种 二维码 -->
    <el-dialog :visible.sync="codedialogVisiblePro" width="660px" class="proSaomazhifucodeClass" top="10vh" title="扫码付款">
      <div class="flex j-s">
        <div class="scan-code">
          <div style="font-weight: bold;">
            总金额：
            <span style="color:#2D4D89 ">{{ carcodeForm.sumpremium }}</span>
          </div>
          <div>交强险：{{ carcodeForm.jqpremium }}</div>
          <div>车船税：{{ carcodeForm.taxamount }}</div>
          <div>商业险：{{ carcodeForm.sypremium }}</div>
          <div>非车险：{{ carcodeForm.jypremium }}</div>
        </div>
        <div>
          <img v-if="['太平财险', '华泰财险'].includes(carcodeForm.inscompany)" :src="paycodeimg" alt style="width:200px;height: 200px;" />
          <div v-else id="qrcode" ref="qrcode"></div>
        </div>
        <div class="scan-code">
          <div>保险公司：{{ carcodeForm.inscompany }}</div>
          <div>车牌号：{{ carcodeForm.cPlateNo }}</div>
          <div>投保人：{{ carcodeForm.cInsuredNme }}</div>
          <div>交强险起保日期：{{ carcodeForm.jqstartdate }}</div>
          <div>商业险起保日期：{{ carcodeForm.systartdate }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" style="width:100px;background: #EAEDF1;border-color:#EAEDF1;color:#2D4D89 "
          @click="codedialogVisiblePro = false">关闭</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
    data(){
        return{
            codedialogVisible:false,
            codedialogVisiblePro:false,
            carcodeForm:{},
            paycodeimg:'',
            qrcode: null,
            qrcodeWidth: "180",
            qrcodeHeight: "180",
            orderId:''
        }
    },
  methods: {
    carcode(row) {
      console.log(row);
      this.orderId = row.subOrderId
      this.$api.letter.getQrCode(row.subOrderId).then(res => {
        if (res.code == "200") {
          this.carcodeForm=res.data
          this.$api.letter.getThemeByUserId().then(res => {
            if (res.code == 200) {
              if (res.data[0] == 'GD') {
                this.codedialogVisiblePro = true;
                this.qrcodeWidth = "154";
                this.qrcodeHeight = "154";
              }
              else {
                this.codedialogVisible = true;
              }
              this.$nextTick(function () {
                if (row.inscompany == "太平财险") {
                  let anresult = qrCodeUrl.replace(/[\r\n]/g, "");
                  let animgBase64 = `data:image/png;base64,${anresult}`;
                  base64ToPath(animgBase64).then(path => {
                    this.paycodeimg = path;
                  });
                } else if (row.inscompany == "华泰财险") {
                  switch (row.apiType) {
                    case 1:
                      this.paycodeimg = qrCodeUrl;
                      break;
                    case 2:
                      let anresult = qrCodeUrl.replace(/[\r\n]/g, "");
                      let animgBase64 = `data:image/png;base64,${anresult}`;
                      base64ToPath(animgBase64).then(path => {
                        this.paycodeimg = path;
                      });
                      break;
                  }
                }
                else {
                  this.creatQrCode( this.carcodeForm.qrCodeUrl);
                }
              });
            }
          })
        } else {
          this.$message({ message: res.msg, type: "warning" });
        }
      });
     
    },
      //二维码生成插件
      creatQrCode(text) {
      if (this.qrcode) {
        this.qrcode.clear();
        this.qrcode.makeCode(text);
      } else {
        this.qrcode = new QRCode("qrcode", {
          text: text,
          width: this.qrcodeWidth,
          height: this.qrcodeHeight,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      }
    },
  }
}
</script>
<style scoped scoped lang="scss">
/deep/{
    .saomazhifucodeClass .el-dialog__body,
  .saomazhifucodeClass .el-dialog__header,
  .saomazhifucodeClass .el-dialog__footer {
    padding: 0;
    background: #f4e9e9;
  }

  .saomazhifucodeClass .el-dialog__body {
    padding: 15px;
  }

  .saomazhifucodeClass .el-dialog__footer {
    background: #f4e9e9;
    padding-bottom: 15px;
  }

  .saomazhifucodeClass .el-dialog__headerbtn {
    margin-top: 10px;
  }
}
.ORcodebody {
  height: auto;
  // background: url(../../../assets/image/group.png) #fff;
  padding: 16px;
  background-color: #fff;
}

.ORcode {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;

  &>div {
    width: 176px;
    height: 176px;
    border: 1px solid var(--themeColor);
    border-radius: 5px;
  }
 
}

.ORtitle {
  width: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;

  &>div {
    width: 100%;
    margin: 10px 0;
    font-size: 14px;

    &>span {
      &:nth-child(1) {
        color: #868b98;
        text-align: end;
        width: 150px;
      }

      &:nth-child(2) {
        color: #333333;
      }
    }
  }
}
#qrCode {
  display: inline-block;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
  top: 15%;
}

#qrCode img {
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 6px;
}
.display {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
</style>