更新UI

ui/src/pages/login/components/phoneForm.vue

@@ -0,0 +1,74 @@
+<template>
+	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
+		<el-form-item prop="phone">
+			<el-input v-model="form.phone" prefix-icon="el-icon-iphone" clearable :placeholder="$t('login.mobilePlaceholder')">
+				<template #prepend>+86</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item prop="yzm"  style="margin-bottom: 35px;">
+			<div class="login-msg-yzm">
+				<el-input v-model="form.yzm" prefix-icon="el-icon-unlock" clearable :placeholder="$t('login.smsPlaceholder')"></el-input>
+				<el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
+			</div>
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+		</el-form-item>
+		<div class="login-reg">
+			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
+		</div>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					phone: "",
+					yzm: "",
+				},
+				rules: {
+					phone: [
+						{required: true, message: this.$t('login.mobileError')}
+					],
+					yzm: [
+						{required: true, message: this.$t('login.smsError')}
+					]
+				},
+				disabled: false,
+				time: 0,
+				islogin: false,
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			async getYzm(){
+				var validate = await this.$refs.loginForm.validateField("phone").catch(()=>{})
+				if(!validate){ return false }
+
+				this.$message.success(this.$t('login.smsSent'))
+				this.disabled = true
+				this.time = 60
+				var t = setInterval(() => {
+					this.time -= 1
+					if(this.time < 1){
+						clearInterval(t)
+						this.disabled = false
+						this.time = 0
+					}
+				},1000)
+			},
+			async login(){
+				var validate = await this.$refs.loginForm.validate().catch(()=>{})
+				if(!validate){ return false }
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>