feat(share): redesign SharePoster with brand header, warm orange gradient, content card, and dimension dots

cfc-frontend/components/SharePoster.vue

@@ -32,31 +32,41 @@ export default {
     }
   },
   methods: {
+    // ============================================================
+    //  ENTRY POINT
+    // ============================================================
     drawPoster() {
       var ctx = uni.createCanvasContext('sharePosterCanvas', this)
       var w = 500
-      var h = 700
+      var h = 750
 
-      // 1. Orange gradient background
-      var gradient = ctx.createLinearGradient(0, 0, w, h)
+      // 1. Background gradient — warm orange
+      var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
       gradient.addColorStop(0, '#F97316')
-      gradient.addColorStop(1, '#EA580C')
+      gradient.addColorStop(0.55, '#EA580C')
+      gradient.addColorStop(1, '#D94F0A')
       ctx.setFillStyle(gradient)
       ctx.fillRect(0, 0, w, h)
 
-      // 2. White circle border for avatar
+      // 2. Top decorative area (brand, tagline, dimension dots, divider)
+      this._drawTopDecoration(ctx, w)
+
+      // 3. White/cream content card
+      var cardX = 28
+      var cardY = 112
+      var cardW = 444
+      var cardH = 528
+      this._drawContentCard(ctx, cardX, cardY, cardW, cardH)
+
+      // 4. Avatar decorative frame (drawn before async avatar download)
       var avatarX = w / 2
-      var avatarY = 120
-      var avatarR = 50
-      ctx.setStrokeStyle('#ffffff')
-      ctx.setLineWidth(3)
-      ctx.beginPath()
-      ctx.arc(avatarX, avatarY, avatarR + 3, 0, 2 * Math.PI)
-      ctx.stroke()
+      var avatarY = cardY + 62
+      var avatarR = 48
+      this._drawAvatarFrame(ctx, avatarX, avatarY, avatarR)
 
-      // 3. Draw avatar or default icon
+      // 5. Download avatar (async) then draw remaining content
+      var self = this
       if (this.userAvatar) {
-        var self = this
         uni.downloadFile({
           url: this.userAvatar,
           success: function(res) {
@@ -67,74 +77,251 @@ export default {
               ctx.clip()
               ctx.drawImage(res.tempFilePath, avatarX - avatarR, avatarY - avatarR, avatarR * 2, avatarR * 2)
               ctx.restore()
-              self._drawTextAndQr(ctx, w, h, avatarX, avatarY)
             } else {
               self._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
-              self._drawTextAndQr(ctx, w, h, avatarX, avatarY)
             }
+            self._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
           },
           fail: function() {
             self._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
-            self._drawTextAndQr(ctx, w, h, avatarX, avatarY)
+            self._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
           }
         })
       } else {
         this._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
-        this._drawTextAndQr(ctx, w, h, avatarX, avatarY)
+        this._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
       }
     },
 
-    _drawDefaultAvatar(ctx, x, y, r) {
+    // ============================================================
+    //  TOP DECORATION — brand, tagline, dimension dots, divider
+    // ============================================================
+    _drawTopDecoration(ctx, w) {
+      var centerX = w / 2
+      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
+      var dotY = 28
+      var dotR = 5
+      var dotSpacing = 26
+      var i, offsetX, offsetY
+
+      // 5 dimension dots in a gentle arc
+      for (i = 0; i < 5; i++) {
+        offsetX = (i - 2) * dotSpacing
+        offsetY = Math.abs(i - 2) * 3
+        ctx.setFillStyle(dotColors[i])
+        ctx.beginPath()
+        ctx.arc(centerX + offsetX, dotY + offsetY, dotR, 0, 2 * Math.PI)
+        ctx.fill()
+      }
+
+      // Brand name
       ctx.setFillStyle('#ffffff')
+      ctx.setFontSize(20)
+      ctx.setTextAlign('center')
+      ctx.setTextBaseline('top')
+      ctx.fillText('浠艾福', centerX, 52)
+
+      // Tagline
+      ctx.setFontSize(14)
+      ctx.setFillStyle('rgba(255,255,255,0.8)')
+      ctx.fillText('给全家的一站式幸福提案', centerX, 76)
+
+      // Dotted divider
+      ctx.setStrokeStyle('rgba(255,255,255,0.25)')
+      ctx.setLineWidth(1)
+      ctx.beginPath()
+      var dashX = 80
+      var dashY = 100
+      ctx.moveTo(dashX, dashY)
+      ctx.lineTo(w - dashX, dashY)
+      ctx.stroke()
+    },
+
+    // ============================================================
+    //  CONTENT CARD — warm white rounded rect with bracket corners
+    // ============================================================
+    _drawContentCard(ctx, x, y, w, h) {
+      // Shadow/3D offset
+      ctx.setFillStyle('rgba(0,0,0,0.04)')
+      this._roundRect(ctx, x + 2, y + 3, w, h, 16)
+      ctx.fill()
+
+      // Main white card
+      ctx.setFillStyle('#FFFCF5')
+      this._roundRect(ctx, x, y, w, h, 16)
+      ctx.fill()
+
+      // Corner decorative brackets
+      var br = 10
+      var bl = 22
+      ctx.setStrokeStyle('#F97316')
+      ctx.setLineWidth(1.5)
+
+      // Top-left
+      ctx.beginPath()
+      ctx.moveTo(x + br, y + br + bl)
+      ctx.lineTo(x + br, y + br)
+      ctx.lineTo(x + br + bl, y + br)
+      ctx.stroke()
+
+      // Top-right
+      ctx.beginPath()
+      ctx.moveTo(x + w - br - bl, y + br)
+      ctx.lineTo(x + w - br, y + br)
+      ctx.lineTo(x + w - br, y + br + bl)
+      ctx.stroke()
+
+      // Bottom-left
+      ctx.beginPath()
+      ctx.moveTo(x + br, y + h - br - bl)
+      ctx.lineTo(x + br, y + h - br)
+      ctx.lineTo(x + br + bl, y + h - br)
+      ctx.stroke()
+
+      // Bottom-right
+      ctx.beginPath()
+      ctx.moveTo(x + w - br - bl, y + h - br)
+      ctx.lineTo(x + w - br, y + h - br)
+      ctx.lineTo(x + w - br, y + h - br - bl)
+      ctx.stroke()
+    },
+
+    // ============================================================
+    //  AVATAR FRAME — dotted outer ring + solid inner ring
+    // ============================================================
+    _drawAvatarFrame(ctx, x, y, r) {
+      // Outer dotted ring
+      ctx.setStrokeStyle('rgba(249,115,22,0.2)')
+      ctx.setLineWidth(1.5)
+      ctx.beginPath()
+      ctx.arc(x, y, r + 12, 0, 2 * Math.PI)
+      ctx.stroke()
+
+      // Solid ring
+      ctx.setStrokeStyle('#F97316')
+      ctx.setLineWidth(2.5)
+      ctx.beginPath()
+      ctx.arc(x, y, r + 4, 0, 2 * Math.PI)
+      ctx.stroke()
+    },
+
+    // ============================================================
+    //  ROUNDED RECTANGLE HELPER
+    // ============================================================
+    _roundRect(ctx, x, y, w, h, r) {
+      ctx.beginPath()
+      ctx.moveTo(x + r, y)
+      ctx.arcTo(x + w, y, x + w, y + r, r)
+      ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
+      ctx.arcTo(x, y + h, x, y + h - r, r)
+      ctx.arcTo(x, y, x + r, y, r)
+      ctx.closePath()
+    },
+
+    // ============================================================
+    //  DEFAULT AVATAR (fallback when image download fails)
+    // ============================================================
+    _drawDefaultAvatar(ctx, x, y, r) {
+      // Warm cream circle background
+      ctx.setFillStyle('#FFF0E0')
       ctx.beginPath()
       ctx.arc(x, y, r, 0, 2 * Math.PI)
       ctx.fill()
+
+      // Draw a simple person silhouette with Canvas primitives
       ctx.setFillStyle('#F97316')
-      ctx.setFontSize(40)
-      ctx.setTextAlign('center')
-      ctx.setTextBaseline('middle')
-      ctx.fillText('\u{1F464}', x, y)
+
+      // Head (smaller circle, upper portion)
+      var headR = r * 0.32
+      var headY = y - r * 0.12
+      ctx.beginPath()
+      ctx.arc(x, headY, headR, 0, 2 * Math.PI)
+      ctx.fill()
+
+      // Body (trapezoid-like shape: shoulders + torso)
+      ctx.beginPath()
+      var shoulderW = r * 0.55
+      var bodyTop = headY + headR * 0.5
+      var bodyBottom = y + r * 0.55
+      var hipW = r * 0.35
+      ctx.moveTo(x - shoulderW, bodyTop)
+      ctx.quadraticCurveTo(x - shoulderW, bodyTop + 10, x - hipW, bodyBottom)
+      ctx.lineTo(x + hipW, bodyBottom)
+      ctx.quadraticCurveTo(x + shoulderW, bodyTop + 10, x + shoulderW, bodyTop)
+      ctx.closePath()
+      ctx.fill()
     },
 
-    _drawTextAndQr(ctx, w, h, avatarX, avatarY) {
+    // ============================================================
+    //  CONTENT AFTER AVATAR — nickname, referral code, QR code, CTA
+    // ============================================================
+    _drawContentAfterAvatar(ctx, w, h, _cardX, _cardW, _avatarX, avatarY) {
       var self = this
+      var base64Data, commaIdx, fs, filePath
 
-      // 4. Nickname
-      var nameY = avatarY + 80
-      ctx.setFillStyle('#ffffff')
-      ctx.setFontSize(28)
+      // --- Nickname ---
+      var nameY = avatarY + 70
+      ctx.setFillStyle('#1C1917')
+      ctx.setFontSize(24)
       ctx.setTextAlign('center')
       ctx.setTextBaseline('top')
-      ctx.fillText(this.nickname || '\u597d\u53cb', w / 2, nameY)
+      ctx.fillText(this.nickname || '好友', w / 2, nameY)
 
-      // 5. "我的邀请码" label
-      var labelY = nameY + 50
-      ctx.setFontSize(20)
-      ctx.fillText('\u6211\u7684\u9080\u8bf7\u7801', w / 2, labelY)
+      // --- "我的邀请码" label ---
+      var labelY = nameY + 42
+      ctx.setFontSize(17)
+      ctx.setFillStyle('#A8A29E')
+      ctx.fillText('我的邀请码', w / 2, labelY)
 
-      // 6. Referral code in large bold text
-      var codeY = labelY + 36
-      ctx.setFontSize(48)
-      ctx.fillText(this.referralCode || '', w / 2, codeY)
+      // --- Referral code (prominent, warm orange) ---
+      var codeY = labelY + 38
+      var codeText = this.referralCode || '------'
+      ctx.setFontSize(46)
+      ctx.setFillStyle('#F97316')
+      ctx.setTextAlign('center')
+      ctx.setTextBaseline('top')
 
-      // 7. QR code
-      var qrSize = 220
+      // Gentle underline accent
+      var codeWidth = 0
+      if (ctx.measureText) {
+        try { codeWidth = ctx.measureText(codeText).width } catch (e) { codeWidth = codeText.length * 26 }
+      } else {
+        codeWidth = codeText.length * 26
+      }
+      var underlineY = codeY + 54
+      ctx.setStrokeStyle('rgba(249,115,22,0.12)')
+      ctx.setLineWidth(2)
+      ctx.beginPath()
+      ctx.moveTo(w / 2 - codeWidth / 2 - 8, underlineY)
+      ctx.lineTo(w / 2 + codeWidth / 2 + 8, underlineY)
+      ctx.stroke()
+
+      ctx.fillText(codeText, w / 2, codeY)
+
+      // --- Small hint above QR ---
+      var hintY = codeY + 80
+      ctx.setFontSize(14)
+      ctx.setFillStyle('#D6D3D1')
+      ctx.setTextAlign('center')
+      ctx.setTextBaseline('top')
+      ctx.fillText('长按识别二维码 · 一起加入浠艾福', w / 2, hintY)
+
+      // --- QR code ---
+      var qrSize = 180
       var qrX = (w - qrSize) / 2
-      var qrY = codeY + 70
+      var qrY = hintY + 26
 
       if (this.qrCodeBase64) {
-        // Build a file path from base64 data
-        var base64Data = this.qrCodeBase64
-        // Handle data URI prefix
+        base64Data = this.qrCodeBase64
         if (base64Data.indexOf('data:image') === 0) {
-          var commaIdx = base64Data.indexOf(',')
+          commaIdx = base64Data.indexOf(',')
           if (commaIdx > -1) {
             base64Data = base64Data.substring(commaIdx + 1)
           }
         }
 
-        var fs = uni.getFileSystemManager()
-        var filePath = wx.env.USER_DATA_PATH + '/share_qr_tmp.png'
+        fs = uni.getFileSystemManager()
+        filePath = wx.env.USER_DATA_PATH + '/share_qr_tmp.png'
 
         fs.writeFile({
           filePath: filePath,
@@ -143,43 +330,112 @@ export default {
           success: function() {
             // White background behind QR
             ctx.setFillStyle('#ffffff')
-            ctx.fillRect(qrX - 10, qrY - 10, qrSize + 20, qrSize + 20)
+            self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
+            ctx.fill()
+
+            // Subtle border
+            ctx.setStrokeStyle('#E7E5E4')
+            ctx.setLineWidth(0.5)
+            self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
+            ctx.stroke()
+
             ctx.drawImage(filePath, qrX, qrY, qrSize, qrSize)
-            self._drawHintAndFinish(ctx, w, h, qrY, qrSize)
+            self._drawBottomDecoration(ctx, w, h, qrY, qrSize)
           },
           fail: function() {
             self._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
-            self._drawHintAndFinish(ctx, w, h, qrY, qrSize)
+            self._drawBottomDecoration(ctx, w, h, qrY, qrSize)
           }
         })
       } else {
         this._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
-        this._drawHintAndFinish(ctx, w, h, qrY, qrSize)
+        this._drawBottomDecoration(ctx, w, h, qrY, qrSize)
       }
     },
 
+    // ============================================================
+    //  QR PLACEHOLDER (fallback when QR write fails)
+    // ============================================================
     _drawQrPlaceholder(ctx, x, y, size) {
       ctx.setFillStyle('#ffffff')
-      ctx.fillRect(x - 10, y - 10, size + 20, size + 20)
-      ctx.setFillStyle('#F97316')
-      ctx.setFontSize(18)
+      this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
+      ctx.fill()
+
+      ctx.setStrokeStyle('#E7E5E4')
+      ctx.setLineWidth(0.5)
+      this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
+      ctx.stroke()
+
+      ctx.setFillStyle('#A8A29E')
+      ctx.setFontSize(16)
       ctx.setTextAlign('center')
       ctx.setTextBaseline('middle')
-      ctx.fillText('\u4e8c\u7ef4\u7801\u52a0\u8f7d\u4e2d', x + size / 2, y + size / 2)
+      ctx.fillText('二维码加载中', x + size / 2, y + size / 2)
     },
 
-    _drawHintAndFinish(ctx, w, h, qrY, qrSize) {
-      // 8. Hint text below QR
-      var hintY = qrY + qrSize + 20
-      ctx.setFillStyle('#ffffff')
-      ctx.setFontSize(22)
+    // ============================================================
+    //  BOTTOM DECORATION — CTA, dots, brand footer, ctx.draw()
+    // ============================================================
+    _drawBottomDecoration(ctx, w, h, qrY, qrSize) {
+      var centerX = w / 2
+      var bottomY = qrY + qrSize + 16
+
+      // Decorative small diamonds on sides
+      var diamondY = bottomY + 10
+      ctx.setFillStyle('rgba(249,115,22,0.15)')
+      // Left diamond
+      ctx.beginPath()
+      ctx.moveTo(centerX - 76, diamondY)
+      ctx.lineTo(centerX - 72, diamondY - 4)
+      ctx.lineTo(centerX - 68, diamondY)
+      ctx.lineTo(centerX - 72, diamondY + 4)
+      ctx.closePath()
+      ctx.fill()
+      // Right diamond
+      ctx.beginPath()
+      ctx.moveTo(centerX + 68, diamondY)
+      ctx.lineTo(centerX + 72, diamondY - 4)
+      ctx.lineTo(centerX + 76, diamondY)
+      ctx.lineTo(centerX + 72, diamondY + 4)
+      ctx.closePath()
+      ctx.fill()
+
+      // CTA text
+      ctx.setFillStyle('#F97316')
+      ctx.setFontSize(19)
+      ctx.setTextAlign('center')
+      ctx.setTextBaseline('top')
+      ctx.fillText('扫码邀请好友加入', centerX, bottomY)
+
+      // 5 dimension dots in the bottom area (outside card)
+      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
+      var dotY = h - 22
+      var dotR = 4
+      var dotSpacing = 20
+      var i_b, offsetX_b
+
+      for (i_b = 0; i_b < 5; i_b++) {
+        offsetX_b = (i_b - 2) * dotSpacing
+        ctx.setFillStyle(dotColors[i_b])
+        ctx.beginPath()
+        ctx.arc(centerX + offsetX_b, dotY, dotR, 0, 2 * Math.PI)
+        ctx.fill()
+      }
+
+      // Footer brand text
+      ctx.setFillStyle('rgba(255,255,255,0.45)')
+      ctx.setFontSize(12)
       ctx.setTextAlign('center')
       ctx.setTextBaseline('top')
-      ctx.fillText('\u626b\u7801\u9080\u8bf7\u597d\u53cb\u52a0\u5165', w / 2, hintY)
+      ctx.fillText('浠艾福 · 家庭健康俱乐部', centerX, dotY + 7)
 
+      // FINAL RENDER — flush all queued canvas commands
       ctx.draw()
     },
 
+    // ============================================================
+    //  SAVE POSTER TO PHOTO ALBUM (preserved as-is)
+    // ============================================================
     savePoster() {
       var self = this
       uni.canvasToTempFilePath({
@@ -188,15 +444,15 @@ export default {
           uni.saveImageToPhotosAlbum({
             filePath: res.tempFilePath,
             success: function() {
-              uni.showToast({ title: '\u5df2\u4fdd\u5b58\u5230\u76f8\u518c', icon: 'success' })
+              uni.showToast({ title: '已保存到相册', icon: 'success' })
               self.$emit('close')
             },
             fail: function(err) {
               if (err && err.errMsg && (err.errMsg.indexOf('deny') > -1 || err.errMsg.indexOf('auth denied') > -1 || err.errMsg.indexOf('authorize') > -1)) {
                 uni.showModal({
-                  title: '\u63d0\u793a',
-                  content: '\u9700\u8981\u76f8\u518c\u6743\u9650\u624d\u80fd\u4fdd\u5b58\u56fe\u7247',
-                  confirmText: '\u53bb\u8bbe\u7f6e',
+                  title: '提示',
+                  content: '需要相册权限才能保存图片',
+                  confirmText: '去设置',
                   success: function(modalRes) {
                     if (modalRes.confirm) {
                       uni.openSetting()
@@ -204,13 +460,13 @@ export default {
                   }
                 })
               } else {
-                uni.showToast({ title: '\u4fdd\u5b58\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5', icon: 'none' })
+                uni.showToast({ title: '保存失败，请重试', icon: 'none' })
               }
             }
           })
         },
         fail: function() {
-          uni.showToast({ title: '\u751f\u6210\u56fe\u7247\u5931\u8d25', icon: 'none' })
+          uni.showToast({ title: '生成图片失败', icon: 'none' })
         }
       }, this)
     }
@@ -238,7 +494,7 @@ export default {
 }
 .poster-canvas {
   width: 500px;
-  height: 700px;
+  height: 750px;
   border-radius: 16rpx;
 }
 .poster-actions {