chelvc-custom/src/pages/login/phoneLogin.vue

<template>
  <view class="t-login">
    <view class="t-b">欢迎登录车旅程！</view>
    <view class="t-b2">欢迎使用车旅程，为你提供便捷服务</view>
    <!-- 表单数据 -->
    <view class="form-box">
      <u-form >
        <u-form-item >
          <u-input v-model="mobile" border="none" placeholder="请输入手机号" />
        </u-form-item>
        <view class="line"></view>
        <u-form-item>
          <u-input v-model="captcha" border="none"  placeholder="请输入验证码">
            <template slot="suffix">
              <u-code
              ref="uCode"
              @change="codeChange"
              seconds="20"
              unique-key="loginCode"
              changeText="X秒重新获取"
            ></u-code>
            <u-button
              @tap="getCode"
              :text="tips"
              type="success"
              size="mini"
            ></u-button>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
    </view>

    <view class="submit-box">
      <u-button @click="login" :loading="loading" loadingText="登录中..." shape="circle" type="primary">确定</u-button>
    </view>

    <view class="agree">
      <u-checkbox-group v-model="agree">
        <u-checkbox shape="circle" name="1" label="我已阅读并同意" />
      </u-checkbox-group>
      <view @click="clickAgreement('用户协议')" class="agreement">《用户协议》</view>
      <view @click="clickAgreement('隐私政策')" class="agreement">《隐私政策》</view>
    </view>
  </view>
</template>

<script>
import { getSmsCodeByPhone } from '@/api/login'

const MOBILE_REG = /^[1][3-9][0-9]{9}$/
const SMS_REG = /^\d{6}$/
export default {
  data() {
    return {
      code:'', // 短信标识
      mobile:'', // 手机号码
      captcha:'', // 验证码
      agree: [],
      tips: '',
      seconds: 120,
      loading:false,
    }
  },
  computed:{
    checked(){
      return this.agree && this.agree.length > 0
    }
  },
  methods: {
    async getCode() {
      if(!MOBILE_REG.test(this.mobile)){
        return uni.$u.toast('请输入合法手机号')
      }
      if (this.$refs.uCode.canGetCode) {
        const res = await getSmsCodeByPhone({mobile:this.mobile})
        if(res.code === 'OK'){
          uni.$u.toast('短信验证码已发送,请注意查收')
          this.$refs.uCode.start()
          this.code = res.data.id
        }else{
          uni.$u.toast(res.message)
        }
      }
    },
    login() {
      if(!this.checked){
        return uni.$u.toast('请阅读并勾选底部协议')
      }
      if(!MOBILE_REG.test(this.mobile)){
        return uni.$u.toast('请输入合法手机号')
      }
      // if(!SMS_REG.test(this.captcha)){
      //   return uni.$u.toast('请输入6位数字验证码')
      // }
      const data = {
        mobile:this.mobile,
        captcha:this.captcha,
        code:this.code,
      }
      // this.loading = true
      this.$store.dispatch('LoginBySmsCode', data)
        .then(() => {
          debugger
          // this.$store.dispatch('SwitchIdentity','CUSTOMER')
          this.$Router.pushTab('/pages/client/tabBar/home/index');
          // this.loading = false;
          this.$store.dispatch('GetUserInfo')
          uni.$u.toast('登录成功');
        })
        .catch(() => {




          // this.loading = false;
          uni.$u.toast('登录失败');
        });
    },
    codeChange(text) {
      this.tips = text;
    },

  },
}
</script>

<style scoped lang="scss">
.t-login {
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
  padding: 0 20rpx;
  background-color: #f2f5f9;
  .t-b {
    text-align: left;
    font-size: 46rpx;
    color: #000;
    padding: 150rpx 0 30rpx 0;
    font-weight: bold;
  }
  .t-b2 {
    text-align: left;
    font-size: 32rpx;
    color: #aaaaaa;
    padding: 0rpx 0 120rpx 0;
  }
  .form-box{
    background-color:#fff;
    padding:10rpx 20rpx;
    box-sizing: border-box;
    border-radius:20rpx;
    .line{
      height:1rpx;
      background-color:lightgray;
    }
  }
  .submit-box{
    margin: 40rpx 0;
  }
}
.agree {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 27rpx;
  margin-top: 20rpx;
  .agreement {
    color: #3c9cff;
    cursor: pointer;
  }
}
</style>