微信小程序 “万利商城”实战之十五：“我的”页面编码实现
发布时间：2021-09-06 09:12:50作者：顺晟科技点击：
“我的”页面只实现最简单的功能，用户登录，基本信息的设置，及查看订单信息 ，页面如下 ：
先看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()做跳转。
- 上一篇 : 微信小程序实战篇-电商（一）
- 下一篇 : 微信小程序二手闲置商城校园跳蚤物品交换 免费信息发布系统功能
