JiangNingUmale-h5/subEnterprise/msg/index.vue

<template>
  <view class="app-container">
    <u-navbar title="消息列表" :autoBack="true" 
    :placeholder="true" leftText="返回">
      <view slot="right" @click="onAllclear">
        <text class="nav-right">全部清空</text>
      </view>
    </u-navbar>
    <u-search
      height="75rpx"
      placeholder="搜索关键词"
      v-model="queryParams.title"
      shape="square"
      :showAction="false"
      :clearabled="true"
      class="view-global"
      bgColor="#fff"
      @search="onSearch"
      @clear="onClear"
    ></u-search>
    <view class="msg-list">
      <view
        class="msg-item view-global"
        v-for="(item, index) in listMsgs"
        :key="index"
      >
        <view class="msg-icon" style="background-color: #367bef">
			<!-- value="9" -->
          <u-badge
            bgColor="#FE3434"
            max="99"
            
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg3.png" mode="aspectFill"></image>
        </view>

        <view class="msg-middle">
          <view class="middle-main">{{ item.title }}</view>
          <view class="middle-sub">{{ item.content }}</view>
        </view>
        <view class="msg-date">{{ item.createTime }}</view>
      </view>
      <!-- <view class="msg-item view-global">
        <view class="msg-icon" style="background-color: #32b78b">
          <u-badge
            bgColor="#FE3434"
            max="99"
            value="99"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg2.png" mode="aspectFill"></image>
        </view>
        <view class="msg-middle">
          <view class="middle-main">消息通知</view>
          <view class="middle-sub">这是一条普通的消息详情</view>
        </view>
        <view class="msg-date">19:18</view>
      </view>
      <view class="msg-item view-global">
        <view class="msg-icon" style="background-color: #f08941">
          <u-badge
            bgColor="#FE3434"
            max="99"
            value="0"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg1.png" mode="aspectFill"></image>
        </view>
        <view class="msg-middle">
          <view class="middle-main">告警消息</view>
          <view class="middle-sub">这是一条普通的消息详情</view>
        </view>
        <view class="msg-date">19:18</view>
      </view> -->
    </view>
  </view>
</template>
<script>
import { listNews, delNews } from "../../api/jn/news";
export default {
  data() {
    return {
      listMsgs: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: "",
		    status: 0
      },
    };
  },
  onLoad() {
    
  },
  onShow() {
  	this.ListMsg();
  },
  methods: {
    onAllclear() {
      this.$modal.confirm('确定删除所有消息吗？').then(() => {
        let ids = [];
        this.listMsgs.forEach(element => {
          ids.push(element.id);
        });
        if(ids.length == 0) {
          return;
        } else {
          delNews(ids).then((res) => {
            console.log(JSON.stringify(res),"删除接口");
            if(res.code == 200) {
              this.ListMsg();
            }
          });
        }
			})
    },
    onSearch() {
      this.ListMsg();
    },
    onClear() {
      this.queryParams.title = "";
      this.ListMsg();
    },
    ListMsg() {
      listNews(this.queryParams).then((res) => {
        // console.log(res);
        this.listMsgs = res.rows;
        if(res.code == 200) {
          uni.setTabBarBadge({
            //显示数字
            index: 1, //tabbar下标
            text: res.total + '', //数字
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.msg-list {
  .msg-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 20rpx;

    .msg-icon {
      position: relative;
      height: 94rpx;
      width: 94rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        height: 44rpx;
        width: 44rpx;
      }
    }

    .msg-middle {
      flex: 1;
      box-sizing: border-box;
      padding-left: 20rpx;

      .middle-main {
        font-size: 32rpx;
        font-weight: bold;
        color: #2e2f31;
      }

      .middle-sub {
        margin-top: 12rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #616367;
      }
    }

    .msg-date {
      font-size: 24rpx;
      font-weight: 400;
      color: #9da2ab;
    }
  }
}
</style>