静态页面

src/components/WuYeJiaoFei/index.jsx

@@ -28,7 +28,7 @@ const pay = idArray => {
       const outTradeNo = res.outTradeNo
       // 下单
       request({ ...apis.wxUnifiedOrder, args: { outTradeNo }, params: { type: 'bill' } }).then(res => {
-        wx.requestPayment({
+        Taro.requestPayment({
           timeStamp: res.timeStamp,
           nonceStr: res.nonceStr,
           package: res.package,

src/components/WuYeJiaoFeiItem/index.jsx

@@ -37,7 +37,7 @@ export default function WuYeJiaoFeiItem (props) {
     //     </view>
     //   </view>
     // </view>
-    <view className='WuYeJiaoFeiItem flex-h'>
+    <view className='WuYeJiaoFeiItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/JiaoFeiDetail/index?id=${Data.id}` }) }}>
       <view className='flex-item'>
         <text>{Data.billName}</text>
         <text>{toolclass.FormatDate(Data.createDate)}</text>

src/pages/ShouYe/index.css

@@ -84,7 +84,7 @@
   font-size: 30px;
   color: #fff;
   text-indent: 30px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 .ShouYe > view.flex-item > .PageContainer .Content > view > .BannerContainer {
   padding: 0 30px;

src/pages/ShouYe/index.less

@@ -95,7 +95,7 @@
               font-size: 30px;
               color: #fff;
               text-indent: 30px;
-              margin-bottom: 20px;
+              margin-bottom: 10px;
             }
 
             >.BannerContainer {

src/pages/WuYe/JiaoFeiDetail/index.css

@@ -0,0 +1,231 @@
+.JiaoFeiDetail {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}
+.JiaoFeiDetail .DetailContainer {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+.JiaoFeiDetail .DetailContainer > .Info {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .flex-h {
+  align-items: center;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .flex-h > text {
+  font-size: 24px;
+  color: #F35844;
+  line-height: 40px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .flex-h > text:first-child {
+  font-size: 30px;
+  font-weight: bold;
+  color: #333;
+  margin-right: 20px;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail {
+  position: relative;
+  overflow: hidden;
+  padding: 20px;
+  background: rgba(243, 88, 68, 0.08);
+  margin-top: 50px;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Title {
+  align-items: center;
+  padding-bottom: 10px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Title > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 80px;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Title > text.flex-item {
+  font-size: 30px;
+  font-weight: bold;
+  color: #333;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Title > text.Num {
+  font-size: 48px;
+  font-weight: bold;
+  color: #F35844;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > text {
+  display: block;
+  width: 100%;
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+  padding: 30px 0;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Line {
+  align-items: center;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Line > text {
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+}
+.JiaoFeiDetail .DetailContainer > .Info > .Detail > .Line > text:first-child {
+  min-width: 160px;
+  margin-right: 20px;
+}
+.JiaoFeiDetail .DetailContainer > .Detail {
+  position: relative;
+  overflow: hidden;
+  margin-top: 20px;
+  padding: 0 30px;
+  background: #fff;
+  margin-bottom: 20px;
+}
+.JiaoFeiDetail .DetailContainer > .Detail > view {
+  align-items: flex-start;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+  padding: 20px 0;
+}
+.JiaoFeiDetail .DetailContainer > .Detail > view:first-child {
+  border-top: none;
+}
+.JiaoFeiDetail .DetailContainer > .Detail > view > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 40px;
+}
+.JiaoFeiDetail .DetailContainer > .Detail > view > text:last-child {
+  text-align: right;
+  color: #999;
+  margin-left: 20px;
+}
+.JiaoFeiDetail .DetailContainer > .InfoBottom {
+  width: 100%;
+  height: 228px;
+}
+.JiaoFeiDetail > .BottomContainer {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  margin-top: -228px;
+  text-align: center;
+  font-size: 0;
+}
+.JiaoFeiDetail > .BottomContainer text:first-child {
+  font-size: 24px;
+  color: #77A5F0;
+  display: inline-block;
+  line-height: 40px;
+}
+.JiaoFeiDetail > .BottomContainer text:nth-child(2) {
+  font-size: 34px;
+  color: #fff;
+  background: #F35844;
+  line-height: 98px;
+  border-radius: 98px;
+  width: 100%;
+  display: block;
+  text-align: center;
+  margin-top: 50px;
+  margin-bottom: 40px;
+}
+.JiaoFeiDetail .JiaoFeiPopup {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .Price {
+  font-size: 34px;
+  color: #333;
+  line-height: 60px;
+  text-align: center;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+  padding-bottom: 60px;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .Price > text {
+  font-size: 48px;
+  font-weight: bold;
+  color: #F35844;
+  line-height: 60px;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .flex-h {
+  align-items: center;
+  padding: 20px 0;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .flex-h > text {
+  font-size: 30px;
+  color: #333;
+  line-height: 60px;
+  margin-left: 20px;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .flex-h > text:first-child {
+  margin-left: 0;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .flex-h > text.iconfont {
+  font-size: 54px;
+  color: #00c005;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .flex-h > text.iconfont.icongou {
+  color: #F35844;
+  font-size: 42px;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .Btn {
+  position: relative;
+  overflow: hidden;
+  margin-top: 40px;
+}
+.JiaoFeiDetail .JiaoFeiPopup > .Btn > text {
+  font-size: 34px;
+  color: #fff;
+  line-height: 98px;
+  display: block;
+  width: 100%;
+  text-align: center;
+  background: #F35844;
+  border-radius: 98px;
+}
+.JiaoFeiDetail .LianXiPopup {
+  padding: 0 30px;
+  position: relative;
+  overflow: visible;
+  padding-bottom: 40px;
+}
+.JiaoFeiDetail .LianXiPopup > text {
+  width: 100%;
+  display: block;
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+  text-align: center;
+  margin-bottom: 30px;
+}
+.JiaoFeiDetail .LianXiPopup > text:first-child {
+  font-size: 34px;
+  color: #333;
+  margin-bottom: 10px;
+  margin-top: -30px;
+}
+.JiaoFeiDetail .LianXiPopup > .flex-h {
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.JiaoFeiDetail .LianXiPopup > .flex-h > text {
+  font-size: 30px;
+  line-height: 100px;
+  color: #77A5F0;
+}
+.JiaoFeiDetail .LianXiPopup > .flex-h > text:first-child {
+  color: #333;
+}
+.JiaoFeiDetail .LianXiPopup > .flex-h > text:last-child {
+  font-size: 40px;
+  margin-left: 10px;
+}

src/pages/WuYe/JiaoFeiDetail/index.jsx

@@ -4,16 +4,18 @@ import request, { apis } from '@/utils/request'
 import SlidePopup from '@/components/SlidePopup/index'
 import Page from '@/layouts'
 import { useModel } from '@/store'
+import toolclass from '@/utils/toolclass.js'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function JiaoFeiDetail () {
   const { user } = useModel('user')
-  const [bill, setBill] = useState([])
+  const [bill, setBill] = useState(null)
   const [ShowPopup, setShowPopup] = useState(false)
 
   const [PopupType, setPopupType] = useState(0)
+  const [PhoneList, setPhoneList] = useState([])
 
   const { id } = Current.router.params
   const paying = useRef(false)
@@ -26,7 +28,7 @@ export default function JiaoFeiDetail () {
 
   const cancelOrder = () => {
     if (order.current && order.current.outTradeNo) {
-      request({...apis.wxCancelPay, args: { outTradeNo: order.current.outTradeNo }, params: { type: 'bill' }}).then(res => {
+      request({ ...apis.wxCancelPay, args: { outTradeNo: order.current.outTradeNo }, params: { type: 'bill' } }).then(res => {
         order.current = undefined
       }).catch(er => {
         Taro.showToast({
@@ -50,14 +52,14 @@ export default function JiaoFeiDetail () {
     }
 
     paying.current = true
-    
+
     // 准备下单
-    request({...apis.wxStartPay, data: { type: 'bill', idArray: [id].map(x => x-0) }}).then(res => {
+    request({ ...apis.wxStartPay, data: { type: 'bill', idArray: [id].map(x => x - 0) } }).then(res => {
       order.current = res
       const outTradeNo = res.outTradeNo
       // 下单
-      request({...apis.wxUnifiedOrder, args: { outTradeNo }, params: { type: 'bill'}} ).then(res => {
-        wx.requestPayment({
+      request({ ...apis.wxUnifiedOrder, args: { outTradeNo }, params: { type: 'bill' } }).then(res => {
+        Taro.requestPayment({
           timeStamp: `${res.timeStamp}`,
           nonceStr: res.nonceStr,
           package: res.package,
@@ -101,54 +103,96 @@ export default function JiaoFeiDetail () {
       })
     })
   }
-  
+
+  const Init = () => {
+    request({ ...apis.getWuYePhone }).then((res) => { // 获取物业电话
+      setPhoneList(res || [])
+    })
+  }
+
   useEffect(() => {
     if (user && id) {
-      request({ ...apis.getBillInvoiced, args: { orgId: 1, id }}).then(res => {
+      request({ ...apis.getBillInvoiced, args: { orgId: 1, id } }).then(res => {
         if (res) {
           setBill(res)
         }
       })
+      Init()
     }
   }, [user, id])
 
   return (
     <Page>
       <view className='JiaoFeiDetail'>
-        <view className='DetailContainer'>
-          <view className='Info'>
-            <view className='flex-h'>
-              <text className='flex-item'>物业费</text>
-              <text>2020/06/08  0:00截止</text>
+        {
+          bill !== null &&
+          <view className='DetailContainer'>
+            <view className='Info'>
+              <view className='flex-h'>
+                <text className='flex-item'>{bill.billName}</text>
+                <text>{toolclass.FormatDate(bill.endDate)}截止</text>
+              </view>
+              <view className='Detail'>
+                <view className='Title flex-h'>
+                  <text className='flex-item'>缴费金额</text>
+                  <text className='Num'>{bill.payPrice}</text>
+                  <text>元</text>
+                </view>
+                <text>{bill.billExplain}</text>
+                {/* <view className='Line flex-h'>
+                  <text>垃圾费：</text>
+                  <text className='flex-item'>100元</text>
+                </view>
+                <view className='Line flex-h'>
+                  <text>绿地维护费：</text>
+                  <text className='flex-item'>100元</text>
+                </view>
+                <view className='Line flex-h'>
+                  <text>公摊电费：</text>
+                  <text className='flex-item'>100元</text>
+                </view> */}
+              </view>
             </view>
             <view className='Detail'>
-              <view className='Title flex-h'>
-                <text className='flex-item'>缴费金额</text>
-                <text className='Num'>{bill.payPrice}</text>
-                <text>元</text>
+              <view className='flex-h'>
+                <text>订单编号</text>
+                <text className='flex-item'>{bill.id}</text>
+              </view>
+              <view className='flex-h'>
+                <text>缴费人</text>
+                <text className='flex-item'>{null}</text>
+              </view>
+              <view className='flex-h'>
+                <text>下单时间</text>
+                <text className='flex-item'>{toolclass.FormatDate(bill.createTime)}</text>
+              </view>
+              <view className='flex-h'>
+                <text>缴费时间</text>
+                <text className='flex-item'>{null}</text>
               </view>
-              <text>2020年5月物业管理费</text>
-              <view className='Line flex-h'>
-                <text>垃圾费：</text>
-                <text className='flex-item'>100元</text>
+              <view className='flex-h'>
+                <text>缴费方式</text>
+                <text className='flex-item'>微信支付</text>
               </view>
-              <view className='Line flex-h'>
-                <text>绿地维护费：</text>
-                <text className='flex-item'>100元</text>
+              <view className='flex-h'>
+                <text>交易流水</text>
+                <text className='flex-item'>{null}</text>
               </view>
-              <view className='Line flex-h'>
-                <text>公摊电费：</text>
-                <text className='flex-item'>100元</text>
+              <view className='flex-h'>
+                <text>缴费备注</text>
+                <text className='flex-item'>网上缴费</text>
               </view>
             </view>
+            <view className='InfoBottom'></view>
           </view>
-          <view className='InfoBottom'></view>
-        </view>
+        }
         <view className='BottomContainer'>
           <text onClick={() => { setPopupType(2); setShowPopup(true) }}>对费用有疑问？</text>
-          <text onClick={handleReadyPay}>立即缴费</text>
+          {
+            bill !== null && bill.billStatus - 0 !== 1 &&
+            <text onClick={handleReadyPay}>立即缴费</text>
+          }
         </view>
-
         {/* 弹窗 */}
         <SlidePopup Close={handleCancelOrder} Show={ShowPopup}>
           {
@@ -170,21 +214,15 @@ export default function JiaoFeiDetail () {
             <view className='LianXiPopup'>
               <text>联系物业</text>
               <text>对此费用有疑问</text>
-              <view className='flex-h'>
-                <text className='flex-item'>物业电话</text>
-                <text>17826982167</text>
-                <text className='iconfont icondianhua'></text>
-              </view>
-              <view className='flex-h'>
-                <text className='flex-item'>门卫电话</text>
-                <text>17826982167</text>
-                <text className='iconfont icondianhua'></text>
-              </view>
-              <view className='flex-h'>
-                <text className='flex-item'>物业领导</text>
-                <text>17826982167</text>
-                <text className='iconfont icondianhua'></text>
-              </view>
+              {
+                PhoneList.map((item, index) => (
+                  <view className='flex-h' key={`PhoneList-${index}`} onClick={() => { Taro.makePhoneCall({ phoneNumber: item.tel }) }}>
+                    <text className='flex-item'>{item.name}</text>
+                    <text>{item.tel}</text>
+                    <text className='iconfont icondianhua'></text>
+                  </view>
+                ))
+              }
             </view>
           }
         </SlidePopup>

src/pages/WuYe/JiaoFeiDetail/index.less

@@ -4,7 +4,7 @@
   position: relative;
   background: #f8f8f8;
 
-  >.DetailContainer {
+  .DetailContainer {
     width: 100%;
     min-height: 100vh;
     position: relative;
@@ -94,6 +94,37 @@
       }
     }
 
+    >.Detail {
+      position: relative;
+      overflow: hidden;
+      margin-top: 20px;
+      padding: 0 30px;
+      background: #fff;
+      margin-bottom: 20px;
+
+      >view {
+        align-items: flex-start;
+        border-top: 2px solid rgba(0, 0, 0, 0.08);
+        padding: 20px 0;
+
+        &:first-child {
+          border-top: none;
+        }
+
+        >text {
+          font-size: 28px;
+          color: #333;
+          line-height: 40px;
+
+          &:last-child {
+            text-align: right;
+            color: #999;
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+
     >.InfoBottom {
       width: 100%;
       height: 228px;
@@ -109,7 +140,7 @@
     text-align: center;
     font-size: 0;
 
-    >text {
+    text {
       &:first-child {
         font-size: 24px;
         color: #77A5F0;
@@ -228,9 +259,11 @@
         font-size: 30px;
         line-height: 100px;
         color: #77A5F0;
+
         &:first-child {
           color: #333;
         }
+
         &:last-child {
           font-size: 40px;
           margin-left: 10px;