no message

+{
+    "component": true
+}
\ No newline at end of file

+<!--index.wxml-->
+<view class="container">
+  <canvas canvas-id='canvasid' class="canvas {{debug ? 'debug' : 'pro'}}" style='width: {{pxWidth}}px; height: {{pxHeight}}px;'></canvas>
+</view>

+.canvas {
+    width: 750rpx;
+    height: 750rpx;
+}
+.canvas.pro {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translate3d(-9999rpx, 0, 0);
+}
+.canvas.debug {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border: 1rpx solid #ccc;
+}
\ No newline at end of file

+Component({
+    properties: {
+        config: {
+            type: Object,
+            value: {},
+        },
+        preload: {  // 是否预下载图片资源
+            type: Boolean,
+            value: false,
+        },
+        hideLoading: {  // 是否隐藏loading
+            type: Boolean,
+            value: false,
+        }
+    },
+    ready() {
+        if (this.data.preload) {
+            const poster = this.selectComponent('#poster');
+            this.downloadStatus = 'doing';
+            poster.downloadResource(this.data.config.images).then(() => {
+                this.downloadStatus = 'success';
+                this.trigger('downloadSuccess');
+            }).catch((e) => {
+                this.downloadStatus = 'fail';
+                this.trigger('downloadFail', e);
+            });
+        }
+    },
+    methods: {
+        trigger(event, data) {
+            if (this.listener && typeof this.listener[event] === 'function') {
+                this.listener[event](data);
+            }
+        },
+        once(event, fun) {
+            if (typeof this.listener === 'undefined') {
+                this.listener = {};
+            }
+            this.listener[event] = fun;
+        },
+        downloadResource(reset) {
+            return new Promise((resolve, reject) => {
+                if (reset) {
+                    this.downloadStatus = null;
+                }
+                const poster = this.selectComponent('#poster');
+                if (this.downloadStatus && this.downloadStatus !== 'fail') {
+                    if (this.downloadStatus === 'success') {
+                        resolve();
+                    } else {
+                        this.once('downloadSuccess', () => resolve());
+                        this.once('downloadFail', (e) => reject(e));
+                    }
+                } else {
+                    poster.downloadResource(this.data.config.images)
+                        .then(() => {
+                            this.downloadStatus = 'success';
+                            resolve();
+                        })
+                        .catch((e) => reject(e));
+                }  
+            })
+        },
+        onCreate(reset = false) {
+            !this.data.hideLoading && wx.showLoading({ mask: true, title: '生成中' });
+            return this.downloadResource(typeof reset === 'boolean' && reset).then(() => {
+                !this.data.hideLoading && wx.hideLoading();
+                const poster = this.selectComponent('#poster');
+                poster.create(this.data.config);
+            })
+            .catch((err) => {
+                !this.data.hideLoading && wx.hideLoading();
+                wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
+                console.error(err);
+                this.triggerEvent('fail', err);
+            })
+        },
+        onCreateSuccess(e) {
+            const { detail } = e;
+            this.triggerEvent('success', detail);
+        },
+        onCreateFail(err) {
+            console.error(err);
+            this.triggerEvent('fail', err);
+        }
+    }
+})
\ No newline at end of file

+{
+    "component": true,
+    "usingComponents": {
+        "we-canvas": "../index/index"
+    }
+}
\ No newline at end of file

+<view bindtap='onCreate'>
+    <slot/>
+</view>
+<we-canvas id="poster" bind:success="onCreateSuccess" bind:fail="onCreateFail"/>
\ No newline at end of file

+const defaultOptions = {
+    selector: '#poster'
+};
+
+function Poster(options = {}) {
+    options = {
+        ...defaultOptions,
+        ...options,
+    };
+
+    const pages = getCurrentPages();
+    const ctx = pages[pages.length - 1];
+
+    const poster = ctx.selectComponent(options.selector);
+    delete options.selector;
+
+    return poster;
+};
+
+Poster.create = (reset = false) => {
+    const poster  = Poster();
+    if (!poster) {
+        console.error('请设置组件的id="poster"!!!');
+    } else {
+        return Poster().onCreate(reset);
+    }
+}
+
+export default Poster;
\ No newline at end of file

@@ -15,7 +15,7 @@ Page({
     name: "",
     phone: "",
     messageContant: "", // 单词拼写错误
-
+    userInfo: {},
 
   },
   onShareAppMessage() {},
@@ -31,7 +31,31 @@ Page({
     // this.setData({
     //   commonTipsCompVisible: false
     // })
+    this.queryMember().then((result) => {
+      this.setData({
+        name:result.nickname
+      })
+    });
   },
+
+  /**
+   * 获取会员信息
+   */
+  queryMember() {
+    return new Promise((resolve, reject) => {
+      app.post({
+        url: app.api.member,
+        data: {}
+      }).then((result) => {
+        this.setData({
+          userInfo: result
+        })
+        resolve(result);
+      })
+    });
+  },
+
+
   /**
    * 提交表单
    */
@@ -55,14 +79,14 @@ Page({
       })
       return;
     }
-    if (!phone) {
-      wx.showToast({
-        title: "请输入联系方式",
-        icon: 'none'
-      })
-      return;
-    }
-    if (!checkMobile(phone)) {
+    // if (!phone) {
+    //   wx.showToast({
+    //     title: "请输入联系方式",
+    //     icon: 'none'
+    //   })
+    //   return;
+    // }
+    if (phone && !checkMobile(phone)) {
       wx.showToast({
         title: "请输入正确联系方式",
         icon: 'none'

@@ -8,11 +8,11 @@
         <view class="form">
           <view class="form-item">
             <view class="label">用户姓名</view>
-            <input class="val" bindinput="bindNameInput" placeholder="请输入姓名" />
+            <input value="{{name}}" class="val" bindinput="bindNameInput" placeholder="请输入姓名" />
           </view>
           <view class="form-item">
             <view class="label">联系方式</view>
-            <input class="val" bindinput="bindPhoneInput" placeholder="请输入联系方式" type="number" />
+            <input class="val" bindinput="bindPhoneInput" placeholder="选填" type="number" />
           </view>
           <textarea class="textarea" bindinput="bindMessageContantInput" maxlength="500" placeholder="不超过500字"></textarea>
           <!-- 图片上传 -->

 import QR from '../../utils/qrcode'
+import Poster from '../../miniprogram_dist/poster/poster';
 
 let app = getApp();
 Page({
@@ -18,10 +19,115 @@ Page({
     this.initData();
   },
   initData() {
+    // 获取用户信息 小程序码
     this.queryMember().then((result) => {
+      // 获取海报数据
+      let posterData = this.getPosterConfig();
+      // 绘制设置海报
+      this.onCreatePoster(posterData);
+    });
+  },
+
+  onPosterSuccess(e) {
+    wx.hideLoading();
+    const {
+      detail
+    } = e;
+    console.log("detail:", detail)
+    this.setData({
+      imageUrl: detail
+    })
+  },
+  onPosterFail(err) {
+    wx.hideLoading();
+    console.error(err);
+  },
 
+  /**
+   * 异步生成海报
+   */
+  onCreatePoster(posterConfig) {
+    console.log("posterConfig:", posterConfig);
+    this.setData({
+      posterConfig: posterConfig
+    }, () => {
+      Poster.create(true); // 入参：true为抹掉重新生成
     });
   },
+
+  // 获取海报数据
+  getPosterConfig() {
+    // 合成图片需要的数据
+    let {
+      userInfo
+    } = this.data;
+
+    let blocks = [{
+      x: 0,
+      y: 0,
+      width: 690,
+      height: 900,
+      backgroundColor: "#ffffff",
+      borderRadius: 10,
+    }];
+    let images = [{
+      x: 286,
+      y: 30,
+      width: 120,
+      height: 120,
+      borderRadius: 120,
+      zIndex: 11,
+      url: userInfo.avatar,
+    }, {
+      x: 126,
+      y: 220,
+      width: 440,
+      height: 440,
+      zIndex: 11,
+      url: userInfo.memberUrl,
+    }];
+    let lines = [];
+    let texts = [{
+      x: 690 / 2,
+      y: 192,
+      width: 690,
+      fontSize: 36,
+      color: "#3680EB",
+      textAlign: "center",
+      zIndex: 11,
+      text: userInfo.nickname,
+    }, {
+      x: 690 / 2,
+      y: 720,
+      width: 690,
+      fontSize: 28,
+      color: "#666666",
+      textAlign: "center",
+      zIndex: 11,
+      text: "深士照明",
+    }, {
+      x: 690 / 2,
+      y: 800,
+      width: 690,
+      fontSize: 28,
+      color: "#666666",
+      textAlign: "center",
+      zIndex: 11,
+      text: "扫码即获专属积分，兑换超值奖品",
+    }];
+
+    let posterData = {
+      width: 690,
+      height: 900,
+      debug: false,
+      blocks: blocks,
+      images: images,
+      lines: lines,
+      texts: texts,
+    }
+    return posterData;
+  },
+
   /**
    * 获取会员信息
    */
@@ -37,73 +143,15 @@ Page({
           userInfo: userInfo,
           qrImagePath: userInfo.memberUrl,
         })
-
-        wx.downloadFile({
-          url: userInfo.memberUrl,
-          success(res) {
-            if (res.statusCode === 200) {
-              _this.setData({
-                imageUrl: res.tempFilePath
-              })
-            }
-          }
-        })
-
-        // 生成个人二维码
-        // let tlMemberCode = userInfo.memberCode;
-        // let qrSize = this.setCanvasSize(440);
-        // let codeContent = `tlMemberCode=${tlMemberCode}`
-        // this.createQrCode(codeContent, 'qrcanvas', qrSize.w, qrSize.h);
-
         resolve();
       })
     });
   },
 
-  createQrCode(content, canvasId, cavW, cavH) {
-    //调用插件中的draw方法，绘制二维码图片
-    QR.api.draw(content, canvasId, cavW, cavH);
-    this.canvasToTempImage(canvasId);
-  },
-  //获取临时缓存图片路径，存入data中
-  canvasToTempImage(canvasId) {
-    let that = this;
-    wx.canvasToTempFilePath({
-      canvasId, // 这里canvasId即之前创建的canvas-id
-      success: function (res) {
-        let tempFilePath = res.tempFilePath;
-        console.log(tempFilePath);
-        that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
-          qrImagePath: tempFilePath,
-        });
-      },
-      fail: function (res) {
-        console.log(res);
-      }
-    });
-  },
-  //适配不同屏幕大小的canvas
-  setCanvasSize(sz) {
-    var size = {};
-    try {
-      var res = wx.getSystemInfoSync();
-      var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
-      var width = res.windowWidth / scale;
-      var height = width; //canvas画布为正方形
-      size.w = width;
-      size.h = height;
-    } catch (e) {
-      // Do something when catch error
-      console.log("获取设备信息失败" + e);
-    }
-    return size;
-  },
-
   /**
    * 保存图片到本地
    */
   saveImageToPhotosAlbum() {
-    console.log("saveImageToPhotosAlbum");
     let _this = this;
     if (!_this.data.imageUrl) {
       wx.showToast({
@@ -143,4 +191,52 @@ Page({
       }
     })
   },
+
+
+
+
+
+
+
+  // 创建二维码
+  createQrCode(content, canvasId, cavW, cavH) {
+    //调用插件中的draw方法，绘制二维码图片
+    QR.api.draw(content, canvasId, cavW, cavH);
+    this.canvasToTempImage(canvasId);
+  },
+  //获取临时缓存图片路径，存入data中
+  canvasToTempImage(canvasId) {
+    let that = this;
+    wx.canvasToTempFilePath({
+      canvasId, // 这里canvasId即之前创建的canvas-id
+      success: function (res) {
+        let tempFilePath = res.tempFilePath;
+        console.log(tempFilePath);
+        that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
+          qrImagePath: tempFilePath,
+        });
+      },
+      fail: function (res) {
+        console.log(res);
+      }
+    });
+  },
+  //适配不同屏幕大小的canvas
+  setCanvasSize(sz) {
+    var size = {};
+    try {
+      var res = wx.getSystemInfoSync();
+      var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
+      var width = res.windowWidth / scale;
+      var height = width; //canvas画布为正方形
+      size.w = width;
+      size.h = height;
+    } catch (e) {
+      // Do something when catch error
+      console.log("获取设备信息失败" + e);
+    }
+    return size;
+  },
+
+
 })

 {
+  "usingComponents": {
+    "poster": "/miniprogram_dist/poster/index"
+  },
   "navigationBarTitleText": "我的二维码"
 }

@@ -24,14 +24,19 @@ $contentWidth:690px;
 
       .card {
         margin: 0 auto;
-        padding: 20px 0 74px;
+        // padding: 20px 0 74px;
         width: $contentWidth;
-        background: #FFFFFF;
-        box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
+        // background: #FFFFFF;
+        // box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
         border-radius: 10px;
         text-align: center;
         font-size: 32px;
 
+        .my-card {
+          width: 690px;
+          height: 900px;
+        }
+
         .avatar {
           width: 120px;
           height: 120px;

+<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
 <view class="page">
   <view class="app__bgc bgc"></view>
   <view class="app__bg bg"></view>
@@ -5,13 +6,12 @@
     <view class="top-space"></view>
     <view class="content">
       <view class="card">
-        <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
+        <image class="my-card" mode="widthFix" src="{{imageUrl}}" />
+        <!-- <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
         <view class="nickname">{{userInfo.nickname}}</view>
         <image class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
-        <!-- <image wx:if="{{qrImagePath}}" class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
-        <canvas wx:else class="qrcode" style="visibility: hidden;" canvas-id="qrcanvas" /> -->
         <view class="t1">深士照明</view>
-        <view class="t1 t2">扫码即获专属积分，兑换超值奖品</view>
+        <view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> -->
       </view>
       <view class="tips">分享邀请好友加入，赢取推广积分</view>
       <view class="btn-wrap">

@@ -94,8 +94,21 @@ Page({
           parentId: ""
         }
       }).then((result) => {
+        let provinceList = result;
+        // ---- start 把广东移动到第一条
+        for (var i = 0; i < provinceList.length; i++) {
+          let key = provinceList[i].areaName.indexOf('广东');
+          if (key != -1) {
+            let target = provinceList[i];
+            provinceList.unshift(target);
+            provinceList.splice(i + 1, 1);
+            break;
+          }
+        }
+        // ---- end 把广东移动到第一条
+
         this.setData({
-          provinceList: result
+          provinceList: provinceList
         })
         console.log("provinceList:", result);
       })