123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <script>
- import { isString, isToday } from "utils/validate";
- import { timeFormat } 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() {
- const { contact } = this;
- return (
- <div
- class={["lemon-contact", { "lemon-contact--name-center": this.simple }]}
- on-click={e => this._handleClick(e, contact)}
- >
- <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>
- </div>
- );
- },
- created() {},
- mounted() {},
- computed: {},
- watch: {},
- methods: {
- _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
- 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
- ellipsis()
- img
- height 14px
- display inline-block
- vertical-align middle
- margin 0 1px
- +m(name-center)
- +e(label)
- padding-bottom 0
- line-height 38px
- </style>
|