delete chat 8.15 #212
@ -1,544 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
|
||||
<!-- 背景图- 定位方式 -->
|
||||
<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: imgHeight }"></image>
|
||||
<view class="content-box-loading" v-if="!loading"><u-loading mode="flower"></u-loading></view>
|
||||
<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`">
|
||||
<view class="message-item " :class="item.isItMe ? 'right' : 'left'">
|
||||
<image class="img" :src="item.fromUserHeadImg" mode="" @tap="linkToBusinessCard(item.fromUserId)"></image>
|
||||
<!-- contentType = 1 文本 -->
|
||||
<view class="content" v-if="item.contentType == 1">{{ item.content }}</view>
|
||||
<!-- contentType = 2 语音 -->
|
||||
<view
|
||||
class="content contentType2"
|
||||
:class="[{ 'content-type-right': item.isItMe }]"
|
||||
v-if="item.contentType == 2"
|
||||
@tap="handleAudio(item)"
|
||||
hover-class="contentType2-hover-class"
|
||||
:style="{width:`${130+(item.contentDuration*2)}rpx`}"
|
||||
>
|
||||
<view
|
||||
class="voice_icon"
|
||||
:class="[
|
||||
{ voice_icon_right: item.isItMe },
|
||||
{ voice_icon_left: !item.isItMe },
|
||||
{ voice_icon_right_an: item.anmitionPlay && item.isItMe },
|
||||
{ voice_icon_left_an: item.anmitionPlay && !item.isItMe }
|
||||
]"
|
||||
></view>
|
||||
<view class="">{{ item.contentDuration }}''</view>
|
||||
</view>
|
||||
<!-- contentType = 3 图片 -->
|
||||
<view
|
||||
class="content contentType3"
|
||||
v-if="item.contentType == 3"
|
||||
@tap="viewImg([item.content])"
|
||||
>
|
||||
<image :src="item.content" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部聊天输入框 -->
|
||||
<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }">
|
||||
<view class="input-box-flex">
|
||||
<!-- #ifndef H5 -->
|
||||
<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/pageD/voice.png')" @click="switchChatType('keyboard')"></image>
|
||||
<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/pageD/keyboard.png')" @click="switchChatType('voice')"></image>
|
||||
<!-- #endif -->
|
||||
<view class="input-box-flex-grow">
|
||||
<input
|
||||
v-if="chatType === 'voice'"
|
||||
type="text"
|
||||
class="content"
|
||||
id="input"
|
||||
v-model="formData.content"
|
||||
:hold-keyboard="true"
|
||||
:confirm-type="'send'"
|
||||
:confirm-hold="true"
|
||||
placeholder-style="color:#DDDDDD;"
|
||||
:cursor-spacing="10"
|
||||
@confirm="sendMsg(null)"
|
||||
/>
|
||||
<view
|
||||
class="voice_title"
|
||||
v-if="chatType === 'keyboard'"
|
||||
:style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }"
|
||||
@touchstart.stop.prevent="startVoice"
|
||||
@touchmove.stop.prevent="moveVoice"
|
||||
@touchend.stop="endVoice"
|
||||
@touchcancel.stop="cancelVoice"
|
||||
>
|
||||
{{ voiceTitle }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能性按钮 -->
|
||||
<image class=" icon_btn_add" :src="require('@/static/pageD/add.png')" @tap="switchFun"></image>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg(null)">发送</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
|
||||
<u-grid :col="4" hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
|
||||
<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#eaeaea">
|
||||
<u-icon :name="item.icon" :size="52"></u-icon>
|
||||
<view class="grid-text">{{ item.title }}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- //语音动画 -->
|
||||
<view class="voice_an" v-if="recording">
|
||||
<view class="voice_an_icon">
|
||||
<view id="one" class="wave"></view>
|
||||
<view id="two" class="wave"></view>
|
||||
<view id="three" class="wave"></view>
|
||||
<view id="four" class="wave"></view>
|
||||
<view id="five" class="wave"></view>
|
||||
<view id="six" class="wave"></view>
|
||||
<view id="seven" class="wave"></view>
|
||||
</view>
|
||||
<view class="text">{{voiceIconText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fromUserInfo: {},
|
||||
formData: {
|
||||
content: '',
|
||||
limit: 15,
|
||||
index: 1
|
||||
},
|
||||
messageList: [],
|
||||
loading: true, //标识是否正在获取数据
|
||||
imgHeight: '1000px',
|
||||
mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
|
||||
chatType:"voice", // 图标类型 'voice'语音 'keyboard'键盘
|
||||
voiceTitle: '按住 说话',
|
||||
Recorder: uni.getRecorderManager(),
|
||||
Audio: uni.createInnerAudioContext(),
|
||||
recording: false, //标识是否正在录音
|
||||
isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
|
||||
voiceInterval:null,
|
||||
voiceTime:0, //总共录音时长
|
||||
canSend:true, //是否可以发送
|
||||
PointY:0, //坐标位置
|
||||
voiceIconText:"正在录音...",
|
||||
showFunBtn:false, //是否展示功能型按钮
|
||||
AudioExam:null, //正在播放音频的实例
|
||||
funList: [
|
||||
{ icon:"photo-fill",title:"照片",uploadType:["album"] },
|
||||
{ icon:"camera-fill",title:"拍摄",uploadType:["camera"] },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//拼接消息 处理滚动
|
||||
async joinData() {
|
||||
if (!this.loading) {
|
||||
//如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
|
||||
return;
|
||||
}
|
||||
this.loading = false;
|
||||
const data = await this.getMessageData();
|
||||
//获取节点信息
|
||||
const { index } = this.formData;
|
||||
const sel = `#msg-${index > 1 ? this.messageList[0].hasBeenSentId : data[data.length - 1].hasBeenSentId}`;
|
||||
this.messageList = [...data, ...this.messageList];
|
||||
//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化
|
||||
this.$nextTick(() => {
|
||||
this.bindScroll(sel);
|
||||
//如果还有数据
|
||||
if (this.formData.limit >= data.length) {
|
||||
this.formData.index++;
|
||||
setTimeout(() => {
|
||||
this.loading = true;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
//处理滚动
|
||||
bindScroll(sel, duration = 0) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(sel)
|
||||
.boundingClientRect(data => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: data && data.top - 40,
|
||||
duration
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
//获取消息
|
||||
getMessageData() {
|
||||
let getData = () => {
|
||||
let arr = [];
|
||||
let startIndex = (this.formData.index - 1) * this.formData.limit;
|
||||
let endIndex = startIndex + this.formData.limit;
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
const isItMe = Math.random() > 0.5 ? true : false;
|
||||
arr.unshift({
|
||||
hasBeenSentId: i, //已发送过去消息的id
|
||||
content: `很高兴认识你，这是第${i + 1}条消息。`,
|
||||
fromUserHeadImg: isItMe ? this._user_info.headImg : this.fromUserInfo.fromUserHeadImg, //用户头像
|
||||
fromUserId: isItMe ? this._user_info.id : this.fromUserInfo.fromUserId,
|
||||
isItMe, //true此条信息是我发送的 false别人发送的
|
||||
createTime: Date.now(),
|
||||
contentType: 1, // 1文字文本 2语音
|
||||
anmitionPlay: false //标识音频是否在播放
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
return new Promise((resolve, reject) => {
|
||||
const data = getData();
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
//切换语音或者键盘方式
|
||||
switchChatType(type) {
|
||||
this.chatType = type;
|
||||
this.showFunBtn =false;
|
||||
},
|
||||
//切换功能性按钮
|
||||
switchFun(){
|
||||
this.chatType = 'keyboard'
|
||||
this.showFunBtn = !this.showFunBtn;
|
||||
uni.hideKeyboard()
|
||||
},
|
||||
//发送消息
|
||||
sendMsg(data) {
|
||||
const params = {
|
||||
hasBeenSentId: Date.now(), //已发送过去消息的id
|
||||
content: this.formData.content,
|
||||
fromUserHeadImg: this._user_info.headImg, //用户头像
|
||||
fromUserId: this._user_info.id,
|
||||
isItMe: true, //true此条信息是我发送的 false别人发送的
|
||||
createTime: Date.now(),
|
||||
contentType: 1
|
||||
};
|
||||
|
||||
if (data) {
|
||||
if(data.contentType == 2){
|
||||
//说明是发送语音
|
||||
params.content = data.content;
|
||||
params.contentType = data.contentType;
|
||||
params.contentDuration = data.contentDuration;
|
||||
params.anmitionPlay = false;
|
||||
}else if(data.contentType == 3){
|
||||
//发送图片
|
||||
params.content = data.content;
|
||||
params.contentType = data.contentType;
|
||||
}
|
||||
} else if (!this.$u.trim(this.formData.content)) {
|
||||
//验证输入框书否为空字符传
|
||||
return;
|
||||
}
|
||||
|
||||
this.messageList.push(params);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.formData.content = '';
|
||||
// #ifdef MP-WEIXIN
|
||||
if(params.contentType == 1){
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 99999,
|
||||
duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
|
||||
});
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 99999,
|
||||
duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
|
||||
});
|
||||
},150)
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 99999,
|
||||
duration: 100
|
||||
});
|
||||
// #endif
|
||||
|
||||
if(this.showFunBtn){
|
||||
this.showFunBtn = false;
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (params.contentType == 1) {
|
||||
this.mpInputMargin = true;
|
||||
}
|
||||
// #endif
|
||||
//h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
|
||||
// #ifdef H5
|
||||
uni.hideKeyboard();
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
//用户触摸屏幕的时候隐藏键盘
|
||||
touchstart() {
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
// userid 用户id
|
||||
linkToBusinessCard(userId) {
|
||||
this.$u.route({
|
||||
url: 'pages/businessCard/businessCard',
|
||||
params: {
|
||||
userId
|
||||
}
|
||||
});
|
||||
},
|
||||
//准备开始录音
|
||||
startVoice(e) {
|
||||
if(!this.Audio.paused){
|
||||
//如果音频正在播放 先暂停。
|
||||
this.stopAudio(this.AudioExam)
|
||||
}
|
||||
this.recording = true;
|
||||
this.isStopVoice = false;
|
||||
this.canSend = true;
|
||||
this.voiceIconText = "正在录音..."
|
||||
this.PointY = e.touches[0].clientY;
|
||||
this.Recorder.start({
|
||||
format: 'mp3'
|
||||
});
|
||||
},
|
||||
//录音已经开始
|
||||
beginVoice(){
|
||||
if (this.isStopVoice) {
|
||||
this.Recorder.stop();
|
||||
return;
|
||||
}
|
||||
this.voiceTitle = '松开 结束'
|
||||
this.voiceInterval = setInterval(()=>{
|
||||
this.voiceTime ++;
|
||||
},1000)
|
||||
},
|
||||
//move 正在录音中
|
||||
moveVoice(e){
|
||||
const PointY = e.touches[0].clientY
|
||||
const slideY = this.PointY - PointY;
|
||||
if(slideY > uni.upx2px(120)){
|
||||
this.canSend = false;
|
||||
this.voiceIconText = '松开手指 取消发送 '
|
||||
}else if(slideY > uni.upx2px(60)){
|
||||
this.canSend = true;
|
||||
this.voiceIconText = '手指上滑 取消发送 '
|
||||
}else{
|
||||
this.voiceIconText = '正在录音... '
|
||||
}
|
||||
},
|
||||
//结束录音
|
||||
endVoice() {
|
||||
this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
|
||||
this.Recorder.stop();
|
||||
this.voiceTitle = '按住 说话'
|
||||
},
|
||||
//录音被打断
|
||||
cancelVoice(e){
|
||||
this.voiceTime = 0;
|
||||
this.voiceTitle = '按住 说话';
|
||||
this.canSend = false;
|
||||
this.Recorder.stop();
|
||||
},
|
||||
//处理录音文件
|
||||
handleRecorder({ tempFilePath,duration }) {
|
||||
let contentDuration;
|
||||
// #ifdef MP-WEIXIN
|
||||
this.voiceTime = 0;
|
||||
if (duration < 600) {
|
||||
this.voiceIconText="说话时间过短";
|
||||
setTimeout(()=>{
|
||||
this.recording = false;
|
||||
},200)
|
||||
return;
|
||||
}
|
||||
contentDuration = duration/1000;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
contentDuration = this.voiceTime +1;
|
||||
this.voiceTime = 0;
|
||||
if(contentDuration <= 0) {
|
||||
this.voiceIconText="说话时间过短";
|
||||
setTimeout(()=>{
|
||||
this.recording = false;
|
||||
},200)
|
||||
return;
|
||||
};
|
||||
// #endif
|
||||
|
||||
this.recording = false;
|
||||
const params = {
|
||||
contentType: 2,
|
||||
content: tempFilePath,
|
||||
contentDuration: Math.ceil(contentDuration)
|
||||
};
|
||||
this.canSend && this.sendMsg(params);
|
||||
},
|
||||
//控制播放还是暂停音频文件
|
||||
handleAudio(item) {
|
||||
this.AudioExam = item;
|
||||
this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
|
||||
},
|
||||
//播放音频
|
||||
playAudio(item) {
|
||||
this.Audio.src = item.content;
|
||||
this.Audio.hasBeenSentId = item.hasBeenSentId;
|
||||
this.Audio.play();
|
||||
item.anmitionPlay = true;
|
||||
},
|
||||
//停止音频
|
||||
stopAudio(item) {
|
||||
item.anmitionPlay = false;
|
||||
this.Audio.src = '';
|
||||
this.Audio.stop();
|
||||
},
|
||||
//关闭动画
|
||||
closeAnmition() {
|
||||
const hasBeenSentId = this.Audio.hasBeenSentId;
|
||||
const item = this.messageList.find(it => it.hasBeenSentId == hasBeenSentId);
|
||||
item.anmitionPlay = false;
|
||||
},
|
||||
//点击宫格时触发
|
||||
clickGrid(index){
|
||||
if(index == 0){
|
||||
this.chooseImage(['album'])
|
||||
}else if(index == 1){
|
||||
this.chooseImage(['camera'])
|
||||
}
|
||||
},
|
||||
//发送图片
|
||||
chooseImage(sourceType){
|
||||
uni.chooseImage({
|
||||
sourceType,
|
||||
sizeType:['compressed'],
|
||||
success:res=>{
|
||||
this.showFunBtn = false;
|
||||
for(let i = 0;i<res.tempFilePaths.length;i++){
|
||||
const params = {
|
||||
contentType: 3,
|
||||
content: res.tempFilePaths[i],
|
||||
};
|
||||
this.sendMsg(params)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//查看大图
|
||||
viewImg(imgList){
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
// #ifndef MP-WEIXIN
|
||||
indicator: 'number'
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop < 50) {
|
||||
this.joinData();
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap({ index }) {
|
||||
if (index == 0) {
|
||||
//用户详情 设置
|
||||
} else if (index == 1) {
|
||||
//返回按钮
|
||||
this.$u.route({
|
||||
type: 'switchTab',
|
||||
url: 'pages/home/home'
|
||||
});
|
||||
}
|
||||
},
|
||||
//返回按钮事件
|
||||
onBackPress(e) {
|
||||
//以下内容对h5不生效
|
||||
//--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
|
||||
this.$u.route({
|
||||
type: 'switchTab',
|
||||
url: 'pages/home/home'
|
||||
});
|
||||
return true;
|
||||
},
|
||||
onLoad(info) {
|
||||
// { messageId,fromUserName,fromUserHeadImg } = info
|
||||
const userInfo = this.firendList.filter(item => item.userId == info.fromUserId)[0];
|
||||
console.log(userInfo)
|
||||
this.fromUserInfo = {
|
||||
fromUserName: userInfo.userName,
|
||||
fromUserHeadImg: userInfo.headImg,
|
||||
fromUserId: 4,
|
||||
messageId: 2
|
||||
};
|
||||
|
||||
//录音开始事件
|
||||
this.Recorder.onStart(e => {
|
||||
|
||||
this.beginVoice();
|
||||
});
|
||||
//录音结束事件
|
||||
this.Recorder.onStop(res => {
|
||||
clearInterval(this.voiceInterval);
|
||||
this.handleRecorder(res);
|
||||
});
|
||||
|
||||
//音频停止事件
|
||||
this.Audio.onStop(e => {
|
||||
this.closeAnmition();
|
||||
});
|
||||
|
||||
//音频播放结束事件
|
||||
this.Audio.onEnded(e => {
|
||||
this.closeAnmition();
|
||||
});
|
||||
},
|
||||
onReady() {
|
||||
//自定义返回按钮 因为原生的返回按钮不可阻止默认事件
|
||||
// #ifdef H5
|
||||
const icon = document.getElementsByClassName('uni-page-head-btn')[0];
|
||||
icon.style.display = 'none';
|
||||
// #endif
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.fromUserInfo.fromUserName
|
||||
});
|
||||
this.joinData();
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.imgHeight = res.windowHeight + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
uni.onKeyboardHeightChange(res => {
|
||||
if (res.height == 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.mpInputMargin = false;
|
||||
// #endif
|
||||
}else{
|
||||
this.showFunBtn = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
@ -1,354 +0,0 @@
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.content {
|
||||
&-showfn{
|
||||
padding-bottom: 0rpx;
|
||||
padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
|
||||
/* #ifdef MP-WEIXIN */
|
||||
/* #endif */
|
||||
}
|
||||
&-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
padding-bottom: 120rpx;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-bottom: 0rpx;
|
||||
margin-bottom: constant(safe-area-inset-bottom);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-bottom: 0rpx;
|
||||
padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
|
||||
/* #endif */
|
||||
|
||||
&-bg {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
bottom: 0;
|
||||
bottom: constant(safe-area-inset-bottom);
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
/* #ifndef MP-WEIXIN */
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&-loading {
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 13rpx 20rpx;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
max-width: 500rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
// 语音
|
||||
.contentType2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.voice_icon {
|
||||
height: 34rpx;
|
||||
width: 34rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.voice_icon_right {
|
||||
background-image: url(../../static/voice-left-3.png);
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.voice_icon_left {
|
||||
background-image: url(../../static/voice-right-3.png);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.voice_icon_right_an {
|
||||
animation: voiceAn_right 1s linear alternate infinite;
|
||||
}
|
||||
.voice_icon_left_an {
|
||||
animation: voiceAn_left 1s linear alternate infinite;
|
||||
}
|
||||
@keyframes voiceAn_right {
|
||||
0% {
|
||||
background-image: url(../../static/voice-left-1.png);
|
||||
}
|
||||
50% {
|
||||
background-image: url(../../static/voice-left-2.png);
|
||||
}
|
||||
100% {
|
||||
background-image: url(../../static/voice-left-3.png);
|
||||
}
|
||||
}
|
||||
@keyframes voiceAn_left {
|
||||
0% {
|
||||
background-image: url(../../static/voice-right-1.png);
|
||||
}
|
||||
50% {
|
||||
background-image: url(../../static/voice-right-2.png);
|
||||
}
|
||||
100% {
|
||||
background-image: url(../../static/voice-right-3.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//图片
|
||||
.contentType3{
|
||||
padding: 0;
|
||||
border-radius: 2rpx;
|
||||
background-color: transparent !important;
|
||||
.img{
|
||||
width: 200rpx;
|
||||
height: auto;
|
||||
max-width: 300rpx;
|
||||
max-height: 400rpx;
|
||||
}
|
||||
}
|
||||
.contentType3::after{
|
||||
border: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
.content-type-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&.right {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.content {
|
||||
background-color: $uni-color-success;
|
||||
margin-right: 28rpx;
|
||||
word-break: break-all;
|
||||
line-height: 36rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10rpx solid transparent;
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-left: 16rpx solid $uni-color-success;
|
||||
position: absolute;
|
||||
right: -16rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
.content {
|
||||
background-color: $uni-text-color-inverse;
|
||||
margin-left: 28rpx;
|
||||
word-break: break-all;
|
||||
line-height: 36rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10rpx solid transparent;
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-right: 16rpx solid $uni-text-color-inverse;
|
||||
position: absolute;
|
||||
left: -16rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
z-index: 999;
|
||||
background-color: #eaeaea;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-bottom: 0rpx;
|
||||
margin-bottom: constant(safe-area-inset-bottom);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-bottom: 0rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
|
||||
&-flex {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
image{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.icon_img {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.icon_btn_add{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
&-grow {
|
||||
flex-grow: 1;
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
caret-color: $uni-color-success;
|
||||
}
|
||||
|
||||
.voice_title {
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 20rpx;
|
||||
background-color: $u-type-success;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fun-box{
|
||||
opacity: 0;
|
||||
transition: all 0.1s ease-in-out;
|
||||
height: 0;
|
||||
.grid-text{
|
||||
padding-top: 10rpx;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
|
||||
}
|
||||
.show-fun-box{
|
||||
opacity: 1;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box-mpInputMargin {
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-bottom: 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.voice_an{
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-55%);
|
||||
background-color: rgba(41,41,41,0.7);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
.text{
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
@keyframes runVoice{
|
||||
0%{
|
||||
height: 10%;
|
||||
}
|
||||
20%{
|
||||
height: 50%;
|
||||
}
|
||||
50%{
|
||||
height: 100%;
|
||||
}
|
||||
80%{
|
||||
height: 50%;
|
||||
}
|
||||
100%{
|
||||
height: 0%;
|
||||
}
|
||||
}
|
||||
.wave{
|
||||
width:6rpx;
|
||||
height: 100%;
|
||||
margin-left: 10rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #999;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.voice_an_icon{
|
||||
width: 200rpx;
|
||||
height: 100rpx;
|
||||
line-height: 50rpx;
|
||||
margin: 50rpx 0;
|
||||
}
|
||||
.voice_an_icon #one{
|
||||
animation:runVoice 0.6s infinite 0.1s;
|
||||
}
|
||||
.voice_an_icon #two{
|
||||
animation:runVoice 0.6s infinite 0.3s;
|
||||
}
|
||||
.voice_an_icon #three{
|
||||
animation:runVoice 0.6s infinite 0.6s;
|
||||
}
|
||||
.voice_an_icon #four{
|
||||
animation:runVoice 0.6s infinite 0.1s;
|
||||
}
|
||||
.voice_an_icon #five{
|
||||
animation:runVoice 0.6s infinite 0.3s;
|
||||
}
|
||||
.voice_an_icon #six{
|
||||
animation:runVoice 0.6s infinite 0.6s;
|
||||
}
|
||||
.voice_an_icon #seven{
|
||||
animation:runVoice 0.6s infinite 0.1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -222,7 +222,6 @@
|
||||
import zhiboItem from "@/components/index/zhibo-item/index"
|
||||
import indexad from "@/components/index/ad/index"
|
||||
import darenItem from "@/components/index/daren-item/index"
|
||||
import chatVue from '../../pageD/chat/chat.vue'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user