shuhi-app/pages/login/login.vue

<template>
    <view class="login-container">
        <!-- Logo和标题区域 -->
        <view class="logo-section">
            <image class="logo" src="/static/img/logo.png" mode="aspectFit" />
        </view>

        <!-- 表单区域 -->
        <view class="form-section">
            <u--form :model="formData" ref="uForm">
                <u-form-item>
                    <u-input
                        :prefixIconStyle="prefixIconStyle"
                        :placeholder-style="placeholderStyle"
                        :custom-style="customStyle"
                        v-model="formData.username"
                        placeholder="请输入用户名"
                        prefixIcon="account"
                    />
                </u-form-item>

                <u-form-item>
                    <u-input
                        :prefixIconStyle="prefixIconStyle"
                        :placeholder-style="placeholderStyle"
                        :custom-style="customStyle"
                        v-model="formData.password"
                        type="password"
                        placeholder="请输入密码"
                        prefixIcon="lock"
                    />
                </u-form-item>

                <u-form-item>
                    <u-input
                        :prefixIconStyle="prefixIconStyle"
                        :placeholder-style="placeholderStyle"
                        :custom-style="customStyle"
                        v-model="formData.code"
                        placeholder="请输入验证码"
                        prefixIcon="chat"
                    >
                        <template #suffix>
                            <u-button
                                custom-style="width:200rpx"
                                color="#22ac38"
                                size="small"
                                @click="getVerifyCode"
                                :disabled="isCountingDown"
                            >
                                {{ countDownText }}
                            </u-button>
                        </template>
                    </u-input>
                </u-form-item>
            </u--form>

            <u-button
                custom-style="margin-top:5%"
                type="primary"
                block
                @click="handleLogin"
                color="#22ac38"
                shape="circle"
                >登录</u-button
            >
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const prefixIconStyle = "font-size:50rpx";
const placeholderStyle = "font-size:32rpx";
const customStyle = reactive({
    "font-size": "40rpx",
    height: "90rpx",
});

let { proxy } = getCurrentInstance();

const formData = reactive({
    username: "",
    password: "",
    code: "",
});

const uForm = ref(null);

const isCountingDown = ref(false);
const countdown = ref(60);
const countDownText = ref("获取验证码");

const startCountDown = () => {
    isCountingDown.value = true;
    countdown.value = 60;
    countDownText.value = `${countdown.value}秒重发`;

    const timer = setInterval(() => {
        countdown.value--;
        countDownText.value = `${countdown.value}秒重发`;

        if (countdown.value <= 0) {
            clearInterval(timer);
            isCountingDown.value = false;
            countDownText.value = "重新发送";
        }
    }, 1000);
};

const getVerifyCode = () => {
    if (isCountingDown.value) return;
    if (!formData.username) return uni.$u.toast("请输入用户名");
    if (!formData.password) return uni.$u.toast("请输入密码");

    let data = {
        username: formData.username,
        password: formData.password,
    };
    // TODO: 调用发送验证码的API
    uni.showLoading({
        mask: true,
        title: "发送中...",
    });
    uni.$u.http
        .post("/app/appUser/sendMobileCode", data)
        .then((res) => {
            if (res.code == 200) {
                uni.showToast({
                    title: "验证码发送成功,请注意查收",
                    icon: "none",
                });
                startCountDown();
            } else {
                uni.$u.toast(res.msg);
            }
        })
        .finally(() => uni.hideLoading());
};

const handleLogin = () => {
    // 实现登录逻辑
    if (!formData.username) return uni.$u.toast("请输入用户名");
    if (!formData.password) return uni.$u.toast("请输入密码");
    // if (!formData.code) return uni.$u.toast('请输入验证码')

    // TODO: 调用登录API /app/appUser/login
    uni.showLoading({
        mask: true,
        title: "登录中...",
    });
    // /actuator/debug/loginNotCode  ///app/appUser/login
    uni.$u.http
        .post("/app/appUser/login", formData)
        .then((res) => {
            if (res.code == 200) {
                uni.setStorageSync("token", res.data);
                setTimeout(() => {
                    getUserInfo();
                    //获取菜单权限
                    uni.$u.http.get("/app/appUser/getRouters").then((resp) => {
                        if (resp.code == 200) {
                            uni.setStorageSync("menuList", resp.data);

                            uni.$u.toast("登录成功");
                            uni.switchTab({
                                url: "/pages/index/index",
                            });
                            uni.$u.ttsModule.speak("书嗨，不辜负每一个爱书的人");
                        } else {
                            uni.$u.toast(resp.msg);
                        }
                    });
                }, 50);
            } else {
                uni.$u.toast(res.msg);
            }
        })
        .catch((error) => {
            uni.showModal({
                title: "登录失败",
                content: JSON.stringify(error),
                showCancel: false,
            });
        })
        .finally(() => uni.hideLoading());
};

//获取登陆人信息并存储本地 /app/appUser/getUserInfoById
function getUserInfo() {
    uni.$u.http.get("/app/appUser/getUserInfoById").then((res) => {
        if (res.code == 200) {
            uni.setStorageSync("userInfo", res.data);
        }
    });
}

//检测token是否可用
function checkToken() {
    // /app/appUser/checkToken
    uni.showLoading({
        title: "检测登录状态...",
    });
    uni.$u.http
        .get("/app/appUser/checkToken")
        .then((res) => {
            if (res.code == 200) {
                uni.$u.toast("登录成功");
                uni.switchTab({
                    url: "/pages/index/index",
                });
            } else {
                uni.$u.toast("请先登录");
            }
        })
        .finally(() => uni.hideLoading());
}

onLoad(() => {
    let token = uni.getStorageSync("token");
    if (token) {
        checkToken();
    }
});
</script>
<style>
page {
    background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.login-container {
    padding: 5% 60rpx;

    .logo-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo {
        width: 300rpx;
        height: 300rpx;
    }

    .form-section {
        margin-top: 40rpx;
    }
}
</style>