add weather

web-react/src/util/global/index.js

@@ -38,6 +38,11 @@ export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQU
  */
 export const CITY = '黄石市'
 
+/**
+ * 
+ */
+export const AMAP_WEBAPI_KEY = 'ca01719fe09757131a1249c273619a17'
+
 /**
  * 响应式响应宽度
  */

web-react/src/views/main/_layout/header/index.jsx

@@ -6,6 +6,7 @@ import { api } from 'common/api'
 
 import Logo from '../logo'
 import Search from './search'
+import Weather from './weather'
 import Notice from './notice'
 import User from './user'
 
@@ -53,6 +54,7 @@ export default class index extends Component {
                         <Search />
                     </div>
                     <div className="header-actions">
+                        <Weather />
                         <Tooltip placement="bottom" title="重新加载框架">
                             <span
                                 className="header-action"

web-react/src/views/main/_layout/header/weather.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { Space } from 'antd'
+import AntIcon from 'components/ant-icon'
+import { axios } from 'common/api'
+import { AMAP_WEBAPI_KEY } from 'util/global'
+
+export default class weather extends Component {
+    state = {
+        weather: '',
+        temperature: 0,
+    }
+
+    async componentDidMount() {
+        const {
+            data: { adcode },
+        } = await axios.get('https://restapi.amap.com/v3/ip', {
+            params: {
+                key: AMAP_WEBAPI_KEY,
+            },
+        })
+        const {
+            data: { lives },
+        } = await axios.get('http://restapi.amap.com/v3/weather/weatherInfo', {
+            params: {
+                key: AMAP_WEBAPI_KEY,
+                city: adcode,
+            },
+        })
+        if (Array.isArray(lives)) {
+            const { weather, temperature } = lives.shift()
+            this.setState({
+                weather,
+                temperature,
+            })
+        }
+    }
+
+    render() {
+        const { weather, temperature } = this.state
+
+        return (
+            <span className="header-action">
+                <Space align="center" style={{ lineHeight: 1 }}>
+                    <AntIcon type="cloud" />
+                    <span>{temperature}℃</span>
+                    <span>{weather}</span>
+                </Space>
+            </span>
+        )
+    }
+}