parking_h5/pages/center/phoneLogin/phoneLogin.vue

<template>
  <view class="wrap">
    <view class="content">
      <view class="title">手机号登录</view>
      <input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" />
      <view class="u-text-center u-type-error u-m-t-20" v-if="telError">手机号输入错误</view>
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
      <u-message-input
        v-if="show"
        :focus="true"
        :value="messageCode"
        @change="change"
        @finish="finish"
        mode="bottomLine"
        :maxlength="codelength"
      ></u-message-input>
    </view>
    <view class="captcha">
      <text v-if="messageShow">{{ second }}秒后可重新获取验证码</text>
    </view>
    <view class="buttom">
      <view class="hint u-text-center">
        登录代表同意
        <text class="link" @tap="jumpToPage(1)">《用户服务条款》</text>和
        <text class="link" @tap="jumpToPage(2)">《隐私政策》</text>
        并授权使用您的账号信息（如昵称、头像、收货地址）以便您统一管理
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import getUrlParams from './../../../utils/getUrlParams.js';
export default {
  data() {
    return {
      tel: '',
      messageCode: '',
      messageShow: false,
      messageDisable: false,
      codelength: 4,
      show: false,
      second: 60,
      toastMsg: '',
      toastUrl: '',
      toastType: '',
      accessToken: '',
      userId: '',
      telError: false,
      openId: ''
    };
  },
  onLoad(page) {
    this.openId = this.vuex_wxinfo?.openId;
    const backUrl = location.href;
    if (!this.openId) {
      // 判断浏览器
      const ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        // 微信中打开
        this.$u.route('pages/wechatLogin/wechatLogin', {
          backUrl
        });
      }
    }
    const pages = getCurrentPages();
    if (pages.length >= 2) {
      uni.setStorageSync('last_page', pages[pages.length - 2].route);
      if (pages[pages.length - 2].options) {
        uni.setStorageSync('last_page_options', pages[pages.length - 2].options);
      }
    }
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.tel.length == 11 && this.messageDisable == false && this.$u.test.mobile(this.tel)) {
        style.color = '#fff';
        style.backgroundColor = '#5295F5';
        this.telError = false;
      } else if (this.tel.length == 11 && !this.$u.test.mobile(this.tel)) {
        this.telError = true;
      }
      return style;
    }
  },
  methods: {
    showToast() {
      this.$refs.uToast.show({
        title: this.toastMsg,
        type: this.toastType,
        url: this.toastUrl
      });
    },
    submit() {
      if (this.$u.test.mobile(this.tel) && this.messageDisable == false) {
        let that = this;
        this.$u.api.userLoginApi.sendSmsCodeApi({ mobile: this.tel }).then((res) => {
          this.messageDisable = true;
          this.messageShow = true;
          this.show = true;
          let interval = setInterval(() => {
            that.second--;
            if (that.second <= 0) {
              that.messageDisable = false;
              that.messageShow = false;
              clearInterval(interval);
              that.second = 60;
            }
          }, 1000);
          this.accessToken = res?.data?.accessToken;
          this.userId = res?.data?.userId;
        });
      }
    },
    // change事件侦听
    change(value) {
      // console.log('change', value);
    },
    // 输入完验证码最后一位执行
    finish(value) {
      let params = {
        loginType: 1,
        nickName: this.vuex_wxinfo?.nickname,
        code: value,
        openId: this.vuex_wxinfo?.openId,
        mobile: this.tel,
        avatar: this.vuex_wxinfo?.headImgUrl
      };
      this.$u.api.userLoginApi
        .mobileLoginApi(params)
        .then((res) => {
          if (res.code == '200') {
            this.$u.vuex('vuex_token', res.data.accessToken);
            this.$u.vuex('vuex_user', res.data);
            this.$u.vuex('vuex_hasLogin', true);
            setTimeout(() => {
              this.jumpIndex();
            }, 500);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.toastMsg = err.msg;
          this.showToast();
        });
    },
    // 微信已登录则跳转到首页
    jumpIndex() {
      let ret = localStorage.getItem('backUrl');
      ret = decodeURIComponent(ret);
      if ((ret && ret.indexOf('wechatLogin') > -1) || (ret && ret.indexOf('phoneLogin') < 0)) {
        // 截取url
        const pagesIndex = ret.indexOf('pages');
        if (pagesIndex > -1) {
          const pageUrl = ret.slice(pagesIndex);
          const tabbarUrl = ['pages/center/index', 'pages/parkingLists/parkingLists', 'page/index/index'];
          if (tabbarUrl.indexOf(pageUrl) > -1) {
            setTimeout(() => {
              uni.switchTab({
                url: '../../index/index'
              });
            }, 100);
          } else {
            setTimeout(() => {
              uni.redirectTo({
                url: '/' + pageUrl
              });
            }, 100);
          }
        } else {
          uni.switchTab({
            url: '../../index/index'
          });
        }
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    },
    /**
     * 跳转页面
     * */
    jumpToPage(flag) {
      uni.navigateTo({
        url: '/pages/privacyPolicy/privacyPolicy?termsType=' + flag
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hide {
  display: none !important;
}

.wrap {
  font-size: 28rpx;

  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #ddd;
    }

    .getCaptcha {
      margin: 45rpx auto 130rpx;
      background-color: #a8c6f1;
      color: $u-tips-color;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }
  }

  .buttom {
    .hint {
      padding: 20rpx 40rpx;
      font-size: 20rpx;
      color: $u-tips-color;

      .link {
        color: $u-type-warning;
      }
    }
  }

  .captcha {
    color: $u-type-warning;
    font-size: 30rpx;
    margin-top: 40rpx;
    text-align: center;
  }
}
</style>