bi站學(xué)習(xí)即時聊天：前端篇（2）

今天來把登陸注冊頁面搞定，開沖谷丸！

一堡掏、登陸頁面搭建

  • 新建signin頁面应结，在signin頁面：
<template>
    <view class="content">
        <!-- 頂欄 -->
        <view class="top-bar">
            <view class="top-bar-right"><view class="text">注冊</view></view>
        </view>
        <!-- 圖標(biāo) -->
        <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

二鹅龄、注冊頁面創(chuàng)建

  • 新建頁面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>
        <!-- 圖標(biāo) -->
        <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="設(shè)置密碼" 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

三揩慕、登陸注冊之間的數(shù)據(jù)交互和頁面跳轉(zhuǎn)

  • 注冊登陸路由跳轉(zhuǎn)：
    舉例一個方法，以此類推：
goLogin: function() {
            uni.navigateTo({
                url: '../signin/signin'
            });
  • 獲取登陸數(shù)據(jù)內(nèi)容
    通過v-model來獲取數(shù)據(jù)扮休，就不代碼演示了
  • 設(shè)置登陸按鈕函數(shù)
        onlogin() {
            if (this.user && this.password) {
                console.log('提交');
            } else {
                this.login = true;
            }
        }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子展融，更是在濱河造成了極大的恐慌供鸠，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件八堡，死亡現(xiàn)場離奇詭異樟凄，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)兄渺，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門缝龄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人挂谍，你說我怎么就攤上這事叔壤。” “怎么了口叙？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵炼绘，是天一觀的道長。 經(jīng)常有香客問我妄田，道長饭望，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任形庭，我火速辦了婚禮铅辞，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘萨醒。我一直安慰自己斟珊，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著囤踩，像睡著了一般旨椒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上堵漱，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天综慎，我揣著相機(jī)與錄音，去河邊找鬼勤庐。 笑死示惊，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的愉镰。 我是一名探鬼主播米罚，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼丈探！你這毒婦竟也來了录择？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤碗降，失蹤者是張志新（化名）和其女友劉穎隘竭，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讼渊，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡动看，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了精偿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弧圆。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖笔咽，靈堂內(nèi)的尸體忽然破棺而出搔预，到底是詐尸還是另有隱情，我是刑警寧澤叶组，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布拯田，位于F島的核電站，受9級特大地震影響甩十，放射性物質(zhì)發(fā)生泄漏船庇。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一侣监、第九天 我趴在偏房一處隱蔽的房頂上張望鸭轮。 院中可真熱鬧，春花似錦橄霉、人聲如沸窃爷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽按厘。三九已至医吊，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間逮京，已是汗流浹背卿堂。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留懒棉，地道東北人草描。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像漓藕，于是被迫代替她去往敵國和親陶珠。 傳聞我的和親對象是個殘疾皇子挟裂，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2贊 345