h5-elab-open-ownerUnion/components/subComponents/dmLogin.vue

<template>
	<dmDialog ref='popView' :isShowTitle="true" title="登陆" :isShowClose="true" :isShowConfirm="false" >
		<view class="content">
			<view class="user_item">
				<text class="item_name">手机号</text>
				<view class="user_line">
					
				</view>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" type='number' maxlength="11"  class="item_right_name" :value="mobile" placeholder="请输入" @blur='inputMobile' @confirm='inputMobile'/>
				</view>
			</view>
			
			<view class="user_item">
				<text class="item_name">验证码</text>
				<view class="user_line">
					
				</view>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="verifity" placeholder="请输入" @blur='inputVerifity' @confirm='inputVerifity'/>
					<view class="veritify" @click="getVeritify">
						{{veritifyTxt}}
					</view>
				</view>
			</view>
			<view class="agreement"  @click="agreeXieYI">
				<image class="icon_agree" v-if="agree" src="../../static/icons/icon_yezhu_selected.png" mode=""></image>
				<image class="icon_agree" v-else src="../../static/icons/icon_yezhu_unselected.png" mode=""></image>
				
				我已阅读并同意
				<text class="agreement_" @click="yonghuxy">《用户使用协议》</text>
				和
				<text class="agreement_" @click="ysxieyi">《隐私政策》</text>
			</view>
			<view class="confirm" @click="toLogin">
				确认
			</view>
		</view>
	</dmDialog>
</template>

<script>
	import dmDialog from "./dmDialog.vue"
	export default{
		
		data(){
			return {
		       mobile:"",
			   veritifyTxt:"发送验证码",
			   verifity:"",
			   timer:null,
			   countdownTimes:120,
			   agree:false,
			   userId:"",
			}
		},
		methods:{
			yonghuxy(){},
			ysxieyi(){},
			agreeXieYI(){
				this.agree = !this.agree
			},
			show() {
				this.$refs.popView.show()
			},
			knowAction(){
				if(this.timer){
					clearInterval(this.timer);
					this.timer = null;
				}
				this.$refs.popView.hide()
			},
			inputMobile(e){
				this.mobile = e.detail.value
			},
			inputVerifity(e){
				this.verifity = e.detail.value
			},
			async getVeritify(){
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return 
				}
				var phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!phone.test(this.mobile)) {
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return 
				}
				this.showInputVerifity = true;
				if(this.timer&&this.countdownTimes>=0){
					return
				}
				let ret = await this.$myRequest({
					url: "/sms/sendSmsVerifyCode",
					data: {
						"phone": this.mobile,
					},
					method:"GET"
				})
				this.houseList = [];
				if (ret.data.success) {
					this.countdown();
				}
			},
			countdown(){
				this.timer = setInterval(()=>{
					this.countdownTimes--;
					this.veritifyTxt = this.countdownTimes+"s"
					if(this.countdownTimes<=0){
						clearInterval(this.timer);
						this.timer = null;
						this.veritifyTxt = '获取验证码';
						this.countdownTimes = 120;
					}
				},1000)
			},
			async toLogin(){
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return
				}
				
				if(!this.verifity){
					uni.showToast({
						icon:"none",
						title:"请输入验证码"
					})
					return
				}
				if(!this.agree){
					uni.showToast({
						icon:"none",
						title:"请阅读并同意《入住协议》"
					})
					return
				}
				let ret = await this.$myRequest({
					url: "/authorizedPhone",
					data: {
						"code": this.verifity,
						"phone": this.mobile,
						"userId": this.userId
					}
				});
			    
				if(ret.data.success){
					uni.showToast({
						icon:"none",
						title:"登录成功"
					});
					let token = ret.data.single;
					getApp().globalData.token = token;
					uni.$emit('request');
					this.knowAction();
					this.$cache.set('_token_owner_union', token);
					
				}else{
					uni.showToast({
						icon:"none",
						title:ret.data.message
					});
				}
			}
		},
		mounted() {
			this.userId = this.$cache.get('_user_id')
			uni.$on('login',()=>{
				this.show();
			})
		},
		
		components:{
			dmDialog
		}
		
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: 430rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.user_item{
			width: 630rpx;
			height: 84rpx;
			min-height: 84rpx;
			background: #f5f6f7;
			border-radius: 16rpx;
			display: flex;
		
			align-items: center;
			margin-bottom: 12rpx;
			.item_name{
				width: 90rpx;
				min-width: 90rpx;
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				color: #b1b1b1;
				padding-left: 40rpx;
			}
			.item_right{
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				color: #262626;
				display: flex;
				align-items: center;
				
				.item_right_name{
					width: 100%;
				}
				.item_right_name_placeholder{
					font-size: 26rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					color: #b1b1b1;
				}
				.icon_right{
					width: 10rpx;
					height: 22rpx;
					margin-left: 19rpx;
				}
				
				.veritify{
					width: 150rpx;
					min-width: 150rpx;
					height: 50rpx;
					margin-left: 10rpx;
					margin-right: 60rpx;
					line-height: 50rpx;
					font-size: 20rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: center;
					color: #f07423;
				}
			}
		}
		
		.user_line{
			width: 2rpx;
			min-width: 2rpx;
			height: 20rpx;
			min-height: 20rpx;
			background: rgba(177,177,177,1);
			margin-left: 18rpx;
			margin-right: 20rpx;
		}
		.confirm{
			width: 410rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f07423;
			border-radius: 40rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(240,116,35,0.37); 
			font-size: 28rpx;
			font-family: Verdana, Verdana-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			margin-top: 70rpx;
		}
	}
	.agreement{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: left;
		color: #b1b1b1;
		margin-top: 30rpx;
		.icon_agree{
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
		.agreement_{
			color: rgba(240,116,35,1);
		}
	}
</style>