分享

src/main/comos/src/views/account/Register.vue

@@ -89,6 +89,7 @@
                 placeholder="请输入邀请码"
                 v-model="form.inviteCode"
                 :disabled="!!$store.state.inviteCode"
+                v-if="!invitor"
             >
                 <template #left-icon>
                     <img :src="require('@assets/svgs/login_icon_yao qingma.svg')" class="icon" />
@@ -122,9 +123,13 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import phone from '../../mixins/phone';
 export default {
     mixins: [phone],
+    computed: {
+        ...mapState(['invitor'])
+    },
     data() {
         return {
             active: 'phone',
@@ -133,11 +138,17 @@ export default {
                 password: '',
                 password2: '',
                 code: '',
-                inviteCode: this.$store.state.inviteCode || ''
+                inviteCode: this.$store.state.inviteCode || '',
+                invitor: ''
             },
             checked: false
         };
     },
+    mounted() {
+        if (this.invitor) {
+            this.form.invitor = this.invitor;
+        }
+    },
     methods: {
         sendPhone() {
             this.$refs.form.validate('手机号码').then(() => {

src/main/comos/src/views/user/Share.vue

@@ -1,9 +1,12 @@
 <template>
     <div class="page">
+        <div class="share-img">
+            <img src="../../assets/share1.png" alt="" />
+        </div>
         <div class="share-btn">
-            <van-button type="primary" round block>立即邀请</van-button>
+            <van-button type="primary" @click="share" round block>立即邀请</van-button>
         </div>
-        <div class="code">
+        <!-- <div class="code">
             <div class="code-top">
                 <div class="text1">我的邀请码</div>
                 <div class="text2">7474448585955505057578578</div>
@@ -12,21 +15,21 @@
             <div class="code-btn">
                 <van-button type="primary" round block>领取奖励</van-button>
             </div>
-        </div>
+        </div> -->
 
         <div class="panel">
             <div class="panel-title">我的邀请</div>
             <div class="panel-box">
                 <div class="panel-item">
                     <div class="text1">
-                        <span>3</span>
+                        <span>{{ userInfo.inviteAirDrop || 0 }}</span>
                         <small>个</small>
                     </div>
                     <div class="text2">已获得藏品</div>
                 </div>
                 <div class="panel-item">
                     <div class="text1">
-                        <span>1</span>
+                        <span>{{ userInfo.inviteNum || 0 }}</span>
                         <small>人</small>
                     </div>
                     <div class="text2">邀请好友</div>
@@ -40,11 +43,69 @@
             2.在活动期间，参与活动的用户（以下称用“用户”“您”） 每邀请一位新用户（“新用户”系指从未注册过“第九空
             间”的用户，是否为新用户以平台判断为准），在注册当 日绑定您的邀请码，在三个工作日后您可获得平台空投。
         </div>
+
+        <van-overlay :show="show" @click="show = false">
+            <div class="wrapper">
+                <img :src="img" class="wrapper-img" v-if="img" alt="" />
+                <div class="wrapper-box" v-else ref="post" @click.stop>
+                    <img class="share2" src="../../assets/share2.jpg" alt="" />
+                    <vue-qrcode :value="url" :options="{ width: 70, margin: 3 }" class="share-code"></vue-qrcode>
+                    <div class="title">国内领先的泛文娱数字藏品集换平台</div>
+                </div>
+
+                <img src="../../assets/close.png" alt="" class="close" />
+            </div>
+        </van-overlay>
     </div>
 </template>
 
 <script>
-export default {};
+import { mapState } from 'vuex';
+import resolveUrl from 'resolve-url';
+import vueQrcode from '@chenfengyuan/vue-qrcode';
+import html2canvas from 'html2canvas';
+export default {
+    computed: {
+        ...mapState(['userInfo']),
+        url() {
+            return resolveUrl(this.$baseUrl, 'cosmos/register?invitor=' + this.userInfo.id);
+        }
+    },
+    components: {
+        vueQrcode
+    },
+    data() {
+        return {
+            show: false,
+            img: ''
+        };
+    },
+    methods: {
+        share() {
+            this.show = true;
+            if (!this.img) {
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
+                setTimeout(() => {
+                    this.loadImg();
+                }, 500);
+            }
+        },
+        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>
@@ -144,4 +205,58 @@ export default {};
     color: #939599;
     margin: 25px 16px;
 }
+
+.share-img {
+    padding: 19px 16px 0;
+    img {
+        width: 100%;
+    }
+}
+.wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+}
+.share2 {
+    width: 300px;
+    height: 364px;
+    display: block;
+}
+.share-code {
+    position: absolute;
+    bottom: 52px;
+    right: 7px;
+    border-radius: 6px;
+}
+
+.wrapper-box {
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+    .title {
+        font-size: 16px;
+        line-height: 24px;
+        color: #26273c;
+        opacity: 1;
+        text-align: center;
+        padding: 9px;
+        background-color: #fff;
+    }
+}
+
+.wrapper-img {
+    width: 300px;
+    display: block;
+}
+
+.close {
+    width: 40px;
+    height: 40px;
+    display: block;
+    margin-top: 12px;
+}
 </style>