login.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <view class="content">
  3. <view class="status_bar"></view>
  4. <view class="logo">
  5. <image src="~@/static/logo.png" mode="aspectFit"></image>
  6. </view>
  7. <view class="title">
  8. <text v-if="mine_code == 'ningdongyunying'">E信管理</text>
  9. <text v-if="mine_code == 'zaoquan'">枣泉煤矿</text>
  10. </view>
  11. <view class="login_box">
  12. <view class="item">
  13. <view class="name">工号</view>
  14. <view class="input">
  15. <input type="text" value="" v-model="user.username" />
  16. </view>
  17. <view class="icon icon_avatar"></view>
  18. </view>
  19. <view class="item">
  20. <view class="name">密码</view>
  21. <view class="input">
  22. <input type="password" value="" v-model="user.password" />
  23. </view>
  24. <view class="icon icon_password"></view>
  25. </view>
  26. </view>
  27. <view class="tips" @click="go_forget_password()">
  28. <text>忘记密码?点击这里重置!</text>
  29. </view>
  30. <view class="login_btn" @click="loginBtn()">
  31. <text>登录</text>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default {
  37. data() {
  38. return {
  39. mine_code:"",
  40. user: {
  41. username: '',
  42. password: ''
  43. }
  44. };
  45. },
  46. onLoad() {
  47. this.mine_code = uni.getStorageSync('mine_code')
  48. },
  49. methods: {
  50. loginBtn() {
  51. const user = this.user
  52. uni.setStorageSync('login_password', this.user.password)
  53. // 判断是否为空
  54. if (user.username == '' || user.password == '') {
  55. uni.showToast({
  56. icon: "none",
  57. title: "请填写用户信息"
  58. })
  59. return false
  60. }
  61. this.$api.login({
  62. username: user.username,
  63. password: user.password
  64. }).then((res) => {
  65. if (res.data.code === 0) {
  66. // console.log(res.data.data.token_type +''+res.data.data.access_token)
  67. console.log(res.data.data.user.mobile)
  68. uni.setStorageSync('Authorization', res.data.data.access_token)
  69. uni.setStorageSync('token_type', res.data.data.token_type)
  70. // 存储用户基本信息
  71. uni.setStorageSync('user', res.data.data.user);
  72. uni.setStorageSync('people_code', res.data.data.user.people_code);
  73. // 存储电话号码
  74. uni.setStorageSync('mobile', res.data.data.user.mobile);
  75. setTimeout(function() {
  76. uni.showToast({
  77. icon: "none",
  78. title: "登录成功"
  79. })
  80. uni.switchTab({
  81. url:"../../tabbar/index/index",
  82. success: () => {
  83. //#ifdef H5
  84. window.location.reload();
  85. //#endif
  86. }
  87. })
  88. }, 500)
  89. // #ifdef APP-PLUS
  90. plus.runtime.restart();
  91. // #endif
  92. } else if (res.data.code === 1001) {
  93. uni.showToast({
  94. icon: "none",
  95. title: "用户不存在"
  96. })
  97. } else if (res.data.code === 1002) {
  98. uni.showToast({
  99. icon: "none",
  100. title: "密码错误"
  101. })
  102. } else {
  103. return false
  104. }
  105. }).catch((err) => {
  106. console.log('request fail', err);
  107. uni.showToast({
  108. icon: "none",
  109. title: err
  110. })
  111. })
  112. },
  113. // 重置密码
  114. go_forget_password(){
  115. uni.navigateTo({
  116. url:"../forget-password/forget-password"
  117. })
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss">
  123. page {}
  124. .content {
  125. width: 749rpx;
  126. height: 100vh;
  127. background-image: url(~@/static/login.png);
  128. background-size: cover;
  129. background-position: center center;
  130. background-repeat: no-repeat;
  131. .logo {
  132. width: 344rpx;
  133. height: 350rpx;
  134. margin: 0 auto;
  135. padding-top: 100rpx;
  136. image {
  137. width: 100%;
  138. height: 100%;
  139. }
  140. }
  141. .title {
  142. margin: 0 auto;
  143. margin-top: 32rpx;
  144. width: 288rpx;
  145. height: 47rpx;
  146. font-size: 36rpx;
  147. color: #FFFFFF;
  148. line-height: 47rpx;
  149. text-align: center;
  150. }
  151. .login_box {
  152. padding-top: 40px;
  153. .item {
  154. margin: 0 auto;
  155. margin-bottom: 20px;
  156. width: 500rpx;
  157. height: 45px;
  158. background: #FFFFFF;
  159. border-radius: 25px;
  160. padding-left: 20px;
  161. padding-right: 20px;
  162. box-sizing: border-box;
  163. display: flex;
  164. align-items: center;
  165. .name {
  166. width: 80rpx;
  167. font-size: 16px;
  168. color: #009FE8;
  169. line-height: 45px;
  170. }
  171. .input {
  172. width: 280rpx;
  173. input {
  174. height: 45px;
  175. color: #666;
  176. }
  177. }
  178. .icon {}
  179. .icon_avatar {
  180. margin-left: 10rpx;
  181. width: 25px;
  182. height: 25px;
  183. background-image: url(./icon/Avatar.png);
  184. background-size: cover;
  185. background-repeat: no-repeat;
  186. }
  187. .icon_password {
  188. margin-left: 18rpx;
  189. width: 25px;
  190. height: 28px;
  191. background-image: url(./icon/Password.png);
  192. background-size: cover;
  193. background-repeat: no-repeat;
  194. }
  195. }
  196. }
  197. .tips {
  198. margin: 0 auto;
  199. margin-top: 25px;
  200. text-align: center;
  201. font-size: 14px;
  202. color: #ECF0F1;
  203. line-height: 40px;
  204. text-align: center;
  205. }
  206. .login_btn {
  207. margin: 0 auto;
  208. margin-top: 40px;
  209. width: 200px;
  210. height: 50px;
  211. background: rgba(100, 220, 255, 0.8);
  212. border-radius: 25px;
  213. text-align: center;
  214. line-height: 50px;
  215. text {
  216. font-size: 18px;
  217. color: #FFFFFF;
  218. letter-spacing: 4px;
  219. }
  220. }
  221. }
  222. </style>