公共添加
This commit is contained in:
li tong bao
@@ -0,0 +1,59 @@
|
||||
.address_main{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.address_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color:$color_font_two;
|
||||
font-size: $font_size;
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.address_select{
|
||||
display: flex;
|
||||
padding: 30px 0;
|
||||
margin-top: 10px;
|
||||
font-size: $font_size_medium;
|
||||
border-bottom: 1px solid $color_font_two;
|
||||
color: $common_title_font_color;
|
||||
position: relative;
|
||||
.address_item{
|
||||
padding: 0 20px;
|
||||
max-width: 200px;
|
||||
@include common_ellipsis()
|
||||
}
|
||||
.bottom_index{
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
border-radius: 50px;
|
||||
background-color:$color_font_two;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: left 0.1s;
|
||||
}
|
||||
}
|
||||
.address_scroll{
|
||||
height: 600px;
|
||||
.address_scroll_list{
|
||||
padding: 0 20px;
|
||||
font-size: $common_main_font_size2;
|
||||
.address_list_item{
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.address_list_item_name{
|
||||
@include common_ellipsis()
|
||||
}
|
||||
.address_iconfont{
|
||||
font-size: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.addresst_select{
|
||||
color:$color_font_two;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import { ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, ReactHTMLElement, useEffect, useRef, useState } from "react";
|
||||
import Drawer from "@/components/popup";
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
type Params = {
|
||||
addressOnSelect?: ({}:{name: string, id:string|number}) => void,
|
||||
addressOnClose?: () => void,
|
||||
show?: true|false
|
||||
}
|
||||
|
||||
export default memo(({
|
||||
addressOnSelect,
|
||||
addressOnClose,
|
||||
show = false
|
||||
|
||||
}: Params) => {
|
||||
const list1 = [
|
||||
{
|
||||
name:'广东1',
|
||||
id:1
|
||||
},
|
||||
{
|
||||
name:'广东2',
|
||||
id:2
|
||||
},
|
||||
{
|
||||
name:'广东3',
|
||||
id:3
|
||||
},
|
||||
{
|
||||
name:'广东4',
|
||||
id:4
|
||||
},
|
||||
{
|
||||
name:'广东5',
|
||||
id:5
|
||||
},
|
||||
{
|
||||
name:'广东6',
|
||||
id:6
|
||||
}
|
||||
]
|
||||
|
||||
const list2 = [
|
||||
{
|
||||
name:'佛山1佛山1佛山1佛山1佛山1',
|
||||
id:7
|
||||
},
|
||||
{
|
||||
name:'佛山2',
|
||||
id:8
|
||||
},
|
||||
{
|
||||
name:'佛山3',
|
||||
id:9
|
||||
},
|
||||
{
|
||||
name:'佛山4',
|
||||
id:10
|
||||
},
|
||||
{
|
||||
name:'佛山5',
|
||||
id:11
|
||||
},
|
||||
{
|
||||
name:'佛山6',
|
||||
id:12
|
||||
}
|
||||
]
|
||||
|
||||
const list3 = [
|
||||
{
|
||||
name:'禅城区1',
|
||||
id:13
|
||||
},
|
||||
{
|
||||
name:'禅城区2',
|
||||
id:14
|
||||
},
|
||||
{
|
||||
name:'禅城区3',
|
||||
id:15
|
||||
},
|
||||
{
|
||||
name:'禅城区4',
|
||||
id:16
|
||||
},
|
||||
{
|
||||
name:'禅城区5',
|
||||
id:17
|
||||
},
|
||||
{
|
||||
name:'禅城区6',
|
||||
id:18
|
||||
}
|
||||
]
|
||||
|
||||
const [list, setList] = useState(list1)
|
||||
const [selectIndex, setSelectIndex] = useState(0) //0 省， 1 市，2 区
|
||||
const [selectId, setSelectId] = useState(0) //选中的id
|
||||
const [selectArr, setSelectArr] = useState<any>([]) //选中的省市区
|
||||
const [cityStatus, setCityStatus] = useState(false) //城市是否存在
|
||||
const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
|
||||
|
||||
const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式
|
||||
|
||||
//选中内容
|
||||
const selectItem = (item) => {
|
||||
setSelectId(item.id)
|
||||
if(selectIndex == 0) {
|
||||
setSelectArr([item])
|
||||
getCity()
|
||||
setAreaStatus(false)
|
||||
setCityStatus(false)
|
||||
} else if(selectIndex == 1){
|
||||
setSelectArr([selectArr[0], item])
|
||||
area()
|
||||
} else {
|
||||
setSelectArr([selectArr[0], selectArr[1], item])
|
||||
}
|
||||
}
|
||||
|
||||
//选中标题
|
||||
const onSelectIndex = (index) => {
|
||||
setSelectIndex(index)
|
||||
const selectid = selectArr[index]?selectArr[index].id:0
|
||||
setSelectId(selectid)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if(selectIndex == 0) {
|
||||
setList(list1)
|
||||
// getDomDes('#address_tab_0')
|
||||
} else if (selectIndex == 1) {
|
||||
getCity()
|
||||
} else {
|
||||
area()
|
||||
}
|
||||
}, [selectIndex])
|
||||
|
||||
//获取市
|
||||
const getCity = () => {
|
||||
|
||||
setTimeout(() => {
|
||||
if(list2.length > 0) {
|
||||
setSelectIndex(1)
|
||||
setList(() => { return list2 })
|
||||
setCityStatus(true)
|
||||
getDomDes('#address_tab_1')
|
||||
} else {
|
||||
setCityStatus(false)
|
||||
}
|
||||
},10)
|
||||
}
|
||||
|
||||
//获取区
|
||||
const area = () => {
|
||||
// setAreaStatus(false)
|
||||
setTimeout(() => {
|
||||
if(list3.length > 0) {
|
||||
setSelectIndex(2)
|
||||
setList(() => { return list3 })
|
||||
setAreaStatus(true)
|
||||
getDomDes('#address_tab_2')
|
||||
} else {
|
||||
setAreaStatus(false)
|
||||
}
|
||||
},10)
|
||||
}
|
||||
|
||||
//确定按钮
|
||||
const submitSelect = () => {
|
||||
addressOnClose?.()
|
||||
addressOnSelect?.(selectArr)
|
||||
}
|
||||
|
||||
//获取省市区宽度
|
||||
const getDomDes = (id) => {
|
||||
Taro.nextTick(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select(id).boundingClientRect(rect=>{
|
||||
let left = rect.left;
|
||||
let clientWidth = rect.width;
|
||||
setBottomStyle({
|
||||
width: clientWidth + 'px',
|
||||
left: left + 'px'
|
||||
})
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
|
||||
//点击标题栏
|
||||
const selectTab = (index) => {
|
||||
onSelectIndex(index)
|
||||
getDomDes('#address_tab_'+index)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer showTitle={false} show={show} onClose={() => addressOnClose?.()}>
|
||||
<View className={styles.address_main}>
|
||||
<View className={styles.address_title}>
|
||||
<View onClick={() => addressOnClose?.()}>取消</View>
|
||||
<View onClick={() => submitSelect()}>确定</View>
|
||||
</View>
|
||||
<View className={styles.address_select}>
|
||||
<View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 0)})}>{selectArr[0]?selectArr[0].name:'请选择'}</View>
|
||||
{cityStatus&&<View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 1)})}>{selectArr[1]?selectArr[1].name:'请选择'}</View>}
|
||||
{areaStatus&&<View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 2)})}>{selectArr[2]?selectArr[2].name:'请选择'}</View>}
|
||||
<View style={bottomStyle} className={styles.bottom_index}></View>
|
||||
</View>
|
||||
<View className={styles.address_list}>
|
||||
<ScrollView scrollY className={styles.address_scroll}>
|
||||
<View className={styles.address_scroll_list}>
|
||||
{list.map(item => {
|
||||
return (
|
||||
<View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
|
||||
<View className={styles.address_list_item_name}>{item.name}</View>
|
||||
{(selectId == item.id)&&<View className={`iconfont icon-a-tick1 ${styles.address_iconfont}` }></View>}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user