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 @@
<span class="ml-1">{{item.sendName}}</span>
</view>
<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>
......@@ -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() {
var scr_msg = document.querySelector('.chat')
......@@ -64,6 +82,10 @@
})
this.auto_bottom = true
},
getdata(text) {
text = text.replace(/&lt;/g, '<').replace(/&gt;/g, '/>')
return text
},
//监听上滑
handleScroll(e) {
var scr_msg = document.querySelector('.chat')
......@@ -82,7 +104,13 @@
.ml-1 {
margin-left: 10rpx;
}
.gift_view{
color: red;
font-size: 28rpx;
text-align: left;
width: 80%;
margin: 20rpx auto;
}
.font-14 {
font-size: 28rpx;
}
......@@ -111,13 +139,15 @@
}
.content {
line-height: 80rpx;
line-height: 60rpx;
margin-left: 80rpx;
.text {
display: inline-block;
border-radius: 10rpx;
padding: 0 24rpx;
max-width: 80%;
word-wrap: break-word;
padding: 10rpx 24rpx;
box-shadow: 5rpx 5rpx 10rpx #dedede;
}
}
......@@ -135,7 +165,8 @@
border-radius: 30rpx 0 0 30rpx;
padding: 10rpx;
font-size: 28rpx;
img{
img {
width: 28rpx;
vertical-align: middle;
height: 28rpx;
......
components/footer/footer.vue
<template>
<view class="content">
<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"
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">
</u-button> -->
<button class="btn_send" text="发送" v-show="!inputFalg" @touchend.prevent="send">
发送</button>
<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 class="footer">
<view class="content">
<!-- 表情 -->
<image v-show="!inputFalg && !faceFalg" src="../../static/images/biaoqing.png" mode="widthFix"
style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="faceFalg = true">
</image>
<image v-show="!inputFalg && faceFalg" src="../../static/images/jianpan.png" mode="widthFix"
style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="jp_click">
</image>
<!-- 输入框 -->
<view class="input">
<!-- <input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;border-radius: 40rpx;max-height: 192rpx;word-wrap: break-word;
width: 69%;"
type="text" placeholder="说点什么吧..." v-model="value" @focus="inputFocus"
@blur="" confirm-type="send" @confirm="send" @keyup.enter="send" id="inputdata" :focus="false">
</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 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 v-show="faceFalg" class="face_view" :style="exc_style" @touchend.prevent>
<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>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"
@specialShow="specialShow"></component>
<view class="exepress"></view>
</view>
</template>
<script>
......@@ -36,7 +61,7 @@
import reward from "./reward/reward.vue";
import shoplist from "./shopList/shoplist.vue"
import msg from "@/components/chat/chat.vue"
import face from "@/until/face.js"
export default {
......@@ -54,10 +79,14 @@
},
data() {
return {
faceFalg: false,
inputFalg: true,
currentTabComponent: '',
show: false,
foucsinput:false,
value: '',
facelist: face.face,
exc_style: {},
imageList: [{
title: "商城",
url: "../../static/images/shopCart.png"
......@@ -100,6 +129,11 @@
};
},
methods: {
jp_click(){
this.faceFalg = false
this.foucsinput = true
},
//提交输入
send() {
var obj = {
......@@ -113,11 +147,15 @@
inputFocus() {
this.inputFalg = false
uni.onKeyboardHeightChange(res => {
this.bqheight = res.height * 2
this.exc_style = {
"height": res.height + "rpx"
}
console.log(res.height)
})
},
inputblur() {
this.inputFalg = true
this.faceFalg = false
},
// 图标按钮点击事件
iconbtn(title) {
......@@ -154,8 +192,11 @@
// 点击发送特效
specialShow(url) {
this.$emit("specialShow", url)
}
},
sendFace(e) {
var sendText = this.value + "[s" + e + "]"
this.value = sendText
},
}
}
</script>
......@@ -165,19 +206,19 @@
position: absolute;
}
.exepress {
height: 200rpx;
background-color: #19be6b;
.footer {
padding: 10rpx 0;
}
.content {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
padding: 0 40rpx;
.input {
// width: 294rpx;
flex: 1;
}
......@@ -197,7 +238,7 @@
text-align: right;
display: flex;
justify-content: space-between;
padding-left: 20rpx;
margin-left: 20rpx;
}
.icon-right {
......@@ -212,4 +253,9 @@
}
}
}
.face_view {
height: 400rpx;
overflow-y: scroll;
}
</style>
components/footer/gift/gift.vue
......@@ -79,8 +79,11 @@
},
send(index, i) {
if (this.currentIndex != index + i.toString()) return;
this.onClose()
this.$emit("specialShow", this.datalist[index][i].giftPicUrl)
console.log(this.datalist[index][i]);
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 @@
pay_reward() {
this.$api.createwxorder(this.value,'').then(res => {
console.log(res);
if (res.data.data.url) {
if (res.data.data) {
var num = res.data.data.orderNum
var parms = res.data.data.url
var jWeixin = require('jweixin-module')
......
components/tabs/courseware/courseware.vue
<template>
<view>
{{text}}
<view class="flex a-center j-center box">
<u-empty v-if="showFalg" mode="data" text="内容为空">
</u-empty>
</view>
</template>
......@@ -9,38 +10,32 @@
name: "courseware",
props: ["tabType"],
mounted() {
switch (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;
}
this.tabsif(this.tabType)
},
watch: {
tabType: function(newValue, oldValue){
switch (newValue) {
tabType: function(newValue, oldValue) {
this.tabsif(newValue)
}
},
data() {
return {
showFalg:true,
videoList:[]
};
},
methods: {
// 列表判断
tabsif(value) {
switch (value) {
case 2:
this.text = "课件页面"
break;
case 3:
this.text = "视频页面"
this.$api.getroombindvideos().then(res => {
if(res.data.code == 200){
this.videoList = this.data.data
}
})
break;
case 4:
this.text = "问答页面"
......@@ -59,15 +54,12 @@
break;
}
}
},
data() {
return {
text: ""
};
}
}
</script>
<style>
<style lang="scss" scoped>
.box{
height: calc(100vh - 500rpx);
}
</style>
pages/index/index.vue
......@@ -7,10 +7,10 @@
</view>
<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'">
<foot @specialShow="specialShow" @sendmsg="sendmsg"></foot>
<view class="footer" >
<foot @specialShow="specialShow" @sendmsg="sendmsg" v-show="currentTabComponent == 'chat'"></foot>
</view>
</view>
</template>
......@@ -285,15 +285,12 @@
}
.footer {
height: 88rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada;
;
}
#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) {
str = str.replace(/\>/g, '&gt;');
str = str.replace(/\n/g, '');
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 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