小程序用户和登录页面展示

用户页面wxml

1. <view >
2.   <view >
3.     <view >
4.       <view >
5.         <image  wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
6.         <image  wx:else="{{userInfo}}" src="/static/2.png"></image>
7.         
8.         <view  wx:if="{{userInfo}}">
9.           <view bindtap="onClickLogout">
10.             {{userInfo.nickName}}
11.           </view>
12.         </view>
13.         <view  wx:else="{{userInfo}}">
14.           <navigator url="/pages/auth/auth">登录</navigator>
15.           |
16.           <navigator url="/pages/auth/auth">注册 </navigator>
17.         </view>
19.       </view>
20.       <view >查看个人主页</view>
21.     </view>
23.     <view >
24.       <view >
25.         <text>0</text>
26.         <text>关注</text>
27.       </view>
28.       <view >
29.         <text>0</text>
30.         <text>粉丝</text>
31.       </view>
32.       <view >
33.         <text>0</text>
34.         <text>赞与收藏</text>
35.       </view>
36.       <view >
37.         <text>0</text>
38.         <text>好友动态</text>
39.       </view>
40.     </view>
42.   </view>
44.   <view >
45.     <view >
46.       <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
47.       <text>待支付</text>
48.     </view>
49.     <view >
50.       <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
51.       <text>待支付</text>
52.     </view>
53.     <view >
54.       <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
55.       <text>待支付</text>
56.     </view>
57.     <view >
58.       <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
59.       <text>待支付</text>
60.     </view>
61.     <view >
62.       <image src="/static/images/icon/transaction_order5_icon_show.png"></image>
63.       <text>待支付</text>
64.     </view>
65.   </view>
66.   <view >
67.     <view >
68.       <view >我的钱包</view>
69.       <view >
70.         <text>¥20</text>
71.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
72.       </view>
73.     </view>
74.     <view >
75.       <view >我的优惠券</view>
76.       <view >
77.         <text>暂无课用</text>
78.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
79.       </view>
80.     </view>
81.     <view >
82.       <view >领劵中心</view>
83.       <view >
84.         <text>你的福利都在这里</text>
85.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
86.       </view>
87.     </view>
88.   </view>
89.   <view >
90.     <button open-type="contact">
91.       <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
92.     </button>
93.     <button bindtap="onClickCall">
94.       <image src="/static/images/icon/phone_contact_icon_show.png"></image>
95.     </button>
96.   </view>
97. </view>

复制代码

用户页面js

1. // pages/home/home.js
3. var app = getApp();
5. Page({
7.   /**
8.    * 页面的初始数据
9.    */
10.   data: {
11.     userInfo: null,
12.   },
14.   /**
15.    * 生命周期函数--监听页面加载(第一次打开时会执行)
16.    */
17.   onLoad: function (options) {
19.   },
21.   /**
22.    * 生命周期函数--监听页面初次渲染完成（第一次打开时会执行）
23.    */
24.   onReady: function () {
26.   },
28.   /**
29.    * 生命周期函数--监听页面显示
30.    */
31.   onShow: function () {
32.     //本地storage中获取值
33.     // var phone = wx.getStorageSync('phone')
34.     // this.setData({
35.     //   phone:phone
36.     // })
37.     //从全局变量中获取值
38.     this.setData({
39.       // phone:app.globalData.phone
40.       userInfo: app.globalData.userInfo
41.     })
42.   },
43.    /**
44.    * 用户注销
45.    */
46.   onClickLogout:function(){
47.     app.delUserInfo();
48.     this.setData({
49.       userInfo: null
50.     })
51.   },
53.   /**
54.    * 生命周期函数--监听页面隐藏
55.    */
56.   onHide: function () {
58.   },
60.   /**
61.    * 生命周期函数--监听页面卸载
62.    */
63.   onUnload: function () {
65.   },
67.   /**
68.    * 页面相关事件处理函数--监听用户下拉动作
69.    */
70.   onPullDownRefresh: function () {
72.   },
74.   /**
75.    * 页面上拉触底事件的处理函数
76.    */
77.   onReachBottom: function () {
79.   },
81.   /**
82.    * 用户点击右上角分享
83.    */
84.   onShareAppMessage: function () {
86.   }
87. })

复制代码

用户页面css

1. /* pages/home/home.wxss */
3. .top-view{
4.   background-color: #01ccb6;
6.   color: white;
7.   padding: 40rpx;
8. }
10. .top-view .user{
11.   display: flex;
12.   flex-direction: row;
13.   justify-content: space-between;
14.   align-items: center;
15. }
16. .top-view .user .row{
17.   display: flex;
18.   flex-direction: row;
19.   justify-content: flex-start;
20.   align-items: center;
21. }
22. .top-view .user .avatar{
23.   width: 100rpx;
24.   height: 100rpx;
25.   border-radius: 50%;
26. }
28. .top-view .user .name{
29.   display: flex;
30.   flex-direction: row;
31.   justify-content: space-around;
32.   width: 200rpx;
33. }
35. .top-view .site{
36.   background-color: rgba(0, 0, 0, 0.16);
37.   padding: 20rpx;
38.   border-top-left-radius: 32rpx;
39.   border-bottom-left-radius: 32rpx;
40. }
42. .top-view .numbers{
43.   display: flex;
44.   flex-direction: row;
45.   justify-content: space-between;
46.   font-size: 28rpx;
47.   padding: 40rpx;
48.   padding-bottom: 0rpx;
49. }
51. .top-view .numbers .row{
52.    display: flex;
53.   flex-direction: column;
54.   align-items: center;
55. }
58. .middle-view{
59.   padding: 40rpx;
60.   display: flex;
61.   flex-direction: row;
62.   justify-content: space-between;
63.   font-size: 25rpx;
64.   border-bottom: 18rpx solid #f5f5f5;
65. }
67. .middle-view .item{
68.   display: flex;
69.   flex-direction: column;
70.   align-items: center;
71. }
73. .middle-view .item image{
74.   width: 50rpx;
75.   height: 50rpx;
76.   margin-bottom: 20rpx;
77. }
79. .function-view{
80.   padding: 40rpx;
81.   font-size: 28rpx;
82. }
84. .function-view .row{
85.   padding: 30rpx 0;
86.   border-bottom: 1px solid #efefef;
87.   
88.   display: flex;
89.   flex-direction: row;
90.   justify-content: space-between;
91. }
93. .function-view .row .right{
94.   color: #8c8c8c;
95. }
96. .function-view .row .go-icon{
97.   margin: 0 20rpx;
98.   width: 16rpx;
99.   height: 16rpx;
100. }
103. .contact-view{
104.   padding: 40rpx;
105.   display: flex;
106.   flex-direction: row;
107.   justify-content: space-around;
108. }
110. .contact-view button {
111.   background-color: transparent;
112.   border: 0;
113.   padding: 0;
114. }
115. .contact-view button::after{
116.   border: 0;
117. }
118. .contact-view  image{
119.   width: 204rpx;
120.   height: 66rpx;
121. }

复制代码

登录注册页wxml

1. <view >
2.   <image src='/static/2.png'></image>
3.   <text>交流交易社区</text>
4. </view>
6. <view >
7.   <view >
8.     <text>手机</text>
9.    
10.     <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
11.   </view>
12.    <view >
13.     <text>验证码</text>
14.     <input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
15.     <view  bindtap="onClickCheckCode">获取验证码</view>
16.   </view>
18.   <view>
19.     <button   open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
20.   </view>
21. </view>

复制代码

登录注册页js

1. // pages/auth/auth.js
2. var app = getApp()
4. Page({
6.   /**
7.    * 页面的初始数据
8.    */
9.   data: {
10.     phone: "15822539779",
11.     code: "",
12.   },
13.   bindPhoneInput: function (e) {
14.     this.setData({
15.       phone: e.detail.value
16.     });
17.   },
18.   bindCodeInput: function (e) {
19.     this.setData({
20.       code: e.detail.value
21.     });
22.   },
24.   /**
25.    * 点击获取短信验证码
26.    */
27.   onClickCheckCode: function (e) {
28.     // 判断手机号格式是否正确
29.     if (this.data.phone.length == 0) {
30.       wx.showToast({
31.         title: '请填写手机号码',
32.         icon: 'none'
33.       })
34.       return
35.     }
36.     var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;
37.     if (!reg.test(this.data.phone)) {
38.       wx.showToast({
39.         title: '手机格式错误',
40.         icon: 'none'
41.       })
42.       return
43.     }
44.     // 发送短信验证码，登录成功之后获取jwt和微信用户信息，保存到globalData和本地存储中。
45.     wx.request({
46.       url: "http://127.0.0.1:8000/api/message/",
47.       data: {
48.         phone: this.data.phone
49.       },
50.       method: 'GET',
51.       dataType: 'json',
52.       success: function (res) {
53.         // 根据后端发送的status判断是否发送成功
54.         if (res.data.status) {
55.           // 提示验证码倒计时或者提示发送成功
56.           wx.showToast({
57.             title: res.data.message,
58.             icon: 'none'
59.           });
60.         } else {
61.           // 短信发送失败
62.           wx.showToast({
63.             title: res.data.message,
64.             icon: 'none'
65.           });
66.         }
67.       }
68.     })
69.   },
70.   onClickSubmit(e) {
71.     console.log(e)
72.     wx.request({
73.       url: "http://127.0.0.1:8000/api/login/",
74.       data: {
75.         phone: this.data.phone,
76.         code: this.data.code
77.       },
78.       method: 'POST',
79.       dataType: 'json',
80.       success: function (res) {
81.         // 根据status状态判断是否成功
82.         if (res.data.status) {
83.           // 1.可以将手机号放到公共的位置，比如app.js里，方便别的页面进行获取
84.           // app.globalData.phone = res.data.data.phone
85.           // 2.上述方法是将值存在变量里的，一重启就没有了，我们也可以将值保存在cookie中
86.           // wx.setStorageSync('phone', res.data.data.phone)
87.           // 3.将上述两种存储优化一下，在全局的app中定义一个initUserInfo方法，将用户初始化的信息（电话和token）传入该函数，然后上面1和2两部就可以放到该函数内执行了
88.           // 4.优化，我们还可以将wx的用户信息也初始化到initUserInfo函数内
89.           app.initUserInfo(res.data.data, e.detail.userInfo)
92.           // 登录成功之后，自动跳转到上一级页面
93.           //getCurrentPages方法是记录程序的页面，包括上一页信息，下一页信息等，pages是一个列表，最后一个是元素是当前页面，前一个元素是上一页
94.           // var pages = getCurrentPages()
95.           // console.log(pages)
96.           // 得到上一页
97.           // prepage  = pages[pages.length-2]
98.           // 使用该方法就可以之前跳转到登录之前的上一页
99.           wx.navigateBack({})
100.         } else {
101.           wx.showToast({
102.             title: "登录失败",
103.             icon: 'none'
104.           });
105.         }
106.       }
107.     })
108.   },
109.   /**
110.    * 生命周期函数--监听页面加载
111.    */
112.   onLoad(options) {
114.   },
116.   /**
117.    * 生命周期函数--监听页面初次渲染完成
118.    */
119.   onReady() {
121.   },
123.   /**
124.    * 生命周期函数--监听页面显示
125.    */
126.   onShow() {
128.   },
130.   /**
131.    * 生命周期函数--监听页面隐藏
132.    */
133.   onHide() {
135.   },
137.   /**
138.    * 生命周期函数--监听页面卸载
139.    */
140.   onUnload() {
142.   },
144.   /**
145.    * 页面相关事件处理函数--监听用户下拉动作
146.    */
147.   onPullDownRefresh() {
149.   },
151.   /**
152.    * 页面上拉触底事件的处理函数
153.    */
154.   onReachBottom() {
156.   },
158.   /**
159.    * 用户点击右上角分享
160.    */
161.   onShareAppMessage() {
163.   }
164. })

复制代码

登录注册页css

1. /* pages/auth/auth.wxss */
4. .logo{
5.   display: flex;
6.   flex-direction: column;
7.   align-items: center;
8. }
10. .logo image {
11.   margin-top: 140rpx;
12.   width: 216rpx;
13.   height: 100rpx;
14. }
16. .logo text {
17.   margin-top: 26rpx;
18.   margin-bottom: 50rpx;
19.   font-size: 24rpx;
20.   line-height: 24rpx;
21.   font-weight: 400;
22.   color: #8c8c8c;
23.   text-align: center;
24. }
26. .form{
27.   padding: 40rpx;
28. }
30. .form .row-group{
31.   padding: 20rpx 0;
32.   border-bottom: 1rpx solid #ddd;
33.   position: relative;
34. }
36. .form .row-group text{
37.   font-size: 28rpx;
38.   padding:10rpx 0;
39. }
41. .form .row-group input{
42.   padding: 10rpx 0;
43. }
45. .form .row-group .txt{
46.   color: #ccc;
47. }
49. .form .row-group .code{
50.   position: absolute;
51.   right: 0;
52.   bottom: 26rpx;
53.   z-index: 2;
55.   width: 206rpx;
56.   height: 60rpx;
57.   border: 2rpx solid #00c8b6;
58.   border-radius: 12rpx;
59.   font-size: 26rpx;
60.   font-weight: 400;
61.   color: #00c8b6;
62.   display: flex;
63.   align-items: center;
64.   justify-content: center;
65. }
67. .form .submit{
68.   margin-top: 80rpx;
69.   color: #fff;
70.   border: 2rpx solid #00c8b6;
71.   background-color: #00c8b6;
72.   font-size: 32rpx;
73.   font-weight: bold;
74. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！