fundHoldApp/components/master-keyboard/master-keyboard.vue

<template>
	<view class="">
		<view class="master_wrap" v-if="show" hover-stop-propagation>
			<block v-if="keyboardtype == 'number' || keyboardtype == 'digit' || keyboardtype == 'idcard'">
				<view class="down_wrap">
					<image src="./static/icon_down.png" @tap.stop="handleCloseKeyboard(false)"></image>
				</view>
				<view class="kerboard_number">
					<view @tap.stop="handleNumberKeyboardClick(item)" :hover-stay-time="100"
						:class="item== '-1' ? keyboardtype == 'number' ?  'number_empty' :'number_item' : item=='-2' ? 'number_delete' : 'number_item' "
						:hover-class="item== '-1' ?  keyboardtype == 'number' ?  'number_empty_active' : 'number_item_active' : item=='-2' ? 'number_delete_active' : 'number_item_active'"
						v-for="(item,index) in  randomNumberArr" :key="index">
						<block v-if="item == '-1'">
							<view v-if="keyboardtype == 'digit'">
								·
							</view>
							<view v-else-if=" keyboardtype ==  'idcard'">
								X
							</view>
						</block>
						<block v-else-if="item == '-2'">
							<image class="delete_img" src="./static/icon_delete.png"></image>
						</block>
						<block v-else>
							{{item}}
						</block>
					</view>
				</view>
			</block>
			
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog type="warn" cancelText="取消" confirmText="去设置" title="提示" content="还未设置支付密码" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
		
<!-- 		<view class="">
			<payResult :show="showResult" :success="success" :number="param.amount"></payResult>
		</view> -->
	</view>
</template>

<script>
	import { haveOrNotPayPwd } from '@/api/mine/payPwd.js'
	// import payResult from '@/components/payResult/index.vue'
	
	export default {
		name: "master-keyboard",
		props: {
			keyboardtype: {
				type: String,
				default: 'number' // number=数字键盘 digit=带小数点的数字键盘  idcard=身份证号键盘  
			},
			defaultValue: {
				type: String,
				default: ''
			},
			randomNumber: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				numberArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
				show: false,
			};
		},
		computed: {
			randomNumberArr: function() {
				if(this.$props.randomNumber){
					this.numberArr.sort(function() {
						return 0.5 - Math.random()
					})
				}
				const size = this.numberArr.length
				this.numberArr.splice(size - 1, 0, "-1")
				this.numberArr.push("-2")
				return this.numberArr
			}
		},
		watch: {
			show: function(value) {

			}
		},
		onLoad() {},
		methods: {
			// 验证用户有无支付密码
			checkPayPassword(){
				// console.log("---------x-----------")
				haveOrNotPayPwd().then(res=>{
					if(res.data){//有密码
						// this.$refs.alertDialog.open()
					}else{//无密码
						this.$refs.alertDialog.open()
					}
				})
			},
			dialogConfirm(){
				uni.navigateTo({
					url: '/pages/mine/pwd/payPwd'
				})
			},
			dialogClose(){
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			handleCloseKeyboard() {
				this.open(false)
			},
			open(value) {
				this.show = value
			},
			//数字键盘点击事件
			handleNumberKeyboardClick(e) {
				const keyValue = e
				if (this.$props.keyboardtype == 'number' || this.$props.keyboardtype == 'digit' || this.$props
					.keyboardtype == 'idcard') {
					switch (keyValue) {
						case '-1':
							if (this.$props.keyboardtype == 'number' || this.$props.defaultValue == '') {
								return
							}
							let value = this.$props.defaultValue
							if (/^[\u4e00-\u9fa5]*$/.test(value) || value.indexOf('.') > -1 || value.indexOf('X') > -1) {
								return
							}
							if (this.$props.keyboardtype == 'idcard') {
								if (value.length === 17) {
									this.$emit('keyboardClick', {
										value: value + 'X'
									})
								}
							}
							if (this.$props.keyboardtype == 'digit') {
								this.$emit('keyboardClick', {
									value: value + '.'
								})
							}
							break
						case '-2':
							let deleteValue = this.$props.defaultValue
							if (deleteValue == '' || /^[\u4e00-\u9fa5]*$/.test(deleteValue)) {
								return
							}
							if (deleteValue.length > 0) {
								let count = deleteValue.length
								this.$emit('keyboardClick', {
									value: deleteValue.substr(0, count - 1)
								})
							}
							break
						default:
							let initValue = this.$props.defaultValue
							if (/^[\u4e00-\u9fa5]*$/.test(initValue)) {
								initValue = ''
							}
							if (this.$props.keyboardtype == 'idcard') {
								if (initValue.length < 18) {
									this.$emit('keyboardClick', {
										value: initValue + keyValue
									})
								}
								return
							}
							this.$emit('keyboardClick', {
								value: initValue + keyValue
							})
							break
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './static/master-keyboard.scss';
</style>