|
|
@@ -0,0 +1,139 @@
|
|
|
+<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>
|
|
|
+ <u-input v-model="loginForm.mobile" maxlength="11" border="none" placeholder="请输入手机号">
|
|
|
+ <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>
|
|
|
+ <u-input v-model="loginForm.captcha" maxlength="6" border="none" placeholder="请输入短信验证码">
|
|
|
+ <template slot="suffix">
|
|
|
+ <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
|
|
|
+ <u--text text="获取验证码" @tap="getCode" type="primary"></u--text>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <view class="phone-question">手机号无法使用</view>
|
|
|
+ <u-form-item>
|
|
|
+ <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle">登录</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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ client_id: 'chelvc_client',
|
|
|
+ client_secret: 'qWBe6jD%GCuPPTkP',
|
|
|
+ grant_type: 'sms',
|
|
|
+ token: '',
|
|
|
+ mobile: '',
|
|
|
+ captcha: '',
|
|
|
+ },
|
|
|
+ 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: '请输入六位数验证码',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ isChecked: 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： 获取手机号验证码
|
|
|
+ },
|
|
|
+ codeChange() {},
|
|
|
+ checkboxChange(v) {
|
|
|
+ this.isChecked = v;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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>
|
