会员码

package.json

 {
-  
   "name": "mayi-mp-shop",
   "version": "1.0.0",
   "mpvueTemplateProjectVersion": "0.1.0",
@@ -28,8 +27,8 @@
     "mpvue": "^2.0.0",
     "mpvue-wxparse": "^0.6.5",
     "vuex": "^3.0.1",
-    "we-cropper": "^1.4.0"
-    
+    "we-cropper": "^1.4.0",
+    "wxbarcode": "^1.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.22.1",

src/pages/memberCode/index.vue

@@ -9,11 +9,15 @@
       <div class="codeMain">
         <!-- 条形码 -->
         <div class="barCode">
-
+          <canvas canvas-id="barcode" style="width:600rpx;height:180rpx;"/>
         </div>
         <!-- 二维码 -->
-        <div class="qrCode">
-          
+        <div class="qrCode flex">
+          <canvas
+            class="canvas-code"
+            canvas-id="myQrcode"
+            :style="{ background: '#fff', width: '308rpx', height: '308rpx' }"
+          />
         </div>
       </div>
     </div>
@@ -21,28 +25,53 @@
 </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() {
+  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);
+    clearInterval(this.TimeOut);
+  },
+  onUnload() {
+    this.setScreenBrightness(this.currentBrightness);
+    clearInterval(this.TimeOut);
   },
-  mounted() {},
   methods: {
     // 获取缓存用户信息
     getSync() {
-      if(this.getStep>10) return;
+      if (this.getStep > 10) return;
       this.getStep++;
-      let loginUserInfo = wx.getStorageSync('loginUserInfo') || null;
-      if((loginUserInfo&& loginUserInfo.mobilephone) && !this.mobilephone) {
-        this.mobilephone = loginUserInfo.mobilephone
+      let loginUserInfo = wx.getStorageSync("loginUserInfo") || null;
+      if (loginUserInfo && loginUserInfo.mobilephone && !this.mobilephone) {
+        this.mobilephone = loginUserInfo.mobilephone;
         this.getStep = 0;
         this.init();
       } else {
@@ -52,10 +81,42 @@ export default {
       }
     },
     init() {
-      console.log("开始初始化")
-
+      console.log("开始初始化");
+      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>
 
@@ -63,27 +124,41 @@ export default {
 .memberCode {
   width: 100vw;
   height: 100vh;
-  background: #F3F3F3;
+  background: #f3f3f3;
   overflow: auto;
-  .main{
+  .main {
     margin: 20px 12px;
     background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
   }
-  .title{
+  .title {
     align-items: center;
     padding: 16px 20px;
     color: #666;
-    background: #FAFAFA;
+    background: #fafafa;
     font-size: 14px;
-    .iconfont{
+    .iconfont {
       font-size: 12px;
       color: #333;
       margin-right: 10px;
     }
   }
-  .codeMain{
-    padding: 20px 26px;
+  .codeMain {
+    padding: 20px 26px 60px;
     background: #fff;
+    .barCode {
+
+    }
+    .qrCode{
+      margin: 28px auto 0;
+      width: 308rpx;
+      height: 308rpx;
+      border: 1px solid #F3F3F3;
+      padding: 20px;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
 </style>