bi站学习即时聊天：前端篇（2）

今天来把登陆注册页面搞定，开冲！

一、登陆页面搭建

  • 新建signin页面，在signin页面：
<template>
    <view class="content">
        <!-- 顶栏 -->
        <view class="top-bar">
            <view class="top-bar-right"><view class="text">注册</view></view>
        </view>
        <!-- 图标 -->
        <view class="logo"><image src="../../static/images/index/logo.png" class="logo-image"></image></view>
        <!-- 登陆 -->
        <view class="main">
            <view class="title">登陆</view>
            <view class="slogan">您好，欢迎来到 小哈职友！</view>
            <view class="inputs">
                <input class="input" type="text" placeholder="用户名/邮箱" placeholder-style="color:#aaa;font-weight:400;" />
                <input class="input" type="text" placeholder="密码" placeholder-style="color:#aaa;font-weight:400;" password="true" />
            </view>
        </view>
        <!-- 登陆按钮 -->
        <view class="submit">登陆</view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {}
};
</script>

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    box-sizing: border-box;
    background: $uni-bg-color;
    // box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
    margin-top: 16rpx;
    .top-bar-right {
        float: right;
        margin-bottom: 30rpx;
        .text {
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 510;
            color: rgba(51, 51, 51, 1);
            line-height: 88rpx;
            padding-right: 56rpx;
        }
    }
}
.logo {
    padding-top: 100rpx;
    .logo-image {
        width: 300rpx;
        height: 300rpx;
    }
}
.main {
    width: 100%;
    padding-left: 62rpx;
    .title {
        font-size: 56rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(39, 40, 50, 1);
        line-height: 80rpx;
    }
    .slogan {
        font-size: 40rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(39, 40, 50, 0.5);
        line-height: 56rpx;
    }
    .inputs {
        padding-top: 48rpx;
        padding-bottom: 120rpx;
        .input {
            height: 88rpx;
            width: 628rpx;
            font-size: $uni-font-size-lg;
            font-weight: 500;
            color: $uni-text-color;
            line-height: 88rpx;
            border-bottom: 1rpx solid $uni-border-color;
        }
    }
}
.submit {
    margin: 0 auto;
    width: 520rpx;
    height: 96rpx;
    background: rgba(255, 228, 49, 1);
    box-shadow:0px 25px 16px -18px rgba(255,228,49,0.4);
    border-radius:48rpx;
    font-size: $uni-font-size-lg;
    font-weight: 520;
    color: rgba(39, 40, 50, 1);
    line-height: 96rpx;
    text-align: center;
}
</style>

效果如图：


小哈.png

二、注册页面创建

  • 新建页面register,register.vue中：
<template>
    <view class="content">
        <!-- 顶栏 -->
        <view class="top-bar">
            <view class="top-bar-left"><image class="back" src="../../static/images/register/back.png"></image></view>
            <view class="top-bar-right"><image class="close" src="../../static/images/register/close.png"></image></view>
        </view>
        <!-- 图标 -->
        <view class="logo"><image src="../../static/images/index/logo.png" class="logo-image"></image></view>
        <!-- 登陆 -->
        <view class="main">
            <view class="title">注册</view>
            <view class="inputs">
                <view class="inputs-div">
                    <input class="input" type="text" placeholder="请取个名字" placeholder-style="color:#aaa;font-weight:400;" @blur="isname" 
                    v-model="name"/>
                    <view class="employ" v-show="employ">已占用</view>
                    <image src="../../static/images/register/right.png" class="ok" v-show="isuser"></image>
                </view>
                <view class="inputs-div">
                    <input class="input" type="text" placeholder="在这里输入邮箱" placeholder-style="color:#aaa;font-weight:400;" @blur="ismail" v-model="email" />
                    <view class="employ" v-show="employ">已占用</view>
                    <view class="invalid" v-show="invalid">邮箱无效</view>
                    <image src="../../static/images/register/right.png" class="ok" v-show="isemail"></image>
                </view>
                <view class="inputs-div">
                    <input class="input" :type="type" placeholder="设置密码" placeholder-style="color:#aaa;font-weight:400;" />
                    <view class="employ" v-show="employ">已占用</view>
                    <image :src="showurl" class="show" @tap="showon"></image>
                </view>
            </view>
        </view>
        <!-- 登陆按钮 -->
        <view class="submit">注册</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            type: 'password',
            isuser: 0, //用户名是否占用
            isemail: 0, //邮箱是否占位
            show: false, // 是否显示密码
            invalid: false, // 邮箱是否符合
            employ: false, //是否被占用
            showurl: '../../static/images/register/showin.png',
            email: '',
            name: ''
        };
    },
    methods: {
        //密码是否显隐
        showon: function() {
            if (this.show) {
                this.type = 'password';
                this.show = !this.show;
                this.showurl = '../../static/images/register/showin.png';
            } else {
                this.type = 'text';
                this.show = !this.show;
                this.showurl = '../../static/images/register/showon.png';
            }
        },
        //判断邮箱
        ismail: function() {
            var strRegex = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if (this.email.length > 0) {
                if (!strRegex.test(this.email)) {
                    this.invalid = true;
                    this.isemail = false;
                } else {
                    this.invalid = false;
                    this.isemail = true;
                }
            }
        },
        isname: function() {
            if (this.name.length > 0) {
                this.isuser = true;
            } else {
                this.isuser = false;
            }
        }
    }
};
</script>

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    box-sizing: border-box;
    background: $uni-bg-color;
    // box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
    margin-top: 16rpx;
    .top-bar-left {
        float: left;
        padding-left: 24rpx;
        padding-top: 20rpx;
        .back {
            width: 48rpx;
            height: 48rpx;
        }
    }
    .top-bar-right {
        float: right;
        margin-bottom: 30rpx;
        padding-right: 24rpx;
        padding-top: 20rpx;
        .close {
            width: 48rpx;
            height: 48rpx;
        }
    }
}
.logo {
    padding-top: 100rpx;
    .logo-image {
        width: 300rpx;
        height: 300rpx;
    }
}
.main {
    padding: 54rpx $uni-spacing-row-lg 120rpx;
    .title {
        font-size: 56rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(39, 40, 50, 1);
        line-height: 80rpx;
    }
    .inputs {
        padding-top: 48rpx;
        .input {
            font-size: $uni-font-size-lg;
            font-weight: 500;
            color: $uni-text-color;
            line-height: 88rpx;
            border-bottom: 1rpx solid $uni-border-color;
            width: 636rpx;
            z-index: 1;
        }
        .inputs-div {
            position: relative;
            padding: 20rpx;
        }
        .employ,
        .invalid {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            float: right;
            font-size: $uni-font-size-base;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 93, 91, 1);
            line-height: 40rpx;
            padding-left: 10rpx;
        }
        .show {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            width: 42rpx;
            height: 32rpx;
        }
        .ok {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 42rpx;
            height: 32rpx;
        }
    }
}
.submit {
    margin: 0 auto;
    width: 520rpx;
    height: 96rpx;
    background: rgba(39, 40, 50, 0.2);
    box-shadow: 0px 25px 16px -18px rgba(39, 40, 50, 0.2);
    border-radius: 48rpx;
    font-size: $uni-font-size-lg;
    font-weight: 520;
    color: rgba(255, 255, 255, 1);
    line-height: 96rpx;
    text-align: center;
    &:active {
        background-color: rgba(255, 228, 49, 1);
    }
}
</style>

效果如图


image.png

三、登陆注册之间的数据交互和页面跳转

  • 注册登陆路由跳转：
    举例一个方法，以此类推：
goLogin: function() {
            uni.navigateTo({
                url: '../signin/signin'
            });
  • 获取登陆数据内容
    通过v-model来获取数据，就不代码演示了
  • 设置登陆按钮函数
        onlogin() {
            if (this.user && this.password) {
                console.log('提交');
            } else {
                this.login = true;
            }
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。