ec.uniapp-master/pages/aboutpay/confirmcash.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav>
		<view class="lf-p-30" style="margin: 0 auto;">
			<view class="confirm-card">
				<view class="lf-font-32 lf-color-555">
					请核对支付金额
				</view>
				<view style="font-size: 72rpx;color: #15716E;">¥478.50</view>
				<view class="lf-flex">
					<view class="lf-font-24 lf-m-r-10" style="color:#FF9D9D">
						剩余支付时间
					</view>
					<countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
						<template v-slot="{minute, second}">
							<!-- <view>{{minute}}:{{second}}</view> -->
							<view class="lf-flex">
								<view class="lf-font-24" style="color:#FF9D9D">{{ minute >= 10 ? minute : "0" + minute }}</view>
								<view class="lf-font-24" style="color:#FF9D9D">:</view>
								<view class="lf-font-24" style="color:#FF9D9D">{{ second >= 10 ? second : "0" + second }}</view>
							</view>
						</template>
					</countdown-timer>
				</view>
				<view>
					<button class="confirmcash-btn">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	export default {
		data() {
			return {
				time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime()
			}
		},
		components: {
			countdownTimer
		},
		methods: {
			dateFinish(){
				console.log("倒计时结束");
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.confirmcash-btn {
		width: 550rpx;
		height: 100rpx;
		background: #15716E;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		color: white;
		align-items: center;
	}
	.confirm-card {
		padding: 30rpx 0;
		width: 686rpx;
		height: 475rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
</style>