else>{{timevalue}}s
验证码
登录
没有账号？
注册
{{tip}}
（4）在login.wxss样式文件里对登录表单布局进行样式渲染，示例代码如下。
.loginTitle{
display:
flex;
flex-direction:
row;
width:
100%;
font-size:
15px;
}
.select{
color:
#009966;
width:
50%;
text-align:
center;
height:
48px;
line-height:
48px;
border-bottom:
5rpxsolid#009966;
font-weight:
bold;
}
.default{
margin:
0auto;
padding:
15px;
}
.hr{
height:
1px;
width:
100%;
background-color:
#666666;
opacity:
0.2;
}
.account{
display:
flex;
flex-direction:
row;
}
.ac{
padding:
15px;
font-size:
15px;
font-weight:
bold;
color:
#666666;
}
.ipt{
padding-top:
10px;
}
.iptinput{
text-align:
left;
width:
200px;
color:
#000000;
}
.placeholder-style{
font-size:
14px;
color:
#cccccc;
}
.login{
margin:
0auto;
text-align:
center;
padding-top:
10px;
}
.loginbutton{
width:
96%;
color:
#ffffff;
background:
#009966;
}
.fp{
font-size:
13px;
color:
#3e13da;
padding:
5px;
text-align:
right;
margin-right:
10px;
margin-top:
10px;
}
.btn{
position:
absolute;
right:
10px;
top:
10px;
width:
90px;
font-size:
12px;
color:
#666666;
background-color:
#f2f2f2;
}
.tip{
margin-top:
10px;
font-size:
12px;
color:
#D53E37;
}
（5）在login.js业务逻辑处理文件中，进行登录表单切换、登录表单验证，然后将登录表单提交到后台服务器中进行登录，示例代码如下。
varapp=getApp（）;
varhost=app.globalData.host;
vartimer;
vartimeSecond=false,sendBolen=false;
Page（{
data:
{
currentTab:
0,
winWidth:
0,
winHeight:
0,
tip:
'',
form_info:
'',
yzmvalue:
'获取验证码',
mobile:
'',
timevalue:
60,
flag:
true,
verifyCode:
''
},
onLoad:
function（options）{
varuserId=wx.getStorageSync（"userId"）;
if（userId==""）{
this.checklogin（）;
}else{
wx.reLaunch（{
url:
'../index/index',
}）
}
varpage=this;
wx.getSystemInfo（{
success:
function（res）{
console.log（res）;
page.setData（{winWidth:
res.windowWidth}）;
page.setData（{winHeight:
res.windowHeight}）;
}
}）
},
switchNav:
function（e）{
varthat=this;
if（this.data.currentTab==e.target.dataset.current）{
returnfalse;
}else{
that.setData（{currentTab:
e.target.dataset.current}）;
that.setData（{tip:
''}）;
that.setData（{form_info:
''}）;
}
},
toRegister:
function（e）{
wx.navigateTo（{
url:
'../register/register'
}）
},
formSubmit:
function（e）{
varthat=this;
varloginName=e.detail.value.loginName;
varmobile=e.detail.value.mobile;
varloginPassword=e.detail.value.loginPassword;
varverifyCode=e.detail.value.verifyCode;
varloginType=that.data.currentTab;
varcode=app.globalData.code;
//验证表单输入
varret=that.checkLogin（loginName,mobile,loginPassword,verifyCode,loginType）;
if（ret）{
wx.request（{
url:
host+'/api/user/swxLogin',
method:
'GET',
data:
{'loginName':
loginName,'mobile':
mobile,'loginPassword':
loginPassword,'verifyCode':
verifyCode,'loginType':
loginType,'code':
code},
header:
{
'Content-Type':
'application/json'
},
success:
function（res）{
console.log（res）;
varcode=res.data.code;
varmsg=res.data.data;
if（code=='0000'）{
app.globalData.userId=res.data.data.user.userId;
wx.setStorageSync（'userId',res.data.data.user.id）;
wx.setStorageSync（'nickName',res.data.data.user.nickName）
wx.setStorageSync（'swx_session',res.data.data.swx_session）;
wx.setStorageSync（'userMobile',res.data.data.user.mobile）;
wx.setStorageSync（'openId',res.data.data.openId）;
wx.setStorageSync（'token',res.data.data.token）;
wx.reLaunch（{
url:
'../index/index'
}）
console.log（"2"）
}else{
that.setData（{tip:
msg}）;
returnfalse
}
}
}）
}
},
checkLogin:
function（loginName,mobile,loginPassword,verifyCode,loginType）{
varthat=this;
if（loginType==0）{
if（loginName==""）{
that.setData（{tip:
'用户名不能为空！
'}）;
returnfalse
}
if（loginPassword==''）{
that.setData（{tip:
'密码不能为空！
'}）;
returnfalse
}
}else{
if（mobile==''）{
that.setData（{tip:
'手机号不能为空！
'}）;
returnfalse
}
varmyreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if（!
myreg.test（mobile））{
that.setData（{tip:
'手机号不合法！
'}）;
returnfalse;
}
if（verifyCode==''）{
that.setData（{tip:
'验证码不能为空！
'}）;
returnfalse
}
}
that.setData（{tip:
''}）;
returntrue
},
checklogin:
function（）{//登录页面进行一次获取新的code
wx.login（{
success:
function（data）{
console.log（data）
app.globalData.code=data.code;
}
}）
},
getcode:
function（e）{
varthat=this;
if（that.data.mobile==""）{
that.setData（{tip:
'请输入手机号'}）;
returnfalse;
}
varmyreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if（!
myreg.test（that.data.mobile））{
that.setData（{tip:
'手机号不合法！
'}）;
returnfalse;
}
that.setData（{tip:
''}）;//去除提示
that.setData（{flag:
false}）;//显示时间
timer=setInterval（that.settime,1000）;//验证码倒计时
wx.request（{
url:
host+'/api/user/getVerifyCode',
method:
'GET',
data:
{
'mobile':
this.data.mobile
},
header:
{
'Content-Type':
'application/json'
},
success:
function（res）{
console.log（res）;
varcode=res.data.code;
varmsg=res.data.data;
if（code=='0000'）{
clearInterval（timer）;
that.setData（{verifyCode:
msg}）;
}else{
clearInterval（timer）;
that.setData（{
yzmvalue:
'获取验证码',
timevalue:
60,
flag:
true
}）;
that.setData（{tip:
msg}）;
returnfalse
}
}
}）
},
getMobile:
function（e）{
this.setData（{
mobile:
e.detail.value
}）
},
settime:
function（）{
vartimevalue=this.data.timevalue;
if（timevalue==0）{
clearInterval（timer）
this.setData（{
yzmvalue:
'重新获取',
timevalue:
60,
flag:
true
}）
timeSecond=false;
sendBolen=false;
return;
}
timevalue--;
timeSecond=true;
sendBolen=true;
this.setData（{
timevalue:
timevalue,
flag:
false
}）
},
}）
登录功能是很常用的功能，我们可以通过莫凡商城项目学会登录功能的设计及实现方法，通过综合应用view容器组件、form表单组件、swiper滑块视图容器组件、button按钮组件进一步理解组件的使用；同时，我们还应用了wx.request网络请求API、setInterval定时器API及缓存相关API接口，这些都是常用的功能。
6.7项目实战：
任务4—实现“我的”界面列表式导航功能
（2）
1．任务目标
通过实现莫凡商城“我的”界面列表式导航功能，学会列表式导航设计的方式。
很多App都会采用列表式导航设计，本任务的实现对其他类似项目的设计都有借鉴作用。
莫凡商城“我的”界面包括账号登录区域、我的订单区域、列表式导航区域，如图所示。
“我的”界面
2．任务实施
下面我们一起来实现莫凡商城“我的”界面列表式导航功能。
（1）在app.json文件里添加我的页面路径“pages/me/me”。
（2）在me.wxml页面文件里进行账号区域布局设计、我的订单区域布局设计、列表式导航布局设计，示例代码如下。
{{nickName}}
>
flex;flex-direction:
row;">
我的订单
待付款
待收货
升级会员 