fix:修复分享错误

pages/activity/invite-user/fission.vue

@@ -201,9 +201,9 @@
 
 <script>
 
-import { Toast } from 'vant';
-// import NativeShare from 'nativeshare';
-// import { fileKeyToUrl } from '@/plugins/file-center.js';
+import { Toast, Dialog } from 'vant';
+import NativeShare from 'nativeshare';
+import { fileKeyToUrl } from '@/plugins/file-center.js';
 
 
 export default {
@@ -273,12 +273,12 @@ export default {
       preRanking: 0,
       userType: 1,
       received: 0,
-      // shareInfo: {
-      //   title: '双子星云手机',
-      //   content: `免费领取一台全能云手机！`,
-      //   shareUrl: '',
-      //   shareImage: ''
-      // },
+      shareInfo: {
+        title: '双子星云手机',
+        desc: `免费领取一台全能云手机！`,
+        link: '',
+        imgUrl: ''
+      },
       showShare: false,
       returnContent: [{
         img: require('@/assets/image/activity/invite-user/card-1.png'),
@@ -303,7 +303,6 @@ export default {
     try {
       this.token = this.$route.query.token;
       await this.getActiveInfo();
-      this.$native.setShareInfo(this.shareInfo);
       await this.shareCanReceiveCloudPhone();
       await Promise.all([
         this.getActivityRules(),
@@ -364,34 +363,34 @@ export default {
     type() {
       return 2;
     },
-    shareUrl() {
-      return (
-        location.origin +
-        this.$router.resolve({
-          path: '/activity/invite-user/register-fission/',
-          query: {
-            invitationUserName: this.data.inviteUserName,
-            activityId: this.data.activityId,
-            type: this.type,
-          },
-        }).href
-      );
-    },
-    shareInfo() {
-      if (this.$userAgent.isMiniProgram) {
-        return {
-          title: '双子星APP',
-          path: '/pages/home/home',
-          imgUrl: location.origin + require('~/assets/image/logo.png'),
-        };
-      }
-      return {
-        title: '双子星云手机',
-        desc: `畅玩“原神”“幻塔”，24小时在线，不限下载流量的手机`,
-        link: this.shareUrl,
-        imgUrl: location.origin + require('~/assets/image/logo.png'),
-      };
-    }
+    // shareUrl() {
+    //   return (
+    //     location.origin +
+    //     this.$router.resolve({
+    //       path: '/activity/invite-user/register-fission/',
+    //       query: {
+    //         invitationUserName: this.data.inviteUserName,
+    //         activityId: this.data.activityId,
+    //         type: this.type,
+    //       },
+    //     }).href
+    //   );
+    // },
+    // shareInfo() {
+    //   if (this.$userAgent.isMiniProgram) {
+    //     return {
+    //       title: '双子星APP',
+    //       path: '/pages/home/home',
+    //       imgUrl: location.origin + require('~/assets/image/logo.png'),
+    //     };
+    //   }
+    //   return {
+    //     title: '双子星云手机',
+    //     desc: `畅玩“原神”“幻塔”，24小时在线，不限下载流量的手机`,
+    //     link: this.shareUrl,
+    //     imgUrl: location.origin + require('~/assets/image/logo.png'),
+    //   };
+    // }
   },
   mounted() {
     this.makePoint('activity_Share_PV')
@@ -403,11 +402,27 @@ export default {
       try {
         const res = await this.$axios.$get('/resources/register/send/cloud/phone/shareCanReceiveCloudPhone', {}, { headers: { Authorization: this.token } });
         this.received = res.data.received
-        // this.shareInfo.title = res.data.title
-        // this.shareInfo.content = res.data.content
-        // this.shareInfo.shareUrl = res.data.url
-        // this.shareInfo.shareImage = fileKeyToUrl(res.data.imgUrl)
-        // this.$native.setShareInfo(this.shareInfo);
+        this.shareInfo.title = res.data.title
+        this.shareInfo.desc = res.data.content
+        this.shareInfo.link = res.data.url
+        this.shareInfo.imgUrl = fileKeyToUrl(res.data.imgUrl)
+        this.$native.setShareInfo(this.shareInfo);
+      } catch (err) {
+        Toast({
+          message: err.message,
+          position: 'top'
+        });
+      }
+    },
+    async shareReceiveCloudPhone() {
+      try {
+        const res = await this.$axios.$post('/resources/register/send/cloud/phone/shareReceiveCloudPhone', {}, { headers: { Authorization: this.token } });
+        Dialog.alert({
+          message: res.msg,
+        }).then(() => {
+          this.showShare = false
+        });
+        this.addUserVisit(7);
       } catch (err) {
         Toast({
           message: err.message,
@@ -492,7 +507,7 @@ export default {
         this.codeIsLoading = false;
       }
     },
-    async share() {
+    share() {
       if (this.data.status !== 1) {
         if (this.data.status === 0) {
           Toast({
@@ -530,13 +545,37 @@ export default {
         // app环境
         this.$native.share(this.shareInfo);
         console.log(this.shareInfo,'xxxx');
-        this.makePoint('activity_Share_分享好友按钮');
+        // this.makePoint('activity_Share_分享好友按钮');
       } else {
         // 浏览器环境
-        await this.$native.clipboard.writeText(`${this.shareUrl} 双子星云手机`);
-        // throw new Error('1231');
-        this.$toast.success('链接复制成功');
-        this.makePoint('activity_Share_复制链接');
+        const nativeShare = new NativeShare()
+        nativeShare.setShareData({
+          icon: this.shareInfo.imgUrl,
+          link: this.shareInfo.link,
+          title: this.shareInfo.content,
+          desc: this.shareInfo.title,
+          success: () => {
+            this.shareReceiveCloudPhone()
+          },
+          fail: () => {
+            Toast({
+              message: '分享失败',
+              position: 'center'
+            })
+          }
+        })
+        try {
+          nativeShare.call('wechatTimeline')
+        } catch (err) {
+          Toast({
+            message: '您的浏览器不支持分享功能，请下载app使用！',
+            position: 'center',
+            duration: 3000
+          })
+          setTimeout(() => {
+            window.open('https://www.androidscloud.com/', '_self');
+          }, 3000)
+        }
       }
     },
     makePoint(positionButton) {

pages/activity/invite-user/register-fission.vue

@@ -1,36 +1,22 @@
 <template>
   <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
+    <div class="w245h244">
+      <img class="download-btn" src="~/assets/image/activity/invite-user/fission/btn.png" alt="" @click="download">
+    </div>
+    <video class="w325h183" webkit-playsinline="true" playsinline="true" x5-playsinline autoplay muted controls src="~/assets/image/activity/invite-user/fission/20230322-193505.mp4"></video>
     <div class="box1">
-      <validation-observer ref="observer" class="mlr10" slim>
-        <v-form @submit.prevent="submit()">
+      <!-- <validation-observer ref="observer" class="mlr10" slim>
+        <v-form>
           <validation-provider v-slot="{ errors }" ref="providerPhome" name="手机号码" rules="phone" slim>
             <div style="display: flex;">
               <div class="label-item">
                 手机号
               </div>
-              <v-text-field v-model="form.phone" v-mask="$mask.phone" background-color="#F6F6F6" name="phone" required :error-messages="errors" placeholder="请输入11位手机号" solo type="tel" flat maxlength="11" @blur="makePoint(form.channelCode + '_Promotion _activities_输入手机号')" />
+              <v-text-field v-model="form.phone" v-mask="$mask.phone" background-color="#f6f6f6" name="phone" required :error-messages="errors" placeholder="请输入11位手机号" solo type="tel" flat maxlength="11" @input="submit" @focus="addUserVisit(19)" />
             </div>
           </validation-provider>
-          <validation-provider v-slot="{ errors }" name="短信验证码" rules="code" slim>
-            <div style="display: flex;">
-              <div class="label-item">
-                验证码
-              </div>
-              <v-text-field ref="code" v-model="form.code" v-mask="'######'" class="w220" background-color="#F6F6F6" label="" :error-messages="errors" name="code" maxlength="6" required placeholder="请输入验证码" solo flat type="tel" @blur="makePoint(form.channelCode + '_Promotion _activities_输入验证码')">
-                <template #append>
-                  <v-btn :loading="codeSending" :disabled="codeTime > 0" small depressed color="#1E3ADE" plain class="text-base" @click="sendSmsCode()">
-                    <template v-if="codeTime > 0">{{ codeTime }}s后重新获取</template>
-                    <template v-else>获取验证码</template>
-                  </v-btn>
-                </template>
-              </v-text-field>
-            </div>
-          </validation-provider>
-          <div class="submit-btn-box">
-            <v-btn type="submit" :loading="submitting" class="submit-btn" rounded>注册并下载APP</v-btn>
-          </div>
         </v-form>
-      </validation-observer>
+      </validation-observer> -->
     </div>
   </v-container>
 </template>
@@ -44,6 +30,7 @@ export default {
   name: 'RegisterForInvite',
   data() {
     return {
+      current: 1,
       form: {
         phone: '',
         code: '',
@@ -70,28 +57,50 @@ export default {
       this.client = 7;
     }
   },
-  head: {
-    title: '注册',
+  head() {
+    return {
+      title: '老板疯了，云手机真免费，不领白不领，活动随时结束',
+      meta: [{
+        property: 'og:image',
+        content: 'https://file.phone.androidscloud.com:8121/document/newFile/download/0/395588c910f2465c9bea?fileKey=LowLevelMultipartUpload_28965683600482304088'
+      },
+      {
+        property: 'og:description',
+        content: '老板疯了，云手机真免费，不领白不领，活动随时结束'
+      },
+      {
+        property: 'og:title',
+        content: '唔即云云手机'
+      }]
+    }
   },
   computed: {
     type() {
       return 2;
     },
+    url() {
+      return `${location.origin}/cloud/phone/web/#/pages/register/index?invitationUserName=${this.form.invitationUserName}&activityId=${this.form.activityId}&invitationType=5`
+    }
   },
   mounted() {
     this.makePoint('activity_download_PV')
     this.makePoint('activity_download_UV')
+    this.addUserVisit(16)
   },
   methods: {
+    download() {
+      window.open(this.url, '_self');
+      this.addUserVisit(18)
+    },
     maskPhone(value) {
       return [/\d/, /\d/];
     },
     makePoint(positionButton) {
-      this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
+      this.$axios.$post('/publics/v5/buriedPointRecord/reportRecords', [
         {
           client: this.client,
           eventCode: '28_分享活动',
-          userName: '',
+          userName: this.form.invitationUserName,
           positionButton,
           operationTime: this.getCurrentTime(),
           phoneNumber: '',
@@ -120,29 +129,35 @@ export default {
       }
     },
     async submit() {
+      if (this.form.phone.length < 11 || !/^((13[0-9])|(14[5|7])|(15([0-9]))|(16[0134689])|(17[2-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.form.phone)) {
+        return
+      }
       try {
-        this.makePoint('activity_Share_注册并下载app按钮')
         this.submitting = true;
         const valid = await this.$refs.observer.validate();
         if (valid) {
           this.$tongji.trackEvent('活动', '注册', '', 0);
           await registerForInvite(this, this.form);
           Toast({
-            message: '注册成功',
-            position: 'top',
+            message: '绑定成功',
             duration: 3000
           });
-          this.openSzxApp();
+          setTimeout(() => {
+            window.open('http://wuji.androidscloud.com', '_self');
+          }, 3000)
         }
+        this.addUserVisit(20);
       } catch (error) {
         Toast({
           message: error.message,
-          position: 'top',
           duration: 3000
         });
-        if(error.response.data.status === 1114) {
-          this.openSzxApp();
+        if (error.response.data.status === 1114) {
+          setTimeout(() => {
+            window.open('http://wuji.androidscloud.com', '_self');
+          }, 3000)
         }
+        this.addUserVisit(20);
       } finally {
         this.submitting = false;
       }
@@ -170,7 +185,6 @@ export default {
           );
           Toast({
             message: res.msg,
-            position: 'top',
             duration: 3000
           });
         }
@@ -183,20 +197,78 @@ export default {
         this.codeSending = false;
       }
     },
+    addUserVisit(accessType) {
+      this.$axios.$post('/user/v5/operateApi/addUserVisit', {
+        accessType,
+        loginType: 2,
+        userName: this.form.invitationUserName
+      });
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.w325h183 {
+  width: 325px;
+  height: 183px;
+  border-radius: 19px;
+  position: absolute;
+  top: 481px;
+  left: calc(50% - 162.5px);
+  background: #F5F5F5;
+}
+
+.w245h244 {
+  margin: 238px auto 0;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .download-btn {
+    width: 226px;
+    height: 82px;
+    position: absolute;
+    left: calc(50% - 113px);
+  }
+}
+
+.w282h239 {
+  width: 282px;
+  height: 239px;
+  display: block;
+  position: absolute;
+  top: 229px;
+  right: 21px;
+  animation: xing 2s infinite;
+}
+
+@keyframes xing {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  75% {
+    transform: scale(1.1);
+  }
+}
+
 .mlr10 {
-  margin: 4px;
-  border: 1px solid #FDAF7D;
-  border-radius: 18px 18px 18px 18px;
   overflow: hidden;
   width: 344px;
-  height: 227px;
+  padding: 0 10px;
   box-sizing: border-box;
-  padding: 25px 19px 23px 18px;
 }
 
 .register-for-invite {
@@ -205,7 +277,7 @@ export default {
   // background-position-y: -44px;
   overflow: hidden;
   padding-bottom: 30px;
-  min-height: 880px;
+  min-height: 872px;
 
   &.type-1 {
     background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
@@ -221,12 +293,10 @@ export default {
 }
 
 .box1 {
-  margin: 265px auto 0;
-  width: 350px;
-  height: 234px;
-  background: #FFFFFF;
-  border-radius: 18px 18px 18px 18px;
-  overflow: hidden;
+  position: absolute;
+  bottom: 32px;
+  left: calc(50% - 172px);
+  width: 344px;
 }
 
 .submit-btn-box {
@@ -238,22 +308,23 @@ export default {
 .submit-btn {
   display: block;
   width: 308px !important;
-  height: 40px !important;
+  height: 30px !important;
   background: linear-gradient(0deg, #F34927 0%, #FDAF7D 100%);
   border-radius: 20px;
   text-align: center;
   font-size: 18px;
   font-weight: 500;
   color: #FFFFFF !important;
-  line-height: 40px;
+  line-height: 30px;
+  margin-top: 10px;
 }
 
 .label-item {
   width: 64px;
   font-size: 14px;
   color: #333;
-  height: 12.8vw;
-  line-height: 12.8vw;
+  height: 49px;
+  line-height: 49px;
   text-align: center;
 }