YingXingAI/pages/message/sysList/sysList.vue

<template>
  <view>
    <u-navbar back-text="" title="系统消息"></u-navbar>
    <scroll-view scroll-y="true" class="scroll">
      <view class="flex-col list" v-if='list.length'>
        <view class="list-item flex-col group_1" :key="i" v-for="(item, i) in list">
          <view class="items-title">
            <image src="/static/common/img/message/system.png" mode=""></image>
            <view class="title-time">
              <text class="title-text">系统消息</text>
              <text class="text_1">{{ item.messageDate }}</text>
            </view>
          </view>
          <view class="bottom-section flex-col">
            <text class="text_3">{{ item.title }}</text>
            <text class="text_5">{{ item.message.split(',未通过原因:')[0] }}</text>
            <text v-if="item.message.split(',未通过原因:').length >= 2" class="text_6">驳回理由：<text>{{
              item.message.split(',未通过原因:')[1] }}</text></text>
          </view>
        </view>
      </view>
      <view v-else style='padding-top:30vh'>
        <no-data text="暂无系统消息"></no-data>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import noData from '@/components/NoData.vue';
export default {
  components: {
    noData
  },
  data() {
    return {
      list: []
    };
  },
  onLoad() {
    this.getList()
    //接收系统消息
    this.$connection.on("SystemMessage", (title, content, time) => {
      if (this.route.indexOf('sysList') >= 0) {
        this.list.unshift({
          messageDate: time,
          title: title,
          message: content
        })
      }
    });
  },
  onShow() {
    if (this.vuex_msgList) {
      var msgList = this.vuex_msgList;
      msgList = msgList.replace('SystemMessage,', '')
      this.$u.vuex('vuex_msgList', msgList)
      if (!msgList) {
        var tab = this.vuex_tabbar;
        tab[1].isDot = false;
        this.$u.vuex('vuex_tabbar', tab);
      }
    }
  },
  methods: {
    getList() {
      this.$u.api.getSysList().then(res => {
        this.list = res
      })
    },
    //返回上一级
    router() {
      uni.switchTab({
        url: '../../message/msgList/msgList'
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.scroll {
  background-color: rgb(246, 247, 250);
  width: 100%;
  height: calc(100vh - 0.44rem);
}

.list-item {
  margin-top: 0.1rem;
  padding: 20rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 20rpx;
}

.items-title {
  display: flex;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #F6F8F9;

  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .title-time {
    margin-left: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5rpx 0;
    // align-items: flex-start;
  }
}

.title-text {
  font-weight: 600;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.9);
}

.text_1 {
  // align-self: center;
  color: rgb(193, 196, 204);
  font-size: 0.12rem;
  line-height: 0.095rem;
  // letter-spacing: 0.012rem;
  white-space: nowrap;
}

.bottom-section {
  padding-left: 10rpx;
}

.text_3 {
  color: rgb(2, 2, 2);
  font-size: 28rpx;
  line-height: 0.16rem;
  // letter-spacing: 0.018rem;
  white-space: nowrap;
}

.text_5 {
  margin-left: 0.015rem;
  margin-top: 0.1rem;
  color: #908a8a;
  font-size: 28rpx;
  line-height: 1.5;
  // letter-spacing: 0.01rem;
  // text-indent: 0.3rem;
}

.text_6 {
  margin-top: 0.1rem;
  font-size: 0.16rem;
  line-height: 0.16rem;
  letter-spacing: 0.01rem;

  text {
    margin-left: 0.015rem;
    text-indent: 0.3rem;
    display: block;
    color: #908a8a;
    font-size: 0.14rem;
    margin-top: 0.1rem;
  }
}

.list {
  padding: 0.18rem 0.15rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
</style>