分享

src/components/auction/Share.vue

@@ -0,0 +1,135 @@
+<template>
+    <van-overlay :show="show" @click="show = false" z-index="99">
+        <div class="wrapper" @click.stop>
+            <img :src="img" class="share-img" v-if="img" alt="" />
+            <div class="share-img" ref="post" v-else>
+                <img src="@assets/shareImg.png" alt="" />
+                <vue-qrcode :value="url" :options="{ width: 300, margin: 2 }" class="code"></vue-qrcode>
+            </div>
+            <div class="tips">长按图片可保存</div>
+            <img src="@assets/icon_fenxiang_close.png" @click="show = false" alt="" class="close" />
+        </div>
+    </van-overlay>
+
+    <div class="share" @click="init">
+        <img src="@assets/icon_share_weixin3.png" alt="" />
+        <div>邀请</div>
+    </div>
+</template>
+
+<script>
+import vueQrcode from '@chenfengyuan/vue-qrcode';
+import html2canvas from 'html2canvas';
+export default {
+    components: { vueQrcode },
+    data() {
+        return {
+            show: false,
+            img: ''
+        };
+    },
+    computed: {
+        url() {
+            return '233444';
+        }
+    },
+    methods: {
+        init() {
+            this.show = true;
+            if (!this.img) {
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.loadImg();
+                    }, 1000);
+                });
+            }
+        },
+        loadImg() {
+            html2canvas(this.$refs.post, {
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: null,
+                scale: 3
+            }).then(canvas => {
+                this.$toast.clear();
+                this.img = canvas.toDataURL('image/png');
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.share-img {
+    position: relative;
+    img {
+        width: 80vw;
+        display: block;
+    }
+
+    .code {
+        position: absolute;
+        bottom: 24vw;
+        width: 26vw !important;
+        height: 26vw !important;
+        border-radius: 6px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+.tips {
+    font-size: 13px;
+    color: #939599;
+    line-height: 22px;
+    margin-top: 28px;
+}
+
+.close {
+    width: 40px;
+    height: 40px;
+    margin-top: 20px;
+}
+
+.share {
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    background: #3ab200;
+    z-index: 90;
+    border-radius: 44px;
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+    right: 16px;
+    bottom: 100px;
+
+    img {
+        width: 24px;
+        height: 24px;
+        display: block;
+    }
+    div {
+        font-size: 10px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 14px;
+        transform: translateY(-3px);
+    }
+}
+
+.share-img {
+    width: 80vw;
+}
+</style>

src/views/auction/Home.vue

@@ -50,6 +50,8 @@
             />
         </van-list>
     </van-pull-refresh>
+
+    <auction-share></auction-share>
 </template>
 
 <script>
@@ -65,6 +67,7 @@ SwiperCore.use([Pagination, Autoplay]);
 import list from '../../mixins/list';
 import auctionInfo from '../../components/auction/info.vue';
 import banner from '../../mixins/banner';
+import auctionShare from '../../components/auction/Share.vue';
 export default {
     name: 'auctionHome',
     mixins: [list, banner],
@@ -72,7 +75,8 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        auctionInfo
+        auctionInfo,
+        auctionShare
     },
     data() {
         return {