login.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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. if (uni.getStorageSync('userInfo')) {
  30. let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  31. this.username = userInfo.username
  32. this.password = userInfo.password
  33. }
  34. },
  35. methods: {
  36. login() {
  37. // perform login logic here
  38. // uni.switchTab({
  39. // url: '/pages/index/index'
  40. // })
  41. // return
  42. login({
  43. username: this.username,
  44. password: this.password
  45. }).then(res => {
  46. console.log(res)
  47. if (res.code === 200) {
  48. this.$store.commit('setToken', res.result.token)
  49. uni.setStorageSync("token", res.result.token)
  50. let userInfo = {
  51. username: this.username,
  52. password: this.password
  53. }
  54. uni.setStorageSync("userInfo", JSON.stringify(userInfo))
  55. uni.showToast({
  56. icon: 'none',
  57. duration: 3000,
  58. title: `成功`
  59. });
  60. uni.switchTab({
  61. url: '/pages/index/index'
  62. })
  63. }
  64. })
  65. }
  66. }
  67. }
  68. </script>
  69. <style>
  70. /* add any necessary styles here */
  71. form {
  72. display: flex;
  73. flex-direction: column;
  74. align-items: center;
  75. margin-top: 50px;
  76. }
  77. label {
  78. margin-bottom: 10px;
  79. }
  80. input {
  81. padding: 5px;
  82. margin-bottom: 20px;
  83. border-radius: 5px;
  84. border: 1px solid #ccc;
  85. }
  86. button {
  87. padding: 10px 20px;
  88. background-color: #4CAF50;
  89. color: white;
  90. border: none;
  91. border-radius: 5px;
  92. cursor: pointer;
  93. }
  94. button:hover {
  95. background-color: #3e8e41;
  96. }
  97. </style>