hytc-customer/pages/login/index.vue

<template>
	<view class="login_warp">
		<view class="infowarp">
			<image :src="info.user_logo" class="logoimg" mode=""></image>
			<view class="cusname">{{info.user_name}}</view>
		</view>
		<view class="loginForm">
			<view class="loginli">
				<view class="logli" style="border-bottom:0;padding:0;">
					<view class="label">{{i18n['账号']}}</view>
					<input type="number" v-model="account" :placeholder="i18n['请输入手机号']" class="selfinput">
				</view>
				<image src="/static/img/close.png" @click="clearPhone" v-if="phone" class="closeimg" mode=""></image>
			</view>
			<view class="loginli">
				<view class="logli" style="border-bottom:0;padding:0;">
					<view class="label">密码</view>
					<input type="number" v-model="password" placeholder="请输入密码" class="selfinput">
				</view>
<!-- 				<image src="/static/img/close.png" @click="clearPhone" v-if="phone" class="closeimg" mode=""></image>
 -->			</view>
			<!-- <view class="loginli">
				<view class="logli">
					<view class="label">{{i18n['验证码']}}</view>
					<input type="number" v-model="code" :placeholder="i18n['请输入验证码']" class="passinput">
				</view>
				<view class="code" v-if="!showTime" @click="sendCode">{{i18n['发送验证码']}}</view>
				<view class="code" v-else>{{time}}s{{i18n['重试']}}</view>
			</view> -->
		</view>
		<view class="loginbtn" @click="toLogin">{{i18n['登录']}}</view>
<!-- 		<view class="freelogin" @click="freeLogin">暂不登录，进行演示</view>
 -->	</view>
</template>

<script>
	import { checkPhone } from '@/util/common.js'
	import { netLogin, netsendText, netInfo, login_text } from '@/api/api.js'
	
	let T;
	export default{
		data() {
			return{
				phone:'',
				remember:false,
				account:uni.getStorageSync('account'),
				password:'',
				isChinese:false,
				info:{},
				code:'',   //验证码
				showTime:false,
				time:60
			}
		},
		computed:{
			i18n() {
				return this.$t("login")
			}
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			console.log(uni.getStorageSync('locale') == 'zh')
			this.isChinese = !uni.getStorageSync('locale') || uni.getStorageSync('locale') == 'zh' ? true : false
		},
		methods:{
			getInfo() {
				netInfo().then(res=>{
					this.info = res.data
				})
			},
			changeLan(item) {
				this.isChinese = !this.isChinese
				this.$i18n.locale = item
				uni.setStorageSync('locale', item)
			},
			clearPhone() {
				this.phone = ''
			},
			changeRmem() {
				this.remember = !this.remember
				if(this.remember){
					uni.setStorageSync('account',this.account)
				}else{
					uni.removeStorageSync('account')
				}
			},
			sendCode() {
				if(!checkPhone(this.account)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				netsendText({mobile:this.account,_ajax:1}).then(res=>{
					this.time = 60
					this.showTime = true
					T = setInterval(()=>{
						this.time --
						if(this.time <= 0){
							this.showTime = false
							clearInterval(T)
						}
					},1000)
				})
			},
			toLogin() {
				if(!checkPhone(this.account)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				let params = {
					account:this.account,
					code:this.code,
					password:this.password
				}
				netLogin(params).then(res=>{
					this.jumpPage(res)
				})
			},
			//暂不登录 进行演示
			freeLogin() {
				login_text().then(res=>{
					this.jumpPage(res)
				})
			},
			jumpPage(res){
				uni.setStorageSync('token',res.data.token)
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			toRegister() {
				uni.redirectTo({
					url:'/pages/login/register'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.freelogin{
		text-align: center;
		font-size:24rpx;
		color:red;
		margin-top:50rpx;
	}
	.login_warp{
		position: relative;
		background: linear-gradient(180deg, #DFF0FF 0%, #F4F4F4 100%);
		padding-top:80rpx;
		.langbox{
			position: absolute;
			right:30rpx;
			top:30rpx;
			.lanimg{
				width:44rpx;
				height:44rpx;
			}
		}
	}
	
	.infowarp{
		width:200rpx;
		margin:0 auto;
		text-align: center;
		.logoimg{
			width:145rpx;
			height:145rpx;
			border-radius: 50%;
			border:1rpx solid #f5f5f5;
			margin:0 auto 15rpx;
		}
		.cusname{
			font-size:30rpx;
			color:#333;
			font-weight: bold;
			text-align: center;
		}
	}
	.loginForm{
		width:700rpx;
		padding:0 30rpx;
		margin:100rpx auto 0;
		.loginli{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx 10rpx;
			border-bottom:1rpx solid #CACACA;
			.selfinput{
				width:400rpx;
				height: 50px;
				font-size:26rpx;
				color:#333;
			}
			.closeimg{
				width:30rpx;
				height:30rpx;
			}
			.logli{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex:1;
				border-bottom:1rpx solid #f5f5f5;
				padding:20rpx 0;
				.label{
					width:120rpx;
					font-size:26rpx;
					color:#333;
					margin-right:24rpx;
					flex-shrink: 0;
				}
				.passinput{
					width:300rpx;
					font-size:26rpx;
					height: 50px;
					color:#333;
				}
			}
			.code{
				flex-shrink: 0;
				width:150rpx;
				// height:55rpx;
				font-size:26rpx;
				color:#0287FF;
				// border:1rpx solid #0287FF;
				border-radius: 10rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}
	}
	.loginbtn{
		width:620rpx;
		height:88rpx;
		background:#7FC2FF;
		border-radius: 44rpx;
		color:#fff;
		font-size:32rpx;
		text-align: center;
		line-height: 88rpx;
		margin:80rpx auto 0;
	}
	.textlog{
		font-size:26rpx;
		color:#000;
		text-align: center;
		margin-top:15rpx;
	}
	.botbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 30rpx;
		.remember{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top:30rpx;
			font-size:24rpx;
			color:#666;
			radio{
				transform: scale(0.7);
			}
			.rem_label{
				font-size:24rpx;
				color:#666;
			}
		}
	}
	
</style>