大家好，欢迎来到IT知识分享网。
“我的”页面只实现最简单的功能，用户登录，基本信息的设置，及查看订单信息 ，页面如下 ：
先看member.wxml页面的代码：
1 <view class="container"> 2 3 <view class="imageInfo1 pad1"> 4 <image class="image1" src="../../images/logo1.png" ></image> 5 <button class="button1" bindtap="bindLogin">点击登录</button> 6 </view> 7 8 <view class="orderInfo1 pad1"> 9 <view class="order1"> 10 <text>我的订单</text> 11 <text data-state="1" bindtap="bindOrder">全部>></text> 12 </view> 13 <view class="order2"> 14 <view class="order3"> 15 <image class="image2" src="../../images/order1.png" ></image> 16 <text data-state="2" bindtap="bindOrder">待支付</text> 17 </view> 18 <view class="order3"> 19 <image class="image2" src="../../images/order2.png" ></image> 20 <text data-state="3" bindtap="bindOrder">待收货</text> 21 </view> 22 <view class="order3"> 23 <image class="image2" src="../../images/order3.png" ></image> 24 <text data-state="4" bindtap="bindOrder">已完成</text> 25 </view> 26 <view class="order3"> 27 <image class="image2" src="../../images/order4.png" ></image> 28 <text data-state="5" bindtap="bindOrder">已失效</text> 29 </view> 30 </view> 31 </view> 32 33 <view class="setting1 pad1"> 34 <text>设置</text> 35 <text bindtap="bindSetting">>></text> 36 </view> 37 38 </view>
对应的样式文件代码如下：
1 /* pages/member/member.wxss */ 2 page{height: 100%;background-color: #f1f1f1;} 3 4 .pad1 5 { 6 padding-left:20rpx; 7 padding-right:20rpx; 8 padding-bottom:20rpx; 9 padding-top:20rpx; 10 } 11 12 13 .imageInfo1 14 { 15 background-color: #ffffff; 16 border-radius: 10rpx; 17 box-sizing: border-box; 18 width: 100%; 19 display:flex; 20 flex-direction: column; 21 justify-content: flex-start; 22 flex-wrap:nowrap; 23 align-items: center; 24 } 25 .image1 26 { 27 width: 100rpx; 28 height: 100rpx; 29 } 30 .button1 31 { 32 height: 70rpx; 33 line-height: 70rpx; 34 border-radius: 35rpx; 35 margin-top: 20rpx; 36 } 37 .button1::after { 38 border: none; 39 } 40 41 42 .orderInfo1 43 { 44 background-color: #ffffff; 45 border-radius: 20rpx; 46 width: 100%; 47 box-sizing: border-box; 48 margin-top: 20rpx; 49 } 50 .order1 51 { 52 display: flex; 53 justify-content: space-between; 54 height: 100rpx; 55 line-height: 100rpx; 56 } 57 .order2 58 { 59 display: flex; 60 justify-content: space-between; 61 } 62 .order3 63 { 64 display: flex; 65 flex-direction: column; 66 align-content: center; 67 } 68 .image2{ 69 width: 100rpx; 70 height: 100rpx; 71 } 72 73 74 .setting1 75 { 76 background-color: #ffffff; 77 border-radius: 10rpx; 78 box-sizing: border-box; 79 width: 100%; 80 margin-top: 20rpx; 81 display: flex; 82 justify-content: space-between; 83 align-content:center; 84 height: 100rpx; 85 }
下面具体介绍member.js文件的代码：
1 .
点我登录对应的是bindLogin: function (options) {}函数，如果任何一个页面中调用
wx.checkSession()函数时session过期，则跳转到“我的”页面，在这个页面中需要重新执行一次
wx.login()的函数中的登录逻辑，具体代码可以参考前面章节中app.js的代码，其原理是一样的，
不同的是当用户登录完之后需要将按钮隐藏起来，并显示“已登录”这样的提示就可以了。
2.查看不同状态下的订单数据在bindOrder: function (options) {}函数中完成，代码如下：
1 bindOrder: function (options) { 2 let orderState = options.currentTarget.dataset.state; 3 wx.navigateTo({ 4 url: 'orderList?orderState='+orderState, 5 }) 6 },
用户点击时跳转到订单列表页面，并将参数传递过去，
当我们在<text data-state=“1” bindtap=“bindOrder“>全部>></text>中用data-这样的形式给事件函数传递参数的时候，
在函数中用let orderState = options.currentTarget.dataset.state;语句来接收参数，
options.currentTarget.dataset是固定的属性，state保持与data-后定义的参数名称一致就可以了.
3 .
点设置时的事件函数如下 ：
1 bindSetting: function (options) { 2 wx.navigateTo({ 3 url: 'setting', 4 }) 5 },
在这里做一个简单的页面跳转，在新页面完成设置的功能。
注：在跳转的时候如果希望用户点底部返回按钮时能回到上一个页面就用wx.navigageTo()做跳转，
象支付这样的页面我们希望用户去付款，不希望在退回上一个页面就用wx.redirectTo()做跳转。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/34747.html
