''

app.json

@@ -123,6 +123,13 @@
         "index"
       ]
     },
+    {
+      "root": "src/pages/invitationcard",
+      "name": "invitationcard",
+      "pages": [
+        "index"
+      ]
+    },
     {
       "root": "src/pages/invitation",
       "name": "invitation",

components/canvasdrawer/canvasdrawer.js

+/* global Component wx */
+
+Component({
+  properties: {
+    painting: {
+      type: Object,
+      value: {view: []},
+      observer (newVal, oldVal) {
+        if (!this.data.isPainting) {
+          if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+            if (newVal && newVal.width && newVal.height) {
+              this.setData({
+                showCanvas: true,
+                isPainting: true
+              })
+              this.readyPigment()
+            }
+          } else {
+            if (newVal && newVal.mode !== 'same') {
+              this.triggerEvent('getImage', {errMsg: 'canvasdrawer:samme params'})
+            }
+          }
+        }
+      }
+    }
+  },
+  data: {
+    showCanvas: false,
+
+    width: 100,
+    height: 100,
+
+    tempFileList: [],
+
+    isPainting: false
+  },
+  ctx: null,
+  cache: {},
+  ready () {
+    wx.removeStorageSync('canvasdrawer_pic_cache')
+    this.cache = wx.getStorageSync('canvasdrawer_pic_cache') || {}
+    this.ctx = wx.createCanvasContext('canvasdrawer', this)
+  },
+  methods: {
+    readyPigment () {
+      const { width, height, views } = this.data.painting
+      this.setData({
+        width,
+        height
+      })
+
+      const inter = setInterval(() => {
+        if (this.ctx) {
+          clearInterval(inter)
+          this.ctx.clearActions()
+          this.ctx.save()
+          this.getImagesInfo(views)
+        }
+      }, 100)
+    },
+    getImagesInfo (views) {
+      const imageList = []
+      for (let i = 0; i < views.length; i++) {
+        if (views[i].type === 'image') {
+          imageList.push(this.getImageInfo(views[i].url))
+        }
+      }
+
+      const loadTask = []
+      for (let i = 0; i < Math.ceil(imageList.length / 8); i++) {
+        loadTask.push(new Promise((resolve, reject) => {
+          Promise.all(imageList.splice(i * 8, 8)).then(res => {
+            resolve(res)
+          }).catch(res => {
+            reject(res)
+          })
+        }))
+      }
+      Promise.all(loadTask).then(res => {
+        let tempFileList = []
+        for (let i = 0; i < res.length; i++) {
+          tempFileList = tempFileList.concat(res[i])
+        }
+        this.setData({
+          tempFileList
+        })
+        this.startPainting()
+      })
+    },
+    startPainting () {
+      const { tempFileList, painting: { views } } = this.data
+      for (let i = 0, imageIndex = 0; i < views.length; i++) {
+        if (views[i].type === 'image') {
+          this.drawImage({
+            ...views[i],
+            url: tempFileList[imageIndex]
+          })
+          imageIndex++
+        } else if (views[i].type === 'text') {
+          if (!this.ctx.measureText) {
+            wx.showModal({
+              title: '提示',
+              content: '当前微信版本过低，无法使用 measureText 功能，请升级到最新微信版本后重试。'
+            })
+            this.triggerEvent('getImage', {errMsg: 'canvasdrawer:version too low'})
+            return
+          } else {
+            this.drawText(views[i])
+          }
+        } else if (views[i].type === 'rect') {
+          this.drawRect(views[i])
+        }
+      }
+      this.ctx.draw(false, () => {
+        wx.setStorageSync('canvasdrawer_pic_cache', this.cache)
+        const system = wx.getSystemInfoSync().system
+        if (/ios/i.test(system)) {
+          this.saveImageToLocal()
+        } else {
+          // 延迟保存图片，解决安卓生成图片错位bug。
+          setTimeout(() => {
+            this.saveImageToLocal()
+          }, 800)
+        }
+      })
+    },
+    drawImage (params) {
+      this.ctx.save()
+      const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0, deg = 0 } = params
+      // if (borderRadius) {
+      //   this.ctx.beginPath()
+      //   this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI)
+      //   this.ctx.clip()
+      //   this.ctx.drawImage(url, left, top, width, height)
+      // } else {
+      if (deg !== 0) {
+        this.ctx.translate(left + width/2, top + height/2)
+        this.ctx.rotate(deg * Math.PI / 180)
+        this.ctx.drawImage(url, -width/2, -height/2, width, height)
+      } else {
+        this.ctx.drawImage(url, left, top, width, height)
+      }
+      // }
+      this.ctx.restore()
+    },
+    drawText (params) {
+      this.ctx.save()
+      const {
+        MaxLineNumber = 2,
+        breakWord = false,
+        color = 'black',
+        content = '',
+        fontSize = 16,
+        top = 0,
+        left = 0,
+        lineHeight = 20,
+        textAlign = 'left',
+        width,
+        bolder = false,
+        textDecoration = 'none'
+      } = params
+      
+      this.ctx.beginPath()
+      this.ctx.setTextBaseline('top')
+      this.ctx.setTextAlign(textAlign)
+      this.ctx.setFillStyle(color)
+      this.ctx.setFontSize(fontSize)
+
+      if (!breakWord) {
+        this.ctx.fillText(content, left, top)
+        this.drawTextLine(left, top, textDecoration, color, fontSize, content)
+      } else {
+        let fillText = ''
+        let fillTop = top
+        let lineNum = 1
+        for (let i = 0; i < content.length; i++) {
+          fillText += [content[i]]
+          if (this.ctx.measureText(fillText).width > width) {
+            if (lineNum === MaxLineNumber) {
+              if (i !== content.length) {
+                fillText = fillText.substring(0, fillText.length - 1) + '...'
+                this.ctx.fillText(fillText, left, fillTop)
+                this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+                fillText = ''
+                break
+              }
+            }
+            this.ctx.fillText(fillText, left, fillTop)
+            this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+            fillText = ''
+            fillTop += lineHeight
+            lineNum ++
+          }
+        }
+        this.ctx.fillText(fillText, left, fillTop)
+        this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+      }
+      
+      this.ctx.restore()
+
+      if (bolder) {
+        this.drawText({
+          ...params,
+          left: left + 0.3,
+          top: top + 0.3,
+          bolder: false,
+          textDecoration: 'none' 
+        })
+      }
+    },
+    drawTextLine (left, top, textDecoration, color, fontSize, content) {
+      if (textDecoration === 'underline') {
+        this.drawRect({
+          background: color,
+          top: top + fontSize * 1.2,
+          left: left - 1,
+          width: this.ctx.measureText(content).width + 3,
+          height: 1
+        })
+      } else if (textDecoration === 'line-through') {
+        this.drawRect({
+          background: color,
+          top: top + fontSize * 0.6,
+          left: left - 1,
+          width: this.ctx.measureText(content).width + 3,
+          height: 1
+        })
+      }
+    },
+    drawRect (params) {
+      this.ctx.save()
+      const { background, top = 0, left = 0, width = 0, height = 0 } = params
+      this.ctx.setFillStyle(background)
+      this.ctx.fillRect(left, top, width, height)
+      this.ctx.restore()
+    },
+    getImageInfo (url) {
+      return new Promise((resolve, reject) => {
+        if (this.cache[url]) {
+          resolve(this.cache[url])
+        } else {
+          const objExp = new RegExp(/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/)
+          if (objExp.test(url)) {
+            wx.getImageInfo({
+              src: url,
+              complete: res => {
+                if (res.errMsg === 'getImageInfo:ok') {
+                  this.cache[url] = res.path
+                  resolve(res.path)
+                } else {
+                  this.triggerEvent('getImage', {errMsg: 'canvasdrawer:download fail'})
+                  reject(new Error('getImageInfo fail'))
+                }
+              }
+            })
+          } else {
+            this.cache[url] = url
+            resolve(url)
+          }
+        }
+      })
+    },
+    saveImageToLocal () {
+      const { width, height } = this.data
+      wx.canvasToTempFilePath({
+        x: 0,
+        y: 0,
+        width,
+        height,
+        canvasId: 'canvasdrawer',
+        complete: res => {
+          if (res.errMsg === 'canvasToTempFilePath:ok') {
+            this.setData({
+              showCanvas: false,
+              isPainting: false,
+              tempFileList: []
+            })
+            this.triggerEvent('getImage', {tempFilePath: res.tempFilePath, errMsg: 'canvasdrawer:ok'})
+          } else {
+            this.triggerEvent('getImage', {errMsg: 'canvasdrawer:fail'})
+          }
+        }
+      }, this)
+    }
+  }
+})

components/canvasdrawer/canvasdrawer.json

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

components/canvasdrawer/canvasdrawer.wxml

+<canvas canvas-id="canvasdrawer" style="width:{{width}}px;height:{{height}}px;" class="board" wx:if="{{showCanvas}}"></canvas>
\ No newline at end of file

components/canvasdrawer/canvasdrawer.wxss

+.board {
+  position: fixed;
+  top: 2000rpx;
+}
\ No newline at end of file

project.config.json

@@ -41,7 +41,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 131,
+			"current": 133,
 			"list": [
 				{
 					"id": 0,
@@ -973,6 +973,13 @@
 					"pathName": "src/pages/beforeinvitation/index",
 					"query": "tid=186&consumerId=111",
 					"scene": null
+				},
+				{
+					"id": 133,
+					"name": "邀请卡页面",
+					"pathName": "src/pages/invitationcard/index",
+					"query": "tid=186",
+					"scene": null
 				}
 			]
 		}

src/pages/invitationcard/index.js

+// business/pages/inviteindex/index.js
+import {
+  userShow,
+  themeDetail,
+} from '../../../service/customer/themeindex.js';
+import {
+  LocalStorage,
+  imagify
+} from '../../../utilities/index.js';
+import {
+  wxPreviewImage
+} from '../../../utilities/wxApi.js';
+import {
+  generateCustomerQrcode,
+} from '../../../service/common.js';
+var app = getApp();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imageRoot: app.globalData.imageRoot,
+    imageVersion: app.globalData.imageVersion,
+    localImageRoot: '../../../images/',
+    id:0,
+    tid: 0,
+    currentIndex: 1,
+    swiperCurrent: 0,
+    themeDetail: {},
+    userInfo: {},
+    qrcode: '',
+    painting: {},
+    posterUrl: '',
+    posterBox: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    const {
+      tid,
+      // consumerId
+    } = options;
+    this.setData({
+      tid,
+      // consumerId
+    })
+    this.getThemeDetail();
+    // this.subjectClassStudent();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  },
+  selectCard (e) {
+    const {dataset} = e.currentTarget;
+    this.setData({
+      currentIndex: dataset.cardindex,
+      swiperCurrent: dataset.cardindex - 1
+    })
+  },
+  swiperChange (e) {
+    const {detail} = e;
+    this.setData({
+      currentIndex: detail.current + 1
+    })
+  },
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    return {
+    }
+  },
+  getThemeDetail () {
+    wx.showLoading();
+    themeDetail({
+      subject_id: this.data.tid
+    }).then((res) => {
+      const {code, data} = res;
+      if (code != 200) {
+        return
+      }
+      this.setData({
+        themeDetail: data,
+        'themeDetail.title': '萨达撒多撒萨达撒多撒萨达撒多撒萨达撒多撒'
+      })
+      this.userShow(data.school_id);
+      
+    }).catch(() => {
+      wx.hideLoading();
+    })
+  },
+  userShow (school_id) {
+    const visitor = LocalStorage.getItem('visitor')
+    userShow({
+      school_id,
+      consumer_id: visitor && visitor.id
+    }).then((res) => {
+      const {data, code} = res;
+      if (code == 30005) {
+      }
+      if (code == 200) {
+        this.setData({
+          userInfo: data,
+        })
+        this.generateCustomerQrcode()
+      }
+    }).then(() => {
+    }).catch(() => {
+      wx.hideLoading();
+    })
+  },
+  generateCustomerQrcode () {
+    generateCustomerQrcode({
+      scene: `t=${this.data.tid}`,
+      page: `src/pages/circleindex/index`
+    }).then((res) => {
+      const {
+        code,
+        data
+      } = res;
+      wx.hideLoading();
+      if (code == 200) {
+        const qrcode = imagify(data.url);
+        this.setData({
+          qrcode
+        })
+      } 
+    }).catch(() => {
+      wx.hideLoading();
+    })
+  },
+  generatePoster (e) {
+    const {dataset} = e.currentTarget;
+    if (this.data.posterBox[this.data.currentIndex]) {
+      wx.previewImage({
+        current: this.data.posterBox[this.data.currentIndex], // 当前显示图片的链接，不填则默认为 urls 的第一张
+        urls: [this.data.posterBox[this.data.currentIndex]],
+      })
+      return;
+    }
+    wx.showLoading({
+      title: '邀请卡生成中...'
+    })
+    switch(Number(dataset.posterindex)) {
+      case 1:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/carda.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 770,
+                left: 70,
+                width: 80,
+                height: 80
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardaavatarcircle.png',
+                top: 765,
+                left: 64,
+                width: 92,
+                height: 92
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 31,
+                left: 31,
+                width: 152,
+                height: 152
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardacircle.png',
+                top: 26,
+                left: 26,
+                width: 162,
+                height: 162
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#000000',
+                textAlign: 'left',
+                top: 796,
+                left: 172,
+                bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 40,
+                lineHeight: 48,
+                color: '#000000',
+                textAlign: 'center',
+                top: 1090,
+                left: 375,
+                width: 500,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 2:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardb.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 34,
+                left: 310,
+                width: 132,
+                height: 132
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardbavatarcircle.png',
+                top: 25,
+                left: 300,
+                width: 148,
+                height: 148
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 1123,
+                left: 164,
+                width: 152,
+                height: 152
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#fff',
+                textAlign: 'center',
+                top: 204,
+                left: 375,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 44,
+                lineHeight: 48,
+                color: '#FFF9C6',
+                textAlign: 'center',
+                top: 510,
+                left: 375,
+                width: 500,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 3:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardc.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 338,
+                left: 320,
+                width: 110,
+                height: 110
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardcavatarcircle.png',
+                top: 329,
+                left: 312,
+                width: 125,
+                height: 125
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 978,
+                left: 154,
+                width: 152,
+                height: 152
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardccircle.png',
+                top: 969,
+                left: 148,
+                width: 165,
+                height: 165
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 32,
+                color: '#000',
+                textAlign: 'center',
+                top: 475,
+                left: 375,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 44,
+                lineHeight: 48,
+                color: '#EC7A00',
+                textAlign: 'center',
+                top: 782,
+                left: 375,
+                width: 500,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 4:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardd.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 189,
+                left: 324,
+                width: 104,
+                height: 104
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/carddavatarcircle.png',
+                top: 182,
+                left: 318,
+                width: 115,
+                height: 115
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 775,
+                left: 164,
+                width: 142,
+                height: 142
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/carddcircle.png',
+                top: 764,
+                left: 153,
+                width: 165,
+                height: 165
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 32,
+                color: '#000',
+                textAlign: 'center',
+                top: 319,
+                left: 375,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 41,
+                lineHeight: 45,
+                color: '#C79455',
+                textAlign: 'center',
+                top: 598,
+                left: 375,
+                width: 400,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 5:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/carde.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 450,
+                left: 83,
+                width: 88,
+                height: 88
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardeavatarcircle.png',
+                top: 445,
+                left: 74,
+                width: 98,
+                height: 98
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 1140,
+                left: 78,
+                width: 142,
+                height: 142
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardecircle.png',
+                top: 1128,
+                left: 69,
+                width: 165,
+                height: 165
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#778696',
+                textAlign: 'left',
+                top: 480,
+                left: 196,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 42,
+                lineHeight: 45,
+                color: '#000',
+                textAlign: 'left',
+                top: 868,
+                left: 86,
+                width: 360,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 6:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardf.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 483,
+                left: 165,
+                width: 88,
+                height: 88
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardfavatarcircle.png',
+                top: 472,
+                left: 155,
+                width: 108,
+                height: 108
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 1136,
+                left: 82,
+                width: 128,
+                height: 128
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardfcircle.png',
+                top: 1133,
+                left: 78,
+                width: 136,
+                height: 136
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#778696',
+                textAlign: 'left',
+                top: 512,
+                left: 290,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 42,
+                lineHeight: 45,
+                color: '#000',
+                textAlign: 'left',
+                top: 858,
+                left: 164,
+                width: 360,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 7:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardg.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 56,
+                left: 41,
+                width: 88,
+                height: 88
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardgavatarcircle.png',
+                top: 48,
+                left: 33,
+                width: 103,
+                height: 103
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 990,
+                left: 484,
+                width: 152,
+                height: 152
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#D9E6FF',
+                textAlign: 'left',
+                top: 85,
+                left: 168,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 50,
+                lineHeight: 55,
+                color: '#fff',
+                textAlign: 'left',
+                top: 438,
+                left: 43,
+                width: 450,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      case 8:
+        this.setData({
+          painting:{
+            width: 750,
+            height: 1334,
+            views: [
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardh.png',
+                top: 0,
+                left: 0,
+                width: 750,
+                height: 1334
+              },
+              {
+                type: 'image',
+                url: this.data.userInfo.avatar,
+                top: 614,
+                left: 250,
+                width: 88,
+                height: 88
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardhavatarcircle.png',
+                top: 604,
+                left: 241,
+                width: 106,
+                height: 106
+              },
+              {
+                type: 'image',
+                url: this.data.qrcode,
+                top: 1153,
+                left: 136,
+                width: 152,
+                height: 152
+              },
+              {
+                type: 'image',
+                url: 'https://wxloss.oss-cn-hangzhou.aliyuncs.com/invitioncard/cardhcircle.png',
+                top: 1146,
+                left: 130,
+                width: 164,
+                height: 164
+              },
+              {
+                type: 'text',
+                content: this.data.userInfo.nickname,
+                fontSize: 30,
+                color: '#D9E6FF',
+                textAlign: 'left',
+                top: 634,
+                left: 378,
+                // bolder: true
+              },
+              { 
+                type: 'text',
+                content: this.data.themeDetail.title,
+                fontSize: 50,
+                lineHeight: 55,
+                color: '#fff',
+                textAlign: 'center',
+                top: 920,
+                left: 375,
+                width: 500,
+                MaxLineNumber: 2,
+                breakWord: true,
+                bolder: true
+              }
+            ]
+          }
+        })
+        break;
+      default:
+        break;
+    }
+  },
+  eventGetImage (e) {
+    const {detail} = e;
+    wx.hideLoading();
+    if (detail.errMsg == 'canvasdrawer:ok') {
+      this.setData({
+        // `[${this.data.currentIndex}]`: e.detail.tempFilePath
+        [`posterBox[${this.data.currentIndex}]`]: e.detail.tempFilePath
+      })
+      console.log(this.data.posterBox, 'this.data.posterBox')
+      wx.previewImage({
+        current: e.detail.tempFilePath, // 当前显示图片的链接，不填则默认为 urls 的第一张
+        urls: [e.detail.tempFilePath],
+      })
+      this.setData({
+        painting:{}
+      })
+    } else {
+      this.setData({
+        painting:{}
+      })
+      wx.showToast({
+        title: '生成失败',
+        icon: 'none'
+      })
+    }
+  }
+})
\ No newline at end of file

src/pages/invitationcard/index.json

+{
+  "navigationBarTitleText": "邀请好友一起学习",
+  "usingComponents": {
+    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
+  }
+}
\ No newline at end of file

src/pages/invitationcard/index.wxml

+<view class="container">
+    <view class="swiperbox" hover-class="none" hover-stop-propagation="false">
+        <swiper
+            style="height: 750rpx"
+            current="{{swiperCurrent}}"
+            bindchange="swiperChange"
+        >
+            <swiper-item data-posterindex="1"  bindtap="generatePoster">
+                <view class="card carda" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/carda.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="2"  bindtap="generatePoster">
+                <view class="card cardb" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardb.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                            <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="3"  bindtap="generatePoster">
+                <view class="card cardc" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardc.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="4"  bindtap="generatePoster">
+                <view class="card cardd" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardd.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="5"  bindtap="generatePoster">
+                <view class="card carde" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/carde.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="6"  bindtap="generatePoster">
+                <view class="card cardf" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardf.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="7"  bindtap="generatePoster">
+                <view class="card cardg" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardg.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item data-posterindex="8"  bindtap="generatePoster">
+                <view class="card cardh" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardh.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+    </view>
+    <view class="warntext" hover-class="none" hover-stop-propagation="false">点击预览专属海报，长按保存</view>
+    <view class="scroll-box" hover-class="none" hover-stop-propagation="false">
+        <scroll-view
+            scroll-y="{{false}}"
+            scroll-x="{{true}}"
+            style="width: auto;overflow:hidden;"
+        >   
+            <view class="cardbox {{currentIndex == 1 ? 'selected' : ''}}" data-cardindex="1" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card carda" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/carda.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 2 ? 'selected' : ''}}" data-cardindex="2" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardb" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardb.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                萨达撒多撒多萨达撒撒
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 3 ? 'selected' : ''}}" data-cardindex="3" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardc" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardc.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 4 ? 'selected' : ''}}" data-cardindex="4" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardd" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardd.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 5 ? 'selected' : ''}}" data-cardindex="5" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card carde" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/carde.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 6 ? 'selected' : ''}}" data-cardindex="6" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardf" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardf.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 7 ? 'selected' : ''}}" data-cardindex="7" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardg" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardg.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cardbox {{currentIndex == 8 ? 'selected' : ''}}" data-cardindex="8" bindtap="selectCard" hover-class="none" hover-stop-propagation="false">
+                <view class="card cardh" hover-class="none" hover-stop-propagation="false">
+                    <image class="cardbg" src="{{localImageRoot}}2c/invitationcard/cardh.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                    <view class="cardcontent" hover-class="none" hover-stop-propagation="false">
+                        <image class="qrcode" src="{{qrcode}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <image class="avatar" src="{{userInfo.avatar}}" mode="aspectFit|aspectFill|widthFix"   binderror="" bindload=""></image>
+                        <view class="nickname" hover-class="none" hover-stop-propagation="false">{{userInfo.nickname}}</view>
+                        <view class="themetitle" hover-class="none" hover-stop-propagation="false">
+                            <view class="themetitlebox" hover-class="none" hover-stop-propagation="false">
+                                {{themeDetail.title}}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+    <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
+</view>

src/pages/invitationcard/index.wxss

+.card {
+    position: relative;
+    width: 750rpx;
+    height: 1334rpx;
+}
+.cardbg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: block;
+}
+.cardcontent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    left: 0;
+    top: 0;
+}
+.carda .qrcode{
+    width: 152rpx;
+    height: 152rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 30rpx;
+    border-radius: 50%;
+}
+.carda .avatar {
+    width: 80rpx;
+    height: 80rpx;
+    position: absolute;
+    left: 70rpx;
+    top: 770rpx;
+    border-radius: 50%;
+}
+.carda .nickname {
+    color: #000000;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 172rpx;
+    top: 796rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.carda .themetitle {
+    width:500rpx;
+    height:90rpx;
+    position:absolute;
+    top:1090rpx;
+    left:50%;
+    transform:translateX(-50%);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+   
+}
+.carda .themetitle .themetitlebox {
+    width:500rpx;
+    text-align:center;
+    color:#000000;
+    font-size:40rpx;
+    line-height:45rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.cardb .qrcode{
+    width: 152rpx;
+    height: 152rpx;
+    position: absolute;
+    left: 164rpx;
+    top: 1124rpx;
+    border-radius: 50%;
+}
+.cardb .avatar {
+    width: 132rpx;
+    height: 132rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 34rpx;
+    border-radius: 50%;
+}
+.cardb .nickname {
+    color: #FFFFFF;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 204rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardb .themetitle {
+    width:500rpx;
+    height:90rpx;
+    position:absolute;
+    top:480rpx;
+    left:50%;
+    transform:translateX(-50%);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    overflow:hidden;
+}
+.cardb .themetitle .themetitlebox {
+    text-align:center;
+    color:#FFF9C6;
+    font-size:44rpx;
+    line-height:48rpx;
+    width:500rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.cardc .qrcode{
+    width: 152rpx;
+    height: 152rpx;
+    position: absolute;
+    left: 154rpx;
+    top: 978rpx;
+    border-radius: 50%;
+}
+.cardc .avatar {
+    width: 110rpx;
+    height: 110rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 338rpx;
+    border-radius: 50%;
+}
+.cardc .nickname {
+    color: #000000;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 475rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardc .themetitle {
+    width:500rpx;
+    height:90rpx;
+    position:absolute;
+    top:740rpx;
+    left:50%;
+    transform:translateX(-50%);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.cardc .themetitle .themetitlebox {
+    text-align:center;
+    color:#EC7A00;
+    font-size:44rpx;
+    line-height:52rpx;
+    width:500rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.cardd .qrcode{
+    width: 142rpx;
+    height: 142rpx;
+    position: absolute;
+    left: 164rpx;
+    top: 775rpx;
+    border-radius: 50%;
+}
+.cardd .avatar {
+    width: 104rpx;
+    height: 104rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 189rpx;
+    border-radius: 50%;
+}
+.cardd .nickname {
+    color: #000000;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 320rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardd .themetitle {
+    width:500rpx;
+    height:90rpx;
+    position:absolute;
+    top:570rpx;
+    left:50%;
+    transform:translateX(-50%);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.cardd .themetitle .themetitlebox {
+    text-align:center;
+    color:#C79455;
+    font-size:40rpx;
+    line-height:45rpx;
+    width:500rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.carde .qrcode{
+    width: 142rpx;
+    height: 142rpx;
+    position: absolute;
+    left: 78rpx;
+    top: 1140rpx;
+    border-radius: 50%;
+}
+.carde .avatar {
+    width: 87rpx;
+    height: 87rpx;
+    position: absolute;
+    left: 84rpx;
+    top: 451rpx;
+    border-radius: 50%;
+}
+.carde .nickname {
+    color: #778696;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 196rpx;
+    top: 480rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.carde .themetitle {
+    width:320rpx;
+    height:90rpx;
+    position:absolute;
+    top:888rpx;
+    left:80rpx;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.carde .themetitle .themetitlebox {
+    text-align:left;
+    color:#C79455;
+    font-size:40rpx;
+    line-height:45rpx;
+    width:320rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.cardf .qrcode{
+    width: 124rpx;
+    height: 124rpx;
+    position: absolute;
+    left: 84rpx;
+    top: 1140rpx;
+    border-radius: 50%;
+}
+.cardf .avatar {
+    width: 88rpx;
+    height: 88rpx;
+    position: absolute;
+    left: 166rpx;
+    top: 484rpx;
+    border-radius: 50%;
+}
+.cardf .nickname {
+    color: #778696;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 290rpx;
+    top: 512rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardf .themetitle {
+    width:380rpx;
+    height:90rpx;
+    position:absolute;
+    top:830rpx;
+    left:164rpx;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.cardf .themetitle .themetitlebox {
+    text-align:left;
+    color:#000000;
+    font-size:42rpx;
+    line-height:45rpx;
+    width:380rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+}
+.cardg .qrcode{
+    width: 152rpx;
+    height: 152rpx;
+    position: absolute;
+    left: 484rpx;
+    top: 990rpx;
+    border-radius: 50%;
+}
+.cardg .avatar {
+    width: 88rpx;
+    height: 88rpx;
+    position: absolute;
+    left: 42rpx;
+    top: 56rpx;
+    border-radius: 50%;
+}
+.cardg .nickname {
+    color: #D9E6FF;
+    font-size: 30rpx;
+    font-weight: 700;
+    line-height: 1;
+    width: 260rpx;
+    position: absolute;
+    left: 168rpx;
+    top: 85rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardg .themetitle {
+    width:500rpx;
+    height:120rpx;
+    position:absolute;
+    top:430rpx;
+    left:44rpx;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.cardg .themetitle .themetitlebox {
+    text-align:left;
+    color:#FFFFFF;
+    font-size:50rpx;
+    line-height:60rpx;
+    width:500rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+    font-weight: 700;
+}
+.cardh .qrcode{
+    width: 152rpx;
+    height: 152rpx;
+    position: absolute;
+    left: 136rpx;
+    top: 1154rpx;
+    border-radius: 50%;
+}
+.cardh .avatar {
+    width: 88rpx;
+    height: 88rpx;
+    position: absolute;
+    left: 250rpx;
+    top: 614rpx;
+    border-radius: 50%;
+}
+.cardh .nickname {
+    color: #D9E6FF;
+    font-size: 30rpx;
+    /* font-weight: 700; */
+    line-height: 1;
+    width: 230rpx;
+    position: absolute;
+    left: 378rpx;
+    top: 644rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
+}
+.cardh .themetitle {
+    width:500rpx;
+    height:120rpx;
+    position:absolute;
+    top:910rpx;
+    left:50%;
+    transform: translateX(-50%);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.cardh .themetitle .themetitlebox {
+    text-align:center;
+    color:#FFFFFF;
+    font-size:50rpx;
+    line-height:60rpx;
+    width:500rpx;
+    word-break:break-all;
+    text-overflow:-o-ellipsis-lastline;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    line-clamp:2;
+    -webkit-box-orient:vertical;
+    font-weight: 700;
+}
+.scroll-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+.scroll-box {
+    width: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-right: 24rpx;
+    
+    /* position: absolute;
+    left: 0;
+    bottom: 0; */
+}
+.scroll-box .cardbox{
+    display: inline-block;
+    margin-left: 32rpx;
+    border-radius: 10rpx;
+    overflow:hidden;
+}
+.scroll-box .card{
+    zoom: 0.15;
+}
+.scroll-box .cardbox.selected {
+    border-radius: 10rpx;
+    border: 4rpx solid #65B8F4;
+    /* box-shadow:0px 0px 13rpx 0px rgba(0, 0, 0, 0.22); */
+}
+.scroll-box .cardbox.selected .card{
+    zoom: 0.17;
+
+}
+.swiperbox .card{
+    zoom: 0.52;
+    margin: 0 auto;
+}
+.warntext {
+    color: #777777;
+    font-size: 30rpx;
+    text-align: center;
+    letter-spacing: 2rpx;
+    margin-bottom: 130rpx;
+}
+
+.imagedialog {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 200;
+    overflow: scroll;
+    top: 0;
+    left: 0;
+}
+.imagedialog .posterimg {
+    width: 750rpx;
+    height: 1334rpx;
+}
\ No newline at end of file