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;
            }
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,558评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,002评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,024评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,144评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,255评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,295评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,068评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,478评论 1赞 305
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,649评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,267评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2赞 351