flx

config/dev.js

   },
   defineConstants: {
     // HOST: '"http://192.168.89.147:8080"',
-    HOST: '"https://sgl-v2-test.njyunzhi.com"',
+    HOST: '"https://sgl-v2.njyunzhi.com"',
   },
   mini: {},
   h5: {}

config/prod.js

     NODE_ENV: '"production"'
   },
   defineConstants: {
-    HOST: '"https://sgl-v2-test.njyunzhi.com"',
+    HOST: '"https://sgl-v2.njyunzhi.com"',
   },
   mini: {},
   h5: {

project.config.json

   "miniprogramRoot": "./dist",
   "projectname": "miniapp",
   "description": "十公里",
-  "appid": "wx835627a9b9b3932a",
+  "appid": "wx06a7372d48d56843",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/components/CouponCard/Cashback/index.jsx

 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

   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

 
   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

     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)
+        onDataChange(lst, { paramsChanged: pageInfo.current === 1 })
       }
 
       pageRef.current = pageInfo
-      loadingRef.current = false
-
       setLoading(false)
 
     }).catch((err) => {
-      loadingRef.current = false
       console.error(err)
       setLoading(false)
 
   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)
-  }, [payload, request])
+    fetchRef.current()
+  }, [params, forceUpdate])
 
   useEffect(() => {
     Taro.nextTick(() => {

src/components/MasonryLayout/Column.jsx

+import React, { useEffect, useRef } from 'react'
+import { View } from '@tarojs/components'
+import Item from './Item'
+import { classNames } from './utils'
+
+export default (props) => {
+  const { className, list = [], render, onRenderFinish, ...leftProps } = props
+
+  const heightRef = useRef(0)
+
+  const handleRenderFinish = (item, index) => (rect) => {
+    const { height } = rect;
+    item.__height = height
+    
+    if (index === 0) {
+      heightRef.current = height
+    } else {
+      heightRef.current += height
+    }
+
+    onRenderFinish(heightRef.current)
+  }
+
+  return (
+    <View {...leftProps} className={classNames(className, 'masonry-column')}>
+      {
+        list.map((item, index) => {
+
+          return (
+            <Item key={item.__vid} item={item} render={render} onRenderFinish={handleRenderFinish(item, index)} />
+          )
+        })
+      }
+    </View>
+  )
+}

src/components/MasonryLayout/Item.jsx

 
-import React, { useMemo, useEffect } from 'react'
+import React, { useMemo } from 'react'
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components'
-import { classNames, getRect } from './utils';
+import { classNames } from './utils';
 import './style.less'
 
 export default (props) => {
-  const { className, item, render, onRenderFinish } = props
+  const { className, item, top, render, onRenderFinish } = props
 
+  // const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
   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])
-          } else {
-            onRenderFinish(res)
-          }
-        }
-      })
-    }
-
-    calcHeight()
-  })
-
+  const handleCallback = () => {
+    Taro.createSelectorQuery().select(`.${vid}`).boundingClientRect(rect => onRenderFinish(rect)).exec()
+  }
 
   return (
-    <View
-      key={vid}
-      className={classNames(className, 'masonry-item', vid)}
-    >
-      {render(item)}
+    <View className={classNames(className, 'masonry-item', vid)}>
+      {render(item, handleCallback)}
     </View>
   )
 }

src/components/MasonryLayout/Waterfall.jsx

+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/index.jsx

 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
-import Item from './Item';
+import usePrevious from '@/utils/hooks/usePrevious';
+import Column from './Column';
 import { useList } from './hooks';
 import { classNames, getRect } from './utils';
 
 import './style.less'
 
+/**
+ * 核心原理, 左右2栏，一个个放元素，同时记录高度，优先放入低高度区域
+ * 元素高度获取，主要是通过图片的 onLoad 来确保加载完成
+ * 
+ * 复杂度, 多数据公用 list,
+ * 需要区分是否更换数据源，是否未更换数据源，只是新增了数据
+ */
+
 export default (props) => {
-  const { className, itemClassName, style, gutter = 0, list, render, ...leftProps } = props
+  const { className, listData, itemKey, render } = props
+
+  // rfTimes 用来区分是否更换数据源
+  const { list, rfTimes: refresh } = listData
+
+  // 用来绘制页面的数据
+  const renderListRef = useRef([])
 
-  const splitStyle = { width: `${gutter}rpx` }
+  const lastList = usePrevious(list)
+  const lastRf = usePrevious(refresh)
 
-  const leftBottom = useRef(0)
-  const rightBottom = useRef(0)
+  // 记录左右2栏的数据及高度
+  const leftHeight = useRef(0)
+  const rightHeight = useRef(0)
   const [leftList, leftRef, setLeftList] = useList()
   const [rightList, rightRef, setRightList] = useList()
-  const [cursor, setCursor] = useState(0)
 
-  const listRef = useRef([])
-  listRef.current = list
-
-  const handleRenderFinish = (direct) => (rect) => {
-    const { bottom } = rect
+  // 用来强制更新组件
+  const [cursor, setCursor] = useState(-1)
 
+  // 每个元素渲染完成, 会拿到当前栏的高度
+  const handleRenderFinish = (direct) => (height) => {
     if (direct === 'left') {
-      leftBottom.current = bottom
+      leftHeight.current = height
     } else {
-      rightBottom.current = bottom
+      rightHeight.current = height
     }
 
+    // 触发强制渲染
     setCursor(cursor + 1)
   }
     
   useEffect(() => {
-    setCursor(0)
-    setLeftList([])
-    setRightList([])
-    listRef.current = list ? list.slice() : []
+    // 新数据源 = 首次进入 或者 切换数据源
+    const isNew = (!lastList?.length && list.length) || (lastRf !== refresh)
+    
+    if (!isNew) {
+      // 非新数据源, list 变更那就说明是执行了上拉加载
+      const addedList = []
+      for (let item of list) {
+        const found = lastList.filter(x => x[itemKey] === item[itemKey])[0]
+        if (!found) {
+          addedList.push(item)
+        }
+      }
+      
+      // 于是, 只继续绘制变更的那部分
+      renderListRef.current = addedList
+      setCursor(-2)
+    } else {
+      setCursor(0)
+      setLeftList([])
+      setRightList([])
+      renderListRef.current = list ? list.slice() : []
+      leftHeight.current = 0
+      rightHeight.current = 0
+  
+      if (renderListRef.current.length) {
+        setCursor(0)
+      } else {
+        setCursor(-1)
+      }
+    }
   }, [list])
 
   useEffect(() => {
-    const len = !list ? 0 : list.length;
-    if (leftRef.current.length + rightRef.current.length >= len) return;
+    // 如果当前渲染数据为空
+    if (!renderListRef.current.length) return;
 
-    const item = listRef.current.shift()
+    // 每次把数组最上面的一个拿出来
+    const item = renderListRef.current.shift()
     item.__vid = `f-${Math.random().toString(36).substring(2)}`
 
-    if (leftBottom.current <= rightBottom.current) {
+    // 优先放入低高度的栏里面
+    if (leftHeight.current <= rightHeight.current) {
       setLeftList([...leftRef.current, item])
     } else {
       setRightList([...rightRef.current, item])
     }
-  }, [cursor, list])
+  }, [cursor])
 
   return (
-    <View
-      style={style}
-      className={classNames(className, 'masonry-layout')}
-    >
-      <View className='masonry-column'>
-        {
-          leftList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('left')} />)
-        }
-      </View>
-      <View className='masonry-split' style={splitStyle} />
-      <View className='masonry-column'>
-        {
-          rightList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('right')} />)
-        }
-      </View>
+    <View className={classNames(className, 'masonry-layout')}>
+      <Column list={leftList} render={render} onRenderFinish={handleRenderFinish('left')} />
+      <Column list={rightList} render={render} onRenderFinish={handleRenderFinish('right')} />
     </View>
   )
 }

src/components/MasonryLayout/style.less

 
   .masonry-column {
     flex: 1;
+    overflow: hidden;
+    position: relative;
   }
   
-  .masonry-split {
-    flex: none;
+  .masonry-item {
+    width: 100%;
   }
+}
 
-  .masonry-item {
+
+.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%;
-    overflow-x: hidden;
+    grid-row: auto/span 10;
   }
 }

src/components/MoreGuide/style.less

     font-size: 28px;
     font-weight: 400;
     color: #202020;
-    line-height: 54px;
+    line-height: 64px;
     padding-bottom: 10px;
   }

src/components/ShopUnused/style.less

     color: #666666;
     line-height: 44px;
     float: left;
-    margin: 60px 0 32px 0;
+    margin: 60px 0 0 0;
 
   }
   .orderTime{    
     color: #666666;
     line-height: 44px;
     float: right;
-    margin: 60px 0 32px 0;
+    margin: 60px 0 0 0;
   }
   .order{
     background: #FFFFFF;
       height: 194px;
       border-radius: 22px;
       float: left;
-      margin:0 26px 30px 0;
+      margin:0 26px 0 0;
     }
     .orderRight{
       .foodName{
         font-size: 24px;
         color: #333333;
-        line-height: 40px;
+        margin-top: 40px;
       }
       .price{
         font-size: 20px;
         font-weight: bold;
         color: #202020;
-        line-height: 44px;
-        margin: 37px 0 40px 0;
-        height: 19px;
+        margin: 0 0 10px 0;
         .pnum{
           color: #333333;
           font-weight: 400;
       width: 160px;
     height: 40px;
     background: #1A3B83;
-    /* margin: 0 auto; */
     line-height: 40px;
     border-radius: 12px;
     font-size: 23px;

src/components/ShopUsed/style.less

     }
     .orderRight {
       .foodName {
-        height: 63px;
         font-size: 24px;
         color: #333333;
-        line-height: 40px;
       }
       .price {
         font-size: 20px;
         font-weight: bold;
         color: #202020;
         line-height: 44px;
-        margin: 37px 0 40px 0;
         height: 19px;
         .pnum {
           color: #333333;
     }
     .veri_Date {
       color: red;
-      height: 5px;
       letter-spacing: 1px;
       font-size: 30px;
+      padding-top: 20px;
     }
     .line {
       width: 100%;
       height: 2px;
       background: #000;
       opacity: 0.1;
-      margin-top: 100px;
+      margin-top: 30px;
     }
     .phone {
       font-size: 24px;

src/components/Spin/SpinBox.jsx

 import Spin from '.'
 import './style.less'
 
+const Loading = (props) => {
+  const { loading, size = '64rpx', ...leftProps } = props
+
+  const cls = ['loading-box', loading? 'active' : undefined].filter(Boolean).join(' ')
+
+  return (
+    <View className={cls}>
+      <Spin size={size} {...leftProps} />
+    </View>
+  )
+}
+
+
 export default (props) => {
   const { className, style, loading, size = '64rpx', ...leftProps } = props
 
 
   return (
     <View className={cls} style={style}>
-      {
-        loading && (
-          <View className='loading-box'>
-            <Spin size={size} {...leftProps} />
-          </View>
-        )
-      }
       {props.children}
+      <Loading loading={loading} size={size} {...leftProps} />
     </View>
   )
 }

src/components/Spin/style.less

 .loading-wrapper {
   height: 100%;
   position: relative;
+  overflow: hidden;
 
   .loading-box {
-    // position: absolute;
-    // z-index: 10;
-    // top: 0;
-    // left: 0;
-    // width: 100%;
-    // height: 100%;
-    // min-height: 72px;
-    // padding-top: 60%;
-    // padding-left: 50%;
-    // background: rgba(255, 255, 255, .95);
-    // box-sizing: border-box;
-
     position: absolute;
-    z-index: 10;
+    z-index: -10;
     top: 0;
     left: 0;
     width: 100%;
     padding-top: 35%;
     padding-left: 50%;
     background: rgba(255, 255, 255, 0.95);
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    opacity: 0;
+
+    &.active {
+      opacity: 1;
+      z-index: 10;
+    }
   }
 }

src/hotel/components/HouseManage/houseManage.jsx

       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/hotel/pages/components/Extend/style.less

   }
   .storezn{
     color: #202020;
-    line-height: 54px;
+    line-height: 64px;
     margin-bottom: 60px;
     text-align: justify;
   }

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

         <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
                   提交申请
                 </Button>
               </view>
-            </SpinBox>
-
           </scroll-view>
-        </View>
+        </SpinBox>
       </View>
 
     </view >

src/pages/details/components/Extend/extend.less

 .cardext{
+  padding: 0 30px;
+  box-sizing: border-box;
+
   .storezn{
     font-size: 28px;    
     color: #202020;
-    line-height: 54px;
+    line-height: 64px;
     margin-bottom: 40px;
     text-align: justify;
   }

src/pages/details/foodDetails/foodDetails.jsx

 import TabIcon from "@/components/HorTabbar/TabIcon";
 import ax from "@/assets/icons/housemantj/onlove.png";
 import yysj from "@/assets/icons/housemantj/openTime.png";
-import dw from "@/assets/icons/housemantj/loc.png";
+import dw from "@/assets/icons/housemantj/loc-o.png";
+import phoneImg from "@/assets/icons/housemantj/phone-o.png";
 import zhuandao from "@/assets/icons/housemantj/backTop.png";
 import titlezs from "@/assets/icons/housemantj/titleTip.png";
 import showMore from "@/assets/icons/housemantj/setMore.png";
   const log = useRef("");
   const lat = useRef("");
 
+
+  const handlePhone = () => {
+    if (!detail.phone) {
+      Taro.showToast({
+        title: '暂无商家联系方式',
+        icon: 'none',
+      })
+
+      return;
+    }
+
+    Taro.makePhoneCall({
+      phoneNumber: detail.phone
+    })
+  }
+
   useEffect(() => {
     if (id) {
       setLoading(true)
         setimglist(res.imageList || []);
         setLoading(false)
       }).catch(() => setLoading(false));
-      getShopPackage(id, { pageNum: 9999 }).then((res) => {
+      getShopPackage(id, { pageSize: 500 }).then((res) => {
         setPackage(res.records || []);
         setNewpgNum(res.records.length);
         setAllpgNum(res.total);
       });
-      getExtendContent("shop", id, { pageNum: 999 }).then((res) => {
+      getExtendContent("shop", id, { pageSize: 500 }).then((res) => {
         setExtend(res.records || []);
         setAllextNum(res.total);
         setNewextNum(res.records.length);
               </view>
               <view className='yysj'>
                 <image src={yysj} className='yysjImg' />
-                营业时间：{detail.businessHours}
+                <text>营业时间：{detail.businessHours}</text>
+                <view style={{ float: 'right', paddingLeft: '30rpx', borderLeft: '1px dotted #999' }} onClick={handlePhone}>
+                  <image src={phoneImg} style={{ width: '32rpx', height: '32rpx' }} />
+                </view>
               </view>
               <view className='dpPosition' onClick={openMap}>
                 <image src={dw} className='dwTip' />

src/pages/details/foodDetails/foodDetails.less

       margin-top: 40px;
       position: relative;
       .dwTip {
-        width: 28px;
-        height: 28px;
+        width: 48px;
+        height: 48px;
+        top: -8px;
+        left: -16px;
         position: absolute;
-        top: 4px;
-        left: 0;
       }
       view {
         font-size: 24px;
 .storezn {
   font-size: 28px;
   color: #202020;
-  line-height: 54px;
+  line-height: 64px;
   margin-bottom: 44px;
 }
 .storezn + image {

src/pages/details/mjDetails/sceneryDetails.jsx

 import CustomNav from '@/components/CustomNav'
 import ax from '@/assets/icons/housemantj/onlove.png'
-import dw from '@/assets/icons/housemantj/loc.png'
+import dw from '@/assets/icons/housemantj/loc-o.png'
 import titlejd from '@/assets/icons/housemantj/goodTourist.png'
 import titlems from '@/assets/icons/housemantj/goodFood.png'
 import showMore from '@/assets/icons/housemantj/setMore.png'
           setRecommend(res2 || [])
         })
       })
-      getExtendContent('tourist', id, { pageNum: 9999 }).then((res) => {
+      getExtendContent('tourist', id, { pageSize: 500 }).then((res) => {
         setExtend(res.records || [])
         setAllextNum(res.total)
         setNewextNum(res.records.length)

src/pages/details/mjDetails/sceneryDetails.less

     .dpPosition {
       position: relative;
       .dwTip {
-        width: 28px;
-        height: 28px;
+        width: 48px;
+        height: 48px;
+        top: -8px;
+        left: -8px;
         position: absolute;
-        top: 4px;
-        left: 0;
       }
       .distance {
         padding-left: 38px;

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

 
-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'
 
 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 = () => {
     }
   }
 
-
+  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

   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{
       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: 3;
+        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: 2;
+        position: relative;
+        padding:40px 0 30px 0;
+        .price{          
+          font-size: 24px;
+          color: #FF3434;
+          .money{
+            font-size: 20px;
+          }
         }
       }
     }

src/pages/index/index.jsx

 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​'
 
 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
     roomId = rid
   }
 
-
-
   useDidShow(() => {
     setIsDidShow(isDidShow + 1)
   })

src/pages/index/tabs/Guide.jsx

     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}`,
           })
         }
 
   const geiZy = () => {
     setLoading(true)
-    getExtendContent('room', roomId, {
-
-    }).then((res) => {
+    getExtendContent('room', roomId, { pageSize: 500 }).then((res) => {
       // setExtend(res.records || [])
       setExtend(res.records)
       setIfroomId('reality')
   }
 
   return (
-    <scroll-view scrollY style='height:100%;'  >
-      <SpinBox loading={loading}>
-
+    <scroll-view scrollY style={{ height: '100%' }}  >
         <view className='Guide-Home-box'>
           {
             ifroomId === 'havenot' && (
           {/* 有民宿的情况下 */}
           {
             ifroomId === 'reality' && (
-              <view>
+              <SpinBox loading={loading}>
                 <view className='room-box-info-ROOM'>
                   <view className='room-bi-name-ROOM' >
                     <view className='room-bin-title-ROOM'>房屋名称</view>
                     <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
                     <text className='title-title-boss' >更多指引</text>
                   </view>
-                  {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
+                  <view style={{ padding: '0 30rpx', boxSizing: 'border-box' }}>
+                    {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
+                  </view>
                 </view>
-              </view>
+              </SpinBox>
             )
           }
           <view className='Guide-Content-box'>
           </view>
 
         </view>
-      </SpinBox>
     </scroll-view>
   )
 }

src/pages/index/tabs/Recommend.jsx

 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'
 
+const listStyle = { height: 'calc(100% - 145px)' }
 
 export default (props) => {
   const { router, person, location } = props
   const [typeList, setTypeList] = useState([])
   const listRef = useRef()
 
-  const [queryParams, setQueryParams] = useState({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
+  const [queryParams, setQueryParams] = useState({ location, pageNum: 1, pageSize: 10, typeId: '' })
+  const rfTimes = useRef(0)
 
   // 获取资源表信息
-  const [alllist, setAllList] = useState([])
+  // const [alllist, setAllList] = useState([])
+  const [listData, setListData] = useState({ list: [], rfTimes: 0 })
+
   //分类标签
   const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
   //切换上面的标签
   const handleTabChange = (e) => {
     const { index } = e.detail
     setActiveTab(index)
-    const tab = tabs[index].typeId
+    const tab = tabs[index].typeId || ''
+
     setQueryParams({
       ...queryParams,
       typeId: tab
     })
 
-    if (index == 0) {
-      setQueryParams({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
-    }
     //如果context有的话代表他滚动了   那么切换tab页就置顶
     if (listRef.current?.context) {
       listRef.current.context.scrollTo({ top: 0 })
     }
   }
+
+  const handleDataChange = (value, e) => {
+    if (e.paramsChanged) {
+      rfTimes.current += 1
+    }
+
+    setListData({ list: value, rfTimes: rfTimes.current })
+  }
+
   useEffect(() => {
     //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
     })
   }, [])
 
-
-
   const onSearch = () => {
     // 用绝对路径
     Taro.navigateTo({ url: '/pages/search/search' });
   }
-  // 联动收藏
-  const likeLook = () => {
-    getResourceList().then(e => {
-      setAllList(e.records)
-    })
-
-  }
-
-
-  useDidShow(() => {
-    likeLook()
-  })
+  // // 联动收藏
+  // const likeLook = () => {
+  //   getResourceList().then(e => {
+  //     setAllList(e.records)
+  //   })
 
+  // }
 
+  // useDidShow(() => {
+  //   likeLook()
+  // })
 
   return (
     // <view style={{ height: '100%', overflow: 'hidden',display:'flex',flexDirection:'column' }}>
       {/* <View style={{ flex:'auto' }}> */}
         <List
           ref={listRef}
-          style={{ height: 'calc(100% - 145px)' }}
-          // style={{ flex: 'auto', height: '100%' }}
+          style={listStyle}
           request={getResourceList}
           params={queryParams}
-          onDataChange={setAllList}
+          onDataChange={handleDataChange}
         >
-          {/* <MasonryLayout
-            list={alllist}
-            render={item => <Card item={item} />}
-          /> */}
-
-          {
+          <view style={{ padding: '30rpx 15rpx' }}>
+            <MasonryLayout
+              itemKey='resourceNo'
+              listData={listData}
+              render={(item, callback) => <Card item={item} onImageLoad={callback} />}
+            />
+          </view>
+
+          {/* {
             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

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

src/shop/components/ShopKeeper/shopKeeper.jsx

 import { React, useState, useEffect, useMemo, useRef } from 'react'
 import Taro, { useRouter } from '@tarojs/taro'
-import { getShopList, getShopMoney, getAccount, getVerifiedOrder, setGetVerifiedOrder } from '@/services/shopBoss'
-
+import { getVerifiedOrder } from '@/services/shopBoss'
 import Picker from '@/components/Picker'
 import ShopUsed from '@/components/ShopUsed' //已核销
 import ShopUnused from '@/components/ShopUnused' //未核销