<template>
	<view class="page-content">
		<u-gap height="10" bg-color="#f8f8f8"></u-gap>
		<u-field
			class="field-item"
			v-model="storeName"
			disabled
			input-align="right"
			label="收取门店"
			placeholder="请填写手机号"
		>
		</u-field>
		<u-field
			v-model="remarks"
			label="备注"
			input-align="right"
			auto-height
			placeholder="请填写备注(最多500个字符)"
			type="textarea"
		>
		</u-field>
		<view class="num-cont">
			<text>支付数量</text>
			<view class="num-input">
				<u-input v-model="number" @click="inputNum('num')" type="number" placeholder="请输入数量" />
				<text>个乐豆</text>
			</view>
		</view>
		<u-gap height="50" bg-color="#f8f8f8"></u-gap>
		<view class="pay-btn">
			<u-button  @click="handlePay" type="error" >确认支付</u-button>
		</view>
		 <!-- 确认支付弹窗 -->
		 <u-popup mode="center" closeable v-model="showPayModal" width="500rpx" >
			<view class="slot-content">
				<view>请输入支付密码</view>
				<view class="text-cont">
					<view>
						<text>收取门店:</text>
						<text>{{storeName}}</text>
					</view>
					<view>
						<text>支付数量:</text>
						<text><text class="num-big">{{number}}</text>个乐豆</text>
					</view>
					<view>
						<text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
						<text>{{remarks||'--'}}</text>
					</view>
				</view>
				<view class="footer">
					<u-input v-model="password" input-align="center" @click="inputNum('psw')" type="password" placeholder="请输入支付密码" />
				</view>
			</view>
		</u-popup>
		<u-keyboard mode="number" 
			safe-area-inset-bottom
			v-model="showKeyboard" 
			@change="handleChange" 
			@backspace="handleBack" 
			@confirm="showKeyboard=false" 
			@cancel="showKeyboard=false">
		</u-keyboard>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				storeName: '和超级大黄蜂发挥教师的回复', // 门店名称
				remarks: '', // 备注
				number: '',  // 支付数量
				showPayModal: false, // 支付弹窗
				password: '', // 支付密码
				showKeyboard: false, // 数字键盘
				keyInputType: '' // 适用数字键盘输入关联的文本框  num:乐豆数量  psw: 支付密码
			}
		},
		onLoad() {
			
		},
		methods: {
			// 打开数字键盘
			inputNum(type) {
				this.keyInputType = type
				this.showKeyboard =  true
			},
			// 数字键盘输入改变
			handleChange (val) {
				if (this.keyInputType == 'num') {
					this.number += val
				} else {
					this.password += val
				}
				console.log(this.value)
			},
			// 数字键盘退格键
			handleBack () {
				
			},
			// 确认支付
			handlePay() {
				this.showPayModal = true
			}
		},
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.page-content{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.num-cont{
			width: 100%;
			padding: 30upx;
			.num-input{
				display: flex;
				align-items: center;
				justify-content: center;
				>u-input {
					width: 300upx;
					border-bottom: 1px solid #f8f8f8;
				}
			}
		}
		.pay-btn{
			padding: 0 30upx;
		}
	}
	.slot-content{
		padding: 30upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.text-cont{
			width: 100%;
			margin-top: 20upx;
			border-bottom: 1px solid #F8F8F8;
			>view {
				padding: 20upx 40upx;
				display: flex;
				>text{
					&:last-child {
						flex: 1;
						padding-left: 30upx;
					}
					.num-big{
						font-size: 36upx;
						color: red;
					}
				}
			}
			
		}
		.footer{
			width: 50%;
			border-bottom: 1px solid #b1b1b1;
		}
	}
</style>
