uniapp/pages_rush/components/pay-pop/pay-pop.vue

<template>
  <view class='szjp'>
    <view v-if="show">
      <view class="mask" @tap="Close"></view>
      <view class="box" :class="AlertObj[AlertClass][AlertClassUp]">
        <view class="bottom">
          <view class="bg">
            <image :src="$util.img('public/picture/pass/bg.png')" mode="widthFix" />
          </view>
          <view class="tle">
            <view class="tle_lft">
              <image :src="$util.img('public/picture/pass/pwd.png')" mode="widthFix" />
              <view class="tle_1">{{txt}}</view>
              <view class="tle_2">(长度{{pwdlength}}位)</view>
            </view>
            <view class="tle_rgt" @tap.stop="is_vis=!is_vis">
              <block v-if="is_vis">
                <image :src="$util.img('public/picture/pass/yj2.png')" mode="widthFix" />
              </block>
              <block v-else>
                <image :src="$util.img('public/picture/pass/yj1.png')" mode="widthFix" />
              </block>
            </view>
          </view>
          <view class="pwd_box" @click.stop>
            <view class="pwd-text" :class="{active:(idx==k)}" v-for="(v,k) in pwdlength" :key="k">
              {{star_lis[k] ||''}}
            </view>
          </view>
          <view class="pwd_info">
            <view @click="$util.redirectTo('/pages_tool/member/pay_password')">忘记密码?</view>
          </view>
         <view class="solt" @click.stop>
            <view class="s_lft">
              <button class="s_li" type="primary" plain="true" v-for="(v,k) in 9" :key="k"
                @tap="click(k+1)">{{k+1}}</button>
              <button class="s_li s_o" type="primary" plain="true" @tap=click(0)>0</button>
              <button class="s_li s_sq" type="primary" plain="true" @tap="Close">
                <image :src="$util.img('public/picture/pass/sq.png')" mode="widthFix" />
              </button>
            </view>
            <view class="s_rgt">
              <view class="s_cx">
                <button class="s_li s_x" type="primary" plain="true" @tap="del">
                  <image :src="$util.img('public/picture/pass/ht.png')" mode="widthFix" />
                </button>
              </view>
              <view class="s_qd">
                <button class="s_li s_s " type="primary" plain="true" @tap="submit">确定</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
/*引入插件*/
export default {
  props: {
    txt: {
      type: String,
      default: '支付密码'
    },
    pwdlength: {
      type: [Number, String],
      default: 1
    },
	isPass:{
		type: Boolean,
		default: false
	}
  },
  data() {
    return {
      Repeat: true,
      show: false,
      AlertObj: [
        ['a-bounceinB', 'a-bounceoutB'],
      ],
      AlertClass: 0,
      AlertClassUp: 0,
      res_pwd: [],
      fa_par: '',
      is_vis: false,//密码是否可见
    }
  },
  //   计算属性
  computed: {
    idx() {
      return this.res_pwd.length
    },
    star_lis() {
      if (this.is_vis) {
        return this.res_pwd
      }else {
        let arr = [];
        this.res_pwd.forEach(v => {
          arr.push('*')
        });
        return arr;
      }
    }
  },
  methods: {
    click(e) {
      if (this.res_pwd.length <= this.pwdlength - 1) {
        this.res_pwd.push(e)
        // #ifdef APP-PLUS
        plus.device.vibrate(50);//震动
        // #endif
      } else {
        this.toast(`最大长度${this.pwdlength}位`)
      }
    },
    del() {
      this.res_pwd.pop()
      // #ifdef APP-PLUS
      plus.device.vibrate(50);//震动
      // #endif
    },
    submit() {
      //   console.log('确定密码为', this.res_pwd.join(''))
      // #ifdef APP-PLUS
      plus.device.vibrate(50);//震动
      // #endif
      if (this.res_pwd.length == this.pwdlength) {
        let res = this.res_pwd.join('')
        this.$emit('pwd_e', res);//调用父元素方法
        this.Close()
      } else {
        this.toast(`长度未满足`)
      }
    },
    // 打开
    Open(par) {
      if (par) {
        console.log('父元素传参', par)
        this.fa_par = par;//父元素传参  
      }
      if (!this.Repeat) { return false }
      this.res_pwd = []
      this.Repeat = false;
      this.AlertClassUp = 0;
      this.show = true
      setTimeout(() => {
        this.Repeat = true;
      }, 300);
    },
    // 关闭
    Close() {
      if (!this.Repeat) { return false }
      clearTimeout(this.SetTime);
      this.Repeat = false;
      this.AlertClassUp = 1;
      setTimeout(() => {
        this.show = false;
        this.Repeat = true;
      }, 300);
    },
    toast(val) {
      uni.showToast({
        title: val,
        icon: 'error',
      });
    }
  }
}
</script>
<style lang="scss" scoped>
/*引入css文件*/
@import "./static/szjp.scss";
</style>