<template>
	<view class="confirm-page">
		<view class="top-view">
			<view class="top-line">
				<view class="line-label"> 订单号</view>
				<view class="line-value"> 201923121</view>
			</view>
			<view class="top-line">
				<view class="line-label"> 金额</view>
				<view class="line-value"> ￥201923121</view>
			</view>
			<view class="top-line">
				<view class="line-label"> 配送方式</view>
				<view class="line-value"> 201923121</view>
			</view>
			<view class="top-line">
				<view class="line-label"> 配送时间</view>
				<view class="line-value"> 201923121</view>
			</view>
		</view>
		<view class="code-view">
			<view class="code-title"> 扫码付款</view>
			<view class="code-image">
				<image
					src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
					alt="商品图"
				/>
			</view>
			<button class="admin-button-com big" @click="formSubmit">
				延期付
			</button>
		</view>
	</view>
</template>

<script>
export default {
	name: "BillingConfirm", // 开单结果
	components: {},
	data() {
		return {
			showRegion: false
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.confirm-page {
	position: relative;
	background-color: #f0f2f6;
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-view {
		padding: 40px 30px;
		background-color: #fff;
		.top-line {
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			.line-label {
				width: 150px;
				color: #666;
				font-size: 28px;
			}
			.line-value {
				color: #333;
				font-size: 28px;
			}
		}
	}
	.code-view {
		padding: 60px 100px;
		margin-top: 20px;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		.code-title {
			color: #333;
			font-size: 32px;
		}
		.code-image {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 60px 0 80px;
			width: 460px;
			height: 460px;

			border: 1px solid rgba(3, 0, 0, 0.1);
			image {
				width: 406px;
				height: 406px;
			}
		}
		.admin-button-com {
			width: 100%;
		}
	}
}
</style>
