fan
145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<script>
|
|
import { isString, isToday } from "utils/validate";
|
|
import { timeFormat,useScopedSlot } from "utils";
|
|
export default {
|
|
name: "LemonContact",
|
|
components: {},
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
contact: Object,
|
|
simple: Boolean,
|
|
timeFormat: {
|
|
type: Function,
|
|
default(val) {
|
|
return timeFormat(val, isToday(val) ? "h:i" : "y/m/d");
|
|
}
|
|
}
|
|
},
|
|
render() {
|
|
return (
|
|
<div
|
|
class={["lemon-contact", { "lemon-contact--name-center": this.simple }]}
|
|
on-click={e => this._handleClick(e, this.contact)}
|
|
>
|
|
{useScopedSlot(this.$scopedSlots.default,this._renderInner(),this.contact)}
|
|
</div>
|
|
);
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
_renderInner(){
|
|
const { contact } = this;
|
|
return [
|
|
<lemon-badge
|
|
count={!this.simple ? contact.unread : 0}
|
|
class="lemon-contact__avatar"
|
|
native-on-click={e => this._handleBubbleClick(e, contact)}
|
|
>
|
|
<lemon-avatar
|
|
size={40}
|
|
native-on-click={e => this._handleAvatarClick(e, contact)}
|
|
src={contact.avatar}
|
|
/>
|
|
</lemon-badge>,
|
|
<div class="lemon-contact__inner">
|
|
<p class="lemon-contact__label">
|
|
<span class="lemon-contact__name">{contact.displayName}</span>
|
|
{!this.simple && (
|
|
<span class="lemon-contact__time">
|
|
{this.timeFormat(contact.lastSendTime)}
|
|
</span>
|
|
)}
|
|
</p>
|
|
{!this.simple && (
|
|
<p class="lemon-contact__content">
|
|
{isString(contact.lastContent) ? (
|
|
<span domProps={{ innerHTML: contact.lastContent }} />
|
|
) : (
|
|
contact.lastContent
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
];
|
|
},
|
|
_handleClick(e, data) {
|
|
this.$emit("click", data);
|
|
},
|
|
_handleAvatarClick(e, data) {
|
|
e.stopPropagation();
|
|
this.$emit("avatar-click", data);
|
|
},
|
|
_handleBubbleClick(e, data) {
|
|
e.stopPropagation();
|
|
this.$emit("bubble-click", data);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="stylus">
|
|
@import '~styles/utils/index'
|
|
+b(lemon-contact)
|
|
padding 10px 14px
|
|
cursor pointer
|
|
user-select none
|
|
box-sizing border-box
|
|
overflow hidden
|
|
background #efefef
|
|
text-align left
|
|
p
|
|
margin 0
|
|
+m(active)
|
|
background #bebdbd
|
|
&:hover:not(.lemon-contact--active)
|
|
background #e3e3e3
|
|
.el-badge__content
|
|
border-color #ddd
|
|
+e(avatar)
|
|
float left
|
|
margin-right 10px
|
|
img
|
|
display block
|
|
.ant-badge-count
|
|
display inline-block
|
|
padding 0 4px
|
|
height 18px
|
|
line-height 18px
|
|
min-width 18px
|
|
top -4px
|
|
right 7px
|
|
+e(label)
|
|
display flex
|
|
+e(time)
|
|
font-size 12px
|
|
line-height 18px
|
|
padding-left 6px
|
|
color #999
|
|
white-space nowrap
|
|
+e(name)
|
|
display block
|
|
width 100%
|
|
ellipsis()
|
|
+e(content)
|
|
font-size 12px
|
|
color #999
|
|
padding-top 3px
|
|
height 14px
|
|
line-height 14px
|
|
ellipsis()
|
|
img
|
|
height 14px
|
|
display inline-block
|
|
vertical-align top
|
|
margin 0 1px
|
|
+m(name-center)
|
|
+e(label)
|
|
padding-bottom 0
|
|
line-height 38px
|
|
</style>
|