From 21f5b6884a24a23e4c076e0b6af007455eda83ac Mon Sep 17 00:00:00 2001
From: cun-nan <19819293608@163.com>
Date: Wed, 10 Jan 2024 15:40:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/keyboard/keyboard.vue          | 159 ++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 gasStation-uni/components/keyboard/keyboard.vue

diff --git a/gasStation-uni/components/keyboard/keyboard.vue b/gasStation-uni/components/keyboard/keyboard.vue
new file mode 100644
index 000000000..210a2c1fb
--- /dev/null
+++ b/gasStation-uni/components/keyboard/keyboard.vue
@@ -0,0 +1,159 @@
+<template>
+	<view>
+		<view>
+			<view style="text-align: center;height: 50px;font-size: 20px;line-height: 50px;">{{value}}</view>
+			<view class="key-bom">
+				<view class="wrap">
+					<view class="key-line">
+						<view class="key-num" @click="valChange(1)">1</view>
+						<view class="key-num" @click="valChange(2)">2</view>
+						<view class="key-num" @click="valChange(3)">3</view>
+					</view>
+					<view class="key-line">
+						<view class="key-num" @click="valChange(4)">4</view>
+						<view class="key-num" @click="valChange(5)">5</view>
+						<view class="key-num" @click="valChange(6)">6</view>
+					</view>
+					<view class="key-line">
+						<view class="key-num" @click="valChange(7)">7</view>
+						<view class="key-num" @click="valChange(8)">8</view>
+						<view class="key-num" @click="valChange(9)">9</view>
+					</view>
+					<view class="key-line">
+						<view class="key-zero" @click="valChange(0)">0</view>
+						<view class="key-num" @click="valChange('.')">.</view>
+					</view>
+				</view>
+				<view class="wrap2">
+					<view class="key-back" @click="backspace"><u-icon name="backspace" size="28"></u-icon></view>
+					<view v-if="pApplt=='WECHAT'" class="key-pay" @click="choosePayMethod">支付</view>
+					<view v-else class="key-pay1" @click="choosePayMethod">支付</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:['pApplt'],
+		data() {
+			return {
+				value:"",
+				// 小程序类型：WECHAT 微信 ALIPAY 支付宝
+				appltType:"WECHAT",
+			}
+		},
+		onLoad() {
+			this.appltType = this.pApplt
+		},
+		methods: {
+			valChange(val) {
+				// 将每次按键的值拼接到value变量中，注意+=写法
+				uni.vibrateShort({
+					success: function () {}
+				});
+				let index = this.value.indexOf(".")
+				if(index!=-1){
+					if ((this.value.length-index)>=3){
+						return;
+					}
+					
+				}else{
+					if (this.value.length>=7 && val!="."){
+						return;
+					}
+				}
+				this.value += val;
+				// console.log(this.value.indexOf("."),this.value.length-index)
+				this.$emit('amount', this.value);
+				// console.log(this.value);
+			},
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
+				this.$emit('backVal', this.value);
+				uni.vibrateShort({
+					success: function () {}
+				});
+				// console.log(this.value);
+			},
+			// 选择支付方式
+			choosePayMethod(){
+				uni.vibrateShort({
+					success: function () {}
+				});
+				this.$emit('isPay', true);
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.key-bom{
+		display: flex;
+		justify-content: space-around;
+		background-color: gainsboro;
+		margin-bottom: 20px;
+	}
+	.wrap{
+		width: 73%;
+	}
+	.key-line{
+		width: 100%;
+		height: 45px;
+		line-height: 45px;
+		display: flex;
+		justify-content: space-around;
+		margin: 5px 0;
+	}
+	.key-num{
+		width: 31%;
+		text-align: center;
+		background-color: white;
+		border-radius: 5px;
+	}
+	.key-zero{
+		width: 64%;
+		text-align: center;
+		background-color: white;
+		border-radius: 5px;
+	}
+	.wrap2{
+		width: 24%;
+	}
+	.key-back{
+		width: 96%;
+		height: 45px;
+		line-height: 45px;
+		background-color: white;
+		border-radius: 5px;
+		margin: 5px 0;
+		padding-top: 10%;
+		padding-left: 30%;
+		box-sizing: border-box;
+	}
+	.key-pay{
+		width: 96%;
+		height: 145px;
+		line-height: 145px;
+		text-align: center;
+		background-color: #1fbe1d;
+		//background-color: #2773fc;
+		color: white;
+		border-radius: 5px;
+		margin: 5px 0;
+	}
+	.key-pay1{
+		width: 96%;
+		height: 145px;
+		line-height: 145px;
+		text-align: center;
+		// background-color: #1fbe1d;
+		background-color: #2773fc;
+		color: white;
+		border-radius: 5px;
+		margin: 5px 0;
+	}
+</style>