You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
80 lines
2.0 KiB
<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>
|