lxwx_front/pages/login/login.vue

<template>
	<view class="login">
		<!-- <view class="title">
			登录
		</view> -->
		<view class="toptitle">
			留学万象
		</view>
		<view class="contentForm">
			<!-- #ifdef APP-NVUE || APP-PLUS -->
			<view class="wx" @click="appwxLogin">
				<image src="/static/wxIcon.png" mode="widthFix"></image>
				<!-- <button type="primary" class="wxText">微信登录</button> -->
				<view class="wxText">
					微信登录
				</view>
			</view>
			<!-- #endif -->
			<view class="phone" @click="mobileNumLogin">
				手机号登录/注册
			</view>
		</view>
		<view class="check">
			<u-checkbox-group @change="changeHandle" v-model="checked">
				<u-checkbox :name="1" size="22" activeColor="#0076F6" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<!-- <checkbox @change="changeHandle" value="checked" :checked="checked" color="#0076F6"/> -->
			<view class="info">
				登录即同意<text class="line" @click="goRichtext(1)">用户协议</text>和<text class="line" @click="goRichtext(2)">隐私政策</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {wxapplogin} from '@/common/api.js'
	export default {
		data() {
			return {
				isShowWeixin: true,
				checked:[]
			};
		},
		methods:{
			changeHandle(val){
				console.log(val)
			},
			mobileNumLogin(){
				if(this.checked.length==0){
					uni.$u.toast('请先勾选同意用户协议和隐私政策')
				}else{
					uni.navigateTo({
						url:'/pages/register/register'
					})
				}
			},
			goRichtext(ids){
				uni.navigateTo({
					url:'/pages/my/richText?id='+ids
				})
			},
			appwxLogin(){
				var that = this
				if(this.checked.length==0){
					uni.$u.toast('请先勾选同意用户协议和隐私政策')
				}else{
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log('-------获取openid(unionid)-----');
							console.log(loginRes);
							const params={
								access_token: loginRes.authResult.access_token,
								openid: loginRes.authResult.openid,
								event:'login'
							}
							console.log(params)
							wxapplogin(params,{}).then(res=>{
								console.log(res)
								that.$store.commit('login',res.userinfo)
								uni.setStorageSync('source','phone')
								uni.reLaunch({
									url:'/pages/my/my'
								})
							})
						}
					});
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.login{
	height:calc(100vh);
	background-color: #FFFFFF;
	.title{
		font-size: 36upx;
		font-weight: bold;
		color: #222222;
		padding:25upx;
		// margin-top: 1%;
	}
	.toptitle{
		font-size: 80upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0076F6;
		text-align: center;
		padding-top: 16%;
	}
	.contentForm{
		margin-top:13%;
		.wx{
			width:85%;
			margin:0 auto;
			background: #0076F6;
			border-radius: 50upx;
			padding:30upx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			&>image{
				width:44upx;
				height:auto
			}
			&>.wxText{
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-left:20upx;
				padding:0;
			}
		}
		.phone{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			width:85%;
			margin:0 auto;
			text-align: center;
			border-radius: 50upx;
			padding:30upx 0;
			border: 1px solid #CCCCCC;
			margin-top:30upx;
		}
		
	}
	.check{
		display: flex;
		width: 85%;
		margin: 65upx auto 20upx auto;
		align-items: center;
		/deep/.uni-checkbox-input{
			border-radius:50%;
		}
		.info{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left:26upx;
			letter-spacing: 2upx;
			.line{
				color:#0076F6
			}
		}
	}
}
</style>