修改个人中心样式

main
king 1 year ago
parent 52da8849a2
commit 4b05f2d2a8
  1. 16
      src/components/button/MyButton.tsx
  2. 9
      src/components/button/myButton.module.scss
  3. 2
      src/components/popPut/popPut.tsx
  4. 23
      src/pages/business/userInfo/userInfo.tsx
  5. 3
      src/static/css/module.scss

@ -1,5 +1,5 @@
import {CSSProperties, FC} from "react"; import {CSSProperties, FC} from "react";
import {Button} from "@tarojs/components"; import {Button, View} from "@tarojs/components";
import styles from './myButton.module.scss' import styles from './myButton.module.scss'
import {ButtonProps} from "@tarojs/components/types/Button"; import {ButtonProps} from "@tarojs/components/types/Button";
@ -33,12 +33,14 @@ const MyButton: FC<Props> = (props) => {
} }
return ( return (
<Button <View className={styles.MybuttonBox}>
{...props} <Button
style={buttonStyle()} {...props}
className={`${styles.Mybutton} ${props.className}`}> style={buttonStyle()}
{props.children} className={`${styles.Mybutton} ${props.className}`}>
</Button> {props.children}
</Button>
</View>
) )
} }
export default MyButton export default MyButton

@ -1,13 +1,18 @@
.Mybutton { .Mybutton {
line-height: 76rpx;
background: #45D4A8; background: #45D4A8;
border-radius: 10rpx; border-radius: 10rpx;
color: #fff; color: #fff;
font-size: 32rpx; font-size: 32rpx;
border: none !important; border: none !important;
outline: none !important; outline: none !important;
position: static; position: absolute;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.MybuttonBox {
position: relative;
height: 76rpx;
line-height: 76rpx;
}

@ -58,7 +58,7 @@ const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, sh
</View> </View>
{ {
isProp isProp
&& <CustomPageContainer show={PageShow} position='bottom' round onBeforeLeave={() => setShow(false)}> && <CustomPageContainer show={PageShow} position='bottom' round onClickOverlay={() => setShow(false)}>
{children} {children}
</CustomPageContainer> </CustomPageContainer>
} }

@ -2,7 +2,7 @@ import {useState} from "react";
import {Profile} from '@/store' import {Profile} from '@/store'
import avatar from "@/static/img/avatar.png" import avatar from "@/static/img/avatar.png"
import PopPut from "@/components/popPut/popPut"; import PopPut from "@/components/popPut/popPut";
import {Button, Input, View} from "@tarojs/components"; import {Input, View} from "@tarojs/components";
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import {userApi} from "@/api"; import {userApi} from "@/api";
import styles from './userInfo.module.scss' import styles from './userInfo.module.scss'
@ -29,8 +29,8 @@ const List = () => {
} }
async function putName() { async function putName() {
if (!name) { if (!name && name.length < 2) {
Taro.showToast({title: "名称不能为空", icon: 'error'}) Taro.showToast({title: "名称不能小于2个字", icon: 'error'})
return return
} }
const res = await userApi.putName(user?.id!, name) const res = await userApi.putName(user?.id!, name)
@ -41,6 +41,15 @@ const List = () => {
} }
} }
function outLogin() {
Taro.showModal({
title: '是否确定退出登录',
success({confirm}) {
confirm && empty()
}
})
}
return ( return (
<> <>
@ -48,7 +57,7 @@ const List = () => {
<PopPut title='头像' image={avatar} chevron no_border/> <PopPut title='头像' image={avatar} chevron no_border/>
<PopPut title='手机号' content={user?.phone_number} chevron no_border/> <PopPut title='手机号' content={user?.phone_number} chevron no_border/>
<PopPut title='昵称' content={user?.name} isProp show={show} no_border> <PopPut title='昵称' content={user?.name} isProp show={show} no_border>
<View className='py-4 px-3'> <View className='p-2'>
<View className='text-center font-weigh mb-3'></View> <View className='text-center font-weigh mb-3'></View>
<Input className='input' <Input className='input'
placeholder='请输入昵称' placeholder='请输入昵称'
@ -56,15 +65,15 @@ const List = () => {
cursorSpacing={110} cursorSpacing={110}
value={name} value={name}
/> />
<View className='text-muted my-3 font-24'>4-20_-</View> <View className='text-muted my-3 font-24'>2-20_-</View>
<Button className={styles.button} onClick={putName}></Button> <MyButton onClick={putName}></MyButton>
</View> </View>
</PopPut> </PopPut>
<PopPut title='解绑微信' onClick={unbind} no_border/> <PopPut title='解绑微信' onClick={unbind} no_border/>
</View> </View>
<View className={styles.buttonFixed}> <View className={styles.buttonFixed}>
<MyButton onClick={empty}>退</MyButton> <MyButton onClick={outLogin}>退</MyButton>
</View> </View>
</> </>
) )

@ -13,10 +13,9 @@ body {
} }
.input { .input {
height: 84rpx;
background: #F5F8F7; background: #F5F8F7;
border-radius: 8px; border-radius: 8px;
padding: 0 20px; padding: 10rpx 20rpx;
} }
.form { .form {

Loading…
Cancel
Save