flx

src/components/CompoentsOrder/complete/index.jsx

@@ -2,12 +2,14 @@ import React, { useState, useEffect } from "react";
 import Taro, { useDidShow, AtSwipeAction } from "@tarojs/taro";
 import { getOrderSub, deleteOrder } from "@/services/payOrder";
 import NoData from '@/components/NoData'
+import SpinBox from "@/components/Spin/SpinBox";
+
 import ico_delete from '../../../assets/icons/ProCard/ico_delete.png'
 import AlreadyUsed from "../AlreadyUsed";
 import OrderCard from '../OrderCard'
 import "./style.less";
 import { View } from "@tarojs/components";
-import SlideViewOrder from '@/components/SlideViewOrder';
+
 
 
 const dict = {
@@ -22,6 +24,7 @@ export default (props) => {
   const [IsPull, setPull] = useState(false);
   const [pageNum, setNumber] = useState(1);
   const [HasNextPage, setHasNextPage] = useState(true);
+  const [loading, setLoading] = useState(false)
 
   useDidShow(() => {
     setNumber(1)
@@ -34,12 +37,10 @@ export default (props) => {
 
   }, [pageNum]);
 
-  const pageRefresh = () => {
-    // 页面下拉刷新回调
-    setPull(true);
-  };
+
 
   const getList = () => {
+    setLoading(true)
     setHasNextPage(false);
     getOrderSub({
       pageNum,
@@ -52,7 +53,11 @@ export default (props) => {
       );
       setHasNextPage(res.current < res.pages);
       setPull(false);
-    });
+      setLoading(false)
+
+    }).catch(e => {
+      setLoading(false)
+    })
   };
 
   const pageLoadMore = () => {
@@ -103,10 +108,6 @@ export default (props) => {
       <scroll-view
         scrollY
         style={{ height: '100%' }}
-        refresher-enabled
-        refresher-triggered={IsPull}
-        onrefresherrefresh={pageRefresh}
-        refresher-background='#fff'
         onscrolltolower={pageLoadMore}
       >
         {
@@ -118,27 +119,36 @@ export default (props) => {
                 /* 待支付 */
                 if (item.status === 0) {
                   return (
-                    // <SlideViewOrder del onDelete={() => slideButtonTap(item)}>
-                    <view key={`${type}-${item.orderId}`}  >
-                      <OrderCard item={item} handeDelete={slideButtonTap} />
-                    </view>
-                    // </SlideViewOrder>
+                    <SpinBox loading={loading} className='index-container' >
+
+                      <view key={`${type}-${item.orderId}`}  >
+                        <OrderCard item={item} handeDelete={slideButtonTap} />
+                      </view>
+                    </SpinBox>
                   );
                 }
                 /* 已使用 */
                 else if (item.isVerified == 1) {
                   return (
-                    <view key={`${type}-${item.orderId}`}>
-                      <OrderCard item={item} setShowCutover={setShowCutover} show={show} />
-                    </view>
+                    <SpinBox loading={loading} className='index-container' >
+
+                      <view key={`${type}-${item.orderId}`}>
+                        <OrderCard item={item} setShowCutover={setShowCutover} show={show} />
+                      </view>
+                    </SpinBox>
+
                   );
                 }
                 /* 待核销 */
                 else {
                   return (
-                    <view key={`${type}-${item.orderId}`}>
-                      <OrderCard item={item} />
-                    </view>
+                    <SpinBox loading={loading} className='index-container' >
+
+                      <view key={`${type}-${item.orderId}`}>
+                        <OrderCard item={item} />
+                      </view>
+                    </SpinBox>
+
                   );
                 }
               })}

src/components/Spin/style.less

@@ -1,4 +1,3 @@
-
 @width: 160px;
 
 .spin {
@@ -15,7 +14,8 @@
     position: absolute;
   }
 
-  .mask-left, .mask-right {
+  .mask-left,
+  .mask-right {
     // background: #fff;
     top: 0;
     width: calc(50% + 1px);
@@ -33,7 +33,9 @@
       border-left: 0;
       // transform: rotate(180deg);
       transform-origin: center left;
-      animation: spin-rotate-right 1.2s cubic-bezier(.25,.5,.25,1) 0.6s infinite, spin-color 2s linear infinite;
+      animation: spin-rotate-right 1.2s cubic-bezier(0.25, 0.5, 0.25, 1) 0.6s
+          infinite,
+        spin-color 2s linear infinite;
     }
   }
 
@@ -46,7 +48,9 @@
       border-bottom-left-radius: @width;
       border-right: 0;
       transform-origin: center right;
-      animation: spin-rotate-right 1.2s cubic-bezier(1,.25,.5,.25) infinite, spin-color 2s linear infinite;
+      animation: spin-rotate-right 1.2s cubic-bezier(1, 0.25, 0.5, 0.25)
+          infinite,
+        spin-color 2s linear infinite;
     }
   }
 
@@ -98,7 +102,8 @@
 }
 
 @keyframes spin-color {
-  0%, 100% {
+  0%,
+  100% {
     border-color: #d62d20;
   }
   40% {
@@ -107,7 +112,8 @@
   60% {
     border-color: #008744;
   }
-  80%, 90% {
+  80%,
+  90% {
     border-color: #ffa700;
   }
 }
@@ -120,7 +126,7 @@
   left: 0;
   z-index: 100;
   text-align: center;
-  background: rgba(255, 255, 255, .75);
+  background: rgba(255, 255, 255, 0.75);
 
   .spin2 {
     display: inline-block;
@@ -131,21 +137,33 @@
   }
 }
 
-
 .loading-wrapper {
   position: relative;
 
   .loading-box {
+    // position: absolute;
+    // z-index: 10;
+    // top: 0;
+    // left: 0;
+    // width: 100%;
+    // height: 100%;
+    // min-height: 72px;
+    // padding-top: 60%;
+    // padding-left: 50%;
+    // background: rgba(255, 255, 255, .95);
+    // box-sizing: border-box;
+
     position: absolute;
     z-index: 10;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 72px;
-    padding-top: 60%;
+    display: flex;
+    padding-top: 35%;
     padding-left: 50%;
-    background: rgba(255, 255, 255, .95);
+    background: rgba(255, 255, 255, 0.95);
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
   }
-}
+}

src/components/toggleRole/ToggleRole.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import SpinBox from "@/components/Spin/SpinBox";
 
 import touristON from '@/assets/icons/UserCenter/touristON.png'
 import touristOFF from '@/assets/icons/UserCenter/touristOFF.png'
@@ -14,7 +15,9 @@ import { useModel } from '@/store'
 
 export default (props) => {
   const { showCutover, onClose, maskClosable, role } = props
-  const { getRole } = useModel('person')
+  const { getRole, loading } = useModel('person')
+  // const [loading, setLoading] = useState(false)
+
   const goToPerson = () => {
     getRole('normal')
   }
@@ -26,22 +29,29 @@ export default (props) => {
     getRole('shop')
   }
   return (
+
     <Popup show={showCutover} maskClosable={maskClosable} onClose={onClose}>
-      <view className='User-box-sths' >
-        <view className='User-box-selectUser'>请选择身份：</view>
-        <view className='User-box-tourist' onClick={goToPerson}>
-          <image className='Ubs-tourist-image' src={role === 'normal' ? touristON : touristOFF} />
-          <text className='Ubs-tourist-text'>我是用户</text>
-        </view>
-        <view className='User-box-hotelBoss' onClick={goToHotel}>
-          <image className='Ubs-hotelBoss-image' src={role === 'hotel' ? hotelBossON : hotelBossOFF} />
-          <text className='Ubs-hotelBoss-text'>我是房东</text>
-        </view>
-        <view className='User-box-shopBoss' onClick={goToShop}>
-          <image className='Ubs-shopBoss-image' src={role === 'shop' ? shopBossON : shopBossOFF} />
-          <text className='Ubs-shopBoss-text'>我是商铺</text>
+      <SpinBox loading={loading} className='index-container' >
+        <view className='User-box-sths' >
+          <view className='User-box-selectUser'>请选择身份：</view>
+          <view className='User-box-tourist' onClick={goToPerson}>
+            <image className='Ubs-tourist-image' src={role === 'normal' ? touristON : touristOFF} />
+            <text className='Ubs-tourist-text'>我是用户</text>
+          </view>
+          <view className='User-box-hotelBoss' onClick={goToHotel}>
+            <image className='Ubs-hotelBoss-image' src={role === 'hotel' ? hotelBossON : hotelBossOFF} />
+            <text className='Ubs-hotelBoss-text'>我是房东</text>
+          </view>
+          <view className='User-box-shopBoss' onClick={goToShop}>
+            <image className='Ubs-shopBoss-image' src={role === 'shop' ? shopBossON : shopBossOFF} />
+            <text className='Ubs-shopBoss-text'>我是商铺</text>
+          </view>
         </view>
-      </view>
-    </Popup>
+      </SpinBox>
+
+
+    </Popup >
+
+
   )
 }

src/pages/MineUserAll/AllOrder/index.jsx

@@ -7,13 +7,9 @@ import Complete from '@/components/CompoentsOrder/complete'
 import './style.less'
 
 
-
 export default withLayout((props) => {
   const [activeTab, setActiveTab] = useState(0)
-  const [swiperHeight, setSwiperHeight] = useState(0)
   const { router, person } = props
-
-
   const { params } = useRouter()
   const { tabJump } = params || {}
 

src/pages/MineUserAll/ContactMe/index.jsx

@@ -1,6 +1,8 @@
 import { saveFeedback } from '@/services/mine'
+import { useState } from 'react';
 import CustomNav from '@/components/CustomNav'
 import Taro from '@tarojs/taro'
+import SpinBox from "@/components/Spin/SpinBox";
 import { Image, Button } from '@tarojs/components'
 import withLayout from '@/layouts'
 import './style.less'
@@ -9,16 +11,28 @@ import './style.less'
 export default withLayout((props) => {
   const { person } = props
   const { personId } = person
+  const [loading, setLoading] = useState(false)
   const back = () => {
     Taro.navigateBack()
   }
   const submit = () => {
     var content = document.getElementById('content').value
     if (content != '') {
+      setLoading(true)
       saveFeedback({
         personId,
         content
       }).then(() => {
+
+        Taro.navigateBack({
+          delta: 1
+        })
+        Taro.showToast({
+          title: '反馈成功',
+          icon: 'success',
+          duration: 2000
+        })
+        setLoading(false)
       })
     }
     else {
@@ -41,11 +55,16 @@ export default withLayout((props) => {
         <view className='weChate-image' >
           <Image mode='aspectFit' src='https://yz-shigongli.oss-cn-shanghai.aliyuncs.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210918145337.png' />
         </view>
+
         <view className='button-info'>
-          <Button className='button-box' onClick={submit}>提交</Button>
+
+          <Button className='button-box' onClick={submit} loading={loading}  >提交</Button>
+
           <Button className='button-box-Cancel' onClick={back} >取消</Button>
+
         </view>
+
       </view>
-    </view>
+    </view >
   )
 })

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

@@ -1,6 +1,8 @@
 import Taro from "@tarojs/taro";
 import { Button, Textarea, View } from "@tarojs/components";
 import formatPrice from "@/utils/formatPrice";
+import SpinBox from "@/components/Spin/SpinBox";
+
 import { useState, useEffect } from "react";
 import OrderCard from '@/components/CompoentsOrder/OrderCard'
 import withLayout from "@/layouts";
@@ -39,6 +41,7 @@ const options = [
 export default withLayout((props) => {
   const { router, person } = props;
   const { id } = props.router.params;
+  const [loading, setLoading] = useState(false)
 
   // 说明
   const [explain, setExplain] = useState();
@@ -50,15 +53,19 @@ export default withLayout((props) => {
   const [checkeds, setCheckeds] = useState([1]);
 
   const getData = (orderId) => {
-    Taro.showLoading();
+    setLoading(true)
+
     getOrderSub({
       pageNum: 1,
       pageSize: 50,
       orderId: orderId,
     }).then((res) => {
       setList(res.records);
-      Taro.hideLoading();
-    });
+      setLoading(false)
+
+    }).catch(e => {
+      setLoading(false)
+    })
   };
 
   useEffect(() => {
@@ -115,100 +122,104 @@ export default withLayout((props) => {
       <View className='index-container'>
         <View className='box-content'>
           <scroll-view scroll-y style='height: 100%;' >
-            <view className='Refund-Content-box'>
-              <view className='title-image'>
-                <image
-                  mode='scaleToFill'
-                  className='title-image-cup'
-                  src={BlackSpot}
-                />
-                <text className='title-title-boss'>商品信息</text>
+            <SpinBox loading={loading} className='index-container' >
+
+              <view className='Refund-Content-box'>
+                <view className='title-image'>
+                  <image
+                    mode='scaleToFill'
+                    className='title-image-cup'
+                    src={BlackSpot}
+                  />
+                  <text className='title-title-boss'>商品信息</text>
+                </view>
               </view>
-            </view>
-            {/* 商品信息结束 */}
-            <view>
-              {(list || []).map((item) => {
-                return (
-                  <OrderCard item={item} key={item.orderId} kkp='1' />
-                );
-              })}
-            </view>
-            {/* 卡片结束 */}
-            <view className='Refund-Content-box'>
-              <view className='title-image'>
-                <image
-                  mode='scaleToFill'
-                  className='title-image-cup'
-                  src={BlackSpot}
-                />
-                <text className='title-title-boss'>退款原因</text>
+              {/* 商品信息结束 */}
+              <view>
+                {(list || []).map((item) => {
+                  return (
+                    <OrderCard item={item} key={item.orderId} kkp='1' />
+                  );
+                })}
+              </view>
+              {/* 卡片结束 */}
+              <view className='Refund-Content-box'>
+                <view className='title-image'>
+                  <image
+                    mode='scaleToFill'
+                    className='title-image-cup'
+                    src={BlackSpot}
+                  />
+                  <text className='title-title-boss'>退款原因</text>
+                </view>
+                {/* 退款结束 */}
               </view>
-              {/* 退款结束 */}
-            </view>
-            <view className='Refund-content'>
-              {options.map((x) => {
-                return (
-                  <text
-                    className={`Refund-star-view1 ${checkeds.indexOf(x.key) > -1
-                      ? "bg2"
-                      : `Refund-star-view2`
-                      }`}
-                    key={x.key}
-                    onClick={() => viewOK(x)}
-                  >
-                    {x.title}
-                  </text>
-                );
-              })}
-            </view>
-            <view className='Refund-Content-box'>
-              <view className='title-image'>
-                <image
-                  mode='scaleToFill'
-                  className='title-image-cup'
-                  src={BlackSpot}
+              <view className='Refund-content'>
+                {options.map((x) => {
+                  return (
+                    <text
+                      className={`Refund-star-view1 ${checkeds.indexOf(x.key) > -1
+                        ? "bg2"
+                        : `Refund-star-view2`
+                        }`}
+                      key={x.key}
+                      onClick={() => viewOK(x)}
+                    >
+                      {x.title}
+                    </text>
+                  );
+                })}
+              </view>
+              <view className='Refund-Content-box'>
+                <view className='title-image'>
+                  <image
+                    mode='scaleToFill'
+                    className='title-image-cup'
+                    src={BlackSpot}
+                  />
+                  <text className='title-title-boss'>退款说明</text>
+                </view>
+              </view>
+              <view class='section'>
+                <Textarea
+                  placeholder='请补充退款说明（选填）!'
+                  onInput={(e) => setExplain(e.detail.value)}
+                  confirm-type='done'
                 />
-                <text className='title-title-boss'>退款说明</text>
               </view>
-            </view>
-            <view class='section'>
-              <Textarea
-                placeholder='请补充退款说明（选填）!'
-                onInput={(e) => setExplain(e.detail.value)}
-                confirm-type='done'
-              />
-            </view>
-            <view className='money-title'>
-              实付金额:{" "}
-              <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
-            </view>
-            <view className='money-title'>
-              已获返现:{" "}
-              <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
-            </view>
-            <view className='money-title'>
-              退款金额:{" "}
-              <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
-            </view>
-            <view className='ul-li-text'>
-              <view className='ul-li-view'></view>
-              <text className='ul-li-textname'>退款金额不可修改</text>
-            </view>
-            <view className='ul-li-text'>
-              <view className='ul-li-view'></view>
-              <text className='ul-li-textname'>
-                下单获得返现金额，会在退款时被扣除；
-              </text>
-            </view>
-            <view className='ul-li-text'>
-              <view className='ul-li-view'></view>
-              <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
-            </view>
-            <view className='button-info' >
-              <Button className='button-box' onClick={() => onRefund()}>
-                提交申请
-              </Button>
-            </view>
+              <view className='money-title'>
+                实付金额:{" "}
+                <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
+              </view>
+              <view className='money-title'>
+                已获返现:{" "}
+                <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
+              </view>
+              <view className='money-title'>
+                退款金额:{" "}
+                <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
+              </view>
+              <view className='ul-li-text'>
+                <view className='ul-li-view'></view>
+                <text className='ul-li-textname'>退款金额不可修改</text>
+              </view>
+              <view className='ul-li-text'>
+                <view className='ul-li-view'></view>
+                <text className='ul-li-textname'>
+                  下单获得返现金额，会在退款时被扣除；
+                </text>
+              </view>
+              <view className='ul-li-text'>
+                <view className='ul-li-view'></view>
+                <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
+              </view>
+              <view className='button-info' >
+                <Button className='button-box' onClick={() => onRefund()}>
+                  提交申请
+                </Button>
+              </view>
+            </SpinBox>
+
           </scroll-view>
         </View>
       </View>

src/pages/MineUserAll/RefundMoney/index.jsx

@@ -1,5 +1,7 @@
 import { useState, useEffect } from "react";
 import Taro, { useDidShow } from "@tarojs/taro";
+import SpinBox from "@/components/Spin/SpinBox";
+
 import withLayout from "@/layouts";
 import OrderCard from '@/components/CompoentsOrder/OrderCard'
 import { getOrderSub } from "@/services/payOrder";
@@ -13,12 +15,11 @@ export default withLayout((props) => {
   const [IsPull, setPull] = useState(false);
   const [pageNum, setNumber] = useState(1);
   const [HasNextPage, setHasNextPage] = useState(true);
-  const [isFirst, setFirst] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   const getList = () => {
-    setFirst(false)
+    setLoading(true)
     setHasNextPage(false);
-    Taro.showLoading()
     getOrderSub({
       pageNum,
       pageSize: 10,
@@ -30,15 +31,13 @@ export default withLayout((props) => {
       );
       setHasNextPage(res.current < res.pages);
       setPull(false);
-      Taro.hideLoading();
-
-    });
+      setLoading(false)
+    }).catch(e => {
+      setLoading(false)
+    })
   };
 
-  const pageRefresh = () => {
-    // 页面下拉刷新回调
-    setPull(true);
-  };
+
 
   const pageLoadMore = () => {
     // 页面上拉加载更多
@@ -47,28 +46,14 @@ export default withLayout((props) => {
     }
   };
 
-  useDidShow(() => {
-    if (!isFirst) {
-      getList();
-    }
 
-  })
 
-  useEffect(() => {
-    // 下拉刷新触发
-    if (IsPull) {
-      if (pageNum === 1) {
-        getList();
-      } else {
-        setNumber(1);
-      }
-    }
-  }, [IsPull]);
+
 
   useEffect(() => {
     getList();
   }, [pageNum]);
-    
+
   return (
     <view className='box-content'>
       <view className='index-navbar'>
@@ -77,20 +62,20 @@ export default withLayout((props) => {
       <scroll-view
         scrollY
         style='height: calc(100vh - 176rpx);'
-        refresher-enabled
-        refresher-triggered={IsPull}
-        onrefresherrefresh={pageRefresh}
-        refresher-background='#fff'
         onscrolltolower={pageLoadMore}
       >
-        <view className='View-box-Card'>
-          {(list || []).map((item) => {
-            return (
-              <OrderCard item={item}  key={item.orderId} sh='1' />              
-            )            
-          })}
-          <view className='foot'>这是我的底线</view>
-        </view>
+        <SpinBox loading={loading} className='index-container' >
+
+          <view className='View-box-Card'>
+            {(list || []).map((item) => {
+              return (
+                <OrderCard item={item} key={item.orderId} sh='1' />
+              )
+            })}
+            <view className='foot'>这是我的底线</view>
+          </view>
+        </SpinBox>
+
       </scroll-view>
     </view>
   );

src/store/models/person.js

@@ -1,16 +1,17 @@
 import { useState } from "react"
 import Taro from '@tarojs/taro'
-import { signIn, authPhone, authAvatar,toggleRole } from '@/services/person'
+import { signIn, authPhone, authAvatar, toggleRole } from '@/services/person'
 
 export default () => {
   const [person, setPerson] = useState()
   const [qrCode, setQrCode] = useState()
   const [peronRoles, setPersonRoles] = useState([])
   const [sessionKey, setSessionKey] = useState()
+  const [loading, setLoading] = useState(false)
 
   const login = (params) => {
     signIn(params).then((res) => {
-      const { person: taPerson, personRoleList, sessionKey : skey, qrcode, token } = res;
+      const { person: taPerson, personRoleList, sessionKey: skey, qrcode, token } = res;
       setPerson(taPerson);
       setPersonRoles(personRoleList);
       setQrCode(qrcode);
@@ -34,8 +35,15 @@ export default () => {
   }
 
   const getRole = (data) => {
+    setLoading(true)
+
     return toggleRole(data).then((res) => {
+      setLoading(false)
+
       setPerson(res);
+    }).catch(e => {
+      setLoading(false)
+
     })
   }
 
@@ -44,6 +52,7 @@ export default () => {
     peronRoles,
     qrCode,
     sessionKey,
+    loading,
     setPerson,
     login,
     getPhone,