1 <template>
  2   <div>
  3     <a-form :form="form" style="width:100%; margin: 10px auto;">
  4       <a-row :gutter="[16, 16]" type="flex" align="middle">
  5         <a-col :span="6"
  6           ><a-form-item><span>新密码</span></a-form-item>
  7         </a-col>
  8         <a-col :span="18">
  9           <a-form-item>
 10             <a-input-password
 11               v-decorator="['password', validatorRules.password]"
 12               type="password"
 13               autocomplete="false"
 14               placeholder="test123"
 15             >
 16             </a-input-password> </a-form-item
 17         ></a-col>
 18       </a-row>
 19       <a-row :gutter="[16, 16]" type="flex" align="middle">
 20         <a-col :span="6"
 21           ><a-form-item><span>确认密码</span></a-form-item>
 22         </a-col>
 23         <a-col :span="18">
 24           <a-form-item>
 25             <a-input-password
 26               v-decorator="['confirmPassword', validatorRules.confirmPassword]"
 27               type="password"
 28               autocomplete="false"
 29             >
 30             </a-input-password>
 31           </a-form-item>
 32         </a-col>
 33       </a-row>
 34       <a-form-item style="margin:16px 0">
 35         <a-row :gutter="[16, 16]" type="flex" align="middle" justify="center">
 36           <a-col :span="12">
 37             <a-button style="float:right;margin-right:16px" @click="prevStep"
 38               >上一步</a-button
 39             >
 40           </a-col>
 41           <a-col :span="12">
 42             <a-button
 43               style="float:left;margin-left:16px"
 44               :loading="loading"
 45               type="primary"
 46               @click="nextStep"
 47               >提交</a-button
 48             >
 49           </a-col>
 50         </a-row>
 51       </a-form-item>
 52     </a-form>
 53   </div>
 54 </template>
 55 
 56 <script>
 57 import { passwordChange } from '@/api/login'
 58 export default {
 59   name: 'Step2',
 60   //    components: {
 61   //      Result
 62   //    },
 63   props: {
 64     userList: {
 65       type: Object,
 66       required: true,
 67       default: () => {}
 68     }
 69   },
 70   data() {
 71     return {
 72       loading: false,
 73       form: this.$form.createForm(this),
 74       validatorRules: {
 75         password: {
 76           rules: [
 77             {
 78               required: true,
 79               pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
 80               message: '最少6个字符'
 81             },
 82             { validator: this.handlePasswordLevel }
 83           ]
 84         },
 85         confirmPassword: {
 86           rules: [
 87             { required: true, message: '密码不能为空!' },
 88             { validator: this.handlePasswordCheck }
 89           ]
 90         }
 91       }
 92     }
 93   },
 94   methods: {
 95     nextStep() {
 96       let that = this
 97       that.loading = true
 98       this.form.validateFields((err, values) => {
 99         if (!err) {
100           let params = {}
101           params.password = values.password
102           params.captcha = this.userList.smsCaptcha
103           params.phone = this.userList.phone
104           passwordChange(params)
105             .then(res => {
106               let userList = {
107                 phone: this.userList.phone
108               }
109               setTimeout(function() {
110                 that.$emit('nextStep', userList)
111               }, 1500)
112             })
113             .catch(err => {
114               this.$message.error(err)
115               that.loading = false
116             })
117         } else {
118           that.loading = false
119         }
120       })
121     },
122     prevStep() {
123       this.$emit('prevStep', this.userList)
124     },
125 
126     handlePasswordCheck(rule, value, callback) {
127       let password = this.form.getFieldValue('password')
128       if (value && password && value.trim() !== password.trim()) {
129         callback(new Error('两次密码不一致'))
130       }
131       callback()
132     }
133   }
134 }
135 </script>
136 <style lang="less" scoped>
137 .ant-form-item-label,
138 .ant-form-item-control {
139   line-height: 22px;
140 }
141 </style>