UPDATE

2019-10-24 19:48:49 +08:00
parent f4bda4688c
commit 387ba9640c
55 changed files with 4784 additions and 2756 deletions
@@ -0,0 +1,178 @@
+<script>
+export default {
+  name: "lemonMessageBasic",
+  props: {
+    message: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    timeFormat: {
+      type: Function,
+      default: () => ""
+    },
+    reverse: Boolean,
+    hiddenTitle: Boolean
+  },
+  data() {
+    return {};
+  },
+  render() {
+    const { fromUser, status, sendTime } = this.message;
+    return (
+      <div
+        class={[
+          "lemon-message",
+          {
+            "lemon-message--reverse": this.reverse,
+            "lemon-message--hidden-title": this.hiddenTitle
+          }
+        ]}
+      >
+        <div class="lemon-message__avatar">
+          <lemon-avatar
+            size={36}
+            shape="square"
+            src={fromUser.avatar}
+            on-click={() => {
+              console.log("message avatar click");
+            }}
+          />
+        </div>
+        <div class="lemon-message__inner">
+          <div class="lemon-message__title">
+            <span
+              on-click={() => {
+                console.log("message displayname click");
+              }}
+            >
+              {fromUser.displayName}
+            </span>
+            <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
+          </div>
+          <div
+            class="lemon-message__content"
+            on-click={() => {
+              console.log("message content click");
+            }}
+          >
+            {this.useScopedSlots("content", this.message)}
+          </div>
+          <div class="lemon-message__status">{this._renderStatue(status)}</div>
+        </div>
+      </div>
+    );
+  },
+  created() {},
+  mounted() {},
+  computed: {},
+  watch: {},
+  methods: {
+    _renderStatue(status) {
+      if (status == "going") {
+        return <i class="lemon-icon-loading lemonani-spin" />;
+      } else if (status == "failed") {
+        return (
+          <i
+            class="lemon-icon-prompt"
+            title="重发消息"
+            style={{
+              color: "#ff2525",
+              cursor: "pointer"
+            }}
+          />
+        );
+      }
+      return;
+    },
+    useScopedSlots(name, params, defVnode = "", context = this) {
+      return context.$scopedSlots[name]
+        ? context.$scopedSlots[name](params)
+        : defVnode;
+    }
+  }
+};
+</script>
+<style lang="stylus">
+@import '~styles/utils/index'
+arrow()
+  content ' '
+  position absolute
+  top 6px
+  width 0
+  height 0
+  border 4px solid transparent
+b(lemon-message)
+  display flex
+  padding 10px 0
+  +e(time)
+    color #bbb
+    padding 0 4px
+  +e(inner)
+    position relative
+  +e(avatar)
+    padding-right 10px
+    user-select none
+    .lemon-avatar
+      cursor pointer
+  +e(title)
+    display flex
+    font-size 12px
+    line-height 14px
+    padding-bottom 6px
+    user-select none
+    color #999
+  +e(content)
+    font-size 14px
+    line-height 20px
+    padding 8px 10px
+    background #fff
+    border-radius 4px
+    position relative
+    margin 0 46px 0 0
+    img
+    video
+      background #e9e9e9
+      height 100px
+    &:before
+      arrow()
+      left -4px
+      border-left none
+      border-right-color #fff
+  +e(status)
+    position absolute
+    top 23px
+    right 20px
+    color #aaa
+    font-size 20px
+  +m(reverse)
+    flex-direction row-reverse
+    +e(title)
+      flex-direction row-reverse
+    +e(status)
+      left 20px
+      right auto
+    +e(content)
+      background #35d863
+      margin 0 0 0 46px
+      &:before
+        arrow()
+        left auto
+        right -4px
+        border-right none
+        border-left-color #35d863
+    +e(title)
+      text-align right
+    +e(avatar)
+      padding-right 0
+      padding-left 10px
+  +m(hidden-title)
+    +e(status)
+      top 7px
+    +e(title)
+      display none
+    +e(content)
+      &:before
+        top 14px
+</style>