new-zx-front-app/sheep/components/s-auth-modal/components/sms-login.vue

<!-- 短信登录 - smsLogin  -->
<template>
	<view>

		<!-- 表单项 -->
		<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
			labelAlign="center" class="loginUniForm">
			<uni-forms-item name="username" label="用户名" class="loginUniFormItem" :error-message="state.usernameErrorMsg">
				<uni-easyinput placeholder="请输入用户名" v-model="state.model.username" :inputBorder="false" :clearable="false" @blur="verifyUsername">
				<template v-slot:right>
					<view v-if="state.verifyUsername" class="icon"><image style :src="sheep.$url.static('/static/images/shibai.png')" /></view>
					<view v-else class="icon"> <image :src="sheep.$url.static('/static/images/chenggong.png')" /></view>
				</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号" class="mobile loginUniFormItem ss-p-t-10" :error-message="state.mobileErrorMsg">
				<phoneInternationalInput :verify-username="!state.verifyUsername" @input="mobileInput"/>
			</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 forgot-btn" @tap="showAuthModal('resetPassword')">
		  忘记密码
		</button> -->
			<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit"> 登录 </button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile,
		username
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import AuthUtil from '@/sheep/api/member/auth';
	import phoneInternationalInput from './phone-international-input.vue';
	const mobileInput = (mobile,mobileError)=>{
		// console.log(mobile,mobileError);
		state.model.mobile = mobile;
		state.mobileErrorMsg = mobileError;
	}
	const smsLoginRef = ref(null);

	const emits = defineEmits(['onConfirm']);

	const props = defineProps({
		agreeStatus: {
			type: Boolean,
			default: false,
		},
	});

	// 数据
	const state = reactive({
		verifyUsername: true ,
		usernameErrorMsg:'',
		isMobileEnd: false, // 手机号输入完毕
		codeText: '获取验证码',
		mobileErrorMsg:'',
		model: {
			username:'',
			mobile: '', // 手机号
			code: '', // 验证码
		},
		rules: {
			username,
			code,
			mobile,
		},
	});
	let lastUsername = ref('')
	async function verifyUsername(e){
		const username = e.detail.value;
		if(username == '' || username == lastUsername.value){
			// 为空或者没改东西，不调校验
			return false;
		}
		lastUsername.value = username
		// 提交数据
		const { data } = await AuthUtil.verifyUsername(username);
		// false就是已经有这个用户名，可以登录，true是没有，不可以登录
		if(data){
			state.usernameErrorMsg = '请输入正确的用户名!'
			state.verifyUsername = data
		}else {
			state.usernameErrorMsg = ''
			state.verifyUsername = data
		}
	}
	// 短信登录
	async function smsLoginSubmit() {
		// 看缓存中有没有linkId 如果有的话 加入model传给后台 即为绑定
		const linkId = uni.getStorageSync("linkId")
		if (linkId) {
			state.model.linkId = linkId
		}
		// 参数校验
		const validate = await unref(smsLoginRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		if (!props.agreeStatus) {
			emits('onConfirm', true)
			//onConfirm(true)
			sheep.$helper.toast('请勾选同意');
			return;
		}

		// 提交数据
		const {
			code
		} = await AuthUtil.smsLogin(state.model);
		if (code === 0) {
			closeAuthModal();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../index.scss';
	.disabled{
		border: 1px solid #f7f7f7 !important;
	}
	.code-btn-start {
		color: #55b774;
		border: 1px solid #55b774;
	}
	
	.icon{
		display:flex;
		align-items: center;
		margin-right:7rpx
	}
	.icon image{
		width:35rpx;
		height:35rpx;
	}



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

	.login-btn-start {
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
	}

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

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

	.loginUniFormItem:last-child {
		border-bottom: none;
		padding-top: 10rpx;
	}

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

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