youxi-app/pages/user/components/phone.uvue

<template>
	<view class="flex flex-col w-[40vw]">
		<view class="mb-3 flex flex-row ">
			<cl-input class="" :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[40vw]' }" v-model="form.username"
				placeholder="请输入手机号"></cl-input>
		</view>

		<view class="relative flex flex-row items-center mb-5">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[40vw]' }" v-model="form.code" :clearable="false"
				type="number">
			</cl-input>
			<view class="absolute right-0">
				<sms-btn :ref="refs.set('smsBtn')" :phone="form.username" @success="showCode = true"></sms-btn>
			</view>
		</view>


	</view>
</template>

<script setup lang="ts">
import { computed, inject, ref, type PropType } from "vue";
import type { LoginForm } from "./types";
import SmsBtn from "./sms-btn.uvue";
import { isDark, parseClass, request, useRefs, type Response, t } from "@/.cool";
import { useUi } from "@/uni_modules/cool-ui";

const props = defineProps({
	form: {
		type: Object as PropType<LoginForm>,
		default: () => ({})
	}
});

const emit = defineEmits(["success"]);

const ui = useUi();
const refs = useRefs();

// 是否同意
const isAgree = inject("isAgree") as () => boolean;

// 是否显示验证码
const showCode = ref(false);

// 是否加载中
const loading = ref(false);

// 是否禁用
const disabled = computed(() => {
	return props.form.phone == "" || props.form.smsCode == "";
});

// 登录
async function toLogin() {
	if (!isAgree()) {
		return;
	}

	const { phone, smsCode } = props.form;

	loading.value = true;

	await request({
		url: "/app/user/login/phone",
		method: "POST",
		data: {
			phone,
			smsCode
		}
	})
		.then((res) => {
			emit("success", res);
		})
		.catch((err) => {
			ui.showToast({
				message: (err as Response).message!
			});
		});

	loading.value = false;
}
</script>