写一个uniapp商城我的页面
时间: 2023-08-25 10:30:36 浏览: 131
好的,这里是一个简单的 uniapp 商城“我的”页面的代码示例:
```html
<template>
<view class="container">
<view class="header">
<image class="avatar" src="/static/avatar.png" />
<view class="info">
<view class="name">小明</view>
<view class="level">V1</view>
</view>
<view class="setting-btn">
<text class="iconfont icon-shezhi"></text>
</view>
</view>
<view class="menu">
<view class="menu-item">
<text class="iconfont icon-dingdan"></text>
<text class="text">我的订单</text>
</view>
<view class="menu-item">
<text class="iconfont icon-youhuiquan"></text>
<text class="text">优惠券</text>
</view>
<view class="menu-item">
<text class="iconfont icon-jifen"></text>
<text class="text">积分</text>
</view>
</view>
<view class="list">
<view class="list-item">
<text class="iconfont icon-shoucang"></text>
<text class="text">我的收藏</text>
<text class="iconfont icon-arrow-right"></text>
</view>
<view class="list-item">
<text class="iconfont icon-dizhi"></text>
<text class="text">收货地址</text>
<text class="iconfont icon-arrow-right"></text>
</view>
<view class="list-item">
<text class="iconfont icon-kefu"></text>
<text class="text">联系客服</text>
<text class="iconfont icon-arrow-right"></text>
</view>
</view>
</view>
</template>
<style>
.container {
padding: 20upx;
}
.header {
display: flex;
align-items: center;
margin-bottom: 20upx;
}
.avatar {
width: 80upx;
height: 80upx;
margin-right: 20upx;
border-radius: 50%;
}
.info {
flex: 1;
}
.name {
font-size: 28rpx;
margin-bottom: 10upx;
}
.level {
font-size: 24rpx;
color: #666;
}
.setting-btn {
width: 40upx;
height: 40upx;
line-height: 40upx;
text-align: center;
border-radius: 50%;
font-size: 24rpx;
background-color: #eee;
}
.menu {
display: flex;
justify-content: space-between;
margin-bottom: 20upx;
padding: 20upx;
background-color: #fff;
border-radius: 10upx;
}
.menu-item {
display: flex;
align-items: center;
flex-direction: column;
}
.menu-item .iconfont {
font-size: 32rpx;
margin-bottom: 10upx;
}
.list {
background-color: #fff;
border-radius: 10upx;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20upx;
border-bottom: 1upx solid #eee;
}
.list-item .iconfont {
font-size: 32rpx;
margin-right: 10upx;
}
.list-item .arrow-right {
font-size: 24rpx;
color: #999;
}
</style>
```
以上代码实现了一个简单的商城“我的”页面,包括用户头像、用户名、用户等级、设置按钮、菜单、收藏、收货地址、联系客服等功能。你可以根据自己的需求进行修改和扩展。
阅读全文