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

公共添加

Browse Source
This commit is contained in:
czm 2022-04-18 11:50:05 +08:00
parent c9d6d1a063
commit 9653ad4990
5 changed files with 376 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/address/index.module.scss Normal file
View File

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

233
src/components/address/index.tsx Normal file
View File

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

55
src/components/infiniteScroll/index.tsx
View File

@ -9,12 +9,54 @@ type Params = {
hasMore?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
paddingBottom?: number
selfOnScrollToUpper?:() => void
selfOnScroll?:(val:any) => void
selfOnRefresherPulling?: () => void
selfOnRefresherRefresh?: () => void
selfOnRefresherRestore?: () => void
selfOnRefresherAbort?: () => void
paddingBottom?: number,
refresherTriggered?: true|false,
refresherEnabled?: true|false
}
export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
export default memo(({
styleObj,
selfonScrollToLower,
selfOnScrollToUpper,
selfOnScroll,
selfOnRefresherPulling,
selfOnRefresherRefresh,
selfOnRefresherRestore,
selfOnRefresherAbort,
hasMore=true,
children,
lowerThresholdNum = 5,
paddingBottom = 0,
refresherTriggered = false,
refresherEnabled = false
}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
}
const scrollToUpper = () => {
selfOnScrollToUpper?.()
}
const scroll = (e) => {
selfOnScroll?.(e)
}
const refresherPulling = () => {
selfOnRefresherPulling?.()
}
const refresherRefresh = () => {
selfOnRefresherRefresh?.()
}
const refresherRestore = () => {
selfOnRefresherRestore?.()
}
const refresherAbort = () => {
selfOnRefresherAbort?.()
}
return (
<>
<ScrollView
@ -22,7 +64,16 @@ export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, low
className={style.scroll_main}
scrollY
onScrollToLower={() => scrollToLower()}
onScrollToUpper={() => scrollToUpper()}
onScroll={(e) => scroll(e)}
lowerThreshold={lowerThresholdNum}
refresherEnabled = {refresherEnabled}
refresherTriggered = {refresherTriggered}
onRefresherPulling = {() => refresherPulling()}
onRefresherRefresh = {() => refresherRefresh()}
onRefresherRestore = {() => refresherRestore()}
onRefresherAbort = {() => refresherAbort()}
refresherBackground ='#ccc'
>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{children}

20
src/pages/searchList/index.module.scss
View File

@ -57,11 +57,18 @@
.filter_scroll{
flex:1;
width: 0;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex:1;
view{
font-size: $font_size_medium;
@ -75,6 +82,9 @@
&:nth-last-child(n+2) {
margin-right: 10px;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.selected{
background-color: #ecf5ff;
@ -94,12 +104,11 @@
&::before{
content: '';
opacity: 1;
width: 60px;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-color: red;
background: linear-gradient(to right, #fff 30%, rgba(255,255,255, 0.3) );
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
@ -115,10 +124,15 @@
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
}
.list_num_shadow {
box-shadow: 0px 5px 5px #ccc;
}
.scroll{
flex:1;
height:0;
padding-top: 3px;
}
.product_list{
padding: 38px;

17
src/pages/searchList/index.tsx
View File

@ -6,7 +6,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import Tabs from "@/components/tabs";
import styles from './index.module.scss'
import { useState } from "react";
import { useCallback, useState } from "react";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@ -21,6 +21,14 @@ export default () => {
{title: '系列', value:5},
{title: '系列', value:5},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
setScrollStatus(true)
} else {
setScrollStatus(false)
}
},[])
return (
<View className={styles.main}>
<View className={styles.search}>
@ -60,9 +68,12 @@ export default () => {
</View>
<View className={styles.list}>
<View className={styles.list_num}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
selfOnScroll={(e) => onscroll(e)}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>