Login.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <view class="content">
  3. <image class="logo" src="/static/icons/logo.png"></image>
  4. <view class="title">
  5. 管理后台
  6. </view>
  7. <form @submit="loginSubmit">
  8. <view class="section">
  9. <input class="input-account" name="username" placeholder="请输入用户名" />
  10. </view>
  11. <view class="section">
  12. <input class="input-pwd" password name="password" placeholder="请输入密码" />
  13. </view>
  14. <view class="btn-area">
  15. <button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
  16. </view>
  17. </form>
  18. </view>
  19. </template>
  20. <script>
  21. import { mapState } from 'vuex';
  22. export default {
  23. computed: {
  24. ...mapState(['isLoading']),
  25. loginBtnLabel() {
  26. return this.isLoading ? '' : '登录';
  27. }
  28. },
  29. methods: {
  30. loginSubmit(event) {
  31. uni.hideKeyboard();
  32. const { value: loginForm } = event.detail;
  33. this.$store.dispatch('login', loginForm)
  34. .then(_ => {
  35. // uni.redirectTo({
  36. // url: '/pages/Charts/column',
  37. // });
  38. //标记刚登录跳转
  39. uni.setStorageSync('test', '1');
  40. uni.reLaunch({
  41. url: '/pages/Charts/mainStatistics',
  42. });
  43. });
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss">
  49. page {
  50. padding: 200upx 0 0 0;
  51. background-image: url('~@/static/backgrounds/login_bg.png');
  52. background-repeat: no-repeat;
  53. background-size: 100% 100%;
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. right: 0;
  58. bottom: 0;
  59. .content {
  60. padding: 0 20upx;
  61. display: flex;
  62. flex-flow: column nowrap;
  63. align-items: center;
  64. .logo {
  65. width: 401upx;
  66. height: 125upx;
  67. text-align: center;
  68. margin: 50upx;
  69. }
  70. form {
  71. width: calc(100% - 100upx);
  72. padding: 50upx;
  73. .section {
  74. margin: 50upx 0;
  75. }
  76. .btn-area {
  77. margin-top: 100upx;
  78. button {
  79. background-color: $uni-color-primary;
  80. }
  81. }
  82. }
  83. }
  84. }
  85. </style>