Skip to content

C
chart-web
Commit 4c293573 authored by looker's avatar looker
Browse files
Options

v0.3

parent f7f02a9f
Show whitespace changes
Inline Side-by-side
Showing with 441 additions and 193 deletions
config/dev.env.js
View file @ 4c293573
......@@ -3,6 +3,7 @@ var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_URL:'"/api/"',
WX_ADDRESS: '"http://imdev.chenzhen.shop:9093/"',
IMG_ADDRESS:'"http://chat-x.oss-cn-beijing.aliyuncs.com/"'
})
config/index.js
View file @ 4c293573
......@@ -23,7 +23,7 @@ module.exports = {
},
dev: {
env: require('./dev.env'),
port: 8078,
port: 8099,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
......
config/prod.env.js
View file @ 4c293573
module.exports = {
NODE_ENV: '"production"',
API_URL:'""',
WX_ADDRESS: "http://imweb.chenzhen.shop:9093",
IMG_ADDRESS:'"http://chat-x.oss-cn-beijing.aliyuncs.com/"'
}
src/components/load/moreDot.vue
View file @ 4c293573
......@@ -15,8 +15,8 @@
}
.spinner > div {
width: 30px;
height: 30px;
width: 8px;
height: 8px;
background-color: #c3c3c3;
border-radius: 100%;
......
src/components/message/message.vue
View file @ 4c293573
......@@ -17,12 +17,20 @@
<div class="text" v-html="replaceFace(item.content)"></div>
</div>
</div>
<div v-if="item.type==10000" class="main" :class="{ self: item.isSend }">
<div class="time" style="text-align: center"><span>{{item.createTime | time}}</span></div>
<div style="text-align: center">
<div style="font-size: 12px;color: #26c8e2;text-align: center;">
系统消息：{{item.content}}
</div>
</div>
</div>
<div v-if="item.type==3" class="main" :class="{ self: item.isSend }">
<img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
<div class="time"><span>{{item.createTime | time}}</span></div>
<div class="content">
<div class="img"><img style="width:300px;
height:300px;" :src="imgUrl+item.imageUrl" alt=""></div>
height:300px;" :src="item.imageUrl | imgUrl" alt=""></div>
</div>
</div>
</li>
......@@ -67,6 +75,7 @@ export default {
},
mounted() {
let temp = this
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
this.$refs.list.onscroll = function () {
if(this.scrollTop ==0){
temp.moreMessage()
......@@ -79,18 +88,19 @@ export default {
selectId() {
},
messages(val, old){
console.log(433333333)
if(!val||val.length==0){
return
}
if(!old||old.length==0){
if(!old||old.length==0){//初始化
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}else if(val[0].conversationId!=old[0].conversationId){
}else if(val[0].conversationId!=old[0].conversationId){//切换tab
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}
if(this.headerId != val[val.length-1].conversationId){
if(this.headerId == val[0].id){//
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}else{
this.$refs.list.scrollTop= 140
this.$refs.list.scrollTop= 50
// }
// let liArray = this.$refs.list.children[0].children
// let index = val.length - old.length
......@@ -102,7 +112,7 @@ export default {
// }
// }
}
this.headerId = val[0].conversationId
this.headerId = val[0].id
// console.log(66666666666666666666666)
// if(old.length+1==val.length){
......@@ -141,6 +151,13 @@ export default {
// }else{
// return date.getHours() + ':' + date.getMinutes();
// }
},
imgUrl(img){
if(img.indexOf("http") >= 0){
return img
}else{
return process.env.IMG_ADDRESS + img
}
}
}
}
......
src/components/text/text.vue
View file @ 4c293573
......@@ -3,14 +3,26 @@
<div class="text">
<div class="emoji">
<i class="icon iconfont icon-look" @click="showEmoji=!showEmoji"></i>
<div style="width: 20px;display: inline-block;">
<el-upload
class="upload-demo"
action="/api/o/upload/image"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="fileEd"
:show-file-list=false
>
<img class="icon-img" align="absmiddle" src="static/icon-img/folder-open.png" alt="">
</el-upload>
</div>
<img class="icon-img" align="absmiddle" src="static/icon-img/link.png" alt="">
<img class="icon-img" align="absmiddle" src="static/icon-img/tag.png" alt="">
<img class="icon-img" align="absmiddle" src="static/icon-img/retweet.png" alt="" @click="transfer">
<img class="icon-img" align="absmiddle" src="static/icon-img/poweroff.png" alt="" @click="closeSession">
<transition name="showbox">
<div class="emojiBox" v-show="showEmoji">
<li v-for="(item, index) in emojis">
<li v-for="(item, index) in user.emojis">
<img :src="'static/emoji/'+item.file" :data="item.code" @click="content +=item.code">
</li>
</div>
......@@ -33,28 +45,28 @@
<div>
<el-select style="width: 100%;" v-model="value7" placeholder="请选择">
<el-option-group
v-for="group in options3"
:key="group.label"
:label="group.label">
v-for="group in tempList"
:key="group.id"
:label="group.name">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in group.chis"
:key="item.toCustomerId"
:label="item.name"
:value="item.toCustomerId">
</el-option>
</el-option-group>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button type="primary" @click="toTransterIng(value7)">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
data () {
return {
......@@ -62,35 +74,12 @@ export default {
reply: '未找到',
frequency: 0,
sendType:1,
upLoadImgUrl:process.env.IMG_ADDRESS,
imageUrl:'',
warn: false,
showEmoji: false,
dialogVisible:false,
options3: [{
label: '售前',
options: [{
value: 'Shanghai',
label: '随机转机'
}, {
value: 'Beijing',
label: '张辅导费'
}]
}, {
label: '售中',
options: [{
value: 'Chengdu',
label: '随机抓捏'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}],
tempList:[],
value7: ''
};
},
......@@ -104,17 +93,40 @@ export default {
])
},
methods: {
...mapActions([
'getTranster',
'toTranster',
'closeTake'
]),
fileEd(res){
if(res.code==200){
this.imageUrl = res.data.url
this.sendType = 3
this.send()
}
console.log(res)
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
// 按回车发送信息
closeSession(){
let temp = this
this.$confirm('确定要结束对话吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
temp.closeTake().then((data)=>{
this.$message({
type: 'success',
message: '已结束!'
});
})
}).catch(() => {
// this.$message({
// type: 'info',
......@@ -122,48 +134,65 @@ export default {
// });
});
},
toTransterIng(cId){
console.log(cId)
for(let tobj of this.tempList){
for(let obj of tobj.chis){
if(cId==obj.toCustomerId){
this.toTranster(obj).then((r,t)=>{
this.dialogVisible = false
this.$message({
message: '转接成功！',
type: 'success'
});
}).catch((data)=>{
console.log(data)
})
}
}
}
},
transfer(){
let that = this
this.getTranster().then((data)=>{
let tempList = []
for(let obj of data){
let temp ={
id:obj.roleBo.name,
name:obj.roleBo.name
}
let chis = [{
type:1,
toRoleId:obj.roleBo.roleId,
name:'随机转换'
}]
for(let r of obj.customerServiceBos){
if(r.customerSessionBo&&r.customerSessionBo.userState!='40'){
chis.push({
type:2,
toRoleId:obj.roleBo.roleId,
toCustomerId:r.customerId,
name:r.username
})
}
}
temp.chis = chis
chis.length>1&&tempList.push(temp)
}
that.tempList = tempList
this.dialogVisible = true
// let transfers = `
// `
// this.$alert(transfers, 'HTML 片段', {
// dangerouslyUseHTMLString: true
// });
// let transfers = `
// <el-collapse v-model="activeNames" @change="handleChange">
// <el-collapse-item title="一致性 Consistency" name="1">
// <el-row>
// <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
// </el-row>
// </el-collapse-item>
// </el-collapse>
// `
// this.$confirm(transfers, '选择转接对象', {
// dangerouslyUseHTMLString: true,
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// center: true
// }).then(() => {
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
// });
}).catch((data)=>{
that.tempList=[]
this.dialogVisible = false
})
},
onKeyup (e) {
if ( e.keyCode === 13 ) {
this.send()
}
},
// 点击发送按钮发送信息
send () {
if(this.sendType!=3){
if(this.content.length < 1){
this.warn = true
this.content = ''
......@@ -180,20 +209,28 @@ export default {
this.$store.dispatch('sendMessage', msg)
this.content = ''
}
}else{
var msg = {
id:this.user.selectId,
type:this.sendType,
content: this.content,
imageUrl:this.imageUrl
}
this.$store.dispatch('sendMessage', msg)
this.content = ''
this.sendType =1
}
}
},
// 在进入的时候 聚焦输入框
mounted() {
this.$refs.text.focus()
},
watch: {
// 在选择其它对话的时候 聚焦输入框
selectId() {
setTimeout(() => {
this.$refs.text.focus()
}, 0)
},
// 当输入框中的值为空时 弹出提示 并在一秒后消失
content() {
if(this.content === ''){
if( this.frequency === 0){
......
src/page/login/Loading.vue
View file @ 4c293573
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>
<template>
<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '90%'}">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
......@@ -29,67 +41,114 @@ export default {
margin-top:50%;
transform: scale(.5)
}
.loadEffect .ld-span{
display: inline-block;
.spinner {
margin: 100px auto;
width: 20px;
height: 20px;
border-radius: 50%;
background: #67e7d5;
position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
width: 6px;
height: 6px;
background-color: #333;
border-radius: 100%;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
.spinner .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.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;
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
\ No newline at end of file
src/service/api.js
View file @ 4c293573
const url={}
url.login = '/api/y/customer/passport/sign'
url.login = `${process.env.API_URL}y/customer/passport/sign`
url.wsUrl = "http://imdev.chenzhen.shop:9093/"
// url.wsUrl = process.env.WX_ADDRESS
url.getTransferList = `${process.env.API_URL}o/customer/transfer`
url.toTreansfer = `${process.env.API_URL}o/customer/transfer`
url.closeTake = `${process.env.API_URL}o/customerConversation/finish`
// url.wsUrl = process.env.API_URL
export default url
\ No newline at end of file
src/service/chart.js 0 → 100644
View file @ 4c293573
import apiUrl from './api.js'
import request from '@/utils/request'
const getTransfer = (param)=>{
return request({
url: apiUrl.getTransferList,
method: 'get',
params: param
})
}
const toTrensfer = (param)=>{
return request({
url: apiUrl.toTreansfer,
method: 'post',
data: param
})
}
const closeSession = (param)=>{
return request({
url: apiUrl.closeTake,
method: 'put',
data: param
})
}
export default {
getTransfer,
toTrensfer,
closeSession
}
\ No newline at end of file
src/service/index.js
View file @ 4c293573
import apiUrl from './api.js'
import request from '@/utils/request'
export const login = (param)=>{
import chart from './chart'
const login = (param)=>{
return request({
url: apiUrl.login,
method: 'post',
data: param
})
}
export {
login,
chart
}
\ No newline at end of file
src/store/modules/user.js
View file @ 4c293573
......@@ -5,6 +5,7 @@ import { compare } from '@/utils/tools'
import { setToken, getToken, emojis } from '@/utils/auth'
import { panelStatus } from '@/utils/common'
import Vue from 'vue'
let isSend = false;
const now = new Date();
const user = {
state: {
......@@ -41,6 +42,10 @@ const user = {
state.whichPane = value
}
},
SET_CHARTING_LIST(state,value){
state.chatlist = value.reverse(compare('queryData'))
state.chartings =value.reverse(compare('queryData'))
},
CHANGE_ISSELECTMORE(state,value){
state.isSelectMore = value
},
......@@ -62,7 +67,8 @@ const user = {
id: value[i].id,
user: {
name: value[i].userBo.nickname,
img: value[i].userBo.avatar
img: value[i].userBo.avatar,
id:value[i].userBo.userId
},
page: 1,
rows: 30,
......@@ -86,7 +92,8 @@ const user = {
id: value[i].id,
user: {
name: value[i].userBo.nickname,
img: value[i].userBo.avatar
img: value[i].userBo.avatar,
id:value[i].userBo.userId
},
page: 1,
rows: 30,
......@@ -168,34 +175,50 @@ const user = {
connected({ state, commit }) {
state.wsObject
.on('messages/message', (data, callback) => {
if(isSend){
isSend = false
}else{
commit('SEND_MESSAGE', [data])
callback()
}
})
.on('conversations/index', (data, callback) => {
console.log(data)
commit('SET_CHART_LIST', data)
})
.on('conversations/friend', (data, callback) => {
console.log(data)
})
.on('messages/index', (data, callback) => {
console.log(45454545454545454)
if(isSend){
isSend = false
}else{
commit('CHANGE_ISSELECTMORE',false)
callback(true)
data&&commit('ADD_MESSAGE', data)
!data&&state.messagesPage--
}
})
.on('conversations/show', (data, callback) => {
const tempChatlist = state.tempChatlist
for(let j in tempChatlist){
if(tempChatlist[j].id==data.id){
let tempMessages = [...tempChatlist[j].messages]
tempChatlist[j] = data
tempChatlist[j].messages= tempMessages
let { tempChatlist, userInfo: { customerId } } = state
if(data!=null&&data.userBo.primaryBindCustomerId!= customerId){
let temp = null
let isNew = true
const { chartings } = state
for(let i in state.chatlist){
if(state.chatlist[i].id == data.id){
temp = Object.assign(state.chatlist[i])
isNew = false
state.chatlist.splice(i, 1);
}
}
if(isNew){
let list = [data].concat(tempChatlist)
commit('SET_CHART_LIST', list)
}else{
let list = [temp].concat(state.chatlist)
commit('SET_CHARTING_LIST', list)
}
}
commit('SET_CHART_LIST', tempChatlist)
})
.on('conversions/search', (data, callback) => {
callback()
......@@ -238,7 +261,6 @@ const user = {
}
}
}
commit('SELECT_SEESION', conversation)
},
selectMessage({ commit, state }, message){
......@@ -289,21 +311,93 @@ const user = {
conversationId:conversation.id,
type: conversation.type,
isSend:1,
imageUrl: conversation.imageUrl,
content: conversation.content,
createTime: Date.parse(new Date())
}
isSend=true
commit('SEND_MESSAGE', [temp])
},
search: ({ commit }, value) => {
setTimeout(() => {
commit('search', value)
}, 100)
getTranster({ commit, state }, prams){
let { chartings, selectId, userInfo: { customerId } } = state
let customerdeId =null
for(let tob of chartings){
if(tob.id==selectId){
customerdeId = tob.user.id
}
}
return new Promise((resolve, reject) => {
service.chart.getTransfer({
userId:customerdeId,
customerId
}).then(response=>{
if(response.code==200){
resolve(response.data)
}else{
reject(response)
}
}).catch(error => {
reject(error)
})
})
},
// selectSession: ({ commit }, value) => commit('selectSession', value),
selectFriend: ({ commit }, value) => commit('selectFriend', value),
// sendMessage: ({ commit }, msg) => commit('sendMessage', msg),
send: ({ commit }) => commit('send'),
initData: ({ commit }) => commit('initData')
toTranster({ commit, state }, prams){
let { chartings, chatlist, selectId, userInfo: { customerId } } = state
let tempUserId =null
for(let tob of chartings){
if(tob.id==selectId){
tempUserId = tob.user.id
}
}
prams.userId = tempUserId
prams.fromCustomerId = customerId
return new Promise((resolve, reject) => {
service.chart.toTrensfer(prams).then(response=>{
if(response.code==200){
resolve(response.data)
for(let i in chatlist){
if(chatlist[i].id == selectId){
chatlist.splice(i, 1);
}
}
commit('SET_CHARTING_LIST', chatlist)
}else{
reject(response)
}
}).catch(error => {
reject(error)
})
})
},
closeTake({ commit, state }, prams){
let { chartings, chatlist, selectId, userInfo: { customerId } } = state
let customerdeId =null
for(let tob of chartings){
if(tob.id==selectId){
customerdeId = tob.user.id
}
}
return new Promise((resolve, reject) => {
service.chart.closeSession({
userId:customerdeId,
customerId
}).then(response=>{
if(response.code==200){
resolve(response.data)
for(let i in chatlist){
if(chatlist[i].id == selectId){
chatlist.splice(i, 1);
}
}
commit('SET_CHARTING_LIST', chatlist)
}else{
reject(response)
}
}).catch(error => {
reject(error)
})
})
}
}
}
export default user
\ No newline at end of file
src/utils/request.js
View file @ 4c293573
......@@ -31,6 +31,9 @@ service.interceptors.response.use(
* code为非20000是抛错 可结合自己业务进行修改
*/
// const res = response.data
if(response.data.code != 200){
Message.error(response.data.message);
}
return response.data
// if (res.code !== 20000) {
// Message({
......
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