xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

--增加地址管理页面

Browse Source 
--编辑地址页面
--地址列表组件
--个人资料编辑页面
This commit is contained in:
li tong bao 2022-04-20 11:08:45 +08:00
parent c7928e08ce
commit 0a88dcd28a
12 changed files with 511 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.config.ts
View File

@ -59,6 +59,18 @@ export default {
pages: [
"index"
]
},
{
root: "pages/addressManager",
pages: [
"index"
]
},
{
root: "pages/addAddress",
pages: [
"index"
]
}
]
}

75
src/components/AddressList/index.scss Normal file
View File

@ -0,0 +1,75 @@
.address-scroll-view{
height: 100%;
box-sizing: border-box;
position: relative;
scroll-view{
height: 100%;
box-sizing: border-box;
}
.address-list{
width: 704px;
height: 156px;
background: #ffffff;
border-radius: 20px;
box-shadow: 2px 4px 12px 0px rgba(0,0,0,0.16);
padding: 30px;
box-sizing: border-box;
margin: 18px auto 0;
}
.address-list:hover{
border: 1px solid #68b4ff;
box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27);
}
.address-list:last-child{
margin-bottom: 300px;
}
.address-user{
font-size: 28px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #000000;
display: flex;align-items: center;
}
.address-list-default{
width: 58px;
height: 28px;
background: #cde5ff;
border-radius: 6px;
font-size: 20px;
font-weight: 400;
text-align: center;
color: #007aff;
margin-left: 30px;
}
.address-list-phone{
font-size: 24px;
font-weight: 400;
color: #ababab;
margin-left: 30px;
}
.address-list-info{
font-size: 24px;
font-weight: 400;
color: #3c3c3c;
}
.address-list-bottom{
display: flex;justify-content: space-between;
margin-top: 18px;
}
.add-address{
width: 668px;
height: 82px;
background: #007aff;
border-radius: 40px;
font-size: 32px;
font-weight: 400;
color: #ffffff;
display: flex;align-items: center;justify-content: center;
position: absolute;bottom: 8%;left: 50%;
transform: translateX(-50%);
}
}

53
src/components/AddressList/index.tsx Normal file
View File

@ -0,0 +1,53 @@
import { Button, ScrollView, Text, View } from "@tarojs/components"
import { useState } from "react"
import "./index.scss"
interface Params{
refresherEnabled?: boolean,//是否开启刷新
onSelect?: (item:any,index:number)=>void,//列表选择
}
// 地址列表
const AddressList = (props:Params)=>{
// 处理刷新
const [refreshState, setRefreshState] = useState(false);
const handleRefresh = ()=>{
setRefreshState(true);
setTimeout(()=>{
setRefreshState(false);
},3000)
}
return (
<View className="address-scroll-view">
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
{
Array.from({length:15}).map((item,index)=>{
return(
<View onClick={()=>props.onSelect&&props.onSelect(item,index)} className="address-list">
<View className="address-user">
XL纺织
<Text className="address-list-default">默认</Text>
{/* <Text className="address-list-phone">1656488999</Text> */}
</View>
<View className="address-list-bottom">
<View className="address-list-info">
**省**市**区**街道****仓库
<Text className="address-list-phone">181****9790</Text>
</View>
<View className="address-edit">1</View>
</View>
</View>
);
})
}
</ScrollView>
<Button hoverClass="none" className="add-address">添加收货地址</Button>
</View>
)
}
export default AddressList;

6
src/components/address/index.module.scss
View File

@ -15,7 +15,7 @@
margin-top: 10px;
font-size: $font_size_medium;
border-bottom: 1px solid $color_font_two;
color: $common_title_font_color;
color: $color_font_two;
position: relative;
.address_item{
padding: 0 20px;
@ -37,7 +37,7 @@
height: 600px;
.address_scroll_list{
padding: 0 20px;
font-size: $common_main_font_size2;
font-size: $font_size;
.address_list_item{
padding: 20px 0;
display: flex;
@ -54,6 +54,6 @@
}
.addresst_select{
color:$color_font_two;
color:$color_font_one;
}
}

3
src/pages/addAddress/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '新增收货地址'
}

64
src/pages/addAddress/index.scss Normal file
View File

@ -0,0 +1,64 @@
.add-address{
.form-list{
display: flex;
justify-content: space-between;
margin: 30px 30px 0;
}
.form-list-label{
font-size: 28px;
font-weight: 700;
color: #000000;
margin-top: 20px;
}
.form-list-right{
width: 506px;
min-height: 80px;
background: #f6f6f6;
border-radius: 20px;
padding: 10px 20px;
box-sizing: border-box;
font-size: 26px;
font-weight: 400;
display: flex;justify-content: space-between;
align-items: center;
}
.form-list-right input,.form-list-right textarea{
flex: 0 0 auto;
min-height: 100%;
width: 100%;
color: #000000;
}
.form-list-right textarea{
height: 186px;
border-radius: 10px;
}
.form-list-right .phcolor{
color: #ababab;
}
.form-list-right-placeholder{
color: #ababab;
}
.form-list-right-enter{
}
.add-address-default{
display: flex;align-items: center;justify-content: space-between;
margin: 70px 30px 0;
font-size: 26px;
font-weight: 700;
color: #000000;
}
.add-address-save{
width: 668px;
height: 82px;
background: #007aff;
border-radius: 40px;
font-size: 32px;
font-weight: 400;
color: #ffffff;
display: flex;align-items: center;justify-content: center;
margin: 620px auto 0;
}
}

76
src/pages/addAddress/index.tsx Normal file
View File

@ -0,0 +1,76 @@
import Address from "@/components/address"
import { Button, Input, Text, Textarea, View } from "@tarojs/components"
import { useState } from "react"
import "./index.scss"
export default ()=>{
const [showSiteModal, setShowSiteModal] = useState(false);
const handleSelectSite = ()=>{
setShowSiteModal(true);
}
// 保存
const [formData, setFormData] = useState({
aa: "",
bb:"",
cc:"",
dd:""
})
const handleSave = ()=>{
}
return (
<View className="add-address">
<FromList value={formData["aa"]} label="联系人" placeholder="请输入收货人姓名"/>
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入收货人姓名"/>
<FromList value={formData["cc"]} onClick={handleSelectSite} label="收地址" type="select" placeholder="请选择/省/市/区"/>
<FromList value={formData["dd"]} label="详细地址" type="textarea" placeholder="请输入详细地址（街道、门牌号等）"/>
<View className="add-address-default">
<Text>设为默认地址</Text>
<View>1</View>
</View>
<Button hoverClass="none" className="add-address-save" onClick={handleSave}>保存</Button>
<Address addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
</View>
)
}
// 表单列表
const FromList = (props:ListParams)=>{
const {type="input",value=""} = props;
return (
<View className="form-list">
<View className="form-list-label">{props.label}</View>
<View onClick={props?.onClick} className="form-list-right">
{
props.children??(
type=="input"?<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
<>
{
props.value?<View>{value}</View>:
<View className="form-list-right-placeholder">
{props.placeholder}
</View>
}
<View className="form-list-right-enter">1</View>
</>
)
}
</View>
</View>
)
}
interface ListParams{
label: string, //左边label
onInput?: ()=>any, // 输入框输入
onClick?:()=>any, //点击列表
placeholder?:string, // 提示文本
children?: any, // 插槽
type?: string // 类型：1.input,2.textarea,3.select
value?: any
}

3
src/pages/addressManager/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '地址管理'
}

3
src/pages/addressManager/index.scss Normal file
View File

@ -0,0 +1,3 @@
.address-manager{
height: 100vh;
}

15
src/pages/addressManager/index.tsx Normal file
View File

@ -0,0 +1,15 @@
import AddressList from "@/components/AddressList"
import { Button, ScrollView, Text, View } from "@tarojs/components"
import { stopPullDownRefresh, usePullDownRefresh } from "@tarojs/taro"
import { useState } from "react"
import "./index.scss"
export default ()=>{
return (
<View className="address-manager">
<AddressList refresherEnabled={true}/>
</View>
)
}

127
src/pages/userEdit/index.scss
View File

@ -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; }
}

82
src/pages/userEdit/index.tsx
View File

@ -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>
)
})