YNUtdPlatform/pages/YNEduApp/user/myMsg.vue

<template>
  <view>
    <u-navbar title="消息通知" @leftClick="leftClick" placeholder />
    <u-swipe-action class="swipe-wrapper">
      <u-swipe-action-item
        :options="options"
        v-for="(item, index) in msgList"
        :key="index"
        class="swipe-item"
        @click="handleOption(item)"
      >
        <div class="swipe-action" @click="handleItem(item)">
          <div class="action-title">
            <div class="tip" v-if="item.isRead == '0'"></div>
            <div style="margin-right: 10px; font-size: 16px">{{ item.type == '1' ? '考试通知' : '其他通知' }}</div>
            <div style="color: #919ca1">{{ item.updateTime }}</div>
          </div>
          <div>{{ item.content }}</div>
        </div>
      </u-swipe-action-item>
    </u-swipe-action>
  </view>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      userId: uni.getStorageSync('userId'),
      token: uni.getStorageSync('access_token'),
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }
      ],
      // 消息列表
      msgList: []
    }
  },
  onLoad() {
    this.getMsgList()
  },
  methods: {
    // 获取消息列表
    getMsgList() {
      this.$verificationToken()
      uni.request({
        url: config.bmwUrl + '/users/getMsgInform',
        method: 'get',
        data: {
          page: 1,
          limit: 999
        },
        header: {
          Authorization: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getMsgList ~ res:', res)
          this.msgList = res.data
          console.log('🚀 ~ getMsgList ~ this.msgList:', this.msgList)
        }
      })
    },
    // 操作-删除
    handleOption(item) {
      console.log('🚀 ~ handleOption ~ item:', item)
      if (item.isRead == '0') {
        this.markRead(item)
      }
      this.deleteMsg(item)
    },
    // 点击消息
    handleItem(item) {
      console.log('🚀 ~ handleItem ~ item:', item)
      if (item.isRead == '0') {
        this.markRead(item)
      }
    },
    // 标记已读
    markRead(item) {
      const ids = [item.id]
      console.log('🚀 ~ markRead ~ ids:', ids)
      this.$verificationToken()
      uni.request({
        url: config.bmwUrl + '/users/markAsRead',
        method: 'post',
        data: { ids },
        header: {
          Authorization: this.token
        },
        success: res => {
          console.log('🚀 ~ markRead ~ res:', res)
          this.getMsgList()
        }
      })
    },
    // 删除消息
    deleteMsg(item) {
      const ids = [item.id]
      console.log('🚀 ~ deleteMsg ~ ids:', ids)
      this.$verificationToken()
      uni.request({
        url: config.bmwUrl + '/users/batchDelete',
        method: 'post',
        data: { ids },
        header: {
          Authorization: this.token
        },
        success: res => {
          console.log('🚀 ~ deleteMsg ~ res:', res)
          // 刷新页面
          uni.reLaunch({
            url: '/pages/YNEduApp/user/myMsg'
          })
        }
      })
    },
    // 返回
    leftClick() {
      uni.reLaunch({
        url: '/pages/YNEduApp/user/user'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.swipe-wrapper {
  padding: 10px;
  .swipe-item {
    border-radius: 5px;
    margin: 10px 0;

    .swipe-action {
      padding: 10px;
      border-radius: 5px;
      word-break: break-all;
      .action-title {
        display: flex;
        align-items: center;

        .tip {
          margin-right: 3px;
          width: 5px;
          height: 5px;
          background-color: red;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>