horzi_rai_wxa/pages/login/login.vue

<template>
	<view class="container login-container">
		<view class="bind-tab">
			<text :class="['tab',{'act-tab':bind_type === 1}]" @click="toggleTab(1)">手机号</text>
			<text :class="['tab',{'act-tab':bind_type === 2}]" @click="toggleTab(2)">邮箱</text>
		</view>
		<view class="bind-cont">
			<view class="tel-bind" v-if="bind_type === 1">
				<view class="ipt-item">
					<label class="item-label item-iphone" @click="isAreaCode=true">{{showCountryCode}}   <u-icon :name="isAreaCode?'arrow-up':'arrow-down'" color="#B2B2B2" size="28"></u-icon></label>
					<input type="number" v-model="phoneIpt" class="ipt" placeholder="请输入手机号" style="width: 300rpx;">
          <button open-type="getPhoneNumber" value="用户授权" @getphonenumber="getPhoneNumber" class='code-btn'>微信手机号绑定</button> 
				</view>
				<view class="ipt-item">
					<label class="item-label">验证码</label>
					<input type="number" v-model="phone_code" class="ipt" placeholder="请输入4位验证码" maxlength="6" style="width: 300rpx;">
					<u-verification-code :seconds="seconds" ref="uCode" 
					@change="codeChange"></u-verification-code>
					<button @click="getCode" class="code-btn">{{tips}}</button>
				</view>
				<view class="bind-bot">
					<u-checkbox v-model="checked" :disabled="false" active-color="#07C160" size="34"></u-checkbox>
					<view class="tip">我已阅读并同意<text @click="lookArgeement">《用户服务协议》</text> </view>
				</view>
				<button @click="bindPhoneHandle" class='infobutton bind-btn'>提交</button>
<!-- 				<button v-if="checked" open-type="getPhoneNumber" value="用户授权" @getphonenumber="getPhoneNumber" class='infobutton plain-style'>微信手机号绑定</button> 
				<button v-else value="用户授权"class='infobutton plain-style' @click="$util.toast('请先勾选用户服务协议')">微信手机号绑定</button> -->
			</view>
			<view class="email-bind" v-else>
				<view class="ipt-item">
					<label class="item-label">邮箱</label>
					<input type="text" v-model="email" class="ipt" placeholder="请输入邮箱地址">
				</view>
				<view class="ipt-item">
					<label class="item-label">验证码</label>
					<input type="number" v-model="codeNum" class="ipt" placeholder="请输入4位验证码" maxlength="6" style="width: 300rpx;">
					<u-verification-code :seconds="seconds" ref="uCode" 
					@change="codeChange"></u-verification-code>
					<button @click="getCode" class="code-btn">{{tips}}</button>
				</view>
				<view class="bind-bot">
					<u-checkbox v-model="checked" :disabled="false" active-color="#07C160" size="34"></u-checkbox>
					<view class="tip">我已阅读并同意<text @click="lookArgeement">《用户服务协议》</text> </view>
				</view>
				<button @click="bindHandle" class='infobutton bind-btn'>提交</button>
			</view>
		</view>
		<view class="select-box">
			<u-popup v-model="isAreaCode" mode="bottom"  @close="cancel">
				<view class="box" style="color: #333333;font-size: 28rpxrpx;">请选择您的国际区号</view>
				<view class="box" style="color: #2C83FF;" @click="areacode('86')">大陆+86</view>
				<view class="box" style="color: #2C83FF;" @click="areacode('852')">香港+852</view>
				<view class="box" style="color: #2C83FF;" @click="areacode('886')">台湾+886</view>
				<view class="box" style="color: #2C83FF;" @click="areacode('1')">美国+1</view>
				<view class="box" style="color: #2C83FF;" @click="areacode('65')">新加坡+65</view>
				<view class="box box-bottom" style="color: #A9AFB8;" @click="cancel">取消</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { User } from '@/config/api.js';
	export default {
		data() {
			return {
				bind_type:1,//绑定方式
				checked:false,
				isArgee:false,
				seconds:60,
				tips:'获取验证码',
				email:'',//邮箱
				phoneNum:'',//手机号,
				codeNum:'',//验证码
				phoneIpt:'',
				phone_code:'',
				showCountryCode:'+86',
				countryCode:'86',//区号
				isAreaCode: false,
				
			};
		},
		methods:{
			/* 切换方式 */
			toggleTab(val) {
				this.email = ''
				this.phoneNum = ''
				this.codeNum = ''
				this.bind_type = val;
				this.phoneIpt = '';
				this.phone_code = '';
				this.checked = false;
			},
			/* 授权获取手机号 */
			getPhoneNumber(e) {
				//console.log(e)
				if(e.detail.errMsg == 'getPhoneNumber:ok') { // 点击了允许
					User.getPhoneNum({
						EncryptedData: e.detail.encryptedData,
						Iv: e.detail.iv
					}).then(res => {
						if(res.Ret === 200) {
							this.phoneNum = res.Data.PurePhoneNumber;
							this.countryCode=res.Data.CountryCode
                             this.phoneIpt=res.Data.PhoneNumber;
							this.bindHandle()
						}
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			/* 获取邮箱验证码 */
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					if(this.bind_type === 1) {
						!this.phoneIpt && this.$util.toast('请先输入手机号');
						this.phoneIpt && User.getPhoneCode({
							Mobile:this.phoneIpt,
							AreaNum:this.countryCode
						}).then(res => {
							if(res.Ret === 200) {
								this.$refs.uCode.start();
							}
						})
					}else {
						!this.email && this.$util.toast('请先输入邮箱');
						this.email && User.getEmailCode({
							Email:this.email
						}).then(res => {
							if(res.Ret === 200) {
								this.$refs.uCode.start();
							}
						})						
					}
				}
			},
			/* 绑定 */
			bindHandle() {
				let params;
				if(this.bind_type === 1) {
					params = {
						LoginType: 1,
						Mobile: this.phoneNum,
						CountryCode:this.countryCode
					}
					User.Bind(params).then(res => {
						if(res.Ret === 200) {
							let token = res.Data.Authorization;
							this.$db.set('access_token',token)
							uni.navigateBack({
								delta:1
							})
						}
					})
				}else {
					if(this.email && this.codeNum && this.checked) {
						params = {
							Email: this.email,
							LoginType: 2,
							VCode: this.codeNum
						}
						User.Bind(params).then(res => {
							if(res.Ret === 200) {
								let token = res.Data.Authorization;
								this.$db.set('access_token',token)
								uni.navigateBack({
									delta:1
								})
							}
						})
					} else {
						this.$util.toast(!this.checked?'请先勾选用户服务协议':!this.email?'请输入邮箱地址':'请输入验证码')
					}
                   
				}
			},
			lookArgeement() {
				uni.navigateTo({
					url:'/pages/agreement/agreement'
				})
			},
			/* 绑定手机号 */
			bindPhoneHandle() {
				if(this.phoneIpt && this.phone_code && this.checked) {
					let params = {
						Mobile: this.phoneIpt,
						LoginType: 3,
						VCode: this.phone_code,
						CountryCode:this.countryCode
					}
					User.Bind(params).then(res => {
						if(res.Ret === 200) {
							let token = res.Data.Authorization;
							this.$db.set('access_token',token)
							uni.navigateBack({
								delta:1
							})
						}
					})
				} else {
					this.$util.toast(!this.checked?'请先勾选用户服务协议':!this.phoneIpt?'请输入手机号':'请输入验证码')
				}
			},
			areacode(num){
				this.showCountryCode= '+' + num
				this.countryCode=num
				this.isAreaCode=false
			},
			cancel(){
				this.isAreaCode=false
			}
		},
	 onLoad() {
			/* 校验session */
			uni.checkSession({
				success: (res) => {
					if(res.errMsg != 'checkSession:ok') {
						uni.login({
						   success: result=> {
								User.wechatLog({
									Code:result.code
								}).then(res => {
									let token = res.Data.Authorization;
									this.$db.set('access_token',token);
								})
						  }
						});
					}
				},
				fail: (err) => {
					uni.login({
					   success: result=> {
							User.wechatLog({
								Code:result.code
							}).then(res => {
								let token = res.Data.Authorization;
								this.$db.set('access_token',token);
							})
					  }
					});
				}
			})
		},
		onShow() {
			// #ifdef MP-WEIXIN
				uni.hideHomeButton()
			// #endif
		}
	}
</script>

<style lang="scss">
.login-container {
	color: #333;
	.bind-tab {
		padding: 30rpx 34rpx 0;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		.tab {
			margin-right: 60rpx;
			padding-bottom: 8rpx;
			&.act-tab {
				border-bottom: 4rpx solid #07C160;
			}	
		}
	}
	.bind-cont {
		.tel-bind {
			padding: 40rpx 0 60rpx;
		}
		.infobutton {
			width: 368rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #07C160;
			color: #fff;
			margin: 40rpx auto 0;
		}
		.email-bind {
			padding: 40rpx 0 60px;
		}
		.ipt-item {
			padding: 33rpx 32rpx;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			position: relative;
			.item-label {
				text-align: justify;
				text-align-last: justify;
				display: inline-block;
				width: 106rpx;
				margin-right: 40rpx;
			}
			.ipt {
				width: 500rpx;
				font-size: 32rpx;
				color: #666;
			}
			.code-btn {
				position: absolute;
				right: 34rpx;
				background-color: #fff;
				font-size: 28rpx;
				color: #07C160;
			}
		}
		.bind-btn {
			margin-top: 140rpx;
		}
		.bind-bot {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding: 0 34rpx;
			margin-top: 30rpx;
			.check-sty {
				transform:scale(0.7)
			}
			.tip {
				text {
					display: inline;
					color: #07C160;
				}
			}
		}
	}
	.item-iphone {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 118rpx !important;
		margin-right: 26rpx !important;
	}

}
</style>