taoke/components/timer-tips/timer-tips.vue

<template>
	<view class="timer-tips">
		{{time_remaining |timeFilter}}
	</view>
</template>

<script>
	export default {
		name: "timer-tips",
		data() {
			return {
				time_remaining: 0
			};
		},
		props: {
			createtime: Number
		},
		filters: {
			timeFilter(value) {
				if (value < 0) {
					return '该交易已关闭'
				} else if (parseInt(value / 60) > 0) {
					return '交易剩余支付时间 ' + parseInt(value / 60) + '分' + (value % 60) + '秒'

				} else {
					return '交易剩余支付时间 ' + value + '秒'
				}
			}

		},
		mounted() {
			let now = parseInt(new Date().getTime() / 1000);
			this.time_remaining = this.createtime + 1800 - now;

			setInterval(() => {
				this.time_remaining--
			}, 1000)
		}
	}
</script>

<style>
	.timer-tips {
		background-color: #ffff7f;
		text-align: center;
		font-size: 24upx;
		color: red;
		line-height: 40upx;
	}
</style>