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"
      @change="ListMsg"
    ></u-search>
    <view class="msg-list">
      <view
        class="msg-item view-global"
        v-for="(item, index) in listMsgs"
		@click="getMesInfo(item)"
        :key="index"
      >
        <view class="msg-icon" style="background-color: #367bef">
			<!-- value="9" -->
          <u-badge
            bgColor="#FE3434"
            max="99"
            :isDot="item.isLook == 1 ? false : true"
            :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>
	<u-modal :show="show" :title="msgInfo.title" :content='msgInfo.content' @confirm="confirm"></u-modal>
  </view>
</template>
<script>
import { shopIdlist, deleteShopId, getInfoShop, isLookCount } from "../../api/jn/news";
export default {
  data() {
    return {
      listMsgs: [],
      // 查询参数
      queryParams: {
        title: "",
		id:'',
      },
	  show: false,
	  msgInfo: {
		  title:"",
		  content:""
	  },
    };
  },
  onLoad() {
    const launchOptions = uni.getLaunchOptionsSync();
    const { query } = launchOptions;
	// console.log(query,"query");
	if(query.storeId) {
		this.queryParams.id = query.storeId;
		this.ListMsg();
	} else {
		uni.$u.toast('店铺id为空')
	}
  },
  methods: {
    onAllclear() {
      this.$modal.confirm('确定删除所有消息吗？').then(() => {
		deleteShopId(15).then((res) => {
			if(res.code == 200) {
				uni.showToast({ title: "删除成功", icon: 'success' })
				this.ListMsg();
			}
		})
	  })
    },
	getMesInfo(item) {
		this.show = true;
		this.msgInfo = item;
		getInfoShop(item.id).then(res=>{})
	},
    ListMsg() {
      shopIdlist(this.queryParams).then((res) => {
        this.listMsgs = res.data;
        // if(res.code == 200) {
        //   uni.setTabBarBadge({
        //     //显示数字
        //     index: 1, //tabbar下标
        //     text: res.total + '', //数字
        //   });
        // }
      });
    },
	confirm(){
		this.show = false
		this.ListMsg();
	},
  },
};
</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;
	  .u-badge {
		 width: 10px;
		 height: 10px;
		 left: 0px;
	  }
      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>