ec.uniapp-master/pages/order/cashier/cashier.vue

<template>
	<view>
		<lf-nav title="支付收银台" :showIcon="true" bgColor="#fff"></lf-nav>
		<view class="content">
			<view class="card lf-flex-column lf-row-center">
				<view class="lf-font-28 lf-color-222">需要支付</view>
				<view class="lf-m-t-10 lf-m-b-10">
					<text class="symbol">￥</text>
					<text class="price">385</text>
				</view>
				<view class="tips">
					<view>剩余支付时间：</view>
					<view>
						<countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
							<template v-slot="{minute, second}">
								<!-- <view>{{minute}}:{{second}}</view> -->
								<view class="lf-flex">
									<view>{{ minute >= 10 ? minute : "0" + minute }}</view>
									<view>:</view>
									<view>{{ second >= 10 ? second : "0" + second }}</view>
								</view>
							</template>
						</countdown-timer>
					</view>
				</view>
			</view>
			<view class="card lf-row-between" v-for="(item, index) in pay_list" :key="index">
				<view>
					<text class="lf-iconfont" :class="item.icon"></text>
					<text class="lf-m-l-10 lf-font-28 lf-color-222">{{ item.name }}</text>
				</view>
				<radio-group @change="checkChange($event, index)">
					<radio :checked="item.checked"></radio>
				</radio-group>
			</view>
		</view>
		<view class="fixed-btn" hover-class="lf-opacity" @click="confirm">立即支付</view>
		<view class="fixed-agreement">《购买须知》</view>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	export default {
		components: {
			countdownTimer
		},
		data(){
			return {
				pay_list: [{
					name: '余额支付',
					icon: 'icon--',
					checked: false
				},{
					name: '微信支付',
					icon: 'icon--1',
					checked: true
				}],
				time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime()
			}
		},
		onLoad(){
			
		},
		methods: {
			checkChange(event, current){
				let list = this.pay_list.map((item, index) => {
					if(index == current){
						item.checked = true;
					}else{
						item.checked = false;
					}
					return item;
				})
				this.pay_list = list;
			},
			dateFinish(){
				console.log("倒计时结束");
			},
			confirm(){
				this.$msg('支付成功')
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped="scoped">
	.content{
		padding: 30rpx 32rpx;
		width: 750rpx;
		height: max-content;
		box-sizing: border-box;
		.card{
			width: 100%;
			height: max-content;
			padding: 30rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			&:nth-child(n+2){
				margin-top: 30rpx;
			}
			.symbol{
				color: #15716E;
				font-size: 32rpx;
			}
			.price{
				font-size: 72rpx;
				color: #15716E;
				font-weight: bold;
			}
			.tips{
				font-size: 24rpx;
				color: #FF9D9D;
				display: flex;
			}
		}
	}
	
	.fixed-agreement {
		position: fixed;
		bottom: 5vh;
		font-size: 28rpx;
		color: #15716E;
		left: calc(50% - 84rpx);
		width: 168rpx;
	}
	
	.fixed-btn{
		position: fixed;
		bottom: 10vh;
		left: calc(50% - 275rpx);
		width: 550rpx;
		height: 100rpx;
		background-color: #15716E;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>