分享到朋友圈

src/components/Detail.vue

@@ -27,7 +27,8 @@
                 <p>点击右上角“···”进行分享</p>
             </div>
             <div class="shareBox" v-show="shareOnoff2" @click="closeShare">
-                <img :src="shareCode" alt="" style="width: 100%;">
+                <img :src="shareCode" class="share-img" alt="" >
+                <div class="share-tips">长按图片保存到相册，分享到朋友圈</div>
             </div>
             <div class="shareBox" v-show="jinzhidianzan" @click="closeJinzhi">
                 <div class="jinzhi"></div>
@@ -111,7 +112,7 @@ export default {
     },
     activated() {
         // this.hiddenBar();
-
+        // this.getCanvasDrawImage()
         this.kongtuLock = false;
 
         let id = this.$route.query.id;
@@ -349,6 +350,29 @@ export default {
                 }
             });
         },
+        getCanvasDrawImage(img) {
+            var _this = this
+            var canvas = document.createElement('canvas')
+            canvas.width = '960'
+            canvas.height = '1338'
+            var ctx=canvas.getContext("2d")
+            var img = new Image()
+           
+            img.src = require('../../static/shareBg.png')
+            
+            img.onload = function (params) {
+                ctx.drawImage(img, 0,0,960, 1338)
+                var img2 = new Image()
+                img2.src = img || require('../../static/upload.jpg')
+                img2.onload = function (param) {  
+                    ctx.drawImage(img2, 293,640,377, 377)
+                     _this.shareCode = canvas.toDataURL()
+                     _this.shareOnoff2 = true
+                }
+               
+                // document.body.appendChild(canvas)
+            }
+        },
         share() {
             var _this = this
             alert('share')
@@ -359,19 +383,12 @@ export default {
                             scene: _this.$route.query.id,
                             pages: 'pages/webview/webview'
                         }).then(res => {
-                            _this.shareCode = res.data.data.weixinCode
+                            // _this.shareCode = res.data.data.weixinCode
+                            _this.getCanvasDrawImage(res.data.data.weixinCode)
                             _this.shareOnoff2 = true
                             alert(JSON.stringify(res.data.data))
                         })
                     } else {
-                        axios.post('/weixin/getcode', {
-                            scene: _this.$route.query.id,
-                            pages: 'pages/webview/webview'
-                        }).then(res => {
-                            _this.shareCode = res.data.data.weixinCode
-                            _this.shareOnoff2 = true
-                            alert(JSON.stringify(res.data.data))
-                        })
                         _this.shareOnoff = true;
                     }
             })
@@ -686,9 +703,24 @@ export default {
         bottom: 0;
         left: 0;
         right: 0;
+        width: 100%;
         background: rgba(0, 0, 0, 0.8);
         z-index: 100000;
-
+        .share-img {
+            width: 500px;
+            margin: 0 auto;
+            display: block;
+            margin-top: 20vh;
+        }
+        .share-tips {
+            width: 500px;
+            padding-top: 30px;
+            color: white;
+            margin: 0 auto;
+            display: block;
+            text-align: center;
+            font-size: 20px;
+        }
         p {
             color: white;
             font-size: 34px;