Merge branch 'dev' of http://git.ycjcjy.com/shigongli/miniapp-v2 into dev

src/components/MasonryLayout/index.jsx

@@ -4,8 +4,12 @@ import { View } from '@tarojs/components';
 import { useList } from './hooks';
 import { classNames, getRect } from './utils';
 
+import './style.less'
+
 export default (props) => {
-  const { className, itemClassName, style, gutter = 0, list = [], render, ...leftProps } = props
+  const { className, itemClassName, style, gutter = 0, list, render, ...leftProps } = props
+
+  const splitStyle = { width: `${gutter}rpx` }
 
   const leftBottom = useRef(0)
   const rightBottom = useRef(0)
@@ -20,25 +24,22 @@ export default (props) => {
   useEffect(() => {
     if (list && list.length) {
       setCursor(0)
-      setLeftList([])
-      setRightList([])
-      console.log('----------useEffect--------')
     } else {
       setCursor(-1)
+      setLeftList([])
+      setRightList([])
     }
   }, [list])
 
   useEffect(() => {
     const len = !listRef.current ? 0 : listRef.current.length;
 
-    if (!len || cursor >= len) return;
+    if (leftRef.current.length + rightRef.current.length >= len) return;
 
     const item = listRef.current[cursor] || {}
     item.__vid = `f-${Math.random().toString(36).substring(2)}`
     vidRef.current = item.__vid
 
-    console.log('----------leftRef.current--------', leftRef.current, rightRef.current)
-
     if (leftBottom.current <= rightBottom.current) {
       setLeftList([...leftRef.current, item])
     } else {
@@ -46,12 +47,8 @@ export default (props) => {
     }
   }, [cursor])
 
-  
-  console.log('---------dddddddd------', vidRef.current, leftRef.current.length, leftList)
-
   useEffect(() => {
     const setHeight = (rect) => {
-      console.log('---------rect------', rect)
       const { bottom } = rect
       if (cursor % 2 === 0) {
         leftBottom.current = bottom
@@ -63,13 +60,18 @@ export default (props) => {
 
     const calcHeight = () => {
       getRect(`.${vidRef.current}`).then((res) => {
-        if (!res || !res.length) {
+        if (!res) {
+          // 找不到 node , 则一直重复查询
           const t = setTimeout(() => {
             clearTimeout(t)
             calcHeight()
           }, 300)
         } else {
-          setHeight(res[0])
+          if (Array.isArray(res)) {
+            setHeight(res[0])
+          } else {
+            setHeight(res)
+          }
         }
       })
     }
@@ -89,6 +91,7 @@ export default (props) => {
           ))
         }
       </View>
+      <View className='masonry-split' style={splitStyle} />
       <View className='masonry-column'>
         {
           rightList.map((item) => (

src/components/MasonryLayout/style.less

@@ -7,6 +7,10 @@
   .masonry-column {
     flex: 1;
   }
+  
+  .masonry-split {
+    flex: none;
+  }
 
   .masonry-item {
     width: 100%;

src/components/tip/index.jsx

@@ -4,7 +4,9 @@ import { useState, useEffect } from 'react';
 import icontip from '@/assets/icons/housemantj/tip.png'
 import './index.less'
 
-export default () => {
+export default (props) => {
+  const { style } = props
+
   const [tips, setTips] = useState([])
   useEffect(() => {
     getTipList(1).then((res) => {
@@ -12,7 +14,7 @@ export default () => {
     })
   }, [])
   return (
-    <view className='tip'>
+    <view className='tip' style={style}>
       <image className='tipicon' src={icontip} />
       <Swiper
         className='swp'

src/pages/PayOrder/index.jsx

@@ -89,10 +89,10 @@ export default withLayout((props) => {
 
   const onShowPay = (e) => {
     if (agreement) {
-      if (payInfo) {
-        requestPayment(payInfo);
-        return;
-      }
+      // if (payInfo) {
+      //   requestPayment(payInfo);
+      //   return;
+      // }
 
       Taro.showLoading({
         title: '支付中',
@@ -108,7 +108,7 @@ export default withLayout((props) => {
             };
           })
         ).then((res) => {
-          setPayInfo(res);
+          // setPayInfo(res);
           requestPayment(res);
         }).catch(() => {
           Taro.hideLoading()
@@ -121,7 +121,7 @@ export default withLayout((props) => {
       }
       if (orderId) {
         payOrder(orderId).then((res) => {
-          setPayInfo(res);
+          // setPayInfo(res);
           requestPayment(res);
         }).catch(() => {
           Taro.hideLoading()

src/pages/index/tabs/Recommend.jsx

@@ -6,7 +6,7 @@ import locationimg from '@/assets/icons/housemantj/location.png'
 import Tip from '@/components/tip'
 import List from '@/components/List';
 import NoData from '@/components/NoData'
-import MasonryLayout from '@/components/MasonryLayout';
+import SpinBox from '@/components/Spin/SpinBox';
 import { getIndexType, getResourceList } from '@/services/home'
 import Card from '../components/Card'
 import './less/Recommend.less'
@@ -74,7 +74,7 @@ export default (props) => {
   return (
     // <view style={{ height: '100%', overflow: 'hidden',display:'flex',flexDirection:'column' }}>
     <view style={{ height: '100%', overflow: 'hidden' }}>
-      <view className='search' onClick={onSearch}>
+      <view className='search' onClick={onSearch} >
         <input className='searchInput' disabled />
         <image className='searchicon' src={iconsearch} />
         <view className='searchword'>搜索</view>
@@ -99,30 +99,31 @@ export default (props) => {
           </mp-tabs>
         </scroll-view>
       </view>
-      {/* <View style={{flex:'auto'}}> */}
-      <List
-        ref={listRef}
-        // style={{ height: '100%' }}
-        style={{ height: 'calc(100% - 145px)' }}
-        request={getResourceList}
-        params={queryParams}
-        onDataChange={setAllList}
-      >
-        {/* <MasonryLayout
-          list={alllist}
-          render={item => <Card item={item} />}
-        /> */}
-
-        {
-          alllist.length == 0 ?
-            <NoData /> :
-            <view className='waterfall'>
-              {
-                alllist.map((item) => <Card key={item.resourceNo} item={item} />)
-              }
-            </view>
-        }
-      </List>
+      {/* <View style={{ flex:'auto' }}> */}
+        <List
+          ref={listRef}
+          style={{ height: 'calc(100% - 145px)' }}
+          // style={{ flex: 'auto', height: '100%' }}
+          request={getResourceList}
+          params={queryParams}
+          onDataChange={setAllList}
+        >
+          {/* <MasonryLayout
+            className='waterfall'
+            list={alllist}
+            render={item => <Card item={item} />}
+          /> */}
+
+          {
+            alllist.length == 0 ?
+              <NoData /> :
+              <view className='waterfall'>
+                {
+                  alllist.map((item) => <Card key={item.resourceNo} item={item} />)
+                }
+              </view>
+          }
+        </List>
       {/* </View> */}
     </view>
   )

src/pages/index/tabs/less/Recommend.less

@@ -32,7 +32,7 @@
   column-gap: 30px;    //列间距
   background-color: #F8F8F8;
   padding:30px 30px 0 30px; 
-} 
+}
 .botton{
   font-size: 28px;
   color: #C0C8D3;
@@ -87,4 +87,4 @@
     text-align: center;
     border-bottom: 6px solid #4C4C4C;
   }
-}
+}