login.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="hc-login-box relative h-full p-4">
  3. <view class="hc-dot-box">
  4. <view un-absolute un-b-rounded-100 class="dot dot-1"/>
  5. <view un-absolute un-b-rounded-100 class="dot dot-2"/>
  6. <view un-absolute un-b-rounded-100 class="dot dot-3"/>
  7. </view>
  8. <view class="hc-login-container">
  9. <view class="hc-login-center">
  10. <view class="hc-login-title">欢迎登录</view>
  11. <view class="hc-login-text">让每一个数据更具价值</view>
  12. <view class="hc-login-form">
  13. <view class="hc-login-form-item">
  14. <input class="hc-login-input" v-model="formData.username" placeholder="请输入登录账户"/>
  15. </view>
  16. <view class="hc-login-form-item">
  17. <input type="password" class="hc-login-input" v-model="formData.password"
  18. placeholder="请输入登录密码"/>
  19. </view>
  20. </view>
  21. <button class="mt-16" :type="!formData.username || !formData.password ? 'info' : 'primary'" @click="submitClick">
  22. <text class="mr-5">登</text>
  23. <text class="ml-5">录</text>
  24. </button>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script setup>
  30. import {ref, onMounted} from "vue";
  31. import {onLoad, onUnload} from '@dcloudio/uni-app'
  32. import {getStorage, setStorage} from "@/utils/storage";
  33. import {useAppStore} from "@/store";
  34. import {userLogin} from "@/store/user";
  35. import {getObjVal} from "js-fast-way";
  36. //初始变量
  37. const store = useAppStore()
  38. onLoad(() => {
  39. const user_info = getStorage('login_user_info');
  40. if (getObjVal(user_info)) {
  41. formData.value = user_info
  42. }
  43. //清除所有缓存
  44. store.clearStoreData()
  45. })
  46. //渲染完成
  47. onMounted(() => {
  48. })
  49. //登录表单
  50. const formData = ref({
  51. tenantId: "000000",
  52. username: '',
  53. password: '',
  54. type: "account"
  55. })
  56. //登录
  57. const submitClick = () => {
  58. const {username, password} = formData.value
  59. if (!username) {
  60. uni.showToast({
  61. title: '请先输入登录账户',
  62. icon: 'none',
  63. duration: 3000
  64. });
  65. } else if (!password) {
  66. uni.showToast({
  67. title: '请先输入登录密码',
  68. icon: 'none',
  69. duration: 3000
  70. });
  71. } else {
  72. userLogin(formData.value).then((res) => {
  73. uni.showToast({
  74. title: '登录成功',
  75. duration: 2000,
  76. mask: true
  77. });
  78. //跳转登录
  79. setTimeout(() => {
  80. uni.switchTab({
  81. url: '/pages/index/index'
  82. })
  83. }, 2000);
  84. })
  85. }
  86. }
  87. onUnload(()=>{
  88. })
  89. </script>
  90. <style lang="scss" scoped>
  91. page {
  92. height: 100%;
  93. }
  94. @import "@/style/login/login.scoped.scss";
  95. </style>
  96. <style lang="scss">
  97. @import "@/style/login/login.scss";
  98. </style>