123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <view class="paymentPwd-container">
- <text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
- <view class="sms-item" @tap="showKeyboard=!showKeyboard">
- <u-message-input mode="bottomLine" :maxlength="6" v-model="value" :dot-fill="true" :disabled-keyboard="true"></u-message-input>
- </view>
- <view class="btn-con">
- <u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
- <u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
- </view>
-
- <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- nowSetp: 1,
- value: '',
- showKeyboard: false,
- oPwd: '',
- tPwd: '',
- }
- },
- onShow() {
- },
- onLoad() {
-
- setTimeout(() => {
- this.showKeyboard = true
- }, 50)
- },
- methods:{
-
- valChange(val) {
-
- if(this.value.length < 6){
- this.value += val
- }
- },
-
- backspace() {
-
- if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
- },
-
- submit(){
- if(!this.value || this.value.length < 6){
- uni.showToast({ title: '请输入6位数字支付密码', icon: 'none' })
- }else{
- if(this.nowSetp == 1){
- this.oPwd = this.value
- this.value = ''
- this.nowSetp++
- this.showKeyboard = true
- }else if(this.nowSetp == 2){
- this.tPwd = this.value
- this.checkPwd()
- }
- }
- },
-
- checkPwd(){
- if(this.oPwd == this.tPwd){
-
- uni.showToast({ title: '支付密码设置成功', icon: 'none' })
- setTimeout(()=>{
- uni.navigateBack({
- delta: 1
- })
- }, 2000)
- }else{
- uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
- this.value = ''
- this.showKeyboard = true
- }
- },
-
- cancel(){
- this.oPwd = ''
- this.tPwd = ''
- this.value = ''
- this.nowSetp = 1
- }
- }
- }
- </script>
- <style lang="less">
- .paymentPwd-container{
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #fff;
- .pwd-describe{
- display: block;
- color: #606266;
- padding: 80rpx 0 70rpx;
- text-align: center;
- }
- .btn-con{
- display: flex;
- justify-content: space-between;
- padding-top: 130rpx;
- .handle-btn{
- display: inline-block;
- width: 45%;
- margin: 0 auto;
- text-align: center;
- }
- }
- }
- </style>
|