dialog-login.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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. console.log(res)
  49. if (res.data.code === 200) {
  50. uni.showToast({
  51. title: successMsg.value,
  52. icon: 'success',
  53. duration: 2000
  54. });
  55. uni.setStorage({
  56. key: currentUser.value.userName,
  57. data:currentUser.value.password,
  58. success: function() {
  59. uni.setStorage({
  60. key: 'token',
  61. data: res.data.token,
  62. success: function() {
  63. console.log('success');
  64. }
  65. });
  66. }
  67. });
  68. getUserInfo(currentUser.value).then((res)=>{
  69. if(res.code ==200) {
  70. userInfo.value = res.data;
  71. user.value.push(userInfo.value);
  72. console.log(userInfo.value,999);
  73. uni.redirectTo({
  74. url: '/pages/dashboard/index?userName='+userInfo.value.userName + '&userId=' + userInfo.value.userId
  75. });
  76. }
  77. })
  78. } else {
  79. uni.showToast({
  80. title: errorMsg.value,
  81. icon: 'error',
  82. //显示持续时间为 2秒
  83. duration: 2000
  84. })
  85. }
  86. }
  87. })
  88. }
  89. /** 暴露给父组件的方法 */
  90. defineExpose({
  91. open
  92. })
  93. </script>
  94. <style lang="scss">
  95. .dialog-body {
  96. .user-info-container {
  97. margin-top: 32rpx;
  98. align-items: center;
  99. .user-avatar {
  100. width: 120rpx;
  101. height: 120rpx;
  102. justify-content: center;
  103. align-items: center;
  104. border-radius: 120rpx;
  105. background-color: #F5F5F5;
  106. .label {
  107. font-size: 72rpx;
  108. }
  109. }
  110. .user-info {
  111. flex: 1;
  112. padding-left: 16rpx;
  113. .nickname {
  114. margin-bottom: 8rpx;
  115. .label {
  116. font-size: 40rpx;
  117. }
  118. }
  119. .current-process {
  120. .label {
  121. font-size: 32rpx;
  122. color: #666666;
  123. }
  124. }
  125. }
  126. }
  127. .input-control {
  128. border: 1px solid #666666;
  129. padding: 16rpx 24rpx;
  130. font-size: 32rpx;
  131. margin-top: 40rpx;
  132. }
  133. .login-btn {
  134. background-color: #999999;
  135. margin-top: 32rpx;
  136. justify-content: center;
  137. padding: 16rpx 0;
  138. .label {
  139. font-size: 40rpx;
  140. color: #FFFFFF;
  141. }
  142. }
  143. }
  144. </style>