code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-18 00:45:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

IM

Browse Source
This commit is contained in:
程
2022-12-28 10:08:51 +08:00
parent 0fa93d545e
commit 3881370b6e
151 changed files with 17044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
im/src/components/notify/FriendApplyNotify.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<!-- 新消息提示组件 -->
<div class="notify-box">
<div class="lbox">
<el-avatar size="medium" :src="avatar" />
</div>
<div class="rbox">
<div class="xheader">
<p class="title">好友申请消息</p>
<p class="time">{{ datetime }}</p>
</div>
<div class="xbody">
<h4>申请备注:</h4>
<div>{{ content }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
params: {
type: Object,
default() {},
},
},
data() {
return {
avatar:
'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
talk_type: 1,
nickname: '阿萨纳斯卡',
content: '阿斯纳俺家你卡萨啊看看番按实际开发n',
datetime: '2021-06-18 23:15:12',
}
},
computed: {},
methods: {},
created() {},
}
</script>
<style lang="less" scoped>
.notify-box {
width: 300px;
min-height: 100px;
// background: rebeccapurple;
display: flex;
box-sizing: border-box;
padding: 5px;
.lbox {
flex-basis: 50px;
flex-shrink: 1;
display: flex;
justify-content: center;
}
.rbox {
flex: 1 auto;
margin-left: 5px;
.xheader {
height: 35px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
font-size: 13px;
font-weight: 500;
}
.time {
font-size: 12px;
}
}
.xbody {
min-height: 60px;
width: 100%;
h4 {
font-size: 13px;
font-weight: 400;
margin-bottom: 3px;
}
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background: #f3f5f7;
font-size: 13px;
padding: 5px;
border-radius: 5px;
}
}
}
}
</style>

122
im/src/components/notify/NewMessageNotify.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<!-- 新消息提示组件 -->
<div class="notify-box pointer">
<div class="lbox">
<el-avatar size="medium" shape="square" :src="avatar" />
</div>
<div class="rbox">
<div class="xheader">
<p class="title">
{{ talk_type == 1 ? '私信消息通知' : '群聊消息通知' }}
</p>
<p class="time"><i class="el-icon-time" /> {{ datetime | format }}</p>
</div>
<div class="xbody">
<p>@{{ nickname }}</p>
<div>{{ content }}</div>
</div>
</div>
</div>
</template>
<script>
import { parseTime } from '@/utils/functions'
export default {
components: {},
props: {
avatar: {
type: String,
default:
'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
},
talk_type: {
type: Number,
default: 1,
},
nickname: {
type: String,
default: '',
},
content: {
type: String,
default: '',
},
datetime: {
type: String,
default: '',
},
},
data() {
return {}
},
filters: {
format(datetime) {
datetime = datetime || new Date()
return parseTime(datetime, '{m}/{d} {h}:{i} 分')
},
},
}
</script>
<style lang="less" scoped>
.notify-box {
width: 300px;
min-height: 100px;
display: flex;
box-sizing: border-box;
padding: 5px;
.lbox {
flex-basis: 50px;
flex-shrink: 1;
display: flex;
justify-content: center;
}
.rbox {
flex: 1 auto;
margin-left: 5px;
.xheader {
height: 25px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
font-size: 13px;
font-weight: 500;
}
.time {
font-size: 12px;
}
}
.xbody {
min-height: 60px;
width: 100%;
margin-top: 5px;
p {
font-size: 13px;
font-weight: 400;
color: #fb4208;
margin-bottom: 4px;
}
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background: #f3f5f7;
font-size: 13px;
padding: 5px;
border-radius: 5px;
}
}
}
}
</style>