静态页面

project.config.json

@@ -27,7 +27,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": false,
+		"useCompilerModule": true,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

src/components/ScrollPageRefresh/index.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import ScrollPage from '@/components/ScrollPage/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ScrollPageRefresh (props) {
+
+  const { ApiName = '', ListName = 'records', RequestParams = {}, RequestData = null, RequestUrlData = null, PageSize = 10, Refresh = () => { }, Push = () => { } } = props
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullDown(false)
+      setIsPullUp(false)
+    })
+  }, [PageNum])
+
+  const GetPageList = (done = () => { }) => { // 获取列表
+    let RequestBody = {
+      ...apis[ApiName],
+      params: { ...RequestParams, pageNum: PageNum, pageSize: PageSize }
+    }
+    if (RequestData !== null) {
+      RequestBody.data = { ...RequestData }
+    }
+    if (RequestUrlData !== null) {
+      RequestBody.args = { ...RequestUrlData }
+    }
+    request({ ...RequestBody }).then((res) => {
+      if (PageNum === 1) {
+        Refresh([...res[ListName]])
+      } else {
+        Push([...res[ListName]])
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
+  }
+
+  return (
+    <view className='ScrollPageRefresh'>
+      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
+        {
+          props.children
+        }
+      </ScrollPage>
+    </view>
+  )
+}

src/components/ScrollPageRefresh/index.less

@@ -0,0 +1,5 @@
+.ScrollPageRefresh {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

src/components/WuYeGongGao/index.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
+import React, { useState } from 'react'
 import { useModel } from '@/store'
 import WuYeGongGaoItem from '@/components/WuYeGongGaoItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
@@ -10,55 +9,19 @@ import './index.less'
 export default function WuYeGongGao () {
 
   const { user } = useModel('user')
-  const [IsPullUp, setIsPullUp] = useState(false)
-  const [IsPullDown, setIsPullDown] = useState(false)
-  const [HasNextPage, setHasNextPage] = useState(true)
-  const [PageNum, setPageNum] = useState(1)
   const [PageList, setPageList] = useState([])
 
-  useEffect(() => {
-    GetPageList(() => {
-      setIsPullUp(false)
-    })
-  }, [PageNum])
-
-  const GetPageList = (done = () => { }) => { // 获取列表
-    request({ ...apis.getGongGaoList, args: { orgId: user.orgId }, params: { pageNum: PageNum, pageSize: 10 } }).then((res) => {
-      if (PageNum === 1) {
-        setPageList([...res.records])
-      } else {
-        setPageList(PageList.concat([...res.records]))
-      }
-      setHasNextPage(res.current - 0 < res.pages - 0)
-      done()
-    }).catch(() => {
-      done()
-    })
-  }
-
-  const OnRefresh = () => { // 页面下拉刷新
-    setIsPullDown(true)
-    setHasNextPage(true)
-    setPageNum(1)
-    if (PageNum === 1) {
-      GetPageList(() => {
-        setIsPullDown(false)
-      })
-    } else {
-      setPageNum(1)
-    }
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
     <view className='WuYeGongGao'>
-      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+      <ScrollPageRefresh ApiName={`getGongGaoList`} RequestUrlData={{ orgId: user.orgId }} Refresh={Refresh} Push={Push}>
 
         {/* 大图 */}
         <view className='BigImg'>
@@ -76,7 +39,7 @@ export default function WuYeGongGao () {
           }
         </view>
 
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view>
   )
 }

src/components/WuYeGongGaoItem/index.jsx

@@ -1,39 +1,31 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import toolclass from '@/utils/toolclass.js'
+import { RichText } from '@tarojs/components'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeGongGaoItem extends Component {
+export default function WuYeGongGaoItem (props) {
 
-  componentWillMount () { }
+  const { Data = {} } = props
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <view className='WuYeGongGaoItem' onClick={() => { Taro.navigateTo({ url: '/pages/WuYe/GongGaoDetail/index?id=1' }) }}>
-        <view className='Title flex-h'>
-          <text className='flex-item'>处理绿化带种菜公告</text>
-          <text>2020/06/08</text>
-        </view>
-        <view className='GaoItemContent'>
-          <text>为了小区能有一个舒适、温馨、绿化美好的居住环境，请各位业主不要在绿化带内种菜。对于这种种树种花...</text>
-          <view className='flex-h'>
-            <text>孙琪琪</text>
-            <text>物业</text>
-            <view className='flex-item'></view>
-            <text className='iconfont iconguankan'></text>
-            <text>1234人观看</text>
-          </view>
+  return (
+    <view className='WuYeGongGaoItem' onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/GongGaoDetail/index?id=${Data.id}` }) }}>
+      <view className='Title flex-h'>
+        <text className='flex-item'>{Data.announcementTitle}</text>
+        <text>{toolclass.FormatDate(Data.createDate, 'YY:MM:DD')}</text>
+      </view>
+      <view className='GaoItemContent'>
+        <RichText nodes={Data.announcementContent}></RichText>
+        <view className='flex-h'>
+          <text>{Data.createUser}</text>
+          <text>物业</text>
+          <view className='flex-item'></view>
+          <text className='iconfont iconguankan'></text>
+          <text>{Data.viewCount}人观看</text>
         </view>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/components/WuYeGongGaoItem/index.less

@@ -40,6 +40,8 @@
     >.flex-h {
       align-items: center;
       margin-top: 20px;
+      position: relative;
+      overflow: hidden;
 
       >text {
         font-size: 24px;

src/pages/HuoDong/ZiXunDetail/index.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
 import request, { apis } from '@/utils/request'
 import { RichText } from '@tarojs/components'
+import toolclass from '@/utils/toolclass.js'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
@@ -35,7 +36,7 @@ export default function ZiXunDetail (props) {
             <text>{NewsDetail.newsName}</text>
           </view>
           <view className='flex-h'>
-            <text className='flex-item'>{NewsDetail.createDate}</text>
+            <text className='flex-item'>{toolclass.FormatDate(NewsDetail.createDate)}</text>
             <text className='iconfont iconguankan'></text>
             <text>{NewsDetail.pvNum || 0}</text>
           </view>

src/pages/HuoDong/index.jsx

@@ -1,106 +1,39 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import TabPageCutNav from '@/components/TabPageCutNav/index'
 import NavHeader from '@/components/NavHeader/index'
 import ActivityListItem from '@/components/ActivityListItem/index'
 import NewsListItem from '@/components/NewsListItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
-import request, { apis } from '@/utils/request'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function HuoDong (props) {
+export default function HuoDong () {
 
   const [NavList] = useState([{ name: '活动', id: 1 }, { name: '资讯', id: 2 }])
   const [CurrentNavId, setCurrentNavId] = useState(1)
-  const [IsPullDown, setIsPullDown] = useState(false)
-  const [IsPullUp, setIsPullUp] = useState(false)
-  const [HasNextPage, setHasNextPage] = useState(true)
-  const [PageNum, setPageNum] = useState(1)
   const [ActivityList, setActivityList] = useState([])
-  const [ActivityTotal, setActivityTotal] = useState(1)
   const [NewsList, setNewsList] = useState([])
 
-  useEffect(() => {
-    if (CurrentNavId === 1) { // 活动
-      GetActivityList(() => {
-        setIsPullUp(false)
-      })
-    } else if (CurrentNavId === 2) { // 资讯
-      GetNewsList(() => {
-        setIsPullUp(false)
-      })
+  const Refresh = (e) => { // 下拉刷新
+    if (CurrentNavId === 1) {
+      setActivityList(e)
+    } else {
+      setNewsList(e)
     }
-  }, [PageNum])
-
-  useEffect(() => {
-    setHasNextPage(ActivityTotal > ActivityList.length)
-  }, [ActivityList])
-
-  useEffect(() => {
-    OnRefresh()
-  }, [CurrentNavId])
-
-  const GetActivityList = (done = () => { }) => { // 获取活动列表
-    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
-      setActivityTotal(res.total)
-      if (PageNum === 1) {
-        setActivityList([...res.list])
-      } else {
-        setActivityList(NewsList.concat([...res.list]))
-      }
-      done()
-    }).catch(() => {
-      done()
-    })
   }
 
-  const GetNewsList = (done = () => { }) => { // 获取资讯列表
-    request({ ...apis.getNewsList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
-      if (PageNum === 1) {
-        setNewsList([...res.records])
-      } else {
-        setNewsList(NewsList.concat([...res.records]))
-      }
-      setHasNextPage(res.current - 0 < res.pages - 0)
-      done()
-    }).catch(() => {
-      done()
-    })
+  const Push = (e) => { // 上拉加载
+    if (CurrentNavId === 1) {
+      setActivityList(ActivityList.concat(e))
+    } else {
+      setNewsList(NewsList.concat(e))
+    }
   }
 
   const NavChange = (e) => { // nav切换
     return () => {
       setCurrentNavId(e.id)
-      setHasNextPage(true)
-      setIsPullDown(false)
-      setIsPullUp(false)
-      setPageNum(1)
-    }
-  }
-
-  const OnRefresh = () => { // 下拉刷新
-    setIsPullDown(true)
-    setHasNextPage(true)
-    if (PageNum === 1) {
-      if (CurrentNavId === 1) {
-        GetActivityList(() => {
-          setIsPullDown(false)
-        })
-      } else if (CurrentNavId === 2) {
-        GetNewsList(() => {
-          setIsPullDown(false)
-        })
-      }
-    } else {
-      setPageNum(1)
-    }
-  }
-
-  const OnPullUp = () => { // 上拉加载
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
     }
   }
 
@@ -110,10 +43,10 @@ export default function HuoDong (props) {
       <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={NavChange}></TabPageCutNav>
       <view className='flex-item'>
         <view>
-          <ScrollPage OnRefresh={OnRefresh} IsPullDown={IsPullDown} OnPullUp={OnPullUp} IsPullUp={IsPullUp} HasMore={HasNextPage}>
-            {/* 活动 */}
-            {
-              CurrentNavId - 0 === 1 &&
+          {/* 活动 */}
+          {
+            CurrentNavId - 0 === 1 &&
+            <ScrollPageRefresh ApiName={`getActivityList`} ListName={`list`} Refresh={Refresh} Push={Push}>
               <view className='Content Activity'>
                 {
                   ActivityList.map((item, index) => (
@@ -123,11 +56,13 @@ export default function HuoDong (props) {
                   ))
                 }
               </view>
-            }
+            </ScrollPageRefresh>
+          }
 
-            {/* 资讯 */}
-            {
-              CurrentNavId - 0 === 2 &&
+          {/* 资讯 */}
+          {
+            CurrentNavId - 0 === 2 &&
+            <ScrollPageRefresh ApiName={`getNewsList`} Refresh={Refresh} Push={Push}>
               <view className='Content News'>
                 <view className='BigImg'>
                   <image mode='aspectFill' src={null} class='centerLabel'></image>
@@ -142,8 +77,8 @@ export default function HuoDong (props) {
                   }
                 </view>
               </view>
-            }
-          </ScrollPage>
+            </ScrollPageRefresh>
+          }
         </view>
       </view>
     </view>

src/pages/ShouYe/HuoDong/index.jsx

@@ -1,62 +1,25 @@
-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
+import React, { useState } from 'react'
 import ActivityListItem from '@/components/ActivityListItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function ShouYeHuoDong () {
 
-  const [IsPullUp, setIsPullUp] = useState(false)
-  const [IsPullDown, setIsPullDown] = useState(false)
-  const [HasNextPage, setHasNextPage] = useState(true)
-  const [PageNum, setPageNum] = useState(1)
   const [PageList, setPageList] = useState([])
 
-  useEffect(() => {
-    GetPageList(() => {
-      setIsPullUp(false)
-    })
-  }, [PageNum])
-
-  const GetPageList = (done = () => { }) => { // 获取列表
-    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
-      if (PageNum === 1) {
-        setPageList([...res.list])
-      } else {
-        setPageList(PageList.concat([...res.list]))
-      }
-      setHasNextPage(res.current - 0 < res.pages - 0)
-      done()
-    }).catch(() => {
-      done()
-    })
-  }
-
-  const OnRefresh = () => { // 页面下拉刷新
-    setIsPullDown(true)
-    setHasNextPage(true)
-    setPageNum(1)
-    if (PageNum === 1) {
-      GetPageList(() => {
-        setIsPullDown(false)
-      })
-    } else {
-      setPageNum(1)
-    }
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
     <view className='ShouYeHuoDong'>
-      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+      <ScrollPageRefresh ApiName={`getActivityList`} ListName={`list`} Refresh={Refresh} Push={Push}>
         <view className='ShouYeHuoDongContent'>
           {
             PageList.map((item, index) => (
@@ -66,7 +29,7 @@ export default function ShouYeHuoDong () {
             ))
           }
         </view>
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view >
   )
 }

src/pages/ShouYe/ZiXun/index.jsx

@@ -1,72 +1,35 @@
-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
+import React, { useState } from 'react'
 import NewsListItem from '@/components/NewsListItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function ShouYeZiXun (props) {
+export default function ShouYeZiXun () {
 
-  const [IsPullUp, setIsPullUp] = useState(false)
-  const [IsPullDown, setIsPullDown] = useState(false)
-  const [HasNextPage, setHasNextPage] = useState(true)
-  const [PageNum, setPageNum] = useState(1)
-  const [NewsList, setNewsList] = useState([])
+  const [PageList, setPageList] = useState([])
 
-  useEffect(() => {
-    GetNewsList(() => {
-      setIsPullUp(false)
-    })
-  }, [PageNum])
-
-  const GetNewsList = (done = () => { }) => { // 获取资讯列表
-    request({ ...apis.getNewsList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
-      if (PageNum === 1) {
-        setNewsList([...res.records])
-      } else {
-        setNewsList(NewsList.concat([...res.records]))
-      }
-      setHasNextPage(res.current - 0 < res.pages - 0)
-      done()
-    }).catch(() => {
-      done()
-    })
-  }
-
-  const OnRefresh = () => { // 页面下拉刷新
-    setIsPullDown(true)
-    setHasNextPage(true)
-    setPageNum(1)
-    if (PageNum === 1) {
-      GetNewsList(() => {
-        setIsPullDown(false)
-      })
-    } else {
-      setPageNum(1)
-    }
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
     <view className='ShouYeZiXun'>
-      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
+      <ScrollPageRefresh ApiName={`getNewsList`} Refresh={Refresh} Push={Push}>
         <view className='ShouYeHuoDongContent'>
           {
-            NewsList.map((item, index) => (
+            PageList.map((item, index) => (
               <view className='ListItem' key={`ActivityItem-${index}`}>
                 <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
               </view>
             ))
           }
         </view>
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view >
   )
 }

src/pages/WoDe/WoDeHuoDong/index.jsx

@@ -1,62 +1,26 @@
-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
+import React, { useState } from 'react'
 import ActivityListItem from '@/components/ActivityListItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WoDeHuoDong (props) {
-  
-  const [IsPullUp, setIsPullUp] = useState(false)
-  const [IsPullDown, setIsPullDown] = useState(false)
-  const [HasNextPage, setHasNextPage] = useState(true)
-  const [PageNum, setPageNum] = useState(1)
-  const [PageList, setPageList] = useState([])
-
-  useEffect(() => {
-    GetPageList(() => {
-      setIsPullUp(false)
-    })
-  }, [PageNum])
 
-  const GetPageList = (done = () => { }) => { // 获取列表
-    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6, mine: '1' } }).then((res) => {
-      if (PageNum === 1) {
-        setPageList([...res.records])
-      } else {
-        setPageList(PageList.concat([...res.records]))
-      }
-      setHasNextPage(res.current - 0 < res.pages - 0)
-      done()
-    }).catch(() => {
-      done()
-    })
-  }
+  const [PageList, setPageList] = useState([])
 
-  const OnRefresh = () => { // 页面下拉刷新
-    setIsPullDown(true)
-    setHasNextPage(true)
-    setPageNum(1)
-    if (PageNum === 1) {
-      GetPageList(() => {
-        setIsPullDown(false)
-      })
-    } else {
-      setPageNum(1)
-    }
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
+  
 
   return (
     <view className='WoDeHuoDong'>
-      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
+      <ScrollPageRefresh ApiName={`getActivityList`} RequestParams={{ mine: 1 }} Refresh={Refresh} Push={Push}>
         <view className='Content Activity'>
           {
             PageList.map((item, index) => (
@@ -66,7 +30,7 @@ export default function WoDeHuoDong (props) {
             ))
           }
         </view>
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view>
   )
 }

src/pages/WuYe/index.less

@@ -15,6 +15,7 @@
 
       .Content {
         width: 100%;
+        height: 100%;
         position: relative;
         overflow: hidden;
       }

src/utils/toolclass.js

@@ -1,5 +1,5 @@
 const toolclass = {
-  FormatDate: (date = null) => { // 格式化时间
+  FormatDate: (date = null, format = 'YY:MM:DD hh:mm:ss') => { // 格式化时间
     if (date !== null) {
       date = new Date(date)
       let YY = date.getFullYear()
@@ -8,6 +8,12 @@ const toolclass = {
       let hh = date.getHours()
       let mm = date.getMinutes()
       let ss = date.getSeconds()
+      if (format === 'YY:MM:DD') {
+        return `${YY}-${MM > 9 ? MM : `0${MM}`}-${DD > 9 ? DD : `0${DD}`}`
+      }
+      if (format === 'hh:mm:ss') {
+        return `${hh > 9 ? hh : `0${hh}`}:${mm > 9 ? mm : `0${mm}`}:${ss > 9 ? ss : `0${ss}`}`
+      }
       return `${YY}-${MM > 9 ? MM : `0${MM}`}-${DD > 9 ? DD : `0${DD}`} ${hh > 9 ? hh : `0${hh}`}:${mm > 9 ? mm : `0${mm}`}:${ss > 9 ? ss : `0${ss}`}`
     } else {
       return ''