bugfix：修复已知bug

components/loadList/index.vue

@@ -46,30 +46,28 @@ export default {
       total: 0,
     };
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     onLoad() {
-      this.defaultParams.pageNum++;
-      this.list(true);
       if (this.data.length >= this.total) {
         this.finished = true;
+        return;
       }
+      this.defaultParams.pageNum++;
+      this.list(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;
-          }
-        });
+      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;
+        }
+      });
     },
   },
 };

components/lottie/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <lottie-animation :options="defaultOptions"  v-on:animCreated="handleAnimation" />
+</template>
+
+<script>
+import LottieAnimation from 'vue-lottie';
+export default {
+  props: ['data'],
+  name: 'lottie',
+  data() {
+    return {
+      defaultOptions: {},
+      key: +new Date()
+    };
+  },
+  created() {
+    if (this.data.default) {
+      this.data.default.assets.forEach((item) => {
+        item.u = '';
+        if (item.w && item.h) {
+          item.p = require(`@/assets/lottie/images/${item.p}`);
+        }
+      });
+      this.defaultOptions = {
+        animationData: this.data.default,
+        renderer: 'svg', //渲染方式，svg、canvas、html（轻量版仅svg渲染）
+        loop: true, //是否循环播放，true表示循环，false表示不循环
+        autoplay: true, //是否自动播放，true表示自动播放
+      };
+    }
+  },
+  components: {
+    LottieAnimation,
+  },
+  methods: {
+    handleAnimation(anim) {
+      console.log(anim)
+    }
+  }
+};
+</script>
+
+<style></style>

package-lock.json

@@ -36,6 +36,7 @@
         "vee-validate": "^3.4.14",
         "vue": "^2.7.8",
         "vue-data-dict": "^1.0.6",
+        "vue-lottie": "^0.2.1",
         "vue-server-renderer": "^2.7.8",
         "vue-template-compiler": "^2.7.8",
         "vuetify": "^2.6.1",
@@ -11013,6 +11014,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmmirror.com/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "node_modules/lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-1.1.4.tgz",
@@ -18419,6 +18425,17 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue-lottie": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/vue-lottie/-/vue-lottie-0.2.1.tgz",
+      "integrity": "sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==",
+      "dependencies": {
+        "lottie-web": "^5.1.9"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.16"
+      }
+    },
     "node_modules/vue-meta": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/vue-meta/-/vue-meta-2.4.0.tgz",
@@ -28848,6 +28865,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmmirror.com/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-1.1.4.tgz",
@@ -34961,6 +34983,14 @@
         }
       }
     },
+    "vue-lottie": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/vue-lottie/-/vue-lottie-0.2.1.tgz",
+      "integrity": "sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==",
+      "requires": {
+        "lottie-web": "^5.1.9"
+      }
+    },
     "vue-meta": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/vue-meta/-/vue-meta-2.4.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "vee-validate": "^3.4.14",
     "vue": "^2.7.8",
     "vue-data-dict": "^1.0.6",
+    "vue-lottie": "^0.2.1",
     "vue-server-renderer": "^2.7.8",
     "vue-template-compiler": "^2.7.8",
     "vuetify": "^2.6.1",

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -27,7 +27,10 @@
       </div>
     </div>
     <!-- 砍价进度 -->
-    <div class="bargaining-assistance-main" :class="{'bargaining-assistance-main-animation': !+type}">
+    <div
+      class="bargaining-assistance-main"
+      :class="{ 'bargaining-assistance-main-animation': !+type }"
+    >
       <!-- 被邀请人助力、邀请人砍价 -->
       <template>
         <div class="package-name">
@@ -152,18 +155,40 @@
     </van-dialog>
 
     <!-- 邀请人首次到砍价的页面的弹窗 -->
-    <van-dialog v-model="bargainingVisible" :showConfirmButton="false">
-      <div
-        class="bargaining-img"
-        @click="bargainingFun(true)"
-        v-if="!bargainingTipsBool"
-      ></div>
-      <template v-else>
+    <van-dialog
+      v-model="bargainingVisible"
+      :showConfirmButton="false"
+      class="dialog-bargaining"
+    >
+      <template v-if="!bargainingTipsBool">
+        <div class="bargaining-img">
+          <img
+            src="@/assets/image/claimCloudPhone/red-packet-title.png"
+            alt=""
+            style="
+              width: 90%;
+              height: 146px;
+              position: absolute;
+              top: 0;
+              left: 50%;
+              transform: translateX(-50%);
+            "
+          />
+          <lottie class="glory" :data="glory" key="'glory'" />
+          <lottie
+            :key="'red-packet'"
+            class="red-packet"
+            :data="!bargainingTipsBool ? redPacket : {}"
+            @click.native="bargainingFun(true)"
+          />
+        </div>
+      </template>
+      <template v-if="bargainingTipsBool">
         <div class="bargaining-amount">
           <div class="bargaining-amount-text">
             恭喜您，砍价成功<span>{{ bargainingAmount }}元</span>
           </div>
-          <div class="bargaining-amount-img"></div>
+          <lottie class="species" :data="species" :key="'species'" />
         </div>
       </template>
     </van-dialog>
@@ -272,18 +297,22 @@
     </van-dialog>
     <van-dialog
       v-model="endVisible"
-      confirmButtonText="下载云机,尽享新人优惠"
-      confirmButtonColor="#169bd5"
-      @confirm="endConfirm"
+      :showConfirmButton="false"
+      :before-close="beforeClose"
       style="background: #fff"
-      class="end-visible-dialog"
     >
-      <div style="text-align: center; padding: 10px; color: #999">
+      <img
+        src="@/assets/image/claimCloudPhone/end-visible-img.png"
+        @click="endConfirm"
+        t=""
+        style="width: 289px; height: 264px; margin: 0 auto; display: block"
+      />
+      <!-- <div style="text-align: center; padding: 10px; color: #999">
         感谢您对我们应用的支持和参与。<br />
         我们的活动已经结束了,<br />
         但是我们会不断努力,<br />
         为您带来更多精彩的活动和内容。<br />
-      </div>
+      </div> -->
     </van-dialog>
     <Verify
       @success="success"
@@ -302,6 +331,11 @@ import loadList from '@/components/loadList';
 import { fileKeyToUrl } from '@/plugins/file-center.js';
 import Verify from '@/components/verifition/Verify';
 import { writeToClipboard } from '@/plugins/plugins.js';
+import lottie from '@/components/lottie';
+import * as species from '@/assets/lottie/species/data.json';
+import * as redPacket from '@/assets/lottie/redPacket/data.json';
+import * as glory from '@/assets/lottie/glory/data.json';
+
 export default {
   props: {
     operateActivityId: {
@@ -362,12 +396,16 @@ export default {
       codeNumber: '获取验证码',
       loginLoading: false,
       endVisible: false, // 被邀请人活动结束弹窗
+      species,
+      redPacket,
+      glory,
     };
   },
   components: {
     customProgress,
     loadList,
     Verify,
+    lottie,
   },
   mounted() {
     if (sessionStorage.getItem('isAgreementBool')) {
@@ -446,6 +484,7 @@ export default {
         div.style = 'opacity: 0';
         div.innerHTML = `<div>
             <div>${phoneNumber}</div>
+            <div class="free">免单</div>
           </div>
           <div>${phoneType}${duration}天，价值<span>${price}元</span></div>`;
         return div;
@@ -675,7 +714,9 @@ export default {
           }
         })
         .catch((error) => {
-          this.$toast(error.message);
+          setTimeout(() => {
+            this.$toast(error.message);
+          });
           setTimeout(() => {
             this.$toast.clear();
           }, 500);
@@ -884,6 +925,9 @@ export default {
     endConfirm() {
       location.href = 'https://www.androidscloud.com';
     },
+    beforeClose(action, done) {
+      done(false);
+    },
   },
 };
 </script>
@@ -972,17 +1016,6 @@ export default {
       span {
         color: #ffe7a1;
       }
-
-      // font-weight: 400;
-      // font-size: 14px;
-      // color: #ffffff;
-      // line-height: 22px;
-      // text-align: left;
-      // font-style: normal;
-      // span {
-      //   color: #fceba9;
-      // }
-      // margin-bottom: 24px;
     }
   }
   .bargaining-assistance-main {
@@ -990,7 +1023,7 @@ export default {
     border-radius: 20px;
     margin-bottom: 24px;
     overflow: hidden;
-    &.bargaining-assistance-main-animation{
+    &.bargaining-assistance-main-animation {
       opacity: 0;
       animation: invitee-tips-text 0.5s linear forwards;
       animation-delay: 2s;
@@ -1028,16 +1061,17 @@ export default {
       font-weight: bold;
       width: calc(100% - 24px);
       margin: 0 auto;
-      background: #ffffff;
+      background: #fff3f5;
       box-shadow: 0px 0px 8px 2px #f4f7f8, 0px 2px 4px 0px #ecedf8;
       border-radius: 20px;
       margin-top: -20px;
+      border: 1px solid #eaeaea;
       span {
         font-size: 30px;
       }
     }
     .package-progress {
-      margin: 40px 42px 28px;
+      margin: 24px 42px 35px;
     }
     .package-tips {
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -1295,11 +1329,22 @@ export default {
         line-height: 16px;
         &:first-of-type {
           display: flex;
-          & > div {
+          justify-content: space-between;
+          align-items: center;
+          & > div:first-of-type {
+            width: 60px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          & > div:last-of-type {
+            height: 16px;
+            line-height: 16px;
+            margin-right: 15px;
+            padding: 0 8px;
+            background: linear-gradient(to top, #fec37a 0%, #ff1500 100%);
+            border-radius: 21px;
+          }
         }
         &:last-of-type span {
           color: #fddb2b;
@@ -1369,21 +1414,16 @@ export default {
 
   ::v-deep .van-dialog {
     background: transparent !important;
+    // overflow: visible;
   }
 
   .bargaining-img {
-    height: 512px;
-    width: 100%;
-    background: url('~/assets/image/claimCloudPhone/bargaining-popUp.png')
-      no-repeat 0 20px;
-    background-size: 100% 100%;
+    position: relative;
+    width: 336px;
+    height: 468px;
   }
 
   .bargaining-amount {
-    height: 300px;
-    background: url('~/assets/image/claimCloudPhone/bargaining-amount-img.png')
-      no-repeat 0 20px;
-    padding-top: 30px;
     box-sizing: border-box;
     background-size: 100% auto;
     .bargaining-amount-text {
@@ -1428,7 +1468,7 @@ export default {
       }
 
       .exit-content-progress {
-        margin: 50px 10px 80px;
+        margin: 30px 10px 100px;
       }
 
       .exit-content-btn {
@@ -1598,9 +1638,31 @@ export default {
   ::v-deep .phone-container {
     background: transparent;
   }
+}
 
-  ::v-deep .end-visible-dialog {
-    background: #fff !important;
-  }
+.dialog-bargaining {
+  overflow: visible;
+}
+
+.species {
+  height: 234px !important;
+}
+
+.glory,
+.red-packet {
+  position: absolute;
+  top: 90%;
+  left: 50%;
+}
+
+.glory {
+  top: 116%;
+  transform: translate(-50%, -110%) scale(1.5);
+}
+
+.red-packet {
+  width: 259px !important;
+  height: 318px !important;
+  transform: translate(-50%, -90%);
 }
 </style>

pages/claimCloudPhone/components/customProgress.vue

@@ -6,17 +6,17 @@
       :style="{ width: total + '%' }"
     ></div>
     <div
-      class="progress-round"
+      :class="['progress-round', { 'progress-round-white': +total >= 50 }]"
       style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
       data-precrnt="50%"
     ></div>
     <div
-      class="progress-round"
+      :class="['progress-round', { 'progress-round-white': +total >= 75 }]"
       style="top: 50%; left: 75%; transform: translate(-75%, -50%)"
       data-precrnt="75%"
     ></div>
     <div
-      class="progress-round"
+      :class="['progress-round', { 'progress-round-white': +total >= 90 }]"
       style="top: 50%; left: 90%; transform: translate(-90%, -50%)"
       data-precrnt="90%"
     ></div>
@@ -55,7 +55,6 @@ export default {
     border-radius: 6px;
     transition: width 0.5s;
     position: relative;
-    z-index: 1;
     &.started::after {
       position: absolute;
       top: 50%;
@@ -73,6 +72,7 @@ export default {
       height: 16px;
       background: #ff3535;
       border-radius: 9px;
+      z-index: 1;
     }
   }
 
@@ -83,41 +83,50 @@ export default {
     border-radius: 50%;
     position: absolute;
     z-index: 0;
+    &.progress-round-white{
+      background: #FFFFFF;
+    }
     &::after {
       position: absolute;
-      top: -30px;
-      left: 50%;
-      transform: translateX(-50%);
+      top: 13px;
+      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;
+      font-weight: 400;
+      font-size: 10px;
+      color: #000000;
       line-height: 12px;
-      text-align: center;
       font-style: normal;
-      border-radius: 25px;
-      line-height: 19px;
+      // 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;
+      // 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;
     }
   }
 }

pages/claimCloudPhone/components/setMealItem.vue

@@ -22,6 +22,9 @@
                 <div v-if="item.originalPrice" class="original-price">
                   <span>￥</span>{{ item.originalPrice }}
                 </div>
+                <div class="difference" v-if="item.originalPrice && item.actualPrice">
+                  免单 {{ difference(item) }} 元
+                </div>
               </div>
             </div>
           </div>
@@ -50,6 +53,7 @@
 </template>
 
 <script>
+import BigNumber from "bignumber.js";
 export default {
   name: 'setMealItem',
   props: {
@@ -115,8 +119,12 @@ export default {
       }
       this.$emit('buy', data);
     },
+    difference({originalPrice, actualPrice}) {
+      return +new BigNumber(originalPrice).minus(new BigNumber(actualPrice));
+    },
   },
   computed: {
+
     list() {
       this.data.mealList.length > 10
         ? this.data.mealList.slice(0, 9)
@@ -251,5 +259,19 @@ export default {
     font-style: normal;
     margin-top: 10px;
   }
+
+  .difference {
+    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 12px;
+    color: #f04646;
+    line-height: 16px;
+    text-align: left;
+    font-style: normal;
+    margin-left: 4px;
+  }
 }
 </style>

pages/claimCloudPhone/confirmation.vue

@@ -28,20 +28,6 @@
           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>
@@ -100,7 +86,6 @@ export default {
         .then((res) => {
           if (res.success) {
             this.currentStatus = res.data;
-            console.log(this.currentStatus, 123456)
             if (+res.data === 2) {
               if (this.index === 2) {
                 this.currentStatus = 3;
@@ -142,7 +127,7 @@ export default {
   background: #f4f6f8;
   .confirmation-bg {
     height: 215px;
-    background: #1676fe;
+    background: #ff707d;
     padding-top: 38px;
     border-radius: 0px 0px 46px 46px;
     .confirmation-tips {
@@ -162,7 +147,8 @@ export default {
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 14px;
-      color: #9ccffb;
+      color: #fff5dc;
+      line-height: 20px;
       text-align: center;
       font-style: normal;
       margin-top: 12px;
@@ -198,7 +184,7 @@ export default {
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         font-size: 12px;
-        color: #bbbbbb;
+        color: #666666;
         line-height: 17px;
         text-align: center;
         font-style: normal;
@@ -219,36 +205,8 @@ export default {
 
       & > 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;
-        }
-      }
     }
   }
 }

pages/claimCloudPhone/firstReward.vue

@@ -68,13 +68,10 @@ export default {
   }
   .btn-box {
     opacity: 0;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    margin-top: 15px;
     animation: first-reward 0.5s forwards linear;
     & > div {
       text-align: center;
@@ -83,6 +80,8 @@ export default {
       margin-bottom: 20px;
     }
     .btn {
+      width: 281px;
+      margin: 0 auto;
       height: 56px;
     }
   }

pages/claimCloudPhone/index.vue

@@ -34,6 +34,7 @@ export default {
       userLaunchId,
       bool = 0,
     } = this.$route.query;
+    
     if (invitationUserName && operateActivityId && userLaunchId) {
       // 删除旧的token
       setTimeout(() => {

pages/claimCloudPhone/purchase.vue

@@ -68,6 +68,9 @@
                     alt=""
                   />
                   {{ item.name }}
+                  <div v-if="active === item.key" class="active-icon">
+                    <van-icon name="success" />
+                  </div>
                 </div>
               </template>
             </div>
@@ -91,9 +94,34 @@
         </div>
       </van-popup>
 
-      <van-dialog v-model="activityPurchaseVisible" @cancel="confirm(false)" @confirm="confirm(true)" show-cancel-button confirmButtonText="“已完成支付" confirmButtonColor="#3367d1">
-        <div style="font-size: 18px; font-weight: bold;text-align: center;padding-top: 10px;">如果您已支付成功</div>
-        <div style="font-size: 18px; font-weight: bold;text-align: center;padding-bottom: 10px;">请点击"已完成支付"按钮</div>
+      <van-dialog
+        v-model="activityPurchaseVisible"
+        @cancel="confirm(false)"
+        @confirm="confirm(true)"
+        show-cancel-button
+        confirmButtonText="“已完成支付"
+        confirmButtonColor="#3367d1"
+      >
+        <div
+          style="
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+            padding-top: 10px;
+          "
+        >
+          如果您已支付成功
+        </div>
+        <div
+          style="
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+            padding-bottom: 10px;
+          "
+        >
+          请点击"已完成支付"按钮
+        </div>
       </van-dialog>
     </div>
   </layout>
@@ -197,7 +225,10 @@ export default {
           };
 
           if (res.success) {
-            localStorage.setItem('activityPurchaseMyOrderNum', res.data.myOrderNum);
+            localStorage.setItem(
+              'activityPurchaseMyOrderNum',
+              res.data.myOrderNum,
+            );
             const data = {
               myOrderNum: res.data.myOrderNum,
             };
@@ -279,10 +310,10 @@ export default {
       this.$router.push('/claimCloudPhone/inviteeExits');
     },
     confirm(bool) {
-      if(bool) return this.$router.replace('/claimCloudPhone/confirmation')
+      if (bool) return this.$router.replace('/claimCloudPhone/confirmation');
       this.activityPurchaseVisible = false;
       localStorage.removeItem('activityPurchaseVisible');
-    }
+    },
   },
 };
 </script>
@@ -298,9 +329,8 @@ export default {
     background: #ffffff;
     box-shadow: 0px 2px 4px 0px #f6e5d3;
     border-radius: 8px;
-    display: grid;
-    grid-gap: 8px;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    justify-content: space-between;
     & > div {
       text-align: center;
       font-family: PingFangSC, PingFang SC;
@@ -321,14 +351,13 @@ export default {
   .payment-container {
     border-radius: 10px 10px 0 0;
     padding: 16px;
-    margin: 0 16px;
     display: flex;
     flex-direction: column;
     background: #f4f6f8;
     overflow-y: auto;
     .payment-container-title {
       font-family: PingFangSC, PingFang SC;
-      font-weight: bold;
+      font-weight: 500;
       font-size: 18px;
       color: #0a132b;
       line-height: 20px;
@@ -346,12 +375,14 @@ export default {
       align-items: center;
       .payment-container-info_value {
         font-family: PingFangSC, PingFang SC;
-        font-weight: bold;
-        font-size: 18px;
+        font-weight: 500;
+        font-size: 28px;
         color: #0a132b;
+        line-height: 32px;
+        text-align: center;
         font-style: normal;
         span {
-          font-size: 14px;
+          font-size: 18px;
         }
       }
 
@@ -360,6 +391,8 @@ export default {
         font-weight: 400;
         font-size: 14px;
         color: #0a132b;
+        line-height: 18px;
+        text-align: center;
         font-style: normal;
       }
     }
@@ -398,8 +431,8 @@ export default {
 
       .payment-container-method_select {
         display: grid;
-        grid-gap: 8px;
-        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px;
+        grid-template-columns: repeat(3, 1fr);
         & > div {
           height: 54px;
           line-height: 54px;
@@ -408,21 +441,20 @@ export default {
           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;
+          font-style: normal;
+          font-weight: 500;
+          font-size: 14px;
           line-height: 18px;
           font-style: normal;
-
           &.active {
             background: #ffffff;
             border-radius: 6px;
             border: 1px solid #3b7fff;
             position: relative;
-            &::after {
+            .active-icon {
               position: absolute;
               top: 0;
               right: 0;
@@ -430,12 +462,12 @@ export default {
               height: 15px;
               background: #3a86fe;
               border-radius: 0px 6px 0px 6px;
-              display: block;
-              content: '√';
-              font-size: 10px;
-              text-align: center;
-              line-height: 15px;
-              color: #ffffff;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .van-icon-success {
+                color: #fff;
+              }
             }
           }
           & > img {
@@ -456,20 +488,21 @@ export default {
       margin-top: 24px;
       & > div:first-of-type {
         font-family: PingFangSC, PingFang SC;
-        font-weight: bold;
+        font-weight: 500;
         font-size: 14px;
         color: #0a132b;
         line-height: 20px;
-        text-align: left;
         font-style: normal;
         padding: 16px 0 16px 16px;
         & > span {
-          font-size: 18px;
+          font-weight: 500;
+          font-size: 24px;
           color: #f04646;
           line-height: 20px;
+          text-align: left;
           font-style: normal;
           span {
-            font-size: 12px;
+            font-size: 14px;
           }
         }
       }
@@ -479,12 +512,12 @@ export default {
         font-weight: 600;
         font-size: 16px;
         color: #ffffff;
-        line-height: 55px;
-        text-align: left;
+        line-height: 22px;
+        text-align: center;
         font-style: normal;
-        width: 136px;
+        line-height: 55px;
         height: 55px;
-        text-align: center;
+        width: 136px;
         background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
         border-radius: 16px;
       }
@@ -509,243 +542,4 @@ export default {
 .disabled {
   opacity: 0.3;
 }
-// .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

@@ -1,37 +1,54 @@
 <template>
-  <layout
-    bgImgName="second-reward-img"
-    bgColor="#f64d5d"
-    bgHeight="188"
-    @goBack="goBack"
-  >
+  <layout bgImgName="second-reward-img" bgColor="#f64d5d" bgHeight="188">
     <div class="second-reward">
       <div class="second-reward-title">
         请搜索您希望在云机内运行的应用为您安装至云机
       </div>
-      <div v-if="!isSelectBool">
+      <div>
         <div class="application">
           <div
             v-for="item in applicationList"
             :key="item"
-            @click="toDetails(item)"
+            :class="{ active: item === imgName }"
+            @click="selectApplication(item)"
           >
+            <img
+              src="@/assets/image/claimCloudPhone/active-checked.png"
+              alt=""
+              v-if="item === imgName"
+            />
             {{ 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="toPurchase"
-        />
-      </div>
+      <img
+        :src="
+          require(`@/assets/image/claimCloudPhone/${
+            this.imgIndex
+              ? `installApps_${this.imgIndex}`
+              : 'second-reward-empty'
+          }.png`)
+        "
+        alt=""
+        style="
+          height: 130px;
+          width: 95%;
+          display: block;
+          margin: 24px auto 20px;
+        "
+      />
+      <img
+        :src="
+          require(`@/assets/image/claimCloudPhone/${
+            imgName
+              ? 'claim-mobile-phone-btn'
+              : 'claim-mobile-phone-btn-prohibit'
+          }.png`)
+        "
+        alt=""
+        class="btn"
+        @click="toPurchase"
+      />
     </div>
   </layout>
 </template>
@@ -57,29 +74,23 @@ export default {
         '传奇',
         '倩女幽魂',
       ], //  应用数组
-      adaptedModels: [1], // 适配机型
-      isSelectBool: false,
+      imgIndex: '',
       imgName: '',
-      IMG_URL: process.env.IMG_URL,
     };
   },
   components: { layout },
   methods: {
-    toDetails(applicationName) {
+    selectApplication(name) {
+      this.imgIndex = this.applicationList.indexOf(name) + 1;
+      this.imgName = name;
+    },
+    toPurchase() {
       // 埋点
       this.$axios
-        .$post('public/v5/User/selects/addApplication', { applicationName })
+        .$post('public/v5/User/selects/addApplication', {
+          applicationName: this.imgName,
+        })
         .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);
-    },
-    toPurchase() {
-      localStorage.removeItem('activityPurchaseVisible');
       this.$router.push('/claimCloudPhone/purchase');
     },
   },
@@ -117,123 +128,27 @@ export default {
       font-style: normal;
       background: #fff1e1;
       border-radius: 14px;
+      opacity: 0.8;
       padding: 11px 0;
+      &.active {
+        opacity: 1;
+        position: relative;
+        & > img {
+          position: absolute;
+          top: -5px;
+          right: 0px;
+          width: 16px;
+          height: 16px;
+          z-index: 1;
+        }
+      }
     }
   }
 
-  .details {
-    margin-top: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .details-img {
-      height: 130px;
-      width: 100%;
-    }
-
-    .details-btn {
-      margin-top: 32px;
-      height: 56px;
-    }
+  .btn {
+    display: block;
+    margin: 0 auto;
+    height: 56px;
   }
 }
-//   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>