/* pages/mine/mine.wxss */ .userinfo { display: flex; flex-direction: column; align-items: center; background: #f0145a; } .account-bg { width: 100%; height: 150rpx; } .userinfo-avatar { width: 108rpx; height: 108rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #fff; } /* 订单 */ .order { display: flex; flex-direction: row; align-items: center; width: 100%; height: 90rpx; } .myorder-text { font-size: 30rpx; color: gray; margin: 20rpx; width: 40%; } .myorderlook-text { font-size: 30rpx; color: gray; position: relative; right: 20rpx; width: 60%; text-align: right; } .next-image { width: 20rpx; height: 25rpx; position: relative; right: 10rpx; } .navs { display: flex; } .nav-item { width: 25%; display: flex; align-items: center; flex-direction: column; padding: 20rpx; } .nav-item .nav-image { width: 40rpx; height: 40rpx; margin: 5rpx; } .nav-item text { margin-top: 20rpx; font-size: 25rpx; color: gray; } /* 列表 */ .person-list { display: flex; flex-direction: column; align-items: left; } .list-item { display: flex; flex-direction: row; align-items: center; height: 80rpx; } .item-image { width: 40rpx; height: 40rpx; margin: 20rpx; } .item-text { color: gray; font-size: 25rpx; margin-left: 20rpx; } .person-line { width: 100%; height: 2rpx; background: lightgray; margin-left: 90rpx; } |
// 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 }) }) } }) |
<!--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> |
模板简介:该模板名称为【微信小程序商城电商个人会员中心页面制作设计】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。