txCar/pages/login/iphoneLogin.vue

<template>
	<view class="container">
		<view class="tis">登录后更精彩</view>
		<view class="cont">
			<input type="number" value="" v-model="phone" placeholder-style="color:#999999" placeholder="请输入手机号码" class="phoneInput" @input="input()" />

			<view class="yzmBox">
				<input type="number" value="" v-model="code" placeholder-style="color:#999999" placeholder="请输入验证码" class="yzmInput"
					@input="yzminput()" />
				<view @click="sendSms" class="yzmBtn" :class="{green:isgreen}">{{yzmTxt}}</view>
			</view>

			<view class="loginBtn" :class="{okBtn:show}" @click="gologin">验证并登录</view>
			<view class="privacy" @click="privacyClick">
				<image src="../../static/img/login_icon_checked.png" mode="" class="imgPrivacy" v-show="privacyCk">
				</image>
				<view class="nock" v-show="!privacyCk"></view>
				<span>同意</span> <span class="span1" @click.stop="goTreaty">《服务协议》</span>
				<span>与</span> <span class="span1" @click.stop="goIntimity">《隐私政策》 </span>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				privacyCk: true,
				phone: '',
				isYzm: true,
				yzmTxt: '获取验证码',
				isgreen: false,
				timer: null,
				show: false,
				cont: '',
				code: '',
				wxdata: '',
				wxCode: '',
				openID: '',
				wxOpendata: '',
			}
		},
		onLoad() {

			this.wxOpendata = uni.getStorageSync("wxOpendata");
		},
		methods: {

			goTreaty() {
				uni.navigateTo({
					url: '../me/treaty'
				})
			},
			goIntimity() {
				uni.navigateTo({
					url: '../me/intimity'
				})
			},

			getWxdata() {
				var that = this;
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '登录',
					success: (res) => {
						console.log(res);
						that.wxdata = res;
						uni.setStorage({
							key: 'wxdata',
							data: res,
							success: function() {
								that.ipLogin()
							}
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			gologin() {
				if (this.privacyCk == false) {
					
					uni.showToast({
						title: '您需要先同意相关服务协议与隐私政策',
						icon: 'none',
						duration: 3000
					});
					return
				}
				if (this.show) {
					if (this.wxOpendata) {
						this.openID = this.wxOpendata.openid;
						this.wxdata = uni.getStorageSync("wxdata")
						if (this.wxdata) {
							this.phoneLogin()
						} else {
							this.getWxdata()
						}

					} else {
						this.getWxdata()
					}

				}

			},
			ipLogin() {
				var that = this;
				uni.showLoading({});
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes)
						that.wxCode = loginRes.code
						that.getWxOpenID()
					}
				});



			},
			getWxOpenID() {
				this.$http('worldKeepCar/sys/getWxOpenID', {
					code: this.wxCode,
				}, 'GET').then(res => {
					//console.log(res)
					this.openID = res.data.openid;
					// console.log(this.openID)
					this.phoneLogin()
				})
			},
			phoneLogin() {
				this.$http('worldKeepCar/sys/phoneLogin', {
					phone: this.phone,
					code: this.code,
					nickName: this.wxdata.userInfo.nickName,
					headUrl: this.wxdata.userInfo.avatarUrl,
					openID: this.openID,
				}, ).then(res => {

					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorage({
							key: 'logodata',
							data: res.data,
							success: function() {
								that.ipLogin()
							}
						});
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 3000
						});
						uni.switchTab({
							url: '../index/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			input(phone) {
				console.log(this.phone);
				if (this.phone != '') {
					this.isgreen = true;
				}
			},
			yzminput() {
				if (this.code != '' && this.phone != '') {
					this.show = true;
				}
			},
			sendSms() {
				if (!this.isYzm) {
					return false;
				}
				this.isYzm = false;
				//this.clearIntervalDjs();
				//return false;
				if (this.phone === '') {
					this.isYzm = true
					uni.showToast({
						title: '手机号不可为空',
						icon: 'none',
						duration: 3000
					});
				} else {
					var reg = /^1[3456789]\d{9}$/;
					if (!reg.test(this.phone)) {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none',
							duration: 3000
						});
						this.isYzm = true
					} else {
						this.$http('worldKeepCar/sys/sendSms', {
							phone: this.phone,
						}, 'GET').then(res => {
							this.isYzm = false;
							/* uni.showToast({
							     title: '发送成功',
							 	 icon:'none',
							     duration: 3000
							 }); */
							this.clearIntervalDjs()
						})
					}
				}


			},
			clearIntervalDjs() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.cont = TIME_COUNT;
					this.isYzm = false;
					this.timer = setInterval(() => {
						if (this.cont > 0 && this.cont <= TIME_COUNT) {
							this.cont--;
							this.yzmTxt = this.cont + 'S'
						} else {
							this.isYzm = true;
							clearInterval(this.timer);
							this.timer = null;
							this.yzmTxt = "获取验证码"
						}
					}, 1000)
				}
			},
			privacyClick() {
				this.privacyCk = !this.privacyCk
			},
			blur1() {

			}
		}
	}
</script>

<style scoped>
	.tis {
		color: #333333;
		font-size: 44rpx;
		padding-top: 78rpx;
		padding-left: 58rpx;
	}

	.cont {
		padding: 58rpx;
	}

	.phoneInput {
		width: 604rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #EEEEEE;
		line-height: 88rpx;
		color: #333333;
		font-size: 30rpx;
		padding-left: 30rpx;
	}

	.yzmBox {
		width: 604rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #EEEEEE;
		line-height: 88rpx;
		color: #999999;
		font-size: 30rpx;
		padding-left: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.yzmInput {
		line-height: 88rpx;
		color: #333333;
		font-size: 30rpx;
		height: 88rpx;
	}

	.yzmBtn {
		padding-right: 30rpx;
		border-left: 2rpx solid #EEEEEE;
		padding-left: 20rpx;
		height: 35rpx;
		line-height: 35rpx;
		margin-top: 26rpx;
	}

	.loginBtn {
		width: 634rpx;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 30rpx;
		color: #999999;
		font-size: 30rpx;
	}

	.privacy {
		display: flex;
		/* justify-content: center; */
		font-size: 24rpx;
		color: #CCCCCC;
		padding-top: 34rpx;
	}

	.imgPrivacy {
		width: 28rpx;
		height: 28rpx;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}

	.span1 {
		color: #FF4F00;
	}

	.nock {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border: 2px solid #AEAEAE;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}

	.green {
		color: #FF4F00;
	}

	.okBtn {
		background: #FF4F00;
		color: #FFFFFF;
	}
</style>