JiaZhiQianYan/pages/login/login.vue

<template>
	<view>
		<navBar leftText="登录" :hideNavBg="true" :backBlack="true"></navBar>
		<image class="logo" :style="'margin-top:'+contentTop+'px;'" src="/static/image/login/logo.png" mode="widthFix"></image>
		<view class="loginTitle">欢迎登录价值前沿平台</view>
		<view class="btn oneClickLogin relative" @click="isBindPhone?clickOneClickLogin():''">
			授权手机号一键登录
			<button v-if="!isBindPhone" class="absolute" open-type="getPhoneNumber" @getphonenumber="getPhoneNumData"></button>
		</view>
		<view class="btn codeLogin" @click="clickCodeLogin()">使用短信验证登录</view>
		<view class="agreeProtocolC fixed flexCenter">
			<view class="agreeC" @click="clickAgree()">
				<image v-if="isAgree" class="icon" src="/static/icon/login/select_s.png" mode="widthFix"></image>
				<image v-else class="icon" src="/static/icon/login/select.png" mode="widthFix"></image>
			</view>
			阅读并同意我们的<text class="protocol" @click="clickProtocol(2)">《用户服务协议》</text>和<text class="protocol"@click="clickProtocol(3)">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { loginByWx, wxBindPhone } from '@/request/api';

	export default {
		data() {
			return {
				contentTop:'',
				isAgree:false,
				isBindPhone:true,		//是否绑定过手机号
			}
		},
		onLoad() {
			this.contentTop = inject('navHeight')+230/750*inject('windowWidth')
			this.getIsBindPhoneData()
		},
		methods: {
			/**
			 * 获取手机号
			 * @param {Object} e
			 */
			getPhoneNumData(e)
			{
				console.log(e)
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider:'weixin',
						success(res) {
							console.log(res.code)
							let param = {code:res.code,isJson:1}
							loginByWx(param).then(res=>{
								if(res.code==200)
								{
									let token = res.data.token
									uni.setStorageSync('token',token)
									let param = {code:e.detail.code}
									wxBindPhone(param).then(res=>{
										if (res.code==200) {
											uni.showToast({
												title:res.message,
											})
											setTimeout(function() {
												uni.switchTab({
													url:'/pages/index/index'
												})
											}, 1000);
										}else
											uni.showToast({
												title:res.message,
												icon:'none'
											})
									}).catch(error=>{
										
									})
								}else 
									uni.showToast({
										title:res.message,
										icon:"none"
									})
							}).catch(error=>{
								
							})
						},
						fail() {
							
						}
					})
				}
			},
			/**
			 * 点击一键登录
			 */
			clickOneClickLogin()
			{
				if(!this.isAgree)
				{
					uni.showToast({
						title:'请阅读并同意我们的《用户服务协议》和《隐私政策》',
						icon:'none'
					})
					return
				}
				uni.login({
					provider:'weixin',
					success(res) {
						console.log(res.code)
						let param = {code:res.code,isJson:1}
						loginByWx(param).then(res=>{
							if(res.code==200)
							{
								let token = res.data.token
								uni.setStorageSync('token',token)
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/index/index'
									})
								}, 1000);
							}else 
								uni.showToast({
									title:res.message,
									icon:"none"
								})
						}).catch(error=>{
							
						})
					},
					fail() {
						
					}
				})
			},
			/**
			 * 点击验证码登录
			 */
			clickCodeLogin()
			{
				uni.navigateTo({
					url:'/pages/login/codeLogin/codeLogin'
				})
			},
			/**
			 * 点击同意
			 */
			clickAgree()
			{
				this.isAgree = !this.isAgree
			},
			/**
			 * 点击查看协议
			 */
			clickProtocol(type)
			{
				uni.navigateTo({
					url:'/pages/mine/web/web?type='+type
				})
			},
			/**
			 * 获取是否绑定过手机号
			 */
			getIsBindPhoneData()
			{
				let that = this
				uni.login({
					provider:'weixin',
					success(res) {
						console.log(res.code)
						let param = {code:res.code,isJson:1}
						loginByWx(param).then(res=>{
							if(res.code==200)
							{
								that.isBindPhone = res.data.user.phone?true:false
							}else 
								uni.showToast({
									title:res.message,
									icon:"none"
								})
						}).catch(error=>{
							
						})
					},
					fail() {
						
					}
				})
			}
		}
	}
</script>

<style lang="less">
.logo 
{
	margin-left: calc((100% - 144rpx)/2);
	width: 144rpx;
	height: auto;
}
.loginTitle 
{
	margin: 40rpx 80rpx 0;
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
}
.btn 
{
	margin: 0 75rpx;
	line-height: 80rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 500;
	text-align: center;
}
.btn.oneClickLogin
{
	background-color: #F97316;
	margin-top: 60rpx;
	color: white;
	button 
	{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.btn.codeLogin 
{
	background-color: #FFF1E8;
	margin-top: 28rpx;
	color: #F97316;
}
.agreeProtocolC
{
	left: 0;
	right: 0;
	bottom: calc(120rpx + env(safe-area-inset-bottom));
	font-size: 26rpx;
	font-weight: 500;
	.agreeC 
	{
		padding: 14rpx;
		.icon 
		{
			display: block;
			width: 28rpx;
			height: auto;
		}
	}
	.protocol 
	{
		color: #F97316;
	}
}
</style>