第一次提交
This commit is contained in:
gxwebsoft
217
components/chat-item/chat-item.vue
Normal file
217
components/chat-item/chat-item.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<!-- z-paging聊天item -->
|
||||
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<text class="chat-time" v-if="showTime">
|
||||
<!-- {{ item.createTime }} -->
|
||||
{{ time }}
|
||||
</text>
|
||||
<view :class="{'chat-container':true,'chat-location-me':isMe}">
|
||||
<view class="chat-icon-container" @click="$push('sub_pages/member/detail/detail',{userId:item.formUserId})">
|
||||
<u-avatar class="chat-icon" size="40" shape="square" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="aspectFill"></u-avatar>
|
||||
<!-- <image class="chat-icon" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="aspectFill" /> -->
|
||||
</view>
|
||||
<view class="chat-content-container">
|
||||
<text :class="{'chat-user-name':true,'chat-location-me':isMe}">
|
||||
{{isMe?userInfo.nickname:friendInfo.nickname}}
|
||||
</text>
|
||||
<view :class="{'chat-text-container':item.type!='image','isme':isMe, 'chat-image-container': item.type=='image'}">
|
||||
<text v-if="item.type=='text'" :class="{'char-text':true,'char-text-me':isMe}">{{item.content}}</text>
|
||||
<chat-item-image @click="onImageClick" v-if="item.type=='image'" :src="item.content"></chat-item-image>
|
||||
<!-- <image :class="{'char-image':true,'char-image-me':isMe}" mode="widthFix"></image> -->
|
||||
<view v-if="item.type == 'card'" class="hello-card">
|
||||
<view class="hello-card-desc">
|
||||
{{`${ mateData.age ? mateData.age + '岁': '' } ${mateData.position ? mateData.position : ''} ${mateData.city ? mateData.city : ''}`}}
|
||||
</view>
|
||||
<view class="hello-card-desc u-line-2" style="color: #999999; font-size: 26rpx;">
|
||||
<view>很高兴认识你~</view>
|
||||
<view>海底月是天上月，眼前人是心上人！</view>
|
||||
</view>
|
||||
<view class="album" style="padding: 10rpx 0;">
|
||||
<u-album :urls="mateData.files" keyName="thumb" :singleSize="100" singleMode="aspectFill" multipleMode="aspectFill"></u-album>
|
||||
</view>
|
||||
<!-- <image class="hello-card-image" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="widthFix"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ACCESS_TOKEN, USER_ID,USER_INFO
|
||||
} from '@/store/mutation-types'
|
||||
import storage from '@/utils/storage'
|
||||
import dayjs from "dayjs"
|
||||
import ChatItemImage from "@/components/chat-item-image/chat-item-image.vue"
|
||||
export default {
|
||||
name:"chat-item",
|
||||
components: {ChatItemImage},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
time: '',
|
||||
icon: '',
|
||||
name: '',
|
||||
content: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
friendInfo: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
avatar: '',
|
||||
nickname: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
prevMsgTime: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: {},
|
||||
mateData: {},
|
||||
showTime: true,
|
||||
time: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isMe(){
|
||||
console.log(this.item.formUserId == this.userInfo.userId);
|
||||
return this.item.formUserId == this.userInfo.userId
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.userInfo = storage.get(USER_INFO)
|
||||
if(this.item.type == 'card'){
|
||||
this.mateData = JSON.parse(this.item.content)
|
||||
console.log("this.mateData: ",this.mateData);
|
||||
}
|
||||
// 如果是第一条消息或上一条消息间隔三分钟，显示时间
|
||||
this.showTime = !this.prevMsgTime || (dayjs(this.prevMsgTime).diff(dayjs(this.item.createTime), 'minutes') <= -3)
|
||||
if(this.showTime){
|
||||
let isToday = new Date(this.item.createTime).setHours(0,0,0,0) == new Date().setHours(0,0,0,0)
|
||||
this.time = this.$u.timeFormat(this.item.createTime, isToday? 'hh:MM': 'mm-dd hh:MM')
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
onImageClick(){
|
||||
this.$emit("onImageClick")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.chat-time{
|
||||
padding: 4rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.chat-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.chat-location-me{
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container{
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.chat-content-container{
|
||||
margin: 0rpx 15rpx;
|
||||
}
|
||||
.chat-user-name{
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
}
|
||||
.chat-text-container{
|
||||
display: table;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
&.isme{
|
||||
display: table;
|
||||
background-color: #ffe3ff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
.hello-card{
|
||||
max-width: 500rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 10rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.hello-card-image{
|
||||
width: 200rpx;
|
||||
}
|
||||
.hello-card-title{
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hello-card-desc{
|
||||
color: #333333;
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
.chat-text-container-me{
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chat-image-container{
|
||||
display: table;
|
||||
background-color: unset !important;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
|
||||
|
||||
}
|
||||
.char-text{
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.char-image{
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
.char-text-me{
|
||||
/* color: white; */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user