Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/nine-space/src/components/Post.vue

@@ -2,10 +2,12 @@
     <div ref="share">
         <van-overlay :show="show" @click="show = false" z-index="99">
             <div class="wrapper">
-                <div class="img" ref="wrap"></div>
+                <div class="img" ref="wrap">
+                    <img :src="img" v-if="img" alt="" />
+                </div>
                 <div class="content" v-if="!img" ref="post" @click.stop>
                     <!-- @load="loadImg" -->
-                    <van-image :src="banners" width="80vw" height="80vw" fit="cover" />
+                    <img :src="detailImg" class="detailImg" />
                     <div class="info">
                         <div class="name van-multi-ellipsis--l2">
                             {{ info.name }}
@@ -23,7 +25,7 @@
                     </div>
                     <div class="minter">
                         <div class="minter-content">
-                            <van-image width="30" height="30" round :src="info.minterAvatar" fit="cover" />
+                            <van-image width="30" height="30" round :src="userImg" fit="cover" />
                             <div class="text1">{{ info.minter }}</div>
                             <div class="text2">铸造者</div>
                         </div>
@@ -46,13 +48,16 @@ import vueQrcode from '@chenfengyuan/vue-qrcode';
 import html2canvas from 'html2canvas';
 import product from '../mixins/product';
 const path = require('path');
+import resolveUrl from 'resolve-url';
 export default {
     mixins: [product],
     props: {
         info: {
             type: Object,
             default: () => {
-                return {};
+                return {
+                    pic: []
+                };
             }
         },
         pageUrl: {
@@ -64,15 +69,24 @@ export default {
         return {
             show: false,
             share: null,
-            img: false
+            img: '',
+            detailImg: '',
+            userImg: ''
         };
     },
     computed: {
         url() {
-            return path.resolve(this.$baseUrl, this.pageUrl + '?id=' + this.info.id);
+            if (this.isLogin) {
+                return resolveUrl(
+                    this.$baseUrl,
+                    this.pageUrl + '?id=' + this.info.id + '&userId=' + this.$store.state.userInfo.id
+                );
+            } else {
+                return resolveUrl(this.$baseUrl, this.pageUrl + '?id=' + this.info.id);
+            }
         },
         banners() {
-            return this.info.pic[0].url || [];
+            return this.getImg(this.changeImgs(this.info.pic || []));
         }
     },
     components: {
@@ -81,27 +95,52 @@ export default {
     mounted() {},
     methods: {
         init() {
-            console.log(this.info.pic[0].url);
+            this.show = true;
             if (!this.img) {
                 this.$toast.loading({
                     message: '加载中...',
                     forbidClick: true
                 });
+                this.$nextTick(() => {
+                    this.getImgBase64(this.banners, 'detailImg');
+                    this.getImgBase64(this.info.minterAvatar, 'userImg');
+                    setTimeout(() => {
+                        this.loadImg();
+                    }, 100);
+                });
             }
-
-            this.show = true;
+        },
+        loadImg() {
+            setTimeout(() => {
+                html2canvas(this.$refs.post, {
+                    useCORS: true,
+                    allowTaint: true,
+                    backgroundColor: null,
+                    scale: 3
+                }).then(canvas => {
+                    this.$toast.clear();
+                    // this.$refs.wrap.appendChild(canvas);
+                    this.img = canvas.toDataURL('image/png');
+                });
+            }, 100);
+        },
+        getImgBase64(img2, key) {
+            let img = new Image();
+            img.src = img2;
+            img.setAttribute('crossOrigin', 'anonymous');
+            img.onload = () => {
+                this[key] = this.image2Base64(img);
+            };
+        },
+        image2Base64(img) {
+            let canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            let ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, img.width, img.height);
+            let dataURL = canvas.toDataURL('image/png');
+            return dataURL;
         }
-        // loadImg() {
-        //     setTimeout(() => {
-        //         html2canvas(this.$refs.post).then(canvas => {
-        //             this.$toast.clear();
-        //             this.$refs.wrap.appendChild(canvas);
-        //             this.$nextTick(() => {
-        //                 this.img = true;
-        //             });
-        //         });
-        //     }, 100);
-        // }
     }
 };
 </script>
@@ -121,9 +160,8 @@ export default {
 }
 
 .img {
-    /deep/ canvas {
-        overflow: hidden;
-        border-radius: 8px;
+    img {
+        width: 80vw;
         display: block;
     }
 }
@@ -216,4 +254,10 @@ export default {
         display: block;
     }
 }
+
+.detailImg {
+    width: 80vw;
+    height: 80vw;
+    display: block;
+}
 </style>

src/main/nine-space/src/views/Submit.vue

@@ -54,6 +54,7 @@
 
 <script>
 const path = require('path');
+import resolveUrl from 'resolve-url';
 import { add } from 'mathjs';
 import product from '../mixins/product';
 let inWeixin = /micromessenger/i.test(navigator.userAgent);
@@ -154,7 +155,7 @@ export default {
                     this.$router.replace('/submit?orderId=' + res.id);
                     this.$nextTick(() => {
                         if (this.payType === 'ALIPAY') {
-                            document.location.replace(path.resolve(this.$baseUrl, 'payOrder/alipay?id=' + res.id));
+                            document.location.replace(resolveUrl(this.$baseUrl, 'payOrder/alipay?id=' + res.id));
                         } else if (this.payType === 'WEIXIN') {
                             if (this.inWeixin) {
                                 this.$toast.loading('加载中');
@@ -183,9 +184,7 @@ export default {
                                         });
                                     });
                             } else {
-                                document.location.replace(
-                                    path.resolve(this.$baseUrl, 'payOrder/weixin_h5?id=' + res.id)
-                                );
+                                document.location.replace(resolveUrl(this.$baseUrl, 'payOrder/weixin_h5?id=' + res.id));
                             }
                         }
                     });