4 changed files with 282 additions and 28 deletions
-
18uniapp_project_code/src/components/index/keyboard/input_box_QR.vue
-
237uniapp_project_code/src/components/index/keyboard/input_box_end_phone.vue
-
13uniapp_project_code/src/components/index/keyboard/view_keyboard.vue
-
42uniapp_project_code/src/pages/index/index.nvue
@ -0,0 +1,237 @@ |
|||
<template> |
|||
<cover-view class="keyboard-box" :style="{ height: props.maskHeight + 'px' }" @touchmove.prevent="" @click.stop=""> |
|||
|
|||
<view class="kb-area"> |
|||
<image class="del-icon" src="/static/index/del_icon_big.png" mode="aspectFit" |
|||
@click="handle_closeKeyboardBox" /> |
|||
<text class="txt-title">请输入手机尾号后4位数验证</text> |
|||
|
|||
<!-- 条形码输入框 --> |
|||
<!-- <view class="txt-input"> |
|||
<text class="txt" :class="getInputClass()">{{inputValue||"请输入条形码"}}</text> |
|||
</view> --> |
|||
|
|||
<!-- 手机尾号后4位数验证 --> |
|||
<view class="end-phone-input"> |
|||
<view class="epi-box" v-for="i in props.maxInput"> |
|||
<text class="epi-txt" >{{inputValue[i-1]}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="input-keyboard"> |
|||
<viewKeyboard :maxInput="props.maxInput" @inputValueUpdate="accept_inputValueUpdate"></viewKeyboard> |
|||
<view class="sure-btn" @click="handle_clickCommit"> |
|||
<text class="txt">确定</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</cover-view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import util from "@/utils/util.js" |
|||
import viewKeyboard from "@/components/index/keyboard/view_keyboard.vue"; |
|||
|
|||
import { |
|||
onMounted, |
|||
ref |
|||
} from 'vue' |
|||
|
|||
//define emits or props |
|||
const emits = defineEmits(['showIt','clickCommit']) |
|||
const props = defineProps({ |
|||
maskHeight: { |
|||
type: Number, |
|||
default: 1200 |
|||
}, |
|||
maxInput: { |
|||
type: Number, |
|||
default: 4 |
|||
} |
|||
}) |
|||
|
|||
let inputValue = ref("") // |
|||
|
|||
onMounted(async (res) => { |
|||
console.log(res + ` the keyboard_box component is now mounted. ` + props.maskHeight) |
|||
}) |
|||
|
|||
const handle_closeKeyboardBox = () => { |
|||
emits("showIt", "false") |
|||
} |
|||
const handle_clickCommit = () => { |
|||
emits("clickCommit", inputValue.value) |
|||
} |
|||
const accept_inputValueUpdate = (i) => { |
|||
console.log("accept_inputValueClick:", i) |
|||
inputValue.value = i.split("") |
|||
console.log("inputValue:",inputValue.value) |
|||
} |
|||
|
|||
// getInputClass |
|||
const getInputClass = () => { |
|||
if (inputValue.value == "") { |
|||
return "txt-blank" |
|||
} |
|||
return "txt-write" |
|||
} |
|||
const getNumClick = (i) => { |
|||
if (i <= 9) return i |
|||
if (i == 10) return "0" |
|||
if (i == 11) return "" //delete |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.keyboard-box { |
|||
|
|||
width: 750rpx; |
|||
height: 1000rpx; |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: auto; |
|||
bottom: auto; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 11; |
|||
|
|||
@include ctf(center); |
|||
|
|||
.kb-area { |
|||
width: 533.33rpx; |
|||
// height: 827.64rpx; |
|||
background: #fff; |
|||
border-radius: 13.89rpx; |
|||
@include ctf(flex-start); |
|||
flex-direction: column; |
|||
|
|||
.del-icon { |
|||
width: 27.78rpx; |
|||
height: 27.78rpx; |
|||
align-self: flex-end; |
|||
margin: 21rpx 21rpx 0 0; |
|||
} |
|||
|
|||
.txt-title { |
|||
font-weight: 600; |
|||
font-size: 25rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.txt-input { |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
margin-top: 62rpx; |
|||
margin-bottom: 69rpx; |
|||
padding-left: 20rpx; |
|||
width: 470.83rpx; |
|||
height: 69.44rpx; |
|||
border: 0.69rpx solid #979797; |
|||
border-radius: 6.94rpx; |
|||
|
|||
.txt { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.txt-write { |
|||
font-weight: 700; |
|||
font-size: 25rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.txt-blank { |
|||
font-size: 22.22rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
|
|||
// 手机尾号后4位数验证 |
|||
.end-phone-input{ |
|||
width: 470.83rpx; |
|||
height: 69.44rpx; |
|||
// border: 0.69rpx solid #979797; |
|||
// border-radius: 6.94rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
margin-top: 69rpx; |
|||
margin-bottom: 69rpx; |
|||
|
|||
.epi-box { |
|||
width: 69.44rpx; |
|||
height: 69.44rpx; |
|||
background: #F2F2F2; |
|||
border: 0.69rpx solid #979797; |
|||
border-radius: 6.94rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
margin: 0 17.5rpx; |
|||
.epi-txt { |
|||
font-weight: 700; |
|||
font-size: 45rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.input-keyboard { |
|||
width: 533.33rpx; |
|||
height: 536.81rpx; |
|||
background: #E8E8E8; |
|||
border-radius: 0 0 6.94rpx 6.94rpx; |
|||
@include ctf(center); |
|||
flex-direction: column; |
|||
|
|||
.sure-btn { |
|||
margin-top: 50rpx; |
|||
width: 490.28rpx; |
|||
height: 69.44rpx; |
|||
background: #009874; |
|||
border-radius: 6.94rpx; |
|||
@include ctf(center); |
|||
|
|||
.txt { |
|||
font-weight: 800; |
|||
font-size: 25rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.video-tip { |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
|
|||
.v-image { |
|||
width: 70.03rpx; |
|||
height: 54.17rpx; |
|||
} |
|||
|
|||
.v-text { |
|||
margin-left: 16rpx; |
|||
font-weight: 400; |
|||
font-size: 19.44rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
|
|||
.cancel-button { |
|||
@include ctf(center); |
|||
width: 131.94rpx; |
|||
height: 51.39rpx; |
|||
border: 0.69rpx solid #999999; |
|||
border-radius: 6.94rpx; |
|||
|
|||
.v-text { |
|||
@include flcw(33.33upx, 46.53upx, #fff, 500); |
|||
font-weight: 500; |
|||
font-size: 16.67rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue