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

<template>
  <view class="container">
    <view class="header">
      <img src="@/static/logo.png" class="logo" />
    </view>
    <view class="login-form-wrap">
      <u--form
        labelPosition="left"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
      >
        <u-form-item prop="mobile" borderBottom>
          <u-input
            v-model="loginForm.mobile"
            maxlength="11"
            border="none"
            focus
            placeholder="请输入手机号"
            @focus="showKeyboard"
          >
            <template slot="prefix">
              <view class="phone-prefix">
                <text>+86</text>
                <!-- <u-icon name="arrow-down-fill"></u-icon> -->
              </view>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="captcha" borderBottom label="密码">
          <u-input
            v-model="loginForm.captcha"
            maxlength="6"
            border="none"
            placeholder="请输入密码"
          >
          </u-input>
        </u-form-item>
        <u-form-item prop="captcha" borderBottom>
          <u-input
            v-model="loginForm.captcha"
            maxlength="6"
            border="none"
            placeholder="请输入短信验证码"
          >
            <template slot="suffix">
              <u-code
                ref="uCode"
                :seconds="seconds"
                changeText="X秒后重新获取"
                end-text="重新获取"
                start-text="获取验证码"
                @change="codeChange"
                :keep-running="true"
              ></u-code>
              <u--text :text="tips" @tap="getCode" type="primary"></u--text>
            </template>
          </u-input>
        </u-form-item>
        <view class="phone-question" @click="noPhone">手机号无法使用？</view>
        <u-form-item>
          <u-button
            type="primary"
            :disabled="isDisabled"
            :loading="loading"
            shape="circle"
            @click="login"
            >注册</u-button
          >
        </u-form-item>
      </u--form>
      <view class="user-agreement">
        <u-checkbox-group style="margin-top: 17rpx">
          <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>
      </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 } from '@/api/login';

export default {
  data() {
    return {
      loginForm: {
        client_id: 'chelvc_client',
        client_secret: 'qWBe6jD%GCuPPTkP',
        grant_type: 'sms',
        token: '',
        mobile: '18888888888',
        captcha: '363636',
      },
      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;
      loginByPhoneAndSmsCode(this.loginForm)
        .then(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);
        });
    },

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

    codeChange(text) {
      this.tips = text;
    },
    checkboxChange(v) {
      this.isChecked = v;
    },

    //自动调出键盘
    showKeyboard() {
      return;
      if (this.$q.platform.is.cordova) {
        cordova.plugins.Keyboard.show();
      }
    },

    //点击手机号无法使用？
    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;
  text-align: center; /* 设置容器内文本水平居中 */
}
.header {
  width: 100%; /* 头部宽度占据整个屏幕 */
  max-width: 700px; /* 设置最大宽度 */
  margin: 20px auto; /* 上下居中 */
}

.logo {
  display: block;
  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;
    margin-right: -22rpx;
  }
  .user-agreement {
    display: flex;
    padding: 0 10rpx;
    .user-agreement-text {
      font-size: 26rpx;
      color: $uni-text-color-grey;
      margin-top: 20rpx;
      margin-left: 20rpx;
      .terms {
        color: $uni-text-color;
        font-weight: 400;
      }
    }
  }
}
</style>