美文网首页
bi站学习即时聊天：前端篇（2）

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

作者: baronY | 来源:发表于2020-05-15 01:32 被阅读0次

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

    一、登陆页面搭建

    • 新建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;
            }
        }

    相关文章

      网友评论

          本文标题：bi站学习即时聊天：前端篇（2）

          本文链接：https://www.haomeiwen.com/subject/kvzfohtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|bi站学习即时聊天：前端篇（2）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！