目录
背景
项目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>