静态页面

src/components/ProjectListItem/index.jsx

@@ -11,7 +11,7 @@ export default function ProjectListItem (props) {
     <view className='components ProjectListItem flex-h' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${Data.buildingId}` })}}>
       <view className='Img'>
         <view>
-          <Image mode='aspectFill' className='centerLabel' src={Data.buildingListImg.length ? Data.buildingListImg[0].url : null} />
+          <Image mode='aspectFill' className='centerLabel' src={Data.buildingListImg?.length ? Data.buildingListImg[0].url : null} />
         </view>
       </view>
       <view className='flex-item'>
@@ -25,7 +25,7 @@ export default function ProjectListItem (props) {
         <text className='Address'>{Data.address}</text>
         <view className='Tags'>
           {
-            Data.buildingTag.map((item, index) => (
+            (Data.buildingTag || []).map((item, index) => (
               <text key={`Tags-${index}`}>{item.tagName}</text>
             ))
           }
@@ -35,7 +35,7 @@ export default function ProjectListItem (props) {
           <text>{Data.shareNum}次分享</text>
           <view className='Users'>
             {
-              uvList.records.slice(0, 3).map((item, index) => (
+              (uvList.records || []).slice(0, 3).map((item, index) => (
                 <view key={`uv-${index}`}>
                   <Image mode='aspectFill' className='centerLabel' src={item.photoOravatar} />
                 </view>

src/components/ProjectListItem/index.scss

@@ -2,7 +2,7 @@
   padding-bottom: 30px;
   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
   > .Img {
-    width: 260px;
+    width: 280px;
     position: relative;
     overflow: hidden;
     margin-right: 20px;
@@ -26,8 +26,8 @@
         margin-right: 10px;
         > text {
           display: block;
-          font-size: 28px;
-          font-weight: bold;
+          font-size: 32px;
+          font-weight: 600;
           color: #333;
           line-height: 40px;
           white-space: nowrap;
@@ -36,7 +36,7 @@
         }
       }
       > text {
-        font-size: 24px;
+        font-size: 22px;
         line-height: 40px;
         color: #333;
         &:last-child {
@@ -46,16 +46,18 @@
     }
     > .Address {
       display: block;
-      font-size: 24px;
+      font-size: 22px;
       color: #666;
-      line-height: 40px;
+      line-height: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      margin-top: 20px;
     }
     > .Tags {
       font-size: 0;
       white-space: nowrap;
+      margin-top: 18px;
       > text {
         display: inline-block;
         vertical-align: middle;
@@ -64,23 +66,29 @@
         line-height: 28px;
         background: rgba(251, 171, 87, 0.3);
         color: #333;
-        margin-right: 10px;
+        margin-left: 20px;
+        &:first-child {
+          margin-left: 0;
+        }
       }
     }
     > .ShareInfo {
       font-size: 0;
       white-space: nowrap;
-      margin-top: 10px;
+      margin-top: 20px;
       > text {
         display: inline-block;
         vertical-align: middle;
-        font-size: 24px;
+        font-size: 16px;
         color: #333;
-        line-height: 40px;
+        line-height: 1;
         margin-left: 10px;
         &:first-child {
           margin-left: 0;
         }
+        &.iconfont {
+          font-size: 20px;
+        }
       }
       > .Users {
         display: inline-block;
@@ -91,11 +99,11 @@
         > view {
           display: inline-block;
           vertical-align: middle;
-          width: 40px;
-          height: 40px;
+          width: 24px;
+          height: 24px;
           background: #eee;
           border-radius: 100%;
-          margin-left: -10px;
+          margin-left: -6px;
           position: relative;
           overflow: hidden;
           &:nth-child(1) {

src/pages/index/buildingList/index.jsx

@@ -4,14 +4,43 @@ import './index.scss'
 import { ScrollView } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
 import ProjectListItem from '../../../components/ProjectListItem/index'
+import { useSelector } from 'react-redux'
+import { fetch } from '@/utils/request'
+import { API_INDEX_PROJECTS } from '@/constants/api'
 
 export default withLayout((props) => {
 
-  // const [PageProps] = useState(props)
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [PageProps] = useState(props)
+  const city = useSelector(state => state.city)
+  const [PageList, setPageList] = useState([])
+  const [pageNum, setPageNum] = useState(null)
+  const [pageSize] = useState(10)
   const [IsPull, setPull] = useState(false)
+  const [DataLock, setDataLock] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
+  useEffect(() => {
+    if(city.curCity.name) {
+      setPageNum(1)
+    }
+  }, [city])
+
+  useEffect(() => {
+    if(pageNum !== null && !DataLock) {
+      setDataLock(true)
+      GetProjectList()
+    }
+  }, [pageNum])
+
+  const GetProjectList = () => { // 获取项目列表
+    fetch({url: API_INDEX_PROJECTS, method: 'get', payload: {cityId: city.curCity.id, pageNum, pageSize}}).then((res) => {
+      setPageList(res.records || [])
+      setDataLock(false)
+    }).catch(() => {
+      setDataLock(false)
+    })
+  }
+
   const PageRefresh = () => { // 页面下拉刷新回调
     setPull(true)
   }

src/pages/index/buildingList/index.scss

@@ -9,17 +9,21 @@
       background: #f8f8f8;
       font-size: 0;
       white-space: nowrap;
-      border-radius: 44px;
+      border-radius: 78px;
       >text {
         display: inline-block;
         vertical-align: middle;
         font-size: 20px;
         color: #999;
         margin-left: 10px;
-        line-height: 44px;
+        line-height: 78px;
         &:first-child {
           margin-left: 0;
         }
+        &.iconfont {
+          font-size: 24px;
+          color: #666;
+        }
       }
     }
   }

src/pages/index/components/Banner/index.scss

@@ -1,7 +1,7 @@
 .components.Banner {
   width: 100%;
   height: 100%;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #eee;
   position: relative;
   overflow: hidden;
@@ -9,9 +9,13 @@
     width: 100%;
     height: 100%;
     .swiper-item {
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
       > image {
         width: 100%;
         height: 100%;
+        border-radius: 8px;
       }
     }
   }

src/pages/index/components/HotRecommend/index.scss

@@ -13,7 +13,7 @@
       align-items: center;
       background: rgba(0, 0, 0, 0.08);
       > view {
-        font-size: 30px;
+        font-size: 28px;
         line-height: 70px;
         text-align: center;
         font-weight: bold;
@@ -29,6 +29,7 @@
       padding: 20px;
       > .flex-h {
         align-items: center;
+        margin-top: 10px;
         > .flex-item {
           font-size: 32px;
           color: #193c83;
@@ -40,7 +41,7 @@
           & + text {
             font-size: 30px;
             color: #193c83;
-            line-height: 60px;
+            line-height: 56px;
             box-sizing: border-box;
             border: 2px solid #193c83;
             border-radius: 30px;
@@ -51,9 +52,11 @@
       }
       >text {
         font-size: 28px;
-        line-height: 40px;
+        line-height: 1;
         display: block;
-        padding-bottom: 10px;
+        padding-bottom: 20px;
+        margin-top: 6px;
+        text-indent: 26px;
       }
     }
   }

src/pages/index/components/Location/index.scss

@@ -4,10 +4,11 @@
   overflow: hidden;
   min-height: 10px;
   box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 78px;
   align-items: center;
   >text {
     font-size: 20px;
-    line-height: 80px;
+    line-height: 78px;
     margin-left: 10px;
     &:first-child {
       margin-left: 20px;

src/pages/index/components/Menu/index.scss

@@ -1,6 +1,7 @@
 .components.Menu {
   position: relative;
   overflow: hidden;
+  margin-top: 50px;
   > view {
     width: 100%;
     padding-bottom: 50%;
@@ -26,10 +27,10 @@
             position: relative;
             overflow: hidden;
             width: 20%;
-            margin-top: 20px;
+            margin-bottom: 30px;
             > image {
-              width: 88px;
-              height: 88px;
+              width: 90px;
+              height: 90px;
               display: block;
               margin: 0 auto;
             }

src/pages/index/index.scss

@@ -11,7 +11,7 @@
         padding: 0 30px;
         position: relative;
         overflow: visible;
-        margin-top: 24px;
+        margin-top: 20px;
       }
       > .Banner {
         padding: 0 30px;
@@ -38,6 +38,9 @@
         position: relative;
         overflow: hidden;
       }
+      >.HotRecommend {
+        margin-top: -20px;
+      }
       > .AllProject {
         .ToMap {
           margin-left: 20px;