add new page

config/index.js

@@ -33,7 +33,8 @@ module.exports = {
       //   changeOrigin: true,  //是否跨域
       // }
       '/api': {
-        target: 'http://172.16.22.5:3000/',  //目标接口域名
+        pathRewrite: { '^/api': '' },
+        target: 'http://imweb.chenzhen.shop',
         changeOrigin: true,  //是否跨域
       }
     },

package.json

@@ -10,7 +10,11 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "ali-oss": "^6.1.1",
+    "axios": "^0.18.0",
     "element-ui": "^2.8.2",
+    "js-cookie": "^2.2.0",
+    "socket.io-client": "^2.2.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "vue": "^2.2.6",

src/App.vue

 <template>
   <div id="app">
-    <div class="sidebar">
-      <mycard></mycard>
-    </div>
-    <div class="main">
-      <router-view></router-view>
-    </div>
-    <div class="tarbar">
-      <toolbar></toolbar>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import mycard from './components/mycard/mycard'
-import toolbar from '@/page/right-panel'
 import { mapActions } from 'vuex'
 export default {
    components: {
-     mycard,
-     toolbar
    },
    created () {
        this.$store.dispatch('initData')

src/components/mycard/mycard.vue

@@ -5,9 +5,9 @@
 	    	<img :src="user.img" class="avatar">
 	    </header>
 	    <div class="navbar" @click="clearSearch">
-	         <router-link to="/chat" class="icon iconfont icon-msg" ></router-link>
-	         <router-link to="/friend" class="icon iconfont icon-friend"></router-link>
-	         <router-link to="/my" class="icon iconfont icon-collection"></router-link>
+	         <router-link to="/main/chat" class="icon iconfont icon-msg" ></router-link>
+	         <router-link to="/main/friend" class="icon iconfont icon-friend"></router-link>
+	         <router-link to="/main/my" class="icon iconfont icon-collection"></router-link>
 	    </div>
 	    <footer>
 	        <i class="icon iconfont icon-more" @click="accountFlag=!accountFlag"></i>

src/page/login/Loading.vue

+template>
+<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: ["marginTop"]
+}
+</script>
+
+<style scoped>
+.loadEffect{
+    width: 100px;
+    height: 100px;
+    position: relative;
+    margin: 0 auto;
+    position: relative;
+    top:-50px;
+    margin-top:50%;
+    transform: scale(.5)
+}
+.loadEffect .ld-span{
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #67e7d5;
+    position: absolute;
+    -webkit-animation: load 1.04s ease infinite;
+}
+@-webkit-keyframes load{
+    0%{
+    -webkit-transform: scale(1.2);
+    opacity: 1;
+    }
+    100%{
+    -webkit-transform: scale(.3);
+    opacity: 0.5;
+    }
+}
+.loadEffect .ld-span:nth-child(1){
+    left: 0;
+    top: 50%;
+    margin-top:-10px;
+    -webkit-animation-delay:0.13s;
+}
+.loadEffect .ld-span:nth-child(2){
+    left: 14px;
+    top: 14px;
+    -webkit-animation-delay:0.26s;
+}
+.loadEffect .ld-span:nth-child(3){
+    left: 50%;
+    top: 0;
+    margin-left: -10px;
+    -webkit-animation-delay:0.39s;
+}
+.loadEffect .ld-span:nth-child(4){
+    top: 14px;
+    right:14px;
+    -webkit-animation-delay:0.52s;
+}
+.loadEffect .ld-span:nth-child(5){
+    right: 0;
+    top: 50%;
+    margin-top:-10px;
+    -webkit-animation-delay:0.65s;
+}
+.loadEffect .ld-span:nth-child(6){
+    right: 14px;
+    bottom:14px;
+    -webkit-animation-delay:0.78s;
+}
+.loadEffect .ld-span:nth-child(7){
+    bottom: 0;
+    left: 50%;
+    margin-left: -10px;
+    -webkit-animation-delay:0.91s;
+}
+.loadEffect .ld-span:nth-child(8){
+    bottom: 14px;
+    left: 14px;
+    -webkit-animation-delay:1.04s;
+}
+</style>
\ No newline at end of file

src/page/login/index.vue

+<template>
+<div class="login" id="login">
+    <a href="javascript:;" class="log-close"></a>
+    <div class="log-bg">
+        <div class="log-cloud cloud1"></div>
+        <div class="log-cloud cloud2"></div>
+        <div class="log-cloud cloud3"></div>
+        <div class="log-cloud cloud4"></div>
+
+        <div class="log-logo">请先登录</div>
+        <div class="log-text"></div>
+    </div>
+    <div class="log-email">
+        <input type="text" placeholder="Email" :class="'log-input' + (account==''?' log-input-empty':'')" v-model="account"><input type="password" placeholder="Password" :class="'log-input' + (password==''?' log-input-empty':'')"  v-model="password">
+        <a href="javascript:;" class="log-btn" @click="login">Login</a>
+    </div>
+    <Loading v-if="isLoging" marginTop="-30%"></Loading>
+</div>
+</template>
+
+<script>
+import Loading from './Loading.vue'
+export default {
+  name: 'Login',
+  data(){
+  	return {
+      isLoging: false,
+  		account: 'liyinghao',
+  		password: 'baozheng0618'
+  	}
+  },
+  components:{
+    Loading
+  },
+  methods:{
+  	login(){
+  		if(this.account!='' && this.password!=''){
+  			this.toLogin();
+  		}
+  	},
+  	toLogin(){
+      let loginParam = {
+        username: this.account,
+        passwd:this.password
+      }
+      this.isLoging = true;
+      this.$store.dispatch('login',loginParam).then((red)=>{
+        this.isLoging = false;
+        this.$message({
+          message: '登录成功！',
+          type: 'success'
+        });
+        this.$router.push('/main/chat'); 
+      }).catch((error)=>{
+        this.isLoging = false;
+        this.$message.error(error);
+      })
+  	}
+  }
+}
+</script>
+
+<style scoped>
+.login{position: fixed; overflow: hidden;left: 50%; margin-left: -250px; top:50%; margin-top: -350px; width: 500px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px; -webkit-box-shadow:  0px 3px 16px -5px #070707; box-shadow:  0px 3px 16px -5px #070707}
+.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
+.log-close:hover .icons{transform: rotate(180deg);}
+.log-close .icons{opacity: 1; transition: all .3s}
+.log-cloud{background-image: url(./images/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
+.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
+.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
+.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
+.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
+.log-bg{background: url(./images/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
+.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
+.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
+.log-logo,.log-text{z-index: 2}
+.icons{background:url(./images/icons.png) no-repeat; display: inline-block;}
+.close{height:16px;width:16px;background-position:-13px 0;}
+.login-email{height:17px;width:29px;background-position:-117px 0;}
+.log-btns{padding: 15px 0; margin: 0 auto;}
+.log-btn{width:402px; display: block; text-align: left; line-height: 50px;margin:0 auto 15px; height:50px; color:#fff; font-size:13px;-webkit-border-radius: 5px; background-color: #3B5999;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px;
+position: relative;}
+.log-btn.tw{background-color: #13B4E9}
+.log-btn.email{background-color: #50E3CE}
+.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}
+.log-email{text-align: center; margin-top: 20px;}
+.log-email .log-btn{background-color: #50E3CE;text-align: center;}
+.log-input-empty{border: 1px solid #f37474 !important;}
+.isloading{background: #d6d6d6}
+.log-btn .icons{margin-left: 30px; vertical-align: middle;}
+.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
+.log-input{width: 370px;overflow: hidden; padding: 0 15px;font-size: 13px; border: 1px solid #EBEBEB; margin:0 auto 15px; height: 48px; line-height: 48px; -webkit-border-radius: 5px;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px;}
+.log-input.warn{border: 1px solid #f88787}
+ @-webkit-keyframes cloud1 {  
+    0%{left: 200px}  
+    100%{left:-130px;} 
+}
+@keyframes cloud1{
+    0%{left: 200px}  
+    100%{left:-130px;} 
+}
+ @-webkit-keyframes cloud2 {  
+    0%{left:500px;}  
+    100%{left:-90px;} 
+}
+@keyframes cloud2{
+    0%{left:500px;}  
+    100%{left:-90px;} 
+}
+@-webkit-keyframes cloud3 {  
+    0%{left:620px;}  
+    100%{left:-70px;} 
+}
+@keyframes cloud3{
+    0%{left:620px;}  
+    100%{left:-70px;} 
+}@-webkit-keyframes cloud4 {  
+    0%{left:100px;}  
+    100%{left:-70px;} 
+}
+@keyframes cloud4{
+    0%{left:100px;}  
+    100%{left:-70px;} 
+}
+</style>
\ No newline at end of file

src/page/chat/chat.vue → src/page/main/chat/chat.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import search from '../../components/search/search'
-import chatlist from '../../components/chatlist/chatlist'
-import message from '../../components/message/message'
-import vText from '../../components/text/text'
+import search from '@/components/search/search'
+import chatlist from '@/components/chatlist/chatlist'
+import message from '@/components/message/message'
+import vText from '@/components/text/text'
 export default {
    components: {
    	 search,

src/page/friend/friend.vue → src/page/main/friend/friend.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import search from '../../components/search/search'
-import friendlist from '../../components/friendlist/friendlist'
-import info from '../../components/info/info'
+import search from '@/components/search/search'
+import friendlist from '@/components/friendlist/friendlist'
+import info from '@/components/info/info'
 export default{
     components: {
         search,

src/page/main/index.vue

+<template>
+  <div id="app">
+    <div class="sidebar">
+      <mycard></mycard>
+    </div>
+    <div class="main">
+      <router-view></router-view>
+    </div>
+    <div class="tarbar">
+      <toolbar></toolbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import mycard from '@/components/mycard/mycard'
+import toolbar from './right-panel'
+import { mapActions } from 'vuex'
+export default {
+   components: {
+     mycard,
+     toolbar
+   },
+   created () {
+       this.$store.dispatch('connect')
+   }
+}
+</script>
+
+<style lang="stylus" scoped>
+#app
+  display: flex
+  margin: auto
+  width: 1260px
+  background-color: #fff
+  .sidebar
+    width: 60px
+    height: 800px
+    background: #2b2c2f
+  .main
+    flex: 1
+    height: 800px
+    background: #f2f2f2
+  .tarbar
+    flex: 2
+    width:00px;
+    height: 800px;
+</style>

src/page/right-panel/index.vue → src/page/main/right-panel/index.vue

@@ -42,7 +42,7 @@ export default{
 
 <style lang="stylus" scoped>
 .tabs-body
-  height:800px;
+  height:700px;
   width:100%;
   .tool-body
     width:100%;

src/router/index.js

@@ -6,19 +6,27 @@ Vue.use(Router)
 const router = new Router({
   routes: [
     {
-      path: '/chat',
-      component: require('@/page/chat/chat.vue')
+      path: '/login',
+      component: require('@/page/login')
     },
-    {
-      path: '/friend',
-      component: require('@/page/friend/friend.vue')
-    },
-    {
-      path: '/my',
-      component: require('@/page/friend/friend.vue')
+    { path: '/main', component: require('@/page/main'),
+      children: [
+          {
+            path: 'chat',
+            component: require('@/page/main/chat/chat.vue')
+          },
+          {
+            path: 'friend',
+            component: require('@/page/main/friend/friend.vue')
+          },
+          {
+            path: 'my',
+            component: require('@/page/main/friend/friend.vue')
+          }
+      ]
     }
   ],
   linkActiveClass: 'active'
 })
-router.push({ path: '/chat' });
+router.push({ path: '/login' });
 export default router
\ No newline at end of file

src/service/api.js

+const url={}
+url.login = '/api/y/customer/passport/sign'
+url.wsUrl = "http://imweb.chenzhen.shop:9093"
+export default url
\ No newline at end of file

src/service/index.js

+import apiUrl from './api.js'
+import request from '@/utils/request'
+export const login = (param)=>{ 
+	return request({
+	    url: apiUrl.login,
+	    method: 'post',
+	    data: param
+	})
+}
\ No newline at end of file

src/store/modules/user.js

-// import * as service from '@/api/car'
+import * as service from '@/service'
+import io from 'socket.io-client';
+import apiUrl from '@/service/api.js'
+import { setToken, getToken } from '@/utils/auth'
+import Vue from 'vue'
 const now = new Date();
 const user = {
   state: {
     name: 'ratel',
+    userInfo:{},
+    wsObject:null,
     img: 'static/images/UserAvatar.jpg',
     chatlist: [
         {
@@ -214,14 +220,21 @@ const user = {
   },
 
   mutations: {
+    USER_LOGIN(state, value){
+        setToken(value.token)
+        state.userInfo = value
+    },
+    SET_WXOBJECT(state, value){
+        state.wsObject = value
+    },
     initData (state) {
-            let data = localStorage.getItem('vue-chat');
-            if (data) {
-                state.chatlist = JSON.parse(data);
-            }
+        let data = localStorage.getItem('vue-chat');
+        if (data) {
+            state.chatlist = JSON.parse(data);
+        }
     },
     // 获取搜索值
-  search (state, value) {
+    search (state, value) {
        state.searchText = value
     },
     // 得知用户当前选择的是哪个对话。便于匹配对应的对话框
@@ -284,6 +297,107 @@ const user = {
   },
 
   actions: {
+    login:({ commit }, value)=>{
+        return new Promise((resolve, reject) => {
+            service.login(value).then(response=>{
+                if(response.code==200){
+                    commit('USER_LOGIN', response.data)
+                    resolve(response.data)
+                }else{
+                    reject(response)
+                }
+            }).catch(error => {
+              reject(error)
+            })
+      })
+    },
+    connect({ dispatch, commit, state }) {
+      const wsClient = io(apiUrl.wsUrl, { autoConnect: false, transports: ['websocket'] })
+      commit('SET_WXOBJECT', wsClient)
+      if (wsClient.disconnected) {
+        // commit('init', account)
+        wsClient.io.opts.query = {
+          token: getToken()
+        }
+        wsClient.on('connect', () => {
+          // Common.wsClient = wsClient
+          console.log("connect")
+          // commit('login')
+          // dispatch('connected')
+          // storage.set('account', state)
+        }).on('connect_error', () => {
+          console.log("connect_error")
+        }).on('disconnect', () => {
+          // if (Common.wsClient) Common.wsClient = null
+          console.log("disconnect")
+        }).on('reconnect_attempt', () => {
+          // if (Common.wsClient) Common.wsClient.io.opts.transports = ['polling', 'websocket'];
+        })
+        wsClient.open()
+      }
+    },
+    connected({ state, dispatch }) {
+      state.userInfo
+      .on('messages/message', (data) => {
+        console.log(data)
+        if (data.eventType == "conversations/create" && data.message) {
+          // dispatch('conversation/newConversation', data, { root: true })
+        } else {
+          data.self = data.isSend == 1 || data.customerId == state.customerServiceId
+          // dispatch('conversation/newMessage', data, { root: true })
+        }
+      })
+      .on('conversations/index', (data) => {
+        console.log(data)
+        // console.log('conversations/index')
+        // console.log(data)
+        // _.each(data, (conversation) => {
+        //   dispatch('conversation/addConversation', {...conversation, from: 'index'}, { root: true })
+        // })
+      })
+      .on('conversations/friend', (data) => {
+        console.log(data)
+        // console.log('conversations/friend')
+        // console.log(data)
+        // _.each(data, (conversation) => {
+        //   dispatch('conversation/addFriendConversation', {...conversation, from: 'index'}, { root: true })
+        // })
+      })
+      .on('messages/index', (data) => {
+        console.log(data)
+        // console.log('messages/index')
+        // if (_.isEmpty(data)) return
+        // _.each(data, (message) => {
+        //   message.self = message.isSend == 1 || message.customerId == state.customerServiceId
+        //   dispatch('conversation/addMessage', message, { root: true })
+        // })
+        // dispatch('conversation/isMessagesDone', data, { root: true })
+      })
+      .on('conversations/show', (data) => {
+        console.log(data)
+        // console.log('conversations/show')
+        // dispatch('conversation/addConversation', data, { root: true })
+      })
+      .on('conversions/search', (data) => {
+        console.log(data)
+        // _.each(data, (conversation) => {
+        //   dispatch('conversation/addConversation', conversation, { root: true })
+        // })
+      })
+
+      // dispatch('conversation/init', {}, { root: true })
+      // dispatch('conversation/showConversation', { id: 3 }, { root: true })
+
+      // Common.wsClient.emit('appevent', {
+      //   eventType: 'messages/create',
+      //   message: {
+      //     conversationId: 3,
+      //     type: 3,
+      //     content: "文本",
+      //     imageUrl: "https://cdn-images.baozheng.cc/uploads/bag/order/front/000/248/943/medium_0789ee03.jpeg"
+      //   },
+      // })
+    },
     search: ({ commit }, value) => {
         setTimeout(() => {
                 commit('search', value)

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'token'
+const userIdKey = 'userId'
+const commercialIdKey = 'commercialId'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function getUserId() {
+  return Cookies.get(userIdKey)
+}
+
+export function setUserId(id) {
+  return Cookies.set(userIdKey, id)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+export function getCommercialId() {
+  return Cookies.get(commercialIdKey)
+}
+
+export function setCommercialId(token) {
+  return Cookies.set(commercialIdKey, token)
+}
\ No newline at end of file

src/utils/request.js

+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import store from '../store'
+import { getToken } from '@/utils/auth'
+
+// 创建axios实例
+const service = axios.create({
+  // baseURL: process.env.BASE_API, // api 的 base_url
+  timeout: 5000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+     config.headers['Content-Type'] = 'application/json;charset=UTF-8'
+    if (store.getters.token) {
+      config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+     * code为非20000是抛错 可结合自己业务进行修改
+     */
+    // const res = response.data
+    return response.data
+    // if (res.code !== 20000) {
+    //   Message({
+    //     message: res.message,
+    //     type: 'error',
+    //     duration: 5 * 1000
+    //   })
+
+    //   // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+    //     MessageBox.confirm(
+    //       '你已被登出，可以取消继续留在该页面，或者重新登录',
+    //       '确定登出',
+    //       {
+    //         confirmButtonText: '重新登录',
+    //         cancelButtonText: '取消',
+    //         type: 'warning'
+    //       }
+    //     ).then(() => {
+    //       store.dispatch('FedLogOut').then(() => {
+    //         location.reload() // 为了重新实例化vue-router对象 避免bug
+    //       })
+    //     })
+    //   }
+    //   return Promise.reject('error')
+    // } else {
+    //   return response.data
+    // }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service
\ No newline at end of file