feats

config/index.js

@@ -63,7 +63,10 @@ const config = {
     }
   },  
   alias: {
+    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
+    '@/components': path.resolve(__dirname, '..', 'src/components'),
     '@/store': path.resolve(__dirname, '..', 'src/store'),
+    '@/utils': path.resolve(__dirname, '..', 'src/utils')
   }
 }
 

src/pages/ShouYe/index.jsx

@@ -1,55 +1,43 @@
-import React, { Component } from 'react'
-import NavHeader from '../../components/NavHeader/index'
+import React, { useState } from 'react'
+import NavHeader from '@/components/NavHeader/index'
 import { Swiper, SwiperItem, Text } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class Index extends Component {
-
-  state = {
-    ShowAdvLayer: false,
-    IsPull: false,
-    NewsList: [
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' }
-    ],
-    OwnerList: [
-      { icon: 'iconjiaofei', name: '物业缴费', id: 1 },
-      { icon: 'icontongzhi', name: '物业通知', id: 2 },
-      { icon: 'iconbaoxiu', name: '物业报修', id: 3 },
-      { icon: 'iconrenzheng', name: '业主认证', id: 4 }
-    ],
-    NavList: [
-      { icon: 'iconhuodong1', name: '活动', id: 1, router: '/pages/ShouYe/HuoDong/index', isTab: false },
-      { icon: 'iconfuli', name: '福利', id: 2, router: '/pages/FuLi/index', isTab: true },
-      { icon: 'iconfuwu', name: '服务', id: 3, router: '/pages/WuYe/index', isTab: true },
-      { icon: 'iconxinwen', name: '资讯', id: 4, router: '/pages/ShouYe/ZiXun/index', isTab: false }
-    ],
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg',
-    BannerList: [
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=16024dc7edcdbb6c325d40cdff6373a1&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F213601f2xz7usscm2z1mjh.jpg' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=3f54f5330ec21728ecb02352fbb6af90&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F15%2F152011zser9o5oa9ee9xx6.jpg' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=46ae1d0f0d4f1f3740139191398f2a81&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131230%2F20131230165604-1960511167.jpg' },
-      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=2ec3fe46fb98c01055601cece86f111f&imgtype=0&src=http%3A%2F%2Fbenyouhuifile.it168.com%2Fforum%2Fday_100429%2F1004291840008539c8ac02cd5c.jpg' }
-    ]
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  NavClick (item) {
+export default function Index(props) {
+
+  const [ShowAdvLayer, setShowAdvLayer] = useState(false)
+  const [IsPull, setIsPull] = useState(false)
+  const [NewsList, setNewsList] = useState([
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg', title: '标题', desc: '描述' }
+  ])
+  const [OwnerList, setOwnerList] = useState([
+    { icon: 'iconjiaofei', name: '物业缴费', id: 1 },
+    { icon: 'icontongzhi', name: '物业通知', id: 2 },
+    { icon: 'iconbaoxiu', name: '物业报修', id: 3 },
+    { icon: 'iconrenzheng', name: '业主认证', id: 4 }
+  ])
+  const [NavList, setNavList] = useState([
+    { icon: 'iconhuodong1', name: '活动', id: 1, router: '/pages/ShouYe/HuoDong/index', isTab: false },
+    { icon: 'iconfuli', name: '福利', id: 2, router: '/pages/FuLi/index', isTab: true },
+    { icon: 'iconfuwu', name: '服务', id: 3, router: '/pages/WuYe/index', isTab: true },
+    { icon: 'iconxinwen', name: '资讯', id: 4, router: '/pages/ShouYe/ZiXun/index', isTab: false }
+  ])
+  const [BannerList, setBannerList] = useState([
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=16024dc7edcdbb6c325d40cdff6373a1&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F213601f2xz7usscm2z1mjh.jpg' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=3f54f5330ec21728ecb02352fbb6af90&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F15%2F152011zser9o5oa9ee9xx6.jpg' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=46ae1d0f0d4f1f3740139191398f2a81&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131230%2F20131230165604-1960511167.jpg' },
+    { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=2ec3fe46fb98c01055601cece86f111f&imgtype=0&src=http%3A%2F%2Fbenyouhuifile.it168.com%2Fforum%2Fday_100429%2F1004291840008539c8ac02cd5c.jpg' }
+  ])
+  const [TestImg, setTestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
+
+  const NavClick = (item) => {
     return () => {
       if (item.isTab) {
         Taro.switchTab({ url: item.router })
@@ -59,149 +47,143 @@ export default class Index extends Component {
     }
   }
 
-  OnRefresh () { // 页面下拉刷新
-    this.setState({
-      IsPull: true
-    }, () => {
-      window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
-      }, 1000)
-    })
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPull(true)
+    
+    const t = setTimeout(() => {
+      setIsPull(false)
+      clearTimeout(t)
+    }, 1000)
   }
 
-  render () {
-    const { TestImg, ShowAdvLayer, IsPull, BannerList, NavList, OwnerList, NewsList } = this.state
-    return (
-      <view className='ShouYe flex-v'>
-        <NavHeader BgColor='#f35844' Title='首页'></NavHeader>
-        <view className='flex-item'>
-
-          {/* 广告 */}
-          <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
-            <view className='centerLabel'>
-              <image mode='aspectFit' src={TestImg}></image>
-              <Text className='iconfont iconguanbi'></Text>
-            </view>
+  return (
+    <view className='ShouYe flex-v'>
+      <NavHeader BgColor='#f35844' Title='首页'></NavHeader>
+      <view className='flex-item'>
+
+        {/* 广告 */}
+        <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
+          <view className='centerLabel'>
+            <image mode='aspectFit' src={TestImg}></image>
+            <Text className='iconfont iconguanbi'></Text>
           </view>
+        </view>
 
-          {/* 正文 */}
-          <view className='PageContainer'>
-            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#f35844'>
-              <view className='Content'>
+        {/* 正文 */}
+        <view className='PageContainer'>
+          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#f35844'>
+            <view className='Content'>
 
-                {/* 背景图 */}
-                <view className='TopBg'></view>
+              {/* 背景图 */}
+              <view className='TopBg'></view>
 
-                <view>
+              <view>
 
-                  {/* 欢迎词 */}
-                  <Text className='Welcome'>欢迎来到远道智慧社区！</Text>
+                {/* 欢迎词 */}
+                <Text className='Welcome'>欢迎来到远道智慧社区！</Text>
 
-                  {/* banner */}
-                  <view className='BannerContainer'>
+                {/* banner */}
+                <view className='BannerContainer'>
+                  <view>
                     <view>
-                      <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'>
-                                  <image mode='aspectFill' src={item.img}></image>
-                                </view>
-                              </SwiperItem>
-                            ))
-                          }
-                        </Swiper>
-                      </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'>
+                                <image mode='aspectFill' src={item.img}></image>
+                              </view>
+                            </SwiperItem>
+                          ))
+                        }
+                      </Swiper>
                     </view>
                   </view>
+                </view>
 
-                  {/* 导航 */}
-                  <view className='NavContainer flex-h'>
-                    {
-                      NavList.map((item, index) => (
-                        <view key={`Nav-${index}`} className='flex-item'>
-                          <view onClick={this.NavClick(item)}>
-                            <view className='centerLabel'>
-                              <Text className={`iconfont ${item.icon}`}></Text>
-                              <Text>{item.name}</Text>
-                            </view>
+                {/* 导航 */}
+                <view className='NavContainer flex-h'>
+                  {
+                    NavList.map((item, index) => (
+                      <view key={`Nav-${index}`} className='flex-item'>
+                        <view onClick={NavClick(item)}>
+                          <view className='centerLabel'>
+                            <Text className={`iconfont ${item.icon}`}></Text>
+                            <Text>{item.name}</Text>
                           </view>
                         </view>
-                      ))
-                    }
-                  </view>
-
-                  {/* 热门活动 */}
-                  <view className='HotActivityContainer'>
-                    <view>
-                      <view className='Title'>
-                        <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}>热门活动</Text>
-                        <Text className='iconfont icongengduo' onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}></Text>
-                      </view>
-                      <view className='Activity'>
-                        <image className='centerLabel' mode='aspectFill' src={TestImg}></image>
                       </view>
+                    ))
+                  }
+                </view>
+
+                {/* 热门活动 */}
+                <view className='HotActivityContainer'>
+                  <view>
+                    <view className='Title'>
+                      <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}>热门活动</Text>
+                      <Text className='iconfont icongengduo' onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}></Text>
+                    </view>
+                    <view className='Activity'>
+                      <image className='centerLabel' mode='aspectFill' src={TestImg}></image>
                     </view>
                   </view>
+                </view>
 
-                  {/* 业主专区 */}
-                  <view className='OwnerContainer'>
-                    <view>
-                      <view className='Title'>
-                        <Text>业主专区</Text>
-                      </view>
-                      <view className='OwnerList flex-h'>
-                        {
-                          OwnerList.map((item, index) => (
-                            <view className='flex-item' key={`Owners-${index}`}>
-                              <Text className={`iconfont ${item.icon}`}></Text>
-                              <Text>{item.name}</Text>
-                            </view>
-                          ))
-                        }
-                      </view>
+                {/* 业主专区 */}
+                <view className='OwnerContainer'>
+                  <view>
+                    <view className='Title'>
+                      <Text>业主专区</Text>
+                    </view>
+                    <view className='OwnerList flex-h'>
+                      {
+                        OwnerList.map((item, index) => (
+                          <view className='flex-item' key={`Owners-${index}`}>
+                            <Text className={`iconfont ${item.icon}`}></Text>
+                            <Text>{item.name}</Text>
+                          </view>
+                        ))
+                      }
                     </view>
                   </view>
+                </view>
 
-                  {/* 热门资讯 */}
-                  <view className='NewsContainer'>
-                    <view>
-                      <view className='Title flex-h'>
-                        <Text className='flex-item'>热门资讯</Text>
-                        <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/ZiXun/index' }) }}>查看全部</Text>
-                        <Text className='iconfont iconjiantouright'></Text>
-                      </view>
-                      <view className='List'>
-                        {
-                          NewsList.map((item, index) => (
-                            <view key={`News-${index}`} className='flex-h'>
-                              <view className='Img'>
-                                <image mode='aspectFill' src={item.img} className='centerLabel'></image>
-                              </view>
-                              <view className='flex-item'>
-                                <Text>{item.title}</Text>
-                                <Text>{item.desc}</Text>
-                              </view>
+                {/* 热门资讯 */}
+                <view className='NewsContainer'>
+                  <view>
+                    <view className='Title flex-h'>
+                      <Text className='flex-item'>热门资讯</Text>
+                      <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/ZiXun/index' }) }}>查看全部</Text>
+                      <Text className='iconfont iconjiantouright'></Text>
+                    </view>
+                    <view className='List'>
+                      {
+                        NewsList.map((item, index) => (
+                          <view key={`News-${index}`} className='flex-h'>
+                            <view className='Img'>
+                              <image mode='aspectFill' src={item.img} className='centerLabel'></image>
                             </view>
-                          ))
-                        }
-                      </view>
+                            <view className='flex-item'>
+                              <Text>{item.title}</Text>
+                              <Text>{item.desc}</Text>
+                            </view>
+                          </view>
+                        ))
+                      }
                     </view>
                   </view>
-
-                  <view className='PageBottom'></view>
-
                 </view>
 
+                <view className='PageBottom'></view>
+
               </view>
-            </scroll-view>
-          </view>
 
+            </view>
+          </scroll-view>
         </view>
-      </view >
-    )
-  }
+
+      </view>
+    </view >
+  )
 }

src/pages/bar/index.config.js

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: '首页'
-}

src/pages/bar/index.jsx

@@ -1,26 +0,0 @@
-import React, { Component, useEffect } from 'react'
-import { View, Text, Navigator } from '@tarojs/components'
-import './index.less'
-
-import { useModel } from '@/store'
-
-export default (props) => {
-  const { foo, setFoo } = useModel('foo')
-  
-  console.log('-----bar-------')
-
-  useEffect(() => {
-    let i = 1;
-    console.log('-----bar-------')
-
-    const t = setInterval(() => setFoo(i++), 1000)
-    return () => clearInterval(t)
-  }, [])
-
-  return (
-    <View className='foo'>
-      <Text>{foo}</Text>
-      <Navigator url="/pages/foo/index">foo</Navigator>
-    </View>
-  )
-}

src/pages/foo/index.config.js

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: '首页'
-}

src/pages/foo/index.jsx

@@ -1,27 +0,0 @@
-import React, { Component, useEffect } from 'react'
-import { View, Text, Navigator } from '@tarojs/components'
-import './index.less'
-
-import { useModel } from '@/store'
-
-export default (props) => {
-  // const { foo, setFoo } = useModel('foo')
-  const { foo } = useModel('foo')
-  
-  console.log('-----foo-------')
-
-  // useEffect(() => {
-  //   let i = 1;
-  //   console.log('-----setfoo-------')
-
-  //   const t = setInterval(() => setFoo(i++), 1000)
-  //   return () => console.log('descard foo') || clearInterval(t) 
-  // }, [])
-
-  return (
-    <View className='foo'>
-      <Text>{foo}</Text>
-      <Navigator url="/pages/bar/index">bar</Navigator>
-    </View>
-  )
-}