<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" 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-modal v-model="showPayModal" title="请输入支付密码">
			<view class="slot-content">
				<view>
					<text>收取门店:</text>
					<text>{{storeName}}</text>
				</view>
				<view>
					<text>支付数量:</text>
					<text>{{number}}</text>
				</view>
				<view>
					<text>备注:</text>
					<text>{{remarks}}</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				storeName: '和超级大黄蜂', // 门店名称
				remarks: '', // 备注
				number: '',  // 支付数量
				showPayModal: false // 支付弹窗
			}
		},
		onLoad() {
			
		},
		methods: {
			// 确认支付
			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{
		
	}
</style>
