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" open-type="getPhoneNumber" @getphonenumber="toLogin" v-if="checkTrueState">手机号一键登录</button>
			<button class="u-button full" @click="toLoginCheck" v-else>手机号授权登录</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="$dialog.navTo('/pages/web/web?lk=service')">用户协议、</text><text @click="$dialog.navTo('/pages/web/web?lk=privacy')">隐私协议</text>
		</view>
		
	</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:""
		}
	},
	onLoad({store,type,url}) {
		app = this;
		app.reType = type?type:"switchTab";
		app.reUri = url?url:null;
		uni.login({
			force:true,
			success(res){
				app.loginCode = res.code;
			}
		})
		// app.storeId = app.$dialog.shopId();
	},
	methods: {
		reback(){
			uni.navigateBack();
		},
		checkTrue(){
			app.checkTrueState = !app.checkTrueState;
		},
		toLoginCheck(){
			if (!app.checkTrueState) {
				return app.$dialog.showSuccess("请先阅读并同意用户协议以及隐私政策");
			}
		},
		toLogin(e){
			var detail = e.detail;
			detail.login = app.loginCode;
			Api.login(detail).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				uni.setStorageSync("user_token", res.data.access_token)
				uni.navigateBack();
			})
		},
	}
}
</script>

<style>
.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.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>