.

src/components/Spin/index.jsx

@@ -0,0 +1,34 @@
+import { View } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  const { size = '160rpx', background = 'transparent' } = props
+  const wrapperStyle = {
+    width: size,
+    height: size,
+    background,
+  }
+
+  const leftBarStyle = {
+    'border-top-right-radius': size,
+    'border-bottom-right-radius': size,
+  }
+
+  const rightBarStyle = {
+    'border-top-left-radius': size,
+    'border-bottom-left-radius': size,
+  }
+
+  return (
+    <View className='spinbox'>
+      <view className='spin' style={wrapperStyle}>
+        <view className='mask-left'>
+          <view className='spin-bar' style={leftBarStyle}></view>
+        </view>
+        <view className='mask-right'>
+          <view className='spin-bar' style={rightBarStyle}></view>
+        </view>
+      </view>
+    </View>
+  )
+}

src/components/Spin/style.less

@@ -0,0 +1,123 @@
+@width: 160px;
+
+.spinbox{
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  padding-top: 30vh;
+  display: flex;
+  .spin {
+    width: @width;
+    height: @width;
+    border-radius: 100%;
+    display: inline-block;
+    position: relative;
+    animation: spin-rotate 4s linear infinite;
+    box-sizing: border-box;
+
+    view {
+      box-sizing: border-box;
+      position: absolute;
+    }
+
+    .mask-left,
+    .mask-right {
+      top: 0;
+      width: calc(50% + 1px);
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .mask-left {
+      left: 0;
+
+      .spin-bar {
+        left: 100%;
+        border-top-right-radius: @width;
+        border-bottom-right-radius: @width;
+        border-left: 0;
+        transform-origin: center left;
+        animation: spin-rotate-right 1.2s cubic-bezier(0.25, 0.5, 0.25, 1) 0.6s
+          infinite,
+          spin-color 2s linear infinite;
+      }
+    }
+
+    .mask-right {
+      right: 0;
+
+      .spin-bar {
+        left: -100%;
+        border-top-left-radius: @width;
+        border-bottom-left-radius: @width;
+        border-right: 0;
+        transform-origin: center right;
+        animation: spin-rotate-right 1.2s cubic-bezier(1, 0.25, 0.5, 0.25)
+          infinite,
+          spin-color 2s linear infinite;
+      }
+    }
+
+    .spin-bar {
+      float: left;
+      width: 100%;
+      height: 100%;
+      border-width: 4px;
+      border-style: solid;
+    }
+  }
+}
+@keyframes spin-rotate-right {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-rotate-left {
+  0% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(540deg);
+  }
+}
+
+@keyframes spin-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-color {
+  0%,
+  100% {
+    border-color: #d62d20;
+  }
+  40% {
+    border-color: #0057e7;
+  }
+  60% {
+    border-color: #008744;
+  }
+  80%,
+  90% {
+    border-color: #ffa700;
+  }
+}

src/layouts/index.jsx

@@ -3,8 +3,8 @@ import Taro from '@tarojs/taro'
 import { useEffect , useMemo } from 'react'
 import useRouter from '@/utils/hooks/useRouter'
 import useLogin from '@/utils/hooks/useLogin'
+import Spin from "@/components/Spin";
 import { useModel } from '@/store'
-import { View } from '@tarojs/components'
 
 
 export default (Child) => (props) => {
@@ -26,5 +26,5 @@ export default (Child) => (props) => {
   // 确保执行过 login 方法，拿到了 person
   const isLoged = useMemo(() => !!person?.personId, [person?.personId])
 
-  return isLoged ? <Child {...props} router={router} location={location} /> : <View>loading...</View>
+  return isLoged ? <Child {...props} router={router} location={location} /> : <Spin />
 }

src/pages/index/components/order/index.jsx

@@ -6,6 +6,8 @@ import searchImg from '@/assets/comm/search.png'
 import orderImg from '@/assets/comm/orderList.png'
 import Footer from "@/components/Footer";
 import MyCard from "@/components/MyCard";
+
+
 import { getBannerList } from "@/services/banner";
 import './style.less'