福气排行榜popup

src/components/blessingRank/index.js

-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { http } from "@/utils";
-import { Popup } from '@/common';
-import AddressPopup from './../blessingPreheat/addressPopup/index';
-import './index.scss';
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { http } from "@/utils"
+import { Popup } from '@/common'
+import AddressPopup from './../blessingPreheat/addressPopup/index'
+import './index.scss'
 
-@connect(({ user }) => (
+@connect(({user}) => (
   {
     uid: user.data.uid || ''
   }
 ))
 class BlessingRank extends Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
-      isAddress: false,
       rankList: [],
       rules: [
         '1、排行榜名次以2019年11月13日24点七月在线公布的排行榜为准，榜单确认后，得奖小伙伴请及时填写邮寄信息，7个自然日内不填写，视为主动放弃奖品；',
@@ -26,37 +25,39 @@ class BlessingRank extends Component {
   }
 
   componentDidMount() {
-    this.fetchRankData();
+    this.fetchRankData()
   }
 
   fetchRankData = () => {
     http.get(`${API.home}/sys/blessing/ranking`).then(res => {
-      const { code, data } = res.data;
-      if(code === 200) {
+      const {code, data} = res.data
+      if (code === 200) {
         this.setState({
           rankList: data,
-        });
+        })
       }
-    });
+    })
   }
 
   handleToSwitch = (bool) => {
-    const { history, uid } = this.props;
-    if(bool && !uid) {
-      history.push('/passport');
-    }else {
-      this.setState({
-        isAddress: bool
-      });
+    const {history, uid} = this.props
+    if (bool && !uid) {
+      history.push('/passport')
+    } else {
+      Popup({
+        title: '收货信息',
+        content: <AddressPopup handleToHide={() => this.handleToSwitch(false)}/>
+
+      })
     }
   }
 
   formatString = (str, len) => {
-    return str.length > len? `${str.substr(0, len)}...` : str;
+    return str.length > len ? `${str.substr(0, len)}...` : str
   }
 
   render() {
-    const { isAddress, rankList, rules } = this.state;
+    const {rankList, rules} = this.state
     return (
       <>
         <div className="rank__banner"></div>
@@ -77,7 +78,7 @@ class BlessingRank extends Component {
                       {
                         index < 3
                           ? (
-                          <i className="rank__table-num" data-num={index+1}></i>
+                            <i className="rank__table-num" data-num={index + 1}></i>
                           )
                           : index + 1
                       }
@@ -91,7 +92,7 @@ class BlessingRank extends Component {
                     <dd className="rank__table-column">{item.blessing_value}</dd>
                     <dd className="rank__table-column">{this.formatString(item.prize_name, 7)}</dd>
                   </dl>
-                );
+                )
               })
             }
 
@@ -104,16 +105,10 @@ class BlessingRank extends Component {
               ))
             }
           </div>
-          <Popup 
-            visible={isAddress}
-            title="收货信息"
-          >
-            <AddressPopup handleToHide = {() => this.handleToSwitch(false)} />
-          </Popup>
         </div>
       </>
-    );
+    )
   }
 }
 
-export default BlessingRank;
\ No newline at end of file
+export default BlessingRank