Skip to content

H
h5-watch
Commit b69c1c89 by liuliufashi
Options

添加表情框

parent 6ba3955f
Showing with 84 additions and 77 deletions
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" src="../../static/images/biaoqing.png" mode="widthFix"
<view class="input"> style="width: 68rpx;margin: 0 20rpx 0 0;" @click="faceFalg = true">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none" </image>
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur" <!-- 输入框 -->
confirm-type="send" @confirm="send" @keyup.enter="send"> <view class="input">
</u--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> </view>
<!-- <u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" touchend.prevent="send"> <!-- 表情框 -->
</u-button> --> <view v-show="faceFalg" style="border: 1px solid red; height: 250rpx;"></view>
<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> </view>
</template> </template>
<script> <script>
...@@ -37,8 +46,8 @@ ...@@ -37,8 +46,8 @@
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"
export default { export default {
name: "foot", name: "foot",
components: { components: {
...@@ -50,10 +59,11 @@ ...@@ -50,10 +59,11 @@
shoplist shoplist
}, },
created() { created() {
}, },
data() { data() {
return { return {
faceFalg:false,
inputFalg: true, inputFalg: true,
currentTabComponent: '', currentTabComponent: '',
show: false, show: false,
...@@ -99,23 +109,27 @@ ...@@ -99,23 +109,27 @@
}; };
}, },
methods: { methods: {
// 选择表情
changeFace(){
this.faceFalg = true;
},
//提交输入 //提交输入
send() { send() {
var obj = { var obj = {
type: 1, type: 1,
sendText: this.value sendText: this.value
} }
this.$emit("sendmsg",obj) this.$emit("sendmsg", obj)
this.value = "" this.value = ""
}, },
// 输入框聚焦事件 // 输入框聚焦事件
inputFocus() { inputFocus() {
this.inputFalg = false this.inputFalg = false
uni.onKeyboardHeightChange(res => { uni.onKeyboardHeightChange(res => {
console.log(res.height) console.log(res.height)
}) })
}, },
inputblur() {是 inputblur() {
this.inputFalg = true this.inputFalg = true
}, },
// 图标按钮点击事件 // 图标按钮点击事件
...@@ -162,18 +176,21 @@ ...@@ -162,18 +176,21 @@
.absolute { .absolute {
position: absolute; position: absolute;
} }
.footer {
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;
} }
.btn_send{
.btn_send {
margin: 0 0 0 20rpx; margin: 0 0 0 20rpx;
width: 20%; width: 20%;
height: 70%; height: 70%;
...@@ -183,12 +200,13 @@ ...@@ -183,12 +200,13 @@
color: #fff; color: #fff;
outline: none; outline: none;
} }
.icon { .icon {
flex: 1; flex: 1;
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 {
......
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 {
......
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