ソースを参照

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
修改

1004749546@qq.com 4 年 前
コミット
7e02e884e8
1 ファイル変更79 行追加16 行削除
  1. 79 16
      pages/checkOut/checkOut.vue

+ 79 - 16
pages/checkOut/checkOut.vue

@@ -22,7 +22,7 @@
 		<view class="num-cont">
 			<text>支付数量</text>
 			<view class="num-input">
-				<u-input v-model="number" type="number" placeholder="请输入数量" />
+				<u-input v-model="number" @click="inputNum('num')" type="number" placeholder="请输入数量" />
 				<text>个乐豆</text>
 			</view>
 		</view>
@@ -31,22 +31,36 @@
 			<u-button  @click="handlePay" type="error" >确认支付</u-button>
 		</view>
 		 <!-- 确认支付弹窗 -->
-		<u-modal v-model="showPayModal" title="请输入支付密码">
+		 <u-popup mode="center" closeable v-model="showPayModal" width="500rpx" >
 			<view class="slot-content">
-				<view>
-					<text>收取门店:</text>
-					<text>{{storeName}}</text>
+				<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>
-					<text>支付数量:</text>
-					<text>{{number}}</text>
-				</view>
-				<view>
-					<text>备注:</text>
-					<text>{{remarks}}</text>
+				<view class="footer">
+					<u-input v-model="password" @click="inputNum('psw')" type="password" placeholder="请输入支付密码" />
 				</view>
 			</view>
-		</u-modal>
+		</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>
 
@@ -54,16 +68,37 @@
 	export default{
 		data() {
 			return {
-				storeName: '和超级大黄蜂', // 门店名称
+				storeName: '和超级大黄蜂发挥教师的回复', // 门店名称
 				remarks: '', // 备注
 				number: '',  // 支付数量
-				showPayModal: false // 支付弹窗
+				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
@@ -98,6 +133,34 @@
 		}
 	}
 	.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>