apt-nl/src/pages/ifconfig/IfconfigSetup.vue

<template>
  <div class="right_side_box_1">
    <div v-if="fromShow" class="setup_wrapper">
      <div class="input_box">
        <div class="label" @click="$refs.input1.focus()">最大任务数</div>
        <input type="text" v-model="val1" ref="input1" @focus="show" data-layout="numeric">
      </div>
      <div class="input_box input_box_2">
        <div class="label" @click="$refs.input2.focus()">权限界面密码</div>
        <form>
          <input v-if="open1 === false" type="password" autocomplete=‘new-password’ v-model="val2" ref="input2" @focus="show" data-layout="normal">
          <input v-else type="text" v-model="val2" ref="input2" @focus="show" data-layout="normal">
        </form>
        <i :class="open1 === true?'icon_eyeopen':'icon_eyeclose'" @click="open1=!open1"></i>
      </div>
      <div class="input_box input_box_2" :class="{'error': error === true}">
        <div class="label" @click="$refs.input3.focus()">确认密码</div>
        <form>
          <input v-if="open2 === false" type="password" autocomplete=‘new-password’ v-model="val3" ref="input3" @focus="show" data-layout="normal">
          <input v-else type="text" v-model="val3" ref="input3" @focus="show" data-layout="normal">
        </form>
        <i :class="open2 === true?'icon_eyeopen':'icon_eyeclose'" @click="open2=!open2"></i>
      </div>
      <div class="btn_box">
        <button class="btn" :disabled="disabled2" @click="toSure">确定</button>
      </div>
    </div>
    <div v-else class="setup_no" @click="checkShow = true">验证密码>></div>
    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
    <div class="pop_wrapper" v-if="checkShow">
      <div class="pop_box">
        <h2>验证信息</h2>
        <div class="input_box input_box_2" :class="{'error': error === true}">
          <div class="label" @click="$refs.input4.focus()">密 码</div>
          <form>
            <input v-if="open3 === false" type="password" autocomplete=‘new-password’ v-model="pwd" ref="input4" @focus="show" data-layout="normal">
            <input v-else type="text" v-model="pwd" ref="input4" @focus="show" data-layout="normal">
          </form>
          <i :class="open3 === true?'icon_eyeopen':'icon_eyeclose'" @click="open3=!open3"></i>
        </div>
        <div class="pop_btns_box">
          <div class="pop_btn pop_btn_primary" :disabled="disabled1" @click="checkPassword">确定</div>
          <div class="pop_btn pop_btn_primary" @click="cancel">取消</div>
        </div>
      </div>
    </div>
    <div class="modal" v-if="checkShow"></div>
  </div>
</template>

<script>
import {checkPassword} from '@/config/getData.js'
import {parameterSetting} from '@/config/getData2.js'
export default {
  data () {
    return {
      val1: '',
      val2: '',
      val3: '',
      pwd: '',
      open1: false,
      open2: false,
      open3: false,
      error: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      },
      checkShow: false,
      fromShow: false,
      disabled1: false,
      disabled2: false
    }
  },
  created () {
    this.checkShow = true
  },
  methods: {
    async checkPassword () {
      this.disabled1 = true
      try {
        let res = await checkPassword(this.pwd)
        if (res.code === '1') {
          this.checkShow = false
          this.fromShow = true
        } else {
          this.toast(res.desc)
        }
        this.disabled1 = false
      } catch (e) {
        this.disabled1 = false
      }
      this.hide()
    },
    cancel () {
      this.checkShow = false
      this.pwd = ''
    },
    async toSure () {
      this.disabled2 = true
      if (this.val2 !== this.val3) {
        this.toast('密码不一致，请重新输入')
        this.error = true
        this.disabled2 = false
        return
      }
      try {
        let res = await parameterSetting(this.val1, this.val2)
        if (res.code === '1') {
          this.toast(res.desc)
          Object.assign(this.$data, this.$options.data())
        } else {
          this.toast(res.desc)
        }
        this.disabled2 = false
      } catch (e) {
        this.disabled2 = false
      }
      this.hide()
    },
    accept () {
      this.hide()
    },
    show (e) {
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1) {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
  #keyboard
    position fixed
    left 0
    right 0
    bottom 0
    z-index 1000
    width 100%
    max-width 1366px
    margin 0 auto
    padding 1em
    background-color #EEE
    box-shadow 0px -3px 10px rgba(black, 0.3)
    border-radius 10px
.right_side_box_1
  _wh(10.4rem,5.54rem)
  padding 1.02rem 0 0 .6rem
.setup_wrapper
  _wh(6rem,100%)
.input_box
  _wh(100%,1rem)
  background #FFFFFF
  border .016rem solid #8B90A6
  border-radius .16rem
  margin-bottom .24rem
  padding 0 .2rem
  _fj(flex-start)
  input
    width 3rem
    _font(.32rem,.968rem,#FA6400,,)
  i
    _font(.4rem,1rem,#8991A6,,)
.input_box_2
  _fj()
.label
  width 2rem
  _font(.32rem, 1rem,#696969,,)
.btn_box
  margin-top .36rem
.btn
  _wh(3rem,.88rem)
  _font(.32rem,.88rem,#fff,,center)
  background #989EBB
  border 2px solid #8B90A6
  border-radius .16rem
.btn_primary
  background #FD6A35
.error
  border 0.016rem solid #E74F19
  background-color #fdf7d5
  input
    background-color #fdf7d5
.pop_wrapper
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  z-index 999
  &::after
    content ""
    display inline-block
    height 100%
    width 0
    vertical-align middle
.modal
  position fixed
  left 0
  top 0
  _wh(100%,100%)
  opacity .5
  background #000
  z-index 998
.pop_box
  display inline-block
  vertical-align middle
  // _wh(8rem,4.8rem)
  // width 8rem
  padding .4rem
  background-color #fff
  border-radius .16rem
  overflow hidden
  h2
    _font(.4rem,.56rem,#464646,600,center)
    margin-bottom .2rem
.pop_btns_box
  _wh(100%,.88rem)
  _fj(center)
  margin-top .2rem
.pop_btn
  _wh(1.8rem,.88rem)
  background #989EBB
  border 2px solid #8B90A6
  border-radius: .28rem
  _font(.32rem,.88rem,#fff,500,center)
  margin 0 .12rem
.pop_btn_primary
  background #FD6A35
  border 2px solid #E74F19
.btngray
  background #989ebb
  border 2px solid #989ebb
.setup_no
  _font(.32rem, 1rem,#FD6A35,,)
</style>