李志伟 vor 3 Jahren
Ursprung
Commit
3b1cf84623

+ 34
- 0
src/components/Spin/index.jsx Datei anzeigen

@@ -0,0 +1,34 @@
1
+import { View } from '@tarojs/components'
2
+import './style.less'
3
+
4
+export default (props) => {
5
+  const { size = '160rpx', background = 'transparent' } = props
6
+  const wrapperStyle = {
7
+    width: size,
8
+    height: size,
9
+    background,
10
+  }
11
+
12
+  const leftBarStyle = {
13
+    'border-top-right-radius': size,
14
+    'border-bottom-right-radius': size,
15
+  }
16
+
17
+  const rightBarStyle = {
18
+    'border-top-left-radius': size,
19
+    'border-bottom-left-radius': size,
20
+  }
21
+
22
+  return (
23
+    <View className='spinbox'>
24
+      <view className='spin' style={wrapperStyle}>
25
+        <view className='mask-left'>
26
+          <view className='spin-bar' style={leftBarStyle}></view>
27
+        </view>
28
+        <view className='mask-right'>
29
+          <view className='spin-bar' style={rightBarStyle}></view>
30
+        </view>
31
+      </view>
32
+    </View>
33
+  )
34
+}

+ 123
- 0
src/components/Spin/style.less Datei anzeigen

@@ -0,0 +1,123 @@
1
+@width: 160px;
2
+
3
+.spinbox{
4
+  width: 100vw;
5
+  height: 100vh;
6
+  justify-content: center;
7
+  padding-top: 30vh;
8
+  display: flex;
9
+  .spin {
10
+    width: @width;
11
+    height: @width;
12
+    border-radius: 100%;
13
+    display: inline-block;
14
+    position: relative;
15
+    animation: spin-rotate 4s linear infinite;
16
+    box-sizing: border-box;
17
+
18
+    view {
19
+      box-sizing: border-box;
20
+      position: absolute;
21
+    }
22
+
23
+    .mask-left,
24
+    .mask-right {
25
+      top: 0;
26
+      width: calc(50% + 1px);
27
+      height: 100%;
28
+      overflow: hidden;
29
+    }
30
+
31
+    .mask-left {
32
+      left: 0;
33
+
34
+      .spin-bar {
35
+        left: 100%;
36
+        border-top-right-radius: @width;
37
+        border-bottom-right-radius: @width;
38
+        border-left: 0;
39
+        transform-origin: center left;
40
+        animation: spin-rotate-right 1.2s cubic-bezier(0.25, 0.5, 0.25, 1) 0.6s
41
+          infinite,
42
+          spin-color 2s linear infinite;
43
+      }
44
+    }
45
+
46
+    .mask-right {
47
+      right: 0;
48
+
49
+      .spin-bar {
50
+        left: -100%;
51
+        border-top-left-radius: @width;
52
+        border-bottom-left-radius: @width;
53
+        border-right: 0;
54
+        transform-origin: center right;
55
+        animation: spin-rotate-right 1.2s cubic-bezier(1, 0.25, 0.5, 0.25)
56
+          infinite,
57
+          spin-color 2s linear infinite;
58
+      }
59
+    }
60
+
61
+    .spin-bar {
62
+      float: left;
63
+      width: 100%;
64
+      height: 100%;
65
+      border-width: 4px;
66
+      border-style: solid;
67
+    }
68
+  }
69
+}
70
+@keyframes spin-rotate-right {
71
+  0% {
72
+    transform: rotate(0deg);
73
+  }
74
+
75
+  50% {
76
+    transform: rotate(180deg);
77
+  }
78
+
79
+  100% {
80
+    transform: rotate(360deg);
81
+  }
82
+}
83
+
84
+@keyframes spin-rotate-left {
85
+  0% {
86
+    transform: rotate(180deg);
87
+  }
88
+
89
+  50% {
90
+    transform: rotate(360deg);
91
+  }
92
+
93
+  100% {
94
+    transform: rotate(540deg);
95
+  }
96
+}
97
+
98
+@keyframes spin-rotate {
99
+  0% {
100
+    transform: rotate(0deg);
101
+  }
102
+
103
+  100% {
104
+    transform: rotate(360deg);
105
+  }
106
+}
107
+
108
+@keyframes spin-color {
109
+  0%,
110
+  100% {
111
+    border-color: #d62d20;
112
+  }
113
+  40% {
114
+    border-color: #0057e7;
115
+  }
116
+  60% {
117
+    border-color: #008744;
118
+  }
119
+  80%,
120
+  90% {
121
+    border-color: #ffa700;
122
+  }
123
+}

+ 2
- 2
src/layouts/index.jsx Datei anzeigen

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

+ 2
- 0
src/pages/index/components/order/index.jsx Datei anzeigen

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