android-cloud-H5/pages/claimCloudPhone/confirmation.vue

<template>
  <div class="confirmation">
    <div class="confirmation-bg">
      <div class="confirmation-tips">
        <template v-if="status[currentStatus]">
          <van-icon
            :name="status[currentStatus].key"
            v-if="status[currentStatus].key"
          />
          {{ status[currentStatus].name }}
        </template>
      </div>
      <div class="confirmation-obtain" v-if="currentStatus !== 2">
        3大权益已开通&nbsp;&nbsp;云机已到账
      </div>
    </div>
    <div class="confirmation-container">
      <div class="jump">
        <div @click="download">打开APP，使用完整功能</div>
        <div @click="toH5">暂不下载，使用网页版</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: {},
  data() {
    return {
      bargainingStatusInfo: {},
      status: {
        1: {
          name: '支付成功',
          key: 'passed',
        },
        2: {
          name: '支付中...',
          key: 0,
        },
        3: {
          name: '支付失败',
          key: 'close',
        },
      },
      currentStatus: '',
      index: 1,
    };
  },
  mounted() {
    this.getPayStatus();
    this.bargainingStatusInfo = JSON.parse(
      localStorage.getItem('bargainingStatusInfo'),
    );
  },
  methods: {
    getPayStatus(bool = true) {
      if (bool) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        });
      }
      this.$axios
        .$get('pay/v1/alipay/h5/spend/getPayStatus', {
          params: {
            myOrderNum: localStorage.getItem('activityPurchaseMyOrderNum'),
          },
        })
        .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;
                this.$set(
                  this.status[this.currentStatus],
                  'name',
                  '去app查看结果',
                );
                this.index = 1;
                return;
              }
              this.index++;
              setTimeout(() => {
                this.getPayStatus(false);
              }, 2000);
            }
          }
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    download() {
      location.href = this.$userAgent.isAndroid
        ? this.bargainingStatusInfo.downloadAndroidUrl
        : 'https://www.androidscloud.com';
    },
    toH5() {
      location.href =
        'http://gntest.phone.androidscloud.com:1280/cloud/phone/web/#/';
    },
  },
};
</script>

<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>