angelo
/
web-retail-h5
3
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mine): 我的页面改版调整

This commit is contained in:
woody 2025-06-14 10:32:23 +08:00
parent a75efdfbe8
commit 848687c076
2 changed files with 424 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
pages/mine/index.vue
View File

@ -1,147 +1,52 @@
<template>
<view class="content">
<!-- 上方头部 -->
<view>
<view class="topBox">
<view class="top_inder">
<view class="top_left">
<view class="left_img">
<view class="header-container">
<view class="user-info-wrapper">
<view class="avatar-container">
<image
class="headerimg"
class="avatar-image"
:src="
userInfo.headPath
? userInfo.headPath
: userInfo.settleCountryCircularIcon
"
mode=""
mode="aspectFill"
>
</image>
</view>
<view class="left_text">
<view class="name_box">
<view class="tTit1">{{ userInfo.memberCode }}</view>
<view class="user-details">
<view class="user-name-and-level">
<text class="user-name">{{ userInfo.memberCode }}</text>
<view class="svip-badge">
<text class="svip-text">{{ userInfo.pkGradeVal || '-' }}</text>
</view>
</view>
<view class="awards-container">
<view class="award-tag">
<!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
<text class="award-label">荣誉奖衔:</text>
<text class="award-value">{{
userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal || '无'
}}</text>
</view>
<view class="award-tag">
<!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
<text class="award-label">当月奖衔:</text>
<text class="award-value">{{
userInfo.pkAwardsVal || '无'
}}</text>
</view>
</view>
</view>
</view>
<view
style="margin-left: 20rpx"
class="level_tag level_tag--primary"
class="settings-icon-container"
@click="goTo('/pages/userData/index')"
>
<text class="level_value">{{
userInfo.pkGradeVal || '-'
}}</text>
</view>
</view>
<view class="level_box">
<view style="display: flex; flex-direction: column; gap: 10rpx">
<view class="level_tag">
<u-icon name="star" color="#005BAC" size="14"></u-icon>
<text class="level_label">荣誉奖衔</text>
<text class="level_value">{{
userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal
}}</text>
</view>
<view class="level_tag">
<u-icon name="star" color="#005BAC" size="14"></u-icon>
<text class="level_label">当月奖衔</text>
<text class="level_value">{{
userInfo.pkAwardsVal || '-'
}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="top_right" @click="goTo('/pages/userData/index')">
<view class="ricon">
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
</view>
</view>
</view>
</view>
<!-- <view class="ju_grade" v-if="false">
<view class="jugrade_flex">
<view class="ju_left">
<view v-if="awards.tarAwardsName" class="yestDay">
<view class="yes_t">奖衔晋升</view>
<view class="ju_left_bottom sprint-progress-container">
<view
class="sprint-current-progress"
:style="{ width: sprintProgress.percentageString }"
></view>
<view class="cha sprint-progress-text">
晋升
<span class="award-name">{{ awards.tarAwardsName }}</span>
小区仅需
<span class="award-amount">{{
sprintProgress.achieved
}}</span>
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">昨日业绩</view>
<view
:class="
awards.aNewPv != 0 && awards.bNewPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aNewPv, awards.bNewPv),
}"
></view>
<view class="cha">
左区 {{ awards.aNewPv || 0 }}/右区 {{ awards.bNewPv || 0 }}
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">当月业绩</view>
<view
:class="
awards.aMonthPv != 0 && awards.bMonthPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aMonthPv, awards.bMonthPv),
}"
></view>
<view class="cha">
左区 {{ awards.aMonthPv || '0.00' }}/右区
{{ awards.bMonthPv || '0.00' }}
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">{{ '历史业绩' }}</view>
<view
:class="
awards.aSumPv != 0 && awards.bSumPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aSumPv, awards.bSumPv),
}"
></view>
<view class="cha">
左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}</view
>
</view>
</view>
</view>
</view>
</view> -->
<!-- 新增信息展示 -->
<view
@ -255,12 +160,20 @@
<view class="my_order">
<view class="my_title">
<text class="thetitle">{{ '我的订单' }}</text>
<view class="findallorder" @click="goTo('/pages/mine/order/index')">
<!-- <view class="findallorder" @click="goTo('/pages/mine/order/index')">
<text>{{ '全部订单' }}</text>
<u-icon name="arrow-right" color="#999999" size="16rpx"></u-icon>
</view>
</view> -->
</view>
<view class="order_flex thepadding" style="justify-content: center">
<view
class="theorderflex1"
style="margin-bottom: 0"
@click="goOrder('')"
>
<image class="order_img2" src="../../static/images/myorder_1.png" />
<view class="order_text">全部订单</view>
</view>
<view
class="theorderflex1"
style="margin-bottom: 0"
@ -394,7 +307,6 @@
:text="'退出登录'"
></u-button>
</view>
</view>
<cl-tabbar :current="4"></cl-tabbar>
<u-popup
:show="pswShow"
@ -1085,189 +997,134 @@ export default {
#005bac 25%,
#f2f2f2 40%
); // background-position: top;
}
.topBox {
padding: 43rpx 0 20rpx 0;
.top_inder {
.header-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 40rpx 0;
color: #ffffff;
position: relative;
padding-bottom: 30rpx; // Add some bottom padding
}
.top_left {
.user-info-wrapper {
display: flex;
align-items: center;
gap: 24rpx;
}
.left_img {
width: 90rpx;
height: 90rpx;
.avatar-container {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
border: 5rpx solid #ffffff;
margin-right: 18rpx;
border: 4rpx solid rgba(255, 255, 255, 0.5);
overflow: hidden;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
.headerimg {
.avatar-image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.left_text {
color: #ffffff;
.user-details {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12rpx;
gap: 16rpx;
}
.name_box {
.user-name-and-level {
display: flex;
align-items: center;
gap: 16rpx;
.tTit1 {
font-size: 32rpx;
font-family: Source Han Sans CN;
.user-name {
font-size: 36rpx;
font-weight: bold;
margin-right: 0;
color: #fff;
}
.kuang {
background-color: rgba(0, 0, 0, 0.25);
padding: 14rpx 18rpx;
border-radius: 40rpx;
font-size: 20rpx;
}
}
.level_box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10rpx;
}
.level_tag {
background: linear-gradient(145deg, #c5d8e8, #afc8de, #9ab5d0);
border: 1rpx solid #8ca3b8;
padding: 6rpx 18rpx;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 10rpx;
position: relative;
overflow: hidden;
color: #003e7c;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
0 1px 2px rgba(0, 0, 0, 0.15);
}
.level_tag--primary {
background: linear-gradient(145deg, #fde468, #fad02c, #e5b40a);
border: 1rpx solid #c8a000;
.svip-badge {
background: linear-gradient(145deg, #fde468, #fad02c);
color: #5d4203;
padding: 4rpx 16rpx;
border-radius: 50px;
font-size: 22rpx;
font-weight: 600;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.4),
0 1px 2px rgba(0, 0, 0, 0.15);
border: 1rpx solid #c8a000;
}
}
.level_label {
font-size: 20rpx;
opacity: 0.9;
}
.awards-container {
display: flex;
flex-direction: column;
gap: 8rpx;
align-items: flex-start;
}
.level_value {
.award-tag {
background-color: rgba(255, 255, 255, 0.15);
padding: 8rpx 16rpx;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8rpx;
font-size: 22rpx;
font-weight: 600;
}
}
}
.top_right {
position: absolute;
top: 40rpx;
right: 3%;
color: #ffffff;
.rtitle {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
}
.award-label {
opacity: 0.8;
}
.award-value {
font-weight: 500;
}
}
.grade_left {
display: flex;
align-items: center;
font-size: 12px;
color: #005bac;
font-weight: 400;
// margin-left: 20rpx;
.gra_left1 {
background: #ffffff;
border: 1rpx solid #ffffff;
border-radius: 20rpx 0 20rpx 20rpx;
// margin-right: 30rpx;
padding: 6rpx 20rpx;
.settings-icon-container {
padding: 10rpx;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 10rpx; // Align vertically with user name
}
.gra_icon {
width: 26rpx;
height: 26rpx;
margin-right: 6rpx;
}
}
// .gra_left1:last-child {
// margin-left: 20rpx;
// }
}
.grade_flex {
display: flex;
align-items: center;
color: #ffffff;
}
.btom_inder {
display: flex;
align-items: center; // margin-top: 24rpx;
.jxbox {
width: 65rpx;
height: 65rpx;
margin-right: 26rpx;
.jximg {
width: 100%;
height: 100%;
}
}
}
}
.jiangxian {
.jiangxian {
display: flex;
color: #ffffff;
align-items: center;
margin: 0rpx 0 10rpx 0;
}
.yt1 {
}
.yt1 {
font-weight: 600;
font-size: 18px;
margin-left: 10rpx;
}
.hisImg {
}
.hisImg {
width: 50rpx;
height: 50rpx;
margin-left: 10rpx;
}
}
.jxTit {
.jxTit {
flex: 1;
text-align: center;
}
.jxTit1 {
}
.jxTit1 {
font-weight: 600;
font-size: 24rpx;
}
.contentLink {
}
.contentLink {
.linktitle {
font-size: 28rpx;
font-family: Source Han Sans CN;
@ -1299,7 +1156,6 @@ export default {
.u-cell-text {
margin-left: 25rpx;
}
}
}
::v-deep .u-line {

6
pages/pay/index.vue
View File

@ -420,7 +420,7 @@
<div style="white-space: nowrap">{{ '收货地址' }}</div>
<div>
{{ orderData.recProvince }}{{ orderData.recCity
}}{{ orderData.recAddress }}
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
</div>
</div>
</div>
@ -456,7 +456,7 @@
<div style="white-space: nowrap">{{ '收货地址' }}</div>
<div>
{{ orderData.recProvince }}{{ orderData.recCity
}}{{ orderData.recAddress }}
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
</div>
</div>
</div>
@ -492,7 +492,7 @@
<div style="white-space: nowrap">{{ '收货地址' }}</div>
<div>
{{ orderData.recProvince }}{{ orderData.recCity
}}{{ orderData.recAddress }}
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
</div>
</div>
</div>