commit

package.json

@@ -77,7 +77,8 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js",
+    "deploy:dev": "npm run build && scp -r ./build/* testDev:/home/ceshi/pzy/nft9527"
   },
   "eslintConfig": {
     "extends": [

src/api/index.ts

@@ -156,3 +156,15 @@ export const un_shelves_nft = (id: number) =>
 
 export const no_user_info = (id: number) =>
   request({ url: "/v1/showAccount", data: { id } });
+
+/**
+ * @description 清除消息提醒
+ */
+
+export const clear_msg = () => request({ url: "/v1/clearMessage" });
+
+/**
+ * @description 設置所有消息已讀
+ */
+
+export const read_all_msg = () => request({ url: "/v1/readMessage" });

src/hooks/useNotify.ts

@@ -0,0 +1,91 @@
+import { useRef, useState } from "react";
+import { Toast } from "react-vant";
+import { clear_msg, read_all_msg } from "~/api";
+import { MessageType } from "~/types/store";
+import signGenerator from "~/utils/sign/sign";
+
+const useNotify = (path: string, isNotity: boolean) => {
+  console.log(isNotity);
+
+  const baseUrl = `${process.env.REACT_APP_WS_URL}/api/v1/${path}`;
+  const ws = useRef<any>(null);
+  const filterMessage = useRef([] as MessageType[]);
+  const [messages, setMessages] = useState([] as MessageType[]);
+
+  const connect = (token: string) => {
+    let timestamp = Date.now();
+    let signData = {
+      uri: `/api/v1/${path}`,
+      timestamp: timestamp,
+      args: "",
+    };
+    const sign = signGenerator(signData);
+    ws.current = new WebSocket(
+      `${baseUrl}?Token=${token}&sign=${sign}&timestamp=${timestamp}`
+    );
+
+    ws.current.onmessage = (event: any) => {
+      if (
+        event &&
+        event.data &&
+        event.origin === process.env.REACT_APP_WS_URL
+      ) {
+        let message = JSON.parse(event.data) as MessageType;
+        let item = filterMessage.current.find((v) => v.id === message.id);
+        if (item) return;
+        filterMessage.current.push(message);
+        setMessages((_) => [...filterMessage.current]);
+        // 如果打開了消息列表，則推送直接設置為已讀
+        if (isNotity) {
+          readAllMsg();
+        }
+      }
+    };
+  };
+
+  // 斷開連接
+  const disconnect = () => {
+    ws.current && ws.current.close();
+    ws.current = null;
+    resetMessages();
+  };
+
+  // 重置消息列表
+  const resetMessages = () => {
+    filterMessage.current = [];
+    setMessages([]);
+  };
+
+  // 刪除所有消息
+  const deleteAllMsg = async () => {
+    if (messages.length <= 0) return;
+    const res: any = await clear_msg();
+    if (res && res.code === 0) {
+      Toast.success("清除成功");
+      resetMessages();
+    }
+  };
+
+  // 設置所有消息為已讀
+  const readAllMsg = async () => {
+    const res: any = await read_all_msg();
+    if (res && res.code === 0) {
+      // 把消息改爲已讀
+      filterMessage.current.forEach((item) => {
+        item.status = 2;
+      });
+      setMessages([...filterMessage.current]);
+    }
+  };
+
+  return {
+    connect,
+    disconnect,
+    messages,
+    resetMessages,
+    readAllMsg,
+    deleteAllMsg,
+  };
+};
+
+export default useNotify;

src/hooks/useWs.ts

@@ -1,37 +0,0 @@
-import { useRef } from "react";
-import signGenerator from "~/utils/sign/sign";
-
-const useWs = (path: string) => {
-  const baseUrl = `ws://14.29.101.215:30307/api/v1/${path}`;
-  // const baseUrl = `ws://192.168.124.52:8083/api/v1/${path}`;
-  const ws = useRef<any>(null);
-
-  const connect = (token: string) => {
-    let timestamp = Date.now();
-    let signData = {
-      uri: `/api/v1/${path}`,
-      timestamp: timestamp,
-      args: "",
-    };
-    const sign = signGenerator(signData);
-    ws.current = new WebSocket(
-      `${baseUrl}?Token=${token}&sign=${sign}&timestamp=${timestamp}`
-    );
-
-    ws.current.onMessage = (data: any) => {
-      console.log(data);
-    };
-  };
-
-  const disconnect = () => {
-    ws.current && ws.current.close();
-    ws.current = null;
-  };
-
-  return {
-    connect,
-    disconnect,
-  };
-};
-
-export default useWs;

src/router/layout/Navbar.tsx

@@ -1,24 +1,43 @@
 
+import { useMemo } from 'react'
 import { useRouter } from '~/hooks/useRouter'
+import store from '~/store'
 import '~/styles/layout.scss'
+import { MessageType } from '~/types/store'
 import ConnectButton from './ConnectButton'
 
 interface NavbarProps {
   pathname: string,
-  setVisible: Function
+  setVisible: Function,
+  token: string,
+  messages: MessageType[],
+  readAllMsg: Function
 }
 
 const Navbar = (props: NavbarProps) => {
 
-  const { pathname, setVisible } = props
+  const { pathname, setVisible, token, messages, readAllMsg } = props
   const { push } = useRouter()
 
+  const msgCount = useMemo(() => {
+    // status 1.未讀 2.已讀
+    let list = messages.filter(v => v.status === 1)
+    console.log(list);
+    return list.length
+  }, [messages])
+
   const isBlue = () => {
     if (pathname === '/share') return 'header-bg-color'
     if (pathname === '/noShare') return 'header-bg-color'
     return ''
   }
 
+  const openMsg = () => {
+    if (!token) return store.setVisibleUnLogin(true)
+    readAllMsg()
+    setVisible(true)
+  }
+
   return (
     <div>
       <div className={`header plr-3 ${isBlue()}`}>
@@ -34,8 +53,8 @@ const Navbar = (props: NavbarProps) => {
         {/* <div style={{ flex: 1 }} className='tac'>首页</div> */}
         <div className='row-justify-end' style={{ flex: 1 }}>
           <ConnectButton />
-          <div className='row ml-2' onClick={() => setVisible(true)}>
-            <div className='notify-circle'></div>
+          <div className='row ml-2' onClick={openMsg}>
+            {msgCount > 0 && <div className='notify-circle'></div>}
             <i className='iconfont icon-messages fz-24 fz-wb-1000' />
           </div>
         </div>

src/router/layout/Notify.tsx

@@ -1,66 +1,84 @@
 import '~/styles/layout.scss'
-import { Button, Divider, Popup } from "react-vant"
+import { Button, Dialog, Divider, Popup } from "react-vant"
+import { MessageType } from '~/types/store'
 
 interface NotifyProps {
   visible: boolean,
-  setVisible: Function
+  setVisible: Function,
+  messages: MessageType[],
+  deleteAllMsg: Function
 }
 
 const Notify = (props: NotifyProps) => {
 
-  const { visible, setVisible } = props
+  const { visible, setVisible, messages, deleteAllMsg } = props
 
-  const data = [
-    { title: '提醒', color: '#F96900', imgName: 'register-success', desc: '您挂单的“生肖唐彩-狗”NFT, @Miner 出价 4,153.00 USDT,您挂单的“生肖唐彩-狗”NFT, @Miner 出价 4,153.00 USDT,您挂单的“生肖唐彩-狗”NFT, @Miner 出价 4,153.00 USDT' },
-    { title: '注册成功', color: '#11C0CB', imgName: 'warn', desc: '恭喜,您已成功注册,9527NFT数字交易平台.' },
-  ]
+  const confirmDelete = async () => {
+    if (messages.length <= 0) return
+    Dialog.alert({
+      showCancelButton: true,
+      showConfirmButton: true,
+      title: '提示',
+      message: '確定清除所有歷史消息嗎？',
+      confirmButtonText: '確定',
+      confirmButtonColor: '#0FC6D4',
+      onConfirm: () => deleteAllMsg()
+    })
+  }
 
   return (
-    <Popup
-      visible={visible}
-      onClose={() => setVisible(false)}
-      position='right'
-      style={{
-        height: '100%',
-        width: '70%',
-        borderTopLeftRadius: 20,
-        borderBottomLeftRadius: 20,
-        boxShadow: '8px 8px 20px 0px rgba(0, 0, 0, 0.1)'
-      }}
-      overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.05)' }}
-    >
-      <div className="p-2">
-        <div className="fz-wb-550">消息提醒</div>
-        <Divider className="" style={{ borderColor: '#EEE' }} />
-        <div>
-          {
-            data.map((item, index) => (
-              <div className="notify-box row mt-2" key={index}>
-                <img src={require(`~/assets/${item.imgName}.png`)} className="img" alt="" />
-                <div className='ml-2'>
-                  <div className='fz-14 fz-wb-550' style={{ color: item.color }}>{item.title}</div>
-                  <div className='fz-12 sub-text mt-4px'>{item.desc}</div>
+    <>
+      <Popup
+        visible={visible}
+        onClose={() => setVisible(false)}
+        position='right'
+        style={{
+          height: '100%',
+          width: '70%',
+          borderTopLeftRadius: 20,
+          borderBottomLeftRadius: 20,
+          boxShadow: '8px 8px 20px 0px rgba(0, 0, 0, 0.1)'
+        }}
+        overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.05)' }}
+      >
+        <div className="notify">
+          <div className='header plr-2'>
+            <div style={{ width: '100%' }}>
+              <div className="fz-wb-550">消息提醒</div>
+            </div>
+          </div>
+          <div className='notify-box'>
+            {
+              messages.map((item) => (
+                <div className="notify-item-box row mt-2" key={item.id}>
+                  <img src={item.url} className="img" alt="" />
+                  <div className='ml-2'>
+                    <div className='fz-14 fz-wb-550' style={{ color: item.color }}>{item.title}</div>
+                    <div className='fz-12 sub-text mt-4px' style={{ wordBreak: 'break-word' }}>{item.message}</div>
+                  </div>
                 </div>
-              </div>
-            ))
-          }
-        </div>
-        <div className='mt-5 row-center'>
-          <Button
-            round
-            size="small"
-            className='fz-wb-550'
-            color='#EEEEEE'
-          >
-            <div className='black'>清除所有</div>
-          </Button>
-        </div>
+              ))
+            }
 
-        <div className='close'>
-          <i className='iconfont icon-right-double-arrow fz-22 sub-text' onClick={() => setVisible(false)}></i>
+            <div className='mtb-3 row-center'>
+              <Button
+                round
+                size="small"
+                className='fz-wb-550'
+                color='#EEEEEE'
+                onClick={() => confirmDelete()}
+              >
+                <div className='black'>清除所有</div>
+              </Button>
+            </div>
+          </div>
+          <div className='close'>
+            <i className='iconfont icon-right-double-arrow fz-22 sub-text' onClick={() => setVisible(false)}></i>
+          </div>
         </div>
-      </div>
-    </Popup>
+      </Popup>
+
+    </>
   )
 }
 

src/router/layout/index.tsx

@@ -8,7 +8,7 @@ import Navbar from './Navbar';
 import Tabbar from './Tabbar';
 import { observer } from 'mobx-react';
 import store from '~/store';
-import useWs from '~/hooks/useWs';
+import useNotify from '~/hooks/useNotify';
 import { ethers } from 'ethers';
 import { bind_rmd } from '~/api';
 import { AlreadyBind, BindRmd, BindSuccess, DefaultBind, UnLogin, VaildLink } from './ui';
@@ -16,9 +16,9 @@ import { AlreadyBind, BindRmd, BindSuccess, DefaultBind, UnLogin, VaildLink } fr
 const LayoutRouter = () => {
 
   const { location, push } = useRouter()
-  const messageWs = useWs('getMessage')
-  const { token, walletAddress, userInfo, visibleUnLogin } = store.state
   const [visible, setVisible] = useState(false)
+  const messageWs = useNotify('getMessage', visible)
+  const { token, walletAddress, userInfo, visibleUnLogin } = store.state
 
   const [visibleVaildLink, setVisibleVaildLink] = useState(false) //无效的链接
   const [visibleAlreadyBind, setVisibleAlreadyBind] = useState(false) //已绑定
@@ -55,8 +55,8 @@ const LayoutRouter = () => {
       store.resetNft("myNft")
     }
 
-    // token && messageWs.connect(token)
-    // !token && messageWs.disconnect()
+    token && messageWs.connect(token)
+    !token && messageWs.disconnect()
   }, [token])
 
   useEffect(() => {
@@ -102,6 +102,9 @@ const LayoutRouter = () => {
       <Navbar
         pathname={location.pathname}
         setVisible={setVisible}
+        token={token}
+        messages={messageWs.messages}
+        readAllMsg={messageWs.readAllMsg}
       />
       <div className='pages'>
         <RenderRouter />
@@ -118,7 +121,12 @@ const LayoutRouter = () => {
           />
         )
       }
-      <Notify visible={visible} setVisible={setVisible} />
+      <Notify
+        visible={visible}
+        setVisible={setVisible}
+        messages={messageWs.messages}
+        deleteAllMsg={messageWs.deleteAllMsg}
+      />
 
       <div className="ui">
         {/* 無效鏈接 */}

src/styles/home.scss

@@ -5,7 +5,6 @@
     width: 100%;
     border-radius: 30px;
     overflow: hidden;
-    background-color: $primary;
     position: relative;
 
     img{

src/styles/layout.scss

@@ -99,24 +99,43 @@
   display: none;
 }
 
-.notify-box{
-  padding: 10px 20px;
-  border: 1px solid #eeeeee;
-  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-
-  .img{
-    @include img-size(32px,32px)
-  }
-}
-
-.rv-popup{
+.notify{
+  width: 100%;
+  height: 100%;
   position: relative;
+  
+  .header{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+  }
 
   .close{
     position: absolute;
     top: 49%;
-    left: 0;
+    left: -4px;
+  }
+
+  .notify-box{
+  
+    height: calc(100% - 51px);
+    overflow: hidden;
+    overflow-y: scroll;
+    padding: 0px 20px;
+
+    .notify-item-box{
+      padding: 10px 20px;
+      border: 1px solid #eeeeee;
+      box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      overflow: hidden;
+  
+      .img{
+        @include img-size(32px,32px)
+      }
+    }
   }
 }
 

src/types/store.d.ts

@@ -76,10 +76,20 @@ interface InviteRecordData {
   id: number;
 }
 
+interface MessageType {
+  id: number;
+  url: string;
+  status: number;
+  title: string;
+  message: string;
+  color: string;
+}
+
 export {
   StoreLocalStorageKey,
   UserInfo,
   CoinList,
   MarketNFTData,
   InviteRecordData,
+  MessageType,
 };