Skip to content

H
h5-watch
Commit 7118399f by suwenbiao
Options

表情聊天

parents 1d858492 b69c1c89
Showing with 152 additions and 83 deletions
components/chat/chat.vue
...@@ -9,7 +9,18 @@ ...@@ -9,7 +9,18 @@
<span class="ml-1">{{item.sendName}}</span> <span class="ml-1">{{item.sendName}}</span>
</view> </view>
<view class="content"> <view class="content">
<span class="text">{{item.text}}</span> <span class="text" v-html="getdata(item.text)"></span>
</view>
<view class="gift_view" v-if="item.type==3">
<view v-if="item.text.notifyType == 5">
{{gsnickname(item.text.nickName)}}给主播送出了{{item.text.giftName}}
</view>
<view v-if="item.text.notifyType == 2">
{{gsnickname(item.text.nickName)}}给主播打赏了{{item.text.amount}}元
</view>
<view v-if="item.text == 'enter'">
欢迎 {{gsnickname(item.sendName)}} 进入直播间
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -56,6 +67,13 @@ ...@@ -56,6 +67,13 @@
}) })
} }
}, },
//昵称格式化
gsnickname(val) {
var msgname = val
msgname = msgname.replace(/\d{8,}/g, "*")
msgname = msgname.length > 8 ? msgname.substring(0, 8) + "..." : msgname
return msgname
},
//返回底部 //返回底部
go_bottom() { go_bottom() {
var scr_msg = document.querySelector('.chat') var scr_msg = document.querySelector('.chat')
...@@ -64,6 +82,10 @@ ...@@ -64,6 +82,10 @@
}) })
this.auto_bottom = true this.auto_bottom = true
}, },
getdata(text) {
text = text.replace(/&lt;/g, '<').replace(/&gt;/g, '/>')
return text
},
//监听上滑 //监听上滑
handleScroll(e) { handleScroll(e) {
var scr_msg = document.querySelector('.chat') var scr_msg = document.querySelector('.chat')
...@@ -82,7 +104,13 @@ ...@@ -82,7 +104,13 @@
.ml-1 { .ml-1 {
margin-left: 10rpx; margin-left: 10rpx;
} }
.gift_view{
color: red;
font-size: 28rpx;
text-align: left;
width: 80%;
margin: 20rpx auto;
}
.font-14 { .font-14 {
font-size: 28rpx; font-size: 28rpx;
} }
...@@ -111,13 +139,15 @@ ...@@ -111,13 +139,15 @@
} }
.content { .content {
line-height: 80rpx; line-height: 60rpx;
margin-left: 80rpx; margin-left: 80rpx;
.text { .text {
display: inline-block; display: inline-block;
border-radius: 10rpx; border-radius: 10rpx;
padding: 0 24rpx; max-width: 80%;
word-wrap: break-word;
padding: 10rpx 24rpx;
box-shadow: 5rpx 5rpx 10rpx #dedede; box-shadow: 5rpx 5rpx 10rpx #dedede;
} }
} }
...@@ -135,7 +165,8 @@ ...@@ -135,7 +165,8 @@
border-radius: 30rpx 0 0 30rpx; border-radius: 30rpx 0 0 30rpx;
padding: 10rpx; padding: 10rpx;
font-size: 28rpx; font-size: 28rpx;
img{
img {
width: 28rpx; width: 28rpx;
vertical-align: middle; vertical-align: middle;
height: 28rpx; height: 28rpx;
......
components/footer/footer.vue
<template> <template>
<view class="content"> <view class="footer">
<image v-show="!inputFalg" src="../../static/images/biaoqing.png" mode="widthFix" <view class="content">
style="width: 68rpx;margin: 0 20rpx 0 0;"> <!-- 表情 -->
</image> <image v-show="!inputFalg && !faceFalg" src="../../static/images/biaoqing.png" mode="widthFix"
<view class="input"> style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="faceFalg = true">
<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" </image>
confirm-type="send" @confirm="send" @keyup.enter="send"> <image v-show="!inputFalg && faceFalg" src="../../static/images/jianpan.png" mode="widthFix"
</u--input> style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="jp_click">
</view> </image>
<!-- <u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" touchend.prevent="send"> <!-- 输入框 -->
</u-button> --> <view class="input">
<button class="btn_send" text="发送" v-show="!inputFalg" @touchend.prevent="send"> <!-- <input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;border-radius: 40rpx;max-height: 192rpx;word-wrap: break-word;
发送</button> width: 69%;"
<view class="icon" v-show="inputFalg"> type="text" placeholder="说点什么吧..." v-model="value" @focus="inputFocus"
<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx" mode="widthFix" @blur="" confirm-type="send" @confirm="send" @keyup.enter="send" id="inputdata" :focus="false">
@click="iconbtn(item.title)"></image> </input> -->
<u--textarea autoHeight
style="background-color: #d9d9d9;padding-left:20rpx;border-radius: 40rpx;width: 90%;max-height: 150rpx;overflow-y: scroll;"
type="text" placeholder="说点什么吧..." v-model="value" @focus="inputFocus"
@blur="inputblur" confirm-type="send" @confirm="send" @keyup.enter="send" id="inputdata" :focus="false">
</u--textarea>
</view>
<!-- <u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" touchend.prevent="send">
</u-button> -->
<!-- 发送 -->
<button class="btn_send" text="发送" v-show="!inputFalg" @touchend.prevent="send">
发送</button>
<!-- icon按钮 -->
<view class="icon" v-show="inputFalg">
<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx"
mode="widthFix" @click="iconbtn(item.title)"></image>
</view>
<!-- 右侧icon按钮 -->
<view class="icon-right" v-show="inputFalg">
<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url"
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
</view>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="foucsinput"
@specialShow="specialShow"></component>
</view> </view>
<view class="icon-right" v-show="inputFalg"> <!-- 表情框 -->
<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url" <view v-show="faceFalg" class="face_view" :style="exc_style" @touchend.prevent>
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image> <view v-for="(item, index) in 29">
<img :src="facelist['smiley_' + (index + 1)]"
style="width: 24px;height: 24px; float: left;margin-left: 20px;margin-top: 20px;"
@touchend.prevent="sendFace(index + 1)" />
</view>
</view> </view>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"
@specialShow="specialShow"></component>
<view class="exepress"></view>
</view> </view>
</template> </template>
<script> <script>
...@@ -36,7 +61,7 @@ ...@@ -36,7 +61,7 @@
import reward from "./reward/reward.vue"; import reward from "./reward/reward.vue";
import shoplist from "./shopList/shoplist.vue" import shoplist from "./shopList/shoplist.vue"
import msg from "@/components/chat/chat.vue" import msg from "@/components/chat/chat.vue"
import face from "@/until/face.js"
export default { export default {
...@@ -54,10 +79,14 @@ ...@@ -54,10 +79,14 @@
}, },
data() { data() {
return { return {
faceFalg: false,
inputFalg: true, inputFalg: true,
currentTabComponent: '', currentTabComponent: '',
show: false, show: false,
foucsinput:false,
value: '', value: '',
facelist: face.face,
exc_style: {},
imageList: [{ imageList: [{
title: "商城", title: "商城",
url: "../../static/images/shopCart.png" url: "../../static/images/shopCart.png"
...@@ -100,6 +129,11 @@ ...@@ -100,6 +129,11 @@
}; };
}, },
methods: { methods: {
jp_click(){
this.faceFalg = false
this.foucsinput = true
},
//提交输入 //提交输入
send() { send() {
var obj = { var obj = {
...@@ -113,11 +147,15 @@ ...@@ -113,11 +147,15 @@
inputFocus() { inputFocus() {
this.inputFalg = false this.inputFalg = false
uni.onKeyboardHeightChange(res => { uni.onKeyboardHeightChange(res => {
this.bqheight = res.height * 2 this.exc_style = {
"height": res.height + "rpx"
}
console.log(res.height)
}) })
}, },
inputblur() { inputblur() {
this.inputFalg = true this.inputFalg = true
this.faceFalg = false
}, },
// 图标按钮点击事件 // 图标按钮点击事件
iconbtn(title) { iconbtn(title) {
...@@ -154,8 +192,11 @@ ...@@ -154,8 +192,11 @@
// 点击发送特效 // 点击发送特效
specialShow(url) { specialShow(url) {
this.$emit("specialShow", url) this.$emit("specialShow", url)
} },
sendFace(e) {
var sendText = this.value + "[s" + e + "]"
this.value = sendText
},
} }
} }
</script> </script>
...@@ -165,19 +206,19 @@ ...@@ -165,19 +206,19 @@
position: absolute; position: absolute;
} }
.exepress {
height: 200rpx; .footer {
background-color: #19be6b; padding: 10rpx 0;
} }
.content { .content {
box-sizing: border-box;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 40rpx; padding: 0 40rpx;
.input { .input {
// width: 294rpx;
flex: 1; flex: 1;
} }
...@@ -197,7 +238,7 @@ ...@@ -197,7 +238,7 @@
text-align: right; text-align: right;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 20rpx; margin-left: 20rpx;
} }
.icon-right { .icon-right {
...@@ -212,4 +253,9 @@ ...@@ -212,4 +253,9 @@
} }
} }
} }
.face_view {
height: 400rpx;
overflow-y: scroll;
}
</style> </style>
components/footer/gift/gift.vue
...@@ -79,8 +79,11 @@ ...@@ -79,8 +79,11 @@
}, },
send(index, i) { send(index, i) {
if (this.currentIndex != index + i.toString()) return; if (this.currentIndex != index + i.toString()) return;
this.onClose() console.log(this.datalist[index][i]);
this.$emit("specialShow", this.datalist[index][i].giftPicUrl) if(this.datalist[index][i].giftPrice == 0){
this.onClose()
this.$emit("specialShow", this.datalist[index][i].giftPicUrl)
}
}, },
} }
} }
......
components/footer/reward/reward.vue
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
pay_reward() { pay_reward() {
this.$api.createwxorder(this.value,'').then(res => { this.$api.createwxorder(this.value,'').then(res => {
console.log(res); console.log(res);
if (res.data.data.url) { if (res.data.data) {
var num = res.data.data.orderNum var num = res.data.data.orderNum
var parms = res.data.data.url var parms = res.data.data.url
var jWeixin = require('jweixin-module') var jWeixin = require('jweixin-module')
......
components/tabs/courseware/courseware.vue
<template> <template>
<view> <view class="flex a-center j-center box">
{{text}} <u-empty v-if="showFalg" mode="data" text="内容为空">
</u-empty>
</view> </view>
</template> </template>
...@@ -9,38 +10,32 @@ ...@@ -9,38 +10,32 @@
name: "courseware", name: "courseware",
props: ["tabType"], props: ["tabType"],
mounted() { mounted() {
switch (this.tabType) { this.tabsif(this.tabType)
case 2:
this.text = "课件页面"
break;
case 3:
this.text = "视频页面"
break;
case 4:
this.text = "问答页面"
break;
case 5:
this.text = "讲师评价"
break;
case 7:
this.text = "外部链接"
break;
case 9:
this.text = "图文编辑"
break;
default:
this.text = "自定义页面"
break;
}
}, },
watch: { watch: {
tabType: function(newValue, oldValue){ tabType: function(newValue, oldValue) {
switch (newValue) { this.tabsif(newValue)
}
},
data() {
return {
showFalg:true,
videoList:[]
};
},
methods: {
// 列表判断
tabsif(value) {
switch (value) {
case 2: case 2:
this.text = "课件页面" this.text = "课件页面"
break; break;
case 3: case 3:
this.text = "视频页面" this.$api.getroombindvideos().then(res => {
if(res.data.code == 200){
this.videoList = this.data.data
}
})
break; break;
case 4: case 4:
this.text = "问答页面" this.text = "问答页面"
...@@ -59,15 +54,12 @@ ...@@ -59,15 +54,12 @@
break; break;
} }
} }
},
data() {
return {
text: ""
};
} }
} }
</script> </script>
<style> <style lang="scss" scoped>
.box{
height: calc(100vh - 500rpx);
}
</style> </style>
pages/index/index.vue
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</view> </view>
<tabs @skipComponent="skip"></tabs> <tabs @skipComponent="skip"></tabs>
<!-- 聊天 --> <!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special" :msgList="msgList"></component> <component :is="currentTabComponent" :specialUrl="special" :msgList="msgList" :tabType="type"></component>
<!-- 底部 --> <!-- 底部 -->
<view class="footer" v-show="currentTabComponent == 'chat'"> <view class="footer" >
<foot @specialShow="specialShow" @sendmsg="sendmsg"></foot> <foot @specialShow="specialShow" @sendmsg="sendmsg" v-show="currentTabComponent == 'chat'"></foot>
</view> </view>
</view> </view>
</template> </template>
...@@ -285,15 +285,12 @@ ...@@ -285,15 +285,12 @@
} }
.footer { .footer {
height: 88rpx;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
display: flex;
background-color: white; background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada; box-shadow: 0 -2rpx 30rpx #dadada;
;
} }
#playerback { #playerback {
......
static/images/biaoqing.png
static/images/biaoqing.png

4.53 KB | W: | H:

static/images/biaoqing.png

2.39 KB | W: | H:

static/images/biaoqing.png
static/images/biaoqing.png
static/images/biaoqing.png
static/images/biaoqing.png
  • 2-up
  • Swipe
  • Onion skin
until/face.js
...@@ -35,7 +35,7 @@ var replace_em = function(str) { ...@@ -35,7 +35,7 @@ var replace_em = function(str) {
str = str.replace(/\>/g, '&gt;'); str = str.replace(/\>/g, '&gt;');
str = str.replace(/\n/g, ''); str = str.replace(/\n/g, '');
str = str.replace(/\[s([0-9]*)\]/g, function(word) { str = str.replace(/\[s([0-9]*)\]/g, function(word) {
var hm = '<img src="'+expr_lib_obj['smiley_'+word.replace(/[^0-9]/ig,"")]+'" style="width:30px;height:30px;"/>'; var hm = '<img src="'+expr_lib_obj['smiley_'+word.replace(/[^0-9]/ig,"")]+'" style="width:28px;height:28px;vertical-align: middle;"/>';
return hm; return hm;
}); });
return str; return str;
......
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