SxsnWechat/components/pages/loginRegister/index.vue

<template>
	<view class="login-register" v-if="userStore.showLoginModal">
		<view class="lr-box" v-if="!userStore.isRegister">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/c79318ee-e219-4f01-9dfb-91d7180a0972.png" class="lr-box-topbg" mode="widthFix"></image>
			<view class="lr-box-top adfacjb">
				<image class="lr-box-top-left" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/64d76db1-be28-4ba2-a8f0-57e2408beebc.png"></image>
				<image class="lr-box-top-right" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/c3c4fa76-32d2-4d11-915d-5e655c6b5c72.png" @click="close"></image>
			</view>
			<view class="lr-box-title">
				<p class="p">欢迎来到善行少年</p>
				<p class="p tip">首次登录需要简单填写信息即可进入</p>
			</view>
			<view class="lr-box-form">
				<view class="lr-box-form-item adfacjb">
					<view class="lr-box-form-item-left adfac">
						<view class="text" style="margin-right: 32rpx;"><span style="color: #F4657A;">*</span>手机号码</view>
						<up-input v-model="register.phone" border="none" placeholder="请输入手机号码"></up-input>
					</view>
					<view class="lr-box-form-item-right">
						<button class="yjsq" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" privacy-desc="用于获取您的手机号码，方便您快速注册。">一键授权</button>
					</view>
				</view>
				<view class="lr-box-form-item adfacjb">
					<view class="lr-box-form-item-left adfac">
						<view class="text"><span style="color: #F4657A;">*</span>头像</view>
						<!-- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a2944f51-2c7b-41e7-8206-8a3be1f76d11.png" v-if="!register.avatarPath"></image>
						<image :src="register.avatarPath"></image> -->
						<up-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							:maxCount="1"
							width="120rpx"
							height="120rpx"
						>
							<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a2944f51-2c7b-41e7-8206-8a3be1f76d11.png" 
							mode="widthFix" style="width: 120rpx;height: 120rpx;"></image>
						</up-upload>
					</view>
					<view class="lr-box-form-item-right">
						<button class="yjsq" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">设置</button>
					</view>
				</view>
				<view class="lr-box-form-item adfacjb">
					<view class="lr-box-form-item-left">
						<view class="text"><span style="color: #F4657A;">*</span>用户名</view>
					</view>
					<view class="lr-box-form-item-right">
						<up-input v-model="register.nickName" border="none" inputAlign="right" placeholder="请输入真实姓名"></up-input>
					</view>
				</view>
				<view class="lr-box-form-item adfacjb">
					<view class="lr-box-form-item-left">
						<view class="text">家庭公益名称</view>
					</view>
					<view class="lr-box-form-item-right">
						<up-input v-model="register.welfareName" border="none" inputAlign="right" placeholder="请输入至少三个字"></up-input>
					</view>
				</view>
				<view class="lr-box-form-item adfacjb">
					<view class="lr-box-form-item-left">
						<view class="text">家庭公益口号</view>
					</view>
					<view class="lr-box-form-item-right">
						<up-input v-model="register.welfareSlogan" border="none" inputAlign="right" placeholder="家庭公益口号"></up-input>
					</view>
				</view>
			</view>
			<view class="lr-box-btns">
				<view class="btn" @click="toRegister">立即注册</view>
				<view class="btn login" @click="readLogin">已有账号，去登录</view>
			</view>
		</view>
		<view class="lr-box login" v-else>
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/c79318ee-e219-4f01-9dfb-91d7180a0972.png" class="lr-box-topbg" mode="widthFix"></image>
			<view class="lr-box-top login adfacjb">
				<image class="lr-box-top-left login" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/d0f892c8-1f96-4c86-b62b-a8b027b4bf6e.png"></image>
				<image class="lr-box-top-right" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/c3c4fa76-32d2-4d11-915d-5e655c6b5c72.png" @click="close"></image>
			</view>
			<view class="lr-box-memo">公益献爱心 真情暖人心！</view>
			<view class="lr-box-agree adfac">
				<image v-if="agree" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/87b5b244-d14f-43cd-991b-4ac9f48d909e.png" @click="changeAgree"></image>
				<image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b8a5cabd-57f8-4ad7-9677-f6372423c50a.png" @click="changeAgree"></image>
				<view class="text">我已阅读并同意<span>《善行少年小程序隐私政策》</span>及<span>《善行少年服务协议》</span></view>
			</view>
			<view class="lr-box-login">
				<button class="phone-login" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumberLogin" privacy-desc="用于获取您的手机号码，方便您进行登录。">手机号登录</button>
			</view>
		</view>
	</view>
</template>

<script setup name="">
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	import { useUserStore } from '@/common/stores/user.js';
	const userStore = useUserStore();
	
	const register = ref({
		phone:null,
		avatarPath:null,
		nickName:null,
		welfareName:null,
		welfareSlogan:null,
	})
	const agree = ref(false)
	const fileList = ref([])
	
	const close = () => {
		userStore.closeLoginModal();
	}
	
	const decryptPhoneNumber = e => {
		if(e.detail.code) getPhone(e.detail.code);
	}
	
	const onChooseAvatar = e => {
		register.value.avatarPath = e.detail.avatarUrl;
	}
	
	const getPhone = code => {
		proxy.$api.get(`/wx/getPhone/${code}`).then(({data:res})=>{
			if(res.code !== 0) return proxy.$showToast(res.msg)
			register.value.phone = res.data;
		})
	}
	
	const toRegister = () => {
		if(!proxy.$reg.mobile(register.value.phone)) return proxy.$showToast('请输入正确的手机号码')
		if(!register.value.avatarPath) return proxy.$showToast('请设置头像')
		if(!register.value.nickName) return proxy.$showToast('请输入真实姓名')
		
		userStore.register(register.value);
	}
	
	const readLogin = () => {
		userStore.isRegister = true;
	}
	
	const changeAgree = () => {
		agree.value = !agree.value;
	}
	
	const afterRead = e => {
		
	}
	const deletePic = event => {
		fileList.value.splice(event.index, 1);
		register.value.avatarPath = '';
	}
	
	const decryptPhoneNumberLogin = e => {
		if(e.detail.code) toPhoneLogin(e.detail.code);
	}
	
	const toPhoneLogin = code => {
		if(!agree.value) return proxy.$showToast('请勾选隐私政策和服务协议')
		wx.login({
			success(res){
				userStore.login({code:res.code,phoneCode:code});
			}
		})
	}
</script>

<style scoped lang="scss">
	.login-register{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .4);
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.lr-box{
			background: #F7F7F7;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 58rpx 30rpx 68rpx;
			position: relative;
			&.login{
				padding: 32rpx 40rpx 88rpx;
			}
			&-topbg{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			&-top{
				position: relative;
				padding: 0 10rpx 0 34rpx;
				&.login{
					padding: 0;
				}
				&-left{
					width: 158rpx;
					height: 88rpx;
					&.login{
						width: 224rpx;
						height: 48rpx;
					}
				}
				&-right{
					width: 28rpx;
					height: 28rpx;
				}
			}
			&-title{
				position: relative;
				margin-top: 18rpx;
				padding-left: 34rpx;
				.p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 44rpx;
					color: #151B29;
					line-height: 62rpx;
					&.tip{
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(21,27,41,0.61);
						line-height: 37rpx;
						margin-top: 10rpx;
					}
				}
			}
			&-form{
				position: relative;
				margin-top: 10rpx;
				&-item{
					height: 120rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 1rpx solid #E0E1E4;
					padding: 0 30rpx;
					margin-top: 20rpx;
					&-left{
						width: 370rpx;
						.text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #151B29;
							line-height: 42rpx;
						}
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-left: 28rpx;
						}
					}
					&-right{
						width: calc(100% - 370rpx);
						padding-left: 20rpx;
						box-sizing: border-box;
						.yjsq{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #0593FE;
							line-height: 40rpx;
							background-color: transparent;
							text-align: right;
							padding: 0;
							&::after{
								width: auto;
								border: none;
							}
						}
					}
				}
			}
			&-btns{
				margin-top: 20rpx;
				padding: 0 10rpx;
				overflow: hidden;
				.btn{
					width: 100%;
					height: 90rpx;
					background: #B7F358;
					border-radius: 45rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 90rpx;
					text-align: center;
					letter-spacing: 2rpx;
					margin-top: 20rpx;
					&.login{
						background: #ECEEF5;	
					}
				}
			}
			&-memo{
				position: relative;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #151B29;
				line-height: 36rpx;
				letter-spacing: 4rpx;
				margin-top: 41rpx;
			}
			&-agree{
				position: relative;
				margin-top: 95rpx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				.text{
					width: calc(100% - 48rpx);
					padding-left: 19rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #151B29;
					line-height: 36rpx;
					label{
						color: #E77687;
					}
				}
			}
			&-login{
				margin-top: 122rpx;
				.phone-login{
					width: 100%;
					height: 90rpx;
					background: #B7F358;
					border-radius: 45rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 90rpx;
					text-align: center;
					letter-spacing: 2rpx;
					&::after{
						border: none;
					}
				}
			}
		}
	}
</style>