移动端倒计时Demo

<script>
  //Vuex公共状态动作
  import { mapActions } from 'vuex'
  import orderInformation from '../../components/common/financialSummit/orderInformation'
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  import closeLoading from '../../mixins/closeLoading'
  export default {
    name: 'financialSummitRank',
    mixins: [closeLoading],
    components: {
      'v-orderInformation': orderInformation,
    },
    props: {},
    data() {
      return {
        receivePriseState: 2,
        timeRemainingHour: '01',
        timeRemainingMinute: '13',
        timeRemainingSecond: '47',
        customerImg: '',
        popularNumber: 0,
        popularParcent: '0%',
        rankNameList: [],
        selectIndex: 1,
        //浏览数量
        allFriendNumList: [],
        //浏览标题
        allFriendNumListTitle: ['查看人数', '查看次数', '分享次数'],
        //分享内容
        allFriendContentList: [],
        appOpenid: this.$route.params.appOpenid,
      }
    },
    watch: {},
    computed: {},
    methods: {
      TimeDown(endDateStr) {
        //结束时间
        var endDate = new Date(endDateStr);
        //当前时间
        var nowDate = new Date();
        if (endDate - nowDate >= 0) {
          //相差的总秒数
          var totalSeconds = parseInt((endDate - nowDate) / 1000);
          //天数
          var days = Math.floor(totalSeconds / (60 * 60 * 24));
          //取模（余数）
          var modulo = totalSeconds % (60 * 60 * 24);
          //小时数
          var hours = Math.floor(modulo / (60 * 60));
          modulo = modulo % (60 * 60);
          //分钟
          var minutes = Math.floor(modulo / 60);
          //秒
          var seconds = modulo % 60;
          hours = hours < 10 ? ('0' + hours) : hours;
          minutes = minutes < 10 ? ('0' + minutes) : minutes;
          seconds = seconds < 10 ? ('0' + seconds) : seconds;
          this.timeRemainingHour = hours;
          this.timeRemainingMinute = minutes;
          this.timeRemainingSecond = seconds;
          let _this = this;
          //延迟一秒执行自己
          setTimeout(function () {
            _this.TimeDown(endDateStr);
          }, 1000)
        } else {
          //输出到页面
          this.timeRemainingHour = '00';
          this.timeRemainingMinute = '00';
          this.timeRemainingSecond = '00';
        }
      },
      initRankFirstList() {
        let parames = {
          "functionName": "productbiz.service.puhui.financial.FinancialSummitService",
          "methodName": "getPopularityRanking",
          "data": {
            "openId": this.appOpenid
          }
        }
        this.$post(JSON.stringify(parames)).then(result => {
          console.log('初始化人气排行榜参数', parames)
          console.log('初始化人气排行榜结果', result)
          if (result.errorCode == ERROR_CODE) {
            console.log('初始化人气排行榜成功结果', result);
            this.rankNameList = result.data.popularityList;
            this.popularNumber = result.data.popularity;
            this.popularParcent = result.data.beat;
            this.customerImg = result.data.userImage
          }
        })
      },
      //Vuex辅助函数，将公共状态中的方法映射成当前的this方法
      ...mapActions(['SET_RECEIVEPRIZESTATE']),
      onlineOrder() {
        this.SET_RECEIVEPRIZESTATE(true);
      },
      initVisitorList() {
        let parames = {
          "functionName": "productbiz.service.puhui.financial.FinancialSummitService",
          "methodName": "getShareListByOpenId",
          "data": {
            "openId": this.appOpenid
          }
        }
        this.$post(JSON.stringify(parames)).then(result => {
          console.log('初始化查看人数参数', parames)
          console.log('初始化查看人数结果', result)
          if (result.errorCode == ERROR_CODE) {
            console.log('初始化查看人数成功结果', result);
            this.allFriendContentList = result.data.visitorList;
            this.allFriendNumList = [result.data.visitorUserSum, result.data.visitorSum, result.data.shareSum];
          }
        })
      }
    },
    created() {
      this.initVisitorList();
      this.initRankFirstList();
      let nowActivityDate = new Date();
      let endActivityDate = nowActivityDate.getDate(); //获取当前日(1-31)
      let endActivityTime = "2019/11/" + endActivityDate + " 16:00:00";
      this.TimeDown(endActivityTime);
    },
    mounted() {
      
    }
  }
</script>