秒杀倒计时等三种状态实现

/**
     * 根据id查询秒杀商品详情
     * @param id
     * @return
     */
    @RequestMapping("/detail")
    public R detail(Integer id){
        MiaoShaGoodsVo miaoShaGoodsVo = miaoShaGoodsService.findById(id);
        Integer miaoShaStatus=0; // 秒杀状态
        Integer remainBeginSecond=0; // 剩余多少秒
        Integer remainEndSecond=0; // 秒杀结束 剩余多少秒

        long startTime = miaoShaGoodsVo.getStartTime().getTime();
        long endTime = miaoShaGoodsVo.getEndTime().getTime();
        long currentTime=System.currentTimeMillis();
        System.out.println("startTime"+startTime);
        System.out.println("endTime"+endTime);
        System.out.println("currentTime"+currentTime);

        if(currentTime<startTime){  //秒杀还没开始 倒计时
            miaoShaStatus=0;
            remainBeginSecond=(int)(startTime-currentTime)/1000;
            remainEndSecond=(int)(endTime-currentTime)/1000;
        }else if(currentTime>endTime){ //秒杀结束
            miaoShaStatus=2;
            remainBeginSecond=-1;
            remainEndSecond=-1;
        }else{  //秒杀进行中
            miaoShaStatus=1;
            remainBeginSecond=0;
            remainEndSecond=(int)(endTime-currentTime)/1000;
        }

        miaoShaGoodsVo.setMiaoShaStatus(miaoShaStatus);
        miaoShaGoodsVo.setRemainBeginSecond(remainBeginSecond);
        miaoShaGoodsVo.setRemainEndSecond(remainEndSecond);

        Map<String,Object> map=new HashMap<>();
        map.put("data",miaoShaGoodsVo);
        return R.ok(map);
    }

<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="goods_head">秒杀商品详情</p>
        <el-form label-position="left" label-width="120px">
            <el-form-item label="商品名称：">
                {{this.miaoShaGoods.goods.name}}
            </el-form-item>
          <el-form-item label="商品图片：">
                <img :src="getSrcUrl(this.miaoShaGoods.goods.image)"/>
          </el-form-item>
          <el-form-item label="商品原价：">
                {{this.miaoShaGoods.goods.price+'元'}}
          </el-form-item>
          <el-form-item label="秒杀价：">
                {{this.miaoShaGoods.price+'元'}}
          </el-form-item>
          <el-form-item label="库存数量：">
            {{this.miaoShaGoods.stock}}
          </el-form-item>
          <el-form-item label="秒杀开始时间：">
            {{this.miaoShaGoods.startTime}}
            <span v-show="miaoShaGoods.miaoShaStatus==0">秒杀倒计时：{{miaoShaGoods.remainBeginSecond}}秒</span>
            <span v-show="miaoShaGoods.miaoShaStatus==1">秒杀进行中</span>
            <span v-show="miaoShaGoods.miaoShaStatus==2">秒杀结束</span>
          </el-form-item>
          <el-form-item label="秒杀结束时间：">
            {{this.miaoShaGoods.endTime}}
          </el-form-item>
          <el-form-item>
              <el-button v-show="miaoShaGoods.miaoShaStatus==1" type="primary" size="small">立即秒杀</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import MiaoShaHeader from './common/Header';
import MiaoShaFooter from './common/Footer';
import axios from 'axios';
import {getServerUrl} from '@/config/sys';

export default {
  name: 'Detail',
  data() {
    return {
      miaoShaGoods:{
         goods:{
           name:'',
           image:'default.jpg',
           price:0
         }
      }
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(t) {
      return getServerUrl('image/' + t);
    },
    getInfo(){
      let url = getServerUrl("miaoShaGoods/detail");
      let token = window.sessionStorage.getItem("token");
      axios.defaults.headers.common['token'] = token;
      axios.get(url,{
        params:{
          id:this.$route.params.id
        }
      }).then(response=>{
          console.log(response.data.data);
          this.miaoShaGoods = response.data.data;
          this.countDown();
          if(this.miaoShaGoods.remainEndSecond>0){//秒杀还没结束
            setTimeout(()=>{
                this.miaoShaGoods.miaoShaStatus=2;
            },this.miaoShaGoods.remainEndSecond*1000)
          }
        }).catch(error=>{
        alert(error+"-请联系管理员");
      })
    },
    countDown(){
      let timeout;
      let rs=this.miaoShaGoods.remainBeginSecond;
      if(rs>0){   //秒杀还没开始，倒计时
         timeout=setTimeout(()=>{
           this.miaoShaGoods.remainBeginSecond=this.miaoShaGoods.remainBeginSecond-1;
           this.countDown();
         },1000);
      }else if(rs==0){  //秒杀进行中
        this.miaoShaGoods.miaoShaStatus=1;
        if(timeout){
          clearTimeout(timeout);
        }
      }else{  //秒杀结束
         this.miaoShaGoods.miaoShaStatus=2;
      }
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>

.goods_head{
  font-weight: bold;
  font-size: 20px;
}
</style>