（十二）微信小程序实现登陆页面+登陆逻辑
微信小程序实现登陆页面
实现上面两个页面
第一个页面
<view> <!-- 上侧部分 --> <view class="top-view"> <!-- 用户信息开始 --> <view class="user"> <!-- 头像开始 --> <view class="row"> <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image> <image class="avatar" wx:else="{{userInfo}}" src="/static/men.jpg"></image> </view> <!-- 头像结束 --> <!-- 用户名称开始 --> <view class="name" wx:if="{{userInfo}}"> <view bindtap="onClickLogout">{{userInfo.nickName}}</view> </view> <view class="name" wx:else="{{userInfo}}"> <navigator url="/pages/auth/auth">登录</navigator> | <navigator url="/pages/auth/auth">注册</navigator> </view> <!-- 用户名称结束 --> <!-- 个人主页开始 --> <view class="site">查看个人主页</view> <!-- 个人主页结束 --> </view> <!-- 关注 粉丝 赞与收藏开始 --> <view class="numbers"> <view class="row"> <text>0</text> <text>关注</text> </view> <view class="row"> <text>0</text> <text>粉丝</text> </view> <view class="row"> <text>0</text> <text>赞与收藏</text> </view> <view class="row"> <text>0</text> <text>好友动态</text> </view> </view> <!-- 关注 粉丝 赞与收藏结束 --> <!-- 用户信息结束 --> </view> </view> <!-- 待支付开始 --> <view class="middle-view"> <view class="item"> <image src="/static/images/icon/transaction_order1_icon_show.png"></image> <text>待支付</text> </view> <view class="item"> <image src="/static/images/icon/transaction_order2_icon_show.png"></image> <text>待支付</text> </view> <view class="item"> <image src="/static/images/icon/transaction_order3_icon_show.png"></image> <text>待支付</text> </view> <view class="item"> <image src="/static/images/icon/transaction_order4_icon_show.png"></image> <text>待支付</text> </view> </view> <!-- 待支付结束 --> <!-- 钱包 优惠券 开始 --> <view class="function-view"> <view class="item"> <view class="left">我的钱包</view> <view class="right"> <text>¥20</text> <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image> </view> </view> <view class="item"> <view class="left">我的优惠券</view> <view class="right"> <text>暂无课用</text> <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image> </view> </view> <view class="item"> <view class="left">领劵中心</view> <view class="right"> <text>你的福利都在这里</text> <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image> </view> </view> </view> <!-- 钱包 优惠券 结束 --> <!-- 官方微信客服开始 --> <view class="contact-view"> <button open-type="contact"> <image src="/static/images/icon/wechat_contact_icon_show.png"></image> </button> <button bindtap="onClickCall"> <image src="/static/images/icon/phone_contact_icon_show.png"></image> </button> </view> <!-- 官方微信客服结束 -->
/* 顶部样式 开始 */ .top-view{ background-color: #01ccb6; color: white; padding: 40rpx; } .top-view .user{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .top-view .user .row{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-view .user .avatar{ width: 100rpx; height: 100rpx; border-radius: 50%; } .top-view .user .name{ display: flex; flex-direction: row; justify-content: space-around; width: 200rpx; } .top-view .site{ background-color: rgba(0, 0, 0, 0.16); padding: 20rpx; border-top-left-radius: 32rpx; border-bottom-left-radius: 32rpx; } .top-view .numbers{ display: flex; flex-direction: row; justify-content: space-between; font-size: 28rpx; padding: 40rpx; padding-bottom: 0rpx; } .top-view .numbers .row{ display: flex; flex-direction: column; align-items: center; } .middle-view{ padding: 40rpx; display: flex; flex-direction: row; justify-content: space-between; font-size: 25rpx; border-bottom: 18rpx solid #f5f5f5; } /* 顶部样式 结束 */ /* 待支付 样式 开始*/ .middle-view{ padding: 40rpx; display: flex; flex-direction: row; justify-content: space-between; font-size: 25rpx; border-bottom: 18rpx solid #f5f5f5; } .middle-view .item{ display: flex; flex-direction: column; align-items: center; } .middle-view .item image{ width: 50rpx; height: 50rpx; margin-bottom: 20rpx; } /* 待支付 样式 结束*/ /* 钱包 优惠券 开始 */ .function-view{ padding: 40rpx; font-size: 28rpx; } .function-view .item{ padding: 30rpx 0; border-bottom: 1px solid #efefef; display: flex; flex-direction: row; justify-content: space-between; } .function-view .item .right{ color: #8c8c8c; } .function-view .item .go-icon{ margin: 0 20rpx; width: 16rpx; height: 16rpx; } /* 钱包 优惠券 结束 */ /* 官方微信客服开始 */ .contact-view{ padding: 40rpx; display: flex; flex-direction: row; justify-content: space-around; } .contact-view button { background-color: transparent; border: 0; padding: 0; } .contact-view button::after{ border: 0; } .contact-view image{ width: 204rpx; height: 66rpx; } /* 官方微信客服结束 */
第二个页面
<!--pages/auth/auth.wxml--> <view class="logo"> <image src='/static/girl.jpg'></image> <text>交流交易社区</text> </view> <view class="form"> <view class="row-group"> <text>手机</text> <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" /> </view> <view class="row-group"> <text>验证码</text> <input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" /> <view class="code" bindtap="onClickCheckCode">获取验证码</view> </view> <view> <button class="submit" open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button> </view> </view>
/* pages/auth/auth.wxss */ .logo{ display: flex; flex-direction: column; align-items: center; } .logo image{ margin-top: 140rpx; width: 216rpx; height: 200rpx; } .form{ padding: 40rpx; } .form .row-group{ padding: 20rpx 0; position: relative; border-bottom: 1rpx solid #ddd; } .form .row-group text{ font-size: 28rpx; padding:10rpx 0; } .form .row-group input{ padding: 10rpx 0; } .form .row-group .txt{ color: #ccc; } .form .row-group .code{ position: absolute; right: 0; bottom: 26rpx; z-index: 2; width: 206rpx; height: 60rpx; border: 2rpx solid #00c8b6; border-radius: 12rpx; font-size: 26rpx; font-weight: 400; color: #00c8b6; display: flex; align-items: center; justify-content: center; } .form .submit{ margin-top: 80rpx; color: #fff; border: 2rpx solid #00c8b6; background-color: #00c8b6; font-size: 32rpx; font-weight: bold; }
js代码
登陆逻辑
