整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁(yè)面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊(cè)'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動(dòng)
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對(duì)定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機(jī)號(hào)</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗(yàn)證碼</label>
<input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊(cè)" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述久沒(méi)有寫(xiě)jquery控制頁(yè)面的代碼了，今天前端沒(méi)有來(lái)，我來(lái)應(yīng)付一下：
先來(lái)看一下HTML登錄的代碼：
<div class="page-box">
<div class="login-container">
<div class="login-ban"></div>
<div class="login-wrapper">
<ul class="login-nav">
<li class="active">密碼登錄</li>
<li>手機(jī)登錄</li>
</ul>
<form class="login-form" action="" method="get">
<!--password type-->
<div class="login-type" id="passwordLogin">
<div class="login-group">
<!--
報(bào)錯(cuò)樣式
1、'login-box'添加class 'page-form-error'
2、'login-input'添加class 'page-input-error'
-->
<div class="login-box page-form-error">
<span class="login-icon-phone"></span>
<input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="請(qǐng)輸入您的手機(jī)號(hào)">
<p class="page-form-tip"></p>
</div>
</div>
<div class="login-group">
<div class="login-box page-form-error">
<span class="login-icon-psd"></span>
<input class="login-input" type="password" name="password" value="" placeholder="請(qǐng)輸入密碼">
</div>
</div>
</div>
<!--/password type-->
<!--phone type-->
<div style="display: none;" class="login-type" id="verifyLogin">
<div class="login-group">
<div class="login-box page-form-error">
<span class="login-icon-phone"></span>
<input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="請(qǐng)輸入您的手機(jī)號(hào)">
</div>
</div>
<div class="login-group">
<div class="login-box page-form-error">
<span class="login-icon-code"></span>
<input class="login-input" type="tel" name="verifyCode" value="" placeholder="請(qǐng)輸入手機(jī)驗(yàn)證碼">
<a class="login-identify-code">獲取驗(yàn)證碼</a>
</div>
</div>
</div>
<!--/phone type-->
<span id="confirmMsg" style="color: red;font-size: 12px;margin-bottom: 5px;"></span>
<a color="violet" id="submitBtn" size="block" class="page-button">立即登錄</a>
</form>
<ul class="login-others-type">
<li><a class="login-others-link" href=""><span class="login-icon-weixin"></span>微信登陸</a></li>
<li><a class="login-others-link" href=""><span class="login-icon-qq"></span>QQ登陸</a></li>
</ul>
<div class="login-footer">
<a class="login-footer-item" href="">忘記密碼？</a>
<a class="login-footer-item blue" href="reg-step-01.html">立即注冊(cè)</a>
</div>
</div>
</div>
</div>
$(".login-nav li").click(function(){
var liText = $(this).text();
$(".login-nav li").removeClass("active");
$(this).addClass("active");
if(liText.indexOf("密碼登錄")>-1){
$("#passwordLogin").show();
$("#verifyLogin").hide();
}
if(liText.indexOf("手機(jī)登錄")>-1){
$("#passwordLogin").hide();
$("#verifyLogin").show();
}
})
//手機(jī)號(hào)校驗(yàn)
$(".login-type input[name='mobile']").blur(function(){
var mobilePhone = $(this).val();
var isPhone = isPhoneNo(mobilePhone);
console.log(isPhone);
if(!isPhone){
console.log("手機(jī)號(hào)校驗(yàn)");
$(this).addClass("page-input-error");
}else{
$(this).removeClass("page-input-error");
}
})
// 驗(yàn)證手機(jī)號(hào)
function isPhoneNo(phone) {
var pattern = /^1[34578]\d{9}$/;
return pattern.test(phone);
}
效果圖
發(fā)送按鈕涉及到到的代碼包括倒計(jì)時(shí)：
天我們做一下設(shè)置頁(yè)面和登錄頁(yè)面的布局，因?yàn)檫@個(gè)系統(tǒng)如果不登錄的話，幾乎是沒(méi)有任何權(quán)限可以操作的。
再說(shuō)明一點(diǎn)：現(xiàn)在的APP普遍要求做到一打開(kāi)后不需要任何操作就能看到界面和基本頁(yè)面，哪怕頁(yè)面是空的，用戶在操作時(shí)再?gòu)棾鎏崾疽卿洸拍芾^續(xù)。說(shuō)這樣的要求是為了用戶體驗(yàn)；
就比如銀行APP這樣要求安全的軟件，也是在打開(kāi)后不需要登錄就可以看到一些東西，等具體操作時(shí)，才會(huì)要求登錄。
如果不這樣做，你把APP設(shè)計(jì)成一打開(kāi)就要求登錄，多半是在應(yīng)用市場(chǎng)和小程序后臺(tái)審核不過(guò)去的。
登錄和設(shè)計(jì)頁(yè)面大概樣式
上面就是“登錄”和“設(shè)置”頁(yè)面的大概布局，以后有需要我們會(huì)隨時(shí)改動(dòng)。為了測(cè)試方便，我在登錄下面做了三個(gè)為了調(diào)試而設(shè)置的快速登錄按鈕，按一下就會(huì)以相應(yīng)身份登錄。
這兩個(gè)頁(yè)面的代碼如下（我盡量把注釋寫(xiě)全）：
登錄頁(yè)面：
<template>
<view><!--每個(gè)uniapp的vue文件都要至少有一個(gè)view-->
<view class="input-box"><!--標(biāo)簽的class屬性控制著它的樣子，在下面的style里定義的-->
<view class="input-item">
<view class="input-label">手機(jī)號(hào)</view>
<view class="input-body">
<input v-model="phone" maxlength="11" type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" class="input">
<button :disabled="!isCanSendCode" class="btn-code">{{sendMsg}}</button>
<!--uniapp中標(biāo)簽屬性前面帶:號(hào)時(shí)，后面引號(hào)里代表是VUE的變量名-->
<!--如果不是標(biāo)簽里想引用VUE變量，要用{{變量名}}來(lái)引用-->
</view>
</view>
<view class="input-item">
<view class="input-label">驗(yàn)證碼</view>
<view class="input-body">
<input v-model="vCode" type="text" style="margin-right: 50upx;" placeholder="請(qǐng)輸入驗(yàn)證碼" maxlength="20" class="input" />
<!--上面這個(gè)v-model是雙向綁定，變量改變時(shí)這里的值變，這里的值變時(shí)，變時(shí)內(nèi)容也會(huì)變-->
</view>
</view>
</view>
<!--如果只有一兩個(gè)標(biāo)簽的樣式需要改變，而我又懶，就直接在標(biāo)簽里用style來(lái)指定樣式，不需要在下面去定義-->
<button class="button" style="background-color: #08B6F2;color: #fff;">登錄</button>
<button class="button" type="default" style="margin-top:30rpx;color:#999;">返回首頁(yè)</button>
<view style="margin-top:50rpx;">
調(diào)試賬號(hào)登錄
<button class="button" type="warn">老趙1，管理員</button>
<button class="button" type="default">老趙2，員工</button>
<button class="button" type="primary">老趙3，業(yè)主</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
/*VUE的變量們，這里的變量可以和上面模板里綁定，然后會(huì)互動(dòng)*/
sendMsg: "發(fā)送驗(yàn)證碼",
isCanSendCode: true,
phone: "",
vCode: ""
}
},
methods: {
/*VUE事件函數(shù)放這里，因?yàn)槲覀冞€沒(méi)做邏輯，所以這里是空的。*/
}
}
</script>
<style lang="scss">
/*頁(yè)面樣式類(lèi)的存放地方*/
button::after {
border: none;
}
.input-box {
padding: 50upx;
font-size: 30upx;
.input-item {
display: flex;
background: white;
border-bottom: 1upx solid #eeeeee;
line-height: 100upx;
height: 100upx;
.input-label {
width: 150upx;
}
.input-body {
position: relative;
height: 100upx;
width: calc(100% - 150upx);
.input {
line-height: 100upx;
height: 100upx;
position: relative;
font-size: 28upx;
width: 300rpx;
}
.eye {
position: absolute;
height: 50upx;
width: 50upx;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.btn-code {
position: absolute;
right: 0upx;
top: 50%;
transform: translateY(-50%);
background: none;
color: #205592;
width: 160upx;
font-size: 24upx;
box-sizing: border-box;
text-align: right;
padding: 0;
height: 100upx;
line-height: 100upx;
}
}
}
.select {
padding-top: 40upx;
display: flex;
justify-content: space-between;
color: #003B67;
}
}
.button {
margin: 0 30upx;
border-radius: 50upx;
line-height: 80upx;
height: 80upx;
font-size: 32upx;
}
</style>注意一下rpx這個(gè)單位，一般我們?cè)谧鯤TML、CSS時(shí)，都是用px，1px就代表1個(gè)顯示器上的物理像素，在uniapp中也是這樣1px等于一個(gè)物理像素，但是手機(jī)的分辨率是很多樣的，因此我們不能方便地控制大小，所以才有了rpx這個(gè)單位，這個(gè)單位會(huì)把屏幕總寬度當(dāng)成750，當(dāng)屏幕寬度不足750的時(shí)候，1rpx會(huì)小于1像素，屏幕寬度大于750的時(shí)候，1rpx會(huì)大于1個(gè)像素。1rpx=屏幕寬度物理像素?cái)?shù)量/750。
關(guān)鍵的地方我在上面用注釋寫(xiě)了一下，要是都解釋一下的話，估計(jì)得好幾萬(wàn)字，有不清楚的留言吧。
下面是設(shè)置頁(yè)面的代碼：
<template>
<view>
<view class="set_header">
<view class="shd_topBar">
<view class="avatar"><image src="../../static/avatar.png"></image></view>
<view class="title">
<view class="nickName">老趙和他的</view>
<view><uni-tag text="管理員" type="error" :circle="true" size="small"></uni-tag></view>
</view>
<view class="setBtn"><uni-icons type="gear-filled" color="#fff" size="26"></uni-icons></view>
</view>
<view class="iCounter">
<view class="item">
<view>999</view>
<view>發(fā)布</view>
</view>
<view class="item">
<view>888</view>
<view>解決</view>
</view>
<view class="item">
<view>999天</view>
<view>任職</view>
</view>
</view>
</view>
<uni-list>
<uni-list-item class="listItem" title="這里能有些什么功能呢？" :show-badge="true" badge-text="12"></uni-list-item>
<uni-list-item class="listItem" title="我們以后用的時(shí)候再設(shè)計(jì)" :show-switch="true"></uni-list-item>
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onShow() {
console.log(this.getLoginMsg());
},
methods: {
}
}
</script>
<style>
.listItem{
background-color: #fafafa;
}
.set_header {
padding:50rpx;
margin: 30rpx;
border-radius: 20rpx;
background-image: linear-gradient(to right bottom, #0ba360 0%, #3cba92 100%);
/*上面這一行是給頭部加漸變色的CSS，有一個(gè)網(wǎng)站專(zhuān)門(mén)提供這個(gè)代碼，挺有意思的*/
height: 200rpx;
}
.shd_topBar{
display: flex;
}
.shd_topBar .avatar{
width:100rpx;
height:100rpx;
overflow: hidden;
}
.shd_topBar .avatar image{
width:100rpx;
height:100rpx;
}
.shd_topBar .title{
flex:1;
padding:5rpx 0 0 30rpx;
}
.shd_topBar .title .nickName{
color:#fff;
font-weight: bold;
text-shadow: 1rpx 1rpx 1rpx #999;
}
.shd_topBar .setBtn{
width:60rpx;
height:100rpx;
overflow: hidden;
line-height: 100rpx;
}
.iCounter{
display: flex;
margin-top:50rpx;
}
.iCounter .item{
flex:1;
text-align: center;
color:#fff;
font-size:8rpx;
}
</style>
**這個(gè)頁(yè)面使用了uni-tag組件，別忘了安裝一下。
一個(gè)APP通常由很多個(gè)頁(yè)面組件，那么他們之間肯定要調(diào)用很多相同的方法，我們不能每個(gè)頁(yè)都重寫(xiě)一遍所有方法，所以我們要找一個(gè)定義一次就可以在整個(gè)APP、內(nèi)調(diào)用的辦法，那就是在main.js里定義。我寫(xiě)了一個(gè)檢查登錄狀態(tài)的函數(shù)，那么現(xiàn)在我的main.js代碼就是這樣的了：
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/**
* 檢查是否登錄的全局方法
* =========================
* 如果登錄了，返回一個(gè)對(duì)象，里面有pid
* 這個(gè)函數(shù)不驗(yàn)證具體的身份是否正常。
* 它只是記錄了登錄信息，具體在調(diào)用API時(shí)在服務(wù)端會(huì)對(duì)這些信息進(jìn)行驗(yàn)證。
* 所以這里不用操心是否正確。
*/
Vue.prototype.getLoginMsg = function(){
var loginMsg = {}; //定義一個(gè)空對(duì)象
loginMsg.pid = uni.getStorageSync("login_pid"); //用同步的方法在磁盤(pán)中讀取保存的pid
if(loginMsg.pid.length < 1){
//login_pid是空的，就是沒(méi)登錄，直接返回false，連調(diào)用API的機(jī)會(huì)都沒(méi)有。
return false;
}
loginMsg.userPhone = uni.getStorageSync("login_userPhone"); //登錄手機(jī)
loginMsg.vCode = uni.getStorageSync("login_vCode"); //md5后的驗(yàn)證碼
loginMsg.startDate = uni.getStorageSync("login_startDate"); //登錄的日期
loginMsg.Identity = uni.getStorageSync("login_Identity"); //用戶身份（管理員、員工、業(yè)主）
console.log(loginMsg); //調(diào)用試用的，這句代碼是在控制臺(tái)輸出東西。
return loginMsg;
}
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
大概就是這樣，先做個(gè)樣子，還沒(méi)做邏輯功能。以后用到什么功能再加。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
