android-cloud-H5/pages/rtcEngine/components/TimeBalance.vue

<template>
  <div>
    <!-- 计时卡计时 -->
    <div class="pfi flex timing" v-if="timingVisible">
      <div>{{countdownTime}}</div>
      <img class="wh22" :src="closePath" alt="" @click="handlecountdownTimeClose" />
    </div>

    <!-- 计费规则 -->
    <van-dialog v-model="billingRulesVisible" :show-confirm-button="false" class="billing-rules-modal">
      <div class="tc">
        <img class="billing-rules-img" :src="countdownPath" />
      </div>
      <div class="tc billing-rules-title">
        计费规则
      </div>
      <div class="tc">进入云机开始计时，点击退出并下机停止计时。点击退出云机仍处于计时状态。</div>
      <div class="tc billing-rules-tips">云机时长剩余：<span class="billing-rules-time">{{countdownTime}}</span>
      </div>
      <div class="billing-rules-btn" @click="getRecommend">我知道了</div>
    </van-dialog>

    <!-- 应用推荐 -->
    <van-dialog v-model="applyRecommendVisible" :show-confirm-button="false" class="apply-recommend-modal">
        <div>
            <div class="tc apply-recommend-title">应用推荐</div>
            <div class="apply-recommend-list">
              <div v-for="(item, index) in recommendList" :key="item.id" :class="['flex w100', {'mt-4': index !== 0}]">
                <div class="left flex-align-c">
                  <img :src="item.imageUrl" alt="">
                  <div>
                    <div class="title ellipsis">{{item.filename}}</div>
                    <div class="download-num">有{{item.installNum}}个人下载</div>
                  </div>
                </div>
                <div class="right flex-align-c" @click="downAndInstallApk(item)">
                  <div>下载</div>
                </div>
              </div>
            </div>
            <div class="apply-recommend-btn tc" @click="getRecommend">换一批</div>
        </div>
        <img class="apply-recommend-close pab" :src="applyClosePath" alt="" @click="applyRecommendVisible = false" />
    </van-dialog>
  </div>
</template>

<script>
/**
 * 计时卡计时
 */
export default {
  name: 'TimeBalance',
  props: {
    // 当前云机id
    userCardId: {
      type: [String, Number],
      default: ''
    },
    // 云机的类型  0 普通套餐 1、2、3：年卡、普通计时、自动续费普通计时 
    userCardType: {
      type: [String, Number],
      default: ''
    },
    // url中获取的参数, 父组件传递
    parametersData: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      // 计时卡是否显示
      timingVisible: false,
      // 倒计时时间
      countdownTime: 0,
      // 倒计时定时器
      countdownTimeInterval: null,
      closePath: '../static/img/close.png',

      // 计费规则是否显示
      billingRulesVisible: false,
      countdownPath: '../rtcEngine/img/countdown.png',

      // 应用推荐列表
      applyRecommendVisible: false,
      // 应用推荐列表数据
      recommendList: [],
      applyClosePath: '../rtcEngine/img/close.png',
    }
  },
  methods: {
    // 获取云机剩余时长
    async getResidueTime() {
        clearInterval(this.countdownTimeInterval)
        const { isShowCountdown, isShowRule } = this.parametersData;
        if (![1, 2, 3].includes(+this.userCardType)) return;
        const res = await this.$axios.get(`/resources/yearMember/getResidueTime?userCardId=${this.userCardId}`);
        let time = res.data;
        if (!res.status) {
          this.countdownTime = this.residueTimeStamp(time);
          await this.$axios.get(`/resources/yearMember/startTime?userCardId=${this.userCardId}`);
          // 计时卡显示
          if (+isShowCountdown) this.timingVisible = true;
          // 计费规则显示
          if (+isShowRule) this.billingRulesVisible = true;
          // 倒计时退出云机定时器
          this.countdownTimeInterval = setInterval(() => {
              if (time <= 0) {
                  clearInterval(this.countdownTimeInterval)
                  // 退出云机
                  this.$emit('downline');
                  return
              }
              time--
              this.countdownTime = residueTimeStamp(time)
          }, 1000)
        }
    },
    // 关闭倒计时弹窗
    handlecountdownTimeClose() {
      this.$axios.get(`/resources/yearMember/closeRemind?userCardId=${this.userCardId}`).then(res => {
        if (!res.status) {
          clearInterval(this.countdownTimeInterval);
          this.timingVisible = false;
          return
        }
        this.$toast(res.msg);
      })
    },
    // 获取推荐列表
    getRecommend() {
      this.$axios.get(`/public/v1/market/get/recommend?userCardId=${this.userCardId}`).then(res => {
        if (!res.status) {
          this.billingRulesVisible = false;
          this.recommendList = res.data;
          this.recommendList.length && (this.applyRecommendVisible = true)
        }
      })
    },
    // 倒计时处理的时间
    residueTimeStamp(value) {
      let theTime = value;//秒
      let middle = 0;//分
      let hour = 0;//小时
      if (theTime > 59) {
          middle = parseInt(theTime / 60);
          theTime = parseInt(theTime % 60);
      }
      if (middle > 59) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
      }
      theTime < 10 ? theTime = '0' + theTime : theTime = theTime
      middle < 10 ? middle = '0' + middle : middle = middle
      hour < 10 ? hour = '0' + hour : hour = hour
      return hour + ':' + middle + ':' + theTime
    }
  }
}
</script>

<style lang="scss" scoped>
.pfi{position: fixed;}

.tc {text-align: center;}

.timing {
  top: 2%;
  right: 5%;
  padding: 6px 5px 6px 9px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 30px;
  font-size: 14px;
  z-index: 1;
  color: #FFF;

  & > div {
    vertical-align: middle;
    height: 20px;
    line-height: 20px;

    &::after {
      border-right: 1px solid #FFFFFF;
      content: "";
      width: 2px;
      height: 45%;
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      padding: 0 3px;
      opacity: 0.3;
    }
  }

  & > img {
    width: 20px;
    height: 20px;
  }
}

// 计费规则
.billing-rules-modal {
  text-align: center;
  font-size: 14px;
  color: #757580;
  text-align: center;
}
::v-deep .billing-rules-modal .van-dialog__content {
  padding: 0 28px 28px;
}
.billing-rules-modal .billing-rules-img {
  width: 104px;
  height: 140px;
}
.billing-rules-modal .billing-rules-title {
  font-size: 18px;
  font-weight: 600;
  color: #363636;
  margin-bottom: 5px;
}
.billing-rules-modal .billing-rules-tips {
  margin-top: 5px;
}
.billing-rules-modal .billing-rules-time {
  color: #00DB88;
  font-size: 15px;
}
.billing-rules-modal .billing-rules-btn {
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 24px;
  background: linear-gradient(90deg, #00A3FF 0%, #04F79A 100%);
  border-radius: 8px;
  font-size: 12px;
  color: #FFF;
}

// 应用推荐
.apply-recommend-modal {
  overflow: visible;
}
::v-deep .apply-recommend-modal .van-dialog__content {
  padding: 10px 28px 28px;
}
.apply-recommend-modal .van-dialog__content > div {
  height: 350px;
  display: flex;
  flex-direction: column;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-title {
  font-size: 16px;
  font-weight: 500;
  color: #363636;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 16px;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list::-webkit-scrollbar {
  display: none;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .left {
  width: calc(100% - 68px);
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .left > img {
  width: 36px;
  height: 36px;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .left > div {
  width: calc(100% - 36px);
  padding-left: 10px;
  box-sizing: border-box;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .left .title {
  width: 100%;
  font-size: 16px;
  color: #363636;
  max-width: 100%;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .left .download-num {
  font-size: 12px;
  color: #757580;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-list .right > div {
  width: 68px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: linear-gradient(90deg, #00A3FF 0%, #04F79A 100%);
  border-radius: 8px;
  font-size: 12px;
  color: #FFF;
}
.apply-recommend-modal .van-dialog__content > div .apply-recommend-btn {
  height: 50px;
  line-height: 50px;
  margin-top: 14px;
  background: linear-gradient(225deg, #FF62F8 0%, #FF9D5C 100%);
  border-radius: 8px;
  font-size: 12px;
  color: #FFF;
}
.apply-recommend-modal .van-dialog__content .apply-recommend-close {
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  position: absolute;
}
</style>