Skip to content

C
chart-web
Commit 3faa4225 authored by looker's avatar looker
Browse files
Options

add new page

parent a0a433b6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1601 additions and 114 deletions
config/index.js
View file @ 3faa4225
...@@ -33,7 +33,8 @@ module.exports = { ...@@ -33,7 +33,8 @@ module.exports = {
// changeOrigin: true, //是否跨域 // changeOrigin: true, //是否跨域
// } // }
'/api': { '/api': {
target: 'http://172.16.22.5:3000/', //目标接口域名 pathRewrite: { '^/api': '' },
target: 'http://imweb.chenzhen.shop',
changeOrigin: true, //是否跨域 changeOrigin: true, //是否跨域
} }
}, },
......
package-lock.json
View file @ 3faa4225
This diff is collapsed.
package.json
View file @ 3faa4225
...@@ -10,7 +10,11 @@ ...@@ -10,7 +10,11 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"ali-oss": "^6.1.1",
"axios": "^0.18.0",
"element-ui": "^2.8.2", "element-ui": "^2.8.2",
"js-cookie": "^2.2.0",
"socket.io-client": "^2.2.0",
"stylus": "^0.54.5", "stylus": "^0.54.5",
"stylus-loader": "^3.0.1", "stylus-loader": "^3.0.1",
"vue": "^2.2.6", "vue": "^2.2.6",
......
src/App.vue
View file @ 3faa4225
<template> <template>
<div id="app"> <div id="app">
<div class="sidebar"> <router-view></router-view>
<mycard></mycard>
</div>
<div class="main">
<router-view></router-view>
</div>
<div class="tarbar">
<toolbar></toolbar>
</div>
</div> </div>
</template> </template>
<script> <script>
import mycard from './components/mycard/mycard'
import toolbar from '@/page/right-panel'
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
export default { export default {
components: { components: {
mycard,
toolbar
}, },
created () { created () {
this.$store.dispatch('initData') this.$store.dispatch('initData')
......
src/components/mycard/mycard.vue
View file @ 3faa4225
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<img :src="user.img" class="avatar"> <img :src="user.img" class="avatar">
</header> </header>
<div class="navbar" @click="clearSearch"> <div class="navbar" @click="clearSearch">
<router-link to="/chat" class="icon iconfont icon-msg" ></router-link> <router-link to="/main/chat" class="icon iconfont icon-msg" ></router-link>
<router-link to="/friend" class="icon iconfont icon-friend"></router-link> <router-link to="/main/friend" class="icon iconfont icon-friend"></router-link>
<router-link to="/my" class="icon iconfont icon-collection"></router-link> <router-link to="/main/my" class="icon iconfont icon-collection"></router-link>
</div> </div>
<footer> <footer>
<i class="icon iconfont icon-more" @click="accountFlag=!accountFlag"></i> <i class="icon iconfont icon-more" @click="accountFlag=!accountFlag"></i>
......
src/page/login/Loading.vue 0 → 100644
View file @ 3faa4225
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 0 → 100644
View file @ 3faa4225
<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
View file @ 3faa4225
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
</template> </template>
<script> <script>
import search from '../../components/search/search' import search from '@/components/search/search'
import chatlist from '../../components/chatlist/chatlist' import chatlist from '@/components/chatlist/chatlist'
import message from '../../components/message/message' import message from '@/components/message/message'
import vText from '../../components/text/text' import vText from '@/components/text/text'
export default { export default {
components: { components: {
search, search,
......
src/page/friend/friend.vue → src/page/main/friend/friend.vue
View file @ 3faa4225
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
</template> </template>
<script> <script>
import search from '../../components/search/search' import search from '@/components/search/search'
import friendlist from '../../components/friendlist/friendlist' import friendlist from '@/components/friendlist/friendlist'
import info from '../../components/info/info' import info from '@/components/info/info'
export default{ export default{
components: { components: {
search, search,
......
src/page/main/index.vue 0 → 100644
View file @ 3faa4225
<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
View file @ 3faa4225
...@@ -42,7 +42,7 @@ export default{ ...@@ -42,7 +42,7 @@ export default{
<style lang="stylus" scoped> <style lang="stylus" scoped>
.tabs-body .tabs-body
height:800px; height:700px;
width:100%; width:100%;
.tool-body .tool-body
width:100%; width:100%;
......
src/router/index.js
View file @ 3faa4225
...@@ -6,19 +6,27 @@ Vue.use(Router) ...@@ -6,19 +6,27 @@ Vue.use(Router)
const router = new Router({ const router = new Router({
routes: [ routes: [
{ {
path: '/chat', path: '/login',
component: require('@/page/chat/chat.vue') component: require('@/page/login')
}, },
{ { path: '/main', component: require('@/page/main'),
path: '/friend', children: [
component: require('@/page/friend/friend.vue') {
}, path: 'chat',
{ component: require('@/page/main/chat/chat.vue')
path: '/my', },
component: require('@/page/friend/friend.vue') {
path: 'friend',
component: require('@/page/main/friend/friend.vue')
},
{
path: 'my',
component: require('@/page/main/friend/friend.vue')
}
]
} }
], ],
linkActiveClass: 'active' linkActiveClass: 'active'
}) })
router.push({ path: '/chat' }); router.push({ path: '/login' });
export default router export default router
\ No newline at end of file
src/service/api.js 0 → 100644
View file @ 3faa4225
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 0 → 100644
View file @ 3faa4225
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
View file @ 3faa4225
// 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 now = new Date();
const user = { const user = {
state: { state: {
name: 'ratel', name: 'ratel',
userInfo:{},
wsObject:null,
img: 'static/images/UserAvatar.jpg', img: 'static/images/UserAvatar.jpg',
chatlist: [ chatlist: [
{ {
...@@ -214,14 +220,21 @@ const user = { ...@@ -214,14 +220,21 @@ const user = {
}, },
mutations: { mutations: {
USER_LOGIN(state, value){
setToken(value.token)
state.userInfo = value
},
SET_WXOBJECT(state, value){
state.wsObject = value
},
initData (state) { initData (state) {
let data = localStorage.getItem('vue-chat'); let data = localStorage.getItem('vue-chat');
if (data) { if (data) {
state.chatlist = JSON.parse(data); state.chatlist = JSON.parse(data);
} }
}, },
// 获取搜索值 // 获取搜索值
search (state, value) { search (state, value) {
state.searchText = value state.searchText = value
}, },
// 得知用户当前选择的是哪个对话。便于匹配对应的对话框 // 得知用户当前选择的是哪个对话。便于匹配对应的对话框
...@@ -284,6 +297,107 @@ const user = { ...@@ -284,6 +297,107 @@ const user = {
}, },
actions: { 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) => { search: ({ commit }, value) => {
setTimeout(() => { setTimeout(() => {
commit('search', value) commit('search', value)
......
src/utils/auth.js 0 → 100644
View file @ 3faa4225
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 0 → 100644
View file @ 3faa4225
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment