编辑用户信息页图标、添加返回按钮
This commit is contained in:
@@ -5,4 +5,5 @@ export default definePageConfig({
|
||||
backgroundColor: '#f5f5f5',
|
||||
enablePullDownRefresh: false,
|
||||
disableScroll: false,
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -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;
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '用户主页',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -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">
|
||||
{/* 用户信息区域 */}
|
||||
|
||||
Reference in New Issue
Block a user