dialog-login.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <dialog-base ref="baseDialog" title="账号登录">
  3. <template v-if="currentUser.nickname">
  4. <view class="user-info-container uni-row">
  5. <view class="user-avatar uni-row"><text class="label">{{ currentUser.nickname }}</text></view>
  6. <view class="user-info">
  7. <view class="nickname"><text class="label">{{ currentUser.nickname }}</text></view>
  8. <view class="current-process"><text class="label">热处理</text></view>
  9. </view>
  10. </view>
  11. </template>
  12. <template v-else>
  13. <input class="input-control" v-model="currentUser.userName" placeholder="员工编码" />
  14. </template>
  15. <input class="input-control" :password="true" v-model="currentUser.password" placeholder='密码' />
  16. <view class="login-btn uni-row" @click="handleLogin"><text class="label">登录</text></view>
  17. </dialog-base>
  18. </template>
  19. <script setup>
  20. import {
  21. ref,
  22. getCurrentInstance
  23. } from 'vue'
  24. import {getUserInfo} from '@/api/login/index.js'
  25. import baseURL from '@/api/base/path.js'
  26. // 对话框
  27. const baseDialog = ref(null)
  28. const currentUser = ref({})
  29. const errorMsg = ref('用户名或密码错误')
  30. const successMsg = ref('登录成功')
  31. const userInfo = ref ({})
  32. const user = ref([])
  33. // const { proxy } = getCurrentInstance()
  34. const open = (data) => {
  35. currentUser.value = data
  36. // console.log(dialog.value)
  37. baseDialog.value.open()
  38. }
  39. const handleLogin = () => {
  40. uni.request({
  41. method: 'POST',
  42. url: baseURL +'/login',
  43. data: {
  44. username: currentUser.value.userName,
  45. password: currentUser.value.password
  46. },
  47. success: (res) => {
  48. if (res.data.code === 200) {
  49. uni.showToast({
  50. title: successMsg.value,
  51. icon: 'success',
  52. duration: 2000
  53. });
  54. // 保存token
  55. uni.setStorageSync('token', res.data.token);
  56. uni.setStorage({
  57. key: currentUser.value.userName,
  58. data:currentUser.value.password,
  59. success: function() {
  60. }
  61. });
  62. getUserInfo(currentUser.value).then((res)=>{
  63. if(res.code ==200) {
  64. userInfo.value = res.data;
  65. user.value.push(userInfo.value);
  66. console.log(userInfo.value,999);
  67. uni.redirectTo({
  68. url: '/pages/dashboard/index?userName='+userInfo.value.userName + '&userId=' + userInfo.value.userId
  69. });
  70. }
  71. })
  72. } else {
  73. uni.showToast({
  74. title: errorMsg.value,
  75. icon: 'error',
  76. //显示持续时间为 2秒
  77. duration: 2000
  78. })
  79. }
  80. }
  81. })
  82. }
  83. /** 暴露给父组件的方法 */
  84. defineExpose({
  85. open
  86. })
  87. </script>
  88. <style lang="scss">
  89. .dialog-body {
  90. .user-info-container {
  91. margin-top: 32rpx;
  92. align-items: center;
  93. .user-avatar {
  94. width: 120rpx;
  95. height: 120rpx;
  96. justify-content: center;
  97. align-items: center;
  98. border-radius: 120rpx;
  99. background-color: #F5F5F5;
  100. .label {
  101. font-size: 72rpx;
  102. }
  103. }
  104. .user-info {
  105. flex: 1;
  106. padding-left: 16rpx;
  107. .nickname {
  108. margin-bottom: 8rpx;
  109. .label {
  110. font-size: 40rpx;
  111. }
  112. }
  113. .current-process {
  114. .label {
  115. font-size: 32rpx;
  116. color: #666666;
  117. }
  118. }
  119. }
  120. }
  121. .input-control {
  122. border: 1px solid #666666;
  123. padding: 16rpx 24rpx;
  124. font-size: 32rpx;
  125. margin-top: 40rpx;
  126. }
  127. .login-btn {
  128. background-color: #999999;
  129. margin-top: 32rpx;
  130. justify-content: center;
  131. padding: 16rpx 0;
  132. .label {
  133. font-size: 40rpx;
  134. color: #FFFFFF;
  135. }
  136. }
  137. }
  138. </style>