feats

src/components/CouponCard/Cashback/index.jsx

@@ -4,14 +4,14 @@ import { View, Text } from '@tarojs/components'
 import './style.less'
 
 export default (props) => {
-  const { money, prefix = '返现', style } = props
+  const { money, prefix = '返', style } = props
 
-  const yuan = Number(money / 100).toFixed(2)
+  const yuan = Number(money / 100).toFixed(0)
 
   return (
     <View className='cpn_cashback' style={style}>
-      <Text>{prefix}</Text>
-      <Text>{`￥${yuan}`}</Text>
+      <Text style={{ fontSize: '.6em' }}>{`${prefix}￥`}</Text>
+      <Text>{`${yuan}`}</Text>
     </View>
   )
 }

src/components/CouponCard/Cashback/style.less

@@ -4,7 +4,7 @@
   background: url('~@/assets/icons/ProCard/ProCard_hot.png') no-repeat;
   background-size: 100% 100%;
   padding: 16px 25px 10px 10px;
-  font-size: 20px;
+  font-size: 44px;
   color: #fff;
   line-height: 1em;
 }

src/components/CouponCard/Media/Header.jsx

@@ -11,7 +11,7 @@ export default (props) => {
 
   return (
     <View className='coupun-media_header'>
-      {enableCashback && <Cashback money={cashback} style={{ marginTop: '10px' }} />}
+      {enableCashback && <Cashback money={cashback} style={{ marginTop: '-10px' }} />}
       <View className='coupun-media_thumb'>
         <BadgeTag type={badge} />
         <Image src={image} />

src/components/List/index.jsx

@@ -16,47 +16,44 @@ export default React.forwardRef((props, ref) => {
     className,
     ...leftProps
   } = props
-  const [loading, setLoading] = useState(false)
 
+  const [loading, setLoading] = useState(false)
   const contextRef = useRef()
-  const loadingRef = useRef(false)
-  const [payload, setPayload] = useState(params)
+  const [forceUpdate, setForceUpdate] = useState(0)
   const [list, setList] = useState([])
-  const pageRef = useRef({ current: 1, pages: 0 })
-  const hasMore = pageRef.current.current < pageRef.current.pages
+  const pageRef = useRef({ current: 1 })
+  const [hasMore, setHasMore] = useState(false)
 
   // 滚动
   const handleScrollToLower = (e) => {
-    // const loading = loadingRef.current
-
     if (!loading && hasMore) {
-      setPayload({
-        ...payload,
-        pageNum: pageRef.current.current + 1
-      })
+      pageRef.current.current += 1
+      setForceUpdate(forceUpdate + 1)
     }
   }
 
-  const fetchList = (params) => {
+  const fetchList = () => {
     if (!request) return;
 
     setLoading(true)
-    // loadingRef.current = true
-    request(params).then((res) => {
+    request({
+      ...params,
+      pageSize,
+      pageNum: pageRef.current.current
+    }).then((res) => {
       const { records, ...pageInfo } = res || {}
       const lst = pageInfo.current === 1 ? records || [] : list.concat(records || [])
       setList(lst)
+      setHasMore(pageInfo.current < pageInfo.pages)
+
       if (onDataChange) {
         onDataChange(lst)
       }
 
       pageRef.current = pageInfo
-      // loadingRef.current = false
-
       setLoading(false)
 
     }).catch((err) => {
-      // loadingRef.current = false
       console.error(err)
       setLoading(false)
 
@@ -69,20 +66,16 @@ export default React.forwardRef((props, ref) => {
   const fetchRef = useRef()
   fetchRef.current = fetchList
 
-  // 联动状态, 设置查询参数
+  
   useEffect(() => {
-    setPayload({
-      ...params || {},
-      pageNum: 1,
-      pageSize,
-    })
-  }, [pageSize, params])
+    pageRef.current.current = 1
+    setHasMore(false)
+  }, [params])
 
   // 请求数据
   useEffect(() => {
-    fetchRef.current(payload)
-    console.log('------------list----------------', payload, request)
-  }, [payload, request])
+    fetchRef.current()
+  }, [params, forceUpdate])
 
   useEffect(() => {
     Taro.nextTick(() => {

src/components/MasonryLayout/Item.jsx

@@ -1,5 +1,6 @@
 
 import React, { useMemo, useEffect } from 'react'
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components'
 import { classNames, getRect } from './utils';
 import './style.less'
@@ -10,25 +11,30 @@ export default (props) => {
   const vid = item.__vid;
   
   useEffect(() => {
-    const calcHeight = () => {
-      getRect(`.${vid}`).then((res) => {
-        if (!res) {
-          // 找不到 node , 则一直重复查询
-          const t = setTimeout(() => {
-            clearTimeout(t)
-            calcHeight()
-          }, 300)
-        } else {
-          if (Array.isArray(res)) {
-            onRenderFinish(res[0])
+    Taro.nextTick(() => {
+      const calcHeight = () => {
+        getRect(`.${vid}`).then((res) => {
+          if (!res) {
+            // 找不到 node , 则一直重复查询
+            const t = setTimeout(() => {
+              clearTimeout(t)
+              calcHeight()
+            }, 100)
           } else {
-            onRenderFinish(res)
+            const t = setTimeout(() => {
+              if (Array.isArray(res)) {
+                onRenderFinish(res[0])
+              } else {
+                onRenderFinish(res)
+              }
+              clearTimeout(t)
+            }, 100)
           }
-        }
-      })
-    }
-
-    calcHeight()
+        })
+      }
+  
+      calcHeight()
+    })
   })
 
 

src/components/MasonryLayout/Waterfall.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components'
+import { classNames, getRect } from './utils';
+import './style.less'
+
+export default (props) => {
+  const { className, itemClassName, style, gutter = 0, list, render, ...leftProps } = props
+  const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+
+  const [styles, setStyles] = useState([])
+
+  const handleImage = index => (e) => {
+    const { height } = e
+    const span = Math.ceil(height / 10)
+
+    const itemStyle = { gridRow: `auto/span ${span}` }
+    styles[index] = itemStyle
+    
+    if (styles.filter(Boolean).length === list.length) {    
+      setStyles(styles.slice())
+    }
+  }
+
+  // useEffect(() => {
+  //   const t = setTimeout(() => {
+  //     Taro.createSelectorQuery().selectAll(`.${uqClass} .waterfall-item`).boundingClientRect(rects => {
+  //       console.log('---------waterfall-item---------->', rects)
+  //     }).exec()
+  //     clearTimeout(t)
+  //   }, 500)
+  // }, [list, uqClass])
+
+  return (
+    <View className={classNames(className, 'waterfall-wrapper', uqClass)}>
+      {
+        list.map((item, index) => {
+          const st = styles[index]
+          return (
+            <View key={index} className={classNames(itemClassName, 'waterfall-item')} style={st}>
+              {render(item, handleImage(index))}
+            </View>
+          )
+        })
+      }
+    </View>
+  )
+}

src/components/MasonryLayout/style.less

@@ -17,3 +17,17 @@
     overflow-x: hidden;
   }
 }
+
+
+.waterfall-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
+  grid-gap: 0;
+  grid-auto-flow: row dense;
+  grid-auto-rows: 20px;
+
+  .waterfall-item {
+    width: 100%;
+    grid-row: auto/span 10;
+  }
+}

src/hotel/components/HouseManage/houseManage.jsx

@@ -99,7 +99,7 @@ export default React.forwardRef((props, ref) => {
       setShowCard(false)
       console.log(`/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`)
       return {
-        title: room.roomName,
+        title: `欢迎来到${room.roomName}`,
         path: `/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`,
         imageUrl: shareImage,
       }

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

@@ -122,10 +122,8 @@ export default withLayout((props) => {
         <CustomNav title='售后退款' />
       </view>
       <View className='index-container'>
-        <View className='box-content'>
-          <scroll-view scroll-y style='height: 100%;' >
-            <SpinBox loading={loading}>
-
+        <SpinBox loading={loading} className='box-content'>
+          <scroll-view scroll-y style={{ height: '100%' }} >
               <view className='Refund-Content-box'>
                 <view className='title-image'>
                   <image
@@ -220,10 +218,8 @@ export default withLayout((props) => {
                   提交申请
                 </Button>
               </view>
-            </SpinBox>
-
           </scroll-view>
-        </View>
+        </SpinBox>
       </View>
 
     </view >

src/pages/index/components/Card/index.jsx

@@ -1,5 +1,6 @@
 
-import Taro, { useDidShow } from '@tarojs/taro'
+import { useMemo } from 'react'
+import Taro from '@tarojs/taro'
 import useSave from "@/utils/hooks/useSave"
 import msTip from '@/assets/icons/housemantj/foodtip.png'
 import mjTip from '@/assets/icons/housemantj/mjtip.png'
@@ -10,7 +11,13 @@ import './style.less'
 
 export default (props) => {
 
-  const { item, style } = props
+  const { className, item, style, onImageLoad } = props
+  
+  const uqClass = useMemo(() => {
+    return `f-${Math.random().toString(36).substring(2)}`
+  }, [])
+
+  const cls = useMemo(() => [className, 'contentCard', uqClass].filter(Boolean).join(' '), [className, uqClass])
 
   const [isSaved, toggleSave] = useSave(item.isSaved, item.targetType, item.targetId)
   const Detail = () => {
@@ -22,23 +29,31 @@ export default (props) => {
     }
   }
 
-
+  const handleLoad = () => {
+    Taro.createSelectorQuery().select(`.${uqClass}`).boundingClientRect(rect => {
+      onImageLoad(rect)
+    }).exec()
+  }
 
   return (
-    <view className='contentCard' style={style}>
-      <view className='cardTop'>
-        <image mode='widthFix' onClick={Detail} src={item.poster} className='cCardimg' />
-        <image className='lefttips' src={item.targetType === 'tourist' ? mjTip : msTip} />
-        <image onClick={toggleSave} src={isSaved > 0 ? onlove : love} className='loveharde'></image>
-      </view>
-      <view className='bContent' onClick={Detail}>
-        <view className='cCword'>{(item.title).toString().length > 35 ? (item.title).substring(0, 35) + '...' : (item.title)}</view>
-        <view className='cCleft'>
-          <image src={location} className='cCicon'></image>
-          <view className='distance'><text>{(item.distance / 1000).toFixed(2)}</text>公里</view>
+    <view className={uqClass} style={{ overflow: 'hidden' }}>
+      <view className='contentCard' style={style}>
+        <view className='cardTop'>
+          <image mode='widthFix' onClick={Detail} src={item.poster} className='cCardimg' onLoad={handleLoad} />
+          <image className='lefttips' src={item.targetType === 'tourist' ? mjTip : msTip} />
+          <image onClick={toggleSave} src={isSaved > 0 ? onlove : love} className='loveharde'></image>
         </view>
-        <view className='cCright'>
-          <view className='price'><text className='money'>￥</text><text>{item.averagePrice / 100}</text>/人</view>
+        <view className='bContent' onClick={Detail}>
+          <view className='cCword'>{(item.title).toString().length > 35 ? (item.title).substring(0, 35) + '...' : (item.title)}</view>
+          <view className='cCBottom'>
+            <view className='cCleft'>
+              <image src={location} className='cCicon'></image>
+              <view className='distance'><text>{(item.distance / 1000).toFixed(2)}</text>公里</view>
+            </view>
+            <view className='cCright'>
+              <view className='price'><text className='money'>￥</text><text>{item.averagePrice / 100}</text>/人</view>
+            </view>
+          </view>
         </view>
       </view>
     </view>

src/pages/index/components/Card/style.less

@@ -3,10 +3,14 @@
   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   border-radius: 24px;
   overflow: hidden;
-  margin-bottom:50px;
+  margin-bottom: 30px;
   break-inside: avoid;
   position: relative;
 
+  width: calc(100% - 30px);
+  box-sizing: border-box;
+  margin-left: 15px;
+
   .cardTop{
     border-radius: 24px 24px 0px 0px;
     .cCardimg{
@@ -36,33 +40,37 @@
       color: #404040;
       text-align: justify;
     }
+
+    .cCBottom {
+      display: flex;
     
-    .cCleft{
-      float: left;
-      position: relative;
-      padding:40px 0 30px 0;
-      .cCicon{
-        width: 17px;
-        height: 21px;
-        position: absolute;
-        left: 0;
-        top: 48px;
-      }
-      .distance{
-        padding-left: 24px;
-        font-size: 24px;
-        color: #C0C8D3;
+      .cCleft{
+        flex: 1;
+        position: relative;
+        padding:40px 0 30px 0;
+        .cCicon{
+          width: 17px;
+          height: 21px;
+          position: absolute;
+          left: 0;
+          top: 48px;
+        }
+        .distance{
+          padding-left: 24px;
+          font-size: 24px;
+          color: #C0C8D3;
+        }
       }
-    }
-    .cCright{
-      position: relative;
-      float: right;
-      padding:40px 0 30px 0;
-      .price{          
-        font-size: 24px;
-        color: #FF3434;
-        .money{
-          font-size: 20px;
+      .cCright{
+        flex: 1;
+        position: relative;
+        padding:40px 0 30px 0;
+        .price{          
+          font-size: 24px;
+          color: #FF3434;
+          .money{
+            font-size: 20px;
+          }
         }
       }
     }

src/pages/index/index.jsx

@@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react'
 import Taro, { useDidShow } from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
 import logo from '@/assets/icons/comm/logo_small.png'
-import tips from '@/assets/icons/UserCenter/tips.png'
 
 import { getHotelDetail } from '@/services/landlord'
 import { getTaRoom } from '@/services/taRoom​'
@@ -19,7 +18,7 @@ import Recommend from './tabs/Recommend'
 
 import './index.less'
 
-
+const tips = 'https://yz-shigongli.oss-cn-shanghai.aliyuncs.com/images/sgl-v2-tips.png'
 
 export default withLayout((props) => {
   const { router, person, location } = props
@@ -42,8 +41,6 @@ export default withLayout((props) => {
     roomId = rid
   }
 
-
-
   useDidShow(() => {
     setIsDidShow(isDidShow + 1)
   })

src/pages/index/tabs/Guide.jsx

@@ -48,7 +48,7 @@ export default (props) => {
     if (roomOrderId) {
       goToRoomForm(roomOrderId).then((res) => {
         if (res.status !== 1 && res.personNum > 0) {
-          Taro.navigateTo({
+          Taro.reLaunch({
             url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
           })
         }

src/pages/index/tabs/Recommend.jsx

@@ -7,6 +7,7 @@ import Tip from '@/components/tip'
 import List from '@/components/List';
 import NoData from '@/components/NoData'
 import MasonryLayout from '@/components/MasonryLayout';
+import Waterfall from '@/components/MasonryLayout/Waterfall';
 import { getIndexType, getResourceList } from '@/services/home'
 import Card from '../components/Card'
 import './less/Recommend.less'
@@ -28,7 +29,6 @@ export default (props) => {
   const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
   //切换上面的标签
   const handleTabChange = (e) => {
-    console.log('------------handleTabChange-------', queryParams)
     const { index } = e.detail
     setActiveTab(index)
     const tab = tabs[index].typeId || ''
@@ -43,6 +43,7 @@ export default (props) => {
       listRef.current.context.scrollTo({ top: 0 })
     }
   }
+
   useEffect(() => {
     //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
@@ -50,8 +51,6 @@ export default (props) => {
     })
   }, [])
 
-
-
   const onSearch = () => {
     // 用绝对路径
     Taro.navigateTo({ url: '/pages/search/search' });
@@ -64,9 +63,6 @@ export default (props) => {
 
   }
 
-  console.log('-------------------', queryParams)
-
-
   useDidShow(() => {
     likeLook()
   })
@@ -109,12 +105,14 @@ export default (props) => {
           params={queryParams}
           onDataChange={setAllList}
         >
-          {/* <MasonryLayout
-            list={alllist}
-            render={item => <Card item={item} />}
-          /> */}
-
-          {
+          <view style={{ padding: '30rpx 15rpx' }}>
+            <Waterfall
+              list={alllist}
+              render={(item, callback) => <Card item={item} onImageLoad={callback} />}
+            />
+          </view>
+
+          {/* {
             alllist.length == 0 ?
               <NoData /> :
               <view className='waterfall'>
@@ -122,7 +120,7 @@ export default (props) => {
                   alllist.map((item) => <Card key={item.resourceNo} item={item} />)
                 }
               </view>
-          }
+          } */}
         </List>
       {/* </View> */}
     </view>

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

@@ -27,12 +27,12 @@
       letter-spacing: 0.2em;
     }
 }
-.waterfall{
-  column-count: 2;      //分两列
-  column-gap: 30px;    //列间距
-  background-color: #F8F8F8;
-  padding:30px 30px 0 30px; 
-}
+// .waterfall{
+//   column-count: 2;      //分两列
+//   column-gap: 30px;    //列间距
+//   background-color: #F8F8F8;
+//   padding:30px 30px 0 30px; 
+// }
 .botton{
   font-size: 28px;
   color: #C0C8D3;
@@ -70,21 +70,27 @@
     }
   }
   .tabs-Unselected {
-    width: 25vw;      
+    // width: 25vw;
     color: #C0C8D3; 
     text-align: center;
     font-size: 28px;
     line-height: 91px;
+    box-sizing: border-box;
+    padding: 0 32px;
+    letter-spacing: 2px;
   }
   .tabs-swiper {
     max-height: 0;
   }
   .tabs-Selected {
+    box-sizing: border-box;
     font-size: 32px;
     color: #4C4C4C;
-    width: 25vw;      
+    // width: 25vw;
     font-weight: bold;
     text-align: center;
     border-bottom: 6px solid #4C4C4C;
+    padding: 0 32px;
+    letter-spacing: 2px;
   }
 }