vue中使用定时器

Posted 2020-10-20 mr-cui

<style scoped>
  .router-link-active {
  color: red;
}
.layout{
    position: relative;
}

/* 数字键盘 */
.pure-u {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}
.pure-g{
  width:100%;
  /* border:1px solid #ccc; */
  margin:auto auto;
      letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
    text-rendering: optimizespeed;
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start
}
.pure-g [class *="pure-u"] {
    font-family: sans-serif
}

.pure-u-1,
.pure-u-1-1,
.pure-u-1-4,
.pure-u-3-4{
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}

.pure-u-1 {
    /* width: 22.5%; */
    width: 30%;
    box-sizing: border-box;
    height: 80px;
    line-height: 80px;
    font-size:34px;
    color:#616761;
    margin-right:1%;
    margin-top:8px;
    border:1px solid #ccc;
    text-align: center;
    cursor: pointer;
}
/*  */
.pure-u-1-4{
    width: 25%;
    *width: 24.969%
}
.pure-u-3-4{
    width: 75%;
    *width: 74.969%
}

.pure-g1{
     letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
    text-rendering: optimizespeed;
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start
}
.pure-g1[class *="pure-u"] {
    font-family: sans-serif
}
.pure-g1 .pure-u-1 {
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size:26px;
    /* border:1px solid #ccc; */
    text-align: center;
    cursor: pointer;
}
 .pure-g1 .pure-u-xiu{
  height:160px;
  line-height: 160px;
  background:gold;
  margin-top:16px;
}
.specialFontIcon{
    font-size:60px;
    display: inherit;
    padding-top: 12px;
    height: 100%; 
}
.backspaceOutline{
    font-size:42px;
    vertical-align: middle;
}
/* end */
.inputCodeDiv{
    margin-bottom:20px;
    height:50px;
    border:2px solid #ccc;
}
.inputCodeDiv .inputTakeCode{
    width:100%;
    line-height:50px;
    padding:0 0 0 20px;
    font-size:22px;
}
.inputCodeDiv .mealNumber{
    font-size:24px;
    font-weight:bold;
    line-height:50px;
    text-align:center;
}
.contentTakeMeal{
    box-sizing: border-box;
  height: 720px;
  width:1080px;
  margin:0 auto;
  background: #f2f2f2;
  align-items:center;
display:flex;
}
/* 点击首页的css */
.linkHomePage{
  height: 50px;
  border:1px solid #b3a7a7;
  width:1080px;
  margin:0 auto;
}
.linkHomePage .ivu-col{
    height:100%;
}
.buttonGroup{
    height:100%;
}
.buttonIcon{
    height: 100%;
    color:black;
    padding-right: 30px;
    border:none;
}
.homeicon{
    font-size: 28px;
    color:black;
    vertical-align: middle;
    margin-right: 3px;
}
.helpicon{
    background:#fecccd;
}
.closeRoundIcon{
    height: 100%;
    padding: 0px 0 0 25px ;
    cursor:pointer;
    border-left:1px solid gray;
}
.close-round{
    font-size:40px;
    font-weight:bold;
    position: relative;
    top: 5px;
    margin-right:10px;
}
.fontWeightTime{
    font-weight:bold;
    font-size:24px;
}
.InputMealCode{
    width:60%;
    box-sizing: border-box;
    box-shadow: 2px 2px 10px 5px pink;
    padding:30px;
    background:#fff;
    margin:0 auto;
}
/* carousel */
.carousel{
    width:1080px;
    height:720px;
    position: relative;
    margin:0 auto;
}
.demo-carousel{
    width:1080px;
    height:720px;
    background: pink;
    margin: 0 auto;
}
</style>
<template>
<div class="layout">
      <Layout>
        <Content class="contentTakeMeal">
          <div class=‘InputMealCode‘>
              <div class="code pure-g inputCodeDiv">
                <div v-show=‘listLength‘ class="pure-u inputTakeCode">请输入取货码</div>
                <span class="pure-u-1-4 mealNumber" v-for="number in number">{{number}}</span>
              </div>
              <div class="pure-g ">
                <div class="pure-u-3-4">
                    <div class="pure-g">
                        <div  @click="mealCode(7)" class="pure-u-1 ">7</div>
                        <div @click="mealCode(8)" class="pure-u-1 ">8</div>
                        <div @click="mealCode(9)" class="pure-u-1 ">9</div>
                    </div>
                    <div class="pure-g">
                        <div @click="mealCode(4)" class="pure-u-1 ">4</div>
                        <div @click="mealCode(5)" class="pure-u-1 ">5</div>
                        <div @click="mealCode(6)" class="pure-u-1 ">6</div>
                    </div>
                    <div class="pure-g">
                        <div @click="mealCode(1)" class="pure-u-1 ">1</div>
                        <div @click="mealCode(2)" class="pure-u-1 ">2</div>
                        <div @click="mealCode(3)" class="pure-u-1 ">3</div>
                    </div>
                    <div class="pure-g">
                        <div @click="mealCode(‘*‘)" class="pure-u-1  "><span class=‘specialFontIcon‘>*</span></div>
                        <div @click="mealCode(0)" class="pure-u-1 ">0</div>
                        <div @click="mealCode(‘#‘)" class="pure-u-1 ">#</div>
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="pure-g1 ">
                        <div class="pure-u-1 " @click="deleteCode"><Icon type="backspace-outline" class=‘backspaceOutline‘></Icon></div>
                    </div>
                    <div class="pure-g1">
                        <div class="pure-u-1 " @click="emptyCode">清空</div>
                    </div>
                    <div class="pure-g1">
                        <div class="pure-u-1 pure-u-xiu confirm " @click="confirmCode">确定</div>
                    </div>
                </div>
            </div>
          </div>
        </Content>
        <Content>
                <Row  class="linkHomePage">
                    <i-col span="20">
                        <Button-group class="buttonGroup">
                                <Button type="info" class="buttonIcon" @click="returnHomePage" ><Icon type="ios-home" class=‘homeicon‘></Icon>首页</Button>
                                <Button type="info" class="buttonIcon helpicon" @click="returnHomePage" ><Icon type="ios-help" class=‘homeicon‘></Icon>帮助</Button>
                        </Button-group>
                    </i-col>
                    <i-col span="4">
                        <div class=‘closeRoundIcon‘ @click=‘returnHomePage‘>
                            <Icon type="close-round" class="close-round"></Icon>
                            <span class=‘fontWeightTime‘>{{time}}s</span>
                        </div>
                    </i-col>
                </Row>
        </Content>
        <footer>
            <div class="carousel">
                <carousel autoplay v-model="value" >
                    <carousel-item>
                        <div class="demo-carousel">1</div>
                    </carousel-item>
                    <carousel-item>
                        <div class="demo-carousel">2</div>
                    </carousel-item>
                    <carousel-item>
                        <div class="demo-carousel">3</div>
                    </carousel-item>
                    <carousel-item>
                        <div class="demo-carousel">4</div>
                    </carousel-item>
                </carousel>
                
            </div>
        </footer>
      </Layout>
</div>
</template>

<script>
  export default {
    name: ‘takemeal-page‘,
    data(){
    return{
      value:0,
      list:[],
      time:100
    }
    },
    created(){
        this.times();
    },
    computed:{
       number: function () {
      // `this` 指向 vm 实例
      if(this.list.length>4){
        return this.list.join(‘‘).slice(0,4);
      }else{
         return this.list.join(‘‘)
      }
    },
    listLength:function(){
        if(this.list.length>0){
        return false
      }else{
         return true
      }
    }
    },
    methods:{
        times(){
      var self=this;
     var IntervalName=setInterval(function () {
        self.time--
        if(self.time<0){
           clearInterval(IntervalName);
        self.$router.push({ path: ‘/‘ })

        }
      },1000)
    },
      mealCode(value){
        this.list.push(value);
        this.time=100;
      },
      deleteCode(){
          this.list=this.list.slice(0,4);
          this.time=100;
          this.list.pop();
      },
      emptyCode(){
          this.list=[];
         this.time=100;
      },
      confirmCode(){
          this.time=100;
          alert("确定")
      },
      returnHomePage(){
          this.$router.push({ path: ‘/‘ })
      }
    }
  }
</script>