AstraZeneca_uniapp/components/ay-qrcode/ay-qrcode.vue

<template>
  <view :class="modal ? 'show-qrcode' : 'hide-qrcode'">
    <view class="box-qrcode" @longtap="longtapCode">
      <!-- style="width: 550px;height: 550px;" -->

      <canvas
        class="canvas-qrcode"
        :canvas-id="qrcode_id"
        style="outline: none"
      >
      </canvas>
    </view>
  </view>
</template>

<script>
var qr_we = require("./qrcode_wx.js");
const qrCode = require("./weapp-qrcode.js");
export default {
  data() {
    return {
      isAndroid: false,
      show: true,
      imagePath: "",
      // qrcode_id: 'qrcode_id',
      marginLeft: 0,
      //一般的安卓app只需加30就能显示全
      //苹果app的不加就能显示全，加了就要弄margin-left
      //有些安卓app显示不全
      add_num: 30,
      add_num_key: "rectify_code_key",
    };
  },
  props: {
    modal: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 520,
    },
    width: {
      type: Number,
      default: 520,
    },
    themeColor: {
      type: String,
      default: "#333333",
    },
    qrcode_id: {
      type: String,
      default: "qrcode_id",
    },
    is_themeImg: {
      type: Boolean,
      default: false,
    },
    themeImg: {
      type: String,
      default:
        "https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg",
    },
    h_w_img: {
      type: Number,
      default: 0,
    },
  },
  watch: {},

  created: function () {
    let that = this;
    try {
      //app苹果二维码不居中
      //#ifndef MP
      let isAndroid = false;
      const res = uni.getSystemInfoSync();
      if (res.platform == "android") {
        isAndroid = true;
      } else {
        isAndroid = false;
      }

      //   if (!isAndroid) {
      //     that.marginLeft = 46;
      //   }

      that.isAndroid = isAndroid;
      try {
        const add_num = uni.getStorageSync(that.add_num_key);
        if (add_num) {
          that.add_num = add_num;
        }
      } catch (e) {
        // error
      }
      // #endif
    } catch (e) {
      // error
    }

    //#ifdef MP
    //that.marginLeft = 40;
    // #endif
  },
  methods: {
    hideQrcode() {
      this.$emit("hideQrcode");
    },
    // 二维码生成工具
    crtQrCode() {
      let that = this;
      //#ifndef MP
      new qrCode(that.qrcode_id, {
        text: this.url,
        width: that.width,
        height: that.height,
        colorDark: that.themeColor, //#333333
        colorLight: "#FFFFFF",
        correctLevel: qrCode.CorrectLevel.H,
      });
      // #endif
      //#ifdef MP
      that.createQrCode(
        this.url,
        that.qrcode_id,
        that.width,
        that.height,
        that.themeColor,
        that.is_themeImg,
        that.themeImg,
        that.h_w_img
      );
      // #endif

      //that.createQrCode(this.url, that.qrcode_id, that.width, that.height);
    },
    //#ifdef MP

    createQrCode: function (
      url,
      canvasId,
      cavW,
      cavH,
      cavColor,
      haveImg,
      imgurl,
      imgsize
    ) {
      //调用插件中的draw方法，绘制二维码图片
      qr_we.api.draw(
        url,
        canvasId,
        "205",
        "205",
        cavColor,
        haveImg,
        imgurl,
        imgsize,
        this,
        this.canvasToTempImage
      );
      // setTimeout(() => { this.canvasToTempImage();},100);
    },

    // #endif
    //获取临时缓存照片路径，存入data中
    canvasToTempImage: function () {
      var that = this;
    },
    saveImage: function () {
      var that = this;
      uni.canvasToTempFilePath(
        {
          canvasId: that.qrcode_id,
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            console.log(tempFilePath);
            that.imagePath = tempFilePath;

            //保存到相册
            // uni.saveFile({
            //       tempFilePath: tempFilePath,
            //       success: function (res2) {
            //         var savedFilePath = res2.savedFilePath;

            //       }
            // });
            uni.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success: function (res3) {
                uni.showModal({
                  title: "提示",
                  content: "保存成功",
                  confirmText: "确定",
                  showCancel: false,
                  confirmColor: "#33CCCC",
                  success(res4) {},
                });
              },
            });
          },
          fail: function (res) {
            console.log(res);
          },
        },
        that
      );
    },
    //微信小程序支持：长按二维码，提示是否保存相册
    //安卓APP长按校正二维码
    longtapCode() {
      var that = this;

      //#ifndef MP
      uni.showModal({
        title: "校正二维码",
        content: "二维码是否异常",
        confirmText: "确定",
        confirmColor: "#33CCCC",
        success(res) {
          if (res.confirm) {
            that.rectify_code();
          }
        },
      });
      // #endif

      //#ifdef MP-WEIXIN
      uni.showModal({
        title: "提示",
        content: "是否保存到相册",
        confirmText: "确定",
        confirmColor: "#33CCCC",
        success(res) {
          if (res.confirm) {
            that.saveImage();
          }
        },
      });
      // #endif
    },
    //安卓有些手机不正常，长按可选择矫正
    rectify_code() {
      var that = this;
      let add_num = that.add_num;
      add_num += 30;
      that.add_num = add_num;
      that.crtQrCode(); //重新生成才会立即覆盖
      try {
        //第一次长按校正设置了就不用在设置
        uni.setStorage({
          key: that.add_num_key,
          data: add_num,
          success: function () {},
        });
      } catch (e) {
        // error
      }
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
// .qrcode-box {
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	right: 0;
// 	bottom: 0;
// 	height: 100vh;
// 	width: 100vw;
// 	background-color: rgba(59, 59, 59, 0.6);
// 	// opacity: 0.8;
// 	text-align: center;
// 	display: flex;
// 	align-items: center;
// 	display: none;

// 	.qrcode-item {
// 		flex: 1;
// 		position: relative;
// 		text-align: center;

// 		.item-box {
// 			width: 90%;
// 			margin: auto;
// 			display: inline-block;
// 			margin-top: 30%;
// 			padding-bottom: 30px;

// 			// animation: show 0.7s;
// 			.title {
// 				font-size: 46px;
// 				text-align: center;
// 				margin-bottom: 24px;
// 			}

// 			.canvas {
// 				margin: auto;
// 				display: inline-block;
// 				margin: auto;
// 			}

// 			background-color: #FFFFFF;
// 		}

// 	}
// }
.box-qrcode {
  text-align: center;
  position: relative;
  .box-img-qrcode {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    image {
      width: 205px;
      height: 205px;
    }
  }
}
image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.canvas-qrcode {
  margin: auto;
  width: 205px;
  height: 205px;
}

.opacity-qrcode {
  opacity: 0;
  display: block;
}

.show-qrcode {
  display: block;
  // animation: fade 0.7s;

  // -moz-animation: fade 0.5s; /* Firefox */
  // -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
  // -o-animation: fade 0.5s;
}

.hide-qrcode {
  // animation: hide 0.7s;
}
</style>