aiot-app/pages/home/msg/msg.vue

<template>
  <view class="msg-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="我的消息"
      @clickLeft="back"
    >
      <view slot="right" class="icon-wrapper">
        <image
          class="icon-clear"
          src="@/static/clear.svg"
          @click="readAll"
        ></image>
        <image
          class="icon-select"
          src="@/static/select.svg"
          @click="toggleChecked"
        ></image>
      </view>
    </uni-nav-bar>
    <view class="tool-box">
      <view class="tool-box-wrapper">
        <u-transition :show="checkShow" mode="fade-down">
          <view class="inner">
            <text @tap="checkShow = false">取消</text>
            <text @tap="markDelete">删除</text>
          </view>
        </u-transition>
      </view>
      <checkbox-group @change="handleCheckChange">
        <view v-for="(item, index) in list" class="list-item" :key="index">
          <CardTime :time="item.sendingTime" />
          <view class="msg-card" @tap="viewDetail(item)">
            <label>
              <view class="title">
                {{ item.title }}
                <text v-if="item.messageStatus == 1" class="text-danger"
                  >未读</text
                >
                <text v-else>已读</text>
              </view>
              <view class="content">
                <checkbox :value="item.id + ''" v-if="checkShow"></checkbox>
                {{ item.messageContent }}
              </view>
            </label>
            <view class="footer"> 查看详情 </view>
          </view>
        </view>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
import { get, postJ } from '../../../utils/api'
import CardTime from '../components/CardTime.vue'
let [page, isEnd] = [1, false]
export default {
  components: {
    CardTime
  },
  data () {
    return {
      checkList: [],
      list: [],
      checkShow: false,
      messageType: {
        0: '系统消息',
        1: '提醒消息',
        2: '告警消息'
      },
      messageStatus: {
        0: '已读',
        1: '未读'
      }
    }
  },
  onReachBottom () {
    if (isEnd) return
    page++
    this.getList()
  },
  onShow () {
    page = 1
    this.getList()
  },
  methods: {
    /* PATROL(1, "巡点检"),
						MAINTAIN(2, "保养"),
						REPAIR(3, "维修"),
						INVENTORY(4, "盘点"),
						OUT_WARE(5, "出库"),
						IN_WARE(6, "入库"),
						TRANSFER(7, "库存调拨"),
						REPORT_LOSS_OVERFLOW(8,"报损报溢"); */
    viewDetail (item) {
      if (item.planType?.code === 3) {
        this.markRead([item.id])
        uni.navigateTo({
          url: `/pages/repair/detail/detail?id=${item.workOrderId}`
        })
      } else {
        uni.showToast({
          title: '功能待开发',
          icon: 'none'
        })
      }

      switch (item.messageType) {
        case 0: //系统消息
          break
        case 1: //提醒消息
          break
        case 2: //告警消息
          break

        default:
          break
      }
    },
    markRead (ids = [], type = 1) {
      return postJ(this.apiUrl + '/myMessage/markRead?type=' + type, ids)
    },
    async markDelete () {
      if (!this.checkList?.length) return
      const _this = this

      uni.showModal({
        title: '提示',
        content: '确定删除选中消息?',
        success: async res => {
          if (res.confirm) {
            const res = await postJ(
              _this.apiUrl + '/myMessage/delete',
              _this.checkList
            )
            if (res?.success) {
              page = 1
              _this.getList()
            }
          }
        }
      })
    },
    toggleChecked () {
      this.checkShow = !this.checkShow
      this.checkList = []
    },
    handleCheckChange ({ detail }) {
      this.checkList = detail.value
    },
    async readAll () {
      await this.markRead(
        this.list.filter(i => i.messageStatus == 1).map(i => i.id),
        0
      )
      page = 1
      this.getList()
    },
    getList () {
      const params = {
        page,
        size: 8
      }
      get(this.apiUrl + '/myMessage/getMyMessageList', params).then(res => {
        if (res?.success) {
          if (params.page === 1) {
            this.list = []
          }
          this.list.push(...res.data.list.records)

          isEnd = this.list.length >= res.data.list.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.msg-container {
  padding: 0 20rpx;
  // background-color: $page-bg;
  min-height: 100vh;
  .list-item {
    margin-top: 18rpx;
    &:nth-of-type(2n) {
      .msg-card {
        background-color: #fef7ee;
      }
    }
  }
  .tool-box {
    position: relative;
    padding-top: 40rpx;
    .tool-box-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      padding-top: 10rpx;
      .inner {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .msg-card {
    background-color: #fceaec;
    font-size: 28rpx;
    border-radius: 8rpx;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 12rpx 14rpx;
    }
    .content {
      padding: 10rpx 14rpx;
      min-height: 4em;
    }
    .footer {
      font-size: 28rpx;
      padding: 12rpx 14rpx;
      color: #7f7f7f;
    }
  }
}

.icon-wrapper {
  .icon-clear {
    width: 48rpx;
    margin-right: 15rpx;
  }
  .icon-select {
    width: 42rpx;
  }
}
</style>