feats

src/compents/Loading/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default props => {
+
+  const loadingStyle = {
+    width: props.size || '64px',
+    height: props.size || '64px',
+    borderTopColor: props.color || '#fed12f'
+  }
+
+  return (
+    <View className="cust-loading" style={loadingStyle}></View>
+  )
+}

src/compents/Loading/style.scss

@@ -0,0 +1,17 @@
+
+.cust-loading {
+  display: inline-block;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #fed12f;
+  border-radius: 50%;
+  animation: loading-360 1s infinite linear;
+}
+
+@keyframes loading-360 {
+  0% {
+      transform: rotate(0deg); /*动画起始的时候旋转了0度*/
+  }
+  100% {
+      transform: rotate(360deg); /*动画结束的时候旋转了360度*/
+  }
+}

src/pages/share/index.jsx

@@ -3,6 +3,7 @@ import Taro, { useShareAppMessage, useRouter } from "@tarojs/taro";
 import { useSelector, } from 'react-redux'
 import { View, Input, Text, Image, Picker, Button } from '@tarojs/components'
 import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
+import Loading from '@/compents/Loading'
 import Layout from '../../layout/index'
 import Tab from '../../compents/tab/index'
 import Container from '../../compents/container/index'
@@ -35,6 +36,7 @@ const index = (props) => {
     const [endTime, setEndTime] = useState('')
     const [shareObj, setShareObj] = useState()
     const [showShareModal, setShowShareModal] = useState(false)
+    const [showShareLoading, setShowShareLoading] = useState(false)
     
     const onTimeChange = (e) => {
         setStartTime(e.detail.value)
@@ -49,9 +51,7 @@ const index = (props) => {
             endDate: endTime
         }
         
-        Taro.showLoading({
-            title: '正在生成分享内容,请稍后...'
-        })
+        setShowShareLoading(true)
 
         return request({ url: '/taHouseSetting', method: 'post', data }).then(res => {
             const { data } = res.data
@@ -67,11 +67,11 @@ const index = (props) => {
                     }
 
                     setShareObj(share)
-                    Taro.hideLoading()
+                    setShowShareLoading(false)
                     setShowShareModal(true)
                 })
             } else {
-                Taro.hideLoading()
+                setShowShareLoading(false)
                 Taro.showModal({
                     title: '输入信息有误',
                     content: '请重新输入',
@@ -127,6 +127,14 @@ const index = (props) => {
             </View>
         </Layout>
         <Tab className='addhousetab' color='#ffffff' pageState='3' onClick={handleShareReady} value={['分享到微信']} ></Tab>
+        <AtModal isOpened={showShareLoading} closeOnClickOverlay={false}>
+            <AtModalContent>
+                <View style={{textAlign: 'center'}}>
+                    <Loading size="48px" />
+                </View>
+                <View style={{marginTop: '2em', textAlign: 'center'}}>正在生成分享内容, 请稍后...</View>
+            </AtModalContent>
+        </AtModal>
         <AtModal isOpened={showShareModal}>
             <AtModalHeader>分享到微信</AtModalHeader>
             <AtModalAction>