319 lines
7.4 KiB
Vue
319 lines
7.4 KiB
Vue
<template>
|
|
<view class="msgbox">
|
|
<!-- <view class="quick" :style="[{ background: quick ? '#fff' : 'none' }]">
|
|
<view class="justify-between section_7" v-if="quick">
|
|
<view class="flex-row">
|
|
<view class="flex-col items-center text-wrapper_2">
|
|
<text class="text">交换信息</text>
|
|
</view>
|
|
<view class="flex-col items-end text-wrapper_3">
|
|
<text class="text">交换联系方式</text>
|
|
</view>
|
|
</view>
|
|
<image
|
|
@click="quick = false"
|
|
src="/static/common/img/msgclose.png"
|
|
class="image_13"
|
|
/>
|
|
</view>
|
|
<view style="display: flex; justify-content: flex-end" v-else>
|
|
<image
|
|
style="margin: 0.08rem; width: 0.2rem; height: 0.2rem"
|
|
@click="quick = true"
|
|
src="/static/common/img/msgopen.png"
|
|
class="image_13"
|
|
/>
|
|
</view>
|
|
</view> -->
|
|
<view class="flex-row section_1">
|
|
<text class="text" v-if="!isCommonWords" @click="CommonWords = !CommonWords;emoji = false;">常用语</text>
|
|
|
|
<view class="input-container">
|
|
<image @click="emoji = !emoji;CommonWords = false;emojicurrent = 0;" src="/static/common/img/homepage/icon-message.png" class="input-icon" />
|
|
<u-input class="input" :type="'textarea'" v-model="message" :auto-height="true" @click="shuru"
|
|
@blur="inputBlur" @focus="inputFocus" :placeholder='placeholder'/>
|
|
</view>
|
|
<!-- <u-input class="input" :type="'textarea'" v-model="message" :auto-height="true" @click="shuru"
|
|
@blur="inputBlur" @focus="inputFocus" :placeholder='placeholder'/> -->
|
|
<!-- <view class="icon" @click="emoji = !emoji;CommonWords = false;emojicurrent = 0;">
|
|
<image src="/static/common/img/icon.png" class="image" />
|
|
</view> -->
|
|
<view class="btn" v-if="message != ''">
|
|
<!-- <u-button size="mini" class="sendOut" @click="send">发送</u-button> -->
|
|
<image
|
|
src="/static/common/img/homepage/icon-send.png"
|
|
class="image_send"
|
|
@click="send"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 常用语 -->
|
|
<view class="CommonWords">
|
|
<scroll-view scroll-y="true" style="transition: all 0.3s; height: 0rem" :class="CommonWords ? 'open' : ''">
|
|
<text v-for="(v, i) in commonWords" :key="i" @click="choice(v)">{{v}}</text>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- emoji 表情 -->
|
|
<swiper class="slider" :current="emojicurrent" :class="emoji ? 'emojishow' : ''">
|
|
<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji"
|
|
:class="[key == emojiData.length - 1 ? 'lastbox' : '']">
|
|
<text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)"
|
|
class="slider-emoji-icon">{{ emoji }}</text>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import emoji from "../static/common/js/emoji";
|
|
export default {
|
|
name: "messageBox",
|
|
props:['isCommonWords'],
|
|
data() {
|
|
return {
|
|
commonWords: [
|
|
'您好，很高兴认识你！',
|
|
'您好，有空聊一聊吗？',
|
|
'嗨，你好呀！',
|
|
'好的，我知道了。',
|
|
'我们下次再聊，拜拜。'
|
|
],
|
|
CommonWords: false,
|
|
quick: false,
|
|
message: "",
|
|
emojiData: [],
|
|
emoji: false,
|
|
inputShow: false,
|
|
emojicurrent: 0,
|
|
placeholder:"",
|
|
};
|
|
},
|
|
// props:['placeholder'],
|
|
mounted() {
|
|
// console.log(this.placeholder)
|
|
this.emojiInit();
|
|
},
|
|
created(){
|
|
// console.log(this.placeholder)
|
|
},
|
|
methods: {
|
|
outbox() {
|
|
alert("out");
|
|
},
|
|
emojiInit() {
|
|
var number = 60;
|
|
var page = Math.ceil(emoji.length / number);
|
|
for (let i = 0; i < page; i++) {
|
|
this.emojiData[i] = [];
|
|
for (let k = 0; k < number; k++) {
|
|
emoji[i * number + k] ?
|
|
this.emojiData[i].push(emoji[i * number + k]) :
|
|
"";
|
|
}
|
|
}
|
|
},
|
|
inputFocus() {
|
|
this.CommonWords = false;
|
|
this.emoji = false;
|
|
setTimeout(() => {
|
|
this.scrollTop += 1;
|
|
}, 100);
|
|
// console.log("inputFocus");
|
|
},
|
|
inputBlur() {
|
|
// console.log("inputBlur");
|
|
},
|
|
shuru() {
|
|
setTimeout(() => {
|
|
this.scrollTop += 1;
|
|
}, 100);
|
|
},
|
|
choice(txt) {
|
|
this.message = txt;
|
|
},
|
|
close() {
|
|
this.CommonWords = false;
|
|
this.emoji = false;
|
|
},
|
|
sendOut() {
|
|
this.close();
|
|
},
|
|
selemoji(m) {
|
|
this.message += m;
|
|
},
|
|
send(){
|
|
this.$emit('onsend',this.message)
|
|
this.message = ""
|
|
this.$emit('onmsgShow',false)
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.msgbox {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
.section_1 {
|
|
width: 100%;
|
|
display: flex;
|
|
// height: 0.52rem;
|
|
background-color: #ffffff;
|
|
border: solid 0.01rem #eeeeee;
|
|
padding: 0.11rem 0.1rem 0.11rem 0.1rem;
|
|
}
|
|
|
|
.text {
|
|
font-size: 0.14rem;
|
|
line-height: 0.15rem;
|
|
color: #505051;
|
|
margin: 0 0.1rem;
|
|
line-height: 0.36rem;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
min-height: 0.36rem !important;
|
|
line-height: 0.36rem;
|
|
background-color: #f7f7f7;
|
|
border-radius: 0.1rem;
|
|
font-size: 0.14rem;
|
|
padding-right: 0.1rem !important;
|
|
|
|
::v-deep .u-input__input {
|
|
padding: 0.05rem;
|
|
min-height: 0.16rem !important;
|
|
transform: translateY(0.03rem);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 0.05rem;
|
|
padding: 0.03rem 0;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.03rem 0;
|
|
|
|
.sendOut {
|
|
height: 0.3rem;
|
|
line-height: 0.3rem;
|
|
width: 0.5rem;
|
|
margin-left: 0.05rem;
|
|
background-color: #2e9bff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.image_send {
|
|
width: 0.25rem;
|
|
height: 0.25rem;
|
|
margin-left: 0.05rem;
|
|
transform: translateY(0.03rem);
|
|
}
|
|
}
|
|
|
|
.image {
|
|
width: 0.26rem;
|
|
height: 0.26rem;
|
|
}
|
|
|
|
.CommonWords {
|
|
width: 100%;
|
|
background-color: #f6f7fa;
|
|
|
|
text {
|
|
transition: all 0.3s;
|
|
display: block;
|
|
padding: 0.1rem 0 0.1rem 0.2rem;
|
|
font-size: 0.14rem;
|
|
line-height: 0.2rem;
|
|
height: 0.4rem;
|
|
overflow: hidden;
|
|
color: #505051;
|
|
}
|
|
|
|
text:active {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
|
|
.open {
|
|
height: 3rem !important;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.input-container{
|
|
position: relative;
|
|
// width: 90%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
|
|
.input-icon {
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
position: absolute;
|
|
left: 0.1rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
min-height: 0.36rem !important;
|
|
line-height: 0.36rem;
|
|
// background-color: #f7f7f7;
|
|
border-radius: 0.1rem;
|
|
font-size: 0.14rem;
|
|
padding-right: 0.1rem !important;
|
|
padding-left: 0.35rem !important; /* 为左侧图标留出空间 */
|
|
|
|
::v-deep .u-input__input {
|
|
padding: 0.05rem;
|
|
min-height: 0.16rem !important;
|
|
transform: translateY(0.03rem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.emojishow {
|
|
height: 3rem !important;
|
|
}
|
|
|
|
.slider {
|
|
background: #fff;
|
|
width: 7.75rem;
|
|
height: 0rem;
|
|
transition: all 0.3s;
|
|
|
|
.slider-emoji {
|
|
overflow-y: scroll;
|
|
width: 100vw !important;
|
|
}
|
|
|
|
&-emoji {
|
|
width: 6.75rem;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
&-icon {
|
|
font-size: 0.265rem;
|
|
display: inline-block;
|
|
width: 0.4rem;
|
|
text-align: center;
|
|
padding: 0.05rem 0;
|
|
border-radius: 0.1rem;
|
|
// border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
&-icon:active {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
</style>
|