修改个人中心页面

common/variable.scss

@@ -12,7 +12,7 @@ page {
 	--content: 				#666666;
 	--sub: 						#999999;
 	--disabled: 			#bcbec3;
-	--divider: 				#f8f8f8;
+	--divider: 				#E8EAF2;
 
 	--gutter: 				20rpx;
 	--tighten-gutter: 20rpx;

components/fs-cell/fs-cell.vue

@@ -41,7 +41,7 @@
 		arrow: Boolean,
 		arrowColor: {
 			type: String,
-			default: ''
+			default: '#E8EAF2'
 		},
 		arrowColorType: {
 			type: String,

pages.json

@@ -16,7 +16,8 @@
 			"path": "pages/my/my",
 			"style": {
 				"navigationBarTitleText": "个人中心",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 
 		}

pages/my/my.vue

@@ -1,41 +1,31 @@
 <template>
 	<view>
-		<fs-avatar src="/static/images/my/my-bg.png" shape="square" width="100%" height="288rpx"></fs-avatar>
-		<view class="my-box">
-			<view class="layout-box radius-lg top-box">
+		<view class="my-top">
+			<view class="status-bar"></view>
+			<view class="radius-lg top-box">
 				<view class="user-info" v-if="userInfo.name">
-					<fs-avatar size="140rpx" :src="userInfo.photo || userAvatar"></fs-avatar>
+					<fs-avatar link="./userInfo" size="130rpx" :src="userInfo.photo || userAvatar"></fs-avatar>
 					
 					<view class="top-box-content">
-						<text class="vm title">{{userInfo.name}}</text>
-						<fs-icon type="icon-sex-male" color="#2285FF" style="margin-left: 10rpx;" v-if="userInfo.sex === '1'"></fs-icon>
-						<fs-icon type="icon-sex-female" colorType="error" style="margin-left: 10rpx;" v-if="userInfo.sex === '2'"></fs-icon>
+						<view class="top-box-title">{{userInfo.name}}</view>
+						<view>{{userInfo.phone}}</view>
 					</view>
 				</view>
-				<view v-else class="user-info">
+				<view v-else class="text-center">
 					<fs-avatar size="140rpx" link="/modules/common/login/login" border>去登录</fs-avatar>
 				</view>
-				
-				<fs-icon
-					v-if="userInfo.name"
-					class="top-box-edit"
-					colorType="primary"
-					type="icon-edit"
-					size="40rpx"
-					link="./userInfo">
-				</fs-icon>
-				
-				<view :style="{'margin-top': userInfo.name ? '70rpx' : '20rpx'}">
-					<fs-divide-list :list="shortcutList">
-						<template #default="{item}">
-							<view class="top-box-hd">{{item.num || 0}}</view>
-							<view class="content">{{item.title}}</view>
-						</template>
-					</fs-divide-list>
-				</view>
 			</view>
 		</view>
 		
+		<view class="short-list">
+			<fs-divide-list :list="shortcutList">
+				<template #default="{item}">
+					<view class="top-box-hd">{{item.num || 0}}</view>
+					<view class="content">{{item.title}}</view>
+				</template>
+			</fs-divide-list>
+		</view>
+		
 		<fs-card gutter :titleStyle="{padding: '0'}">
 			<template #title>
 				<view class="title-hd" >常用工具</view>
@@ -116,36 +106,39 @@ const showLogin = ref(false)
 </script>
 
 <style lang="scss" scoped>
-.my-box{
-	padding: var(--gutter);
-	margin-top: -200rpx;
-	z-index: 100;
-	position: relative;
+.status-bar{
+	height: var(--status-bar-height);
+}
+.my-top{
+	background-color: var(--primary);
+	padding: 60rpx var(--gutter) 0;
+	margin-bottom: var(--gutter);
 }
 .top-box{
 	position: relative;
-	
-	&-edit{
-		position: absolute;
-		top: 10rpx;
-		right: 20rpx;
-	}
+	padding: 60rpx 0;
+	color: #fff;
 	
 	&-hd{
 		font-size: 23px;
 		font-weight: bold;
 	}
+	&-title{
+		font-size: 16px;
+		font-weight: 500;
+		margin-bottom: 10rpx;
+	}
 	
 	&-content{
 		padding: 10rpx 0;
+		margin-left: 20rpx;
 	}
 }
+.short-list{
+	margin-top: -80rpx;
+	padding: var(--gutter);
+}
 .user-info{
-	position: absolute;
-	z-index: 10;
-	left: 50%;
-	top: -70rpx;
-	transform: translateX(-50%);
-	text-align: center;
+	display: flex;
 }
 </style>

utils/http.js

@@ -5,7 +5,8 @@ import utils from './utils'
 const request = (method, url, data, opt) => {
 	return new Promise((resolve, reject) => {
 		opt.showLoading && uni.showLoading({
-			title: opt.loadingTitle
+			title: opt.loadingTitle,
+			mask: method === 'POST' ? true : false
 		})
 		
 		uni.request({