编辑用户信息页图标、添加返回按钮
12
src/static/userInfo/ball.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4404_5572)">
|
||||
<path d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6819 14.6666 7.99998C14.6666 4.31808 11.6818 1.33331 7.99992 1.33331C4.31802 1.33331 1.33325 4.31808 1.33325 7.99998C1.33325 11.6819 4.31802 14.6666 7.99992 14.6666Z" stroke="black" stroke-width="1.33333"/>
|
||||
<path d="M7.99992 1.33331C7.96629 3.55605 7.42055 5.22318 6.36272 6.33478C5.30485 7.44635 3.62835 8.00235 1.33325 8.00275" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.6561 8.33505C12.4852 8.18615 10.8265 8.65015 9.67983 9.72705C8.53313 10.804 7.97353 12.4505 8.00096 14.6666" stroke="black" stroke-width="1.33333" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4404_5572">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 904 B |
12
src/static/userInfo/birthday.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3333 13.3333H2.66659M13.3333 13.3333H1.33325H2.66659M13.3333 13.3333H14.6666M13.3333 13.3333V8H2.66659V13.3333" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.3334 11.3333L12.0001 10.6667L10.6667 11.3333L9.33341 10.6667L8.00008 11.3333L6.66675 10.6667L5.33341 11.3333L4.00008 10.6667L2.66675 11.3333" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6667 8V5" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 8V5" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.33325 8V5" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6667 3.33332V2.66666" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 3.33332V2.66666" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.33325 3.33332V2.66666" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.66675 8V13.3333" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.3333 8V13.3333" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
6
src/static/userInfo/business.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.66675 4.66669C4.66675 3.56212 5.56218 2.66669 6.66675 2.66669H9.66675C10.7713 2.66669 11.6667 3.56212 11.6667 4.66669V5.33335H4.66675V4.66669Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.33325 8.33331L7.83822 9.95955C7.94439 9.98611 8.05545 9.98611 8.16162 9.95955L14.6666 8.33331V12.6666C14.6666 13.0348 14.3681 13.3333 13.9999 13.3333H1.99992C1.63173 13.3333 1.33325 13.0348 1.33325 12.6666V8.33331Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.6666 8.99998V5.99998C14.6666 5.63178 14.3681 5.33331 13.9999 5.33331H1.99992C1.63173 5.33331 1.33325 5.63178 1.33325 5.99998V8.99998" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.83341 7.66665C8.83341 8.12688 8.46031 8.49998 8.00008 8.49998C7.53985 8.49998 7.16675 8.12688 7.16675 7.66665C7.16675 7.20641 7.53985 6.83331 8.00008 6.83331C8.46031 6.83331 8.83341 7.20641 8.83341 7.66665Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
7
src/static/userInfo/gender.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.66659 4L1.33325 2V12L5.66659 14L10.3333 12L14.6666 14V4L10.3333 2L5.66659 4Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.3333 2V12" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.66675 4V14" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.5 3L5.66667 4L10.3333 2L12.5 3" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.5 13L5.66667 14L10.3333 12L12.5 13" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 768 B |
5
src/static/userInfo/introduce.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.00008 5.99998C9.28875 5.99998 10.3334 4.95531 10.3334 3.66665C10.3334 2.37798 9.28875 1.33331 8.00008 1.33331C6.71142 1.33331 5.66675 2.37798 5.66675 3.66665C5.66675 4.95531 6.71142 5.99998 8.00008 5.99998Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.33325 13.6666C1.33325 10.7211 4.01955 8.33331 7.33325 8.33331" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.3333 14L13.6667 10.6666L12.3333 9.33331L9 12.6666V14H10.3333Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 735 B |
5
src/static/userInfo/phone.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3334 1.33331H4.66675C4.11446 1.33331 3.66675 1.78103 3.66675 2.33331V13.6666C3.66675 14.2189 4.11446 14.6666 4.66675 14.6666H11.3334C11.8857 14.6666 12.3334 14.2189 12.3334 13.6666V2.33331C12.3334 1.78103 11.8857 1.33331 11.3334 1.33331Z" stroke="black" stroke-width="1.33333"/>
|
||||
<path d="M7.33325 3.33331H8.66659" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66675 12.6667H9.33341" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
12
src/static/userInfo/user.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4404_5456)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00001C14.6666 4.31811 11.6818 1.33334 7.99992 1.33334C4.31802 1.33334 1.33325 4.31811 1.33325 8.00001C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.99992 7.66668C8.92039 7.66668 9.66659 6.92048 9.66659 6.00001C9.66659 5.07954 8.92039 4.33334 7.99992 4.33334C7.07945 4.33334 6.33325 5.07954 6.33325 6.00001C6.33325 6.92048 7.07945 7.66668 7.99992 7.66668Z" stroke="black" stroke-width="1.33333" stroke-linejoin="round"/>
|
||||
<path d="M3.34058 12.7773C3.45514 11.0402 4.90044 9.66666 6.66658 9.66666H9.33324C11.097 9.66666 12.5409 11.0366 12.6588 12.7704" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4404_5456">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
8
src/static/userInfo/wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.91666 5.83333C1.91666 5.37308 2.28975 5 2.74999 5H17.75C18.2102 5 18.5833 5.37308 18.5833 5.83333V16.6667C18.5833 17.1269 18.2102 17.5 17.75 17.5H2.74999C2.28975 17.5 1.91666 17.1269 1.91666 16.6667V5.83333Z" stroke="#8D8D8D" stroke-width="1.67" stroke-linejoin="round"/>
|
||||
<path d="M8.16666 7.91675L10.25 10.0001L12.3333 7.91675" stroke="#CCCCCC" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.75 10.4167H12.75" stroke="#CCCCCC" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.75 12.9167H12.75" stroke="#CCCCCC" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.25 10.4167V14.5834" stroke="#CCCCCC" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.58334 2.5H16.9167" stroke="#8D8D8D" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 998 B |
@@ -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">
|
||||
{/* 用户信息区域 */}
|
||||
|
||||