museum-H5-V2/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>
                    <u--input placeholder="请输入手机号" clearable type="number" border="none" v-model="tel"
                        style="width: 320rpx;"></u--input>
                </template>
                <template #l2>
                    <div class="box-left">
                        验证码
                    </div>
                </template>
                <template #r2>
                    <div class="box-right">
                        <u--input placeholder="请输入验证码" border="none" v-model="code">
                            <template #suffix>
                                <u-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="x秒重新获取"
                                    endText="重新获取"></u-code>
                                <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
                            </template>
                        </u--input>
                    </div>
                </template>
            </card>
            <u-button type="primary" text="登录" shape="circle" color="#000" style="width:436rpx ;"
                @click="goCheck"></u-button>
        </div>

    </div>
</template>

<script>
import card from '@/components/card/index.vue'
export default {
    components: {
        card
    },
    data() {
        return {
            tips: '',
            tel: null,
            code: null,
            uCodeRef: null
        }
    },
    methods: {
        codeChange(text) {
            console.log(text)
            this.tips = text;
        },
        getCode() {
            if (this.$refs.uCodeRef.canGetCode) {
                uni.showLoading({
                    title: '正在获取验证码',
                });
                this.$request.sendCode({ telNum: this.tel }).then((res) => {
                    console.log(res)
                    if (res.status === 0) {
                        uni.hideLoading();
                        uni.$u.toast('验证码已发送');
                        this.$refs.uCodeRef.start();
                    } else {
                        uni.hideLoading();
                        uni.$u.toast(res.msg);
                    }
                })
            }
        },
        goCheck() {
            this.$request.login({
                telNum: this.tel,
                code: this.code
            }).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>