star-uni/components/login/halfScreen.vue

<template>
	<view>
		<uni-popup ref="loginPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="login-popup">
				<view class="login-title">
					<view class="login-logo">
						<view class="logo"><image src="/static/rank/avatar.jpeg" mode="widthFix"></image></view>
						<view class="name">蓝微Star</view>
					</view>
					<view class="login-close" @click="closeLogin"><text class="cuIcon-close"></text></view>
				</view>
				<view class="login-desc">为了更好的为您提供服务，本次操作需要您关联手机号码</view>
				<view class="login-footer">
					<view :class="checkTrueState?'checkBox active':'checkBox'" @click="checkTrue">
						<text class="cuIcon-check"></text>
					</view>
					<view @click="checkTrue">我已阅读并同意</view>
					<text @click="toWeb('privacy')">用户协议、</text><text @click="toWeb('privacy')">隐私协议</text>
				</view>
				<view class="logi-btn">
					<button class="u-button full" @click="getUserInfo" v-if="checkTrueState">快捷一键登录</button>
					<button class="u-button full" @click="toLoginCheck" v-else>快捷登录</button>
					<button class="u-button" @click="closeLogin">暂不登录</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checkTrueState:false
		}
	},
	methods: {
		closeLogin(){
			uni.showTabBar()
			this.$refs.loginPop.close()
		},
		checkTrue(){
			this.checkTrueState = !this.checkTrueState;
		},
		toWeb(type){
			
		},
		toLoginCheck(){
			if (!this.checkTrueState) {
				uni.showToast({
					title: "请先阅读同意用户协议",
					icon:"none"
				})
				return ;
			}
		},
		getUserInfo(){
			
		},
		open() {
			uni.hideTabBar();
			this.$nextTick(()=>{
				this.$refs.loginPop.open()
			})
		}
	}
}
</script>

<style>
.login-popup{padding: 20rpx;min-height: 30vh;}
.login-popup .login-title{display: flex;align-items: center;justify-content: space-between;}
.login-popup .login-title .login-logo{display: flex;align-items: center;gap: 15rpx;}
.login-popup .login-title .login-logo image{width: 50rpx;height: 50rpx;border-radius: 100%;}
.login-popup .login-title .name{font-weight: bold;font-family: "bluevBold";color: #000;font-size: 28rpx;}
.login-desc{line-height: 2;color: #666;font-size: 24rpx;margin: 20rpx 0;text-align: center;}

.login-footer{font-size: 28rpx;color: #666;height: 20%;display: flex;align-items: center;justify-content: center;}
.login-footer text{color: #85DFFE;}
.checkBox{width: 36upx;height: 36upx;margin-right: 20upx;border: 2upx solid #85DFFE;position: relative;border-radius: 36upx;display: flex;align-items: center;justify-content: center;}
.checkBox text{display: block;color: #fff;}
.checkBox.active{background-color: #85DFFE;}
.checkBox.active text{color: #fff;}

.logi-btn{width: 60%;margin: 20upx auto;height: 40%;}
.logi-btn .u-button{font-size: 28upx;height: 80upx;border-radius: 40upx;line-height: 80upx;margin-top: 40upx;color: #333;border: 2upx solid rgba(33, 34, 38, 1);background-color: #fff;}
.logi-btn .u-button::after{border: 0;}
.logi-btn .u-button.full{background-color: rgba(33, 34, 38, 1);color: #fff;}
</style>