今天要教大家的是制作个人中心界面,先上效果图
// pages/mine/mine.js
var app = getApp()
Page({
data: {
userInfo: {},
motto: 'Hello World',
// orderItems
orderItems: [
{
typeId: 0,
name: '待付款',
url: 'bill',
imageurl: '../../images/person/personal_pay.png',
},
{
typeId: 1,
name: '待发货',
url: 'bill',
imageurl: '../../images/person/personal_shipped.png',
},
{
typeId: 2,
name: '待收货',
url: 'bill',
imageurl: '../../images/person/personal_receipt.png'
},
{
typeId: 3,
name: '待评价',
url: 'bill',
imageurl: '../../images/person/personal_comment.png'
}
],
},
//事件处理函数
toOrder: function () {
wx.navigateTo({
url: '../order/order'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})
}
})
toOrder :事件监听,跳转到我的订单界面
onLoad:在加载过程中,获取用户的信息
<!--pages/mine/mine.wxml--> <view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> <image src="../../images/person/account_bg.png" class="account-bg"> </image> </view> <view class="separate"></view> <view class="order" catchtap="toOrder"> <text class="myorder-text">我的订单</text> <text class="myorderlook-text">查看全部订单</text> <image class="next-image" src="../../images/person/next.png"></image> </view> <view class="line"></view> <view class="navs"> <block wx:for-items="{{orderItems}}" wx:key="name"> <view class="nav-item" catchtap="toOrder" data-type="{{item.name}}" data-typeid="{{item.typeId}}"> <image src="{{item.imageurl}}" class="nav-image" /> <text>{{item.name}}</text> </view> </block> </view> <view class="separate"></view> <view class="person-list"> <view class="list-item"> <image class="item-image" src="../../images/person/personal_favorite.png"></image> <text class="item-text">我的收藏</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_site.png"></image> <text class="item-text">收货地址</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_sale_record.png"></image> <text class="item-text">售后记录</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_evaluated.png"></image> <text class="item-text">我的评价</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_share.png"></image> <text class="item-text">推广邀请</text> </view> </view> <view class="separate"></view> </view>