school_uni/package1/order/orderConfirm.vue

<template>
	<!-- 支付确认页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					支付订单
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view style="height: 70rpx;line-height: 70rpx;text-align: center;">
					支付剩余时间  59:09
				</view>
				<view style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
					￥<text style="font-size: 60rpx;">449.96</text>
				</view>
				<view style="height: 40rpx;text-align: center;color: red;">
					若拼团失败，将会为您自动退款
				</view>
			</view>
			<view class="box1" style="display: flex;padding: 40rpx;">
				<view style="flex: 1;">
					<view style="height: 42rpx;line-height: 42rpx;display: flex;">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png" alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
						<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
					</view>
					<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
						使用微信支付
					</view>
				</view>
				<view style="width: 36rpx;padding-top: 20rpx;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png" alt="" style="width: 36rpx;height: 36rpx;" />
				</view>
			</view>
			<view class="btn">
				确认付款
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {}
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.title-name{
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		position: absolute;
		top: 200rpx;
		width: 95%;
		margin-left: 2.5%;
	}
	.box1{
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		    padding: 20rpx;
	}
	.btn {
		width: 95%;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 40rpx auto;
	}
</style>