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

<!-- 微信公众号首次登录绑定手机号-->
<template>
	<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>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import AuthUtil from '@/sheep/api/member/auth';

	const smsLoginRef = ref(null);

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



	// 数据
	const state = reactive({
		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.smsLogin(state.model);
		if (code === 0) {
			closeAuthModal();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../index.scss';

	.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>