Skip to content

H
h5-watch
Commit 6ba3955f by suwenbiao
Options

聊天相关

parent 47bee02a
Showing with 182 additions and 15 deletions
components/chat/chat.vue
......@@ -2,7 +2,7 @@
<view class="box font-14">
<!-- 特效礼物 -->
<special :url="specialUrl"></special>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="false" :scroll-top="scrollTop">
<view class="chat">
<view class="cavasation my-2" v-for="(item,index) in msgList" :key="index">
<view class="person">
<u-avatar :src="item.avatar" size="60"></u-avatar>
......@@ -12,7 +12,11 @@
<span class="text">{{item.text}}</span>
</view>
</view>
</scroll-view>
</view>
<view class="btn_gobottom" v-if="!auto_bottom" @click="go_bottom">
<img src="../../static/images/go_bottom.png" alt="">
返回底部
</view>
</view>
</template>
......@@ -24,20 +28,52 @@
special
},
props: {
specialUrl:String,
msgList:Array,
// scrollTop: String,
specialUrl: String,
msgList: Array,
},
data() {
return {
scrollFalg: false,
scrollTop: 0,
auto_bottom: true,
}
},
created() {
watch: {
msgList() {
this.scroll_msg()
}
},
mounted() {
document.querySelector('.chat').addEventListener('scroll', this.handleScroll)
},
methods: {
//滚动窗口
scroll_msg() {
var scr_msg = document.querySelector('.chat')
if (this.auto_bottom) {
this.$nextTick(() => {
scr_msg.scrollTo(0, scr_msg.scrollHeight)
})
}
},
//返回底部
go_bottom() {
var scr_msg = document.querySelector('.chat')
this.$nextTick(() => {
scr_msg.scrollTo(0, scr_msg.scrollHeight)
})
this.auto_bottom = true
},
//监听上滑
handleScroll(e) {
var scr_msg = document.querySelector('.chat')
if (scr_msg.scrollTop < scr_msg.scrollHeight - 430) {
this.auto_bottom = false
}
if (scr_msg.scrollTop > scr_msg.scrollHeight - 430) {
this.auto_bottom = true
}
}
}
}
</script>
......@@ -67,6 +103,8 @@
padding-bottom: 100rpx;
letter-spacing: 2rpx;
margin-left: 30rpx;
overflow-y: scroll;
.person {
display: flex;
align-items: center;
......@@ -84,4 +122,24 @@
}
}
}
.chat::-webkit-scrollbar {
width: 0rpx;
}
.btn_gobottom {
position: fixed;
top: 64%;
right: 0rpx;
background-color: #FAFAFA;
border-radius: 30rpx 0 0 30rpx;
padding: 10rpx;
font-size: 28rpx;
img{
width: 28rpx;
vertical-align: middle;
height: 28rpx;
margin-right: 10rpx;
}
}
</style>
components/footer/footer.vue
<template>
<view class="content">
<image v-show="!inputFalg" src="../../static/images/IM.png" mode="widthFix"
<image v-show="!inputFalg" src="../../static/images/biaoqing.png" mode="widthFix"
style="width: 68rpx;margin: 0 20rpx 0 0;">
</image>
<view class="input">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none"
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur"
confirmType="send" confirm="send">
confirm-type="send" @confirm="send" @keyup.enter="send">
</u--input>
</view>
<!-- <u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" touchend.prevent="send">
......@@ -111,8 +111,11 @@
// 输入框聚焦事件
inputFocus() {
this.inputFalg = false
uni.onKeyboardHeightChange(res => {
console.log(res.height)
})
},
inputblur() {
inputblur() {是
this.inputFalg = true
},
// 图标按钮点击事件
......
pages/index/index.vue
......@@ -43,8 +43,8 @@
currentTabComponent: 'chat',
special: "",
msgList: [],
scrollTop:0,
type:""
scrollTop: 0,
type: ""
}
},
created() {
......@@ -59,7 +59,7 @@
this.send(val)
},
skip(value) {
console.log(value,3)
console.log(value, 3)
this.currentTabComponent = value.id
this.type = value.type
},
......@@ -90,7 +90,113 @@
Live.login(function() {
console.log('登录成功', JSON.stringify(Live.getLoginUser()))
uni.setStorageSync("user_account", Live.getLoginUser().account)
Live.onMsg(function(msg) {
console.log(msg);
if (msg.type == 1) {
if (msg.extra) {
msg.extra = JSON.parse(msg.extra);
if (msg.extra) {
// role发送者角色 2-主播 3-助理 4-观众
if (msg.extra.role == undefined) {
msg.extra.role = 4
}
//观众头像
// if (!msg.extra.headUrl) {
// msg.extra.headUrl = '';
// }
}
}
msg.msgType = 1;
//解析欧畅云网页观看端发送的表情
msg.text = face.replaceEm(msg.text);
if (msg.text.indexOf('<img') != -1) {
msg.msgType = 3;
}
try {
console.log(JSON.parse(msg.text));
//解析欧畅云主播端发送的图片
var text = JSON.parse(msg.text);
if (text.notifyType == 11) {
msg.msgType = 2;
msg.original = text.original;
msg.thumb = text.thumb;
}
} catch (e) {}
if (msg.extra.isDirty != 1) {
msg.sendName = msg.sendName.replace(/\d{8,}/g,
"*")
msg.sendName = msg.sendName.length > 8 ? msg
.sendName.substring(0, 8) + "..." : msg
.sendName
that.msgList.push(msg)
}
} else if (msg.type == 3) {
//通知消息
if (msg.text == 'enter') {
msg.sendName = msg.sendName.replace(/\d{8,}/g,
"*")
msg.sendName = msg.sendName.length > 8 ? msg
.sendName.substring(0, 8) + "..." : msg
.sendName
that.msgList.push(msg)
} else {
var notify = JSON.parse(decodeURIComponent(msg
.text));
//签到
if (notify.notifyType == 12) {
console.log(notify);
that.qd_info = notify
that.show_qd = true
that.qd_type = 0
that.qd_count = notify.timer
that.qd_time = setInterval(() => {
if (that.qd_count == 0) {
that.show_qd = false
clearInterval(that.qd_time)
}
--that.qd_count;
}, 1000);
}
//礼物
if (notify.notifyType == 5) {
that.tx_list.push(notify.giftPicUrl)
var msg1 = {
type: 3,
sendTime: new Date().getTime(),
extra: {
headUrl: that.headUrl,
},
sendName: that.name_type == 0 ?
localStorage.getItem(
'user_name') : localStorage
.getItem('user_name1'),
text: notify
}
that.msgList.push(msg1)
}
//打赏
if (notify.notifyType == 2) {
var msg2 = {
type: 3,
sendTime: new Date().getTime(),
extra: {
headUrl: that.headUrl,
},
sendName: that.name_type == 0 ?
localStorage.getItem(
'user_name') : localStorage
.getItem('user_name1'),
text: notify
}
that.msgList.push(msg2)
}
}
}
})
})
})
}
})
......
unpackage/dist/build/h5/index.html
......@@ -2,4 +2,4 @@
.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script src=https://static.oclive.cn/live.player_commons_5.2.js></script><link rel=stylesheet href=https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css><link href=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css rel=stylesheet><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js></script><script src=//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js charset=utf-8></script><script src=//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js charset=utf-8></script></head><body><div id=app></div><script src=/static/js/chunk-vendors.eceae362.js></script><script src=/static/js/index.18949ebb.js></script></body></html>
\ No newline at end of file
(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script src=https://static.oclive.cn/live.player_commons_5.2.js></script><link rel=stylesheet href=https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css><link href=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css rel=stylesheet><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js></script><script src=//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js charset=utf-8></script><script src=//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js charset=utf-8></script></head><body><div id=app></div><script src=/static/js/chunk-vendors.eceae362.js></script><script src=/static/js/index.0be919bd.js></script></body></html>
\ No newline at end of file
unpackage/dist/build/h5/static/js/pages-index-index.57d2b7b3.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/pages-index-index.c8bdf3d5.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
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