jiaoyi-uni/pages/auth/login.vue

<template>
	<view class="content">
		<view class="login-logo">
			<view class="login-logo-body">
				<image src="/static/image/logo.png"></image>
				<view class="logo-text">奥莱优品</view>
			</view>
		</view>
		<view class="test">
			<textarea v-model="loginInfo" maxlength="-1" style="height: 120upx;"></textarea>
		</view>
		<view class="logi-btn">
			<!-- <button class="u-button full" @click="getUserInfo" v-if="checkTrueState">快捷一键登录</button> -->
			<button class="u-button full" open-type="getPhoneNumber" @getphonenumber="toLogin" v-if="checkTrueState">手机号一键登录</button>
			<button class="u-button full" @click="toLoginCheck" v-else>快捷登录</button>
			<!-- <button class="u-button" @click="popState(1)">展示</button> -->
			<button class="u-button" @click="reback">返回</button>
		</view>
		<view class="login-footer">
			<view :class="checkTrueState?'checkBox active':'checkBox'" @click="checkTrue"></view>
			<view @click="checkTrue">我已阅读并同意</view>
			<text @click="toWeb('privacy')">用户协议、</text><text @click="toWeb('privacy')">隐私协议</text>
		</view>
		
		<uni-popup ref="userpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="user-pop">
				<view class="title">登录提醒</view>
				<view class="pop-body">为了更好的区分完善信息,还需授权获取到您的头像、昵称信息</view>
				<view class="pop-btn">
					<button class="u-button full" open-type="getUserInfo" @click="getUserInfo">授权头像、昵称信息</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as Api from "@/static/api/auth.js";
var app;
export default {
	data() {
		return {
			checkTrueState:false,
			avatar:"https://yunenv.oss-cn-shenzhen.aliyuncs.com/poem/avatar.jpg",
			nickname:"",
			loginShow:false,
			reUri:null,
			reType:"switchTab",
			storeId:"",
			loginCode:"",
			loginInfo:"",
			mobileData:null
		}
	},
	onLoad({store,type,url}) {
		app = this;
		app.reType = type?type:"switchTab";
		app.reUri = url?url:null;
		// app.storeId = app.$dialog.shopId();
		uni.login({
			force:true,
			success(resp){
				app.loginCode = resp.code;
			}
		})
	},
	methods: {
		popState(type){
			if (type == 1) {
				app.$refs.userpopup.open()
			} else {
				app.$refs.userpopup.close()
			}
			return ;
		},
		reback(){
			uni.navigateBack();
		},
		checkTrue(){
			app.checkTrueState = !app.checkTrueState;
		},
		toWeb(type){
			uni.navigateTo({
				url:"/pages/web/web?lk="+type
			})
		},
		toLoginCheck(){
			if (!app.checkTrueState) {
				return app.$dialog.showSuccess("请先阅读并同意用户协议以及隐私政策");
			}
		},
		getUserInfo(e){
			uni.getUserProfile({
				force: true,
				success(resp) {
					if (resp.errMsg == 'getUserProfile:ok') {
						var detail = {};
						detail.avatar = resp.userInfo.avatarUrl
						detail.nickname = resp.userInfo.nickName
						detail.mobile = JSON.stringify(app.mobileData)
						Api.nicknameAuth(detail).then((res)=>{
							if (res.code == 0) {
								return app.$dialog.showSuccess(res.msg);
							}
							app.popState(2)
							uni.setStorageSync("user_token", res.data.access_token)
							uni.navigateBack();
						})
					}
				},
				fail(e) {
					console.log(e)
				}
			})
		},
		toLogin(e){
			var detail = e.detail;
			detail.login = app.loginCode;
			Api.mobileAuth(detail).then((res)=>{
				if (!res.data.mobile) {
					return app.$dialog.showSuccess(res.msg);
				}
				app.mobileData = res.data;
				app.popState(1)
			})
		},
	}
}
</script>

<style>
.user-pop .title{padding: 20upx;border-bottom: 2upx solid #f8f8f8;font-size: 28upx;font-weight: bold;color: #000;}
.user-pop .pop-body{padding: 20upx;font-size: 24upx;color: #555;line-height: 60upx;text-align: center;}
.user-pop .pop-btn{display: flex;align-items: center;margin-top: 20upx;justify-content: end;}
.user-pop .u-button{font-size: 28upx;height: 80upx;border-radius: 40upx;line-height: 80upx;margin-bottom: 40upx;color: #333;border: 2upx solid #007aff;background-color: #fff;padding: 0 40upx;}
.user-pop .u-button::after{border: 0;}
.user-pop .u-button.full{background-color: #007aff;color: #fff;}

.test{width: 80%;overflow: auto;height: 100upx;}
.content{position: relative;height: 100vh;display: flex;flex-direction: column;}
.login-logo{width: 80%;margin: 60upx auto;text-align: center;height: 40%;display: flex;align-items: center;justify-content: center;}
.login-logo .logo-text{font-size: 32upx;color: #333;font-family: "logofont";margin-top: 20upx;}
.login-logo image{width: 180upx;height: 180upx;}
.logi-btn{width: 50%;margin: 20upx auto;height: 40%;}
.logi-btn .u-button{font-size: 28upx;height: 80upx;border-radius: 40upx;line-height: 80upx;margin-bottom: 40upx;color: #333;border: 2upx solid #007aff;background-color: #fff;}
.logi-btn .u-button::after{border: 0;}
.logi-btn .u-button.full{background-color: #007aff;color: #fff;}
.login-footer{text-align: center;font-size: 28upx;color: #666;height: 20%;display: flex;align-items: center;justify-content: center;}
.login-footer text{color: #007aff;}
.checkBox{width: 30upx;height: 30upx;margin-right: 20upx;border: 2upx solid #007aff;position: relative;}
.checkBox.active{background-color: #007aff;}
.checkBox.active::after{content: "√";font-size: 24upx;position: absolute;left: 0;top: 0;color: #fff;bottom: 0;right: 0;}
.popup-login{padding: 20upx;}
.popup-login .login-container{margin-top: 20upx;}
.login-control{display: flex;align-items: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;padding: 20upx 0;}
.login-control .name{margin-right: 40upx;}
.login-control .btn-control{margin-left: 9px;}
.popup-login .mobile-btn{border:2upx solid #fff;background-color: #fff;padding-left: 0;padding-right: 0;font-size: 28upx;color: #999;}
.popup-login .mobile-btn::after{border: 0;}
.avatar-btn-img{width: 80upx;height: 80upx;border-radius: 10upx;}
.popup-login .avatar-btn{width:80upx;height:80upx;line-height:80upx;border-radius:10upx;font-size:24upx;border:0 solid #F6F1E7;background:#fff;padding-left: 0;padding-right: 0;}
.popup-login .avatar-btn::after{border:0}
.popup-login .avatar{margin-left: 9px;}

.popup-login .title-sub{border-bottom: 2upx solid #f8f8f8;font-size: 30upx;color: #000;font-weight: bold;padding: 30upx 0;}
.popup-login .title-sub text{display: block;font-size: 24upx;color: #666;font-weight: normal;margin-top: 20upx;}
.popup-login .title{display: flex;align-items: center;}
.popup-login .title .left{font-size: 28upx;color: #000;font-weight: bold;display: flex;align-items: center;}
.popup-login .title .left image{width: 50upx;height: 50upx;border-radius: 10upx;margin-right: 20upx;}
.popup-login .title .close{margin-left: auto;margin-right: 0;width: 40upx;height: 40upx;background-color: aliceblue;font-size: 24upx;color: #666;border-radius: 40upx;text-align: center;}
</style>