index.vue

<template>
    <div class="message-container">
        <div class="message-list">
            <div class="message-panel-box" v-for="(item,index) in messageList" :key="index">
                <div class="message-panel-box-left">
                    <p class="message-title">
                        {{item.title}}
                    </p>
                    <p class="message-content">
                        {{item.content}}
                    </p>
                </div>
                <div class="message-panel-box-right">
                    <span>{{item.create_date | filterTime}}</span>
                </div>
            </div>
        </div>
        <div class="btn-plus" @click="handleAddMessage"><span>+</span></div>
    </div>
</template>

<script>
  import {getMessageByUserId} from '@/utils/utils.Request.aApi'

  export default {
    name: 'index',
    data() {
      return {
        userId: '',
        messageList: []
      }
    },
    mounted() {
      this.userId = sessionStorage.getItem('userId')
      // this.userId = "ManGuanEr"
      this.handleGetMessageByClerkId()
    },
    filters: {
      filterTime(val) {
        return val.replace(',', ' ')
      }
    },
    methods: {
      handleGetMessageByClerkId() {
        let _this = this
        let requestRarams = {userId: _this.userId}
        getMessageByUserId(requestRarams)
          .then(res => {
            if (res.result == 'success') {
              _this.messageList = res.data
            } else {
              _this.messageList = []
              _this.$toast(res.errorMsg);
            }
          })
          .catch(err => {

          })
      },
      handleAddMessage() {
        this.$router.push('/addMessage')
      }
    }
  }
</script>

<style scoped lang="scss">
    .message-container {
        height: 100%;
        padding: 20px 10px 20px 20px;
        .message-panel-box {
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 0;
            .message-panel-box-left {
                width: calc(100% - 155px);
                .message-title, .message-content {
                    width: 100%;
                    overflow: hidden;
                }
                .message-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: black;
                    line-height: 30px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .message-content {
                    font-size: 12px;
                    color: #2d2a2a;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }
            .message-panel-box-right {
                color: #908888;
                white-space: nowrap;
            }
            &:not(last-child) {
                border-bottom: 1px solid #f3eaea;
            }
        }
        .btn-plus {
            position: fixed;
            right: 30px;
            bottom: 30px;
            font-size: 40px;
            font-weight: bold;
            width: 50px;
            height: 50px;
            border: 2px solid #ccc;
            border-radius: 50%;
            text-align: center;
            color: green;
            line-height: 1;
        }
    }
</style>