xinjiangMiniProgram/pages/subPage/login/loginbyPhone.vue

<template>
	<view class="content">
		<view class="padding">
			<view class="logoCon">
				<view class="logo">
					<image src="@/static/images/logo.png" mode=""></image>
				</view>
				<view class="name">事务通</view>
			</view>

			<view class="from">
				<view class="formItem flex">
					<view class="prefix">+86</view>
					<view class="line"></view>
					<view class="inputBox">
						<up-input v-model="FormData.phone" border="none" placeholder="请输入手机号"></up-input>
					</view>
				</view>
				<view class="formItem flex">
					<view class="inputBox">
						<up-input v-model="FormData.code" border="none" placeholder="输入验证码"></up-input>
					</view>
					<view class="sedCode" @click="goSms">{{codeText}}</view>
				</view>
				<view class="oneBtnBox" :class="{isActive: btnHighlight}">
					<oneBtn text="登 录" @click="submitFn" ></oneBtn>
				</view>
			</view>
			
			<privacyRadion style="margin-top: 40rpx;" :isCheck="isCheck"  @changeRadio="changeRadio"/>
			
			<view class="other">
				<view class="lineTxt">其它登录方式</view>
				<view class="icon"  @click="$goPage('/pages/subPage/login/loginwx')">
					<image src="@/static/images/loginicon.png" mode=""></image>
				</view>
				<view class="txt">快捷登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLoginCode } from '@/config/api.js'
	export default {
		data() {
			return {
				FormData: {
					phone: '',
					code: ''
				},
				codeText: '获取验证码',
				codeOn: false,
				isCheck: false
			}
		},
		computed: {
			
			isPhone() {
				return uni.$u.test.mobile(this.FormData.phone)
			},
			btnHighlight() {
				return this.isPhone&&this.FormData.code*1>999
			}
		},
		methods: {
			// 是否选择协议
			changeRadio(val) {
				 uni.hideKeyboard();
				this.isCheck = val
			},
			getLoginCodeFn() {
				getLoginCode
			},
			// 发送短信验证码
			 goSms() {
				  uni.hideKeyboard();
				const {
					FormData
				} = this
				if (!FormData.phone) return this.$u.toast('请输入手机号');
				if (!this.isPhone) return this.$u.toast('手机号格式有误');
				if (this.codeOn) return
				this.codeOn = true;
				getLoginCode({
					scene: 1,
					mobile: FormData.phone,
				}).then(()=>{
					var time = 60;
					this.codeText = time + "秒后重新发送"
					var timer = setInterval(() => {
						time--;
						this.codeText = time + "秒后重新发送"
						if (time == 0) {
							clearInterval(timer);
							this.codeText = "获取验证码";
							this.codeOn = false;
						}
					}, 1000);
				}).catch(()=>{
					this.codeOn = false;
				})
				// 获取验证码
				
			},
			// 提交代码
			async submitFn() {
				 uni.hideKeyboard();
				if(!this.btnHighlight) return
				if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策');
				let obj = {
					mobile: this.FormData.phone,
					code: this.FormData.code
				}
				const res = await loginSMS(obj)
				// await this.$store.dispatch('getUserInfo')
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

.other {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	color: #9C9C9C;
	position: fixed;
	bottom: 80rpx;
	left: 0;
	width: 100%;
  .lineTxt {
	  position: relative;
	  
	&::before {
		content: '';
		position: absolute;
		width: 240rpx;
		height: 1rpx;
		top: 50%;
		background: #e6e6e6;
		right: 150rpx;
		transform: translateY(50%);
		z-index: 99;
	}
	&::after {
		content: '';
		position: absolute;
		width: 240rpx;
		height: 1rpx;
		top: 50%;
		background: #e6e6e6;
		left: 150rpx;
		transform: translateY(50%);
		z-index: 99;
	}
  }

  .icon {
	  width: 80rpx;
	  height: 80rpx;
	  margin: 20rpx 0;
  }

  .txt {
	
  }
}

	.content {
		.logoCon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 50rpx;
			.logo {
				width: 160rpx;
				height: 160rpx;
			}

			.name {
				font-size: 32rpx;
				margin-top: 20rpx;
				font-weight: 700;
			}
		}

		.from {
			margin-top: 20rpx;
			.formItem {
				height: 108rpx;
				border-bottom: 1px solid #EFEFEF;
				.prefix {
					font-size: 28rpx;
					color: #333;
					width: 120rpx;
					text-align: center;
				}

				.line {
					width: 1px;
					height: 40rpx;
					background: #EFEFEF;
					margin-right: 30rpx;
				}

				.inputBox {
					flex: 1;
					width: 0;
				}
				
				.sedCode {
					font-size: 28rpx;
					color: $themC;
				}
			}
			.oneBtnBox {
				margin-top: 40rpx;
				opacity: 0.4;
				&.isActive {
					opacity: 1;
				}
			}
		}
	}
</style>