fix(account): 三方页面优化

src/pages/account/Center/bind/index.less

@@ -0,0 +1,12 @@
+.col {
+  display: flex;
+  justify-content: center;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 300px;
+  }
+}

src/pages/account/Center/bind/index.tsx

@@ -1,6 +1,7 @@
-import { Button, Card, Col, message, Row } from 'antd';
+import { Avatar, Button, Card, Col, message, Row } from 'antd';
 import { useEffect, useState } from 'react';
 import Service from '@/pages/account/Center/service';
+import styles from './index.less';
 
 export const service = new Service();
 
@@ -9,6 +10,14 @@ const Bind = () => {
   const [user, setUser] = useState<any>();
   const [code, setCode] = useState<string>('');
 
+  const iconMap = new Map();
+  iconMap.set('dingtalk', require('/public/images/notice/dingtalk.png'));
+  iconMap.set('wechat-webapp', require('/public/images/notice/wechat.png'));
+
+  const bGroundMap = new Map();
+  bGroundMap.set('dingtalk', require('/public/images/notice/dingtalk-background.png'));
+  bGroundMap.set('wechat-webapp', require('/public/images/notice/wechat-background.png'));
+
   const bindUserInfo = (params: string) => {
     service.bindUserInfo(params).then((res) => {
       if (res.status === 200) {
@@ -23,9 +32,8 @@ const Bind = () => {
   };
 
   useEffect(() => {
-    // window.open('http://z.jetlinks.cn')
-    // const item = `http://pro.jetlinks.cn/#/user/login?sso=true&code=4decc08bcb87f3a4fbd74976fd86cd3d&redirect=http://pro.jetlinks.cn/jetlinks`;
     const params = window.location.href.split('?')[1].split('&')[1].split('=')[1];
+    // const params = 'b584032923c78d69e6148cf0e9312723'
     setCode(params);
     bindUserInfo(params);
     getDetail();
@@ -33,42 +41,53 @@ const Bind = () => {
   return (
     <>
       <Card>
-        <Row gutter={[24, 24]}>
-          <Col span={12}>
-            <Card title="个人信息">
-              <p>登录账号：{user?.name}</p>
-              <p>姓名：{user?.name}</p>
-            </Card>
-          </Col>
-          <Col span={12}>
-            <Card title="三方账号信息">
-              <p>类型：{bindUser?.type}</p>
-              <p>组织：{bindUser?.providerName}</p>
-            </Card>
-          </Col>
-        </Row>
-        <Row gutter={[24, 24]}>
-          <Col span={24} style={{ textAlign: 'center', marginTop: 20 }}>
-            <Button
-              type="primary"
-              onClick={() => {
-                service.bind(code).then((res) => {
-                  if (res.status === 200) {
-                    message.success('绑定成功');
-                    if ((window as any).onBindSuccess) {
-                      (window as any).onBindSuccess(res);
+        <div style={{ margin: '0 auto', width: 800 }}>
+          <Row>
+            <Col span={12} className={styles.col}>
+              <Card title="个人信息">
+                <div className={styles.item}>
+                  <div style={{ height: 100 }}>
+                    <Avatar size={90} src={user?.avatar} />
+                  </div>
+                  <p>登录账号：{user?.username}</p>
+                  <p>姓名：{user?.name}</p>
+                </div>
+              </Card>
+            </Col>
+            <Col span={12} className={styles.col}>
+              <Card title="三方账号信息">
+                <div className={styles.item}>
+                  <div style={{ height: 100 }}>
+                    <img style={{ height: 80 }} src={iconMap.get(bindUser?.type)} />
+                  </div>
+                  <p>组织：{bindUser?.providerName}</p>
+                  <p>名字：{bindUser?.result.others.name}</p>
+                </div>
+              </Card>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24} style={{ textAlign: 'center', marginTop: 20 }}>
+              <Button
+                type="primary"
+                onClick={() => {
+                  // window.close()
+                  service.bind(code).then((res) => {
+                    if (res.status === 200) {
+                      message.success('绑定成功');
+                      localStorage.setItem('onBind', 'true');
                       setTimeout(() => window.close(), 300);
+                    } else {
+                      message.error('绑定失败');
                     }
-                  } else {
-                    message.error('绑定失败');
-                  }
-                });
-              }}
-            >
-              立即绑定
-            </Button>
-          </Col>
-        </Row>
+                  });
+                }}
+              >
+                立即绑定
+              </Button>
+            </Col>
+          </Row>
+        </div>
       </Card>
     </>
   );

src/pages/account/Center/index.tsx

@@ -1,5 +1,16 @@
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Upload, message, Avatar, Button, Descriptions, Divider, Col, Row } from 'antd';
+import {
+  Card,
+  Upload,
+  message,
+  Avatar,
+  Button,
+  Descriptions,
+  Divider,
+  Col,
+  Row,
+  Popconfirm,
+} from 'antd';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 import { UploadProps } from 'antd/lib/upload';
@@ -222,7 +233,7 @@ const Center = () => {
                             color: '#00000073',
                           }}
                         >
-                          绑定时间: 2022-01-02 09:00:00
+                          绑定时间: {moment(item.bindTime).format('YYYY-MM-DD HH:mm:ss')}
                         </div>
                       </div>
                     ) : (
@@ -233,27 +244,26 @@ const Center = () => {
                   </div>
                   <div>
                     {item.bound ? (
-                      <Button
-                        onClick={() => {
+                      <Popconfirm
+                        title="确认解除绑定嘛?"
+                        onConfirm={() => {
                           unBind(item.type, item.provider);
                         }}
                       >
-                        解除绑定
-                      </Button>
+                        <Button>解除绑定</Button>
+                      </Popconfirm>
                     ) : (
                       <Button
                         type="primary"
                         onClick={() => {
-                          const items: any = window.open(
-                            `/${SystemConst.API_BASE}/sso/${item.provider}/login`,
-                          );
-                          //  const items:any= window.open(`/#/account/Center/bind`);
-                          items!.onBindSuccess = (value: any) => {
-                            if (value.status === 200) {
+                          window.open(`/${SystemConst.API_BASE}/sso/${item.provider}/login`);
+                          // window.open(`/#/account/center/bind`,'','');
+                          localStorage.setItem('onBind', 'false');
+                          window.onstorage = (e) => {
+                            if (e.newValue) {
                               getBindInfo();
                             }
                           };
-                          // history.push(getMenuPathByCode('account/Center/bind'));
                         }}
                       >
                         立即绑定