--增加地址管理页面
--编辑地址页面 --地址列表组件 --个人资料编辑页面
This commit is contained in:
li tong bao
@@ -0,0 +1,127 @@
|
||||
.user-edit{
|
||||
height: 100vh;
|
||||
background: #f3f3f3;
|
||||
.user-edit-portrait{
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
display: flex;flex-direction: column;
|
||||
align-items: center;justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
background-color: white;
|
||||
height: 300px;
|
||||
}
|
||||
.user-edit-portrait image{
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.user-edit-content{
|
||||
background-color: white;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.user-edit-list{
|
||||
height: 90px;
|
||||
display: flex;align-items: center;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
.user-edit-list:last-of-type{
|
||||
border: none;
|
||||
}
|
||||
.user-edit-list-left{
|
||||
width: 120px;
|
||||
border-right: 2px solid #f3f3f3;
|
||||
margin-right: 30px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.user-edit-list-right{
|
||||
display: flex;justify-content: space-between;
|
||||
flex: auto;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.user-edit-list-right-placeholder{
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.user-edit-logout{
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
border-radius: 40px;
|
||||
margin: 359px auto 0;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.user-edit-popup-content{
|
||||
margin: 0 auto;
|
||||
width: 658px;
|
||||
}
|
||||
.user-edit-popup-input{
|
||||
width: 658px;
|
||||
height: 182px;
|
||||
background: #f3f3f3;
|
||||
border: 2px solid #e6e6e6;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
display: flex;flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.user-edit-popup-input textarea{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
.user-edit-popup-tips{
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.user-edit-popup-operation{
|
||||
width: 658px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 105px;
|
||||
display: flex;
|
||||
}
|
||||
.user-edit-popup-operation button{
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
background-color: white;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.user-edit-popup-operation .user-edit-popup-operation-save{
|
||||
background: #007aff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.user-edit-popup-operation button::after{ border-radius: 0; }
|
||||
}
|
||||
@@ -1,17 +1,89 @@
|
||||
|
||||
import { Image, View } from "@tarojs/components"
|
||||
import Popup from "@/components/popup";
|
||||
import { Button, Image, Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useState } from "react"
|
||||
import "./index.scss"
|
||||
|
||||
export default ()=>{
|
||||
// 表单数据
|
||||
const [formData, setFormData] = useState({
|
||||
nickname: "麦兜"
|
||||
});
|
||||
|
||||
// 显示popup
|
||||
const [popupShow,setPopupShow] = useState(false);
|
||||
const triggerList = useCallback((key:string)=>{
|
||||
setPopupShow(true);
|
||||
},[])
|
||||
|
||||
// popup保存
|
||||
const handleTextareaSave = ()=>{
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="user-edit">
|
||||
<View>
|
||||
<View className="user-edit-portrait">
|
||||
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c"/>
|
||||
<View>点击编辑头像</View>
|
||||
</View>
|
||||
<View>
|
||||
|
||||
<View className="user-edit-content">
|
||||
<UserEditList onClick={()=>triggerList('nickname')} data={formData} label="昵称" placeholder="请输入" icon=""/>
|
||||
<UserEditList label="公司/组织" placeholder="请输入" icon=""/>
|
||||
<UserEditList label="地址管理" placeholder="添加 / 修改收货地址" icon=""/>
|
||||
<UserEditList label="码单管理" placeholder="修改码单抬头 / 客户 / 电话等显示信息" icon=""/>
|
||||
<UserEditList label="完善资料" placeholder="完善资料加入会员，申请更多优惠" icon=""/>
|
||||
<UserEditList label="账号解绑" placeholder="解除账号与所属公司/组织的绑定关系" icon=""/>
|
||||
</View>
|
||||
<Button hoverClass="none" className="user-edit-logout">退出当前账号</Button>
|
||||
|
||||
<PopupContent show={popupShow} setPopupShow={setPopupShow} save={handleTextareaSave}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 列表
|
||||
const UserEditList = memo((props:any)=>{
|
||||
return (
|
||||
<View onClick={props.onClick} className="user-edit-list">
|
||||
<View className="user-edit-list-left">
|
||||
{props.label}
|
||||
</View>
|
||||
<View className="user-edit-list-right">
|
||||
<View>
|
||||
<View className="user-edit-list-right-placeholder">{props.placeholder}</View>
|
||||
{/* 请输入 */}
|
||||
</View>
|
||||
<Text>1</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// popup内容
|
||||
const PopupContent = memo((props:any)=>{
|
||||
// popup输入长度
|
||||
const [inputLength, setInputLength] = useState(0);
|
||||
const handleTextareaInput = (ev:any)=>{
|
||||
setInputLength(ev.detail.value.length);
|
||||
}
|
||||
// 重置
|
||||
const handleTextareaReset = ()=>{
|
||||
|
||||
}
|
||||
return (
|
||||
<Popup onClose={()=>props.setPopupShow(false)} title="修改昵称" show={props.show}>
|
||||
<View className="user-edit-popup-content">
|
||||
<View className="user-edit-popup-input">
|
||||
<Textarea onInput={handleTextareaInput} maxlength={20}/>
|
||||
<Text>{inputLength}/20</Text>
|
||||
</View>
|
||||
<Text className="user-edit-popup-tips">请设置2-20个字符，由中文、英文、数字、-和_组成</Text>
|
||||
<View className="user-edit-popup-operation">
|
||||
<Button onClick={handleTextareaReset} hoverClass="none" className="user-edit-popup-operation-reset">重置</Button>
|
||||
<Button onClick={props.save} hoverClass="none" className="user-edit-popup-operation-save">保存</Button>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user