385 lines
8.9 KiB
Vue
385 lines
8.9 KiB
Vue
<template>
|
|
<view v-if="userId > 0">
|
|
<view v-if="item.sendType == 1">
|
|
<view class="tip-box" v-if="item.contentType == 1">
|
|
<text class="time">{{item.content}}</text>
|
|
</view>
|
|
<view class="tip-card" v-if="item.contentType == 2">
|
|
<!-- <image class="icon" src="@/static/images/help.png"></image> -->
|
|
<view class="content-box">
|
|
<view class="title">温馨提示</view>
|
|
<view class="content">{{item.content}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.sendType == 2">
|
|
<view class="tip-box" v-if="showTime(item, messageIndex)">
|
|
<text class="time">{{showDayTime(item.createTime)}}</text>
|
|
</view>
|
|
<view class="chat-box left" v-if="item.sendUserId != userId">
|
|
<view class="avatar" @click="detail(item)">
|
|
<u-avatar width="80rpx" height="80rpx" :src="item.sendAvatar"></u-avatar>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="item.contentType == 1">
|
|
<view class="content" >{{item.content}}</view>
|
|
</view>
|
|
<view class="content-box" v-if="item.contentType == 2">
|
|
<view class="content" >{{item.content}}</view>
|
|
<u-icon name="map-fill" color="#3D7EFF" size="40"></u-icon>
|
|
</view>
|
|
<view class="content voice" :class="item.id == playId ?'play':''" @click="playAudio(item)" v-if="item.contentType == 3">
|
|
<view class="icon">
|
|
<u-icon name="voice1" custom-prefix="iconfont" color="#080808" size="40"></u-icon>
|
|
</view>
|
|
<text>{{item.voiceSec}}”</text>
|
|
</view>
|
|
<view v-if="item.contentType == 4" @click="showPic(item)" class="msg-img">
|
|
<u-image width="420rpx" border-radius="5px" height="220rpx" :fade="false" :src="item.content"></u-image>
|
|
</view>
|
|
<view v-if="item.contentType == 5" class="msg-img">
|
|
<u-image width="200rpx" height="200rpx" :fade="false" :src="item.content"></u-image>
|
|
</view>
|
|
</view>
|
|
<view class="chat-box right" v-if="item.sendUserId == userId">
|
|
<view class="content-box" v-if="item.contentType == 1">
|
|
<u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
|
|
<u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
|
|
<view class="content" >{{item.content}}</view>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="item.contentType == 2">
|
|
<u-icon name="map-fill" color="#3D7EFF" size="40"></u-icon>
|
|
<view class="content" >{{item.content}}</view>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="item.contentType == 3">
|
|
<u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
|
|
<u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
|
|
<view class="content voice" :class="item.id == playId ?'play':''" @click="playAudio(item)">
|
|
<text>{{item.voiceSec}}”</text>
|
|
<view class="icon">
|
|
<u-icon name="chat_voice" custom-prefix="iconfont" color="#fff" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="item.contentType == 4">
|
|
<u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
|
|
<u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
|
|
<view class="msg-img" @click="showPic(item)">
|
|
<u-image width="420rpx" border-radius="5px" height="220rpx" :fade="false" :src="item.content"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="item.contentType == 5">
|
|
<u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
|
|
<u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
|
|
<view class="msg-img">
|
|
<u-image width="200rpx" height="200rpx" :fade="false" :src="item.content"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="avatar" @click="detail(item)">
|
|
<u-avatar width="80rpx" height="80rpx" :src="item.sendAvatar"></u-avatar>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs';
|
|
import isToday from "dayjs/plugin/isToday";
|
|
import isYesterday from "dayjs/plugin/isYesterday";
|
|
dayjs.extend(isToday);
|
|
dayjs.extend(isYesterday);
|
|
import sheep from '@/sheep';
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: {
|
|
createTime: 0,
|
|
},
|
|
},
|
|
// 消息索引
|
|
messageIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
// 消息列表
|
|
messageList:{
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
playId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
userId: 0,
|
|
}
|
|
},
|
|
created() {
|
|
var user = sheep.$store('user').userInfo;
|
|
this.userId = user.id;
|
|
},
|
|
methods: {
|
|
// 预览图片
|
|
showPic(e) {
|
|
uni.previewImage({
|
|
indicator: "none",
|
|
current: e.content,
|
|
urls: [e.content],
|
|
});
|
|
},
|
|
detail(e) {
|
|
sheep.$router.go('/pages/user/detail/index',{id: e.sendUserId});
|
|
},
|
|
playAudio(e) {
|
|
this.$emit('playAudio', e);
|
|
},
|
|
formatDate(date, format= 'YYYY-MM-DD HH:mm:ss') {
|
|
// 日期不存在，则返回空
|
|
if (!date) {
|
|
return ''
|
|
}
|
|
// 日期存在，则进行格式化
|
|
if (format === undefined) {
|
|
format = 'YYYY-MM-DD HH:mm:ss'
|
|
}
|
|
return dayjs(date).format(format);
|
|
},
|
|
showDayTime(datetime) {
|
|
if (!datetime) return "";
|
|
const weeks = [
|
|
"星期日",
|
|
"星期一",
|
|
"星期二",
|
|
"星期三",
|
|
"星期四",
|
|
"星期五",
|
|
"星期六",
|
|
];
|
|
// 当天 显示时分
|
|
if (dayjs(datetime).isToday()) {
|
|
return dayjs(datetime).format("HH:mm");
|
|
}
|
|
// 昨天 昨天+时分
|
|
if (dayjs(datetime).isYesterday()) {
|
|
return `昨天 ${dayjs(datetime).format("HH:mm")}`;
|
|
}
|
|
// 本周 显示周几+时分
|
|
if (dayjs().isSame(datetime, "week")) {
|
|
const weekIndex = dayjs().day();
|
|
return `${weeks[weekIndex]} ${dayjs(datetime).format("HH:mm")}`;
|
|
}
|
|
// 本周之前 显示年月日
|
|
if (dayjs(datetime).isBefore(new Date(), "week")) {
|
|
return dayjs(datetime).format("YYYY-MM-DD");
|
|
}
|
|
},
|
|
showTime(item, index) {
|
|
// 最后一个
|
|
var createTime = new Date().getTime();
|
|
if(index > 0){
|
|
var message = this.messageList[index + 1];
|
|
if(message){
|
|
createTime = message.createTime;
|
|
}
|
|
}
|
|
|
|
let dateString = dayjs(createTime).fromNow();
|
|
let nowDateString = dayjs(item.createTime).fromNow();
|
|
return dateString !== nowDateString;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat-box {
|
|
padding: 6px 12px;
|
|
display: flex;
|
|
|
|
.content-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.left {
|
|
.content {
|
|
border-radius: 0px 8px 8px;
|
|
width: fit-content;
|
|
background-color: #fff;
|
|
color: #080808;
|
|
padding: 8px;
|
|
margin: 8px;
|
|
text-align: justify;
|
|
max-width: 470rpx;
|
|
font-size: 11px;
|
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.msg-img {
|
|
margin: 8px;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.play{
|
|
|
|
.icon {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon:after
|
|
{
|
|
border-right: solid 3px #fff;
|
|
animation: other-play 1s linear infinite;
|
|
z-index: 9;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.content {
|
|
border-radius: 8px 0px 8px 8px;
|
|
width: fit-content;
|
|
background-color: #00c8b0;
|
|
color: #080808;
|
|
padding: 8px;
|
|
margin: 8px;
|
|
color: #fff;
|
|
text-align: justify;
|
|
max-width: 470rpx;
|
|
font-size: 11px;
|
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.msg-img {
|
|
margin: 8px;
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.play{
|
|
|
|
.icon {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon:after
|
|
{
|
|
border-left: solid 3px #00c8b0;
|
|
animation: my-play 1s linear infinite;
|
|
z-index: 9;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes my-play {
|
|
0% {
|
|
transform: translateX(80%);
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes other-play {
|
|
0% {
|
|
transform: translateX(-80%);
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
.voice{
|
|
.icon{
|
|
font-size: 40upx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.icon:after
|
|
{
|
|
content:" ";
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
.avatar {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.tip-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 7px 0;
|
|
padding: 7px 20px;
|
|
text-align: center;
|
|
|
|
.time {
|
|
color: #aaaaaa;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.tip-card {
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
padding: 7px;
|
|
margin: 12px;
|
|
text-align: justify;
|
|
|
|
.icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.content-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin-left: 7px;
|
|
|
|
.title {
|
|
font-size: 11px;
|
|
color: #333333;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 3px;
|
|
color: #aaaaaa;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |