<template>
|
<view>
|
<view class="">
|
<view class="content" v-if="contentData.length > 0">
|
<template v-for="(item, index) in contentData">
|
<view class="cView" v-if="userInfo && item.userid == userInfo.id">
|
<view class="cView-c">
|
<image src="/static/imgs/rsj.png" class="r-icon"></image>
|
{{item.content}}
|
</view>
|
<image class="avatar" v-if="userInfo" :src="$baseUrl + userInfo.avatar" mode=""></image>
|
</view>
|
|
<view class="uView" v-else>
|
<image class="avatar" src="/static/imgs/logo.png" mode=""></image>
|
<view class="uView-c">
|
<image src="/static/imgs/rsj.png" class="r-icon"></image>
|
{{item.content}}
|
</view>
|
</view>
|
</template>
|
</view>
|
</view>
|
<view class="sendView">
|
<input type="text" v-model="content" confirm-type="send" placeholder="请输入内容" @confirm="sendMessage" />
|
<view class="" @tap="sendMessageBtn">发送</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
contentData: [],
|
content: '',
|
userInfo: null,
|
lastId: 0,
|
intervalId: null,
|
}
|
},
|
onShow() {
|
this.getUserInfo()
|
},
|
onLoad () {
|
this.getCustomer()
|
},
|
onHide() {
|
clearInterval(this.intervalId)
|
},
|
onReady() {
|
this.scrollToBottom()
|
},
|
//监听返回直接返回到我的
|
onBackPress(options) {
|
clearInterval(this.intervalId)
|
},
|
methods: {
|
startInterval(){
|
this.intervalId = setInterval(() => {
|
console.log('计时器')
|
this.$util.sendMsg('Customer/getCustomerServe', {lastId: this.lastId, userid: this.userInfo.id}).then(res => {
|
if(res.code == 1) {
|
for(let i in res.data){
|
this.contentData.push(res.data[i])
|
}
|
this.lastId = this.contentData[this.contentData.length - 1].id
|
this.scrollToBottom()
|
}
|
})
|
}, 5000)
|
},
|
getCustomer () {
|
let t = this
|
t.$util.post('Customer/getCustomer').then(res => {
|
t.contentData = res.data
|
if(res.code == 1) {
|
t.lastId = this.contentData[res.data.length - 1].id
|
} else {
|
t.lastId = 0
|
}
|
this.scrollToBottom()
|
this.startInterval()
|
})
|
},
|
getUserInfo () {
|
let t = this
|
t.$util.post('User/getUser').then(res => {
|
t.userInfo = res.data
|
})
|
},
|
sendMessage (e) {
|
this.content = e.detail.value
|
if(this.content != ''){
|
let conData = {
|
userid: this.userInfo.id,
|
avatar: this.userInfo.avatar,
|
content: this.content,
|
}
|
this.sendMessageServer(this.content)
|
this.content = ''
|
this.contentData.push(conData)
|
this.scrollToBottom()
|
}
|
},
|
sendMessageServer(){
|
if(this.content != ''){
|
this.$util.sendMsg('Customer/sendMessageServer', {content: this.content}).then(res => {
|
console.log(res)
|
this.lastId = res.data.lastId
|
console.log(this.lastId)
|
})
|
}
|
},
|
sendMessageBtn() {
|
if(this.content != ''){
|
let conData = {
|
userid: this.userInfo.id,
|
avatar: this.userInfo.avatar,
|
content: this.content,
|
}
|
this.sendMessageServer()
|
this.content = ''
|
this.contentData.push(conData)
|
this.scrollToBottom()
|
}
|
},
|
scrollToBottom() {
|
const query = uni.createSelectorQuery();
|
query.select('.content').boundingClientRect();
|
query.exec(res => {
|
if (res[0]) {
|
uni.pageScrollTo({
|
scrollTop: res[0].height, // 或者使用 res[0].bottom 来获取容器底部位置
|
duration: 0 // 立即滚动到指定位置
|
});
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@import url(/static/css/customer.css);
|
</style>
|
