1

pages/setting/setting.js

@@ -5,6 +5,7 @@ const app = getApp()
 import QRCode from '../../utils/weapp-qrcode.js';
 Page({
   data: {
+    height: '',
     userInfo: {},
     // 模板列表
     templateList: [
@@ -46,11 +47,42 @@ Page({
     this.makeQRCode(e ? e.detail.value : 0);
   },
   onLoad: function () {
-    // 模板默认选择
-    this.imageChange();
+    let that = this;
+    // 获取窗口高度
+    wx.getSystemInfo({
+      success: function (res) {
+        // 获取可使用窗口宽度
+        let clientWidth = res.windowWidth;
+        // 获取可使用窗口高度
+        let clientHeight = res.windowHeight - 40;
+        // 设置高度
+        that.setData({ height: clientHeight });
+      }
+    });
+    // 获取用户信息
     let data = app.globalData.userInfo;
-    console.log(data);
+    // let data = {
+    //   avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/ibzXIKnSribia9qZzSkEokEVfLuxOUEJ8xPAMibU29vB3KS8Pic5fUwUricWsXAEfL8zibZSGjUvPUm6PibxiadY8RAdv1w/132",
+    //   car_show: false,
+    //   city: "220100",
+    //   create_time: "2021-01-07 10:40:40",
+    //   id: "5ff676d06af583470e44c4c6",
+    //   id_card: "220182199603257019",
+    //   level: 1,
+    //   mobile: "17319450324",
+    //   name: "顾红伟",
+    //   points: 600,
+    //   province: "220000",
+    //   r_mobile: "13089419810",
+    //   recommend: "刘睿峰",
+    //   set: "5ff6710f7fa08b4500e61e5f",
+    //   stockholder: false,
+    //   wxaccount: "guhongwei324",
+    //   _id: "5ff676d06af583470e44c4c6"
+    // }
     this.setData({ userInfo: data });
+    // 模板默认选择
+    this.imageChange();
     // 生成二维码
     this.makeQRCode();
   },
@@ -58,10 +90,9 @@ Page({
     let data = app.globalData.userInfo;
     const url = `${app.globalData.publicUrl}/htyd/wxcard?name=${data.name}&mobile=${data.mobile}`;
     var qrcode = new QRCode(`myQrcode${template}`, {
-      // usingIn: this,
       text: url,
-      width: 110,
-      height: 110,
+      width: 130,
+      height: 130,
       padding: 3,
       colorDark: "#000000",
       colorLight: "#ffffff",

pages/setting/setting.wxml

@@ -1,7 +1,7 @@
 <view class="main">
   <view class="one">
     <view class="left">
-      推荐码
+      邀请码
     </view>
     <view class="right">
       <picker class="picker" bindchange="imageChange" name="template" value="{{form.template}}" range="{{templateList}}"
@@ -12,52 +12,41 @@
       </picker>
     </view>
   </view>
-  <view class="two">
+  <view class="two" style="height:{{height}}px;">
     <image class="image" src="{{form.imgurl}}"></image>
     <view class="userInfo">
       <view class="temOne" wx:if="{{form.imgIndex==0}}">
         <view class="name">{{userInfo.name}}</view>
-        <view class="phone">NO.{{userInfo.mobile}}</view>
+        <view class="name">NO.{{userInfo.mobile}}</view>
         <canvas class="qrcode" canvas-id="myQrcode0"></canvas>
-        <!-- <image class="qrcode" src="{{qrcodeUrl}}"></image> -->
-        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
       </view>
       <view class="temTwo" wx:elif="{{form.imgIndex==1}}">
-        <!-- <image class="qrcode" src="{{qrcodeUrl}}"></image> -->
         <canvas class="qrcode" canvas-id="myQrcode1"></canvas>
-        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
         <view class="name">{{userInfo.name}}</view>
-        <view class="phone">NO.{{userInfo.mobile}}</view>
+        <view class="name">NO.{{userInfo.mobile}}</view>
       </view>
       <view class="temThr" wx:elif="{{form.imgIndex==2}}">
-        <!-- <image class="qrcode" src="{{qrcodeUrl}}"></image> -->
         <canvas class="qrcode" canvas-id="myQrcode2"></canvas>
-        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
         <view>
           <text>{{userInfo.name}}</text>
           <text>NO.{{userInfo.mobile}}</text>
         </view>
       </view>
       <view class="temFour" wx:elif="{{form.imgIndex==3}}">
-        <view class="temFourImg">
-          <!-- <image class="qrcode" src="{{qrcodeUrl}}"></image> -->
-          <canvas class="qrcode" canvas-id="myQrcode3"></canvas>
-          <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
-        </view>
+        <canvas class="qrcode" canvas-id="myQrcode3"></canvas>
         <view class="temFourInfo">
           <text>{{userInfo.name}}</text>
           <text>NO.{{userInfo.mobile}}</text>
         </view>
       </view>
       <view class="temFive" wx:elif="{{form.imgIndex==4}}">
-        <!-- <image class="qrcode" src="{{qrcodeUrl}}"></image> -->
-        <canvas class="qrcode" canvas-id="myQrcode4"></canvas>
-        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
         <view>
           <text>{{userInfo.name}}</text>
           <text>NO.{{userInfo.mobile}}</text>
         </view>
+        <canvas class="qrcode" canvas-id="myQrcode4"></canvas>
       </view>
     </view>
+
   </view>
 </view>

pages/setting/setting.wxss

@@ -2,13 +2,10 @@
   float: left;
   width: 100%;
   height: 100%;
-  /* background-image: linear-gradient(#ff0000, #ffffff); */
   background-color: #f9fafc;
 }
 
 .main .one {
-  position: fixed;
-  z-index: 9999;
   width: 95%;
   height: 80rpx;
   line-height: 80rpx;
@@ -25,9 +22,6 @@
 .main .one .right {
   float: right;
   width: 70%;
-}
-
-.main .one .right {
   text-align: right;
   color: #fff;
 }
@@ -39,205 +33,123 @@
 
 .main .two {
   position: relative;
-  top: 80rpx;
   width: 100%;
-  height: 93vh;
   overflow: hidden;
 }
 
 .main .two .image {
-  float: left;
   width: 100%;
   height: 100%;
 }
 
-.main .two .userInfo {
-  float: left;
-  width: 100%;
-  height: 100%;
+.two .userInfo .temOne {
   position: absolute;
-}
-
-/* 模板一 */
-.temOne {
-  float: left;
+  z-index: 999;
   width: 100%;
-  text-align: center;
-  position: absolute;
   bottom: 20px;
-  color: #ffffff;
 }
 
-.temOne view {
-  padding: 10rpx 0;
+.two .userInfo .temOne .name {
+  color: #ffffff;
+  font-size: 18px;
   font-weight: bold;
-}
-
-.temOne .qrcode {
-  width: 250rpx;
-  height: 250rpx;
-  left: 36%;
-  z-index: 1;
-}
-
-.temOne .avatarUrl {
-  width: 80rpx;
-  height: 80rpx;
-  position: absolute;
-  bottom: 60px;
-  left: 43%;
-  border: 3px solid #fff;
-  border-radius: 15rpx;
-  z-index: 999;
-}
-
-/* 模板二 */
-.temTwo {
-  float: left;
-  width: 41%;
-  height: 380rpx;
   text-align: center;
-  position: absolute;
-  left: 28%;
-  bottom: 30px;
-  background-color: #ffffff;
-  border-radius: 20rpx;
+  margin: 0 0 10rpx 0;
 }
 
-.temTwo .qrcode {
-  width: 280rpx;
-  height: 250rpx;
-  margin: 15rpx 0;
-  left: 17%;
-  top: 5%;
+
+.two .userInfo .temOne .qrcode {
+  width: 130px;
+  height: 130px;
+  left: 33%;
 }
 
-.temTwo .avatarUrl {
-  width: 80rpx;
-  height: 80rpx;
+.two .userInfo .temTwo {
   position: absolute;
-  left: 36%;
-  top: 45px;
-  border: 3px solid #ffffff;
-  border-radius: 10rpx;
   z-index: 999;
+  width: 100%;
+  bottom: 20px;
 }
 
-.temTwo view {
+.two .userInfo .temTwo .name {
+  color: #ffffff;
+  font-size: 18px;
   font-weight: bold;
-  padding: 0 0 5rpx 0;
-}
-
-
-/* 模板三 */
-.temThr {
-  position: absolute;
-  bottom: 5rpx;
-  width: 100%;
   text-align: center;
+  margin: 0 0 10rpx 0;
 }
 
-.temThr .qrcode {
-  width: 240rpx;
-  height: 240rpx;
-  left: 38%;
+
+.two .userInfo .temTwo .qrcode {
+  width: 130px;
+  height: 130px;
+  left: 33%;
 }
 
-.temThr .avatarUrl {
-  width: 80rpx;
-  height: 80rpx;
+.two .userInfo .temThr {
   position: absolute;
-  left: 45%;
-  top: 28px;
-  border: 3px solid #ffffff;
-  border-radius: 10rpx;
   z-index: 999;
+  width: 100%;
+  bottom: 20px;
 }
 
+.two .userInfo .temThr .qrcode {
+  width: 130px;
+  height: 130px;
+  left: 33%;
+}
 
-.temThr view text {
+.two .userInfo .temThr view {
   font-size: 30rpx;
   font-weight: bold;
   padding: 0 10rpx;
   color: #003875;
+  text-align: center;
 }
 
-/* 模板四 */
-.temFour {
-  width: 40%;
+.two .userInfo .temFour {
   position: absolute;
-  bottom: 10rpx;
-  right: 30rpx;
-}
-
-.temFour .temFourImg {
-  float: right;
-  height: 220rpx;
-  width: 110px;
-  border: 3px solid #032eae;
+  z-index: 999;
+  width: 100%;
+  bottom: 20px;
 }
 
-.temFour .qrcode {
-  width: 250rpx;
-  height: 230rpx;
+.two .userInfo .temFour .qrcode {
+  width: 130px;
+  height: 130px;
+  left: 58%;
 }
 
-.temFour .avatarUrl {
-  width: 80rpx;
-  height: 80rpx;
-  position: absolute;
-  left: 43%;
-  top: 38px;
-  border: 3px solid #ffffff;
-  border-radius: 10rpx;
-  z-index: 999;
+.two .userInfo .temFour .temFourInfo {
+  float: right;
 }
 
-.temFour .temFourInfo {
-  float: left;
+.two .userInfo .temFour .temFourInfo text {
+  display: inline-block;
   width: 100%;
   text-align: center;
-}
-
-.temFour .temFourInfo text {
-  font-size: 30rpx;
-  padding: 0 0 0 50rpx;
-  font-weight: bold;
   color: #032eae;
+  font-weight: bold;
 }
 
-/* 模板五 */
-.temFive {
-  float: left;
-  width: 100%;
+.two .userInfo .temFive {
   position: absolute;
+  z-index: 999;
+  width: 100%;
   top: 30%;
-  text-align: center;
-}
-
-.temFive .qrcode {
-  width: 230rpx;
-  height: 230rpx;
-  left: 37%;
 }
 
-.temFive .avatarUrl {
-  width: 70rpx;
-  height: 70rpx;
-  position: absolute;
-  left: 45%;
-  top: 31px;
-  border: 3px solid #ffffff;
-  border-radius: 10rpx;
-  z-index: 999;
+.two .userInfo .temFive .qrcode {
+  width: 130px;
+  height: 130px;
+  left: 32%;
 }
 
-.temFive view {
-  margin: -12rpx 0 0 0;
+.two .userInfo .temFive view {
+  text-align: center;
 }
 
-.temFive view text {
+.two .userInfo .temFive view text {
+  color: #fff;
   font-weight: bold;
-  font-size: 25rpx;
-  padding: 0 10rpx;
 }