index.vue

// 会员码
<template>
  <div class="memberCode">
    <div class="main">
      <div class="title flex">
        <i class="iconfont icon-saomiaochenggong"></i>
        <p>向商家展示会员码</p>
      </div>
      <div class="codeMain">
        <!-- 条形码 -->
        <div class="barCode">
          <canvas canvas-id="barcode" style="width:600rpx;height:180rpx;"/>
        </div>
        <!-- 二维码 -->
        <div class="qrCode flex">
          <canvas
            class="canvas-code"
            canvas-id="myQrcode"
            :style="{ background: '#fff', width: '308rpx', height: '308rpx' }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import QRCode from "@/utils/weapp-qrcode.js";
import wxbarcode from "wxbarcode"
const app = getApp();
const { log } = app;
export default {
  name: "memberCode",
  data() {
    return {
      mobilephone: "",
      getStep: 0,
      currentBrightness: 0,
      qrCodeImg: "",
    };
  },
  components: {},
  computed: {},
  created() {
    console.log("进入created")
  },
  onLoad() {
    console.log("进入onLoad")
  },
  onShow() {
    let _this = this;
    wx.getScreenBrightness({
      success: (res) => {
        _this.currentBrightness = res.value;
      },
      fail: (res) => {
        console.log(res, "-------getScreenBrightness--fail");
      },
    });
    console.log(this.currentBrightness, "---currentBrightness");
    console.log("---onShow");
    this.getSync();
    this.setScreenBrightness(1);
  },
  onHide() {
    this.setScreenBrightness(this.currentBrightness);
  },
  onUnload() {
    this.setScreenBrightness(this.currentBrightness);
  },
  methods: {
    // 获取缓存用户信息
    getSync() {
      log.info(this.getStep,'getSync')
      if (this.getStep > 10) return;
      this.getStep++;
      let loginUserInfo = wx.getStorageSync("loginUserInfo") || null;
      log.info(this.mobilephone,loginUserInfo,'loginUserInfo')
      console.log(this.mobilephone,loginUserInfo,'loginUserInfo')
      if (loginUserInfo && loginUserInfo.mobilephone) {
        this.mobilephone = loginUserInfo.mobilephone;
        this.getStep = 0;
        this.init();
      } else {
        setTimeout(() => {
          this.getSync();
        }, 200);
      }
    },
    init() {
      console.log("开始初始化");
      log.info('开始初始化生成码')
      this.getBarCode();
      this.getQrCode();
    },
    getBarCode() {
      wxbarcode.barcode("barcode", this.mobilephone, 600, 180);
    },
    getQrCode() {
      let _this = this;
      const systemInfo = wx.getSystemInfoSync();
      const width = (154 * systemInfo.windowWidth) / 375;
      const height = width;
      new QRCode("myQrcode", {
        text: _this.mobilephone,
        width,
        height,
        padding: 4, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          console.log(res.path, "---res.path");
          _this.qrCodeImg = res.path;
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
        },
      });
    },
    setScreenBrightness(val = 0.7) {
      if (wx.setScreenBrightness) {
        //设置屏幕亮度  参数值：0-1，越大越亮
        wx.setScreenBrightness({
          value: val,
        });
      } else {
        console.log("------微信版本过低------");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.memberCode {
  width: 100vw;
  height: 100vh;
  background: #f3f3f3;
  overflow: auto;
  .main {
    margin: 20px 12px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
  }
  .title {
    align-items: center;
    padding: 16px 20px;
    color: #666;
    background: #fafafa;
    font-size: 14px;
    .iconfont {
      font-size: 12px;
      color: #333;
      margin-right: 10px;
    }
  }
  .codeMain {
    padding: 20px 26px 60px;
    background: #fff;
    .barCode {

    }
    .qrCode{
      margin: 28px auto 0;
      width: 308rpx;
      height: 308rpx;
      border: 1px solid #F3F3F3;
      padding: 16px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>