任务二工单4：我的管理界面研发
目标：
2.4.1 我的管理效果图（已登录状态）.png
2.4.2 我的管理效果图（未登录状态）.png
步骤：
1、根据设计图完成“我的管理”已登录状态页面进行分析，可分为三个区域逐步开展编写，如图2.4.3。
2.4.3 两个区域布局（已登录状态）.png
2、通过团队小组成员对上方布局，需要注意目前编写状态为已登录状态，暂不做逻辑判断，效果图如2.4.4。
mine.vue详细代码如下：
<template>
<view class="container">
<!-- 上方布局 -->
<view class="position-relative">
<image src="https://s3.uuu.ovh/imgs/2025/04/06/0311c7822ce0e8aa.png" class="bg"></image>
<button type="default" size="mini" class="hym-btn">
<image src="/static/images/mine/hym.png"></image>
<text>会员码</text>
</button>
</view>
<view style="padding: 0 30rpx;">
<!-- 用户信息 -->
<view class="d-flex flex-column bg-white user-box">
<!-- 头像 -->
<view class="d-flex align-items-center">
<view class="avatar">
<image src="/static/images/mine/default.png"></image>
<view class="badge">
<image src="/static/images/mine/level.png"></image>
<view>2</view>
</view>
</view>
<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
<!-- 昵称 -->
<view class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center">
<view class="text-truncate">吴贝拉</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
<view class="font-size-sm text-color-assist">
当前成长值410/500
</view>
<view class="w-100">
<progress activeColor="#ADB838" height="8rpx" percent="80" border-radius="8rpx" />
</view>
</view>
<view
class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm">
<view>会员权益</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
</view>
<view class="w-100 d-flex align-items-center just-content-center">
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
8
</view>
<view class="font-size-sm text-color-assist">云鲤券</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
668
</view>
<view class="font-size-sm text-color-assist">积分商城</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
18.8
</view>
<view class="font-size-sm text-color-assist">余额</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
3
</view>
<view class="font-size-sm text-color-assist">礼品卡</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
height: auto;
min-height: 100%;
}
.bg {
width: 100%;
height: calc(410 / 594 * 750rpx);
}
.hym-btn {
position: absolute;
top: 40rpx;
right: 40rpx;
color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rem;
font-size: $font-size-sm;
box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);
&::after {
border: 0;
}
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.user-box {
position: relative;
border-radius: 8rpx;
margin-bottom: 30rpx;
margin-top: -115rpx;
box-shadow: $box-shadow;
}
.avatar {
position: relative;
margin-top: -35rpx;
margin-left: 35rpx;
margin-right: 35rpx;
width: 160rpx;
height: 160rpx;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 140rpx;
height: 140rpx;
border-radius: 100%;
}
.badge {
position: absolute;
right: -10rpx;
bottom: -10rpx;
background-color: #FFFFFF;
border-radius: 50rem;
display: flex;
align-items: center;
justify-content: center;
color: $color-warning;
font-size: 24rpx;
padding: 8rpx 16rpx;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 30rpx;
height: 30rpx;
}
}
}
.level-benefit {
margin-left: 35rpx;
padding: 10rpx 0 10rpx 30rpx;
border-radius: 50rem 0 0 50rem;
}
.user-grid {
width: 25%;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.value {
margin-bottom: 20rpx;
}
}
</style>
2.4.4 上方布局效果图（已登录状态）.png
3、对下方进行布局，已登录状态相对较为简单，首先为一张banner图片，代码如下：
中间banner图片
<image src="/static/images/mine/banner.png" class="banner" mode="widthFix"></image>
...
...
.banner {
width: 100%;
border-radius: 8rpx;
margin-bottom: 30rpx;
}
4、其次为积分签到、送她心愿、云鲤商城等功能列表，布局可用弹性布局中display: flex、flex-direction: column、justify-content: center、align-items: center进行设置，完成横向居中排列且每个子项居中，效果如图2.4.5。“我的管理”界面已登录状态布局成功。
2.4.5 下方布局效果图（已登录状态）.png
mine.vue代码：
<template>
<view class="container">
<!-- 上方布局 -->
<view class="position-relative">
<image src="https://s3.uuu.ovh/imgs/2025/04/06/0311c7822ce0e8aa.png" class="bg"></image>
<button type="default" size="mini" class="hym-btn">
<image src="/static/images/mine/hym.png"></image>
<text>会员码</text>
</button>
</view>
<view style="padding: 0 30rpx;">
<!-- 用户信息 -->
<view class="d-flex flex-column bg-white user-box">
<!-- 头像 -->
<view class="d-flex align-items-center">
<view class="avatar">
<image src="/static/images/mine/default.png"></image>
<view class="badge">
<image src="/static/images/mine/level.png"></image>
<view>2</view>
</view>
</view>
<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
<!-- 昵称 -->
<view class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center">
<view class="text-truncate">吴贝拉</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
<view class="font-size-sm text-color-assist">
当前成长值410/500
</view>
<view class="w-100">
<progress activeColor="#ADB838" height="8rpx" percent="80" border-radius="8rpx" />
</view>
</view>
<view
class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm">
<view>会员权益</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
</view>
<view class="w-100 d-flex align-items-center just-content-center">
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
8
</view>
<view class="font-size-sm text-color-assist">云鲤券</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
668
</view>
<view class="font-size-sm text-color-assist">积分商城</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
18.8
</view>
<view class="font-size-sm text-color-assist">余额</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
3
</view>
<view class="font-size-sm text-color-assist">礼品卡</view>
</view>
</view>
</view>
<!-- 中间banner图片 -->
<image src="/static/images/mine/banner.png" class="banner" mode="widthFix"></image>
</view>
<!-- 下方功能列表 -->
<view class="service-box">
<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
<view class="row">
<view class="grid">
<view class="image">
<image src="/static/images/mine/jfqd.png"></image>
</view>
<view>积分签到</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/stxy.png"></image>
</view>
<view>送她心愿</view>
<image :src="newIcon" class="new-badage"></image>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/nxsc.png"></image>
</view>
<view>云鲤商城</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/lxkf.png"></image>
</view>
<view>联系客服</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/wddd.png"></image>
</view>
<view>我的订单</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/wdzl.png"></image>
</view>
<view>我的资料</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/shdz.png"></image>
</view>
<view>收货地址</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/gdfw.png"></image>
</view>
<view>更多服务</view>
</view>
</view>
</view>
<view class="d-flex just-content-center align-items-center text-color-assist" style="padding: 30rpx 0; font-size: 22rpx;">
会员卡适用于云鲤奶茶和云鲤酒屋指定范围
</view>
</view>
</template>
<script>
export default {
data() {
return {
newIcon: 'https://s3.uuu.ovh/imgs/2024/12/05/6b3856fe6d711a0a.png'
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
height: auto;
min-height: 100%;
}
.bg {
width: 100%;
height: calc(410 / 594 * 750rpx);
}
.hym-btn {
position: absolute;
top: 40rpx;
right: 40rpx;
color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rem;
font-size: $font-size-sm;
box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);
&::after {
border: 0;
}
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.user-box {
position: relative;
border-radius: 8rpx;
margin-bottom: 30rpx;
margin-top: -115rpx;
box-shadow: $box-shadow;
}
.avatar {
position: relative;
margin-top: -35rpx;
margin-left: 35rpx;
margin-right: 35rpx;
width: 160rpx;
height: 160rpx;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 140rpx;
height: 140rpx;
border-radius: 100%;
}
.badge {
position: absolute;
right: -10rpx;
bottom: -10rpx;
background-color: #FFFFFF;
border-radius: 50rem;
display: flex;
align-items: center;
justify-content: center;
color: $color-warning;
font-size: 24rpx;
padding: 8rpx 16rpx;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 30rpx;
height: 30rpx;
}
}
}
.level-benefit {
margin-left: 35rpx;
padding: 10rpx 0 10rpx 30rpx;
border-radius: 50rem 0 0 50rem;
}
.user-grid {
width: 25%;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.value {
margin-bottom: 20rpx;
}
}
.banner {
width: 100%;
border-radius: 8rpx;
margin-bottom: 30rpx;
}
.service-box {
width: 100%;
background-color: #FFFFFF;
padding: 32rpx 30rpx 10rpx;
box-shadow: $box-shadow;
.row {
display: flex;
flex-wrap: wrap;
color: $text-color-assist;
font-size: $font-size-sm;
padding-bottom: -40rpx;
.grid {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
width: 25%;
position: relative;
.image {
image {
width: 80rpx;
height: 80rpx;
margin-bottom: 20rpx;
}
}
.new-badage {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 0;
right: 30rpx;
}
}
}
}
</style>
5、团队成员已经完成了“我的管理”界面登录状态的研发工作。为了便于管理，通过data中的一个固定参数isLogin来标识用户是否已登录（如下方代码所示）。在模拟演示未登录状态时，利用Vue语法中的v-if、v-else结构来进行布局。
data() {
return {
isLogin: false,//false为未登录，true为登录
newIcon: 'https://s3.uuu.ovh/imgs/2024/12/05/6b3856fe6d711a0a.png'
}
}
经过小组成员分析，未登录状态与登录状态的区别如下图2.4.6所示，有4处区别，等级标识、昵称成长值、各种积分对应值、会员权益板块，区别如图2.4.7。完成界面布局和样式编写最终效果如图2.4.2。
2.4.6 未登录状态界面区别.png
2.4.7 部分v-if v-else代码块.png
mine.vue最终代码如下：
<template>
<view class="container">
<!-- 上方布局 -->
<view class="position-relative">
<image src="https://s3.uuu.ovh/imgs/2025/04/06/0311c7822ce0e8aa.png" class="bg"></image>
<button type="default" size="mini" class="hym-btn">
<image src="/static/images/mine/hym.png"></image>
<text>会员码</text>
</button>
</view>
<view style="padding: 0 30rpx;">
<!-- 用户信息 -->
<view class="d-flex flex-column bg-white user-box">
<!-- 头像 -->
<view class="d-flex align-items-center">
<view class="avatar">
<image src="/static/images/mine/default.png"></image>
<!-- 用户等级标识 -->
<view class="badge" v-if="isLogin">
<image src="/static/images/mine/level.png"></image>
<view>2</view>
</view>
</view>
<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
<!-- 昵称 -->
<view v-if="isLogin" class="font-size-lg font-weight-bold d-flex
justify-content-start align-items-center">
<view class="text-truncate">吴贝拉</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
<view v-else class="font-size-lg font-weight-bold" >请点击授权登录</view>
<view class="font-size-sm text-color-assist">
当前成长值 {{ isLogin ? '410/500' : '0 / 0' }}
</view>
<view class="w-100">
<!-- 成长值进度条（未计算） -->
<progress v-if="!isLogin" activeColor="#ADB838" height="8rpx" percent="0" border-radius="8rpx" />
<progress v-else activeColor="#ADB838" height="8rpx" percent="82" border-radius="8rpx" />
</view>
</view>
<view
class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm">
<view>会员权益</view>
<view class="iconfont iconarrow-right line-height-100"></view>
</view>
</view>
<view class="w-100 d-flex align-items-center just-content-center">
<view class="user-grid">
<!-- 通过三目运算符判断 -->
<view class="value font-size-extra-lg font-weight-bold
text-color-base">
{{ isLogin ? 8 : '***' }}
</view>
<view class="font-size-sm text-color-assist">云鲤券</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? 668 : '***' }}
</view>
<view class="font-size-sm text-color-assist">积分商城</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? 18.8 : '***' }}
</view>
<view class="font-size-sm text-color-assist">余额</view>
</view>
<view class="user-grid">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? 3 : '***' }}
</view>
<view class="font-size-sm text-color-assist">礼品卡</view>
</view>
</view>
</view>
<!-- 用户盒子 -->
<view class="level-benefit-box" v-if="!isLogin">
<view class="d-flex align-items-center justify-content-between font-size-base">
<view class="text-color-base">新用户加入会员，享会员权益</view>
<view class="text-color-primary" >立即加入</view>
</view>
<view class="row">
<view class="grid">
<image src="/static/images/mine/rhyl.png"></image>
<view>入会有礼</view>
</view>
<view class="grid">
<image src="/static/images/mine/jfdh.png"></image>
<view>积分兑换</view>
</view>
<view class="grid">
<image src="/static/images/mine/sjtq.png"></image>
<view>升级特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/srtq.png"></image>
<view>生日特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/nxbz.png"></image>
<view>云鲤宝藏</view>
</view>
</view>
</view>
<!-- 中间banner图片 -->
<image src="/static/images/mine/banner.png" class="banner" mode="widthFix"></image>
</view>
<!-- 下方功能列表 -->
<view class="service-box">
<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
<view class="row">
<view class="grid">
<view class="image">
<image src="/static/images/mine/jfqd.png"></image>
</view>
<view>积分签到</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/stxy.png"></image>
</view>
<view>送她心愿</view>
<image :src="newIcon" class="new-badage"></image>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/nxsc.png"></image>
</view>
<view>云鲤商城</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/lxkf.png"></image>
</view>
<view>联系客服</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/wddd.png"></image>
</view>
<view>我的订单</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/wdzl.png"></image>
</view>
<view>我的资料</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/shdz.png"></image>
</view>
<view>收货地址</view>
</view>
<view class="grid">
<view class="image">
<image src="/static/images/mine/gdfw.png"></image>
</view>
<view>更多服务</view>
</view>
</view>
</view>
<view class="d-flex just-content-center align-items-center text-color-assist" style="padding: 30rpx 0; font-size: 22rpx;">
会员卡适用于云鲤奶茶和云鲤酒屋指定范围
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin: false,//false为未登录，true为登录
newIcon: 'https://s3.uuu.ovh/imgs/2024/12/05/6b3856fe6d711a0a.png'
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
height: auto;
min-height: 100%;
}
.bg {
width: 100%;
height: calc(410 / 594 * 750rpx);
}
.hym-btn {
position: absolute;
top: 40rpx;
right: 40rpx;
color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rem;
font-size: $font-size-sm;
box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);
&::after {
border: 0;
}
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.user-box {
position: relative;
border-radius: 8rpx;
margin-bottom: 30rpx;
margin-top: -115rpx;
box-shadow: $box-shadow;
}
.avatar {
position: relative;
margin-top: -35rpx;
margin-left: 35rpx;
margin-right: 35rpx;
width: 160rpx;
height: 160rpx;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 140rpx;
height: 140rpx;
border-radius: 100%;
}
.badge {
position: absolute;
right: -10rpx;
bottom: -10rpx;
background-color: #FFFFFF;
border-radius: 50rem;
display: flex;
align-items: center;
justify-content: center;
color: $color-warning;
font-size: 24rpx;
padding: 8rpx 16rpx;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 30rpx;
height: 30rpx;
}
}
}
.level-benefit {
margin-left: 35rpx;
padding: 10rpx 0 10rpx 30rpx;
border-radius: 50rem 0 0 50rem;
}
.user-grid {
width: 25%;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.value {
margin-bottom: 20rpx;
}
}
.banner {
width: 100%;
border-radius: 8rpx;
margin-bottom: 30rpx;
}
.service-box {
width: 100%;
background-color: #FFFFFF;
padding: 32rpx 30rpx 10rpx;
box-shadow: $box-shadow;
.row {
display: flex;
flex-wrap: wrap;
color: $text-color-assist;
font-size: $font-size-sm;
padding-bottom: -40rpx;
.grid {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
width: 25%;
position: relative;
.image {
image {
width: 80rpx;
height: 80rpx;
margin-bottom: 20rpx;
}
}
.new-badage {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 0;
right: 30rpx;
}
}
}
}
.level-benefit-box {
border-radius: 8rpx;
margin-bottom: 30rpx;
box-shadow: 0 10rpx 8rpx rgba($color: #878889, $alpha: 0.1);
width: 100%;
display: flex;
padding: 30rpx;
flex-direction: column;
background-color: #FFFFFF;
.row {
display: flex;
padding: 30rpx 0 20rpx;
justify-content: space-around;
align-items: center;
.grid {
width: 20%;
display: flex;
flex-direction: column;
font-size: $font-size-sm;
color: $text-color-assist;
align-items: center;
image {
width: 80rpx;
height: 80rpx;
margin-bottom: 10rpx;
}
}
}
}
</style>
2.4.2 我的管理效果图（未登录状态）.png
