feats

config/index.js

+const path = require('path')
+
 const config = {
   projectName: 'shigongliserverh5',
   date: '2020-12-19',
         }
       }
     }
+  },
+  alias: {
+    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
+    '@/compents': path.resolve(__dirname, '..', 'src/compents'),
+    '@/layout': path.resolve(__dirname, '..', 'src/layout'),
+    '@/store': path.resolve(__dirname, '..', 'src/store'),
+    '@/reducers': path.resolve(__dirname, '..', 'src/reducers'),
+    '@/util': path.resolve(__dirname, '..', 'src/util')
   }
 }
 

package.json

     "lodash.groupby": "^4.6.0",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
+    "react-list": "^0.8.16",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "taro-ui": "^3.0.0-alpha.7"
     "@babel/core": "^7.8.0",
     "@tarojs/mini-runner": "3.0.13",
     "@tarojs/webpack-runner": "3.0.13",
+    "@types/react": "^16.0.0",
     "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "3.0.13",
     "eslint": "^6.8.0",
     "eslint-config-taro": "3.0.13",
-    "stylelint": "9.3.0",
-    "@types/react": "^16.0.0",
-    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react-hooks": "^1.6.1"
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "stylelint": "9.3.0"
   }
 }

src/compents/InifiniteList/index.jsx

+import React, { useEffect, useRef, useState } from 'react'
+import ReactList from 'react-list'
+import './index.scss'
+
+export default props => {
+  const ref = useRef()
+
+  const handleScroll = () => {
+    const done = props.length >= props.total
+
+    if (!done) {
+      const [, last] = ref.current.getVisibleRange()
+      // 如果未展示的数据少于3条就请求数据
+      if (props.length - last < 3) {
+        props.loadMore()
+      }
+    }
+  }
+
+  const NoData = (
+    <div className="no-data">
+      {props.nodata || '暂无数据'}
+    </div>
+  )
+
+  return (
+    <div className="inifinite-list-wrapper" style={{maxHeight: props.height}} onScroll={handleScroll}>
+      {
+        !props.length ? NoData :
+        <ReactList
+          ref={ref}
+          type="uniform"
+          length={props.length}
+          itemRenderer={props.itemRenderer}
+        />
+      }
+    </div>
+  )
+}

src/compents/InifiniteList/index.scss

+.inifinite-list-wrapper {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .no-data {
+    text-align: center;
+    font-size: 1.2em;
+    color: #aaa;
+    position: relative;
+    top: 20%;
+  }
+}

src/compents/NoData/index.jsx

+import React, { useEffect, useState } from 'react'
+import './index.scss'
+
+export default props => {
+  return (
+    <div className={`no-data-wrapper ${props.className}`} style={props.style}>
+      {
+        props.nodata ? <div className="no-data-view">{props.tips || '暂无数据'}</div> : props.children
+      }
+    </div>
+  )
+}

src/compents/NoData/index.scss

+.no-data-wrapper {
+  position: relative;
+  height: 100%;
+  min-height: 200px;
+
+  .no-data-view {
+    width: 100%;
+    text-align: center;
+    font-size: 0.8em;
+    color: #aaa;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 2em;
+  }
+}

src/compents/tags/index.jsx

     return <View className='tags'>
         <View className='at-row at-row--wrap' style={{ marginTop: '10rpx' }}>
             {
-                list.map((item) => {
-                    return <View className='at-col at-col-4 ' >
+                list.map((item, index) => {
+                    return <View className='at-col at-col-4 ' key={index}>
                         <View className={`tags-btn tags-btn${keyList.find(x => x.tagId === item.tagId) ? '-on' : ''}`} onClick={() => onClick(item)} >{item.name}</View>
                     </View>
                 })

src/compents/tags/index.scss

 
   &-btn {
     background-color: #ffffff;
-    color: #acacac;
+    color: #666;
     margin: 10px;
     font-size: 22px;
     height: 50px;

src/pages/account/index.jsx

 import Layout from '../../layout/index'
 import request from '../../util/request'
 import getQueryValue from '../../util/getQueryValue'
+import NoData from '@/compents/NoData'
 
 
 const account = (props) => {
 
   return <View className='account'>
     <Layout>
-      {list.map((item, index) => {
-        return <View className='account-view'>
-          {/* <Text className='account-view-title'>房源编号：<Text style={{fontSize:"1rem"}}>{item.keeperId}</Text></Text> */}
-          <ContainerLayout className='account-view-card'>
-            <View className='top' >
-              <View>姓名：{item.name}</View>
-              <View>电话：{item.phone}</View>
-              {/* <View>微信号：{x.user.name}</View>
-              <View>房源数：{x.user.name}</View> */}
-            </View>
-            <View className='bottom'>
-              <Text onClick={() => { Taro.navigateTo({ url: `/pages/account/edit/index?keeperId=${item.keeperId}` }) }}>编辑</Text>
-              <Text onClick={()=>onDelete(item.keeperId)}>删除</Text>
-            </View>
-          </ContainerLayout>
-
-        </View>
-
-      })}
+      <NoData nodata={!list.length} tips="暂无老板" style={{minHeight: '200px'}}>
+        {list.map((item, index) => {
+          return <View className='account-view' key={index}>
+            {/* <Text className='account-view-title'>房源编号：<Text style={{fontSize:"1rem"}}>{item.keeperId}</Text></Text> */}
+            <ContainerLayout className='account-view-card'>
+              <View className='top' >
+                <View>姓名：{item.name}</View>
+                <View>电话：{item.phone}</View>
+                {/* <View>微信号：{x.user.name}</View>
+                <View>房源数：{x.user.name}</View> */}
+              </View>
+              <View className='bottom'>
+                <Text onClick={() => { Taro.navigateTo({ url: `/pages/account/edit/index?keeperId=${item.keeperId}` }) }}>编辑</Text>
+                <Text onClick={()=>onDelete(item.keeperId)}>删除</Text>
+              </View>
+            </ContainerLayout>
+          </View>
+        })}
+      </NoData>
     </Layout>
     {/* onClick={(e)=>(e) */}
     <Tab value={['+新增名宿老板账号']} color='#ffffff' onClick={() => { Taro.navigateTo({ url: `/pages/account/edit/index?id=${id}` }) }} ></Tab>

src/pages/adminUser/index.jsx

 
     <View className='page-container'>
       {menuList.map((row) => {
-        return <ContainerLayout className='adminuser-menu' onClick={() => onClick(row)}>
+        return <ContainerLayout key={row.url} className='adminuser-menu' onClick={() => onClick(row)}>
           <Text>{row.title}</Text>
           <View className='adminuser-menu-img' >
             <Image className='image' src={row.icon}></Image>

src/pages/imglist/index.jsx

 import getQueryValue from '../../util/getQueryValue';
 import request, { uploadFiles } from '../../util/request';
 import groupby from 'lodash.groupby';
+import NoData from '@/compents/NoData'
 
 // Page({
 //     data: {
 
     return <View className='imglist'>
 
-
+        
+        <NoData nodata={!list.length}>
 
 
         {!labelState&&<View style={{ padding: '0 30px' }}>
         </View>
         }
 
+        </NoData>
+
         <AtFloatLayout isOpened={isOpened} onClose={() => handleClose()} style={{ zIndex: '1000' }}>
             <View className='floatmodel' >
                 <View onClick={() => updateLabel()}>更改标签</View>

src/pages/index/index.jsx

 import './index.scss'
 
 const index = (props) => {
-
-
-
-  const [userRole, setUserRole] = useState('1')
-  const [pageState, SetPageState] = useState('1')
-  const [list, setList] = useState([])
-  useEffect(() => {
-
-    
-    setList([
-      {
-        name: 'zhou',
-        phone: '177'
-      },
-      {
-        name: 'zhou',
-        phone: '177'
-      },
-      {
-        name: 'zhou',
-        phone: '177'
-      }
-    ])
-  }, [])
-
-
-  const onTabClick = (e) => {
-    console.log(e, '111')
-    setUserRole(e)
-  }
-
-  const onRegisterChange = (e) => {
-    console.log(e, '111')
-  }
-
-
-
- 
   return <View className='index'>
-{/* 432 */}
-      <AdminUser></AdminUser>  
-     
+      <AdminUser></AdminUser>
   </View>
 }
 

src/pages/mateTag/index.jsx

 import Layout from '../../layout/index'
 import request from '../../util/request'
 import getQueryValue from '../../util/getQueryValue'
+import NoData from '@/compents/NoData'
 
 const house = (props) => {
 
   // })
   const getMateTagList = () => {
     console.log(id,'getMateTagList')
-    request({ url: '/api/mp/taMateTag',params:{groupId:id},method: 'get', }).then((res) => {
+    request({ url: '/taMateTag',params:{groupId:id},method: 'get', }).then((res) => {
       const { records, ...page} = res.data.data
       setList(records)
     })
 
   return <View className='account'>
     <Layout>
+      <NoData nodata={!list.length} tips="暂无标签">
       {list.map((x, index) => {
         return <View className='account-view'>
   
         </View>
 
       })}
+      </NoData>
     </Layout>
     {/* onClick={(e)=>(e) */}
     <Tab value={['+新增标签']} color='#ffffff' onClick={() => { Taro.navigateTo({ url: `/pages/mateTag/edit/index?id=${id}` }) }} ></Tab>

src/pages/material/index.jsx

 import locationicon from '../../assets/locationicon.png'
 import Tags from '../../compents/tags/index'
 import request from '../../util/request'
+import NoData from '@/compents/NoData'
 import './index.scss'
 
 // Page({
 
 
         <Layout>
+            <NoData nodata={!list.length}>
             {
                 list.map((item,index) => {
-                    return <View className='material-card'>
+                    return <View className='material-card' key={index}>
                         <Text>{item.name}</Text>
                         <Tags list={item.taMateTagList} onChange={(e) => onLabelChange(e, index)} > </Tags>
                     </View>
                 })
             }
+            </NoData>
 
             {/* <View className='inputstyle-view'>
                 <Text className='title'>入住人数</Text>

src/pages/material/index.scss

   padding-top: 30rpx;
   &-card {
     text-align: center;
-color: #7b7b7b;
-margin-top: 30px;
+    // color: #7b7b7b;
+    color: '#666';
+    margin-top: 30px;
 
   }
 

src/pages/shop/index.jsx

 import Taro, { useDidShow } from '@tarojs/taro'
 import './index.scss'
 import { View, Text, Input, Image } from '@tarojs/components'
-import VirtualList from '@tarojs/components/virtual-list'
 import ContainerLayout from '../../compents/container/index'
 import Tab from '../../compents/tab/index'
 import Layout from '../../layout/index'
 import request from '../../util/request'
-
-
-// const Row = React.memo(({ id, index, style, data }) => {
-//   console.log({ id, index, style, data },'444')
-//   return (
-//     <View className='account-view' id={index}>
-//       {/* <Text className='account-view-title'>店铺编号：{index}</Text> */}
-//       <ContainerLayout className='account-view-card'>
-//         <View className='top' >
-//           <View>店铺名称：{data[index]?.name||''}</View>
-//           {/* <View>电话：{x.user.name}</View>
-//         <View>微信号：{x.user.name}</View>
-//         <View>房源数：{x.user.name}</View> */}
-//         </View>
-//         <View className='bottom'>
-//           <Text onClick={() => { Taro.navigateTo({ url: `/pages/account/edit/index?=${data.shopId}` }) }}>编辑</Text>
-//           <Text >删除</Text>
-//         </View>
-//       </ContainerLayout>
-
-//     </View>
-//   );
-// })
+import InifiniteList from '@/compents/InifiniteList'
 
 const account = (props) => {
 
     })
   }
 
-  // const listReachBottom = () => {
-  //   getShopList({ pageNum: page.pageNum + 1 })
-  // }
+  const loadMore = () => {
+    getShopList({ pageNum: page.pageNum + 1 })
+  }
+
+  const renderItem = (index, key) => (
+    <View className='account-view' key={key}>
+      {/* <Text className='account-view-title'>店铺编号：{index}</Text> */}
+      <ContainerLayout className='account-view-card'>
+        <View className='top' >
+          <View>店铺名称：{list[index].name||''}</View>
+          {/* <View>电话：{x.user.name}</View>
+        <View>微信号：{x.user.name}</View>
+        <View>房源数：{x.user.name}</View> */}
+        </View>
+        <View className='bottom'>
+          <Text onClick={() => { Taro.navigateTo({ url: `/pages/account/index?id=${list[index].shopId}` }) }}>店主</Text>
+          <Text onClick={()=>onDelete(list[index].shopId)}>删除</Text>
+        </View>
+      </ContainerLayout>  
+    </View>
+  )
   
 
   return <View className='account'>
         {Row}
       </VirtualList> */}
 
-      {
-        list.map((item)=>{
-        return  <View className='account-view' >
-          {/* <Text className='account-view-title'>店铺编号：{index}</Text> */}
-          <ContainerLayout className='account-view-card'>
-            <View className='top' >
-              <View>店铺名称：{item.name||''}</View>
-              {/* <View>电话：{x.user.name}</View>
-            <View>微信号：{x.user.name}</View>
-            <View>房源数：{x.user.name}</View> */}
-            </View>
-            <View className='bottom'>
-              <Text onClick={() => { Taro.navigateTo({ url: `/pages/account/index?id=${item.shopId}` }) }}>详情</Text>
-              <Text onClick={()=>onDelete(item.shopId)}>删除</Text>
-            </View>
-          </ContainerLayout>
-    
-        </View>
-        })
-      }
+      <InifiniteList
+        length={list.length}
+        total={page.total}
+        height={500}
+        itemRenderer={renderItem}
+        loadMore={loadMore}
+      />
 
     </Layout>
     {/* onClick={(e)=>(e) */}