guosen-ldt-client/pages/checkstand/index.vue

<template>
	<view class="check-panel flex-direction">
			<image :src="logo" class="buyer-logo"></image>
			<view class="title center">{{buyer}}</view>
			<view class="input-content">
				<view class="tips">交易金额</view>
				<view class="input-bar center" @tap="show=true">
					<view class="icon center">￥</view>
					<view class="input center">
						<view>{{orderAmount}}</view>
						<view class="cusor"></view>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
				<u-button class="button" type="warning" @click="$jump('/pages/checkstand/order-res')">付款</u-button>
			</view>
			
			<view  class="bottom-line center"> -- 联兑通提供技术支持 --</view>
			<u-keyboard 
				ref="uKeyboard" 
				:show-tips="false"
				:safe-area-inset-bottom="true" 
				:mask="false"
				v-model="show" 
				@change="handleInput" 
				@backspace="handleDelete"
			></u-keyboard>
		</view>
</template>

<script>
	export default {
		onLoad(option) {
		},
		data() {
			return {
				show: true,
				logo: "/static/bank/ABC.png",
				buyer: "中国招商银行",
				orderAmount: '',
			}
		},
		methods: {
			handleInput(num){
							if(this.orderAmount.length>12) {
								return
							}
							this.orderAmount =this.orderAmount + num
						},
						handleDelete(){
							if(this.$isEmpty(this.orderAmount)){
								return
							}
							this.orderAmount = this.orderAmount.substr(0,this.orderAmount.length-1)
						},
		}
	}
</script>

<style lang="scss" scoped>
	.check-panel{
			.buyer-logo{
				width: 100rpx;
				height: 100rpx;
				margin-top: 50rpx;
				margin-left: calc(50% - 50rpx);
			}
			.title{
				height: 70rpx;
				letter-spacing: 3rpx;
				color: #5D5D5D;
			}
			.input-content{
				padding: 50rpx;
				position: absolute;
				top: 280rpx;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #FFFFFF;
				width: 100%;
				border-radius: 25rpx 25rpx 0 0;
				.tips{
					height: 100rpx;
					font-size: 30rpx;
					display: flex;
					justify-content: left;
					align-items: center;
				}
				.input-bar{
					height: 150rpx;
					border-bottom: 1rpx solid #DDDDDD;
					.icon{
						width: 15%;
						font-size: 70rpx;
						font-weight: 900;
						height: 100%;
					}
					.input{
						width: 85%;
						height: 100%;
						overflow: hidden;
						font-size: 70rpx;
					}
					.cusor{
						width: 2rpx;
						height: 80%;
						background-color: #FD711B;
						animation: blink 1500ms infinite ease-in-out;
					}
				}
			}
		}
		.bottom-line{
			position: absolute;
			bottom: 50rpx;
			left: 0;
			width: 100%;
			color: #dddddd;
		}
		  @keyframes blink {
		    from{
				opacity: 0;
			}
		  }
</style>