feat: 优化
This commit is contained in:
+236
-188
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="mine_warp" :class="platformType ? '' : 'iosplatformType'">
|
||||
<view class="mine_header">
|
||||
<view class="mine_header" :style="headerStyle">
|
||||
<view class="mine_login_data" v-if="currentUserData && Object.keys(currentUserData).length !== 0">
|
||||
<view class="mine_data">
|
||||
<up-image
|
||||
@@ -11,9 +11,8 @@
|
||||
<text style="margin-right: 20rpx">{{ currentUserData.nickname || '信任桥用户' }}</text>
|
||||
|
||||
<view class="level level-grade" @click="jumpToTrustBridge" v-if="currentUserData.agentName">
|
||||
<up-image src="/static/common/rz.png"
|
||||
style="margin-right: 8rpx; margin-top: 6rpx" shape="circle" width="13" height="13"
|
||||
bgColor="#f1f6ff00"></up-image>
|
||||
<up-image src="/static/common/rz.png" style="margin-right: 8rpx; margin-top: 6rpx"
|
||||
shape="circle" width="13" height="13" bgColor="#f1f6ff00"></up-image>
|
||||
<view>{{ currentUserData.agentName }}</view>
|
||||
</view>
|
||||
|
||||
@@ -84,7 +83,9 @@
|
||||
@click="jumpOrder(item)">
|
||||
<up-image :src="item.url" width="28" height="28" bgColor="#f1f6ff00"></up-image>
|
||||
<view>{{ item.title }}</view>
|
||||
<up-badge :absolute="true" :offset="[-9, 9]" max="99" :customStyle="{ width: '40rpx', height: '32rpx', borderRadius: '45% 45% 45% 0', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }" :value="statisticsObj[item.note]"></up-badge>
|
||||
<up-badge :absolute="true" :offset="[-9, 9]" max="99"
|
||||
:customStyle="{ width: '40rpx', height: '32rpx', borderRadius: '45% 45% 45% 0', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }"
|
||||
:value="statisticsObj[item.note]"></up-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -413,9 +414,14 @@ export default {
|
||||
platformType: true,
|
||||
kefuUnreadCount: 0,
|
||||
kefuUnreadTimer: null,
|
||||
headerStyle: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.headerStyle = this.calcHeaderStyle();
|
||||
},
|
||||
onShow() {
|
||||
this.headerStyle = this.calcHeaderStyle();
|
||||
this.userData = getStorageFun(USER_DATA);
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
@@ -435,8 +441,50 @@ export default {
|
||||
onUnload() {
|
||||
this.stopKefuUnreadPolling();
|
||||
},
|
||||
mounted() { },
|
||||
mounted() {
|
||||
this.headerStyle = this.calcHeaderStyle();
|
||||
},
|
||||
methods: {
|
||||
calcHeaderStyle() {
|
||||
let paddingTop = '90rpx';
|
||||
let paddingRight = '30rpx';
|
||||
|
||||
// #ifdef MP-WEIXIN || MP
|
||||
try {
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
if (menuButton && menuButton.top && menuButton.top > 0) {
|
||||
paddingTop = (menuButton.top + 2) + 'px';
|
||||
if (sysInfo && sysInfo.windowWidth && menuButton.left) {
|
||||
paddingRight = (sysInfo.windowWidth - menuButton.left + 10) + 'px';
|
||||
}
|
||||
} else {
|
||||
const statusBarHeight = (sysInfo && sysInfo.statusBarHeight) || 20;
|
||||
paddingTop = (statusBarHeight + 10) + 'px';
|
||||
paddingRight = '96px';
|
||||
}
|
||||
} catch (e) {
|
||||
paddingTop = '90rpx';
|
||||
paddingRight = '96px';
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
try {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
if (sysInfo && sysInfo.statusBarHeight) {
|
||||
paddingTop = (sysInfo.statusBarHeight + 10) + 'px';
|
||||
}
|
||||
} catch (e) {
|
||||
paddingTop = '90rpx';
|
||||
}
|
||||
// #endif
|
||||
|
||||
return {
|
||||
paddingTop,
|
||||
paddingRight
|
||||
};
|
||||
},
|
||||
copyData,
|
||||
async refreshKefuUnreadCount() {
|
||||
const userId = this.currentUserData && this.currentUserData.id;
|
||||
@@ -587,298 +635,298 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.mine_warp {
|
||||
height: calc(100vh - env(safe-area-inset-bottom));
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background-color: $app-bj;
|
||||
height: calc(100vh - env(safe-area-inset-bottom));
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background-color: $app-bj;
|
||||
|
||||
&.iosplatformType {
|
||||
height: 100vh;
|
||||
&.iosplatformType {
|
||||
height: 100vh;
|
||||
|
||||
.mine_content_warp {
|
||||
padding-bottom: 100rpx !important;
|
||||
.mine_content_warp {
|
||||
padding-bottom: 100rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mine_header {
|
||||
// height: 300rpx;
|
||||
background: linear-gradient(180deg,
|
||||
#f2ebff 0%,
|
||||
rgba(245, 245, 247, 0) 100%,
|
||||
#ffffff 100%);
|
||||
/* 将图片居中显示 */
|
||||
padding: 90rpx 20rpx 0;
|
||||
// height: 300rpx;
|
||||
background: linear-gradient(180deg,
|
||||
#f2ebff 0%,
|
||||
rgba(245, 245, 247, 0) 100%,
|
||||
#ffffff 100%);
|
||||
/* 将图片居中显示 */
|
||||
padding: 90rpx 20rpx 0;
|
||||
|
||||
.mine_login_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.mine_login_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mine_content_warp {
|
||||
margin-top: 20rpx;
|
||||
margin-left: 30rpx;
|
||||
width: 690rpx;
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
margin-top: 20rpx;
|
||||
margin-left: 30rpx;
|
||||
width: 690rpx;
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.mine_no_login_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.login_warp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.login_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.mine_data {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mine_info_not_login {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #111111;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.mine_info {
|
||||
margin-left: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.mine_info_name {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #111111;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
.grade_warp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.level {
|
||||
border-radius: 8rpx;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #111111;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
height: 44rpx;
|
||||
|
||||
&.level-name {
|
||||
background: rgba(248, 185, 75, 0.15);
|
||||
color: #613700;
|
||||
margin-left: 10rpx;
|
||||
.grade_warp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.level-grade {
|
||||
background: rgba(248,185,75,0.15);
|
||||
color: #613700;
|
||||
.level {
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
height: 44rpx;
|
||||
|
||||
&.level-name {
|
||||
background: rgba(248, 185, 75, 0.15);
|
||||
color: #613700;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
&.level-grade {
|
||||
background: rgba(248, 185, 75, 0.15);
|
||||
color: #613700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grade_key_warp {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 30%;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
width: 100rpx;
|
||||
height: 44rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.grade_key_warp {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 30%;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
width: 100rpx;
|
||||
height: 44rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grade_key_warp1 {
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.grade_key_warp1 {
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.grade_key_warp3 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.grade_key_warp3 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mine_info_id {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 内容公共 start */
|
||||
.mine_content_comm_warp {
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 0rpx 10rpx 0rpx #eeeeee;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 0rpx 10rpx 0rpx #eeeeee;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.mine_fontsize_comm_warp {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.mine_top_comm_warp {
|
||||
margin-top: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.settled_list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.settled_list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.enter_item {
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
padding: 12rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.enter_item_cell {
|
||||
display: flex;
|
||||
|
||||
.u-transition {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.enter_item_text {
|
||||
margin-left: 10rpx;
|
||||
|
||||
.enter_remark {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
.enter_item {
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
padding: 12rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.enter_item_cell {
|
||||
display: flex;
|
||||
|
||||
.u-transition {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.enter_item_text {
|
||||
margin-left: 10rpx;
|
||||
|
||||
.enter_remark {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容公共 end */
|
||||
|
||||
.mine_order_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.mine_order_title_all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
color: #bbbbbb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.mine_order_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 40rpx 0 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 40rpx 0 10rpx 0;
|
||||
}
|
||||
|
||||
.order_list_item {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.apply_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.apply_item {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.enter_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.enter_item {
|
||||
width: 40%;
|
||||
background: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 30rpx;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
background: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 30rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.enter_title {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.enter_apply {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.enter_apply_title {
|
||||
margin-right: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.mine_tool_title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tool_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.tool_item {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tool-icon-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.kefu-unread-dot {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: -7rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border: 3rpx solid #ffffff;
|
||||
border-radius: 50%;
|
||||
background: #f04444;
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: -7rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border: 3rpx solid #ffffff;
|
||||
border-radius: 50%;
|
||||
background: #f04444;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
::v-deep .u-modal__content {
|
||||
padding: 40rpx !important;
|
||||
padding: 40rpx !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user