feat：一刀切活动

assets/style/main.scss

@@ -1,15 +1,25 @@
 html {
-  font-size: 16px;
-  // box-sizing: border-box;
-  // * {
-  //   box-sizing: inherit;
-  // }
-  // overscroll-behavior-y: contain;
+	font-size: 16px;
+	// box-sizing: border-box;
+	// * {
+	//   box-sizing: inherit;
+	// }
+	// overscroll-behavior-y: contain;
 }
+
 body {
-  // overscroll-behavior-y: contain;
+	// overscroll-behavior-y: contain;
 }
 
+@font-face {
+	font-family: AlibabaPuHuiTi;
+	src: url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Bold.otf') format('opentype'),
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Heavy.otf') format('opentype'),
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Light.otf') format('opentype'),
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Medium.otf') format('opentype'), 
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Regular.otf') format('opentype')
+		url('../fontFace/AlibabaPuHuiTi/阿里巴巴普惠体H.ttf') format('truetype');
+}
 
 ::-webkit-scrollbar {
 	width: 5px;
@@ -44,4 +54,4 @@ body {
 	width: 5px !important;
 	background-color: rgba(125, 125, 125, 0.7) !important;
 	-webkit-border-radius: 6px !important;
-}
+}

components/cloudMobilePhonePopup/index.vue

@@ -0,0 +1,304 @@
+<template>
+  <van-popup
+    v-model="visible"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :position="position"
+    :style="{ background: 'transparent' }"
+  >
+    <div class="cloud-mobile-phone_popup" :style="{ background }">
+      <div class="cloud-mobile-phone_popup-title">
+        <div class="cloud-mobile-phone_popup-title_left">
+          <slot name="left">
+            <div>
+              {{ titleText }}
+            </div>
+          </slot>
+        </div>
+
+        <slot>
+          <van-checkbox
+            shape="square"
+            v-model="checkboxAll"
+            @change="changeCheckboxAll"
+            icon-size="16px"
+            >全选</van-checkbox
+          >
+        </slot>
+      </div>
+      <div class="cloud-mobile-phone_popup-content">
+        <div v-if="data.length">
+          <van-checkbox-group icon-size="16px" v-model="selectIds">
+            <van-list
+              v-model="asyncListLoading"
+              @load="onLoad"
+              :finished="finished"
+              offset="10"
+              :immediate-check="false"
+            >
+              <div
+                :style="{
+                  background: backgroundItem,
+                  marginTop: index !== 0 ? '12px' : '',
+                }"
+                v-for="(item, index) in data"
+                :key="item.id"
+                class="cloud-mobile-phone_popup-content_item"
+              >
+                <div class="cloud-mobile-phone_popup-content_item-left">
+                  <img :src="require(`@/assets/image/${item.buyVipType}_icon.png`)" alt="" />
+                  <div>
+                    <div>{{ item.diskName }}</div>
+                    <div>
+                      <img src="@/assets/image/phone_time.png" alt="" />
+                      剩{{ timeStamp(item.validTime, item.userCardType) }}
+                    </div>
+                  </div>
+                </div>
+                <div class="cloud-mobile-phone_popup-content_item-right">
+                  <van-checkbox
+                    :name="item"
+                    :shape="isMultipleChoice ? 'square' : 'round'"
+                    @click="changeSelectIds(item)"
+                  ></van-checkbox>
+                </div>
+              </div>
+            </van-list>
+          </van-checkbox-group>
+        </div>
+        <div v-else style="height: 100%">
+          <van-empty description="暂无续费云手机" v-if="!loading" />
+          <div
+            v-else
+            style="
+              display: flex;
+              height: 100%;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <van-loading />
+          </div>
+        </div>
+      </div>
+      <van-button
+        type="info"
+        color="linear-gradient(to right,#38AEFC, #3B7FFF)"
+        :disabled="!selectIds.length"
+        @click="confirm"
+      >
+        确认
+      </van-button>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import {timeStamp} from '@/plugins/plugins.js';
+export default {
+  name: 'cloudMobilePhonePopup',
+  props: {
+    // 显示更隐藏
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 弹窗从哪里弹出来
+    position: {
+      type: String,
+      default: 'bottom',
+    },
+    // 最外层弹框盒子颜色
+    background: {
+      type: String,
+      default: '#fff',
+    },
+    // 左上角标题
+    titleText: {
+      type: String,
+      default: '选择云手机',
+    },
+    // 云机每项的背景颜色
+    backgroundItem: {
+      type: String,
+      default: '#F2F4F7',
+    },
+    // 最终确认的ids
+    ids: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否是多选
+    isMultipleChoice: {
+      type: Boolean,
+      default: false,
+    },
+    total: {
+      type: [String, Number],
+      default: 0,
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    listLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      checkboxAll: false,
+      timeStamp,
+      selectIds: [],
+      finished: false,
+    };
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        if (!val) this.selectIds = [];
+        this.$emit('input', val);
+      },
+    },
+    asyncListLoading: {
+      get() {
+        return this.listLoading;
+      },
+      set(val) {
+        this.$emit('update:listLoading', val);
+      },
+    },
+  },
+  methods: {
+    // 全选相关逻辑,后续再拓展
+    changeCheckboxAll(bool) {
+      console.log(bool);
+    },
+    // 用来处理单选相关的逻辑
+    changeSelectIds(data) {
+      if (!this.isMultipleChoice && this.selectIds.length) {
+        this.selectIds = [data];
+      }
+    },
+    // 最终确认的
+    confirm() {
+      this.$emit('update:ids', this.selectIds);
+      this.$emit('confirm');
+    },
+
+    onLoad() {
+      if (this.total === this.data.length) {
+        this.finished = true;
+        return 
+      }
+      this.$emit('load');
+    },
+  },
+};
+</script>
+
+<style style lang="scss" scoped>
+.cloud-mobile-phone_popup {
+  border-radius: 10px 10px 0 0;
+  padding: 16px 0px;
+  margin: 0 16px;
+  height: 60vh;
+  display: flex;
+  flex-direction: column;
+
+  .van-empty {
+    padding: 0 !important;
+  }
+  .cloud-mobile-phone_popup-title,
+  .cloud-mobile-phone_popup-content > div,
+  .van-button {
+    margin: 0 12px;
+  }
+
+  .van-button {
+    border-radius: 8px;
+  }
+  .cloud-mobile-phone_popup-title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    .cloud-mobile-phone_popup-title_left {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: bold;
+      font-size: 16px;
+      color: #0a132b;
+      line-height: 22px;
+      text-align: left;
+      font-style: normal;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .cloud-mobile-phone_popup-content {
+    flex: 1;
+    overflow-y: auto;
+    margin-bottom: 12px;
+    .cloud-mobile-phone_popup-content_item {
+      height: 65px;
+      padding: 16px 12px;
+      box-sizing: border-box;
+      border-radius: 8px;
+      display: flex;
+      justify-content: space-between;
+      & > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .cloud-mobile-phone_popup-content_item-left {
+        & > img {
+          margin-right: 8px;
+          width: 34px;
+          height: 34px;
+        }
+        & > div {
+          font-family: PingFangSC, PingFang SC;
+          & > div:first-of-type {
+            font-weight: bold;
+            font-size: 16px;
+            color: #0a132b;
+            line-height: 22px;
+            font-style: normal;
+          }
+
+          & > div:last-of-type {
+            font-weight: 400;
+            font-size: 12px;
+            color: #666666;
+            line-height: 17px;
+            font-style: normal;
+            vertical-align: middle;
+            img {
+              width: 13px;
+              height: 13px;
+              vertical-align: middle;
+              margin-bottom: 3px;
+            }
+            &.red-time {
+              color: #f04646;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

components/loadList/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <van-list
+      class="load-list"
+      v-model="loading"
+      @load="onLoad"
+      :finished="finished"
+      offset="10"
+      :immediate-check="false"
+      v-if="data.length"
+    >
+      <slot :list="data"></slot>
+    </van-list>
+    <van-empty :description="description" v-else />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'loadList',
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      defaultParams: {
+        pageNum: 1,
+        pageSize: 50,
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    onLoad() {
+      this.defaultParams.pageNum++;
+      this.list(true);
+      if (this.data.length >= this.total) {
+        this.finished = true;
+      }
+    },
+    list(bool = false) {
+      if (Object.keys(this.params).length) {
+        this.data = [];
+        Object.assign(this.defaultParams, this.params);
+      }
+      this.$axios
+        .$post(this.url, this.defaultParams)
+        .then((res) => {
+          if (res.success) {
+            this.data.push(...res.data.list);
+            this.total = res.data.total;
+            if (bool) this.loading = false;
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

nuxt.config.js

@@ -19,7 +19,6 @@ dotenv.config({
 export default {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
-
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     titleTemplate: '%s',
@@ -84,7 +83,8 @@ export default {
     '~/plugins/jweixin',
     // '~/plugins/umeng-datasources',
     '@/plugins/vant',
-    '~/plugins/common'
+    '~/plugins/common',
+
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package-lock.json

@@ -13,7 +13,6 @@
         "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",
@@ -24,6 +23,7 @@
         "js-sha256": "^0.10.1",
         "jsencrypt": "^3.2.1",
         "jweixin-module": "^1.6.0",
+        "lodash": "^4.17.21",
         "nativeshare": "^2.1.5",
         "normalize.css": "^8.0.1",
         "numeral": "^2.0.6",
@@ -6187,16 +6187,6 @@
         "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",
@@ -7451,11 +7441,6 @@
         "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",
@@ -10152,14 +10137,6 @@
       "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",
@@ -17489,11 +17466,6 @@
       "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",
@@ -19125,11 +19097,6 @@
       "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",
@@ -26988,16 +26955,6 @@
       "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",
@@ -28036,11 +27993,6 @@
       "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",
@@ -30113,14 +30065,6 @@
       "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",
@@ -36170,11 +36114,6 @@
       "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",
@@ -37507,11 +37446,6 @@
       "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",

package.json

@@ -37,6 +37,7 @@
     "js-sha256": "^0.10.1",
     "jsencrypt": "^3.2.1",
     "jweixin-module": "^1.6.0",
+    "lodash": "^4.17.21",
     "nativeshare": "^2.1.5",
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",

pages/claimCloudPhone/_type.vue

@@ -0,0 +1,44 @@
+<template>
+  <layout @goBack="goBack">
+    <!-- type 1（砍一刀） 2（邀请好友） 3 （失败） 4 （成功）都是邀请人  0 是被邀请人 -->
+    <bargainingAssistance
+      ref="bargainingAssistance"
+      :type="$route.params.type"
+      :operateActivityId="operateActivityId"
+      :getSystemTime="getSystemTime"
+      :leaveFun="leaveFun"
+      :wxIntercept="wxIntercept"
+    />
+  </layout>
+</template>
+
+<script>
+import layout from './components/layout';
+import bargainingAssistance from './components/bargainingAssistance';
+import common from './mixins/common';
+export default {
+  auth: false,
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  mixins: [common],
+  components: {
+    layout,
+    bargainingAssistance,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    goBack() {
+      const { bargainingStatus } = this.$refs.bargainingAssistance.info;
+      if (bargainingStatus === 1 || bargainingStatus === 2) {
+        this.$refs.bargainingAssistance.exitVisible = true;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -0,0 +1,223 @@
+<template>
+  <layout @goBack="leaveFun">
+    <div class="choose-cloud-phone">
+      <div class="choose-cloud-phone_info">
+        <div class="choose-cloud-phone_info-name">亲爱的用户</div>
+        <div class="choose-cloud-phone_info-tips">
+          <div>恭喜您获得“0元领云机”大奖</div>
+          <div>感谢您的陪伴与支持</div>
+        </div>
+      </div>
+      <div class="choose-cloud-phone_select">
+        <div>请选择</div>
+        <div v-for="item in 2" :key="item" @click="selectJumpPhone(item)"></div>
+      </div>
+      <cloudMobilePhonePopup
+        v-model="visible"
+        titleText="选择续费云手机"
+        :ids.sync="ids"
+        @confirm="selectJumpPhone(3)"
+        :data="packageList"
+        :total="packageTotal"
+        :loading="loading"
+        :listLoading.sync="listLoading"
+        @load="load"
+      >
+        <van-search
+          v-model="keyWord"
+          placeholder="请输入云机名称"
+          style="padding: 0; width: 150px"
+          @input="search"
+        />
+      </cloudMobilePhonePopup>
+      <!-- <v-btn @click="$router.push('/claimCloudPhone/detail')">点击跳转</v-btn> -->
+    </div>
+  </layout>
+</template>
+
+<script>
+import debounce from 'lodash.debounce';
+import common from './mixins/common.js';
+import layout from './components/layout.vue';
+import cloudMobilePhonePopup from '@/components/cloudMobilePhonePopup';
+let _self = null;
+export default {
+  name: 'chooseCloudPhone',
+  auth: false,
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  mixins: [common],
+  components: {
+    layout,
+    cloudMobilePhonePopup,
+  },
+  data() {
+    return {
+      visible: false, // 显示续费云手机弹窗
+      ids: [], // 选中的id
+      // 续费云手机套餐相关参数
+      pageNum: 1,
+      pageSize: 50,
+      keyWord: '', // 搜索云手机关键词
+      packageList: [],
+      packageTotal: 0,
+      loading: false,
+      listLoading: false,
+    };
+  },
+  mounted() {
+    _self = this;
+    // 用来监听微信返回上一页的
+    const { exit } = this.$route.query;
+    if (exit) {
+      this.wxIntercept(() => {
+        this.leaveFun();
+      });
+    }
+    this.getRenewalPackage();
+  },
+  methods: {
+    // 选增新增云手机 of 续费云手机
+    selectJumpPhone(item) {
+      if (item === 2) {
+        this.ids = [];
+        this.visible = true;
+        return;
+      }
+      let url = '/claimCloudPhone/zeroYuanClaim';
+      if (item === 3) url += `?userCardId=${this.ids[0].id}`;
+      this.$router.push(url);
+    },
+
+    // 搜索云机名称
+    search: debounce(() => {
+      _self.pageNum = 1;
+      _self.packageList = [];
+      _self.getRenewalPackage();
+    }, 500),
+
+    // 获取续费套餐
+    getRenewalPackage(bool = true) {
+      if (bool) this.loading = true;
+      this.$axios
+        .$post('resources/v5/activity/card/bargaining/list', {
+          diskName: this.keyWord,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        })
+        .then((res) => {
+          if (res.success) {
+            this.packageList.push(...res.data.list);
+            this.packageTotal = res.data.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+          !bool && (this.listLoading = false);
+        });
+    },
+
+    // 触发续费云手机套餐分页
+    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>
+
+<style lang="scss" scoped>
+.choose-cloud-phone {
+  height: 100%;
+  .choose-cloud-phone_info {
+    .choose-cloud-phone_info-name {
+      display: inline-block;
+      padding: 5px 10px;
+      background: linear-gradient(296deg, #fdf0e2 0%, #fcd9ae 100%);
+      box-shadow: 0px 1px 2px 0px #facd8a;
+      border-radius: 4px;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: bold;
+      font-size: 14px;
+      color: #754213;
+      line-height: 20px;
+      text-align: center;
+      font-style: normal;
+      margin-bottom: 4px;
+    }
+    .choose-cloud-phone_info-tips {
+      & > div:first-child {
+        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 27px;
+        font-style: normal;
+        background: linear-gradient(90deg, #fffbfb 0%, #fbce95 100%);
+        /* 将文字颜色设置为透明，以便背景渐变可见 */
+        color: transparent;
+        /* 使用 blend-mode 来控制渐变背景与文字颜色的混合效果 */
+        -webkit-background-clip: text;
+        background-clip: text;
+      }
+
+      & > div:last-child {
+        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+        font-weight: 400;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 17px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .choose-cloud-phone_select {
+    & > div {
+      margin-bottom: 12px;
+    }
+    & > div:nth-of-type(1) {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: bold;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 20px;
+      font-style: normal;
+    }
+    & > div:nth-of-type(2) {
+      background: url(~/assets/image/claimCloudPhone/addCloudMobilePhone.png)
+        no-repeat;
+    }
+    & > div:nth-of-type(3) {
+      background: url(~/assets/image/claimCloudPhone/renewCloudMobilePhone.png)
+        no-repeat;
+    }
+    & > div:nth-of-type(2),
+    & > div:nth-of-type(3) {
+      height: 123px;
+      background-size: 100% 100%;
+      background-position: 0px 0px;
+    }
+  }
+}
+</style>

pages/claimCloudPhone/components/customProgress.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="progress-container">
+    <div
+      :class="['progress-inner', { started: total !== 0 }]"
+      :data-precrnt="total + '%'"
+      :style="{ width: total + '%' }"
+    ></div>
+    <div
+      class="progress-round"
+      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
+      data-precrnt="50%"
+    ></div>
+    <div
+      class="progress-round"
+      style="top: 50%; left: 75%; transform: translate(-75%, -50%)"
+      data-precrnt="75%"
+    ></div>
+    <div
+      class="progress-round"
+      style="top: 50%; left: 90%; transform: translate(-90%, -50%)"
+      data-precrnt="90%"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'customProgress',
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  computed: {
+    total: {
+      get() {
+        return this.value;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.progress-container {
+  height: 12px;
+  background: #fae8d4;
+  border-radius: 6px;
+  position: relative;
+  .progress-inner {
+    height: 12px;
+    background: linear-gradient(90deg, #fde08d 0%, #ff0000 100%);
+    border-radius: 6px;
+    transition: width 0.5s;
+    position: relative;
+    z-index: 1;
+    &.started::after {
+      position: absolute;
+      top: 50%;
+      right: -13.5px;
+      transform: translateY(-50%);
+      display: block;
+      content: attr(data-precrnt);
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: bold;
+      font-size: 9px;
+      color: #ffffff;
+      line-height: 16px;
+      text-align: center;
+      width: 35px;
+      height: 16px;
+      background: #ff3535;
+      border-radius: 9px;
+    }
+  }
+
+  .progress-round {
+    width: 8px;
+    height: 8px;
+    background: #ff2855;
+    border-radius: 50%;
+    position: absolute;
+    z-index: 0;
+    &::after {
+      position: absolute;
+      top: -30px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: block;
+      content: attr(data-precrnt);
+      width: 33px;
+      height: 19px;
+      background: #ff3535;
+      border: 1px solid #fff3cf;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: bold;
+      font-size: 9px;
+      color: #ffffff;
+      line-height: 12px;
+      text-align: center;
+      font-style: normal;
+      border-radius: 25px;
+      line-height: 19px;
+    }
+    &::before {
+      position: absolute;
+      top: -14px;
+      z-index: 2;
+      left: 50%;
+      transform: translateX(-50%);
+      display: block;
+      content: '';
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-left: 3px solid transparent;
+      border-right: 3px solid transparent;
+      border-top: 8px solid #ff3535;
+    }
+  }
+}
+</style>

pages/claimCloudPhone/components/layout.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="layout">
+    <div style="height: 12.2666666667vw" v-if="isShowNavBar">
+      <van-nav-bar
+        title="0元购机，尽情享受"
+        left-arrow
+        fixed
+        @click-left="goBackFun"
+      />
+    </div>
+    <div class="layout-container" :style="containerStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'layout',
+  props: {
+    // 是否显示头部
+    isNavBar: {
+      type: Boolean,
+      default: false,
+    },
+    // 背景图片
+    bgImgName: {
+      type: String,
+      default: 'bg-1',
+    },
+    // 背景图片高度
+    bgHeight: {
+      type: [Number, String],
+      default: 300,
+    },
+    bgColor: {
+      type: String,
+      default: '#F3F4F6',
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  computed: {
+    containerStyle() {
+      return {
+        backgroundImage: `url(${require(`@/assets/image/claimCloudPhone/${this.bgImgName}.png`)})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: `100% ${this.bgHeight}px`,
+        backgroundColor: this.bgColor,
+        backgroundPosition: '0 0',
+      };
+    },
+    isShowNavBar() {
+      // 是否是APP
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isAndroid = this.$userAgent.isAndroid;
+      const isIos = this.$userAgent.isIos;
+      const isWx = this.$userAgent.isWx;
+      // 如果是App并且是安卓，就不显示头部， ios显示
+      // 如果微信小程序环境的，也不显示头部
+      // 如果是h5 就显示头部
+      let bool = false;
+      bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);
+      return bool;
+    },
+  },
+  methods: {
+    goBackFun() {
+      if (this.$listeners.goBack) {
+        this.$emit('goBack');
+        return;
+      }
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .layout-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  ::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;
+  }
+
+  .van-nav-bar {
+    z-index: 1000;
+  }
+}
+</style>

pages/claimCloudPhone/components/setMealItem.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="set-meal-item">
+    <div class="set-meal-item-title">
+      {{ packageType[data.cloudSetMealType] }} 安卓{{ data.androidVersion }}
+    </div>
+    <img src="@/assets/image/claimCloudPhone/vip-bg.png" alt="" />
+    <div :class="['set-meal-item_content', { 'expand-open': isExpand }]">
+      <div
+        v-for="item in data.mealList"
+        :key="item.id"
+        class="set-meal-item_content-item"
+      >
+        <div class="set-meal-item_content-item_left">
+          <div v-if="!type" class="invited">
+            <img :src="require(`@/assets/image/VIP_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>
+            </div>
+          </div>
+          <div v-else>
+            {{ packageType[item.phoneType] }}{{ item.day }}天套餐
+          </div>
+        </div>
+        <div class="set-meal-item_content-item_right">
+          <div class="set-meal-item_content-item_right-price" v-if="type">
+            <span>￥</span
+            >{{ item.originalPrice ? item.originalPrice : item.actualPrice }}
+          </div>
+          <div @click="add(item)">
+            {{ type ? '0元领' : '新增云手机' }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="expand" v-if="data.mealList.length > 2">
+      <span @click="isExpand = !isExpand">
+        {{ isExpand ? '收起' : '查看全部' }}
+        <van-icon :name="isExpand ? 'arrow-up' : 'arrow-down'" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'setMealItem',
+  props: {
+    type: {
+      type: Number,
+      default: 1, // 0是被邀请人 1是邀请人
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      isExpand: false,
+      packageType: {
+        VIP: '星动',
+        SVIP: '星耀',
+        STARRYSKY: '星空',
+        STAR: '唔即',
+        STARPRO: '唔即Pro',
+      },
+    };
+  },
+  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 
+      } 
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.set-meal-item {
+  background: #ffffff;
+  border-radius: 14px;
+  border: 1px solid #feffef;
+  margin-top: 12px;
+  padding: 16px;
+  font-family: PingFangSC, PingFang SC;
+  & > img {
+    height: 59px;
+    width: 100%;
+    margin-top: 12px;
+  }
+  .set-meal-item_content {
+    max-height: 130px;
+    overflow: hidden;
+    &.expand-open {
+      max-height: none;
+    }
+
+    .set-meal-item_content-item {
+      padding: 14px 0;
+      border-bottom: 1px solid #f0f0f0;
+      display: flex;
+      justify-content: space-between;
+      .set-meal-item_content-item_left {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        font-size: 14px;
+        color: #6d2b12;
+        line-height: 20px;
+        text-align: left;
+        font-style: normal;
+        .invited {
+          display: flex;
+          align-items: center;
+          & > img {
+            width: 36px;
+            height: 36px;
+          }
+          .invited-info {
+            margin-left: 8px;
+            & > div:last-of-type {
+              display: flex;
+              & > div {
+                font-weight: bold;
+                line-height: 20px;
+                font-style: normal;
+              }
+              & > div:first-of-type {
+                font-size: 16px;
+                color: #f04646;
+              }
+              & > div:last-of-type {
+                font-size: 12px;
+                color: #bbbbbb;
+                line-height: 23px;
+                text-decoration: line-through;
+                margin-left: 8px;
+              }
+            }
+          }
+        }
+      }
+      .set-meal-item_content-item_right {
+        display: flex;
+        align-items: center;
+        .set-meal-item_content-item_right-price {
+          font-weight: bold;
+          font-size: 16px;
+          color: #f04646;
+          line-height: 20px;
+          text-align: left;
+          font-style: normal;
+          display: flex;
+          align-items: center;
+          margin-right: 5px;
+          text-decoration: line-through;
+        }
+        & > div:last-of-type {
+          height: 30px;
+          padding: 6px 12px;
+          background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
+          border-radius: 21px;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ffffff;
+          line-height: 18px;
+          text-align: left;
+          font-style: normal;
+        }
+      }
+    }
+  }
+
+  .set-meal-item-title {
+    font-weight: bold;
+    font-size: 18px;
+    color: #6d2b12;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .expand {
+    display: flex;
+    justify-content: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #7d6156;
+    line-height: 16px;
+    text-align: center;
+    font-style: normal;
+    margin-top: 16px;
+  }
+}
+</style>

pages/claimCloudPhone/confirmation.vue

@@ -0,0 +1,167 @@
+<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>
+    <div class="confirmation-container">
+      <div class="jump">
+        <div>打开APP，使用完整功能</div>
+        <div>暂不下载，使用网页版</div>
+      </div>
+
+      <div class="confirmation-guide">
+        <div class="confirmation-guide-title">
+          您可在云应用/浏览器直接下载安装应用
+        </div>
+        <img
+          src="@/assets/image/claimCloudPhone/confirmation-guide.png"
+          alt=""
+        />
+        <div class="confirmation-guide-step">
+          <div>
+            <div>1</div>
+            进入云手机
+          </div>
+          <div>
+            <div>2</div>
+            点开云应用，浏览/搜索内容
+          </div>
+          <div>
+            <div>3</div>
+            下载，打开游戏
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  name: 'confirmation',
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  components: {},
+};
+</script>
+
+<style lang="less" scoped>
+.confirmation {
+  height: 100%;
+  background: #f4f6f8;
+  .confirmation-bg {
+    height: 215px;
+    background: #1676fe;
+    padding-top: 38px;
+    border-radius: 0px 0px 46px 46px;
+    .confirmation-tips {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 22px;
+      color: #ffffff;
+      line-height: 30px;
+      text-align: center;
+      font-style: normal;
+      .van-icon-passed {
+        margin-right: 5px;
+      }
+    }
+
+    .confirmation-obtain {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #9ccffb;
+      text-align: center;
+      font-style: normal;
+      margin-top: 12px;
+    }
+  }
+
+  .confirmation-container {
+    padding: 0 26px;
+    .jump {
+      height: 146px;
+      padding: 0 45px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 8px;
+      margin-top: -100px;
+      margin-bottom: 16px;
+      overflow: hidden;
+      & > div:first-of-type {
+        margin-top: 41px;
+        height: 46px;
+        line-height: 46px;
+        background: #3974f2;
+        border-radius: 23px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 14px;
+        color: #ffffff;
+        text-align: center;
+        font-style: normal;
+      }
+      & > div:last-of-type {
+        margin-top: 12px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #bbbbbb;
+        line-height: 17px;
+        text-align: center;
+        font-style: normal;
+      }
+    }
+    .confirmation-guide {
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 16px 10px;
+      .confirmation-guide-title {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: bold;
+        font-size: 16px;
+        color: #0a132b;
+        text-align: center;
+        font-style: normal;
+      }
+
+      & > img {
+        width: 100%;
+        height: 156px;
+        margin: 22px 0;
+      }
+
+      .confirmation-guide-step {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        line-height: 18px;
+        text-align: left;
+        font-style: normal;
+        & > div {
+          display: flex;
+          align-items: center;
+        }
+        div > div {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          line-height: 20px;
+          color: #fff;
+          background: #3b7fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/claimCloudPhone/firstReward.vue

@@ -0,0 +1,80 @@
+<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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  name: 'firstReward',
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  components: {},
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+      }
+
+      .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

@@ -0,0 +1,46 @@
+<template>
+  <div class="loading">加载中...</div>
+</template>
+
+<script>
+import common from './mixins/common.js';
+export default {
+  name: 'claimCloudPhone',
+  auth: false,
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  mixins: [common],
+  data() {
+    return {};
+  },
+  mounted() {
+    setTimeout(() => {
+      this.bargainingStatus();
+    });
+  },
+  methods: {
+    bargainingStatus() {
+      this.$axios
+        .$get('activity/v5/assist/bargaining/current/bargainingStatus')
+        .then((res) => {
+          if (res.success) {
+            // bargainingStatus 0 ：选择云机界面  1：砍一刀界面 2；邀请好友页面 3：成功，领取下一台云机界面  4：失败，领取下一台云机界面
+            switch (res.data.bargainingStatus) {
+              case 0:
+                this.$router.replace('/claimCloudPhone/chooseCloudPhone');
+                break;
+              default:
+                this.$router.replace(
+                  '/claimCloudPhone/' + res.data.bargainingStatus,
+                );
+                break;
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

pages/claimCloudPhone/inviteeExits.vue

@@ -0,0 +1,201 @@
+<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>
+          <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>
+        <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>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  name: 'inviteeExits',
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  data() {
+    return {};
+  },
+  components: {},
+};
+</script>
+
+<style lang="less" scoped>
+.invitee-exits {
+  height: 100%;
+  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-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-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;
+        }
+      }
+    }
+  }
+}
+::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/mixins/common.js

@@ -0,0 +1,76 @@
+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： 被邀请人
+        getActivitySortRuleAndActivityMealList(obj) {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true,
+                duration: 0
+            })
+            const data = { operateActivityId: this.operateActivityId }
+            Object.assign(data, obj)
+            this.$axios.$post('activity/v5/assist/bargaining/getActivitySortRuleAndActivityMealList', data, { headers: this.headers }).then(res => {
+                console.log(res)
+                if (res.success) {
+                    this.packageList = res.data
+                }
+            }).finally(() => {
+                this.$toast.clear();
+            })
+        },
+
+        // 获取服务器的当前时间
+        getSystemTime() {
+            return this.$axios.$get('pay/v1/order/getSystemTime')
+        },
+        // 退出相关逻辑
+        leaveFun() {
+            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) {
+                    this.$wx.miniProgram.navigateBack({
+                        data: 1
+                    })
+                    return
+                }
+                uni.reLaunch({
+                    url: '/pages/index/index'
+                });
+            }
+        },
+        // 拦截微信原生返回相关方法
+        wxIntercept(handlePopstate) {
+            window.removeEventListener('popstate', handlePopstate)
+            history.pushState(null, null, document.URL)
+            window.addEventListener('popstate', handlePopstate)
+        }
+    }
+}

pages/claimCloudPhone/purchase.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="purchase">
+    <van-nav-bar title="0元购机，尽情享受" left-arrow fixed />
+    <div class="purchase-container">
+      <div>
+        <div class="purchase-privilege">
+          <div>
+            <img src="@/assets/image/claimCloudPhone/privilege-1.png" alt="" />
+            应用预装已完成
+          </div>
+          <div>
+            <img src="@/assets/image/claimCloudPhone/privilege-2.png" alt="" />
+            任意下单
+          </div>
+          <div>
+            <img src="@/assets/image/claimCloudPhone/privilege-3.png" alt="" />
+            立即使用云机
+          </div>
+        </div>
+        <setMealItem v-for="item in 10" :key="item" :type="0" />
+      </div>
+
+      <van-popup
+        v-model="visible"
+        position="bottom"
+        :style="{ background: 'transparent' }"
+      >
+        <div class="payment-container">
+          <div class="payment-container-title">新增云手机</div>
+          <div class="payment-container-info">
+            <div>
+              <div class="payment-container-info_value">
+                <span>￥</span>77.90
+              </div>
+              <div class="payment-container-info_name">星耀30天卡</div>
+            </div>
+          </div>
+          <div class="payment-container-num">
+            数量：<van-stepper button-size="18" />
+          </div>
+          <div class="payment-container-method">
+            <div class="payment-container-method_title">选择支付方式</div>
+            <div class="payment-container-method_select">
+              <div class="active">
+                <img
+                  src="@/assets/image/claimCloudPhone/weChatActvie.png"
+                  alt=""
+                />
+                微信
+              </div>
+              <div>
+                <img src="@/assets/image/claimCloudPhone/alipay.png" alt="" />
+                支付宝
+              </div>
+            </div>
+          </div>
+          <div class="payment-container-amount">
+            <div>
+              需支付金额:<span><span>¥</span>77.90</span>
+            </div>
+            <div>确认协议并付款</div>
+          </div>
+          <div class="payment-container-agreement">
+            购买前阅读<span> 《双子星云手机类型服务协议》 </span>
+          </div>
+        </div>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<script>
+import setMealItem from './components/setMealItem.vue';
+export default {
+  auth: false,
+  name: 'purchase',
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  components: { setMealItem },
+};
+</script>
+
+<style lang="less" scoped>
+.purchase {
+  height: 100%;
+  box-sizing: border-box;
+  background: #fdf2e3;
+  .purchase-container {
+    padding: 12.2666666667vw 0 16px;
+    height: 100%;
+    box-sizing: border-box;
+    background: url('~/assets/image/claimCloudPhone/purchase-img.png') no-repeat;
+    background-size: 100% 210px;
+    background-position: 0px 12.2666666667vw;
+    & > div {
+      padding: 224px 16px 0;
+      .purchase-privilege {
+        padding: 16px;
+        height: 102px;
+        background: #ffffff;
+        box-shadow: 0px 2px 4px 0px #f6e5d3;
+        border-radius: 8px;
+        display: grid;
+        grid-gap: 8px;
+        grid-template-columns: repeat(3, 1fr);
+        & > div {
+          text-align: center;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #1c2023;
+          line-height: 20px;
+          font-style: normal;
+          & > img {
+            width: 42px;
+            height: 42px;
+            display: block;
+            margin: 0 auto;
+          }
+        }
+      }
+    }
+  }
+
+  .payment-container {
+    border-radius: 10px 10px 0 0;
+    padding: 16px;
+    height: 66vh;
+    display: flex;
+    flex-direction: column;
+    background: #f4f6f8;
+    overflow-y: auto;
+    .payment-container-title {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: bold;
+      font-size: 18px;
+      color: #0a132b;
+      line-height: 20px;
+      text-align: center;
+      font-style: normal;
+    }
+
+    .payment-container-info {
+      margin-top: 16px;
+      height: 100px;
+      background: #ffffff;
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .payment-container-info_value {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: bold;
+        font-size: 18px;
+        color: #0a132b;
+        font-style: normal;
+        span {
+          font-size: 14px;
+        }
+      }
+
+      .payment-container-info_name {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #0a132b;
+        font-style: normal;
+      }
+    }
+
+    .payment-container-num {
+      margin-top: 16px;
+      padding: 16px;
+      box-sizing: border-box;
+      height: 50px;
+      background: #ffffff;
+      border-radius: 16px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: bold;
+      font-size: 14px;
+      color: #0a132b;
+      line-height: 18px;
+      text-align: left;
+      display: flex;
+      font-style: normal;
+      .van-stepper {
+        margin-left: 10px;
+      }
+    }
+
+    .payment-container-method {
+      .payment-container-method_title {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: bold;
+        font-size: 14px;
+        color: #0a132b;
+        line-height: 18px;
+        text-align: left;
+        font-style: normal;
+        margin: 16px 0;
+      }
+
+      .payment-container-method_select {
+        display: grid;
+        grid-gap: 8px;
+        grid-template-columns: repeat(2, 1fr);
+        & > div {
+          height: 54px;
+          line-height: 54px;
+          background: #edeef0;
+          border-radius: 6px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0 18px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 14px;
+          color: #666666;
+          border: 1px solid transparent;
+          line-height: 18px;
+          font-style: normal;
+
+          &.active {
+            background: #ffffff;
+            border-radius: 6px;
+            border: 1px solid #3b7fff;
+            position: relative;
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              width: 26px;
+              height: 15px;
+              background: #3a86fe;
+              border-radius: 0px 6px 0px 6px;
+              display: block;
+              content: '√';
+              font-size: 10px;
+              text-align: center;
+              line-height: 15px;
+              color: #ffffff;
+            }
+          }
+          & > img {
+            width: 24px;
+            height: 24px;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+
+    .payment-container-amount {
+      background: #ffffff;
+      box-shadow: 0px 0px 13px 0px rgba(206, 206, 206, 0.5);
+      border-radius: 16px;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 24px;
+      & > div:first-of-type {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: bold;
+        font-size: 14px;
+        color: #0a132b;
+        line-height: 20px;
+        text-align: left;
+        font-style: normal;
+        padding: 16px 0 16px 16px;
+        & > span {
+          font-size: 18px;
+          color: #f04646;
+          line-height: 20px;
+          font-style: normal;
+          span {
+            font-size: 12px;
+          }
+        }
+      }
+
+      & > div:last-of-type {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 55px;
+        text-align: left;
+        font-style: normal;
+        width: 136px;
+        height: 55px;
+        text-align: center;
+        background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
+        border-radius: 16px;
+      }
+    }
+
+    .payment-container-agreement {
+      margin-top: 9px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 12px;
+      color: #bbbbbb;
+      line-height: 16px;
+      text-align: center;
+      font-style: normal;
+      span{
+        color: #3A86FE;
+      }
+    }
+  }
+}
+::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/secondReward.vue

@@ -0,0 +1,162 @@
+<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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  name: 'secondReward',
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  data() {
+    return {
+      applicationList: [1, 2, 3, 4, 5, 6, 10, 11, 12, 50], //  应用数组
+      adaptedModels: [1], // 适配机型
+      isSelectBool: true,
+    };
+  },
+  components: {},
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+      }
+
+      .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

@@ -0,0 +1,58 @@
+<template>
+  <layout>
+    <div class="zero-yuan-claim">
+      <img
+        class="zero-yuan-claim-title"
+        src="@/assets/image/claimCloudPhone/zero-yuan-claim-title.png"
+      />
+      <div>
+        <template v-for="item in packageList">
+          <setMealItem
+            :key="item.serialNumber"
+            :data="item"
+            v-if="item.mealList && item.mealList.length"
+            :type="1"
+          />
+        </template>
+      </div>
+    </div>
+  </layout>
+</template>
+
+<script>
+import layout from './components/layout.vue';
+import setMealItem from './components/setMealItem.vue';
+import common from './mixins/common.js';
+export default {
+  name: 'zeroYuanClaim',
+  auth: false,
+  head: {
+    title: '0元购机，尽情享受',
+  },
+  mixins: [common],
+  components: { layout, setMealItem },
+  data() {
+    return {};
+  },
+  mounted() {
+    const { userCardId } = this.$route.query;
+    const obj = {
+      personnelMealType: 1,
+    };
+    if (userCardId) obj.userCardId = userCardId;
+    this.getActivitySortRuleAndActivityMealList(obj);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.zero-yuan-claim {
+  height: 100%;
+  .zero-yuan-claim-title {
+    height: 40px;
+    margin: 0 auto;
+    display: block;
+  }
+}
+</style>

plugins/axios.js

@@ -15,6 +15,7 @@ export default function ({ $axios, $auth, $userAgent, query, redirect }) {
     } else {
       config.headers.client = 7;
     }
+    config.headers.versionname = '5.8.1'
     return config;
   });
   $axios.onResponse(async (response) => {
@@ -35,7 +36,6 @@ export default function ({ $axios, $auth, $userAgent, query, redirect }) {
 
         // if (response.data.status === 502) {
         // }
-
         throw new AxiosError(
           response.data.msg || response.data.data || '未知错误',
           null,

plugins/plugins.js

@@ -0,0 +1,16 @@
+export function timeStamp(StatusMinute, userCardType, nextSendTime) {
+    var day = parseInt(StatusMinute / 60 / 24);
+    var hour = parseInt((StatusMinute / 60) % 24);
+    var min = parseInt(StatusMinute % 60);
+    StatusMinute = '';
+    if (day > 0) {
+        StatusMinute = day + '天';
+    }
+    if (hour > 0) {
+        StatusMinute += hour + '小时';
+    }
+    if (day === 0 && min > 0) {
+        StatusMinute += parseFloat(min) + '分钟';
+    }
+    return StatusMinute.length ? StatusMinute : userCardType === 1 ? '0小时' : '';
+}