直播短视频源码如何编写uni-app登录功能界面

用户登录直播平台源码最基础也是最重要的功能，只有通过登陆以后，系统才能对用户信息进行区分，保证用户的账号安全，而且用户通过登陆以后，可以享受直播短视频源码全部的功能，应有完整的用户体验。接下来，我们就以一起看一下，一个简单的直播短视频源码登录功能是如何实现的。

一、html代码搭建功能框架

实现直播短视频源码登陆页面的第一步，就是搭建一个页面框架，以下是实现代码：

<template>
<view class="content" :style="'background-image: url(/upload/static/login/bg_login.png);height:'+this.windowHeight+'px'" >
<view>
<text>注册登录后体检更多精彩</text>
</view>
<view>
<view>+86<input type="number" v-bind:value="mobile" placeholder="请输入您的手机号" @input="mobile_input"  /></view>
<view><input type="password" v-bind:value="pwd"  placeholder="请输入密码" @input="pwd_input" /></view>
</view>
<button type="default" @click="logo">立即登录</button>
<view>
<view><navigator url="../login/register">立即注册</navigator></view>
<view><navigator url="../login/forget">忘记密码</navigator></view>
</view>
<view>登录即代表《隐私政策》和《服务协议》</view>
</view>
</template>

二、css样式进行页面美化

页面框架完成后，要在这个基础上对页面进行美化，页面风格要和直播短视频源码的系统风格一致。

<style>
.content{
width: 100vw;
background-position: center;
}
.content .text-area{
width: 100%;
padding-top: 4rem;
padding-bottom: 2rem;
text-align: center;
}
.content .text-area .title{
color: #FFFFFF;
letter-spacing:8upx;
font-size: 1.5rem;
}
.content .login_in{
width: 100%;
}
.content .login_in .phone{
width: 70%;
padding: 0 5%;
height: 2.6rem;
line-height: 2.6rem;
background-color: rgb(255 255 255 / 55%);
border-radius: 2rem;
position: relative;
margin: 0 auto;
color: #EEEEEE;
font-size: 1rem;
}
.content .login_in .phone>input{
position: absolute;
top: 11.5%;
left: 4rem;
height: 2rem;
line-height: 2rem;
}
.uni-input-placeholder{
color: #EEEEEE;
}
.content .login_in .pwd{
width: 70%;
padding: 0 5%;
height: 2.6rem;
line-height: 2.6rem;
background-color: rgb(255 255 255 / 55%);
border-radius: 2rem;
margin: 0 auto;
color: #EEEEEE;
font-size: 1rem;
margin-top: 1rem;
}
.content .login_in .pwd>input{
position: relative;
top: 11.5%;
height: 2rem;
line-height: 2rem;
}
.content .logon{
width: 80%;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 2rem;
background-color: #FA5A3A;
color: #fff;
margin-top: 1.5rem;
}
.content .operation{
width: 80%;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 2rem;
font-size: 0.8rem;
color: #EEEEEE;
margin: 0 auto;
position: relative;
}
.content .operation .reg{
width: 50%;
float: left;
}
.content .operation .forget{
width: 50%;
text-align: right;
float: right;
}
.content .treaty{
width:100%;
position: absolute;
bottom:5%;
font-size: 0.8rem;
color: #EEEEEE;
text-align: center
}
</style>

三、js实现登录功能

最后，就是通过js来完成用户登录的逻辑，实现直播短视频源码的用户登录。

<script>
export default {
data() {
return {
mobile:'',
pwd:'',
windowHeight:0,
}
},
onLoad() {   //获取页面高度
this.windowHeight=uni.getSystemInfoSync().windowHeight;
},
methods: {
mobile_input(e){
//手机号
this.mobile=e.detail.value;
},
pwd_input(e){
//手机号
this.pwd=e.detail.value;
},
logo(e){
// 登入
if(this.mobile==''){
uni.showToast({
title: '请输入您的手机号',
icon:'none',
duration: 2000
});
return 1;
}
if(this.pwd==''){
uni.showToast({
title: '请输入密码',
icon:'none',
duration: 2000
});
return 1;
}
uni.request({
url: '请求域名',
method: 'GET',
data: {
country_code:'86',
user_login:this.mobile,
user_pass:this.pwd
},
success: res => {
//登入后主要逻辑处理
},
fail: (data) => {
console.log(data);
},
complete: () => {}
});
}
}
}
</script>

就是这样，我们就实现了简单的用户登录的功能，这段代码来自直播短视频源码的代码，如果需要使用的话，可能会需要修改部分逻辑才能正常运行，有兴趣的朋友也可以关注我，和我进行交流。

声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com