更新记录

1.11.0（2025-01-06） 下载此版本

优化效果

1.10.0（2025-01-06） 下载此版本

优化效果

1.9.0（2024-03-29） 下载此版本

更新配置

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

支持扫码体验-见右侧二维码 组件Id：CY1，组件详细接入请看接入指南

<template>
    <view class="login">
        <view class="title"> 微光后台 </view>
        <view class="input-item">
            <uni-section title="邮箱" type="line"></uni-section>
            <view class="email-input">
                <input class="popup-content-input" v-model="email" placeholder="请输入手机号" />
                <view class="send" @click="handleSend">{{
          time ? time + "s" : "发送验证码"
        }}</view>
            </view>
        </view>
        <view class="input-item">
            <uni-section title="验证码" type="line"></uni-section>
            <input class="popup-content-input" :maxlength="capacity" v-model="code" placeholder="请输入邮箱验证码" />
        </view>
        <view class="common-button" @click="handleValidate"> 登录 </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                _id: "", //发送成功验证码标识
                email: "15327@qq.com", //需发送验证码的目标邮箱
                code: "", //验证码
                capacity: 6, //验证码位数（1-8位），默认：6位
                time: 0,
            };
        },
        methods: {
            /**
             * 发送验证码
             */
            async handleSend() {
                const reg =
                    /^\w[-\w.+]*@([A-Za-z0-9]+[-A-Za-z0-9]*\.){1,}[A-Za-z0-9]{2,}$/;
                if (!reg.test(this.email)) {
                    uni.showToast({
                        title: "请输入正确的邮箱",
                        icon: "none",
                    });
                    return;
                }
                if (this.time == 0) {
                    this.time = 4;
                    const t = setInterval(() => {
                        this.time = this.time - 1;
                        if (this.time == 0) clearInterval(t);
                    }, 1000);
                    const emailValidateCode = uniCloud.importObject("email-validate-code");
                    const result = await emailValidateCode.sendEmailCode({
                        capacity: this.capacity, //验证码位数（1-8位），默认：6位
                        validMinute: 5, //邮箱验证码有效期
                        serviceType: "qq", // 邮箱类别
                        email: this.email, // 发送验证码的目标邮箱
                        subject: "注册验证码", // 邮箱标题
                        text: "感谢您注册,注册码是#code#", // 邮箱内容
                    });
                    console.log(result);
                    if (result.success) {
                        this._id = result.id;
                        this.code = result.code;
                    }
                    uni.showToast({
                        icon: "none",
                        title: result.message,
                    });
                } else return;
            },
            /**
             * 登录
             */
            async handleValidate() {
                if (!this.email || !this.code) {
                    uni.showToast({
                        title: this.email ? "请输入邮箱验证码" : "请输入的邮箱",
                        icon: "none",
                    });
                    return;
                }
                const emailValidateCode = uniCloud.importObject("email-validate-code");
                const result = await emailValidateCode.validateEmailCode({
                    _id: this._id, // 邮箱发送成功的唯一id
                    email: this.email, // 验证发送邮箱
                    code: this.code,
                });
                console.log(result);
                if (result.success) {
                    uni.showToast({
                        icon: 'none',
                        title: '验证成功'
                    })
                } else
                    uni.showToast({
                        icon: "none",
                        title: result.message,
                    });
            },
        },
    };
</script>
<style lang="scss">
    .login {
        background: #fff;
        position: fixed;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;

        .title {
            font-size: 44rpx;
            font-weight: 500;
            text-align: center;
            margin: 240rpx auto 0;
        }

        .input-item {
            width: 700rpx;
            margin: 10rpx auto;
            padding: 0 0 20rpx 0;
            border-bottom: 1px solid rgba(52, 52, 52, 0.2);

            .popup-content-input {
                flex: 1;
            }

            .email-input {
                display: flex;

                .send {
                    width: 160rpx;
                    text-align: center;
                    padding: 8rpx;
                    border-radius: 4rpx;
                    background: linear-gradient(to right, #feef3c, #f3cd34);
                }
            }
        }

        .common-button {
            width: 680rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            border-radius: 10rpx;
            margin: 50rpx auto;
            background: linear-gradient(to right, #feef3c, #f3cd34);
        }
    }
</style>