✨ feat(购物页面): 已完成页面逻辑，等待对接接口

2022-09-16 19:06:00 +08:00
parent c2fa0766aa
commit ad32aa5773
13 changed files with 424 additions and 184 deletions
@@ -10,6 +10,7 @@ type params = {
  onSelect?: () => void //选择触发
  onClose?: () => void //取消触发
  status?: boolean //是否选中
+  hidden?: boolean   // 隐藏单选框
  disabled?: boolean //是否禁用
  triggerLabel?: boolean   // 点击label是否触发选中
  circle?: boolean
@@ -34,6 +35,7 @@ export default forwardRef((props: params, ref) => {
    customStyles = {},
    customClassName = '',
    customTextClass = '',
+    hidden = false,
  } = props
  const [selected, SetSelected] = useState(false)
  const onSelectEven = () => {
@@ -79,7 +81,7 @@ export default forwardRef((props: params, ref) => {
  }, [status])
  return (
    <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
-      <View className={classnames(styles.checkbox_main, getMainClassName())}>
+      <View className={classnames(styles.checkbox_main, getMainClassName())} hidden={hidden}>
        <View className={classnames(styles.checkbox_item, getClassName())}>
          {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
        </View>
@@ -1,5 +1,5 @@
 import { ScrollView, View } from "@tarojs/components"
-import { memo, ReactNode, useMemo, useState } from "react"
+import React, { memo, ReactNode, useMemo, useState } from "react"
 import style from "./index.module.scss"
 import DotLoading from "@/components/dotLoading"
 import LoadingCard from "../loadingCard"
@@ -7,111 +7,121 @@ import LoadingCard from "../loadingCard"
 export type StatusParam = 0|1|2|3

 type Params = {
-    styleObj?: Object,
-    selfonScrollToLower?: () => void,
-    hasMore?: false|true, 
-    moreStatus?: false|true,
-    statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
-    children?: ReactNode,
-    lowerThresholdNum?: number,
-    selfOnScrollToUpper?:() => void
-    selfOnScroll?:(val:any) => void
-    selfOnRefresherPulling?: () => void
-    selfOnRefresherRefresh?: () => void
-    selfOnRefresherRestore?: () => void
-    selfOnRefresherAbort?: () => void
-    paddingBottom?: number,
-    refresherTriggered?: true|false,
-    refresherEnabled?: true|false,
+  styleObj?: React.CSSProperties
+  selfonScrollToLower?: () => void
+  hasMore?: boolean
+  moreStatus?: boolean
+  statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
+  children?: ReactNode
+  lowerThresholdNum?: number
+  selfOnScrollToUpper?: () => void
+  selfOnScroll?: (val: any) => void
+  selfOnRefresherPulling?: () => void
+  selfOnRefresherRefresh?: () => void
+  selfOnRefresherRestore?: () => void
+  selfOnRefresherAbort?: () => void
+  paddingBottom?: number
+  refresherTriggered?: boolean
+  refresherEnabled?: boolean
+  enableBackToTop?: boolean
 }
-export default memo(({
-    styleObj, 
-    selfonScrollToLower, 
+export default memo(
+  ({
+    styleObj,
+    selfonScrollToLower,
    selfOnScrollToUpper,
    selfOnScroll,
    selfOnRefresherPulling,
    selfOnRefresherRefresh,
    selfOnRefresherRestore,
    selfOnRefresherAbort,
-    hasMore=true, 
-    children, 
-    lowerThresholdNum = 5, 
+    hasMore = true,
+    children,
+    lowerThresholdNum = 5,
    paddingBottom = 0,
    refresherTriggered = false,
    refresherEnabled = false,
    moreStatus = true,
-    statusMore = 0
-}: Params) => {
+    statusMore = 0,
+    enableBackToTop=true,
+  }: Params) => {
    const scrollToLower = () => {
-        selfonScrollToLower?.()
+      selfonScrollToLower?.()
    }
    const scrollToUpper = () => {
-        selfOnScrollToUpper?.()
+      selfOnScrollToUpper?.()
    }
    const scroll = (e) => {
-        selfOnScroll?.(e)
+      selfOnScroll?.(e)
    }
    const refresherPulling = () => {
-        selfOnRefresherPulling?.()
+      selfOnRefresherPulling?.()
    }
    const refresherRefresh = () => {
-        selfOnRefresherRefresh?.()
+      selfOnRefresherRefresh?.()
    }
    const refresherRestore = () => {
-        selfOnRefresherRestore?.()
+      selfOnRefresherRestore?.()
    }
    const refresherAbort = () => {
-        selfOnRefresherAbort?.()
+      selfOnRefresherAbort?.()
    }

    //返回顶部
    const scrollTop = useMemo(() => {
-        if(statusMore == 0) {
-            return 0.1
-        }
-    },[statusMore])
+      if (statusMore == 0) {
+        return 0.1
+      }
+    }, [statusMore])

    return (
-        <>
-            <ScrollView 
-                style={styleObj}  
-                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 ='#F8F8F8'
-                scrollTop={scrollTop}
-            >
-                {!moreStatus&&<>
-                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
-                        {children}
-                    </View>
-                </>||
-                <>
-                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
-                            {children}
-                            <View className={style.infinite_scroll}>
-                                {
-                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
-                                    <View className={style.noMore}>没有更多数据了</View>
-                                }
-                            </View>
-                        </View>
-                    }
-                    {(statusMore == 0)&&<LoadingCard/>}
-                    {(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
-                </>}
-                
-                <View className="common_safe_area_y"></View>
-            </ScrollView>
-        </>
+      <>
+        <ScrollView
+          style={styleObj}
+          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='#F8F8F8'
+          enableBackToTop={enableBackToTop}
+          scrollTop={scrollTop}>
+          {(!moreStatus && (
+            <>
+              <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
+                {children}
+              </View>
+            </>
+          )) || (
+            <>
+              {(statusMore == 2 || statusMore == 3) && (
+                <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
+                  {children}
+                  <View className={style.infinite_scroll}>
+                    {(statusMore == 2 && (
+                      <View className={style.loading_more}>
+                        加载中
+                        <DotLoading />
+                      </View>
+                    )) || <View className={style.noMore}>没有更多数据了</View>}
+                  </View>
+                </View>
+              )}
+              {statusMore == 0 && <LoadingCard />}
+              {statusMore == 1 && <LoadingCard loadingIcon={false} title='暂无数据' />}
+            </>
+          )}
+
+          <View className='common_safe_area_y'></View>
+        </ScrollView>
+      </>
    )
-})
+  },
+)
@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { Button, Radio, View } from '@tarojs/components'
 import { FC, ReactNode } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -7,7 +7,7 @@ type FlexDirection = 'row' | 'col'

 interface PropsType {
  flexDirection?: FlexDirection
-  
+  onClick?: Function
  circle?: boolean
  children?: ReactNode
  customStyle?: React.CSSProperties
@@ -15,7 +15,7 @@ interface PropsType {
 }

 const LayoutBlock: FC<PropsType> = (props) => {
-  const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName='' } = props
+  const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName = '', onClick } = props

  const getClassName = () => {
    const classObject = {
@@ -25,8 +25,16 @@ const LayoutBlock: FC<PropsType> = (props) => {
    return classObject
  }

+  const handleClick = (event)=>{
+    console.log('event==>', event)
+    onClick && onClick()
+  }
+
  return (
-    <View className={classnames(styles.layoutBlock, getClassName(), customClassName)} style={customStyle}>
+    <View
+      className={classnames(styles.layoutBlock, getClassName(), customClassName)}
+      style={customStyle}
+      onClick={handleClick}>
      {children}
    </View>
  )