上一節(jié)我們實現(xiàn)了單車報障頁,這一節(jié)我們來實現(xiàn)個人中心頁面:
老套路,先進行頁面分析
個人中心頁有兩種狀態(tài),即未登錄和已登錄,所以要求不同數(shù)據(jù)驅(qū)動產(chǎn)生的不同頁面
點擊登錄/退出登錄按鈕需要響應(yīng)合理邏輯,并改變按鈕樣式
只有登錄狀態(tài)下才會顯示我的錢包按鈕
頁面結(jié)構(gòu)
-
<!--pages/my/index.wxml-->
-
<view class="container">
-
<view class="user-info">
-
<!-- 用戶未登錄就沒有頭像-->
-
<block wx:if="{{userInfo.avatarUrl != ''}}">
-
<image src="{{userInfo.avatarUrl}}"></image>
-
</block>
-
<text>{{userInfo.nickName}}</text>
-
</view>
-
<!-- 用戶未登錄就沒有錢包按鈕-->
-
<block wx:if="{{userInfo.avatarUrl != ''}}">
-
<view class="my-wallet tapbar" bindtap="movetoWallet">
-
<text>我的錢包</text>
-
<text>></text>
-
</view>
-
</block>
-
<button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
-
</view>
指令wx:if="boolean": 當(dāng)boolean為true,被它(block)包裹的元素將會顯示,否則不現(xiàn)實,這樣可以處理在未登錄狀態(tài)下不顯示頭像和錢包按鈕
頁面樣式
-
/* pages/my/index.wxss */
-
.user-info{
-
background-color: #fff;
-
padding-top: 60rpx;
-
}
-
.user-info image{
-
display: block;
-
width: 180rpx;
-
height: 180rpx;
-
border-radius: 50%;
-
margin: 0 auto 40rpx;
-
box-shadow: 0 0 20rpx rgba(0,0,0
|