vue2使用elemenui实现订单三十分钟倒计时

目录

背景

实现倒计时的组件

---

背景

项目vue版本：脚手架vue2，

后端返回订单时间类型：字符串，2023-06-14 19:32:42

案例中使用的是

 效果如图

 

实现倒计时的组件

创建一个组件countdown.vue，命名随意

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14">
        <div style="width: 100%; display: inline-block">
          <el-statistic :value="time" time-indices title="订单已过期">
            <template slot="suffix">
              <span class="red">即将过期</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: { time: Number },
  data() {
    return {
      deadline2: "",
    };
  },
  mounted() {
    console.log(this.time);

  },
  methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到，你可知寸金难买寸光阴？",
        duration: 0,
      });
    },

  },
};
</script>
<style>
.red {
  color: brown;
}
</style>

这个组件没什么特别的内容，主要就是接收父组件传的值

父组件关键代码：实现时间的计算，在订单的创建时间上加30分钟

  <li v-for="(item, index) in goodssent" :key="item.id">
          <div>
              <countdwon :time="timeComputed(item.createtime)"></countdwon>
          </div>
</li>


import countdwon from "@/components/time/countdown.vue";
export default {
  components: { countdwon },
    methods: {
    timeComputed(time) {
      //计算时间,将后端传入的字符串时间类型转换为时间戳，然后加上三十分钟
      let date = new Date(time).getTime() + 30 * 1000 * 60;
      return date;
    },
   }
}

父组件完整代码

<!--  代付款页 -->
<template>
  <div>
    <div class="title-tentout">
      <span>待付款</span>
    </div>
    <div class="goods-sentout">
      <ul>
        <li v-for="(item, index) in goodssent" :key="item.id">
          <div class="goods-data">
            <ul>
              <li>
                <div class="detial">
                  <div class="img">
                    <img :src="item.imgUrl" alt="无法想象" />
                  </div>
                  <div class="text">
                    {{ item.commodityName }}
                  </div>
                </div>
              </li>
              <li>
                <div class="attribute">
                  {{ item.specsValue }}
                </div>
              </li>
              <li>
                <div class="price">
                  <span>￥{{ item.orderPrice }}</span>
                </div>
              </li>
              <li>
                <div class="number">
                  <span>数量</span>
                  {{ item.specsNumber }}
                </div>
              </li>
              <li>
                <div style="margin-left: -60px" class="total">
                  <span>订单名称</span>
                  {{ item.orderName }}
                </div>
              </li>
              <li>
                <div style="margin-left: -60px" class="total">
                  <span>店铺名称</span>
                  {{ item.busiessName }}
                </div>
              </li>
              <li>
                <div>
                  <countdwon
                    :time="timeComputed(item.createtime)"
                    v-if="time"
                  ></countdwon>
                </div>
              </li>
              <li>
                <div>
                  <span>
                    <el-button size="small" @click="cancel(item.id)"
                      >取消订单</el-button
                    ></span
                  >
                  <span>
                    <el-button size="small" type="danger" @click="pay(item.id)"
                      >立即支付</el-button
                    ></span
                  >
                </div>
              </li>
            </ul>
          </div>
          <div class="liubai-tent"></div>
        </li>
      </ul>
      <el-empty v-show="showEmpty" description="没有相关订单哟"></el-empty>
    </div>
  </div>
</template>

<script>
import { getorderbystate, getPay, alipay, CancelOrder } from "@/api/order";
import countdwon from "@/components/time/countdown.vue";
export default {
  components: { countdwon },
  data() {
    return {
      showEmpty: true,
      goodssent: [],
      time: false,
    };
  },
  watch: {
    goodssent(newVal, oldVal) {
      if (this.goodssent.length > 0) {
        this.showEmpty = false;
      } else {
        this.showEmpty = true;
      }
    },
  },
  mounted() {
    this.getorder();
  },
  methods: {
    getorder() {
      //获取订单信息
      getorderbystate(1).then((res) => {
        this.goodssent = res.data.data;
        this.time = true;
      });
    },
    timeComputed(time) {
      //计算时间
      let date = new Date(time).getTime() + 30 * 1000 * 60;
      return date;
    },
    pay(id) {
      //支付
      let order = { orderId: id };
      getPay(order).then((res) => {
        if (res.data.code == 200) {
          alipay(res.data.data.payNo).then((res) => {
            let obj = window.open("about:blank", "_blank");
            obj.document.write(res.data);
          });
        }
      });
    },
    cancel(id) {
      //取消订单
      CancelOrder({ orderId: id }).then((res) => {});
    },
  },
};
</script>