uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）

<template>
  <view class="paymentCodeBox">
    <!-- 自定义键盘 -->
    <view class="password-set-page">
      <view class="setPage">
        <view class="hint margin-bottom30 height110 width100Percent font-size32 color222 font-bold">
          输入支付密码
          <view class="width50 height50 imgClose" @click="closeClick()">
            <image src="../static/goods/close.png" mode="" class="width50 height50"></image>
          </view>
        </view>
        <view class="code margin-bottom30">
          <view class="numFont">
            <view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
          </view>
        </view>
        <view class="slipBox dis_f margin-left30 margin-right30 margin-bottom80">
          <view class="font-size24 colorccc">忘记支付密码或没有设置支付密码？</view>
          <view class="dis_f goto">
            <text class="margin-right10 font-size24" style="color: #F21177;">去修改支付密码</text>
            <view class="imgBox">
              <image src="../static/goods/tz2.png" mode="" class="img"></image>
            </view>
          </view>
        </view>
        <view class="keyboard">
          <button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
            <text>{{ index + 1 }}</text>
          </button>
          <button class="hide"></button>
          <button @click="key(0)">
            <text>0</text>
          </button>
          <button @click="del()">
            <!-- <image src="../static/enter/btn_xuanzhong.png" mode="aspectFill"></image> -->
            <image src="../static/goods/del1.png" mode="aspectFill"></image>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        // pageNum: 1,
        password: '',
      }
    },
    // 页面加载
    onLoad(e) {
      uni.hideTabBar(); //不让底部显示tab选项
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      //关闭键盘
      closeClick(){
        this.password = '';
        this.KeypadShow = 0;
      },
      // 键盘
      key(key) {
        if (this.password.length < 6) {
          this.password += key
          if (this.password.length === 6) {
            // 密码验证操作
            console.log(this.password,'37')
            // this.$.open('/trait/details');
          }
        }
      },
      del() {
        if (this.password.length > 0) {
          this.password = this.password.substring(0, this.password.length - 1)
        }
      },
      //获取列表数据
      getListData() {
        this.$.ajax("POST", "/xxxxx/xxxxx", {
          page: this.pageNum,
        }, (res) => {
          if (res) {
            if (this.pageNum == 1) {
              this.list = res.data
            } else {
              this.list = this.list.concat(res.data)
              if (res.data.length === 0) {
                this.pageNum--
              }
            }
          }
          uni.stopPullDownRefresh()
        });
      }
    },
    // 计算属性
    computed: {
    },
    // 侦听器
    watch: {
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
      // this.pageNum = 1
      // this.getListData()
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
      // this.pageNum++
      // this.getListData()
    },
  }
</script>
<style lang="scss" scoped>
  .paymentCodeBox {
    width: 100%;
    height: 100vh;
    background: #fff;
    .password-set-page {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background-color: rgba(0, 0, 0, .5);
      z-index: 999999;
      .setPage{
        position: fixed;
        bottom: 0;
        background: #fff;
        border-radius: 20rpx 20rpx 0px 0px;
        .hint{
          line-height: 110rpx;
          position: relative;
          text-align: center;
          border-bottom: 1rpx solid #ECECEC;
          .imgClose{
            position: absolute;
            right: 20rpx;
            top: 26rpx;
          }
        }
      }
      .slipBox{
        display: flex;
        justify-content: space-between;
        .goto{
          align-items: center;
          .imgBox{
            width: 9rpx;
            height: 16rpx;
            .img{
              width: 9rpx;
              height: 16rpx;
            }
          }
        }
      }
      .code {
        view {
          // border: 1rpx solid #D9D9D9;
          border-radius: 8rpx;
          overflow: hidden;
          display: flex;
          width: 690rpx;
          margin: 0 auto;
          view {
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 100rpx;
            height: 100rpx;
            // background: #FAFAFA;
            font-size: 60rpx;
            border: 1rpx solid #D9D9D9;
            &:not(:last-child) {
              border-right: 1rpx solid #D9D9D9;
            }
          }
        }
      }
      .keyboard {
        width: 100%;
        background: #EEEEEE;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(100vw / 3 - 1rpx);
          background: #FFFFFF;
          border-radius: 0;
          margin-top: 1rpx;
          font-size: 50rpx;
          height: 120rpx;
          &.button-hover:not(.hide) {
            background: #EEEEEE;
          }
          image {
            width: 52rpx;
            height: 38rpx;
          }
        }
      }
    }
  }
</style>