编辑用户信息页图标、添加返回按钮

This commit is contained in:
2025-09-16 00:02:08 +08:00
parent 64d80efdb7
commit 46f0dc4edf
14 changed files with 151 additions and 15 deletions

View File

@@ -5,4 +5,5 @@ export default definePageConfig({
backgroundColor: '#f5f5f5',
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: 'custom',
})

View File

@@ -7,6 +7,46 @@
box-sizing: border-box;
}
.custom-navbar {
height: 56px;
/* 通常与原生导航栏高度一致 */
display: flex;
align-items: center;
justify-content: center;
// background-color: #fff;
color: #000;
padding-top: 44px;
/* 适配状态栏 */
position: sticky;
top: 0;
z-index: 100;
overflow: hidden;
background-color: rgb(238, 255, 220);
}
.detail-navigator {
height: 30px;
width: 80px;
border-radius: 15px;
position: absolute;
left: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
.detail-navigator-back {
height: 32px;
width: 50%;
display: flex;
justify-content: center;
&>.detail-navigator-back-icon {
width: 32px;
height: 32px;
}
}
}
// 导航栏
.navbar {
position: fixed;
@@ -84,7 +124,7 @@
align-items: center;
gap: 12px;
margin-bottom: 48px;
margin-top: 98px;
// margin-top: 98px;
.avatar_container {
position: relative;

View File

@@ -7,6 +7,7 @@ import { UserService } from '@/services/userService';
import { clear_login_state } from '@/services/loginService';
import { convert_db_gender_to_display } from '@/utils/genderUtils';
import { EditModal } from '@/components';
import img from "@/config/images";
const EditProfilePage: React.FC = () => {
// 用户信息状态
@@ -264,7 +265,6 @@ const EditProfilePage: React.FC = () => {
});
return;
}
console.log('用户手机号信息aaa', e)
try {
const phone = await UserService.parse_phone(e.detail.code);
handle_field_edit('phone', phone);
@@ -281,7 +281,16 @@ const EditProfilePage: React.FC = () => {
return (
<View className="edit_profile_page">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View className="detail-navigator-back" onClick={() => { Taro.navigateBack() }}>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
</View>
</View>
</View>
{/* 主要内容 */}
<ScrollView className="main_content" scrollY>
{loading ? (
@@ -311,7 +320,7 @@ const EditProfilePage: React.FC = () => {
<View className="form_group">
<View className="form_item" onClick={() => handle_open_edit_modal('nickname')}>
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/user1.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/user.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -332,7 +341,7 @@ const EditProfilePage: React.FC = () => {
>
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/user2.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/gender.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -355,7 +364,7 @@ const EditProfilePage: React.FC = () => {
>
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/tennis.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/birthday.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -372,7 +381,7 @@ const EditProfilePage: React.FC = () => {
<View className="form_group">
<View className="form_item" onClick={() => handle_open_edit_modal('personal_profile')}>
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/message.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/introduce.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -391,7 +400,7 @@ const EditProfilePage: React.FC = () => {
{/* 地区 */}
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/location.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/gender.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -410,7 +419,7 @@ const EditProfilePage: React.FC = () => {
{/* NTRP水平 */}
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/tennis.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/ball.svg')} />
<Text className="item_label">NTRP </Text>
</View>
<View className="item_right">
@@ -430,7 +439,7 @@ const EditProfilePage: React.FC = () => {
{/* 职业 */}
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/sc.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/business.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -452,7 +461,7 @@ const EditProfilePage: React.FC = () => {
<View className="form_group">
<View className="form_item">
<View className="item_left">
<Image className="item_icon" src={require('@/static/userInfo/message.svg')} />
<Image className="item_icon" src={require('@/static/userInfo/phone.svg')} />
<Text className="item_label"></Text>
</View>
<View className="item_right">
@@ -472,6 +481,13 @@ const EditProfilePage: React.FC = () => {
</View>
</View>
{/* 注销账号 */}
<View className="logout_section">
<View className="logout_button" onClick={handle_logout}>
<Text className="logout_text"></Text>
</View>
</View>
{/* 退出登录 */}
<View className="logout_section">
<View className="logout_button" onClick={handle_logout}>

View File

@@ -177,15 +177,15 @@ const MyselfPage: React.FC = () => {
className="action_icon"
src={require("@/static/userInfo/order_btn.svg")}
/>
<Text className="action_text"></Text>
<Text className="action_text"></Text>
</View>
<View className="action_divider"></View>
<View className="action_content" onClick={handle_favorites}>
<Image
className="action_icon"
src={require("@/static/userInfo/sc.svg")}
src={require("@/static/userInfo/wallet.svg")}
/>
<Text className="action_text"></Text>
<Text className="action_text"></Text>
</View>
</View>
</View>

View File

@@ -1,3 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '用户主页',
navigationStyle: 'custom',
})

View File

@@ -1,7 +1,8 @@
import React, { useState, useEffect } from "react";
import { View, Text, ScrollView } from "@tarojs/components";
import { View, Text, ScrollView, Image } from "@tarojs/components";
import ListContainer from "@/container/listContainer";
import Taro from "@tarojs/taro";
import img from "@/config/images";
import "./index.scss";
// import GuideBar from "@/components/GuideBar";
import {
@@ -163,6 +164,16 @@ const OtherUserPage: React.FC = () => {
return (
<View className="other_user_page">
<View className="custom-navbar">
<View className="detail-navigator">
<View className="detail-navigator-back" onClick={() => { Taro.navigateBack() }}>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
</View>
</View>
</View>
{/* 主要内容 */}
<View className="main_content">
{/* 用户信息区域 */}