login.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view class="container">
  3. <view class="bg">
  4. <image src="../../static/img/login-bg.png" mode="widthFix"></image>
  5. </view>
  6. <view class="login_text">
  7. <view class="login_title">
  8. 校企联合评分系统
  9. </view>
  10. <view class="login_input flex">
  11. <view class="login_img">
  12. <image src="../../static/icon/user.png" mode="widthFix"></image>
  13. </view>
  14. <view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" />
  15. </view>
  16. </view>
  17. <view class="login_input flex">
  18. <view class="login_img">
  19. <image src="../../static/icon/pwd.png" mode="widthFix"></image>
  20. </view>
  21. <view class="login_name">
  22. <input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" />
  23. </view>
  24. </view>
  25. <view><button type="green" class="uni-button uni-button-green" @click="toLogin">登录</button></view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import {
  31. mapMutations
  32. } from 'vuex';
  33. import {
  34. login
  35. } from '@/api/login.js';
  36. import {
  37. getUserInfo
  38. } from '@/api/user.js';
  39. export default {
  40. data() {
  41. return {
  42. checked: false, //是否同意条款
  43. username: '',
  44. passward: '',
  45. successUrl: '/pages/index/index'
  46. };
  47. },
  48. onLoad() {
  49. let obj = this;
  50. },
  51. methods: {
  52. ...mapMutations('user', ['setUserInfo', 'login', 'logout']),
  53. // 监听隐私条例
  54. changeChecked(check) {
  55. this.checked = check;
  56. },
  57. loginGl(userinfo) {
  58. let ur = uni.getStorageSync('present') || this.successUrl;
  59. // 用于处理缓存bug
  60. if (ur == 'pages/product/product') {
  61. ur = this.successUrl
  62. }
  63. if (!userinfo.phone) {
  64. uni.showModal({
  65. title: '提示',
  66. content: '请先绑定手机号',
  67. showCancel: false,
  68. success: res => {
  69. if (res.confirm) {
  70. uni.navigateTo({
  71. url: '/pages/set/phone',
  72. });
  73. }
  74. },
  75. });
  76. } else {
  77. uni.switchTab({
  78. url: ur,
  79. fail(e) {
  80. uni.navigateTo({
  81. url: ur,
  82. fail(e) {
  83. uni.navigateTo({
  84. url: this.successUrl,
  85. });
  86. }
  87. });
  88. }
  89. });
  90. }
  91. },
  92. //登录
  93. async toLogin() {
  94. let obj = this;
  95. if (obj.username == '') {
  96. obj.$api.msg('请输入手机号');
  97. return;
  98. }
  99. if (obj.passward == '') {
  100. obj.$api.msg('请输入密码');
  101. return;
  102. }
  103. obj.logining = true;
  104. login({
  105. account: obj.username,
  106. password: obj.passward
  107. })
  108. .then(function(e) {
  109. uni.setStorageSync('token', e.data.userinfo.token);
  110. obj.$store.commit('hasLogin', true);
  111. obj.login();
  112. // 保存返回用户数据
  113. obj.setUserInfo(e.data.userinfo);
  114. let ur = uni.getStorageSync('present') || obj.successUrl;
  115. //成功跳转首页
  116. uni.reLaunch({
  117. url: ur,
  118. fail(e) {
  119. uni.switchTab({
  120. url: obj.successUrl,
  121. });
  122. }
  123. })
  124. })
  125. .catch(function(e) {
  126. console.log(e);
  127. });
  128. },
  129. // 关闭更多弹窗
  130. close() {
  131. this.$refs.popup.close();
  132. }
  133. }
  134. };
  135. </script>
  136. <style lang="scss">
  137. page {
  138. height: 100%;
  139. background-color: #FFFFFF;
  140. padding-top: 44px;
  141. background: #488ff0;
  142. }
  143. .bg {
  144. position: absolute;
  145. top: 0;
  146. left: 0;
  147. right: 0;
  148. width: 750rpx;
  149. image {
  150. width: 100%;
  151. }
  152. }
  153. .container {
  154. width: 100%;
  155. height: 100%;
  156. background-size: 100%;
  157. padding-top: 150rpx;
  158. }
  159. .login_text {
  160. margin: 0 auto;
  161. position: relative;
  162. background-color: #ffffff;
  163. width: 700rpx;
  164. box-shadow: 0px 0px 22rpx 5rpx rgba(209, 212, 217, 0.49);
  165. border-radius: 30rpx;
  166. padding: 100rpx 70rpx 156rpx;
  167. .login_title {
  168. text-align: center;
  169. font-size: 40rpx;
  170. font-family: Source Han Sans SC;
  171. font-weight: 500;
  172. color: #2A9CEC;
  173. padding-bottom: 100rpx;
  174. }
  175. .login_input {
  176. border-bottom: 1px solid #f0f0f0;
  177. margin-bottom: 30rpx;
  178. padding: 16rpx 0;
  179. line-height: 1;
  180. .login_img {
  181. width: 30rpx;
  182. flex-shrink: 0;
  183. font-size: 30rpx;
  184. margin-right: 20rpx;
  185. color: $font-base;
  186. image {
  187. width: 100%;
  188. }
  189. }
  190. .uni-input {
  191. text-align: left;
  192. width: 100%;
  193. font-size: 28rpx !important;
  194. }
  195. .login_name {
  196. color: #333333;
  197. flex-grow: 1;
  198. }
  199. }
  200. .uni-button-green {
  201. color: #ffffff;
  202. background-color: $base-color;
  203. margin: 90rpx 0 0;
  204. border-radius: 50rpx;
  205. }
  206. .uni-button {
  207. height: 80rpx;
  208. line-height: 80rpx;
  209. font-size: 28rpx;
  210. width: 100%;
  211. }
  212. }
  213. </style>