|
|
<template>
|
|
|
<view class="content">
|
|
|
<!-- 聊天内容 -->
|
|
|
<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView"
|
|
|
refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
|
|
|
refresher-background="#f0f0f0" @refresherpulling="onPulling"
|
|
|
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
|
|
|
<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
|
|
|
<!-- <view class="chat-ls" v-if="unshiftmsg.length==0">
|
|
|
<view class="chat-time">现在可以开始聊天了.</view>
|
|
|
</view> -->
|
|
|
|
|
|
<view class="chat-ls">
|
|
|
<view class="msg-m msg-left">
|
|
|
<view class="user-img" >
|
|
|
<image class="uimg" :src="serviceimg"></image>
|
|
|
<text class="uname">{{servicename}}</text>
|
|
|
</view>
|
|
|
<view class="message">
|
|
|
<!-- 文字 -->
|
|
|
<view class="msg-text">
|
|
|
<text>Hi，{{friendName}}，我是您的专属客服{{servicename}}，有什么问题都可以问我呦~</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="msg-m msg-left">
|
|
|
<view class="user-img" >
|
|
|
<image class="uimg" :src="serviceimg"></image>
|
|
|
<text class="uname">{{servicename}}</text>
|
|
|
</view>
|
|
|
<view class="message">
|
|
|
<!-- 文字 -->
|
|
|
<view class="msg-text">
|
|
|
<view class="txtline" v-for="(item) in msg" :id="'msg'+ item.id" @click="gotoInfo(item)">
|
|
|
<text>
|
|
|
{{item.content}}
|
|
|
</text>
|
|
|
<image style="width: 40rpx; height: 40rpx;" src="/static/image/hot.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
|
|
|
<view class="chat-time" v-if="item.fromtime != ''">{{changeTime(item.fromtime)}}</view>
|
|
|
<view class="msg-m msg-left" v-if="item.fromuser !== friendcode">
|
|
|
<view class="user-img" >
|
|
|
<image class="uimg" :src="item.headimg" @error="handleImageError($event,index)"></image>
|
|
|
<text class="uname">{{item.fromname}}</text>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'txt'">
|
|
|
<!-- 文字 -->
|
|
|
<view class="msg-text">
|
|
|
<text>{{item.content}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'image'" @tap="previewImg(item.content)">
|
|
|
<!-- 图像 -->
|
|
|
<image :src="item.content" class="msg-img" mode="widthFix"></image>
|
|
|
</view>
|
|
|
<view class="messagevideo" v-if="item.type == 'video'">
|
|
|
<!-- 视频 -->
|
|
|
<myVideo :videoUrl="item.content"></myVideo>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'audio'" @click="playVoice(item.content,item.ifaudio,index)">
|
|
|
<!-- 音频 -->
|
|
|
<view class="msg-text voice" :style="{width:item.time*40+'rpx'}">
|
|
|
<view class="voicel" v-if="item.ifaudio" >
|
|
|
<div class="bg voicePlay"></div>
|
|
|
</view>
|
|
|
<image v-else src="../../static/icon/horn.png" class="voice-img"></image>
|
|
|
{{item.time}}″
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="msg-m msg-right" v-if="item.fromuser == friendcode">
|
|
|
<view class="user-img" >
|
|
|
<image class="uimg" :src="item.headimg" @error="handleImageError($event,index)" ></image>
|
|
|
<!-- <text class="uname">我</text> -->
|
|
|
<text class="uname">{{item.fromname}}</text>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'txt'">
|
|
|
<view class="msg-text">
|
|
|
<text>{{item.content}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'image'" @tap="previewImg(item.content)">
|
|
|
<image :src="item.content" class="msg-img" mode="widthFix"></image>
|
|
|
</view>
|
|
|
<view class="messagevideo" v-if="item.type == 'video'" >
|
|
|
<!-- 视频 -->
|
|
|
<myVideo :videoUrl="item.content"></myVideo>
|
|
|
</view>
|
|
|
<view class="message" v-if="item.type == 'audio'" @click="playVoice(item.content,item.ifaudio,index)">
|
|
|
<!-- 音频 -->
|
|
|
<view class="msg-text voice" :style="{width: item.time>2? item.time*40+'rpx' :'auto'}">
|
|
|
{{item.time}}″
|
|
|
<view class="voicel" v-if="item.ifaudio" >
|
|
|
<div class="bg voicePlay"></div>
|
|
|
</view>
|
|
|
<image v-else src="../../static/icon/hornrw.png" class="voice-img"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<submit @inputs="inputs" @heights="heights"></submit>
|
|
|
<u-toast ref="uToast" />
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { myCache } from '../../utils/utils.js';
|
|
|
import dateTime from '@/common/dateTime.js';
|
|
|
import submit from '@/components/chat/submit.vue';
|
|
|
import myVideo from "@/components/myVideo.vue";
|
|
|
//音频播放
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
export default {
|
|
|
components: {
|
|
|
submit,
|
|
|
myVideo
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
text:"",
|
|
|
triggered: false,
|
|
|
friendName: "",
|
|
|
friendcode: "",
|
|
|
serviceimg: require("@/static/image/kfr.png"),
|
|
|
servicename: "伽伽",
|
|
|
info:{},// 老师信息
|
|
|
imgurl:"",// uni.$http.baseUrl,
|
|
|
iftop:true,
|
|
|
msg: [
|
|
|
{
|
|
|
id: "11",
|
|
|
content:'怎么改配送时间/地址/电话？'
|
|
|
},
|
|
|
{
|
|
|
id: "22",
|
|
|
content:'收到商品有问题怎么办？'
|
|
|
},
|
|
|
{
|
|
|
id: "33",
|
|
|
content:'我的订单什么时间配送？'
|
|
|
},
|
|
|
],
|
|
|
// 反转数据接收
|
|
|
unshiftmsg: [
|
|
|
// {
|
|
|
// fromuser: "11",
|
|
|
// fromname: "Madeline 老师 (女)",
|
|
|
// fromtime:'2025-06-20 10:00:00',
|
|
|
// headimg:require("@/static/image/i1.png"),
|
|
|
// content:'Hi，xxx，我是普拉提教练小a，周日上午10点的课您可以准时参加吧？',
|
|
|
// type:'txt'
|
|
|
// },
|
|
|
],
|
|
|
imgMsg: [],
|
|
|
scrollToView: '',
|
|
|
oldTime: new Date(),
|
|
|
inputh: '90',
|
|
|
page:{
|
|
|
pageNum:'1',
|
|
|
pageSize: '50',
|
|
|
zid:null
|
|
|
},
|
|
|
ifcatch:true,
|
|
|
loadStatus:true,
|
|
|
ifaudio:false,
|
|
|
socket: null, // WebSocket实例
|
|
|
isConnected: false, // WebSocket连接状态
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
var user= myCache("user");
|
|
|
this.friendName=user.username?user.username:"";
|
|
|
this.friendcode=user.userid?user.userid:"";
|
|
|
if(options.data){
|
|
|
console.log(options.data)
|
|
|
this.info=JSON.parse(decodeURIComponent(options.data));
|
|
|
console.log(this.info)
|
|
|
// 先获取缓存
|
|
|
this.getchatstore();
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: this.info.name,
|
|
|
});
|
|
|
// socket 接受信息
|
|
|
// this.socketinit();
|
|
|
}
|
|
|
|
|
|
},
|
|
|
onShow() {
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
this.screendo(this.unshiftmsg.length - 1);
|
|
|
},
|
|
|
onBackPress(options) {
|
|
|
if (options.from === 'backbutton') {
|
|
|
// 来自顶部菜单的返回按钮
|
|
|
// 在这里处理你的逻辑
|
|
|
console.log('返回按钮被点击');
|
|
|
this.closeWebSocket();
|
|
|
uni.onSocketClose(function (res) {
|
|
|
console.log('WebSocket 已关闭！');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
console.log('界面关闭socket，beforeDestroy');
|
|
|
// 在组件销毁前，确保关闭 WebSocket 连接
|
|
|
this.closeWebSocket();
|
|
|
},
|
|
|
//点击导航栏 buttons 时触发 添加任务
|
|
|
onNavigationBarButtonTap: async function(e) {
|
|
|
const _that = this;
|
|
|
const index = e.index;
|
|
|
if (index === 0) {
|
|
|
var data=encodeURIComponent(JSON.stringify(_that.info));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/chat/chatset?data=${data}`
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
gotoInfo(item){
|
|
|
var data=encodeURIComponent(JSON.stringify(item));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/user/serviceInfo?data=${data}`
|
|
|
});
|
|
|
},
|
|
|
handleImageError(e,index){
|
|
|
console.log(e,index);
|
|
|
this.unshiftmsg[index]["headimg"]= require("@/static/image/girl.jpg");
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
// 获取聊天缓存
|
|
|
getchatstore(){
|
|
|
var that=this;
|
|
|
try{
|
|
|
var data=myCache('chat-'+this.friendcode+'-'+this.info.id);
|
|
|
data.forEach((cell,i)=>{
|
|
|
cell["ifaudio"]=false;
|
|
|
//时间间隔处理
|
|
|
if (i < this.unshiftmsg.length - 1) {
|
|
|
//这里表示头部时间还是显示一下
|
|
|
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
|
|
|
if (t) {
|
|
|
this.oldTime = t;
|
|
|
}
|
|
|
cell.fromtime = t;
|
|
|
}
|
|
|
// 获取图片，为下面的预览做准备
|
|
|
if (cell.type == 'image') {
|
|
|
this.imgMsg.unshift(cell.content)
|
|
|
}
|
|
|
else if(cell.type=='txt'){
|
|
|
cell.content=decodeURIComponent(cell.content);
|
|
|
}
|
|
|
cell["headimg"]=require("@/static/image/girl.jpg"); //this.imgurl+'/images/'+ cell.fromuser+".jpg?id="+Math.random()*100;
|
|
|
this.unshiftmsg.push(cell);
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
setTimeout(() => {
|
|
|
that.screendo(that.unshiftmsg.length-2);
|
|
|
}, 200);
|
|
|
});
|
|
|
// 加载聊天记录
|
|
|
this.page.zid=this.info.id;
|
|
|
this.page.pageSize=that.unshiftmsg.length.toString();
|
|
|
this.getList(1);
|
|
|
}
|
|
|
catch(err){
|
|
|
console.log(err);
|
|
|
// 加载聊天记录
|
|
|
this.page.zid=this.info.id;
|
|
|
this.getList(1);
|
|
|
}
|
|
|
},
|
|
|
socketinit(){
|
|
|
var that = this;
|
|
|
if (!this.isConnected) {
|
|
|
this.socket = uni.connectSocket({
|
|
|
url: "ws://218.24.131.92:18080/websocketServer/"+that.info.id+'/'+that.friendcode,
|
|
|
// url: "ws://localhost:18080/websocketServer/"+that.info.id+'/'+that.friendcode,
|
|
|
});
|
|
|
uni.onSocketOpen(res => {
|
|
|
console.log('WebSocket连接已打开！');
|
|
|
that.isConnected = true;
|
|
|
});
|
|
|
uni.onSocketMessage(res => {
|
|
|
console.log('收到WebSocket服务器消息：', res.data);
|
|
|
if(res.data){
|
|
|
let data=JSON.parse(res.data);
|
|
|
console.log(data);
|
|
|
if(data.zid){
|
|
|
// 加入聊天框
|
|
|
if(data.type=='txt'){
|
|
|
data.content=decodeURIComponent(data.content);
|
|
|
}
|
|
|
that.unshiftmsg.push(data);
|
|
|
that.$forceUpdate();
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
that.$nextTick(function() {
|
|
|
that.scrollToView = 'msg' + (that.unshiftmsg.length);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
uni.onSocketClose(res => {
|
|
|
console.log('WebSocket连接已关闭！');
|
|
|
that.isConnected = false;
|
|
|
});
|
|
|
uni.onSocketError(err => {
|
|
|
console.error('WebSocket连接打开失败，请检查：', err);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 发送WebSocket消息
|
|
|
sendWebSocketMessage() {
|
|
|
if (this.socket && this.isConnected) {
|
|
|
uni.sendSocketMessage({
|
|
|
data: '这是一条测试消息' // 发送的消息内容
|
|
|
});
|
|
|
} else {
|
|
|
console.error('WebSocket未连接或未打开，请先连接WebSocket！');
|
|
|
}
|
|
|
},
|
|
|
// 关闭WebSocket连接
|
|
|
closeWebSocket() {
|
|
|
if (this.socket) {
|
|
|
uni.closeSocket();
|
|
|
this.socket = null;
|
|
|
this.isConnected = false;
|
|
|
}
|
|
|
},
|
|
|
// 分页加载对话
|
|
|
async getList(ii) {
|
|
|
var that=this;
|
|
|
if(this.loadStatus)
|
|
|
{
|
|
|
if(!this.ifcatch&&this.unshiftmsg.length>0){
|
|
|
// 重置当前分页页数 当前分页
|
|
|
this.page.pageNum= '2';
|
|
|
this.page.pageSize=this.unshiftmsg.length.toString();
|
|
|
}
|
|
|
const {data: res} = await uni.$http.post('/hyLtjl/getLtjlFy',this.page);
|
|
|
// console.log('分页获取',this.page)
|
|
|
this.triggered = false;
|
|
|
if(res.success){
|
|
|
if(res.data&&res.data.records&&res.data.records.length>0){
|
|
|
if(this.ifcatch){
|
|
|
this.ifcatch=false;
|
|
|
this.unshiftmsg=[];
|
|
|
this.imgMsg=[];
|
|
|
}
|
|
|
const gotonum=res.data.records.length;
|
|
|
res.data.records.forEach((cell,i)=>{
|
|
|
cell["ifaudio"]=false;
|
|
|
//时间间隔处理
|
|
|
if (i < this.unshiftmsg.length - 1) {
|
|
|
//这里表示头部时间还是显示一下
|
|
|
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
|
|
|
if (t) {
|
|
|
this.oldTime = t;
|
|
|
}
|
|
|
cell.fromtime = t;
|
|
|
}
|
|
|
|
|
|
// 获取图片，为下面的预览做准备
|
|
|
if (cell.type == 'image') {
|
|
|
// cell.content=this.imgurl+'/images/'+cell.content;
|
|
|
this.imgMsg.unshift(cell.content)
|
|
|
}
|
|
|
else if(cell.type=='txt'){
|
|
|
cell.content=decodeURIComponent(cell.content);
|
|
|
}
|
|
|
cell["headimg"]=require("@/static/image/boy.jpg") ;//this.imgurl+'/images/'+ cell.fromuser+".jpg?id="+Math.random()*100;
|
|
|
this.unshiftmsg.unshift(cell);
|
|
|
});
|
|
|
if(ii==2){
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
setTimeout(() => {
|
|
|
that.screendo(gotonum -2);
|
|
|
}, 200);
|
|
|
}
|
|
|
else{
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
setTimeout(() => {
|
|
|
that.screendo(that.unshiftmsg.length-1);
|
|
|
}, 300);
|
|
|
}
|
|
|
// 缓存聊天
|
|
|
myCache('chat-'+this.friendcode+'-'+this.info.id, this.unshiftmsg);
|
|
|
}
|
|
|
else{
|
|
|
if(this.page.pageNum=='2'){
|
|
|
this.$refs.uToast.show({
|
|
|
title: "信息已加载完毕...",
|
|
|
type: "success",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
}
|
|
|
this.loadStatus=false;
|
|
|
}
|
|
|
}
|
|
|
else{
|
|
|
this.$refs.uToast.show({
|
|
|
title: "信息加载失败...",
|
|
|
type: "error",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
else{
|
|
|
this.triggered = false;
|
|
|
this.$refs.uToast.show({
|
|
|
title: "信息已加载完毕...",
|
|
|
type: "success",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
screendo(scrindex){
|
|
|
this.scrollToView = '';
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
this.$nextTick(function() {
|
|
|
this.scrollToView = 'msg' + scrindex
|
|
|
});
|
|
|
},
|
|
|
// 自定义下拉刷新控件被下拉
|
|
|
onPulling(e) {
|
|
|
var that=this;
|
|
|
// console.log("onpulling", e);
|
|
|
if (!this.triggered) {
|
|
|
//下拉刷新，先变true再变false才能关闭
|
|
|
this.triggered = true;
|
|
|
//关掉圈圈，需要先执行完刷新操作
|
|
|
setTimeout(() => {
|
|
|
that.triggered = false;
|
|
|
}, 2000);
|
|
|
}
|
|
|
},
|
|
|
// 自定义下拉刷新被触发
|
|
|
onRefresh(event){
|
|
|
console.log("下拉加载"+event);
|
|
|
// var row={
|
|
|
// "sendName": "゛时光い",
|
|
|
// "receviceName": "xpq",
|
|
|
// "sendText": "这是第页第1条未读消息",
|
|
|
// "fromtime": "2021-12-19 12:21:58",
|
|
|
// "updateTime": null,
|
|
|
// "chatmState": 1,
|
|
|
// "type": 0,
|
|
|
// "kfed": 0
|
|
|
// };
|
|
|
// this.unshiftmsg.unshift(row);
|
|
|
// 加载聊天记录
|
|
|
this.getList(2);
|
|
|
},
|
|
|
// 自定义下拉刷新被复位
|
|
|
onRestore() {
|
|
|
this.triggered = 'restore'; // 需要重置
|
|
|
console.log("onRestore");
|
|
|
},
|
|
|
// 自定义下拉刷新被中止
|
|
|
onAbort() {
|
|
|
this.triggered = false;
|
|
|
console.log("onAbort");
|
|
|
},
|
|
|
changeTime(date) {
|
|
|
return dateTime.dateTime1(date);
|
|
|
},
|
|
|
// 进行图片的预览
|
|
|
previewImg(e) {
|
|
|
let index = 0;
|
|
|
for (let i = 0; i < this.imgMsg.length; i++) {
|
|
|
if (this.imgMsg[i] == e) {
|
|
|
index = i;
|
|
|
}
|
|
|
}
|
|
|
console.log("index", index)
|
|
|
// 预览图片
|
|
|
uni.previewImage({
|
|
|
current: index,
|
|
|
urls: this.imgMsg,
|
|
|
longPressActions: {
|
|
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
success: function(data) {
|
|
|
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
|
},
|
|
|
fail: function(err) {
|
|
|
console.log(err.errMsg);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//音频播放
|
|
|
playVoice(e,ifplay,index) {
|
|
|
var that=this;
|
|
|
// 先关闭停止所有
|
|
|
innerAudioContext.src = '';
|
|
|
innerAudioContext.stop();
|
|
|
that.unshiftmsg.forEach((cell,i)=>{
|
|
|
cell.ifaudio=false;
|
|
|
});
|
|
|
ifplay=!ifplay;
|
|
|
this.unshiftmsg[index].ifaudio=ifplay;
|
|
|
this.$forceUpdate();
|
|
|
if(ifplay){
|
|
|
innerAudioContext.src = e;
|
|
|
innerAudioContext.play(() => {
|
|
|
console.log('开始播放');
|
|
|
});
|
|
|
// 监听音频播放结束事件
|
|
|
innerAudioContext.onEnded((res) => {
|
|
|
console.log('音频播放结束');
|
|
|
that.unshiftmsg[index].ifaudio=!ifplay;
|
|
|
that.$forceUpdate();
|
|
|
// 在这里执行你想要的操作
|
|
|
});
|
|
|
// innerAudioContext.onPlay(() => {
|
|
|
// console.log('开始播放');
|
|
|
// });
|
|
|
}
|
|
|
else{
|
|
|
innerAudioContext.src = '';
|
|
|
innerAudioContext.stop();
|
|
|
}
|
|
|
},
|
|
|
//地图定位
|
|
|
covers(e) {
|
|
|
let map = [{
|
|
|
latitude: e.latitude,
|
|
|
longitude: e.longitude,
|
|
|
iconPath: '../../static/image/head.png'
|
|
|
}]
|
|
|
return (map);
|
|
|
},
|
|
|
//跳转地图信息
|
|
|
openLocation(e) {
|
|
|
uni.openLocation({
|
|
|
latitude: e.latitude,
|
|
|
longitude: e.longitude,
|
|
|
name: e.name,
|
|
|
address: e.address,
|
|
|
success: function() {
|
|
|
console.log('success');
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
fullscreenchange(e){
|
|
|
if(!e.detail.fullScreen){ // 退出全屏，锁定竖屏
|
|
|
plus.screen.lockOrientation('portrait-primary');
|
|
|
}
|
|
|
},
|
|
|
//接受输入内容
|
|
|
async inputs(e) {
|
|
|
console.log(e);
|
|
|
var rindex=this.unshiftmsg.length-1;
|
|
|
//时间间隔处理
|
|
|
let data = {
|
|
|
"fromname": this.friendName,
|
|
|
"fromuser": this.friendcode,
|
|
|
"headimg":require("@/static/image/girl.jpg"),
|
|
|
"toname": this.info.name, // 接收人
|
|
|
"touser": this.info.id, // 接收人姓名
|
|
|
"content": e.type=='audio'?e.message.voice:e.message,
|
|
|
"time": e.type=='audio'?e.message.time:0,
|
|
|
"ifaudio":false,
|
|
|
"fromtime": new Date(),
|
|
|
"zid": this.info.id,
|
|
|
"type": e.type
|
|
|
};
|
|
|
if(e.type!=='video'){
|
|
|
this.unshiftmsg.push(data);
|
|
|
rindex=this.unshiftmsg.length-1;
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
this.screendo(this.unshiftmsg.length - 1);
|
|
|
}
|
|
|
|
|
|
// 发送给服务器消息
|
|
|
var that = this;
|
|
|
if(e.type=='txt'){
|
|
|
// 文本
|
|
|
// 消息发送
|
|
|
this.onSendWS(data,rindex);
|
|
|
}
|
|
|
else if(e.type=='image'){
|
|
|
// 图片
|
|
|
// 先上传在传送消息
|
|
|
var token= uni.getStorageSync("token");
|
|
|
console.log('先上传在传送消息');
|
|
|
uni.uploadFile({
|
|
|
url: uni.$http.baseUrl+"/api/file/upload",
|
|
|
filePath: e.message,
|
|
|
name: 'file',
|
|
|
header: {
|
|
|
'token': token
|
|
|
},
|
|
|
success: res => {
|
|
|
console.log(res);
|
|
|
var rdata=JSON.parse(res.data);
|
|
|
console.log(rdata);
|
|
|
if(rdata.success){
|
|
|
var url=rdata.data&&rdata.data.length>0?rdata.data[0]:'';
|
|
|
data.content= this.imgurl+'/images/'+url;
|
|
|
console.log(data);
|
|
|
// 消息发送
|
|
|
this.onSendWS(data,rindex);
|
|
|
// 图片放入集合
|
|
|
if (e.type == 'image'&&url) {
|
|
|
this.imgMsg.push(this.imgurl+'/images/'+url);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
fail: res => {
|
|
|
console.log(res)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
else if(e.type=='audio'){
|
|
|
// 音频
|
|
|
// 先上传在传送消息
|
|
|
var token= uni.getStorageSync("token");
|
|
|
console.log('先上传在传送消息');
|
|
|
uni.uploadFile({
|
|
|
url: uni.$http.baseUrl+"/api/file/upload",
|
|
|
filePath: e.message.voice,
|
|
|
name: 'file',
|
|
|
header: {
|
|
|
'token': token
|
|
|
},
|
|
|
success: res => {
|
|
|
console.log(res);
|
|
|
var rdata=JSON.parse(res.data);
|
|
|
console.log(rdata);
|
|
|
if(rdata.success){
|
|
|
var url=rdata.data&&rdata.data.length>0?rdata.data[0]:'';
|
|
|
data.content= this.imgurl+'/images/'+url;
|
|
|
console.log(data);
|
|
|
// 消息发送
|
|
|
this.onSendWS(data,rindex);
|
|
|
}
|
|
|
},
|
|
|
fail: res => {
|
|
|
console.log(res)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
else if(e.type=='video'){
|
|
|
// 视频
|
|
|
// 先上传在传送消息
|
|
|
var token= uni.getStorageSync("token");
|
|
|
console.log('先上传在传送消息');
|
|
|
uni.uploadFile({
|
|
|
url: uni.$http.baseUrl+"/api/file/upload",
|
|
|
filePath: e.message,
|
|
|
name: 'file',
|
|
|
header: {
|
|
|
'token': token
|
|
|
},
|
|
|
success: res => {
|
|
|
console.log(res);
|
|
|
var rdata=JSON.parse(res.data);
|
|
|
console.log(rdata);
|
|
|
if(rdata.success){
|
|
|
var url=rdata.data&&rdata.data.length>0?rdata.data[0]:'';
|
|
|
data.content= this.imgurl+'/images/'+url;
|
|
|
console.log(data);
|
|
|
// 信息发送聊天框
|
|
|
this.unshiftmsg.push(data);
|
|
|
rindex=this.unshiftmsg.length-1;
|
|
|
// 跳转到最后一条数据 与前面的:id进行对照
|
|
|
this.screendo(this.unshiftmsg.length - 1);
|
|
|
// 消息发送
|
|
|
this.onSendWS(data,rindex);
|
|
|
}
|
|
|
},
|
|
|
fail: res => {
|
|
|
console.log(res)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
async onSendWS(datamsg,rindex){
|
|
|
|
|
|
var message=JSON.stringify(datamsg);
|
|
|
var msssagebf=JSON.parse(message);
|
|
|
if(msssagebf.type=='txt'){
|
|
|
msssagebf.content=encodeURIComponent(msssagebf.content);
|
|
|
}
|
|
|
message=JSON.stringify(msssagebf);
|
|
|
console.log(message);
|
|
|
var roomId = this.info.id;
|
|
|
var userId = this.friendcode;
|
|
|
var token=uni.getStorageSync("token");
|
|
|
|
|
|
var param={
|
|
|
"message":message,
|
|
|
"roomId":roomId,
|
|
|
"userId":userId,
|
|
|
"token":token
|
|
|
}
|
|
|
// 发送消息
|
|
|
const {data: res} = await uni.$http.get('/sendMessageTo',param);
|
|
|
console.log(res);
|
|
|
if(res.success){
|
|
|
if(res.data){
|
|
|
var rrdata=res.data;
|
|
|
if(rrdata.type=='txt'){
|
|
|
rrdata.content=decodeURIComponent(rrdata.content);
|
|
|
}
|
|
|
this.unshiftmsg[rindex]=rrdata;
|
|
|
this.$forceUpdate();
|
|
|
// 缓存聊天
|
|
|
myCache('chat-'+this.friendcode+'-'+this.info.id, this.unshiftmsg);
|
|
|
console.log(this.unshiftmsg);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
//输入框高度
|
|
|
heights(e) {
|
|
|
this.inputh = e;
|
|
|
this.goBottom();
|
|
|
},
|
|
|
// 滚动到底部
|
|
|
goBottom() {
|
|
|
this.scrollToView = '';
|
|
|
this.screendo(this.unshiftmsg.length - 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
height: 100%;
|
|
|
background-color: rgba(244, 244, 244, 1);
|
|
|
position: relative;
|
|
|
}
|
|
|
::v-deep .uni-noticebar{
|
|
|
margin-bottom: 0 !important;
|
|
|
padding: 10rpx 12rpx !important;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
.chat {
|
|
|
height: 100%;
|
|
|
|
|
|
.chat-main {
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 20rpx;
|
|
|
padding-top: 20rpx;
|
|
|
// padding-bottom: 120rpx; //获取动态高度
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.chat-ls {
|
|
|
.chat-time {
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(39, 40, 50, 0.3);
|
|
|
line-height: 34rpx;
|
|
|
padding: 10rpx 0rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.msg-m {
|
|
|
display: flex;
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
.user-img {
|
|
|
flex: none;
|
|
|
width: 92rpx;
|
|
|
height: 90rpx;
|
|
|
border-radius: 20rpx;
|
|
|
text-align: center;
|
|
|
.uimg{
|
|
|
width: 70rpx;
|
|
|
height: 70rpx;
|
|
|
margin: 0 auto;
|
|
|
border-radius: 35rpx;
|
|
|
}
|
|
|
.uname{
|
|
|
height: 30rpx;
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
line-height: 30rpx;
|
|
|
color: rgba(39, 40, 50, 0.5);
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
flex: none;
|
|
|
max-width: 520rpx;
|
|
|
}
|
|
|
.messagevideo {
|
|
|
max-width: 520rpx;
|
|
|
height: 300rpx;
|
|
|
}
|
|
|
.msg-text {
|
|
|
font-size: 32rpx;
|
|
|
color: rgba(39, 40, 50, 1);
|
|
|
line-height: 44rpx;
|
|
|
padding: 18rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
.msg-img {
|
|
|
max-width: 440rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
.msg-video{
|
|
|
width: 440rpx;
|
|
|
height: 300rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
.msg-map {
|
|
|
background: #fff;
|
|
|
width: 464rpx;
|
|
|
height: 284rpx;
|
|
|
overflow: hidden;
|
|
|
margin: 0 20rpx;
|
|
|
.map-name {
|
|
|
font-size: 32rpx;
|
|
|
color: rgba(39, 40, 50, 1);
|
|
|
line-height: 44rpx;
|
|
|
padding: 18rpx 24rpx 0 24rpx;
|
|
|
//下面四行是单行文字的样式
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.map-address {
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(39, 40, 50, 0.4);
|
|
|
padding: 0 24rpx;
|
|
|
//下面四行是单行文字的样式
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.map {
|
|
|
padding-top: 8rpx;
|
|
|
width: 464rpx;
|
|
|
height: 190rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.voice {
|
|
|
// width: 200rpx;
|
|
|
min-width: 100rpx;
|
|
|
max-width: 440rpx;
|
|
|
}
|
|
|
|
|
|
.voice-img {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.msg-left {
|
|
|
flex-direction: row;
|
|
|
.feed-imgy{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 95rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.feed-img{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 75rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.msg-text {
|
|
|
margin-left: 16rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 0rpx 20rpx 20rpx 20rpx;
|
|
|
}
|
|
|
.txtline{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
margin: 3rpx 0;
|
|
|
border-bottom:1rpx solid #ddd;
|
|
|
padding: 10rpx 0;
|
|
|
}
|
|
|
.ms-img {
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
.msg-video{
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
.msh-map {
|
|
|
margin-left: 16rpx;
|
|
|
border-radius: 0rpx 20rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.msg-img {
|
|
|
margin: 0 0 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.voice {
|
|
|
text-align: left;
|
|
|
display: flex;
|
|
|
}
|
|
|
.voice-img {
|
|
|
transform: rotate(180deg);
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
padding-bottom: 4rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.voicel{
|
|
|
height: 32rpx;
|
|
|
width: 32rpx;
|
|
|
}
|
|
|
.bg {
|
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEM0NzgwODc1MDY0MTFFRjk1QjhFRUUxQjYyOUQ5NDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEM0NzgwODg1MDY0MTFFRjk1QjhFRUUxQjYyOUQ5NDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQzQ3ODA4NTUwNjQxMUVGOTVCOEVFRTFCNjI5RDk0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQzQ3ODA4NjUwNjQxMUVGOTVCOEVFRTFCNjI5RDk0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqxjhsEAAANzSURBVHjazJlLaNRQFIaTVIcRQUELoggVKYIgQvGFr40giLMRBAtjXblwUSmIK1vBTQUREUFB8NGdGwUXgoIVFwq6EGSkOAguXKiUQQq6kKK0Gv+LJ+HkTpLJfYUc+DnJ3M436Tn3eeKHYeiZ2NDQkGfZfCj03Nka6DzUgqZMYa1WS45HzIf15C/xqmeuE7ATOs3up1zxRefslYSgggn465j/GLpJ13ehfS75SEIu36/AFCQ6wQHoBbTgIOBZfBGow9AvaIXBb8d89PYFFpcEn7e5GAG+wXfPQc+g91DNQQKy+A3oB1SnkWDMR9BrbG0oxLeVgNAgCeLhF6FN0CuLiS3CP07+BDTgko/kbHC9BugG6w20ja63QxNSYk0tj/8EatP1uOYuKMFHoCdYW09+kDKnT0Kz0KjGKChik9AsxPkz0FnWvtIgsar8y2wUBDp8BDrBR+zS+CP4PCgyApZDa6Eb+ELDQQJiPs3DkV2FOnQ9atDjVfkPyS+DduvykQQtfpAypM7A3aPbB0iC7bNCgi+dRW6RP2owDanyf0Lv6HqPKl+KTxcf8czlBxnz2gjcPGXtiIOdSRb/Ofmt1KY7DanyZ8gP2uIjMYX4eXPeNPm9jg5Eafwv7IS+rkT+N/Kry+bnJeA3+T5HCUjjhxa3oCr8UOM3rfDzEnCQ/Fu2Q7K5be3i0+IWWadEfj/572Xzg4zywhW4VWwhs128y+LvJ9+mxbEs/mbyn2zxafHtyU87B4yzPe1JgOZZ8x8LwU/waTGL7BT5RwZTkSq/Rge06NCmxJfi08Wn8kQmP20ErKc56xIvpQJUx72NBMR8L1kKbkIb6fq6FKDQIb9BI1v8by91+YiPFj+1GgpYP4I9x+593IcZ05VOEsScOMfuxUuMr/Sg4uHHWNtSjUqlCv81HZDuQ8OqfPFChl7CxHx8NsbiE/Px+XChBKiYhXL0IPUMsYB9lopiddpthI74O9i0sIXVbbT5CPIAi02Cj7a2y2KcrjXp4UXpdpfUtmihIJfHjxbQp5rBL8xPC77NXY2JXaOeOS1t3fooAa74t9loaNrgI8gd1vsL8f0KvpSPdj4u3wuLncxFuj4mbSWVTH4pz3aSMR9/k8mv4jthz3HwD7HgXDAJfkaHTPDzgl+VKahs+wjdgT54/0vUzvhUos61fwIMANiWariLn8/jAAAAAElFTkSuQmCC);
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background-size: 400%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.msg-right {
|
|
|
flex-direction: row-reverse;
|
|
|
.feed-imgy{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 95rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.feed-img{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 75rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.msg-text {
|
|
|
margin-right: 16rpx;
|
|
|
background-color: #89965f;
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 48rpx;
|
|
|
border-radius: 20rpx 0rpx 20rpx 20rpx;
|
|
|
}
|
|
|
.ms-img {
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
.msg-img {
|
|
|
margin: 0 20rpx 0 0;
|
|
|
}
|
|
|
.msg-video{
|
|
|
margin: 0 20rpx 0 0;
|
|
|
}
|
|
|
.msh-map {
|
|
|
margin-left: 16rpx;
|
|
|
border-radius: 20rpx 0rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.voice {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.voice-img {
|
|
|
display: block;
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.voicel{
|
|
|
height: 32rpx;
|
|
|
width: 32rpx;
|
|
|
}
|
|
|
.bg {
|
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REJBQzQ1RjQ1MDYzMTFFRjk5QjZEQkI5MDlENzE3RTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REJBQzQ1RjU1MDYzMTFFRjk5QjZEQkI5MDlENzE3RTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQkFDNDVGMjUwNjMxMUVGOTlCNkRCQjkwOUQ3MTdFNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQkFDNDVGMzUwNjMxMUVGOTlCNkRCQjkwOUQ3MTdFNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm5p+OoAAAKmSURBVHja1Jk/SBxBFMbdy6mHSEARNYIkhU0ICCEkEEynEYmkUEiTxmBtZZHCgGVsAgEhQozYaAo7G0GwjgemC1ZBgzbaKKnEIsb1HbwjH8PM7szdfEQffMzyzexvhn2zM/snSdO0wSOmRfdFc6JfDfGDzb++UUlAjmbTfzHi0T5UbP61Vl6DV3BxZggDYPNRyU1LQDtcnC9GXY/ojeh2HZ2z+ahbZD4lAZt6cQ4Mv1v0W+tm6+icza+qSOZTEvAAZudjo+5Q/SNRX40ds/m47JSIfFoC1nSQ24Y/r/4fUZdR1xHQMZtfVSOZH7LndPgmoEl0oQMdA/8OzNrXxjlzokvRgsfA2HxUM5nvUsmXbzt5CGZJE/jv1d832k8GPsmw+TgDEyLfd8PP5NsAM9q4bPi76r8FrwXgHzwHyOa7loDY/Kw73JtvAyzpCcvgtQLoKfgT6p0GDJDNtyWAwXepEMIvWF6O27Q8Aa8bjo/h+JGWWwEv32y+Ldh8jMsQvi0B1Y9DicUz/b9aNod8/SDzs/pk8V2Ry7cl4FTLTvCORBd63Av+Ny2HAwbF5tuCzXdFLt+WgD0t+8E7F/3Q40Hw17WuRbTqOSg23zbrGXyfyOdbNoYB2LBaLU8vx0b7UWj/0WOTYvNdGzGD76NMvu0OKGvWKjEO/ifY0KbB3xBN6eZ25jEr2HxXxOQnAf1m8x1ZW9SM7Rr+O8hmfx2z4jOZ71IsfoH9LegeDPSFUfcd3mSf1NjxXTI/64UsBj/av4WC47Y5EK3o8VejbkD0U1QUPa9xOTgk812bcSx+GrgM1fRLsvIl8Vxny4albqjOW5HNz+ubyY/2S/IZLBULhAGz+Tf+n7D5Ne8lYRBsPmXzjKWixyq1rOVD0Q7hZYXNz9oP/ntcCTAAHScbp0OSlTgAAAAASUVORK5CYII=);
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background-size: 400%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.voicePlay {
|
|
|
animation-name: voicePlay;
|
|
|
animation-duration: 1s;
|
|
|
animation-direction: normal;
|
|
|
animation-iteration-count: infinite;
|
|
|
animation-timing-function: steps(3);
|
|
|
}
|
|
|
@keyframes voicePlay {
|
|
|
0% {
|
|
|
background-position: 0;
|
|
|
}
|
|
|
100% {
|
|
|
background-position: 100%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
