login.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view class="container">
  3. <view class="wjmm" style="text-align: right;padding-right: 30rpx;font-size: 36rpx;" @click="zc()">{{ $t('login.zc') }}</view>
  4. <view class="tit" style="padding-top:120rpx;">{{ $t('login.yx') }}</view>
  5. <input type="text" class="shuru" :placeholder="$t('login.qsryx')" v-model="email" />
  6. <view class="tit">{{ $t('login.mm') }}</view>
  7. <input type="password" class="shuru" :placeholder="$t('login.qsrmm')" v-model="lpwd" />
  8. <view class="" style="padding:20rpx 48rpx;">
  9. <view class="wjmm" @click="wjmm()">{{ $t('login.wjmm') }}?</view>
  10. </view>
  11. <view class="flex" style="justify-content: flex-end;padding: 0 48rpx;">
  12. <view class="gologin" @click="gologin">{{ $t('login.dl') }}</view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import { mapMutations, mapState } from 'vuex';
  18. import { loginWx, gologin, getUser } from '@/api/login.js';
  19. export default {
  20. data() {
  21. return {
  22. email: '',
  23. lpwd: ''
  24. };
  25. },
  26. onLoad() {
  27. uni.setNavigationBarTitle({ title: this.$t('login.dl') });
  28. this.email = uni.getStorageSync('gwname') || ''
  29. this.lpwd = uni.getStorageSync('gwpsw') || ''
  30. },
  31. methods: {
  32. ...mapMutations('user', ['login', 'setUserInfo']),
  33. zc() {
  34. uni.navigateTo({
  35. url: '/pages/public/register'
  36. });
  37. },
  38. wjmm() {
  39. uni.navigateTo({
  40. url: '/pages/public/forget'
  41. });
  42. },
  43. gologin() {
  44. let obj = this;
  45. if (obj.loadingType == 'loading') {
  46. return;
  47. }
  48. if (!obj.isEmailAvailable(obj.email)) {
  49. return obj.$api.msg(this.$t('login.qsrzqdyx'));
  50. }
  51. obj.loadingType = 'loading';
  52. gologin({
  53. email: obj.email,
  54. lpwd: obj.lpwd
  55. })
  56. .then(res => {
  57. console.log(res);
  58. uni.setStorageSync('gwname',obj.email)
  59. uni.setStorageSync('gwpsw',obj.lpwd)
  60. obj.loadingType = 'no';
  61. uni.showToast({
  62. title: this.$t('login.dlcg'),
  63. duration: 2000,
  64. position: 'top'
  65. });
  66. getUser().then(re => {
  67. obj.login();
  68. obj.setUserInfo(re.data);
  69. setTimeout(() => {
  70. uni.switchTab({
  71. url: '/pages/index/index'
  72. });
  73. }, 1500);
  74. });
  75. })
  76. .catch(err => {
  77. console.log(err);
  78. obj.loadingType = 'no';
  79. });
  80. },
  81. isEmailAvailable(obj) {
  82. let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  83. if (!email.test(obj)) {
  84. return false;
  85. }
  86. return true;
  87. }
  88. }
  89. };
  90. </script>
  91. <style lang="scss">
  92. page {
  93. height: 100%;
  94. background-color: #fff;
  95. font-size: 32rpx;
  96. }
  97. .container {
  98. width: 100%;
  99. height: 100%;
  100. background-size: 100%;
  101. }
  102. .shuru {
  103. display: block;
  104. background-color: #f5f5f5;
  105. width: 673rpx;
  106. height: 95rpx;
  107. margin: auto;
  108. padding-left: 30rpx;
  109. text-align: 95rpx;
  110. }
  111. .tit {
  112. padding: 60rpx 48rpx 20rpx;
  113. }
  114. .gologin {
  115. width: 204rpx;
  116. height: 98rpx;
  117. line-height: 98rpx;
  118. background-color: #fcd535;
  119. text-align: center;
  120. border-radius: 20rpx;
  121. }
  122. .wjmm {
  123. color: #fcd535;
  124. }
  125. </style>