使用微信小程序编写出个人中心页面,头像和用户名以及身份在左上角,下面是钱包余额和积分数。中间是我的订单,里面有待付款、待发货、待收货、待评价四个模块。在我的订单下面有优惠券,资金明细,收货地址和联系我们。最下面是首页、分类、购物车和个人中心。
时间: 2024-03-12 21:49:53 浏览: 66
微信小程序:个人中心页面
5星 · 资源好评率100%
为了实现这个个人中心页面,你需要创建一个小程序项目,并在 app.json 文件中配置好各个页面的路由。然后,你需要新建一个名为 "my" 的页面,代码如下:
```
<!-- my.wxml -->
<view class="container">
<view class="header">
<image class="avatar" src="{{avatarUrl}}" />
<view class="info">
<text class="username">{{username}}</text>
<text class="identity">{{identity}}</text>
</view>
</view>
<view class="balance">
<text class="label">钱包余额:</text>
<text class="value">{{balance}}</text>
<text class="label">积分数:</text>
<text class="value">{{points}}</text>
</view>
<view class="order">
<view class="title">我的订单</view>
<view class="item" bindtap="toOrder" data-type="waitPay">
<image class="icon" src="/images/waitPay.png" />
<text class="label">待付款</text>
</view>
<view class="item" bindtap="toOrder" data-type="waitSend">
<image class="icon" src="/images/waitSend.png" />
<text class="label">待发货</text>
</view>
<view class="item" bindtap="toOrder" data-type="waitReceive">
<image class="icon" src="/images/waitReceive.png" />
<text class="label">待收货</text>
</view>
<view class="item" bindtap="toOrder" data-type="waitComment">
<image class="icon" src="/images/waitComment.png" />
<text class="label">待评价</text>
</view>
</view>
<view class="other">
<view class="item" bindtap="toCoupon">
<text class="label">优惠券</text>
<image class="arrow" src="/images/arrow.png" />
</view>
<view class="item" bindtap="toFund">
<text class="label">资金明细</text>
<image class="arrow" src="/images/arrow.png" />
</view>
<view class="item" bindtap="toAddress">
<text class="label">收货地址</text>
<image class="arrow" src="/images/arrow.png" />
</view>
<view class="item" bindtap="toContact">
<text class="label">联系我们</text>
<image class="arrow" src="/images/arrow.png" />
</view>
</view>
</view>
```
```
/* my.wxss */
.container {
display: flex;
flex-direction: column;
height: 100%;
background-color: #f5f5f5;
}
.header {
display: flex;
align-items: center;
padding: 20rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
}
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.info {
display: flex;
flex-direction: column;
}
.username {
font-size: 30rpx;
color: #333;
}
.identity {
font-size: 28rpx;
color: #999;
}
.balance {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
}
.label {
font-size: 30rpx;
color: #666;
}
.value {
font-size: 32rpx;
color: #f00;
}
.order {
margin-top: 20rpx;
background-color: #fff;
}
.title {
font-size: 30rpx;
color: #333;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
}
.item {
display: flex;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
}
.icon {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.label {
font-size: 30rpx;
color: #333;
}
.arrow {
width: 20rpx;
height: 30rpx;
margin-left: auto;
}
.other {
margin-top: 20rpx;
background-color: #fff;
}
```
```
// my.js
Page({
data: {
avatarUrl: '',
username: '',
identity: '',
balance: 0,
points: 0
},
onLoad() {
// 获取用户信息、余额、积分等数据
// ...
},
toOrder(event) {
const type = event.currentTarget.dataset.type;
wx.navigateTo({
url: `/pages/order/list?type=${type}`
});
},
toCoupon() {
wx.navigateTo({
url: '/pages/coupon/list'
});
},
toFund() {
wx.navigateTo({
url: '/pages/fund/list'
});
},
toAddress() {
wx.navigateTo({
url: '/pages/address/list'
});
},
toContact() {
wx.navigateTo({
url: '/pages/contact'
});
}
});
```
接下来,你需要在 app.json 文件中配置好各个页面的路由,如下:
```
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/my/my",
"pages/order/list",
"pages/coupon/list",
"pages/fund/list",
"pages/address/list",
"pages/contact"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "black"
}
}
```
最后,你需要在其他页面中添加跳转到个人中心页面的按钮或链接。
阅读全文