login.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div>
  3. <form>
  4. <label for="username">Username:</label>
  5. <input type="text" id="username" v-model="username">
  6. <label for="password">Password:</label>
  7. <input type="password" id="password" v-model="password">
  8. <button type="submit" @click.prevent="login">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. methods: {
  24. login() {
  25. // perform login logic here
  26. // uni.switchTab({
  27. // url: '/pages/index/index'
  28. // })
  29. // return
  30. login({
  31. username: this.username,
  32. password: this.password
  33. }).then(res => {
  34. console.log(res)
  35. if (res.code === 200) {
  36. this.$store.commit('setToken', res.result.token)
  37. uni.setStorageSync("token", res.result.token)
  38. uni.showToast({
  39. icon: 'none',
  40. duration: 3000,
  41. title: `成功`
  42. });
  43. uni.switchTab({
  44. url: '/pages/index/index'
  45. })
  46. }
  47. })
  48. }
  49. }
  50. }
  51. </script>
  52. <style>
  53. /* add any necessary styles here */
  54. form {
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. margin-top: 50px;
  59. }
  60. label {
  61. margin-bottom: 10px;
  62. }
  63. input {
  64. padding: 5px;
  65. margin-bottom: 20px;
  66. border-radius: 5px;
  67. border: 1px solid #ccc;
  68. }
  69. button {
  70. padding: 10px 20px;
  71. background-color: #4CAF50;
  72. color: white;
  73. border: none;
  74. border-radius: 5px;
  75. cursor: pointer;
  76. }
  77. button:hover {
  78. background-color: #3e8e41;
  79. }
  80. </style>