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

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

bi站学习即时聊天：前端篇（2）
bi站学习即时聊天：前端篇（1）
bi站学习即时聊天：后端篇（1）
即时聊天_即时推送
即时聊天
webrtc
前端的演化
关于即时聊天
即时聊天demo
Facebook升级直播视频服务拥有巨大营收潜力

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

一、登陆页面搭建

新建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）
今天来把登陆注册页面搞定，开冲！一、登陆页面搭建新建signin页面，在signin页面：效果如图：二、注...
bi站学习即时聊天：前端篇（1）
https://space.bilibili.com/485469670?from=search&seid=477...
bi站学习即时聊天：后端篇（1）
这次用node后端来开发即时聊天，这篇博客将进行前后端的接口对接。一、创建项目创建server文件夹，安装ex...
即时聊天_即时推送
在线测试：http://www.cnblogs.com/romanticcrystal/p/8979869.htm...
即时聊天
六个免费开源的即时通讯软件源代码常见即时通讯：网易IM 、腾讯IM、环信IM、融云IM、leancloud IM...
webrtc
使用WebRTC搭建前端视频聊天室——入门篇使用WebRTC搭建前端视频聊天室——信令篇Android之WebRTC介绍
前端的演化
20200420 今天突然看见一篇关于前端演化：原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收...
关于即时聊天
https://github.com/coderMyy/MYCoreTextLabel 图文混排 , 实现图片文...
即时聊天demo
界面是仿照qq聊天界面做的 1.添加好友 2.同意好友请求 3.好友数据列表 4.删除好友 5.好友实时聊天 6....
Facebook升级直播视频服务拥有巨大营收潜力
直播视频的即时参与感可为品牌提供同样的广告效应，可接触到更多用户。 BI中文站 4月7日报道世界最大社交网络Fac...