Skip to content

H
h5-watch
Commit b69c1c89 by liuliufashi
Options

添加表情框

parent 6ba3955f
master
No related merge requests found
Showing with 84 additions and 77 deletions
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 class="footer">
<view class="content">
<!-- 表情 -->
<image v-show="!inputFalg" src="../../static/images/biaoqing.png" mode="widthFix"
style="width: 68rpx;margin: 0 20rpx 0 0;" @click="faceFalg = true">
</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=""
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>
<!-- 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="show"
@specialShow="specialShow"></component>
</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>
<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="show"
@specialShow="specialShow"></component>
<!-- 表情框 -->
<view v-show="faceFalg" style="border: 1px solid red; height: 250rpx;"></view>
</view>
</template>
<script>
......@@ -37,8 +46,8 @@
import shoplist from "./shopList/shoplist.vue"
import msg from "@/components/chat/chat.vue"
export default {
name: "foot",
components: {
......@@ -50,10 +59,11 @@
shoplist
},
created() {
},
data() {
return {
faceFalg:false,
inputFalg: true,
currentTabComponent: '',
show: false,
......@@ -99,23 +109,27 @@
};
},
methods: {
// 选择表情
changeFace(){
this.faceFalg = true;
},
//提交输入
send() {
var obj = {
type: 1,
sendText: this.value
}
this.$emit("sendmsg",obj)
this.$emit("sendmsg", obj)
this.value = ""
},
// 输入框聚焦事件
inputFocus() {
this.inputFalg = false
uni.onKeyboardHeightChange(res => {
console.log(res.height)
console.log(res.height)
})
},
inputblur() {是
inputblur() {
this.inputFalg = true
},
// 图标按钮点击事件
......@@ -162,18 +176,21 @@
.absolute {
position: absolute;
}
.footer {
padding: 10rpx 0;
}
.content {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
padding: 0 40rpx;
.input {
// width: 294rpx;
flex: 1;
}
.btn_send{
.btn_send {
margin: 0 0 0 20rpx;
width: 20%;
height: 70%;
......@@ -183,12 +200,13 @@
color: #fff;
outline: none;
}
.icon {
flex: 1;
text-align: right;
display: flex;
justify-content: space-between;
padding-left: 20rpx;
margin-left: 20rpx;
}
.icon-right {
......
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 {
......
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