share_h5/pages/yigePayCenter.vue

<template>
	<view>
		<u-navbar leftIconColor="#2AABB0" title="" :autoBack="true" placeholder>
			<view slot="center" class="navCenter">
				<image src="/static/staticPay/icon1.png" mode=""></image>
				<view>宜格收银台</view>
			</view>
		</u-navbar>
		<view class="garyArea">
			<view class="garyArea_val">￥0.00</view>
			<view class="garyArea_lab">付款金额</view>
		</view>
		<view class="btnArea">
			<view class="btnArea_title">支付方式</view>
			<view class="btnArea_item" @click="activeFun(1)">
				<view class="btnArea_item_l">
					<image src="/static/staticPay/icon3.png" mode=""></image>
					<view>微信支付</view>
				</view>
				<view class="btnArea_item_r" :class="{active:activeIndex==1}">
					<view></view>
				</view>
			</view>
			<view class="btnArea_item" @click="activeFun(0)">
				<view class="btnArea_item_l">
					<image src="/static/staticPay/icon2.png" mode=""></image>
					<view>支付宝</view>
				</view>
				<view class="btnArea_item_r " :class="{active:activeIndex==0}">
					<view></view>
				</view>
			</view>

			<view class="btnArea_btn" @click="clickBtn()">
				确认支付 {{time}}
			</view>
			<view class="btnArea_tig">
				请在
				<text>20</text>
				分钟内完成付款，否则订单失效
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:"00.20.00",
				activeIndex:1
			}
		},
		onLoad() {
			console.log(uni.$u.config.v);
			this.clock()
		},
		methods: {
			activeFun(index){
				this.activeIndex=index;
			},
			clickBtn(){
				uni.showToast({
					icon:"none",
					title: '请在APP中发起支付',
					duration: 2000
				});
			},
			clock(times = 1200) {
				//页面加载时设置需要倒计时的秒数，计算小时
				var shi = parseInt(times / 3600);
				if (shi < 10) {
					shi = "0" + shi
				}
				//计算分钟
				var fen = parseInt((times % 3600) / 60);
				if (fen < 10) {
					fen = "0" + fen
				}
				//计算秒
				var miao = (times % 3600) % 60;
				if (miao < 10) {
					miao = "0" + miao
				}
				this.time=shi+':'+fen + ":" + miao
				let timeout
				if (times > 0) {
					times=times - 1
					//定时1秒，然后调用自身clock方法
					timeout = setTimeout(() => {
						this.clock(times);
					}, 1000);
				} else {
					clearTimeout(timeout)
					return
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navCenter {
		display: flex;
		align-items: center;

		image {
			width: 43rpx;
			height: 44rpx;
			margin-right: 6rpx;
		}

		>view {
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: 700;
		}
	}

	.garyArea {
		background: #F5F5F5;
		padding: 70rpx 0 90rpx 0;

		.garyArea_val {
			font-size: 50rpx;
			color: #2AABB0;
			font-weight: 700;
			;
			text-align: center;
		}

		.garyArea_lab {
			font-size: 28rpx;
			color: #666666;
			text-align: center;
		}
	}

	.btnArea {
		padding: 54rpx 60rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		background: #FFFFFF;
		top: -40rpx;
		.btnArea_title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 700;
			margin-bottom: 50rpx;
		}

		.btnArea_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.btnArea_item_l {
				font-size: 28rpx;
				color: #666666;
				display: flex;
				align-items: center;

				image {
					width: 58rpx;
					height: 58rpx;
					margin-right: 20rpx;
				}
			}

			.btnArea_item_r {
				width: 36rpx;
				height: 36rpx;
				border: 1rpx solid #B3B3B3;
				border-radius: 50%;

				>view {
					display: none;
				}
			}

			.active {
				border-color: rgb(28,167,175);
				display: flex;
				align-items: center;
				justify-content: center;

				>view {
					display: block;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background: rgb(28,167,175);
				}
			}
		}

		.btnArea_btn {
			width: 630rpx;
			height: 90rpx;
			background: linear-gradient(#29b2a2 0%, #2aa7bd 100%);
			border-radius: 45rpx;
			margin: 100rpx auto 0;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.btnArea_tig {
			font-size: 24rpx;
			color: #808080;
			margin-top: 26rpx;
			text-align: center;
			letter-spacing: 2rpx;
			font-weight: 600;
			text {
				color: #FF0000;
			}
		}
	}
</style>