1 <template>
  2     <div class="person_email">
  3         <div class="contain_email">
  4             <x-header :left-options="{backText: ''}">修改郵箱</x-header>
  5             <img class="qrcodeimg" src="../../../assets/new/email.png" alt="">
  6             <p>當前郵箱:&nbsp;&nbsp;{{email}}</p>
  7
 
             <group class='input_'>
  8                 <x-input ref="email" placeholder="輸入郵箱" v-model="new_email" @on-click-clear-icon="clear_Email">
  9                 </x-input>
 10             </group>
 11             <group title="" class='input_'>
 12                 <x-input placeholder="驗證碼" v-model="psw" @on-click-clear-icon="clear_psw">
 13
 
                     <x-button slot="right" type="primary" mini @click.native="get_psw"  v-bind:disabled="isDisabled">{{post_psw}}</x-button>
 14                 </x-input>
 15             </group>
 16             <div class="button_">
 17                 <x-button type="primary" @click.native="submit">提交</x-button>
 18
 
             </div>
 19         </div>
 20     </div>
 21 </template>
 22 <script>
 23     import { updatePhomail } from '@/controller/corp/update_phomail'
 24     import { changeEmail } from '@/controller/corp/change_email'
 25     import dateutil from '@/util/date'
 26     import { XHeader, Cell, Group, Panel, Confirm, CellBox, XInput, XButton } from 'vux'
 27     import KpBottomBtn from '@/plugin/bottombtn'
 28     export default {
 29         name: 'mine',
 30         props: ['mine'],
 31         data() {
 32             return {
 33                 email: JSON.parse(sessionStorage.getItem('agentStaffRes')).agentStaffEmail || "無郵箱資訊",
 34                 new_email: "",
 35                 psw: "",
 36                 time:60,
 37                 isDisabled:false,
 38                 post_psw:'獲取驗證碼'
 39                 
 40             }
 41         },
 42         components: {
 43             XHeader,
 44             Group,
 45             Cell,
 46             Panel,
 47             KpBottomBtn,
 48             Confirm,
 49             CellBox,
 50             XInput,
 51             XButton
 52         },
 53         computed: {
 54             profile() {
 55                 let corpRole = ''
 56                 let isInner = this.agentLoginStaff ? this.agentLoginStaff.agentType : ''
 57                 if(isInner) {
 58                     corpRole = isInner === 0 ? '(外部賬號)' : '（內部賬號）'
 59                 } else {
 60                     corpRole = ''
 61                 }
 62                 let profile = {
 63                     src: require('../../../assets/user_default.png'),
 64                     title: this.agentLoginStaff ? (this.agentLoginStaff.agentStaffName + ' | ' + this.agentLoginStaff.agentStaffPhone) : '',
 65                     desc: this.agentLoginStaff ? this.agentLoginStaff.agentName + corpRole : ''
 66                 }
 67                 if(this.agentLoginStaff) {
 68                     profile.src = this.agentLoginStaff.agentStaffAvatar
 69                 }
 70                 return [profile]
 71             }
 72         },
 73         mounted() {
 74             this.$refs.email.focus()
 75         },
 76         methods: {
 77             get_psw() { //驗證郵箱介面
 78                 let _this = this;
 79                 _this.isDisabled = true;
 80                 let interval = window.setInterval(function() {
 81                     _this.post_psw =  _this.time + 's後重試';
 82                     --_this.time;
 83                     if(_this.time < 0) {
 84                         _this.post_psw = "獲取驗證碼";
 85                         _this.time = 10;
 86                         _this.isDisabled = false;
 87                         window.clearInterval(interval);
 88                     }
 89                 }, 1000);
 90                 changeEmail({
 91                     email: this.new_email
 92                 })
 93             },
 94             submit() { //提交            
 95                 updatePhomail({
 96                     accountId: JSON.parse(sessionStorage.getItem('agentStaffRes')).accountId,
 97                     type: 2,
 98                     code: this.psw,
 99                     number: this.new_email,
100                     callback: res => {
101                         let temp = JSON.parse(sessionStorage.agentStaffRes)
102                         temp.agentStaffEmail = this.new_email
103                         sessionStorage.setItem('agentStaffRes', JSON.stringify(temp))
104                         this.$router.push('/person_center')
105                     }
106                 })
107             },
108             clear_Email(){
109                 this.new_email = ''
110             },
111             clear_psw(){
112                 this.psw = ''
113             }
114         }
115     }
116 </script>
117 <style lang="less">
118     .contain_email {
119         img {
120             display: block;
121             margin: auto;
122             margin-top: 30px;
123             margin-bottom: 30px;
124         }
125         p {
126             text-align: center;
127             font-weight: bold;
128         }
129         .input_ {
130             width: 329px;
131             margin: auto;
132             display: block;
133         }
134         .button_ {
135             width: 329px;
136             margin: auto;
137             height: 44px;
138             margin-top: 44px;
139         }
140     }
141 </style>

這樣游標在此頁面的時候就可以定位到input標籤上。