1.代码尽量复用
2.调用高德地图，直辖市等，省字段一定有值，市可能为空（pro:'北京市'，city:[]）
3.支付密码不用组件
<template>
<view>
<view style="color:#333;margin: 60rpx 0 0 50rpx">{{message}}</view>
<view class="code-input-main">
<view class="inputLine">
<input type="password" class="input-item" maxlength="1" :value="code[0]">
<input type="password" class="input-item" maxlength="1" :value="code[1]">
<input type="password" class="input-item" maxlength="1" :value="code[2]">
<input type="password" class="input-item" maxlength="1" :value="code[3]">
<input type="password" class="input-item" maxlength="1" :value="code[4]">
<input type="password" class="input-item" maxlength="1" :value="code[5]">
</view>
<input @input="inputEvent" class="code-input-input" v-model="code" maxlength="6" type="number" />
<button class="nextBtn" @click="toPPSuccess">下一步</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
code: '',
message:'请输入支付密码',
};
},
methods: {
inputEvent(res){
},
toPPSuccess(){
},
onLoad(options){
},
}
</script>
<style scoped>
.code-input-input {
height: 400rpx;
position: absolute;
100%;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
300%;
margin-left: -100%;
background: #00000000;
}
.code-input-main {
display: flex;
flex-direction: column;
100%;
height: 400rpx;
}
.input-item {
80rpx;
height: 80rpx;
font-size: 40rpx;
background: #f5f5f5;
text-align: center;
border-radius: 5%;
margin-left: 10rpx;
margin-right: 10rpx;
/*color: #00F6FF;*/
}
.inputLine {
display: flex;
justify-content: center;
90%;
margin-top: 80rpx;
padding:0 5%;
}
.nextBtn{
margin-top: 100rpx;
z-index: 9999;
}
</style>
不需要做输入校验，手机端唤起的是数字输入键盘
4.