login.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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. if(this.email && this.lpwd) {
  31. // this.gologin()
  32. }
  33. },
  34. methods: {
  35. ...mapMutations('user', ['login', 'setUserInfo']),
  36. zc() {
  37. uni.navigateTo({
  38. url: '/pages/public/register'
  39. });
  40. },
  41. wjmm() {
  42. uni.navigateTo({
  43. url: '/pages/public/forget'
  44. });
  45. },
  46. gologin() {
  47. let obj = this;
  48. if (obj.loadingType == 'loading') {
  49. return;
  50. }
  51. if (!obj.isEmailAvailable(obj.email)) {
  52. return obj.$api.msg(this.$t('login.qsrzqdyx'));
  53. }
  54. obj.loadingType = 'loading';
  55. gologin({
  56. email: obj.email,
  57. lpwd: obj.lpwd
  58. })
  59. .then(res => {
  60. console.log(res);
  61. uni.setStorageSync('gwname',obj.email)
  62. uni.setStorageSync('gwpsw',obj.lpwd)
  63. obj.loadingType = 'no';
  64. uni.showToast({
  65. title: this.$t('login.dlcg'),
  66. duration: 2000,
  67. position: 'top'
  68. });
  69. getUser().then(re => {
  70. obj.login();
  71. obj.setUserInfo(re.data);
  72. setTimeout(() => {
  73. uni.switchTab({
  74. url: '/pages/index/index'
  75. });
  76. }, 1500);
  77. });
  78. })
  79. .catch(err => {
  80. console.log(err);
  81. obj.loadingType = 'no';
  82. });
  83. },
  84. isEmailAvailable(obj) {
  85. let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  86. if (!email.test(obj)) {
  87. return false;
  88. }
  89. return true;
  90. }
  91. }
  92. };
  93. </script>
  94. <style lang="scss">
  95. page {
  96. height: 100%;
  97. background-color: #fff;
  98. font-size: 32rpx;
  99. }
  100. .container {
  101. width: 100%;
  102. height: 100%;
  103. background-size: 100%;
  104. }
  105. .shuru {
  106. display: block;
  107. background-color: #f5f5f5;
  108. width: 673rpx;
  109. height: 95rpx;
  110. margin: auto;
  111. padding-left: 30rpx;
  112. text-align: 95rpx;
  113. }
  114. .tit {
  115. padding: 60rpx 48rpx 20rpx;
  116. }
  117. .gologin {
  118. width: 204rpx;
  119. height: 98rpx;
  120. line-height: 98rpx;
  121. background-color: #fcd535;
  122. text-align: center;
  123. border-radius: 20rpx;
  124. }
  125. .wjmm {
  126. color: #fcd535;
  127. }
  128. </style>