login.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div>
  3. <form>
  4. <label for="username">账号:</label>
  5. <input type="text" id="username" v-model="username">
  6. <label for="password">密码:</label>
  7. <input type="password" id="password" v-model="password">
  8. <button type="submit" @click.prevent="login">登录</button>
  9. </form>
  10. </div>
  11. </template>
  12. <script>
  13. import {
  14. login
  15. } from '@/utils/api.js'
  16. export default {
  17. data() {
  18. return {
  19. username: '',
  20. password: ''
  21. }
  22. },
  23. onShow() {
  24. if(uni.getStorageSync('token')) {
  25. uni.switchTab({
  26. url: '/pages/index/index'
  27. })
  28. }
  29. },
  30. methods: {
  31. login() {
  32. // perform login logic here
  33. // uni.switchTab({
  34. // url: '/pages/index/index'
  35. // })
  36. // return
  37. login({
  38. username: this.username,
  39. password: this.password
  40. }).then(res => {
  41. console.log(res)
  42. if (res.code === 200) {
  43. this.$store.commit('setToken', res.result.token)
  44. uni.setStorageSync("token", res.result.token)
  45. uni.showToast({
  46. icon: 'none',
  47. duration: 3000,
  48. title: `成功`
  49. });
  50. uni.switchTab({
  51. url: '/pages/index/index'
  52. })
  53. }
  54. })
  55. }
  56. }
  57. }
  58. </script>
  59. <style>
  60. /* add any necessary styles here */
  61. form {
  62. display: flex;
  63. flex-direction: column;
  64. align-items: center;
  65. margin-top: 50px;
  66. }
  67. label {
  68. margin-bottom: 10px;
  69. }
  70. input {
  71. padding: 5px;
  72. margin-bottom: 20px;
  73. border-radius: 5px;
  74. border: 1px solid #ccc;
  75. }
  76. button {
  77. padding: 10px 20px;
  78. background-color: #4CAF50;
  79. color: white;
  80. border: none;
  81. border-radius: 5px;
  82. cursor: pointer;
  83. }
  84. button:hover {
  85. background-color: #3e8e41;
  86. }
  87. </style>