feat：完成一刀切被邀请人相关逻辑

.env.production

@@ -25,3 +25,5 @@ SZX_APP_ANDROID_SCHEME = "opengeminiapp"
 
 QIYUKF_TEMPLATE_ID = "6635862"
 
+IMG_URL = "https://www.androidscloud.com:9001/cloud/picture/assist"
+

.env.test

@@ -24,3 +24,5 @@ SZX_APP_IOS_SCHEME = "shuangzixingiOSAppTest"
 SZX_APP_ANDROID_SCHEME = "opengeminiapp"
 
 QIYUKF_TEMPLATE_ID = "6635862"
+
+IMG_URL = "http://gntest.phone.androidscloud.com:9002/cloud/picture/assist"

.env.uat

@@ -25,3 +25,5 @@ SZX_APP_IOS_SCHEME = "shuangzixingiOSAppTest"
 SZX_APP_ANDROID_SCHEME = "opengeminiapp"
 
 QIYUKF_TEMPLATE_ID = "6635862"
+
+IMG_URL = "https://gntest.phone.androidscloud.com:9001/clouduat/picture/assist"

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^0.27.2",
         "bignumber.js": "^9.1.2",
         "callapp-lib": "^3.5.2",
+        "clipboard": "^2.0.11",
         "clipboard-polyfill": "^4.0.0-rc1",
         "clipboardy": "^3.0.0",
         "copy-to-clipboard": "^3.3.2",
@@ -6187,6 +6188,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/clipboard-polyfill": {
       "version": "4.0.0-rc1",
       "resolved": "https://registry.npmmirror.com/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
@@ -7441,6 +7452,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -10137,6 +10153,14 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -17466,6 +17490,11 @@
       "resolved": "https://registry.npmmirror.com/secure-compare/-/secure-compare-3.0.1.tgz",
       "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw=="
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
@@ -19097,6 +19126,11 @@
       "resolved": "https://registry.npmmirror.com/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A=="
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz",
@@ -26955,6 +26989,16 @@
       "resolved": "https://registry.npmmirror.com/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboard-polyfill": {
       "version": "4.0.0-rc1",
       "resolved": "https://registry.npmmirror.com/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
@@ -27993,6 +28037,11 @@
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -30065,6 +30114,14 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -36114,6 +36171,11 @@
       "resolved": "https://registry.npmmirror.com/secure-compare/-/secure-compare-3.0.1.tgz",
       "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw=="
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
@@ -37446,6 +37508,11 @@
       "resolved": "https://registry.npmmirror.com/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A=="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz",

pages/claimCloudPhone/_type.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout @goBack="goBack">
+  <layout @goBack="goBack" :isNavBar="isNavBar">
     <!-- type 1（砍一刀） 2（邀请好友） 3 （失败） 4 （成功）都是邀请人  0 是被邀请人 -->
     <bargainingAssistance
       ref="bargainingAssistance"
@@ -8,6 +8,7 @@
       :getSystemTime="getSystemTime"
       :leaveFun="leaveFun"
       :wxIntercept="wxIntercept"
+      :inviteeData="inviteeData"
     />
   </layout>
 </template>
@@ -27,9 +28,23 @@ export default {
     bargainingAssistance,
   },
   data() {
-    return {};
+    return {
+      inviteeData: {},
+      operateActivityId: '',
+      isNavBar: true
+    };
+  },
+  mounted() {
+    const { invitationUserName, operateActivityId, userLaunchId } =
+      this.$route.query;
+    if (invitationUserName && operateActivityId && userLaunchId) {
+      this.inviteeData.invitationUserName = window.atob(invitationUserName);
+      this.inviteeData.operateActivityId = window.atob(operateActivityId);
+      this.inviteeData.userLaunchId = window.atob(userLaunchId);
+    }
+    this.operateActivityId = +localStorage.getItem('auth.operateActivityId')
+    this.isNavBar = !(+localStorage.getItem('auth.inviteeNum'))
   },
-  mounted() {},
   methods: {
     goBack() {
       const { bargainingStatus } = this.$refs.bargainingAssistance.info;

pages/claimCloudPhone/agreement.vue

@@ -0,0 +1,61 @@
+<template>
+  <layout :bgImgName="null" :bgHeight="null" :bgColor="null" @goBack="goBack">
+    <div v-html="html"></div>
+  </layout>
+</template>
+
+<script>
+import layout from './components/layout.vue';
+export default {
+  name: 'agreement',
+  data() {
+    return {
+      html: '',
+    };
+  },
+  components: {
+    layout,
+  },
+  mounted() {
+    this.getAgreement();
+  },
+  methods: {
+    getAgreement() {
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0,
+      });
+      this.$axios
+        .$get('public/v4/agreement/content', {
+          params: {
+            agreementCoding: this.$route.query.agreementCoding,
+          },
+        })
+        .then((res) => {
+          if (res.success) {
+            const html = res.data.content;
+            const rx = /<body[^>]*>([\s\S]+?)<\/body>/i;
+            let m = rx.exec(html);
+            if (m) {
+              m = m[1];
+            }
+            this.html = m;
+          }
+        })
+        .catch((error) => {
+          this.$toast(error.message);
+        })
+        .finally(() => {
+          this.$toast.clear();
+        });
+    },
+    goBack() {
+        sessionStorage.setItem('isAgreementBool', 1)
+        this.$router.go(-1)
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout @goBack="leaveFun">
+  <layout @goBack="leaveFun" :isNavBar="isNavBar">
     <div class="choose-cloud-phone">
       <div class="choose-cloud-phone_info">
         <div class="choose-cloud-phone_info-name">亲爱的用户</div>
@@ -64,9 +64,11 @@ export default {
       packageTotal: 0,
       loading: false,
       listLoading: false,
+      isNavBar: true
     };
   },
   mounted() {
+    this.isNavBar = !(+localStorage.getItem('auth.inviteeNum'))
     _self = this;
     // 用来监听微信返回上一页的
     const { exit } = this.$route.query;
@@ -122,27 +124,7 @@ export default {
     load() {
       this.pageNum++;
       this.getRenewalPackage(false);
-    },
-    goBack() {
-      // // 是否是APP
-      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
-      // const isAndroid = this.$userAgent.isAndroid;
-      // const isWx = this.$userAgent.isWx;
-      // if (isApp) {
-      //   if (isAndroid) {
-      //     window.native.backClick();
-      //   } else {
-      //     window.webkit.messageHandlers.appGoBack.postMessage();
-      //   }
-      // } else {
-      //   if (isWx) {
-      //     return;
-      //   }
-      //   uni.navigateBack({
-      //     delta: 1,
-      //   });
-      // }
-    },
+    }
   },
 };
 </script>

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -8,7 +8,7 @@
     </div>
     <!-- 被邀请人提示 -->
     <div v-else class="invitee-tips">
-      <div class="invitee-tips-user">用户01</div>
+      <div class="invitee-tips-user">用户</div>
       <div class="invitee-tips-text">
         亲，我在用双子星云手机，可以<span>24小时运行游戏/聊天/看视频</span>，双子星云手机已经帮我节省<span>10086小时</span>，我得任务全做完了，游戏升级哇哇快，现在官方活动领云机，麻烦帮我助力！
       </div>
@@ -16,7 +16,7 @@
     <!-- 砍价进度 -->
     <div class="bargaining-assistance-main">
       <!-- 被邀请人助力、邀请人砍价 -->
-      <template v-if="true">
+      <template v-if="!assistanceBool">
         <div class="package-name">
           <span> {{ info.phoneType }}{{ info.validityPeriod }}天</span>
         </div>
@@ -52,7 +52,9 @@
       <!-- 被邀请人点击助力之后领取手机的页面 -->
       <template v-else>
         <div class="invitee-to-claim">
-          <div class="invitee-to-claim_btn">免费领取</div>
+          <div class="invitee-to-claim_btn" @click="loginVisible = true">
+            免费领取
+          </div>
         </div>
       </template>
     </div>
@@ -204,17 +206,53 @@
     <van-dialog v-model="loginVisible" :showConfirmButton="false">
       <div class="login">
         <div class="login-title">双子星快捷登录</div>
-        <van-field placeholder="手机号" />
-        <van-field placeholder="验证码">
+        <van-field
+          placeholder="手机号"
+          v-model="laoginData.phone"
+          maxLength="11"
+          @input="laoginData.phone = laoginData.phone.replace(/\D/g, '')"
+        />
+        <van-field
+          placeholder="验证码"
+          v-model="laoginData.code"
+          @input="
+            laoginData.code = laoginData.code.replace(/[\u4e00-\u9fa5]/g, '')
+          "
+        >
           <template #button>
-            <div class="login-code">获取验证码</div>
+            <div
+              :class="[
+                'login-code',
+                {
+                  disabled:
+                    !agreementBool ||
+                    codeNumber !== '获取验证码' ||
+                    laoginData.phone.length < 11,
+                },
+              ]"
+              @click="getCode"
+            >
+              {{ codeNumber }}
+            </div>
           </template>
         </van-field>
-        <van-button color="#3666F2">登录</van-button>
+        <van-button
+          color="#3666F2"
+          :disabled="
+            !agreementBool ||
+            !laoginData.code ||
+            laoginData.phone.length < 11 ||
+            loginLoading
+          "
+          @click="login"
+        >
+          <template v-if="loginLoading"> 正在登录中... </template>
+          <template v-else> 登录 </template>
+        </van-button>
         <div class="login-agreement">
           <van-checkbox icon-size="16px" v-model="agreementBool">
             通过登录即可完成注册，成为我们的新用户登录后表示同意
-            <span>用户协议</span>
+            <span @click.stop="toAgreement">用户协议</span>
           </van-checkbox>
         </div>
       </div>
@@ -223,6 +261,7 @@
 </template>
 
 <script>
+import { sha256 } from 'js-sha256';
 import customProgress from './customProgress.vue';
 import loadList from '@/components/loadList';
 import { fileKeyToUrl } from '@/plugins/file-center.js';
@@ -254,6 +293,12 @@ export default {
         return () => {};
       },
     },
+    inviteeData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -271,6 +316,14 @@ export default {
       info: {}, // 砍价相关信息
       bargainingAmount: '', // 砍价金额
       systemTime: '', // 系统时间
+      assistanceBool: false, // 是否触发助力
+      laoginData: {
+        // 被邀请人登录信息
+        phone: '',
+        code: '',
+      },
+      codeNumber: '获取验证码',
+      loginLoading: false,
     };
   },
   components: {
@@ -278,21 +331,31 @@ export default {
     loadList,
   },
   mounted() {
-    console.log(process.env.API_URL);
+    if (sessionStorage.getItem('isAgreementBool')) {
+      this.assistanceBool = true;
+      this.loginVisible = true;
+      this.laoginData.phone = sessionStorage.getItem('invitedPhone');
+      this.laoginData.code = sessionStorage.getItem('invitedCode');
+      sessionStorage.removeItem('isAgreementBool');
+      sessionStorage.removeItem('invitedPhone');
+      sessionStorage.removeItem('invitedCode');
+    }
     if (+this.type === 1 || +this.type === 2) {
       this.getRule();
       this.getAssistAwardRecode();
     }
 
-    this.bargainingStatus(true);
-    switch (+this.type) {
-      case 3: // 成功，领取下一台云机界面
-        this.successfulBargainingVisible = true;
-        break;
-      case 4: // 失败，领取下一台云机界面
-        this.expireVisible = true;
-        break;
-    }
+    setTimeout(() => {
+      this.bargainingStatus(true);
+      switch (+this.type) {
+        case 3: // 成功，领取下一台云机界面
+          this.successfulBargainingVisible = true;
+          break;
+        case 4: // 失败，领取下一台云机界面
+          this.expireVisible = true;
+          break;
+      }
+    });
   },
   computed: {
     time() {
@@ -337,7 +400,6 @@ export default {
         div.style = 'opacity: 0';
         div.innerHTML = `<div>
             <div>${phoneNumber}</div>
-            <span> 领取了6次 </span>
           </div>
           <div>${phoneType}${duration}天，价值<span>${price}元</span></div>`;
         return div;
@@ -410,15 +472,31 @@ export default {
           duration: 0,
         });
       }
+      const params = {};
+      console.log(this.inviteeData);
+      if (Object.keys(this.inviteeData).length) {
+        params.userLaunchId = this.inviteeData.userLaunchId;
+      }
+
       this.$axios
-        .$get('activity/v5/assist/bargaining/current/bargainingStatus')
+        .$get('activity/v5/assist/bargaining/current/bargainingStatus', {
+          params,
+        })
         .then(async (res) => {
           if (res.success) {
             this.info = res.data;
+            localStorage.setItem(
+              'bargainingStatusInfo',
+              JSON.stringify(this.info),
+            );
+            if (Object.keys(this.inviteeData).length) {
+              return;
+            }
             const data = await this.getSystemTime();
             this.systemTime = data.data;
             if (this.info.bargainingStatus === 0) {
               this.bargainingVisible = true;
+              return
             }
             // 如果是安卓客户端登录的情况且bargainingStatus为 1 2 ，
             if (
@@ -541,6 +619,7 @@ export default {
         });
     },
     btnFun() {
+      if (!+this.type) this.assistanceBool = true;
       if (+this.type) {
         switch (this.info.bargainingStatus) {
           case 1:
@@ -587,6 +666,144 @@ export default {
         }
       }
     },
+    // 获取验证码
+    getCode() {
+      if (
+        this.laoginData.phone.length < 11 ||
+        this.codeNumber !== '获取验证码' ||
+        !this.agreementBool
+      ) {
+        return;
+      }
+      if (!/^1[3456789]\d{9}$/.test(this.laoginData.phone)) {
+        this.$toast('手机号码有误，请重填');
+        return;
+      }
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0,
+      });
+      const params = {
+        type: 'common',
+        authorizationType: 4,
+        phone: this.laoginData.phone,
+      };
+      this.$axios
+        .$post('message/v5/phone/send', params)
+        .then((res) => {
+          if (res.success) {
+            this.codeNumber = 60;
+            const timer = setInterval(() => {
+              this.codeNumber--;
+              if (this.codeNumber === 0) {
+                this.codeNumber = '获取验证码';
+                clearInterval(timer);
+              }
+            }, 1000);
+            setTimeout(() => {
+              this.$toast('获取成功');
+            });
+          }
+        })
+        .catch((error) => {
+          setTimeout(() => {
+            this.$toast(error.message);
+          });
+        })
+        .finally(() => {
+          this.$toast.clear();
+        });
+    },
+    // 登录
+    async login() {
+      this.loginLoading = true;
+
+      let uuid = localStorage.getItem('uuid');
+      if (!uuid) {
+        const url = URL.createObjectURL(new Blob());
+        uuid = url.toString();
+        URL.revokeObjectURL(url);
+        uuid = uuid.substring(uuid.lastIndexOf('/') + 1);
+        // 去除 UUID 字符串中的连字符
+        const uuidHex = uuid.replace(/-/g, '');
+        // 将十六进制字符串解析为大整数
+        const uuidNumber = BigInt('0x' + uuidHex);
+        uuid = uuidNumber.toString().substring(0, 20); // 将大整数转换为字符串格式
+        localStorage.setItem('uuid', uuid);
+      }
+      const data = await this.getSystemTime();
+      const registerTime = this.timestampToTime(data.data);
+      const params = {
+        invitationType: 6,
+        registerSource: 102,
+        uuid,
+        registerTime,
+      };
+
+      const headers = {
+        devicesId: uuid,
+        registerSign: this.jm(registerTime),
+      };
+      Object.assign(params, this.laoginData);
+      Object.assign(params, this.inviteeData);
+      params.activityId = params.operateActivityId;
+      delete params.operateActivityId;
+
+      this.$axios
+        .$post('user/v5/client/register/forH5', params, { headers })
+        .then((res) => {
+          if (res.success) {
+            localStorage.setItem('phone', params.phone);
+            localStorage.setItem('auth._token.password', res.data.token)
+            localStorage.setItem('token', res.data.token)
+            localStorage.setItem('dataInfo', `{type: Object, data: ${JSON.stringify(res.data)}}`)
+            this.$toast('登录成功');
+            const url = !res.data.jumpToPage
+              ? '/claimCloudPhone?bool=1'
+              : '/claimCloudPhone/firstReward';
+            this.$router[res.data.jumpToPage ? 'replace' : 'push'](url);
+          }
+        })
+        .catch((error) => {
+          setTimeout(() => {
+            this.$toast(error.message);
+          });
+        })
+        .finally(() => {
+          this.loginLoading = false;
+        });
+    },
+    timestampToTime(timestamp) {
+      var date = new Date(timestamp * 1000);
+      var Y = date.getFullYear() + '-';
+      var M =
+        (date.getMonth() + 1 < 10
+          ? '0' + (date.getMonth() + 1)
+          : date.getMonth() + 1) + '-';
+      var D =
+        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+      var h =
+        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+      var m =
+        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
+        ':';
+      var s =
+        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      return Y + M + D + h + m + s;
+    },
+    jm(systemTime) {
+      const registerSign = sha256('Register_SZX_2023:' + systemTime);
+      return registerSign;
+    },
+    // 跳转对应协议
+    toAgreement() {
+      sessionStorage.setItem('invitedPhone', this.laoginData.phone);
+      sessionStorage.setItem('invitedCode', this.laoginData.code);
+      this.$router.push(
+        '/claimCloudPhone/agreement?agreementCoding=XYPZYHXY2002',
+      );
+    },
   },
 };
 </script>
@@ -921,7 +1138,7 @@ export default {
           rgba(255, 255, 255, 0.35)
         )
         1 1;
-      padding: 0 10px;
+      padding-left: 20px;
       font-size: 10px;
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
       font-weight: 400;
@@ -935,17 +1152,10 @@ export default {
         &:first-of-type {
           display: flex;
           & > div {
-            width: 50px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
           }
-          & > span {
-            display: inline-block;
-            background: linear-gradient(to bottom, #fec37a 0%, #ff1500 100%);
-            border-radius: 21px;
-            padding: 0 10px;
-          }
         }
         &:last-of-type span {
           color: #fddb2b;
@@ -1206,6 +1416,9 @@ export default {
       line-height: 16px;
       text-align: left;
       font-style: normal;
+      &.disabled {
+        color: #999;
+      }
     }
 
     .login-agreement {

pages/claimCloudPhone/components/layout.vue

@@ -21,7 +21,7 @@ export default {
     // 是否显示头部
     isNavBar: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 背景图片
     bgImgName: {
@@ -45,9 +45,9 @@ export default {
   computed: {
     containerStyle() {
       return {
-        backgroundImage: `url(${require(`@/assets/image/claimCloudPhone/${this.bgImgName}.png`)})`,
+        backgroundImage: this.bgImgName ? `url(${require(`@/assets/image/claimCloudPhone/${this.bgImgName}.png`)})` : '',
         backgroundRepeat: 'no-repeat',
-        backgroundSize: `100% ${this.bgHeight}px`,
+        backgroundSize: this.bgHeight ? `100% ${this.bgHeight}px` : '',
         backgroundColor: this.bgColor,
         backgroundPosition: '0 0',
       };
@@ -62,8 +62,8 @@ export default {
       // 如果微信小程序环境的，也不显示头部
       // 如果是h5 就显示头部
       let bool = false;
-      bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);
-      return bool;
+      bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx) ;
+      return bool && this.isNavBar;
     },
   },
   methods: {

pages/claimCloudPhone/components/setMealItem.vue

@@ -12,12 +12,12 @@
       >
         <div class="set-meal-item_content-item_left">
           <div v-if="!type" class="invited">
-            <img :src="require(`@/assets/image/VIP_icon.png`)" />
+            <img :src="require(`@/assets/image/${item.phoneType}_icon.png`)" />
             <div class="invited-info">
               <div>{{ packageType[item.phoneType] }}{{ item.day }}天套餐</div>
               <div>
-                <div><span>￥</span>30</div>
-                <div><span>￥</span>30</div>
+                <div><span>￥</span>{{ item.actualPrice }}</div>
+                <div v-if="item.originalPrice"><span>￥</span>{{ item.originalPrice }}</div>
               </div>
             </div>
           </div>
@@ -73,15 +73,14 @@ export default {
     };
   },
   mounted() {
-    console.log(this.$route.query)
   },
   methods: {
     add(data) {
       if (this.type) {
-        console.log(this.$route.query)
         this.$router.push('/claimCloudPhone/1?menuRuleId=' + data.id)
-        // return 
+        return 
       } 
+      this.$emit('buy', data)
     },
   },
 };

pages/claimCloudPhone/confirmation.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="confirmation">
     <div class="confirmation-bg">
-      <div class="confirmation-tips"><van-icon name="passed" />下单成功</div>
-      <div class="confirmation-obtain">3大权益已开通&nbsp;&nbsp;云机已到账</div>
+      <div class="confirmation-tips">
+        <template v-if="status === 1">
+          <van-icon name="passed" />下单成功
+        </template>
+        <template v-else> <van-icon name="close" /> 下单失败 </template>
+      </div>
+      <div class="confirmation-obtain" v-if="status === 1">
+        3大权益已开通&nbsp;&nbsp;云机已到账
+      </div>
     </div>
     <div class="confirmation-container">
       <div class="jump">
-        <div>打开APP，使用完整功能</div>
-        <div>暂不下载，使用网页版</div>
+        <div @click="download">打开APP，使用完整功能</div>
+        <div @click="toH5">暂不下载，使用网页版</div>
       </div>
 
       <div class="confirmation-guide">
@@ -45,6 +52,43 @@ export default {
     title: '0元购机，尽情享受',
   },
   components: {},
+  data() {
+    return {
+      status: '',
+      bargainingStatusInfo: {},
+    };
+  },
+  mounted() {
+    this.getPayStatus();
+    this.bargainingStatusInfo = JSON.parse(
+      localStorage.getItem('bargainingStatusInfo'),
+    );
+    console.log(this.bargainingStatusInfo.downloadAndroidUrl);
+  },
+  methods: {
+    getPayStatus() {
+      console.log(456789);
+      this.$axios
+        .$get('pay/v1/alipay/h5/spend/getPayStatus', {
+          params: {
+            myOrderNum: localStorage.getItem('myOrderNum'),
+          },
+        })
+        .then((res) => {
+          if (res.success) {
+            this.status = res.data;
+          }
+        });
+    },
+    download() {
+      location.href = this.$userAgent.isAndroid
+        ? this.bargainingStatusInfo.downloadAndroidUrl
+        : 'https://www.androidscloud.com';
+    },
+    toH5(){
+      location.href = 'http://gntest.phone.androidscloud.com:1280/cloud/phone/web/#/'
+    }
+  },
 };
 </script>
 

pages/claimCloudPhone/firstReward.vue

@@ -1,31 +1,33 @@
 <template>
-  <div class="first-reward">
-    <van-nav-bar
-      title="0元购机，尽情享受"
-      left-arrow
-      @click-left="goBackFun"
-      fixed
-    />
-    <div class="first-reward-container">
-      <div class="first-reward-container_privilege">
-        <img src="@/assets/image/claimCloudPhone/privilege-img.png" alt="" />
-        <div class="first-reward-container_privilege-tips">
-          以上权益已开通至您的账户
-        </div>
-        <img src="@/assets/image/claimCloudPhone/first-reward-container-privilege.png" alt="" class="btn">
-      </div>
+  <layout bgImgName="" bgColor="" bgHeight="">
+    <div class="first-reward">
+      <img :src="`${IMG_URL}/assistFirstReward.png`" alt="" />
+      <div class="btn-box">
+        <img
+          src="@/assets/image/claimCloudPhone/first-reward-container-privilege.png"
+          alt=""
+          class="btn"
+          @click="$router.push('/claimCloudPhone/secondReward')"
+        />
+      </div> 
     </div>
-  </div>
+  </layout>
 </template>
 
 <script>
+import layout from './components/layout';
 export default {
   auth: false,
   name: 'firstReward',
   head: {
     title: '0元购机，尽情享受',
   },
-  components: {},
+  data() {
+    return {
+      IMG_URL: process.env.IMG_URL
+    }
+  },
+  components: { layout },
 };
 </script>
 
@@ -33,48 +35,36 @@ export default {
 .first-reward {
   height: 100%;
   box-sizing: border-box;
-  background: #f64d5d;
-  .first-reward-container {
-    padding: 12.2666666667vw 16px 16px;
-    height: 100%;
-    box-sizing: border-box;
-    background: url('~/assets/image/claimCloudPhone/first-reward-img.png')
-      no-repeat;
-    background-size: 100% 210px;
-    background-position: 0px 12.2666666667vw;
-
-    .first-reward-container_privilege {
-      padding-top: 224px;
-      & > img {
-        width: 100%;
-      }
-
-      .first-reward-container_privilege-tips {
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 400;
-        font-size: 12px;
-        color: #ffffff;
-        margin: 16px 0;
-        line-height: 17px;
-        text-align: center;
-        font-style: normal;
-      }
+  padding-top: 188px;
+  position: relative;
+  & > img {
+    position: absolute;
+    top: -16px;
+    left: -16px;
+    height: calc(100% + 32px);
+    width: calc(100% + 32px);
+  }
 
-      .btn{
-        height: 56px;
-      }
+  .first-reward-container_privilege-tips {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #ffffff;
+    margin: 16px 0;
+    line-height: 17px;
+    text-align: center;
+    font-style: normal;
+  }
+  .btn-box {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    display: flex;
+    justify-content: center;
+    .btn {
+      height: 56px;
     }
   }
 }
-::v-deep .van-nav-bar__arrow {
-  color: #000000;
-  font-size: 24px;
-}
-
-::v-deep .van-nav-bar__title {
-  font-weight: bold !important;
-  font-size: 17px !important;
-  color: #0a132b !important;
-  line-height: 24px !important;
-}
 </style>

pages/claimCloudPhone/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="loading">加载中...</div>
+  <div class="loader-container">
+    <div class="loader"></div>
+  </div>
 </template>
 
 <script>
@@ -15,6 +17,33 @@ export default {
     return {};
   },
   mounted() {
+    const {
+      invitationUserName,
+      operateActivityId,
+      userLaunchId,
+      bool = 0,
+    } = this.$route.query;
+    if (invitationUserName && operateActivityId && userLaunchId) {
+      // 删除旧的token
+      localStorage.removeItem('auth._token.password');
+      // 如果有这个说明被邀请人
+      localStorage.setItem('auth.inviteeNum', 1);
+      // 活动Id
+      localStorage.setItem(
+        'auth.operateActivityId',
+        window.atob(operateActivityId),
+      );
+      this.$router.replace({
+        path: '/claimCloudPhone/0',
+        query: this.$route.query,
+      });
+      return;
+    }
+    if (!(+bool)) {
+      localStorage.removeItem('auth.inviteeNum');
+      localStorage.setItem('auth.operateActivityId', operateActivityId);
+    }
+
     setTimeout(() => {
       this.bargainingStatus();
     });
@@ -22,7 +51,9 @@ export default {
   methods: {
     bargainingStatus() {
       this.$axios
-        .$get('activity/v5/assist/bargaining/current/bargainingStatus')
+        .$get('activity/v5/assist/bargaining/current/bargainingStatus', {
+          headers: this.headers,
+        })
         .then((res) => {
           if (res.success) {
             // bargainingStatus 0 ：选择云机界面  1：砍一刀界面 2；邀请好友页面 3：成功，领取下一台云机界面  4：失败，领取下一台云机界面
@@ -43,4 +74,93 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.loader-container {
+  background: rgba(237, 228, 228, 1);
+  height: 100%;
+  width: 100%;
+}
+.loader {
+  position: relative;
+  width: 2.5em;
+  height: 2.5em;
+  transform: rotate(165deg);
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 0.25em;
+  transform: translate(-50%, -50%);
+}
+
+.loader:before {
+  animation: before8 2s infinite;
+}
+
+.loader:after {
+  animation: after6 2s infinite;
+}
+
+@keyframes before8 {
+  0% {
+    width: 0.5em;
+    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
+      -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  35% {
+    width: 2.5em;
+    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75),
+      0 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  70% {
+    width: 0.5em;
+    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75),
+      1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  100% {
+    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
+      -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+}
+
+@keyframes after6 {
+  0% {
+    height: 0.5em;
+    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
+      -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+
+  35% {
+    height: 2.5em;
+    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75),
+      -0.5em 0 rgba(233, 169, 32, 0.75);
+  }
+
+  70% {
+    height: 0.5em;
+    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75),
+      -0.5em 1em rgba(233, 169, 32, 0.75);
+  }
+
+  100% {
+    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
+      -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+}
+
+.loader {
+  position: absolute;
+  top: calc(50% - 1.25em);
+  left: calc(50% - 1.25em);
+}
+</style>

pages/claimCloudPhone/inviteeExits.vue

@@ -1,77 +1,78 @@
 <template>
-  <div class="invitee-exits">
-    <van-nav-bar title="0元购机，尽情享受" left-arrow fixed />
-    <div class="invitee-exits-container">
-      <div>
-        <div class="invitee-exits-container_privilege">
-          <div>三大云机特权</div>
+  <layout bgImgName="invitee-exits-img" bgColor="#fdf2e3" bgHeight="188">
+    <div class="invitee-exits">
+      <div class="invitee-exits-privilege">
+        <div>三大云机特权</div>
+        <div>
           <div>
-            <div>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-1.png"
-                alt=""
-              />
-              <div>游戏托管</div>
-            </div>
-            <div>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-2.png"
-                alt=""
-              />
-              <div>应用分身</div>
-            </div>
-            <div>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-3.png"
-                alt=""
-              />
-              <div>坐标定位</div>
-            </div>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-1.png"
+              alt=""
+            />
+            <div>游戏托管</div>
+          </div>
+          <div>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-2.png"
+              alt=""
+            />
+            <div>应用分身</div>
+          </div>
+          <div>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-3.png"
+              alt=""
+            />
+            <div>坐标定位</div>
           </div>
         </div>
-        <div class="invitee-exits-container_phone-info">
-          <div>云机可助您</div>
-          <ul>
-            <li>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-4.png"
-                alt=""
-              />
-              24小时运行游戏任务
-            </li>
-            <li>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-5.png"
-                alt=""
-              />
-              登录您的多个账号
-            </li>
-            <li>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-6.png"
-                alt=""
-              />
-              隐私手机空间
-            </li>
-            <li>
-              <img
-                src="@/assets/image/claimCloudPhone/invitee-exits-privilege-7.png"
-                alt=""
-              />
-              苹果手机玩安卓应用
-            </li>
-          </ul>
-        </div>
-        <div class="invitee-exits-container_btn">
-          <div>一键领取</div>
-          <div>放弃所有奖励</div>
-        </div>
+      </div>
+      <div class="invitee-exits-phone-info">
+        <div>云机可助您</div>
+        <ul>
+          <li>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-4.png"
+              alt=""
+            />
+            24小时运行游戏任务
+          </li>
+          <li>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-5.png"
+              alt=""
+            />
+            登录您的多个账号
+          </li>
+          <li>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-6.png"
+              alt=""
+            />
+            隐私手机空间
+          </li>
+          <li>
+            <img
+              src="@/assets/image/claimCloudPhone/invitee-exits-privilege-7.png"
+              alt=""
+            />
+            苹果手机玩安卓应用
+          </li>
+        </ul>
+      </div>
+      <div class="invitee-exits-btn">
+        <div @click="$router.go(-1)">一键领取</div>
+        <div @click="visible = true">放弃所有奖励</div>
       </div>
     </div>
-  </div>
+    <van-dialog v-model="visible" :showConfirmButton="false">
+      <img src="@/assets/image/claimCloudPhone/claim-the-bullet-box.png" alt="" class="claim-the-bullet-box" @click="toZeroYuanClaim">
+    </van-dialog>
+  </layout>
 </template>
 
 <script>
+import layout from './components/layout';
 export default {
   auth: false,
   name: 'inviteeExits',
@@ -79,123 +80,112 @@ export default {
     title: '0元购机，尽情享受',
   },
   data() {
-    return {};
+    return {
+      visible: true,
+    };
   },
-  components: {},
+  components: { layout },
+  methods: {
+    toZeroYuanClaim() {
+      this.$router.push('/claimCloudPhone/zeroYuanClaim?inviteeExits=1')
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
+::v-deep .van-dialog{
+  background: transparent;
+  .claim-the-bullet-box{
+    height: 320px;
+    width: 304px;
+  }
+}
 .invitee-exits {
   height: 100%;
+  padding-top: 188px;
   box-sizing: border-box;
-  background: #fdf2e3;
-  .invitee-exits-container {
-    padding: 12.2666666667vw 0 16px;
-    height: 100%;
-    box-sizing: border-box;
-    background: url('~/assets/image/claimCloudPhone/invitee-exits-img.png')
-      no-repeat;
-    background-size: 100% 210px;
-    background-position: 0px 12.2666666667vw;
-    & > div {
-      padding: 224px 16px 0;
-      .invitee-exits-container_privilege,
-      .invitee-exits-container_phone-info {
-        background: #ffffff;
-        box-shadow: 0px 2px 4px 0px #f6e5d3;
-        padding: 16px;
-        border-radius: 16px;
-        margin-bottom: 16px;
-        & > div:first-of-type {
-          font-family: PingFangSC, PingFang SC;
-          font-weight: bold;
-          font-size: 16px;
-          color: #0a132b;
-          line-height: 22px;
-          font-style: normal;
-          margin-bottom: 12px;
-        }
-      }
-
-      .invitee-exits-container_privilege {
-        img {
-          height: 42px;
-          width: 42px;
-          display: block;
-          margin: 0 auto;
-        }
-
-        & > div:last-of-type {
-          display: grid;
-          grid-gap: 8px;
-          grid-template-columns: repeat(3, 1fr);
-          text-align: center;
-          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-          font-weight: 400;
-          font-size: 14px;
-          color: #213d5f;
-          line-height: 20px;
-          font-style: normal;
-        }
-      }
+  .invitee-exits-privilege,
+  .invitee-exits-phone-info {
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px #f6e5d3;
+    padding: 16px;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    & > div:first-of-type {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: bold;
+      font-size: 16px;
+      color: #0a132b;
+      line-height: 22px;
+      font-style: normal;
+      margin-bottom: 12px;
+    }
+  }
 
-      .invitee-exits-container_phone-info {
-        ul {
-          padding: 0;
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 400;
-          font-size: 14px;
-          color: #0a132b;
-          line-height: 20px;
-          font-style: normal;
-          img {
-            width: 20px;
-            height: 20px;
-            vertical-align: middle;
-          }
-        }
+  .invitee-exits-phone-info {
+    ul {
+      padding: 0;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #0a132b;
+      line-height: 20px;
+      font-style: normal;
+      img {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
       }
+    }
+  }
+  .invitee-exits-privilege {
+    img {
+      height: 42px;
+      width: 42px;
+      display: block;
+      margin: 0 auto;
+    }
 
-      .invitee-exits-container_btn {
-        & > div:first-of-type {
-          width: 226px;
-          height: 40px;
-          background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
-          border-radius: 26px;
-          margin: 0 auto;
-          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-          font-weight: bold;
-          font-size: 18px;
-          color: #ffffff;
-          line-height: 40px;
-          text-align: center;
-          font-style: normal;
-        }
-
-        & > div:last-of-type {
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 400;
-          font-size: 12px;
-          color: #7e8495;
-          line-height: 17px;
-          text-align: center;
-          font-style: normal;
-          margin-top: 10px;
-        }
-      }
+    & > div:last-of-type {
+      display: grid;
+      grid-gap: 8px;
+      grid-template-columns: repeat(3, 1fr);
+      text-align: center;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: 400;
+      font-size: 14px;
+      color: #213d5f;
+      line-height: 20px;
+      font-style: normal;
     }
   }
-}
-::v-deep .van-nav-bar__arrow {
-  color: #000000;
-  font-size: 24px;
-}
+  .invitee-exits-btn {
+    & > div:first-of-type {
+      width: 226px;
+      height: 40px;
+      background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
+      border-radius: 26px;
+      margin: 0 auto;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: bold;
+      font-size: 18px;
+      color: #ffffff;
+      line-height: 40px;
+      text-align: center;
+      font-style: normal;
+    }
 
-::v-deep .van-nav-bar__title {
-  font-weight: bold !important;
-  font-size: 17px !important;
-  color: #0a132b !important;
-  line-height: 24px !important;
+    & > div:last-of-type {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #7e8495;
+      line-height: 17px;
+      text-align: center;
+      font-style: normal;
+      margin-top: 10px;
+    }
+  }
 }
 </style>

pages/claimCloudPhone/mixins/common.js

@@ -2,22 +2,10 @@ import uni from '@/static/static/js/uni.webview.1.5.2';
 export default {
     data() {
         return {
-            operateActivityId: null, // 活动id
             packageList: [], // 邀请人被邀请人选择的套餐
         }
     },
     mounted() {
-        const { operateActivityId } = this.$route.query
-        if (sessionStorage.getItem('operateActivityId')) {
-            // 如果对比本地的不一致就更新
-            if (operateActivityId && operateActivityId !== this.operateActivityId) {
-                this.operateActivityId = operateActivityId
-                sessionStorage.setItem('operateActivityId', operateActivityId)
-            }
-            this.operateActivityId = sessionStorage.getItem('operateActivityId')
-        } else {
-            sessionStorage.setItem('operateActivityId', operateActivityId)
-        }
     },
     methods: {
         // 获取套餐 personnelMealType 获取方： 1： 邀请人  2： 被邀请人
@@ -27,9 +15,10 @@ export default {
                 forbidClick: true,
                 duration: 0
             })
-            const data = { operateActivityId: this.operateActivityId }
+            const operateActivityId = +localStorage.getItem('auth.operateActivityId')
+            const data = { operateActivityId }
             Object.assign(data, obj)
-            this.$axios.$post('activity/v5/assist/bargaining/getActivitySortRuleAndActivityMealList', data, { headers: this.headers }).then(res => {
+            this.$axios.$post('activity/v5/assist/bargaining/getActivitySortRuleAndActivityMealList', data).then(res => {
                 console.log(res)
                 if (res.success) {
                     this.packageList = res.data
@@ -52,7 +41,7 @@ export default {
                 if (isAndroid) {
                     window.native.backClick();
                 } else {
-                    window.webkit.messageHandlers.appGoBack.postMessage()
+                    window.webkit.messageHandlers.appGoBack.postMessage({})
                 }
             } else {
                 if (isWx) {

pages/claimCloudPhone/secondReward.vue

@@ -1,46 +1,43 @@
 <template>
-  <div class="second-reward">
-    <van-nav-bar
-      title="0元购机，尽情享受"
-      left-arrow
-      @click-left="goBackFun"
-      fixed
-    />
-    <div class="second-reward-container">
-      <div>
-        <div class="second-reward-container_title">
-          请搜素您希望在云机内运行的应用为您安装至云机
-        </div>
-        <div class="second-reward-container_main">
-          <template v-if="!isSelectBool">
-            <div class="application">
-              <div v-for="item in applicationList" :key="item">应用宝</div>
-            </div>
-          </template>
-          <template v-else>
-            <div
-              v-for="item in adaptedModels"
-              :key="item"
-              class="adapted-models"
-            >
-              <div>
-                <img
-                  src="@/assets/image/claimCloudPhone/second-reward-img.png"
-                  alt=""
-                />
-                梦幻西游
-              </div>
-              <div>推荐机型：星动安卓7/星曜安卓7/星曜/唔即/星空/唔即PRO</div>
-            </div>
-            <img  src="@/assets/image/claimCloudPhone/claim-mobile-phone-btn.png" />
-          </template>
+  <layout
+    bgImgName="second-reward-img"
+    bgColor="#f64d5d"
+    bgHeight="188"
+    @goBack="goBack"
+  >
+    <div class="second-reward">
+      <div class="second-reward-title">
+        请搜素您希望在云机内运行的应用为您安装至云机
+      </div>
+      <div v-if="!isSelectBool">
+        <div class="application">
+          <div
+            v-for="item in applicationList"
+            :key="item"
+            @click="toDetails(item)"
+          >
+            {{ item }}
+          </div>
         </div>
       </div>
+      <div v-else class="details">
+        <img
+          :src="`${IMG_URL}/installApps_${+this.imgName + 1}.png`"
+          alt=""
+          class="details-img"
+        />
+        <img
+          src="@/assets/image/claimCloudPhone/claim-mobile-phone-btn.png"
+          class="details-btn"
+          @click="$router.push('/claimCloudPhone/purchase')"
+        />
+      </div>
     </div>
-  </div>
+  </layout>
 </template>
 
 <script>
+import layout from './components/layout';
 export default {
   auth: false,
   name: 'secondReward',
@@ -49,12 +46,39 @@ export default {
   },
   data() {
     return {
-      applicationList: [1, 2, 3, 4, 5, 6, 10, 11, 12, 50], //  应用数组
+      applicationList: [
+        '飞书',
+        '钉钉',
+        '企业微信',
+        '梦幻西游',
+        '闲鱼之王',
+        '寻道大千',
+        '部落冲突',
+        '传奇',
+        '倩女幽魂',
+      ], //  应用数组
       adaptedModels: [1], // 适配机型
-      isSelectBool: true,
+      isSelectBool: false,
+      imgName: '',
+      IMG_URL: process.env.IMG_URL
     };
   },
-  components: {},
+  components: { layout },
+  methods: {
+    toDetails(applicationName) {
+      // 埋点
+      this.$axios
+        .$post('public/v5/User/selects/addApplication', { applicationName })
+        .then((res) => {});
+      this.imgName = this.applicationList.indexOf(applicationName);
+      console.log(this.imgName);
+      this.isSelectBool = true;
+    },
+    goBack() {
+      if (this.isSelectBool) return (this.isSelectBool = false);
+      this.$router.go(-1);
+    },
+  },
 };
 </script>
 
@@ -62,101 +86,150 @@ export default {
 .second-reward {
   height: 100%;
   box-sizing: border-box;
-  background: #f64d5d;
-  .second-reward-container {
-    padding: 12.2666666667vw 0 16px;
-    height: 100%;
-    box-sizing: border-box;
-    background: url('~/assets/image/claimCloudPhone/second-reward-img.png')
-      no-repeat;
-    background-size: 100% 210px;
-    background-position: 0px 12.2666666667vw;
-    & > div {
-      padding-top: 224px;
-      .second-reward-container_title {
-        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-        font-weight: bold;
-        font-size: 16px;
-        color: #fefefe;
-        line-height: 18px;
-        text-align: center;
-        font-style: normal;
-      }
+  padding-top: 188px;
+  .second-reward-title {
+    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+    font-weight: bold;
+    font-size: 15px;
+    color: #fefefe;
+    line-height: 18px;
+    text-align: center;
+    font-style: normal;
+  }
 
-      .second-reward-container_main {
-        padding: 0 16px;
-        .application {
-          margin-top: 24px;
-          display: grid;
-          grid-gap: 16px;
-          grid-template-columns: repeat(3, 1fr);
-          & > div {
-            font-family: PingFangSC, PingFang SC;
-            font-weight: 400;
-            font-size: 14px;
-            color: #742428;
-            line-height: 20px;
-            text-align: center;
-            font-style: normal;
-            background: #fff1e1;
-            border-radius: 14px;
-            padding: 11px 0;
-          }
-        }
+  .application {
+    padding: 0 16px;
+    margin-top: 24px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(3, 1fr);
+    & > div {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #742428;
+      line-height: 20px;
+      text-align: center;
+      font-style: normal;
+      background: #fff1e1;
+      border-radius: 14px;
+      padding: 11px 0;
+    }
+  }
 
-        .adapted-models {
-          margin-top: 16px;
-          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-          font-size: 14px;
-          color: #891c04;
-          & > div {
-            height: 64px;
-            padding: 16px;
-            box-sizing: border-box;
-            &:first-of-type {
-              background: #fff1e1;
-              border-radius: 12px 12px 0 0;
-              font-weight: bold;
-              line-height: 32px;
-              display: flex;
-              align-items: center;
-              & > img {
-                height: 32px;
-                width: 32px;
-                margin-right: 8px;
-              }
-            }
-            &:last-of-type {
-              background: #fedec0;
-              border-radius: 0 0 12px 12px;
-              font-weight: 400;
-              font-size: 14px;
-              font-style: normal;
-              line-height: 15px;
-            }
-          }
-        }
+  .details {
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .details-img {
+      height: 130px;
+      width: 100%;
+    }
 
-        &>img{
-          height: 56px;
-          width: 281px;
-          display: block;
-          margin: 0 auto;
-          margin-top: 32px;
-        }
-      }
+    .details-btn {
+      margin-top: 32px;
+      height: 56px;
     }
   }
 }
-::v-deep .van-nav-bar__arrow {
-  color: #000000;
-  font-size: 24px;
-}
+//   height: 100%;
+//   box-sizing: border-box;
+//   background: #f64d5d;
+//   .second-reward-container {
+//     padding: 12.2666666667vw 0 16px;
+//     height: 100%;
+//     box-sizing: border-box;
+//     background: url('~/assets/image/claimCloudPhone/second-reward-img.png')
+//       no-repeat;
+//     background-size: 100% 210px;
+//     background-position: 0px 12.2666666667vw;
+//     & > div {
+//       padding-top: 224px;
+//       .second-reward-container_title {
+//         font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+//         font-weight: bold;
+//         font-size: 16px;
+//         color: #fefefe;
+//         line-height: 18px;
+//         text-align: center;
+//         font-style: normal;
+//       }
 
-::v-deep .van-nav-bar__title {
-  font-weight: bold !important;
-  font-size: 17px !important;
-  color: #0a132b !important;
-  line-height: 24px !important;
-}
+//       .second-reward-container_main {
+//         padding: 0 16px;
+//         .application {
+//           margin-top: 24px;
+//           display: grid;
+//           grid-gap: 16px;
+//           grid-template-columns: repeat(3, 1fr);
+//           & > div {
+//             font-family: PingFangSC, PingFang SC;
+//             font-weight: 400;
+//             font-size: 14px;
+//             color: #742428;
+//             line-height: 20px;
+//             text-align: center;
+//             font-style: normal;
+//             background: #fff1e1;
+//             border-radius: 14px;
+//             padding: 11px 0;
+//           }
+//         }
+
+//         .adapted-models {
+//           margin-top: 16px;
+//           font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+//           font-size: 14px;
+//           color: #891c04;
+//           & > div {
+//             height: 64px;
+//             padding: 16px;
+//             box-sizing: border-box;
+//             &:first-of-type {
+//               background: #fff1e1;
+//               border-radius: 12px 12px 0 0;
+//               font-weight: bold;
+//               line-height: 32px;
+//               display: flex;
+//               align-items: center;
+//               & > img {
+//                 height: 32px;
+//                 width: 32px;
+//                 margin-right: 8px;
+//               }
+//             }
+//             &:last-of-type {
+//               background: #fedec0;
+//               border-radius: 0 0 12px 12px;
+//               font-weight: 400;
+//               font-size: 14px;
+//               font-style: normal;
+//               line-height: 15px;
+//             }
+//           }
+//         }
+
+//         &>img{
+//           height: 56px;
+//           width: 281px;
+//           display: block;
+//           margin: 0 auto;
+//           margin-top: 32px;
+//         }
+//       }
+//     }
+//   }
+// }
+// ::v-deep .van-nav-bar__arrow {
+//   color: #000000;
+//   font-size: 24px;
+// }
+
+// ::v-deep .van-nav-bar__title {
+//   font-weight: bold !important;
+//   font-size: 17px !important;
+//   color: #0a132b !important;
+//   line-height: 24px !important;
+// }
 </style>

pages/claimCloudPhone/zeroYuanClaim.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout>
+  <layout :isNavBar="isNavBar">
     <div class="zero-yuan-claim">
       <img
         class="zero-yuan-claim-title"
@@ -32,10 +32,13 @@ export default {
   mixins: [common],
   components: { layout, setMealItem },
   data() {
-    return {};
+    return {
+      isNavBar: true
+    };
   },
   mounted() {
-    const { userCardId } = this.$route.query;
+    const { userCardId, inviteeExits = 0 } = this.$route.query;
+    this.isNavBar = !(+inviteeExits)
     const obj = {
       personnelMealType: 1,
     };