静态页面

src/components/WuYeBanner/index.jsx

+import React, { useState } from 'react'
+import { Swiper, SwiperItem } from '@tarojs/components'
+import nav2detail from '@/utils/nav2detail'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function WuYeBanner (props) {
+
+  const { List = [] } = props
+
+  return (
+    <view className='WuYeBanner'>
+      <Swiper className='BannerSwiper' autoplay circular indicator-dots indicator-color='rgba(0,0,0,0.4)' indicator-active-color='rgba(255,255,255,0.8)'>
+        {
+          List.map((item, index) => (
+            <SwiperItem className='SwiperItem' key={`Banner-${index}`}>
+              <view className='BannerItem' onClick={() => nav2detail({ type: item.contentType, id: item.targetId })}>
+                <image mode='aspectFill' src={item.image}></image>
+              </view>
+            </SwiperItem>
+          ))
+        }
+      </Swiper>
+    </view>
+  )
+}

src/components/WuYeBanner/index.less

+.WuYeBanner {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .BannerSwiper {
+    width: 100%;
+    height: 100%;
+
+    .BannerItem {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/components/WuYeBaoXiu/index.jsx

 import React, { useState, useEffect } from 'react'
 import { useModel } from '@/store'
 import Taro from '@tarojs/taro'
+import { Swiper, SwiperItem } from '@tarojs/components'
 import WuYeBaoXiuItem from '@/components/WuYeBaoXiuItem/index'
 import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import request, { apis } from '@/utils/request'
   })
 
   const GetBanner = (done = () => { }) => { // 获取轮播图
-    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageSize: 1 } }).then((res) => {
+    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageSize: 5, pageNum: 1 } }).then((res) => {
       setBannerList([...(res || [])])
       done()
     }).catch(() => {
           <view>
             {/* 大图 */}
             <view className='BigImg'>
-              {
-                BannerList.length > 0 &&
-                <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
-              }
+              <view>
+                <Swiper className='BannerSwiper' autoplay circular indicator-dots indicator-color='rgba(0,0,0,0.4)' indicator-active-color='rgba(255,255,255,0.8)'>
+                  {
+                    BannerList.map((item, index) => (
+                      <SwiperItem className='SwiperItem' key={`Banner-${index}`}>
+                        <view className='BannerItem' onClick={() => nav2detail({ type: item.contentType, id: item.targetId })}>
+                          <image mode='aspectFill' src={item.image}></image>
+                        </view>
+                      </SwiperItem>
+                    ))
+                  }
+                </Swiper>
+              </view>
             </view>
 
             {/* 我要报修 */}

src/components/WuYeBaoXiu/index.less

     overflow: hidden;
     background: #ccc;
 
-    >image {
+    >view {
       width: 100%;
-      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+
+      >.BannerSwiper {
+        width: 100%;
+        height: 100%;
+
+        .BannerItem {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
     }
   }
 

src/components/WuYeFuWu/index.jsx

 import React, { useState, useEffect } from 'react'
 import { useModel } from '@/store'
 import Taro from '@tarojs/taro'
+import { Swiper, SwiperItem } from '@tarojs/components'
 import WuYeFuWuItem from '@/components/WuYeFuWuItem/index'
 import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import request, { apis } from '@/utils/request'
 export default function WuYeFuWu () {
 
   const { user } = useModel('user')
-  const [newsTypeId, setNewsTypeId] = useState()
   const [PageList, setPageList] = useState([])
   const [BannerList, setBannerList] = useState([])
   const [typeList, setTypeList] = useState([])
   }, [])
 
   const GetBanner = (done = () => { }) => { // 获取轮播图
-    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 1 } }).then((res) => {
+    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 5 } }).then((res) => {
       setBannerList([...(res || [])])
       done()
     }).catch(() => {
     setPageList(PageList.concat(e))
   }
 
-  const KeepChildren = () => {
-    return (
-      <view>
-        {/* 大图 */}
-        <view className='BigImg'>
-          {
-            BannerList.length > 0 &&
-            <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
-          }
-        </view>
-
-        <view style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <IconBlock title='办事指南' />
-          <IconBlock title='政策法规' />
-        </view>
-
-        {/* 物业办事指南 */}
-        {/* <view className='BanShiZhiNan'>
-          <text>物业办事指南</text>
-          <view className='flex-h'>
-            <view className='Line'><view></view></view>
-            <view className='flex-item'>
-              <text>1、业主收楼手续办理</text>
-              <text>2、物业转名手续办理</text>
-              <text>3、业主卡、住户卡办理</text>
-            </view>
-          </view>
-        </view> */}
-      </view>
-    )
-  }
-
   return (
     <view className='WuYeFuWu'>
       <ScrollPageRefresh
           <view>
             {/* 大图 */}
             <view className='BigImg'>
-              {
-                BannerList.length > 0 &&
-                <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
-              }
+              <view>
+                <Swiper className='BannerSwiper' autoplay circular indicator-dots indicator-color='rgba(0,0,0,0.4)' indicator-active-color='rgba(255,255,255,0.8)'>
+                  {
+                    BannerList.map((item, index) => (
+                      <SwiperItem className='SwiperItem' key={`Banner-${index}`}>
+                        <view className='BannerItem' onClick={() => nav2detail({ type: item.contentType, id: item.targetId })}>
+                          <image mode='aspectFill' src={item.image}></image>
+                        </view>
+                      </SwiperItem>
+                    ))
+                  }
+                </Swiper>
+              </view>
             </view>
 
             <view className='TypeList'>
-              {/* <view>
-                <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/ShengHuoGuanJia/index` }) }}>
-                  <view className='centerLabel'>
-                    <view className='Icon'>
-                      <text className='iconfont iconguanjia'></text>
-                    </view>
-                    <view className='Name'>
-                      <text>生活管家</text>
-                    </view>
-                  </view>
-                </view>
-              </view> */}
               <view>
                 <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/GongGongFuWu/index` }) }}>
                   <view className='centerLabel'>

src/components/WuYeFuWu/index.less

     overflow: hidden;
     background: #ccc;
 
-    >image {
+    >view {
       width: 100%;
-      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+
+      >.BannerSwiper {
+        width: 100%;
+        height: 100%;
+
+        .BannerItem {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
     }
   }
 

src/components/WuYeGongGao/index.jsx

 import React, { useState, useEffect } from 'react'
 import { useModel } from '@/store'
 import Taro from '@tarojs/taro'
+import { Swiper, SwiperItem } from '@tarojs/components'
 import WuYeGongGaoItem from '@/components/WuYeGongGaoItem/index'
 import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import request, { apis } from '@/utils/request'
   }, [])
 
   const GetBanner = (done = () => { }) => { // 获取轮播图
-    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 1 } }).then((res) => {
+    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 5 } }).then((res) => {
       setBannerList([...(res || [])])
       done()
     }).catch(() => {
           <view>
             {/* 大图 */}
             <view className='BigImg'>
-              {
-                BannerList.length > 0 &&
-                <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
-              }
+              <view>
+                <Swiper className='BannerSwiper' autoplay circular indicator-dots indicator-color='rgba(0,0,0,0.4)' indicator-active-color='rgba(255,255,255,0.8)'>
+                  {
+                    BannerList.map((item, index) => (
+                      <SwiperItem className='SwiperItem' key={`Banner-${index}`}>
+                        <view className='BannerItem' onClick={() => nav2detail({ type: item.contentType, id: item.targetId })}>
+                          <image mode='aspectFill' src={item.image}></image>
+                        </view>
+                      </SwiperItem>
+                    ))
+                  }
+                </Swiper>
+              </view>
             </view>
           </view>
         }

src/components/WuYeGongGao/index.less

     overflow: hidden;
     background: #ccc;
 
-    >image {
+    >view {
       width: 100%;
-      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+
+      >.BannerSwiper {
+        width: 100%;
+        height: 100%;
+
+        .BannerItem {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
     }
   }
 

src/components/WuYeJiaoFei/index.jsx

 import React, { useState, useEffect } from 'react'
-import WuYeJiaoFeiItem from '@/components/WuYeJiaoFeiItem/index'
+import WuYeBanner from '@/components/WuYeBanner/index'
 import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import request, { apis } from '@/utils/request'
 import nav2detail from '@/utils/nav2detail'
 import Taro from '@tarojs/taro'
+import { Swiper, SwiperItem } from '@tarojs/components'
 import { Checkbox, CheckboxGroup } from '@tarojs/components'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
   }
 
   const GetBanner = (done = () => { }) => { // 获取轮播图
-    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 1 } }).then((res) => {
+    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 5 } }).then((res) => {
       setBannerList([...(res || [])])
       done()
     }).catch(() => {
               <view>
                 {/* 大图 */}
                 <view className='BigImg'>
-                  {
-                    BannerList.length > 0 &&
-                    <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
-                  }
+                  <view>
+                    <WuYeBanner List={BannerList}></WuYeBanner>
+                  </view>
                 </view>
               </view>
             }

src/components/WuYeJiaoFei/index.less

   >.flex-item {
     position: relative;
     overflow: hidden;
+
     >view {
       width: 100%;
       position: absolute;
       top: 0;
       bottom: 0;
       overflow: hidden;
+
       .BigImg {
         width: 100%;
         padding-bottom: 50%;
         position: relative;
         overflow: hidden;
         background: #ccc;
-    
-        >image {
+
+        >view {
           width: 100%;
-          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow: hidden;
+
+          >.BannerSwiper {
+            width: 100%;
+            height: 100%;
+
+            .SwiperItem {
+              width: 100%;
+              height: 100%;
+              position: relative;
+            }
+
+            .BannerItem {
+              width: 100%;
+              height: 100%;
+              position: relative;
+
+              image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
         }
       }
-    
+
       .List {
         position: relative;
         overflow: hidden;
-    
+
         checkbox {
           display: block;
           line-height: 1.4em;
           background: #fff;
           margin-bottom: 30px;
           padding: 30px;
+
           &:first-child {
             margin-top: 30px;
           }
+
           .flex-item {
             color: #333;
             font-size: 28px;
             text-overflow: ellipsis;
             margin: 0 20px;
           }
+
           .Price {
             color: #F35844;
             font-size: 28px;
             font-weight: bold;
           }
         }
-    
+
         >view {
           width: 100%;
           position: relative;
           overflow: hidden;
           margin-bottom: 30px;
-    
+
           &:first-child {
             margin-top: 30px;
           }
       }
     }
   }
+
   >.PayLine {
     align-items: center;
     border-top: 2px solid #eee;
     background: #fff;
+
     >view {
       position: relative;
       overflow: hidden;
       margin-left: 10px;
+
       &:first-child {
         margin-left: 30px;
       }
+
       text {
         font-size: 28px;
         color: #333;
       }
+
       &.Btn {
         width: 160px;
+
         text {
           display: block;
           text-align: center;