index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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. uni.login({
  62. provider: 'weixin',
  63. success: function (loginRes) {
  64. let code=loginRes.code;
  65. wxLogin(code).then((resp)=>{
  66. const { code, data, msg } = resp
  67. login({
  68. username,
  69. password
  70. }).then((res) => {
  71. let token = res.data.accessToken;
  72. setToken(token);
  73. uni.setStorageSync('unionid',data.unionid)
  74. uni.setStorageSync('accountInfo', res.data.user);
  75. uni.setStorageSync('isLogin', true);
  76. store.commit('setToken', token);
  77. uni.reLaunch({
  78. url: '/pages/index/index'
  79. })
  80. })
  81. })
  82. }
  83. })
  84. }
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. .content {
  90. .head {
  91. font-size: 50upx;
  92. text-align: center;
  93. padding: 40upx 0;
  94. letter-spacing: 2upx;
  95. }
  96. .login-wrap {
  97. width: 90%;
  98. margin: 50upx auto 0;
  99. box-sizing: border-box;
  100. padding: 20upx;
  101. border-radius: 8upx;
  102. .item {
  103. display: flex;
  104. justify-content: flex-start;
  105. align-items: center;
  106. height: 100upx;
  107. font-size: 32upx;
  108. line-height: 100upx;
  109. input {
  110. font-size: 32upx;
  111. height: 100upx;
  112. border: 0;
  113. }
  114. .login_input {
  115. width: 580upx;
  116. border: none;
  117. }
  118. }
  119. .tip {
  120. text-align: right;
  121. padding: 18upx 0;
  122. font-size: 28upx;
  123. }
  124. .submit-BT {
  125. border-radius: 16upx;
  126. margin-top: 50upx;
  127. background-color:#3384FF;
  128. }
  129. }
  130. }
  131. </style>