哈喽,大家好,又到周五啦,有木有期待今天的更新呀~今天要教大家的是制作个人中心界面,先上效果图
个人中心制作
1. mine.js
// 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:在加载过程中,获取用户的信息
2. mine.wxml
<!--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> |