agent-app/agentApp/pages/payment/payment.vue

<template>
	<view class="app-container" style="background-color: #ededed;">
		<view class="pam-content">
			<view class="pam-shop">
				<view class="pam-mess">
					<view class="picon">
						<img src="../../static/page/people.png" style="width: 110rpx;height: 110rpx;" alt="" srcset="" />
					</view>
					<view class="pam-address">
						<view class="pname">
							付款给李姐烧烤(普罗旺斯店)
						</view>
						<view class="paddre">
							广西南宁市江南区波尔多庄园2-109号商铺
						</view>
					</view>
				</view>
				<view class="pam-local">
					<img src="../../static/page/location.png" style="width: 30rpx;height: 36rpx;" alt="" srcset="" />
				</view>

			</view>
			<view class="pam-main">
				<view class="pm-title">
					付款金额(元)
				</view>
				<view class="pm-write">
					<view class="font">
						￥
					</view>
					<view class="num">
						<input type="text" class="pr-num" @focus="playFoucus" placeholder="请输入金额" placeholder-style="color: #cfcfcf;" />
					</view>
				</view>
				<view class="pfooter u-border-top">
					向商家询问支付金额
				</view>
			</view>
			<view class="pac-cont">
				<view class="pac-left">
					<view class="pcfont">
						支付金额给商户
					</view>
					<view class="pcline">

					</view>
					<view class="pc-aplay">
						支付宝支付
					</view>
				</view>
				<view class="pac-link">
					查看活动规则
				</view>
			</view>
			<u-keyboard mode="number" :closeOnClickOverlay="true" @close="close" :show="show" @confirm="confirm" @cancel="cancel"></u-keyboard>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false
		}
	},
	methods: {
		playFoucus() {
			this.show = true;
		},
		confirm() {
			this.show = false;
		},
		cancel() {
			this.show = false;
		},
		close() {
			this.show = false;
		}
	}
}
</script>

<style lang="scss">
.uni-page-body {
	background: #ededed;
}

.pam-content {
	padding-top: 100rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;

	.pam-shop {
		display: flex;
		justify-content: space-between;

		.pam-mess {
			display: flex;
			height: 110rpx;

			.picon {
				width: 110rpx;
				height: 110rpx;
			}

			.pam-address {
				margin-left: 20rpx;

				.pname {
					margin-top: 15rpx;
					color: #454545;
					font-size: 32rpx;
					line-height: 1.5;
					font-weight: bold;
				}

				.paddre {
					margin-top: 5rpx;
					color: #666;
					font-size: 24rpx;
					line-height: 1.5;
				}
			}
		}

		.pam-local {
			width: 30rpx;
			height: 36rpx;
			margin-top: 60rpx;
		}
	}

	.pam-main {
		margin-top: 97rpx;
		padding-top: 30rpx;
		height: 380rpx;
		background: #fff;
		box-sizing: border-box;

		.pm-title {
			padding-left: 40rpx;
			color: #454545;
			font-size: 30rpx;
			line-height: 1.5;
		}

		.pfooter {
			margin-top: 60rpx;
			padding-left: 40rpx;
			padding-top: 40rpx;
			color: #666;
			font-size: 24rpx;
			line-height: 1.5;
		}

		.u-border-bottom,
		.u-border-top {
			border-color: #eee !important;
		}

		.pm-write {
			display: flex;
			height: 60rpx;
			padding-left: 40rpx;
			margin-top: 70rpx;

			.font {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #454545;
				font-weight: bold;
			}

			.num {
				margin-left: 20rpx;
				line-height: 60rpx;
				height: 60rpx;

				.pr-num {
					font-size: 68rpx;
					line-height: 70rpx;
					min-height: 70rpx;
					height: 70rpx;
					color: #454545;
				}
			}
		}
	}

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

		.pac-left {
			display: flex;

			.pcfont {
				font-size: 24rpx;
				color: #666;
				height: 30rpx;
				line-height: 30rpx;
			}

			.pcline {
				height: 28rpx;
				width: 2rpx;
				margin-left: 20rpx;
				background: #ccc;
			}

			.pc-aplay {
				padding-left: 40rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #999;
				background: url(../../static/page/aplay.png) no-repeat left center;
				background-size: 30rpx 30rpx;
			}
		}

		.pac-link {
			color: #1783FF;
			font-size: 24rpx;
			height: 30rpx;
			line-height: 30rpx;
			cursor: pointer;
		}
	}

	.pac-list {
		display: flex;
		display: none;
		justify-content: space-between;
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 14rpx;
		height: 415rpx;
		background: #f7f7f7;
		box-sizing: border-box;

		.pl-left {
			width: 537rpx;
		}

		.p-num {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			margin: 0;
			border: none;
			border-radius: 5rpx;
			background: #fff;
			font-size: 18px;
			color: #454545;
			font-weight: bold;

			&:after {
				border: none;
			}
		}

		.pleft-num {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.p-num {
				width: 170rpx;

				&.p-mar {
					margin-top: 14rpx;
				}
			}
		}

		.pleft-btom {
			display: flex;
			justify-content: space-between;
			margin-top: 14rpx;

			.p-num {
				width: 170rpx;
			}

			.pu-zero {
				width: 354rpx;
				margin-right: 14rpx;
			}
		}

		.pl-right {
			width: 170rpx;

			.pr-del {
				background: #fff url(../../static/page/del.png) no-repeat center center;
				background-size: 48rpx 34rpx;
			}

			.pr-sure {
				flex: 1;
				height: 290rpx;
				margin-top: 14rpx;
				color: #caf2d8;
				background: #ace4c1;
			}
		}
	}
}
</style>