更新记录

1.1.0(2024-03-29)

更新配置

1.0.0(2023-06-04)

初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
<template>
    <view class="login">
        <view class="title">
            微光后台
        </view>
        <view class="input-item">
            <view class="input-label">
                <view class="line"></view>
                账户
            </view>
            <input class="popup-content-input" v-model="account" placeholder="请输入账户" />
        </view>
        <view class="input-item">
            <view class="input-label">
                <view class="line"></view>密码
            </view>
            <input class="popup-content-input" type="password" v-model="password" placeholder="请输入账户密码" />
        </view>
        <move-verify :style="{ marginTop: '40rpx'} " @vertify='vertifyResult'></move-verify>
        <view class="common-button" @click="handleValidate">
            登录
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                account: '', //账号
                password: "", //验证码
                vertify: false,
            };
        },
        methods: {
            /**
             * 登录
             */
            async handleValidate() {
                let errorMsg
                if (!this.account) errorMsg = '请输入账户'
                else if (!this.password) errorMsg = '请输入账户密码'
                else if (!this.vertify) errorMsg = '请拖动滑块验证'
                if (errorMsg) {
                    uni.showToast({
                        title: errorMsg,
                        icon: 'none'
                    })
                    return
                }
                console.log('-登录-')
            },
            /**
             * 滑动验证
             */
            vertifyResult(vertify) {
                this.vertify = vertify
            },
        }
    }
</script>
<style lang="scss">
    page {
        background: #fff;
    }

    .login {
        .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);

            .input-label {
                font-size: 28rpx;
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;

                .line {
                    background: #2979ff;
                    width: 6rpx;
                    height: 24rpx;
                    border-radius: 4rpx;
                    margin-right: 12rpx;
                }
            }

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

        .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>

当前登录页使用了

参数 类型 默认值 描述
vertify Function '' Obtain drag verification results

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问