完成支付收银台页面UI、新增倒计时组件

components/countdown-timer/countdown-timer.vue

@@ -0,0 +1,100 @@
+<template>
+	<view><slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute" :second="timeData.second" /></view>
+</template>
+
+<script>
+// https://ext.dcloud.net.cn/plugin?id=1687
+export default {
+	props: {
+		// 倒计时时长（单位：毫秒）
+		time: {
+			type: Number,
+			default: 0
+		},
+		
+		// 是否自动
+		'autoStart': {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			timeData: {
+				remain: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0
+			}
+		};
+	},
+	watch: {
+		time() {
+			this.reset()
+		}
+	},
+	methods: {
+		
+		// 设置timeData
+		updateTimeData() {
+			let t = this.timeData.remain;
+			this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
+			this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
+			this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
+			this.timeData.second = Math.floor((t / 1000) % 60);
+		},
+		
+		// 开启倒计时
+		startTimer() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+			if(this.timeData.remain < 1000) {
+				 return
+			}
+			this.timer = setInterval(() => {
+				this.timeData.remain -= 1000;
+				this.updateTimeData()
+				if (this.timeData.remain < 1000) {
+					this.pause()
+					this.$emit('finish');
+				}
+			}, 1000);
+		},
+		
+		// 重置倒计时
+		reset() {
+			this.timeData.remain = this.time;
+			this.updateTimeData();
+			if(this.autoStart) {
+				this.start()
+			}
+			
+		},
+		
+		// 暂停倒计时
+		pause() {
+			if(this.timer) {
+				clearInterval(this.timer);
+				this.timer = null
+			}
+		},
+		
+		// 开始倒计时
+		start() {
+			if(this.timer) {
+				return
+			}
+			this.startTimer();		
+		}
+	},
+	mounted() {
+		this.reset();
+	},
+	beforeDestroy() {
+		this.pause()
+	}
+};
+</script>

pages.json

@@ -865,6 +865,13 @@
 				"navigationBarTitleText": "秒杀专场",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/order/cashier/cashier",
+			"style" : {
+				"navigationBarTitleText": "支付收银台",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/order/cashier/cashier.vue

@@ -0,0 +1,136 @@
+<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>
+</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-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>