项目初始化
This commit is contained in:
jerry
385
pages/im/components/viewItem.vue
Normal file
385
pages/im/components/viewItem.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user