museum-H5/pages/login/index.vue

<template>
    <div class="main">
        <image src="@/static/33@2x.png" mode="aspectFill" class="img" />
        <div class="loginInfo">
            <card>
                <template #l1>
                    <div class="box-left">
                        手机号(+86)
                    </div>
                </template>
                <template #r1>
                    <up-input placeholder="请输入手机号" clearable type="number" border="none" v-model="tel"></up-input>
                </template>
                <template #l2>
                    <div class="box-left">
                        验证码
                    </div>
                </template>
                <template #r2>
                    <div class="box-right">
                        <up-input placeholder="请输入验证码" border="none" v-model="code">
                            <template #suffix>
                                <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="60秒重新获取"
                                    endText="重新获取"></up-code>
                                <up-button @tap="getCode" :text="tips" type="success" size="mini"></up-button>
                            </template>
                        </up-input>
                    </div>
                </template>
            </card>
            <up-button type="primary" text="登录" shape="circle" color="#000" style="width:436rpx ;"
                @click="goCheck"></up-button>
        </div>

    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import card from '@/components/card/index.vue'
const currentInstance = getCurrentInstance();
const { $request } =
    currentInstance.appContext.config.globalProperties;
const tips = ref('');
const tel = ref(null)
const code = ref(null)
const uCodeRef = ref(null);
const codeChange = (text) => {
    console.log(text)
    tips.value = text;
};
const getCode = () => {
    if (uCodeRef.value.canGetCode) {
        uni.showLoading({
            title: '正在获取验证码',
        });
        $request.sendCode({ telNum: tel.value }).then((res) => {
            console.log(res)
            if (res.status === 0) {
                uni.hideLoading();
                uni.$u.toast('验证码已发送');
                uCodeRef.value.start();
            } else {
                uni.hideLoading();
                uCodeRef.value.start();
                uni.$u.toast(res.msg);
            }
        })
    }
};
const goCheck = () => {
    $request.login({
        telNum: tel.value,
        code: code.value
    }).then((res) => {
        if (res.status === 0) {
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("nickName", res.data.accountInfo.nickName);
            uni.navigateTo({
                url: '/pages/check/index'
            })
        } else {
            uni.$u.toast(res.msg);
        }
    })

}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('@/static/bg.png');
    background-size: cover;

    .img {
        width: 100%;
        height: 1000rpx;
    }

    .loginInfo {
        height: 100%;
        padding: 42rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .box-left {
            font-size: 28rpx;
        }
    }
}
</style>