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

<template>
	<view class="flex flex-col mb-5">
		<cl-text :size="18" :pt="{ className: 'font-bold' }">{{ t("您好，欢迎登录！") }}</cl-text>
		<cl-text :pt="{ className: 'mt-2' }" color="info">{{
			t("首次登录将自动为您完成注册")
		}}</cl-text>
	</view>

	<view class="flex flex-col">
		<view class="mb-3 flex flex-row">
			<cl-input
				v-model="loginModel.username"
				prefix-icon="device-fill"
				:placeholder="t('请输入手机号')"
				:border="false"
				:pt="{
					className: parseClass([
						'!h-[45px] flex-1 !rounded-xl !px-4',
						[isDark, '!bg-surface-70', '!bg-white']
					]),
					prefixIcon: {
						className: 'mr-1'
					}
				}"
			></cl-input>
		</view>

		<view class="relative flex flex-row items-center mb-5">
			<cl-input
				v-model="loginModel.password"
				:clearable="false"
				type="number"
				prefix-icon="shield-check-fill"
				:border="false"
				:pt="{
					className: parseClass([
						'!h-[45px] flex-1 !rounded-xl !px-4',
						[isDark, '!bg-surface-70', '!bg-white']
					]),
					prefixIcon: {
						className: 'mr-1'
					}
				}"
			>
			</cl-input>
		</view>

		<cl-button
			:loading="loading"
			:disabled="disabled"
			@tap="toLogin"
		>
			{{ t("登录") }}
		</cl-button>
	</view>
</template>

<script setup lang="ts">
import { computed, inject,reactive, ref, type PropType } from "vue";
import type { LoginForm } from "../../types";
import SmsBtn from "../sms-btn.uvue";
import { isDark, parseClass, request, useRefs, type Response, t, stringify } from "@/.cool";
import { useUi } from "@/uni_modules/cool-ui";
 type LoginModal = {
	username: string;
	password: string;
	randomStr: number;
	grant_type: string;
	scope: string;
	loginType: number;
};

const props = defineProps({
	form: {
		type: Object as PropType<LoginForm>,
		default: () => ({})
	}
});
const loginModel = reactive<LoginModal>({
	username: 'gg',
	password: '123456',
	randomStr: 0,
	grant_type: 'password',
	scope: 'server',
	loginType: 88
})
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;
const loginData = JSON.parse(JSON.stringify(loginModel)) as UTSJSONObject;
		await request({
		url: `/oauth/token?${stringify(loginData)}`,
		method: 'POST',
		data: loginData
	})
		.then((res) => {
			emit("success", res);
		})
		.catch((err) => {
			ui.showToast({
				message: (err as Response).message!
			});
		});

	loading.value = false;
}
</script>