NDAid/pages/login/login.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="page">
		<uv-row justify="space-between" customStyle="margin-top: 35%" class="form"> 
			<uv-col span="10" offset="1">
				<uv-form labelPosition="left" :model="logininfo" :rules="rules" ref="form" >
					<uv-col span="10" offset="1">{{$t('telno')}}</uv-col>
					<uv-col span="10" offset="1"> 
						<uv-form-item prop="telno" >
							<uv-input v-model.trim="logininfo.telno" border="surround">
							</uv-input>
						</uv-form-item>
					</uv-col>
					<uv-col span="10" offset="1" customStyle="margin-top: 20px">{{$t('password')}}</uv-col>
					<uv-col span="10" offset="1">
						<uv-form-item  prop="pw" >
							<uv-input v-model.trim="logininfo.pw" :type="passwordtype"  border="surround">
							</uv-input>
							<template v-slot:right> 
								<uv-icon name="eye-off-outline" color="#2979ff" size="18" v-show="!showpasswod" @click="setshowpasswod"></uv-icon>
								<uv-icon name="eye" color="#2979ff" size="18" v-show="showpasswod" @click="setshowpasswod"></uv-icon>
							</template>
						</uv-form-item>
					</uv-col>
					<uv-col>
						<text @click="showPrivacyPolicy" class="privacypolicy">นโยบายความเป็นส่วนตัว</text>
					</uv-col>
					<uv-col span="10" offset="1">
						<uv-button type="primary" :throttleTime="throttleTime" :text="$t('login')" customStyle="margin-top: 2rem" @click="submit"></uv-button>
					</uv-col>
				</uv-form>
				<uv-col span="10" offset="1">
					<uv-button type="primary" :plain="true" :text="$t('register')" customStyle="margin-top: 20px" @click="toregister"></uv-button>
				</uv-col>
			</uv-col>
		</uv-row>
	</view>
</template>

<script>
	import {login} from "@/common/api/user.js"
	export default {
		data() {
			return {
				throttleTime:1,
				logininfo:{
					telno:'',
					pw:''
				},
				rules:{
					'telno':[{
						type: 'string',
						required: true,
						message: this.$t('telno_null'),
						trigger: ['blur', 'change'],
						
					},{
						pattern: /\d{5,}/,
						message: this.$t('telno_error'),
						trigger: ['blur', 'change'],
					}
					],
					'pw': {
						type: 'string',
						required: true,
						message: this.$t('password_null'),
						trigger: ['blur', 'change']
					},
				},
				showpasswod:false,
				passwordtype:"password"
			}
		},
		methods: {
			submit(){
				var that = this
				this.$refs.form.validate().then(res => {
					login(this.logininfo,that)
				}).catch(errors => {
					console.log(errors)
				})
			},
			setshowpasswod(){
				this.showpasswod = !this.showpasswod
				if(this.showpasswod){
					this.passwordtype="text"
				}else{
					this.passwordtype="password"
				}
			},
			toregister(){
				uni.navigateTo({
					url: '/pages/register/register'
				});	
			},
			showPrivacyPolicy(){
				let weburl = 'https://app.chienxutech.com:30443/Uploads/ssjprivate_en.html';
				uni.navigateTo({
					url: '/pages/webview/webview?weburl='+weburl+'&title='+this.$t('privacy_policy')
				});	
			}
		},
		mounted(){
			uni.setNavigationBarTitle({
				title: this.$t('login')
			});
			this.throttleTime = getApp().globalData.throttleTime;
		},
		created() {
		}
	}
</script>

<style scoped>
	.privacypolicy{
		margin-top: 10px;
		text-align: center;
		color: #2979ff;
		font-size: 12px;
	}
	.uv-border{
		border-color: #909191 !important;
	}
</style>