BlockChainH5/pages/news/detail.vue

<template>
  <view class="News-detail" v-if="loaded">
    <view class="item" v-for="(item,index) in items" v-if="items.length>0"
      @click="item.read_at === ''?read(index,item):noread(item)">
      <view class="top">
        <image src="/static/images/news_2_1.png" mode="widthFix"></image>
        <!--        <image v-if="index===1" src="/static/img/news_1_1.png" mode="widthFix"></image>
        <image v-if="index===2" src="/static/img/news_3_1.png" mode="widthFix"></image> -->
        <view :style="item.read_at=== '' ?'flex:1;':'flex:1;color:#808080;'">{{item.title}}</view>
      </view>
      <view class="des">{{item.content}}</view>
      <view class="time">{{item.created_at}}</view>
      <view class="read_at" v-if="item.read_at === ''"></view>
    </view>
	  <no-list v-if="items.length === 0" name='no-new1' txt="空空如也~" />
  </view>
</template>

<script>
  import {
    notificationsList,
    notificationsDetail,
    notificationsReaded
  } from '@/apis/interfaces/news.js'

  export default {
    data() {
      return {
        items: [],
        page: 1,
        has_more: true,
        loaded: false
      };
    },
    onLoad(e) {
      this.type = e.type
      this.notificationsList()
    },
    onReachBottom() {
      this.notificationsList()
    },
    //  右侧全部已读
    onNavigationBarButtonTap(e) {
      // #ifdef APP-PLUS
      var currentWebview = this.$mp.page.$getAppWebview()
      var tn = currentWebview.getStyle().titleNView
      var text = tn.buttons[0].text
      if (text == '全部已读') {
        notificationsReaded(this.type).then(res => {
          this.items.find((item, index) => {
            this.$set(item, 'read_at', 'zdx')
          })
          uni.showToast({
            title: '全部已读',
            icon: 'none'
          })
		  uni.setStorageSync('refresh',true)
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'nonde'
          })
        })
      }
      // #endif
    },
    methods: {
      // 点击每个消息，假装查看详情，触发已读效果$set
      read(index, item) {
        let notification_id = item.notification_id
        notificationsDetail(notification_id).then(res => {
          this.$set(this.items[index], 'read_at', '已读已读')
		  uni.setStorageSync('refresh',true)
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'nonde'
          })
        })
        if (item.url) {
          switch (item.url.openType) {
            case 'web':
              // #ifdef APP-PLUS
              plus.runtime.openURL(item.url.url)
              return
              // #endif
              window.location.href = item.url.url
              break;
            case 'navigateTo':
              uni.navigateTo({
                url: item.url.path
              })
              break;
            case 'switchTab':
              uni.switchTab({
                url: item.url.path
              })
              break;
            default:
              uni.showToast({
                title: '活动过期,请联系系统管理员',
                icon: 'none'
              })
              break;
          }
        }
      },

      //  消息列表
      notificationsList() {
        if (this.has_more) {
          notificationsList(this.type, {
            page: this.page
          }).then(res => {
            this.items = this.items.concat(res.data)
            if (res.page.has_more) {
              this.page = this.page + 1
            }
            this.has_more = res.page.has_more
            this.loaded = true
          }).catch(err => {
            uni.showToast({
              title: err.message,
              icon: 'nonde'
            })
          })
        } else {
          uni.showToast({
            title: '没有更多啦~',
            icon: 'none'
          })
        }
      },
      noread(item) {
        if(item.url){
          switch (item.url.openType) {
            case 'web':
              // #ifdef APP-PLUS
              plus.runtime.openURL(item.url.url)
              return
              // #endif
              window.location.href = item.url.url
              break;
            case 'navigateTo':
              uni.navigateTo({
                url: item.url.path
              })
              break;
            case 'switchTab':
              uni.switchTab({
                url: item.url.path
              })
              break;
            default:
              uni.showToast({
                title: '活动过期,请联系系统管理员',
                icon: 'none'
              })
              break;
          }
        }else{
          uni.showToast({
            title: '哎呦，已经读过了~',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .News-detail {
    min-height: 100vh;
    width: 100%;
    padding: 0 $padding*1.5 $padding*1.5 $padding*1.5;
    box-sizing: border-box;


    .item {
      background-color: #fff;
      padding: $padding*1.5;
      box-shadow: 0 0 40rpx 2rpx rgba(0, 0, 0, 0.1);
      border-radius: $radius-m;
      margin-top: $padding*1.5;
      position: relative;

      .top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        color: #353535;
        font-weight: bold;
        border-bottom: solid 1rpx #f8f8f8;
        padding-bottom: $padding*1.3;

        image {
          width: 42rpx;
          margin-right: $padding;
        }

        span {
          font-size: $title-size;
        }
      }

      .des {
        font-size: $title-size-m;
        padding-top: $padding;
        color: #808080;
      }

      .time {
        color: #999;
        font-size: $title-size*0.9;
        padding-top: $padding*0.9;
      }
    }
  }

  // 无消息
  .no-news {
    font-size: $title-size-m;
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    image {
      width: 70%;
      margin: $padding*7 0 $margin*3 0;
      opacity: 0.6;
    }
  }

  .read_at {
    background-color: red;
    width: 14rpx;
    height: 14rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    border-radius: 50%;
  }
</style>