mall-front-app/pages/index/login.vue

<!-- 微信公众号的登录回调页 -->
<template>
	<!-- 空登陆页 -->
	<view />
	<su-popup :show="state.isPopup" round="10" :showClose="false" @close="closeAuthModal">
		<view>
			<view class="head-box ">
				<view class="ss-flex ss-m-b-20">
					<view class="isActive head-title">
						您首次登录，请输入手机号验证
					</view>
				</view>
			</view>
			<!-- 表单项 -->
			<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
				labelAlign="center" class="loginUniForm">
				<uni-forms-item name="mobile" label="手机号" class="loginUniFormItem">
					<uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile" :inputBorder="false" type="number">
						<template v-slot:right>
							<button class="ss-reset-button code-btn code-btn-start" :disabled="state.isMobileEnd"
								:class="{ 'code-btn-end': state.isMobileEnd }"
								@tap="getSmsCode('smsLogin', state.model.mobile)">
								{{ getSmsTimer('smsLogin') }}
							</button>
						</template>
					</uni-easyinput>
				</uni-forms-item>
		
				<uni-forms-item name="code" label="验证码" class="loginUniFormItem">
					<uni-easyinput placeholder="请输入验证码" v-model="state.model.code" :inputBorder="false" type="number"
						maxlength="4">
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
				<button class="ss-reset-button login-btn-start" @tap="OfficialEnterLogin"> 继续登录 </button>
			</view>
		</view>
	</su-popup>
</template>
<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showAuthModal,
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import {
		code,
		mobile
	} from '@/sheep/validate/form';
	import AuthUtil from '@/sheep/api/member/auth';
	const smsLoginRef = ref(null);
	// 数据
	const state = reactive({
		isPopup:true,
		isMobileEnd: false, // 手机号输入完毕
		codeText: '获取验证码',
		model: {
			mobile: '', // 手机号
			code: '', // 验证码
		},
		rules: {
			code,
			mobile,
		},
	});
	
	// 短信登录
	async function OfficialEnterLogin() {
		// 参数校验
		const validate = await unref(smsLoginRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		// 提交数据
		const {
			code
		} = await AuthUtil.OfficialEnterLogin(state.model);
		if (code === 0) {
			closeAuthModal();
			// 检测 H5 登录回调
			let returnUrl = uni.getStorageSync('returnUrl');
			if (returnUrl) {
				uni.removeStorage('returnUrl');
				location.replace(returnUrl);
			} else {
				uni.switchTab({
					url: '/',
				});
			}
		}
	}
	onLoad(async (options) => {
		// #ifdef H5
		// 将 search 参数赋值到 options 中，方便下面解析
		new URLSearchParams(location.search).forEach((value, key) => {
			options[key] = value;
		});
		const event = options.event;
		const code = options.code;
		const state = options.state;
		if (event === 'login') { // 场景一：登录
			const res = await sheep.$platform.useProvider().login(code, state)
			if(!res){
				state.isPopup = true
				return false
			}
		} else if (event === 'bind') { // 场景二：绑定
			sheep.$platform.useProvider().bind(code, state);
		}

		// 检测 H5 登录回调
		let returnUrl = uni.getStorageSync('returnUrl');
		if (returnUrl) {
			uni.removeStorage('returnUrl');
			location.replace(returnUrl);
		} else {
			uni.switchTab({
				url: '/',
			});
		}
		// #endif
	});
</script>

<style lang="scss" scoped>
	.shake {
		animation: shake 0.05s linear 4 alternate;
	}
	
	@keyframes shake {
		from {
			transform: translateX(-10rpx);
		}
	
		to {
			transform: translateX(10rpx);
		}
	}
	
	.register-box {
		position: relative;
		justify-content: center;
	
		.register-btn {
			color: #999999;
			font-size: 30rpx;
			font-weight: 500;
		}
	
		.register-title {
			color: #999999;
			font-size: 30rpx;
			font-weight: 400;
			margin-right: 24rpx;
		}
	
		.or-title {
			margin: 0 16rpx;
			color: #999999;
			font-size: 30rpx;
			font-weight: 400;
		}
	
		.login-btn {
			color: var(--ui-BG-Main);
			font-size: 30rpx;
			font-weight: 500;
		}
	
		.circle {
			position: absolute;
			right: 0rpx;
			top: 18rpx;
			width: 8rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: var(--ui-BG-Main);
		}
	}
	
	.safe-box {
		height: calc(constant(safe-area-inset-bottom) / 5 * 3);
		height: calc(env(safe-area-inset-bottom) / 5 * 3);
	}
	
	.tcp-text {
		color: var(--ui-BG-Main);
	}
	
	.agreement-text {
		color: $dark-9;
	}
	
	.wx-login-btn {
		width: 100%;
		border: 1rpx solid #55b774;
		border-radius: 10rpx;
		padding: 10rpx 0;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin: 0 0 0.625rem 0;
		box-sizing: border-box;
	
		text {
			margin-left: 20rpx
		}
	}
	
	.agreement-box {
		margin: 40rpx;
	}
	@keyframes title-animation {
	  0% {
	    font-size: 32rpx;
	  }
	  100% {
	    font-size: 36rpx;
	  }
	}
	
	.login-wrap {
	  padding: 50rpx 34rpx;
	  min-height: 500rpx;
	  background-color: #fff;
	  border-radius: 20rpx 20rpx 0 0;
	}
	
	.head-box {
	  .head-title {
	    min-width: 160rpx;
	    font-size: 36rpx;
	    font-weight: bold;
	    color: #333333;
	    line-height: 36rpx;
	  }
	  .head-title-active {
	    width: 160rpx;
	    font-size: 32rpx;
	    font-weight: 600;
	    color: #999;
	    line-height: 36rpx;
	  }
	  .head-title-animation {
	    animation-name: title-animation;
	    animation-duration: 0.1s;
	    animation-timing-function: ease-out;
	    animation-fill-mode: forwards;
	  }
	  .head-title-line {
	    position: relative;
	    &::before {
	      content: '';
	      width: 1rpx;
	      height: 34rpx;
	      background-color: #e4e7ed;
	      position: absolute;
	      left: -30rpx;
	      top: 50%;
	      transform: translateY(-50%);
	    }
	  }
	  .head-subtitle {
	    font-size: 26rpx;
	    font-weight: 400;
	    color: #afb6c0;
	    text-align: left;
	    display: flex;
	  }
	}
	
	// .code-btn[disabled] {
	// 	background-color: #fff;
	// }
	.code-btn-start {
	  width: 160rpx;
	  height: 56rpx;
	  line-height: normal;
	  border: 2rpx solid var(--ui-BG-Main);
	  border-radius: 28rpx;
	  font-size: 26rpx;
	  font-weight: 400;
	  color: var(--ui-BG-Main);
	  opacity: 1;
	}
	
	.forgot-btn {
	  width: 160rpx;
	  line-height: 56rpx;
	  font-size: 30rpx;
	  font-weight: 500;
	  color: #999;
	}
	
	.login-btn-start {
	  width: 158rpx;
	  height: 56rpx;
	  line-height: normal;
	  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	  border-radius: 28rpx;
	  font-size: 26rpx;
	  font-weight: 500;
	  color: #fff;
	}
	
	.type-btn {
	  padding: 20rpx;
	  margin: 40rpx auto;
	  width: 200rpx;
	  font-size: 30rpx;
	  font-weight: 500;
	  color: #999999;
	}
	
	.auto-login-box {
	  width: 100%;
	  .auto-login-btn {
	    width: 68rpx;
	    height: 68rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	  }
	  .auto-login-img {
	    width: 68rpx;
	    height: 68rpx;
	    border-radius: 50%;
	  }
	}
	
	.agreement-box {
	  margin: 80rpx auto 0;
	  .protocol-check {
	    transform: scale(0.7);
	  }
	  .agreement-text {
	    font-size: 26rpx;
	    font-weight: 500;
	    color: #999999;
	    .tcp-text {
	      color: var(--ui-BG-Main);
	    }
	  }
	}
	
	// 修改密码
	.editPwd-btn-box {
	  .save-btn {
	    width: 690rpx;
	    line-height: 70rpx;
	    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	    border-radius: 35rpx;
	    font-size: 28rpx;
	    font-weight: 500;
	    color: #ffffff;
	  }
	  .forgot-btn {
	    width: 690rpx;
	    line-height: 70rpx;
	    font-size: 28rpx;
	    font-weight: 500;
	    color: #999999;
	  }
	}
	

	.code-btn-start {
		color: #55b774;
		border: 1px solid #55b774;
	}



	.agreement-box {
		margin: 20rpx 0;
	}

	.login-btn-start {
		background: rgb(14, 147, 46);
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
	}

	.loginUniForm {
		border: 1rpx solid #d6d6d6;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
	}

	.loginUniFormItem:first-child {
		border-bottom: 1rpx solid #d6d6d6;
		padding-bottom: 10rpx;
	}

	.loginUniFormItem:last-child {
		// border-bottom: 1rpx solid #d6d6d6;
		padding-top: 10rpx;
	}

	::v-deep .loginUniFormItem .uni-forms-item__inner {
		padding-bottom: 0;
	}

	::v-deep .loginUniFormItem .uni-error-message {
		bottom: -20rpx;
	}
	
</style>