<template>
	<Layout :index="-1" :banner="0"  :img="'/'" :titles="'登录'" :title_content="'登录'">	
		<view class="bg d-b-c">
		   <view class="bgl d-c-c">
		      <image class="limg" src="../static/img/login/bgl.png" ></image>
		   </view>
		   <view class="bgr d-b-c d-c">
		      <image class="logo_img" src="../static/img/login/logo.png" ></image>
			  <view class="login_type">
			  	<text class="login_text" :class="{'check':l_type==1}" @tap="check(1)">密码登录</text>
			  	<text class="login_text1" :class="{'check':l_type==2}" @tap="check(2)">验证码登录</text>
			  </view>
			  <view class="input-wrap" >
				  <view class="login_input">
				     <image src="../static/img/login/phone.png" mode="widthFix" class="icons"></image>
					 <input class="linput" v-model="formData.mobile" type="text" placeholder="请输入注册手机号"  maxlength="16" placeholder-class="placeholder-class" >
				  </view>
				<view class="login_code"  v-if="l_type==2">
					<image src="../static/img/login/yzicon.png" mode="widthFix" class="icons"></image>
			  		<input class="linput2" v-model="formData.code" type="text" placeholder="请输入短信验证码" maxlength="8" placeholder-class="placeholder-class" />
			  		<view class="dynacode"  @click="sendMobileCode">{{dynacodeData.codeText }}</view>
			  	</view>
				<view class="login_input" v-if="l_type==1">
				   <image src="../static/img/login/licon.png" mode="widthFix" class="icons"></image>
				   <!-- <el-input class="minput" placeholder="请输入密码" v-model="formData.password" placeholder-class="placeholder-class" show-password></el-input> -->
				   <input class="minput"  v-model="formData.password" type="password" placeholder="请输入密码" placeholder-class="placeholder-class" >
				</view>
				<!-- 新增图形验证码 start -->
				<view class="login_code login_code2">
					<image src="../static/img/login/yzicon.png" mode="widthFix" class="icons"></image>
					<input class="linput" v-model="formData.captcha" type="text" placeholder="请输入图形验证码"  maxlength="6" placeholder-class="placeholder-class" >
					<image :src="captcha_img" mode="widthFix" class="captcha_img" @tap="getCaptcha()"></image>
				</view>


			  </view>
			 <!-- <view class="d-b-c agreement"> -->
			<!--  <view class="login_checks" >
			  	<label class="radio"><radio value="r1" :checked="checked" @tap="select()" activeBackgroundColor="#F78B32" borderColor="#F78B32" color="#F78B32" style="transform:scale(0.65);border-radius: 100%;" /></label>
			  	注册需要同意并接受<text style="color: #F6773C;cursor: pointer;" @tap="active({url:'https://cogapi.scszsj.com/service.html'})">《平台用户协议》</text>
			  </view>
			  <view class="login_checks" >
			  	<label class="radio"><radio value="r2" :checked="checkeds" @tap="selects()" activeBackgroundColor="#F78B32" borderColor="#F78B32" color="#F78B32" style="transform:scale(0.65);border-radius: 100%;" /></label>
			  	同意同步注册天府信用通
			  </view>
			 </view>  -->
			  
			  <view class="login_bt" @tap="dologin()" v-if="l_type==1">
			  	登录
			  </view>
			  <view class="login_bt" @tap="smslogin()" v-if="l_type==2">
			  	登录
			  </view>
			  <view class="d-b-c gourls" >
				  <view class="go_login" @tap="register()">注册账号</view>
				  <view class="go_forget" @tap="active({url: 'forget'})">忘记密码</view>
			  </view>
		   </view>
		</view>
	</Layout>
</template>

<script>
	import Layout from './part/layoutNoh.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				detail: [],
				nextdetail: [],
				id: '',
				category_id:2,
				checkeds:false,
				checked:true,
				formData:[],
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '发送验证码',
					isSend: false
				},
				captcha_img:'',
				l_type:1
			}
		},
		created() {
			this.getCaptcha();
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取验证码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods:{
			getCaptcha(){
				this._get('user.Useropen/generateCaptcha',{
				},res=>{
					console.log(res,33)
					if(res.code==1){
						this.captcha_img = res.data.img;
						this.formData.captchaKey = res.data.key;
					}
				})
			},
			check(e){
				this.l_type=e;
			},
			register(){
				this.$router.replace({
					path: 'register'
				});
			},
			
			select(){
				if(this.checked==true){
					this.checked=false;
				}else{
					this.checked=true;
				}
			},
			selects(){
				if(this.checkeds==true){
					this.checkeds=false;
				}else{
					this.checkeds=true;
				}
			},
			active(e){
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
			sendMobileCode(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(!this.formData.mobile){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				
				this._post('user.Useropen/sendCode',{
					mobile: this.formData.mobile,
					type: 'login',
				},res=>{
					this.dynacodeData.timer = setInterval(() => {
						this.dynacodeData.seconds--;
						this.dynacodeData.codeText = this.dynacodeData.seconds + 's后重发';
					}, 1000);
					uni.showToast({
						icon:'none',
						title: '发送成功',
						duration:1500
					})
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			smslogin(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(this.formData.mobile==''){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				if(this.formData.password==''){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration:1500
					})
					return;
				}
				if(this.formData.captcha==''){
					uni.showToast({
						icon:'none',
						title: '请输入图形验证码',
						duration:1500
					})
					return;
				}
				this._post('user.Useropen/smslogin',{
					mobile: this.formData.mobile,
					code: this.formData.code,
					captcha: this.formData.captcha,
					captchaKey: this.formData.captchaKey,
				},res=>{
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						icon:'none',
						title: '登录成功',
						duration:1500
					})
					this.token =res.data.token;
					setTimeout(() => {
					   uni.reLaunch({
					           url: '/pages/index' // 替换为你实际的首页路径
					       });
					}, 2000);
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			dologin(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(this.formData.mobile==''){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				if(this.formData.password==''){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration:1500
					})
					return;
				}
				if(this.formData.captcha==''){
					uni.showToast({
						icon:'none',
						title: '请输入图形验证码',
						duration:1500
					})
					return;
				}
				this._post('user.Useropen/phonelogin',{
					mobile: this.formData.mobile,
					password: this.formData.password,
					captcha: this.formData.captcha,
					captchaKey: this.formData.captchaKey,
				},res=>{
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						icon:'none',
						title: '登录成功',
						duration:1500
					})
					this.token =res.data.token;
					setTimeout(() => {
						uni.reLaunch({
						        url: '/pages/index' // 替换为你实际的首页路径
						    });
					   // this.$router.replace({
					   // 	path: '/'
					   // });
					}, 2000);
					
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
		}
	}
</script>

<style lang="scss">
	.bg{
		width: 1920px;
		height: 100vh;
		background-image: url('../static/img/login/bgs.png');
		background-size: 100% 100%;
	}
	.bgl ,.bgr{
		width: 50%;
	}
	.bgl .limg{
		width: 752px;
		height: 760px;
	}
	.logo_img{
		width: 471px;
		height: 66px;
		margin-bottom: 54px;
	}
	.input-wrap{
		min-height: 152px;
	}
	.login_input{
		width: 468px;
		height: 54px;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid rgba(102,102,102,0.35);
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		// padding: 0 20px;
	}
	.login_code{
		width: 468px;
		height: 56px;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid rgba(102,102,102,0.35);
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.icons{
		width: 24px;
		height: 24px;
		margin-left: 20px;
	}
	
	.placeholder-class{
		font-size: 18px;
		color: #939393; /* 你想要的颜色 */
		line-height: 56px;
	}
	.placeholder-class::placeholder {
	  color: red; /* 你想要的颜色 */
	}
	
	.linput{
		width: 80%;
		height: 54px;
		display: flex;
		align-items: center;
		margin-top: 2px;
		margin-left: 4px;
		font-size: 16px;
	}
	.linput2{
		width: 60%;
		height: 54px;
		display: flex;
		align-items: center;
		margin-top: 2px;
		margin-left: 4px;
		font-size: 16px;
	}
	.minput{
		width: 87% !important;
		height: 54px !important;
		display: flex;
		align-items: center;
		margin-top: 2px;
		margin-left: 4px;
		font-size: 16px;
	}
	.dynacode{
		width: 154px;
		height: 56px;
		background-image: url('../static/img/login/yzbg.png');
		background-size: 100% 100%;
		text-align: center;
		font-size: 16px;
		color: #3B3B3B;
		line-height: 56px;
		cursor: pointer;
	}
	::v-deep .el-input__inner{
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
		font-size: 18px;
		// color: #939393; /* 你想要的颜色 */
		line-height: 56px;
	}
	::v-deep .uni-radio-input{
		border-radius: unset !important; 
	}
	.login_checks{
		font-size: 14px;
		color: #3D3D3D;
	}
	.login_bt{
		width: 468px;
		height: 64px;
		background: #F78A30;
		border-radius: 8px 8px 8px 8px;
		color: #ffffff;
		text-align: center;
		line-height: 64px;
		font-weight: 500;
		font-size: 22px;
		cursor: pointer;
		margin-top: 20px;
	}
	.gourls{
		width: 468px;
		margin-top: 22px;
	}
	.go_login{
		text-align: left;
		font-weight: 400;
		font-size: 16px;
		color: #F6773C;
		cursor: pointer;
	}
	.go_forget{
		font-weight: 400;
		font-size: 16px;
		color: #3D3D3D;
		cursor: pointer;
	}
	.agreement{
		margin-top: 2px;
		margin-bottom: 54px;
	}
	.login_type{
		display: flex;
		width: 49%;
		margin-bottom: 44px;
	}
	.login_text{
		font-size: 22px;
		color: #3B3B3B;
		line-height: 32px;
		cursor: pointer;
	}
	.login_text1{
		font-size: 22px;
		color: #3B3B3B;
		line-height: 32px;
		margin-left: 30px;
		cursor: pointer;
	}
	.check{
		color: #FF8622;
		border-bottom: 2px solid #FF8622;
	}
	.login_code2{
		justify-content: space-between;
	}
	.captcha_img{
		width: 115px !important;
    height: 54px !important;
    float: right;
	}
</style>
