jiaoyi-uni2/奥莱优品/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/logo.jpg" mode="widthFix"></image></view>
						<view class="name">奥莱优品</view>
					</view>
					<view class="login-close" @click="closeLogin"><text class="cuIcon-close"></text></view>
				</view>
				<view class="login-desc" v-if="loginType==1">为了更好的为您提供服务，本次操作需要您关联手机号码</view>
				<view class="login-desc" v-else>为了更好的区分完善信息,还需授权获取到您的头像、昵称信息</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" v-if="loginType==1">
					<button class="u-button full" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberData" v-if="checkTrueState">快捷一键登录</button>
					<button class="u-button full" @click="toLoginCheck" v-else>快捷登录</button>
					<button class="u-button" @click="closeLogin">暂不登录</button>
				</view>
				<view class="logi-btn" v-else>
					<button class="u-button full" open-type="getUserInfo" @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>
import { show } from '@/utils/js/index.js';
export default {
	data() {
		return {
			checkTrueState:false,
			loginType:1
		}
	},
	methods: {
		closeLogin(){
			uni.showTabBar()
			this.$nextTick(()=>{
				this.$refs.loginPop.close()
			})
		},
		checkTrue(){
			this.checkTrueState = !this.checkTrueState;
		},
		toWeb(type){
			uni.navigateTo({
				url:"/pages/web/web?type="+type
			})
		},
		toLoginCheck(){
			if (!this.checkTrueState) {
				uni.showToast({
					title: "请先阅读同意用户协议",
					icon:"none"
				})
				return ;
			}
		},
		getUserInfo(e){
			uni.getUserProfile({
				force: true,
				success: async (resp)=> {
					if (resp.errMsg == 'getUserProfile:ok') {
						var detail = {};
						detail.avatar = resp.userInfo.avatarUrl
						detail.nickname = resp.userInfo.nickName
						var aresp = await this.$api.auth.nick.post(detail);
						if (aresp.code !== 1) {
							return show(aresp.msg);
						}
						uni.showTabBar()
						this.$nextTick(()=>{
							this.$refs.loginPop.close()
						})
						this.$emit('success',null);
					}
				},
				fail(e) {
					console.log(e)
				}
			})
		},
		getPhoneNumberData(event){
			uni.login({
				success: async (resp)=> {
					if (event.detail.errNo) {
						return uni.showToast({
							title: "请重试一次",
							icon:"none"
						})
					}
					var detail = event.detail
					detail.login = resp.code;
					var aresp = await this.$api.auth.mobile.post(detail);
					if (aresp.code !== 1) {
						return show(aresp.msg);
					}
					uni.setStorageSync("user_token", aresp.data.access_token)
					uni.showTabBar()
					this.$nextTick(()=>{
						this.$refs.loginPop.close()
					})
					this.$emit('success',aresp.data.access_token);
				}
			})
		},
		open(type = 1) {
			uni.hideTabBar();
			this.loginType = type;
			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: #ff5a25;}
.checkBox{width: 36upx;height: 36upx;margin-right: 20upx;border: 2upx solid #ff5a25;position: relative;border-radius: 36upx;display: flex;align-items: center;justify-content: center;}
.checkBox text{display: block;color: #fff;}
.checkBox.active{background-color: #ff5a25;}
.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>