264 lines
6.9 KiB
Vue
264 lines
6.9 KiB
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>
|