1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
| <template> <div class="main"> <cube-form :model="model" @submit="submitHandler"> <cube-form-group> <!--⼿机号--> <cube-form-item :field="fields[0]"></cube-form-item> <!--密码--> <cube-form-item :field="fields[1]"></cube-form-item> </cube-form-group> <cube-form-group> <cube-button type="submit">登录</cube-button> </cube-form-group> </cube-form> <router-link to="/register" class="reg">注册</router-link> </div> </template>
<script> // 登录接口 import {userLogin} from '@/api/getData.js'
export default { data:()=> { return { model: { phoneValue:'', pwdValue:'', }, fields: [ { type: 'input', modelKey: 'phoneValue', label: '手机号', props: { placeholder: '请输入手机' }, rules: { required: true }, messages: { required: '手机号不能为空' } }, { type: 'input', modelKey: 'pwdValue', label: '密码', props: { placeholder: '请输入密码', type: 'password', eye: { open: false } }, rules: { required: true }, messages: { required: '密码不能为空' } } ] } }, methods: { submitHandler(e, model) { e.preventDefault(); //调⽤注册接⼝ userLogin(model.phoneValue,model.pwdValue) .then((res) => { if (res.data.code === 0) { localStorage.setItem('token',res.data.data) this.$store.dispatch('setToken', res.data.data)
// 跳转到主页 this.$router.push({path:'/'}) } else { const toast = this.$createToast({ txt: "登录失败", type: "error", time: 1500 }); toast.show(); } }) } } } </script>
<style lang="scss" scoped> .main { padding: 50px 5% 0; text-align: center; }
//注册 .cube-btn { margin-top: 20px; }
// 登录 .reg { display: inline-block; margin-top: 30px; font-size: 18px; } </style>
|