sugarpark-mini-program/pages/login/login.vue

<template>
	<view class="container">
		<video :src="`${assetsUrl}login_bg${parseInt(Math.random()*6)+1}.mp4`" class="l-video" autoplay loop :controls="false" muted object-fit="cover" :enable-progress-gesture="false">
			<image class="lv-logo" :src="`${assetsUrl}login-sugar.png`"></image>
			
		</video>
		<view class="lv-box flex-center">
			<image class="lv-wechat" :src="`${assetsUrl}login-ph.png`" @click="toPhoneLogin"></image>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="bindGetPhoneNumber">
				<image class="lv-phone" :src="`${assetsUrl}login-we.png`" ></image>
			</button>
		</view>
		<view class="lv-pro font22">
			登录即代表您已阅读并同意<text @click="toUserService">《用户服务协议》</text> 和 <text @click="toPrivate">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assetsUrl:this.$util.assetsUrl
			}
		},
		mounted() {
		},
		methods: {
			toPhoneLogin(){
				uni.navigateTo({
					url:'/pages/login/loginByPhone'
				})
			},
			
			bindGetPhoneNumber(e){
				console.log(e.detail);
				uni.showLoading({
					mask:true,
					title:'正在登录'
				})
				uni.login({//免密登录
					success:(res)=>{
						this.$api.login.wxLogin({
							scene: "WxMPLogin",
							miniProgramEncryUserInfoParam:{
								jsCode:res.code
							}
						}).then(result=>{
							if(result.status==='Succ'){
								if(result.data.wxLoginInfo){//新用户保存用户openid,unionId
									uni.setStorageSync('openId',result.data.wxLoginInfo.openId);
									uni.setStorageSync('unionId',result.data.wxLoginInfo.unionId);
								}
								if(e.detail.errMsg==='getPhoneNumber:ok'){
									let appConfig=uni.getAccountInfoSync();
									let deviceConfig=uni.getSystemInfoSync();
									this.$api.login.wxLogin({
										scene: "WxMPLogin",
										miniProgramEncryUserInfoParam:{
										    encryptedData:e.detail.encryptedData,
											iv:e.detail.iv,
											code:e.detail.code,
											deviceCode:deviceConfig.deviceId,
											pkgCate:"JyPark",
											platform:"WechatMP",
											appVersion:appConfig.miniProgram.version||'1.0.0',
										},
										wxLoginInfo:{
											openId:uni.getStorageSync('openId')||null,
											unionId:uni.getStorageSync('unionId')||null
										},
										androidMarket:'WechatMP',
										model:deviceConfig.model
									}).then(res=>{
										if(res.data.frozen){
											uni.showToast({
												icon:"none",
												title:res.data.msg
											});
										}
										else if(res.data.succ){
											uni.setStorageSync('LL_Ukn',res.data.userToken.ukn);
											uni.setStorageSync('token',res.data.userToken.token);
											uni.setStorageSync('userInfo',JSON.stringify(res.data));
											uni.setStorageSync('user',JSON.stringify(res.data.userToken.user));
											uni.setStorageSync('isLogin','yes');
											this.$api.public.aliossCdn({}).then(cdnRes=>{
												this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
												this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
												uni.setStorageSync('imageCdn',cdnRes.data.pictureCdn);
												uni.setStorageSync('videoCdn',cdnRes.data.videoCdn);
											});
											if(res.data.isNew){
												uni.navigateTo({
													url:'/pages/info/sex'
												})
												return;
											}
											//全局分享
											uni.onAppRoute(()=>{
												const pages=getCurrentPages();
												let page=pages[pages.length-1];
												if(page.route!=='pages/friends/user'){
													let inviteCode=JSON.parse(uni.getStorageSync('userInfo')).inviteCode
													page.onShareAppMessage=()=>{
														return{
															title:'我在糖果公园等你哟~',
															page:`pages/friends/friends?inviteCode=${inviteCode}`,
															imageUrl:'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com/wechat-mini-pro/app-share.png'
														}
													}
												}
												
											})
											this.getMineDetail(res.data.regStepNew);
											
											
										}
										else{
											uni.showToast({
												title:res.data.msg,icon:'none'
											})
										}
										uni.hideLoading();
									}).catch(err=>{
										uni.hideLoading();
										console.log(err);
									})
								}else{
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										mask:true,
										title:'授权拒绝，请重试'
									})
								}
							}
							
							
						})
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon:'none',
							mask:true,
							title:'授权拒绝，请重试'
						})
					}
				});
				
			},
			getMineDetail(regStepNew){
				let step=uni.getStorageSync('regStep')||regStepNew;
				switch(step){
					case 'Sex':
						uni.navigateTo({
							url:'/pages/info/sex'
						})
					break;
					case 'SocialImage':
						uni.navigateTo({
							url:'/pages/info/figure'
						})
					break;
					case 'SocialData':
						uni.navigateTo({
							url:'/pages/info/datum'
						})
					break;
					case 'CityStay':
						uni.navigateTo({
							url:'/pages/info/city'
						})
					break;
					case 'WxInfo':
						uni.navigateTo({
							url:'/pages/info/wechat'
						})
					break;
					case 'Basic':
					case 'Index':
						let user=JSON.parse(uni.getStorageSync('user'));
						this.$api.public.mineDetail({
							getAlbum:true,
							completeUser:user
						}).then(res=>{
							this.$store.commit('setUserInfo',res.data);
							uni.setStorageSync('userInfo',JSON.stringify(res.data));//正式环境删除
							uni.setStorageSync('autoLogin','true');//正式环境删除
							
						})
						uni.switchTab({
							url:'/pages/friends/friends'
						})
					break;
				}
				
			},
			toUserService(){
				uni.navigateTo({
					url:`/pages/webview/webview?url=${this.$util.protocal.userAgreement}`
				})
			},
			toPrivate(){
				uni.navigateTo({
					url:`/pages/webview/webview?url=${this.$util.protocal.privacy}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	
	.l-video{
		width: 100vw;
		height: 100vh;
		position: relative;
		z-index: 1;
		.lv-logo{
			position: absolute;
			z-index: 10;
			top: 256rpx;
			left: 58rpx;
			width: 372rpx;
			height: 120rpx;
		}
		
		
		
	}
	.lv-box{
		position: absolute;
		bottom: 232rpx;
		width: 100%;
		z-index: 99999;
		.lv-wechat{
			width: 96rpx;
			height: 96rpx;
		}
		.btn{
			width: 486rpx;
			height: 96rpx;
			position: relative;
			margin-left: 50rpx;
			margin: 0;
			padding: 0;
			margin-left: 30rpx;
				.lv-phone{
					width: 486rpx;
					height: 96rpx;
				}
			
		}
		
	}
	.lv-pro{
		color: #ffffff;
		position: absolute;
		z-index: 10;
		bottom: 160rpx;
		height: 25rpx;
		line-height: 25rpx;
		width: 100%;
		text-align: center;
	}
	
}
</style>