mlinquan / vue-awesome-countdown Goto Github PK

<vac :end-time="timer" @finish="finisher()">
        <template
          v-slot:process="{ timeObj }">
          <span>{{ `Get New Code In: ${timeObj.m}:${timeObj.s}` }}</span>
        </template>
        <template
          v-slot:finish>
            <span>Done!</span>
        </template>
      </vac>

<countdown 
    :startTime="2020-06-25 13:30:00"
    :end-time="2020-06-27 13:30:00" 
    @onfinish="termino()" 
    :autoStart="false"
    >
        <template v-slot:process="{ timeObj }"> 
            <span>{{ `Offer ends: ${timeObj.h}h ${timeObj.m}m ${timeObj.s}s` }}</span> 
        </template>
        <template v-slot:finish> 
            <span>Expired!</span> 
        </template>
</countdown>

<template>
  <div>
    <vac ref="countdown" :left-time="msBeforeDraw" @finish="fresh">
          <p slot="process" slot-scope="{ timeObj }" class="mb-0">
            <small class="drawInfo">Countdown</small>
            <span v-if="timeObj.h !== '00'" class="colorMain"
              >{{ timeObj.h }}:</span
            >
            <span class="colorMain">{{ timeObj.m }}:</span>
            <span class="colorMain">{{ timeObj.s }}</span>
          </p>
          <span slot="finish" class="opening  drawInfo">
            <small>Countdown</small>
            <span class="colorMain">开奖中</span>
          </span>
        </vac>
  </div>
</template>

<script>
export default {
  data(){
    return {msBeforeDraw: 600}
  }
  methods: {
    async fresh() {
      await this.$parent.fetchKey()
      setTimeout(() => {
        if (this.$refs.countdown) {
          this.$refs.countdown.startCountdown(true)
        }
      }, 1000)
    }
  }
}
</script>

                  <countdown :end-time="new Date().getTime() + 60000">
                    <template v-slot:process="{ timeObj }">{{
                      `Time left ${timeObj.m}:${
                        timeObj.s
                      }`
                    }}</template>
                    <template v-slot:finish>
                      <b-button variant="warning">Request SMS again</b-button>
                    </template>

<countdown
  ref="unregisterTimer"
  :end-time="new Date().getTime() + 6000"
>
  <template v-slot:process="{ timeObj }">
    <span class="ml-3 timer">
      Request SMS once again {{ timeObj.m }}:{{
        timeObj.s
      }}
    </span>
    <b-button @click="stopCountdown">STOP</b-button>
    <b-button @click="startCountdown">START</b-button>
  </template>
  <template v-slot:finish="vac">
    <b-button
      @click="unregisterDevice"
      class="ml-3"
      variant="warning"
      >Send again</b-button
    >
  </template>
</countdown>

private startCountdown() {
  this.$refs.unregisterTimer.startCountdown(true)
}

                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.1.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-awesome-countdown                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ vue-awesome-countdown > @vue/cli-service >                   │
│               │ copy-webpack-plugin > serialize-javascript                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 moderate severity vulnerability in 44351 scanned packages
  1 vulnerability requires manual review. See the full report for details.

% npm audit fix                                                                       
up to date in 7.912s

38 packages are looking for funding
  run `npm fund` for details

fixed 0 of 1 vulnerability in 44351 scanned packages
  1 vulnerability required manual review and could not be updated

ERROR in static/js/vendor.814ae202417734b5bd0b.js from UglifyJs
Unexpected token: punc (() [./node_modules/[email protected]@vue-awesome-countdown/dist/vue-awesome-countdown.common.js:185,0][static/js/vendor.814ae202417734b5bd0b.js:46643,6]

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

const auctionRef = this.$fire.firestore.collection('auctions')
const loadInitial = await auctionRef.where('auction_id', '==', parseInt(this.auctionNumber)).get()
        if (!loadInitial.empty) {
         loadInitial.forEach((doc) => {
            const values = doc.data()
            this.startTime = new Date(values.startTime).getTime()
            this.endTime = new Date(values.endTime).getTime()
            this.$refs.countdownTimer.startCountdown(true) 
          })
        }

               <client-only>
                    <vac
                      ref="countdownTimer"
                      :start-time="startTime"
                      :end-time="endTime"
                      :autoStart="false"
                      @process="(vac) => process(vac)"
                      @finish="(vac) => finish(vac)"
                    >
                      <span
                        slot="process"
                        slot-scope="{ timeObj }"
                      >{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
                      <span slot="finish">Done!</span>
                    </vac>
                  </client-only>