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

<template>
  <view class="container">
    <u-image src="@/static/logo.png"></u-image>
    <view class="login-form-wrap">
      <u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm">
        <u-form-item prop="mobile" borderBottom label="账号">
          <u-input v-model="loginForm.mobile" maxlength="11" border="none" focus placeholder="请输入账号/手机号">
          </u-input>
        </u-form-item>
        <u-form-item prop="captcha" label="密码" borderBottom>
          <u-input v-model="loginForm.password" maxlength="6" border="none" placeholder="请输入密码">
          </u-input>
        </u-form-item>
        <u-checkbox shape="circle" @change="checkboxChange" :checked="isChecked"></u-checkbox>
        <view @click="forgetPassword">记住密码</view>
        <view class="phone-question" @click="forgetPassword">忘记密码？</view>
        <u-form-item>
          <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle" @click="login">登录</u-button>
        </u-form-item>
        <u-form-item>
          <u-button :loading="loading" shape="circle" @click="register">注册</u-button>
        </u-form-item>
      </u--form>
      <view class="user-agreement">
        <u-checkbox-group>
          <u-checkbox shape="circle" @change="checkboxChange" :checked="isChecked"></u-checkbox>
        </u-checkbox-group>
        <text class="user-agreement-text">
          我已阅读并同意
          <text class="terms">《用户协议》</text>
          <text class="terms">《隐私政策》</text>
          <text class="terms">《儿童/青少年个人信息保护规则》</text>
        </text>
      </view>
    </view>

    <view>
      <u-popup :show="show" @close="close" mode="center">
        <view style="
            height: 100rpx;
            width: 700rpx;
            align-items: center;
            display: flex;
            justify-content: center;
          ">
          <text style="color: gray; font-size: 14px">我已阅读并同意</text>
          <text style="font-weight: bold">《用户协议》</text>
          <text style="font-weight: bold">《隐私政策》</text>
        </view>
        <u-button @click="confirmShow" type="primary" :loading="loading">确认</u-button>
      </u-popup>
    </view>
  </view>
</template>

<script>
  import {
    getSmsCodeByPhone,
    loginByPhoneAndSmsCode,

    maintainSmsCaptcha
  } from '@/api/login';
  export default {
    data() {
      return {
        loginForm: {
          client_id: 'chelvc_client',
          client_secret: 'qWBe6jD%GCuPPTkP',
          grant_type: 'sms',
          token: '',
          mobile: '18380313545', //手机号
          captcha: '363636', //验证码
          password: '1', //密码
        },
        rules: {
          mobile: [{
              required: true,
              trigger: ['change', 'blur'],
              message: '请输入您的手机号',
            },
            {
              validator: (rule, value, cb) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            },
          ],
          captcha: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请输入六位数验证码',
          }, ],
        },
        seconds: 120,
        tips: '',
        isChecked: true,
        show: false,
        loading: false,
      };
    },

    onReady() {
      this.$refs.loginForm.setRules(this.rules);
    },

    computed: {
      isDisabled() {
        return !(this.loginForm.mobile && this.loginForm.captcha.length === 6);
      },
    },

    methods: {
      getCode() {
        if (!this.loginForm.mobile) return uni.$u.toast('请输入您的手机号!');
        if (!uni.$u.test.mobile(this.loginForm.mobile))
          return uni.$u.toast('手机号码格式不正确!');
        // TODO： 处理验证码倒计时
        if (this.$refs.uCode.canGetCode) {
          getSmsCodeByPhone(this.loginForm.mobile)
            .then(res => {
              if (res.code === 200) {
                uni.$u.toast('验证码已发送');
                this.loginForm.token = res.data.token;
                this.$refs.uCode.start();
              }
            })
            .catch(err => {
              uni.$u.toast('无法发送验证码');
              this.$refs.uCode.start();
            });
        }
      },

      //点击登录
      async login() {
        if (!this.isChecked) {
          this.show = true;
          return;
        }
        this.loading = true;
        let mobile = '18380313545'
        maintainSmsCaptcha({
            mobile: mobile
          }).then(res => {
            console.log('res', res);
            //   this.loading = false;
            //   if (res.access_token) {
            //     uni.$u.toast('登录成功');
            //     this.$store.commit('SET_ACCESS_TOKEN', res.access_token);
            //     this.$store.commit('SET_REFRESH_TOKEN', res.refresh_token);
            //     setTimeout(() => {
            //       this.$Router.pushTab('/pages/tabbar/home/index');
            //     }, 1500);
            //   }
            // })
            // .catch(err => {
            //   this.loading = false;
            //   uni.$u.toast('登录失败-' + err.data.error_description);
            //   this.loading = false;

            // 下方登陆代码调通 token不知道放哪 不知道为什么要存两个token  上方代码没动 loginByPhoneAndSmsCode 这个是之前的接口
            if (res.code == 200) {
              uni.$u.toast('登录成功');
              // this.$store.commit('SET_ACCESS_TOKEN', res.data.token);
              // this.$store.commit('SET_REFRESH_TOKEN', res.data.token);
              setTimeout(() => {
                this.$Router.pushTab('/pages/tabbar/home/index');
              }, 1500);
            }
          })
          .catch(err => {
            this.loading = false;
            uni.$u.toast('登录失败-' + err.data.error_description);
          });
      },

      //点击注册
      register() {
        this.$Router.pushTab('/pages/login/register');
      },

      //点击我已阅读
      checkboxChange(v) {
        this.isChecked = v;
      },

      //点击手机号无法使用？
      noPhone() {
        this.$message('要跳转到解决方案哦 还没写');
      },

      //点击弹框确认
      confirmShow() {
        this.isChecked = true;
        this.show = false;
        setTimeout(() => {
          this.login();
        }, 250);
      },

      //关闭弹框f
      close() {
        this.show = false;
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 0 40rpx;
    margin: 0 auto;
  }

  .login-form-wrap {
    margin-top: 200rpx;

    .phone-prefix {
      display: flex;
      align-items: center;
      padding-right: 20rpx;
      border-right: 2rpx solid $uni-text-color-grey;
      margin-right: 20rpx;
    }

    .phone-question {
      text-align: right;
      font-size: 24rpx;
      padding: 20rpx 0 20rpx 0;
    }

    .user-agreement {
      display: flex;
      padding: 0 10rpx;

      .user-agreement-text {
        font-size: 24rpx;
        color: $uni-text-color-grey;
        margin-top: 20rpx;
        margin-left: 20rpx;

        .terms {
          color: $uni-text-color;
          font-weight: 400;
        }
      }
    }
  }
</style>