index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <view class="content">
  3. <view class="head">
  4. <text>登录</text>
  5. </view>
  6. <view class="login-wrap">
  7. <view class="username item">
  8. <text>账号:</text>
  9. <uni-easyinput :inputBorder="false" class="login_input" type="text" v-model="username" placeholder="请输入账号" />
  10. </view>
  11. <view class="password item">
  12. <text>密码:</text>
  13. <uni-easyinput
  14. v-model="password"
  15. :inputBorder="false"
  16. class="login_input"
  17. type="password"
  18. placeholder="请输入密码">
  19. </uni-easyinput>
  20. </view>
  21. <button type="primary" @click="loginSubmit" class="submit-BT">登录</button>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import store from '@/store/index.js'
  27. import { login } from '@/api/system/user.js';
  28. import { setToken } from '@/utils/auth.js';
  29. import { wxLogin} from '@/api/openApi.js'
  30. export default {
  31. data() {
  32. return {
  33. username: "",
  34. password: "",
  35. }
  36. },
  37. onLoad({username,password}) {
  38. if(username){
  39. this.username=username;
  40. this.password=password;
  41. }
  42. },
  43. methods: {
  44. loginSubmit() {
  45. let username = (this.username).trim();
  46. let password = (this.password).trim();
  47. if (username.length < 1) {
  48. uni.showToast({
  49. title: '请填写账号',
  50. icon: "error"
  51. })
  52. return;
  53. }
  54. if (password.length < 1) {
  55. uni.showToast({
  56. title: '请填写密码',
  57. icon: "error"
  58. })
  59. return;
  60. }
  61. // #ifndef MP-WEIXIN
  62. login({
  63. username,
  64. password
  65. }).then((res) => {
  66. let token = res.data.accessToken;
  67. setToken(token);
  68. uni.setStorageSync('accountInfo', res.data.user);
  69. uni.setStorageSync('isLogin', true);
  70. store.commit('setToken', token);
  71. uni.reLaunch({
  72. url: '/pages/index/index'
  73. })
  74. })
  75. // #endif
  76. //#ifdef MP-WEIXIN
  77. uni.login({
  78. provider: 'weixin',
  79. success: function (loginRes) {
  80. let code=loginRes.code;
  81. wxLogin(code).then((resp)=>{
  82. const { code, data, msg } = resp
  83. login({
  84. username,
  85. password
  86. }).then((res) => {
  87. let token = res.data.accessToken;
  88. setToken(token);
  89. uni.setStorageSync('unionid',data.unionid)
  90. uni.setStorageSync('accountInfo', res.data.user);
  91. uni.setStorageSync('isLogin', true);
  92. store.commit('setToken', token);
  93. uni.reLaunch({
  94. url: '/pages/index/index'
  95. })
  96. })
  97. })
  98. }
  99. })
  100. //#endif
  101. }
  102. }
  103. }
  104. </script>
  105. <style lang="scss" scoped>
  106. .content {
  107. .head {
  108. font-size: 50upx;
  109. text-align: center;
  110. padding: 40upx 0;
  111. letter-spacing: 2upx;
  112. }
  113. .login-wrap {
  114. width: 90%;
  115. margin: 50upx auto 0;
  116. box-sizing: border-box;
  117. padding: 20upx;
  118. border-radius: 8upx;
  119. .item {
  120. display: flex;
  121. justify-content: flex-start;
  122. align-items: center;
  123. height: 100upx;
  124. font-size: 32upx;
  125. line-height: 100upx;
  126. input {
  127. font-size: 32upx;
  128. height: 100upx;
  129. border: 0;
  130. }
  131. .login_input {
  132. width: 580upx;
  133. border: none;
  134. }
  135. }
  136. .tip {
  137. text-align: right;
  138. padding: 18upx 0;
  139. font-size: 28upx;
  140. }
  141. .submit-BT {
  142. border-radius: 16upx;
  143. margin-top: 50upx;
  144. background-color:#3384FF;
  145. }
  146. }
  147. }
  148. </style>