Browse Source

消息websoket推送

HW 3 years ago
parent
commit
92bde4d811

+ 1 - 1
src/app.config.js

@@ -1,7 +1,7 @@
 export default {
   pages: [
-    'pages/applyDepart/index',//申请公出
     'pages/punchClock/index',//打卡
+    'pages/applyDepart/index',//申请公出
     'pages/egressDetails/index',//公出详情
     'pages/login/index',//登录
     'pages/examine/index',//审核

+ 49 - 1
src/app.jsx

@@ -5,13 +5,61 @@ import configStore from './store'
 
 import './app.less'
 import 'taro-skeleton/dist/index.css'
+import Taro from "@tarojs/taro";
+
+import { AtDrawer  } from 'taro-ui'
+
+import 'taro-ui/dist/style/components/drawer.scss';
+import 'taro-ui/dist/style/components/list.scss';
 
 const store = configStore()
 
 class App extends Component {
   componentDidMount () {}
 
-  componentDidShow () {}
+  componentDidShow () {
+    Taro.eventCenter.on('getStorageSync', () => {
+      this.getStorageSync();
+    })
+    this.getStorageSync();
+  }
+
+  getStorageSync(){
+    let token = Taro.getStorageSync('token');
+    //建立连接
+    Taro.connectSocket({
+      header:{
+        'token': token,
+      },
+      url: "wss://uat.jishutao.com/webSocketServer",
+      //  172.16.0.188:8080
+      //  uat.jishutao.com
+    })
+
+    //连接成功
+    Taro.onSocketOpen(function() {
+      console.log('连接成功')
+      // Taro.sendSocketMessage({
+      //   data: 'stock',
+      // })
+    })
+
+    //接收数据
+    Taro.onSocketMessage(function(data) {
+      console.log(data,'接收数据')
+      Taro.eventCenter.trigger('GoPuncsshIn')
+    })
+
+    //连接失败
+    Taro.onSocketError(function() {
+      console.log('websocket连接失败!');
+    })
+
+    //连接关闭
+    Taro.onSocketClose(function() {
+      console.log('websocket连接关闭!');
+    })
+  }
 
   componentDidHide () {}
 

+ 59 - 0
src/components/common/messageNoticebar/index.jsx

@@ -0,0 +1,59 @@
+import React,{Component} from "react";
+import {View} from '@tarojs/components'
+import Taro from '@tarojs/taro';
+import { AtIcon  } from 'taro-ui'
+import './index.less';
+
+import "taro-ui/dist/style/components/icon.scss";
+
+class MessageNoticebar extends Component{
+  constructor(props) {
+    super(props);
+    this.state={
+      animationData:{}
+    }
+    this.onClose = this.onClose.bind(this);
+  }
+
+  componentDidMount () {
+    let animation = Taro.createAnimation({
+      duration: 1000,
+      timingFunction: 'ease',
+    })
+
+    this.animation = animation
+
+    this.setState({
+      animation:animation.export()
+    })
+
+
+    Taro.eventCenter.on('GoPuncsshIn', () => {
+      this.animation.translateX(-235).step()
+      this.setState({
+        animation: this.animation.export()
+      })
+    })
+  }
+
+  onClose(){
+    this.animation.translateX(235).step()
+    this.setState({
+      animation: this.animation.export()
+    })
+  }
+
+  render() {
+    return (
+      <View className='messageNoticebar' animation={this.state.animation}>
+        <View className='title'>
+          <View>消息通知</View>
+          <AtIcon value='close' size='10' onClick={this.onClose}/>
+        </View>
+        <View className='messageNoticebarContent'>内容1内容1内容1内容1内容1内容1内容1内容1内容1</View>
+      </View>
+    )
+  }
+}
+
+export default MessageNoticebar;

+ 25 - 0
src/components/common/messageNoticebar/index.less

@@ -0,0 +1,25 @@
+.messageNoticebar{
+  padding: 20px 35px;
+  background: #FFF;
+  box-shadow: 1px 1px 14px -1px #767272;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  position: fixed;
+  right: -470px;
+  top: 30px;
+  z-index: 99999;
+  .title{
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bolder;
+    padding-bottom: 20px;
+  }
+  .messageNoticebarContent{
+   font-size: 25px;
+   color: #767272;
+    width: 400px;
+  }
+}

+ 4 - 4
src/pages/egressDetails/index.jsx

@@ -151,12 +151,12 @@ class EgressDetails extends Component{
           <View className='address'>
             {/*<AtIcon value='map-pin' size='15' color='#767272'/>*/}
             公出企业: {dtails.nickname}
-            <Image src={switchIocn} className='switchItem' onClick={()=>{
+            {this.$instance.router.params.type === '0' && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{
               this.setState({
                 isModifyOpened:true,
                 modifyType:1,
               })
-            }}/>
+            }}/> : null}
           </View>
           <View className='state' style={{
             color:dtails.status === 0 ? '#f31212' :
@@ -190,12 +190,12 @@ class EgressDetails extends Component{
           <View className='item'>
             <View className='title'>
               公出地点:
-              <AtIcon value='edit' size='18' color='#3864ef' onClick={()=>{
+              {this.$instance.router.params.type === '0' && dtails.status === 0 ? <AtIcon value='edit' size='18' color='#3864ef' onClick={()=>{
                 this.setState({
                   isModifyOpened:true,
                   modifyType:2,
                 })
-              }}/>
+              }}/> : null}
             </View>
             <View className='value'>{dtails.userName}</View>
             <View className='timeContent'>

+ 2 - 0
src/pages/login/index.jsx

@@ -142,6 +142,7 @@ class Login extends Component {
               code:res.code,
             }).then(v=>{
               if(v.error.length === 0){
+                Taro.eventCenter.trigger('getStorageSync')
                 Taro.switchTab({
                   url: '/pages/punchClock/index',
                 })
@@ -155,6 +156,7 @@ class Login extends Component {
           }
         });
       }else{
+        Taro.eventCenter.trigger('getStorageSync')
         Taro.switchTab({
           url: '/pages/punchClock/index',
         })

+ 2 - 27
src/pages/punchClock/index.jsx

@@ -7,6 +7,7 @@ import dayjs from 'dayjs';
 import Skeleton from 'taro-skeleton'
 
 import ImagePicker from '../../components/common/imagePicker';
+import MessageNoticebar from '../../components/common/messageNoticebar';
 
 import { add, minus, asyncAdd } from '../../actions/counter'
 
@@ -130,33 +131,6 @@ class PunchClock extends Component {
       })
     })
 
-    let token = Taro.getStorageSync('token');
-      //建立连接
-      Taro.connectSocket({
-        header:{
-          'token': token,
-        },
-        url: "wss://uat.jishutao.com/webSocketServer",
-      //  172.16.0.188:8080
-      //  uat.jishutao.com
-      })
-
-      //连接成功
-      Taro.onSocketOpen(function() {
-        Taro.sendSocketMessage({
-          data: 'stock',
-        })
-      })
-
-      //接收数据
-      Taro.onSocketMessage(function(data) {
-        console.log(data,'接收数据')
-      })
-
-      //连接失败
-      Taro.onSocketError(function() {
-        console.log('websocket连接失败!');
-      })
   }
 
   publicReleaseClockIn(){
@@ -329,6 +303,7 @@ class PunchClock extends Component {
     const {dtails} = this.state;
     return (
       <View className='punchClock'>
+        <MessageNoticebar/>
           <View className='header'>
             <Skeleton
               title