detection-business/pages/xiaoxi/xiaoxi.vue

<!-- 默认复制 -->

<template>
  <view class="content">
    <view class="c-top">
      <view class="">

      </view>
      <view class="c-title">
        <text>通知、提醒</text>
        <image @click="clearAll" v-if="tapindex === 1" src="@/static/imgs/clear.png" mode="" class="clear-icon"></image>
      </view>
      <view class=""></view>
    </view>

    <view class="cont">
      <view class="tap">
        <view class="tap-box" v-for="(item,index) in tab" :key="index" @click="tapqh(index)">
          <view class="xhuihui" :class="{'xzhei':tapindex == index}">{{ item.text }}</view>
          <view class="gang" v-if="tapindex == index"></view>
        </view>
      </view>
      <view class="bjimg" v-if="arrlist && arrlist.length === 0">
        <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
      </view>
      <view class="c-box" v-for="(item,index) in arrlist" :key="index" @click="getdetails(item.id)">
        <view v-if="tapindex === 0">
          <view class="c-b-top">
            <view class="t-left">
              <image :src="baseImageUrl+item.newsCover" mode="aspectFill"></image>
            </view>
            <view class="t-right">
              <view class="t-tilte">{{ item.newsTitle }}</view>
              <view class="tw-tilte">一{{ item.publishUnit }}</view>
              <view class="t-zi" v-html="item.newsContent"></view>
            </view>
          </view>
          <view class="c-b-bom">
            <view class="b-left"></view>
            <view class="b-left">
              {{ getDate(item.createTime || new Date()) }}
            </view>
          </view>
        </view>
        <view v-else>
          <view class="c-b-top">
            <view class="t-right">
              <view class="t-tilte">{{ item.title }}</view>
              <view class="t-zi" style="text-indent: 2rem" v-html="item.content"></view>
            </view>
          </view>
          <view class="c-b-bom">
            <view class="b-left"></view>
            <view class="b-left">
              {{ getDate(item.createTime || new Date()) }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="width: 100%; height: 50px;"></view>
    <tabBar ref="tarBar" :msg="msg"></tabBar>
  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import tabBar from '../../components/tabBar/tabBar.vue'
import {formatDate} from "../../utils/utils";

export default {
  data() {
    return {
      msg: '2',
      chuan: '',
      roles: [],
      jcshopRole: false,
      jcgfRole: false,
      isOpen: false,
      fab: false,
      imgs: '',
      type: 'zflm',
      animationData: {},
      isRote: false,
      animation: null,
      actindex: 0,
      partnerId: '',
      arrlist: [],
      taplist: [],
      pageNum: 1,//第几页
      pageSize: 20,//一页多少张
      totalPages: 0,//总数
      baseImageUrl: this.$baseImageUrl,
      tab: [
        {
          text: "通知",
          value: "0"
        },

        {
          text: "提醒",
          value: "1",
        }
      ],
      tapindex: 0,
    }
  },

  onReachBottom() {
    if (this.pageSize > this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })

    } else {
      this.pageNum++
      this.getlistindex()
    }
  },
  onLoad(data) {
    this.partnerId = uni.getStorageSync('partnerId')
    if (data && data.index){
      this.tapindex = parseInt(data.index)
      this.getwarnMsglist()
    }else {
      this.getlistindex()
    }
    // this.interval = setInterval(() => {
    //   this.getlistindex()
    // }, 3000);
  },
  onShow() {
    if (this.tapindex === 1){
      this.getwarnMsglist()
    }else {
      this.getlistindex()
    }
    // this.getlistindex()
    // this.imgs = this.$baseUrl
  },


  components: {
    tabBar,
  },
  methods: {
    clearAll(){
      let that = this
      uni.showModal({
        title: '确认',
        content: '确认全部已读吗？',
        success: function (res) {
          if (res.confirm){
            request({
              url: '/warnMsg/warnMsg/readAll',
              method: 'get'
            }).then(res=>{
              that.getwarnMsglist()
            })
          }
        }
      });
    },
    async getwarnMsglist() {
      let res = await request({
        url: '/warnMsg/warnMsg/list',
        method: 'get',
      })
      this.arrlist = res.data
      let total = res.total
      this.totalPages = Math.ceil(total / this.pageSize);
    },
    getDate(value) {
      return formatDate(value)
    },
    tapqh(index) {
      this.tapindex = index
      this.arrlist = []
      if (index === 0) {
        this.pageNum = 1
        this.getlistindex()
      } else {
        this.pageNum = 1
        this.getwarnMsglist()
      }
    },
    getdetails(id) {
      const url = this.tapindex === 0 ? '/pages/xiaoxi/details?id=' + id : '/pages/xiaoxi/details?id=' + id + "&index=1"
      uni.navigateTo({
        url: url
      })
    },
    getback() {
      uni.navigateBack({
        delta: 1,
      })
    },
    async getlistindex() {
      let res = await request({
        url: '/appInspection/news/msgList',
        method: 'get',
        data: {
          partnerId: this.partnerId,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      })
      // this.arrlist = res.rows
      if (this.pageNum != 1) {
        this.arrlist = this.arrlist.concat(res.data.records)
      } else {
        this.arrlist = res.data.records
      }
      let total = res.total
      this.totalPages = Math.ceil(total / this.pageSize);

    },


  },
  beforeDestroy() {
    clearInterval(this.interval);
  },

}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh);
  background-color: #F6F6F6;
  box-sizing: border-box;
  // padding-top: 45px;
}

.top-icon {
  margin-bottom: 45px;
}

.q-fab {
  position: fixed;
  bottom: 50px;
  right: 15px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.fab-z1 {
  position: fixed;
  bottom: 115px;
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.fab-z2 {
  position: fixed;
  bottom: 50px;
  right: 80px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.c-tap {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  background-color: white;
  align-items: center;
}

.c-top {
  width: 100%;
  height: 88px;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.c-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.cont {
  width: 100%;
  padding: 15px;
  padding-top: 0px;
  box-sizing: border-box;
  background-color: #F6F6F6;

}

.hongdian {
  width: 15px;
  height: 15px;
  background-color: crimson;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
}

.c-box {
  width: 100%;
  box-sizing: border-box;
  padding: 7px;
  background-color: white;
  margin-top: 10px;
  border-radius: 10px;
  position: relative;
}

.c-b-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.t-left {
  width: 40%;
  height: 100px;
  border-radius: 7px;
  margin-right: 10px;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }

}

.t-right {
  width: 60%;
}

.t-tilte {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.tw-tilte {
  width: 100%;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #5e5e5e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.t-zi {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

}

.bjimg {
  width: 255px;
  height: 236px;
  margin: 0px auto;
  margin-top: 100px;

  image {
    width: 100%;
    height: 100%;
  }
}

.c-b-bom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.b-left {
  color: #0D2E8D;
  font-size: 14px;
}

.b-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.z-lv {
  display: flex;
  align-items: center;
  color: #0D2E8D;
  font-size: 15px;
  margin-right: 10px;
}

.y-hong {
  display: flex;
  align-items: center;
  color: #fa3534;
  font-size: 15px;
  margin-right: 15px;
}

.z-img {
  width: 20px;
  height: 15px;

  image {
    width: 100%;
    height: 100%;
  }

  margin-right: 2px;
}

.tap-box {
  width: 30%;
  text-align: center;
}

.gang {
  height: 4px;
  background: #0D2E8D;
  width: 80%;
  margin: 0px auto;
}

.lan {
  color: #0D2E8D;
}

.tap {
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tap-box {
  width: 50%;

}

.xhuihui {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.gang {
  width: 24px;
  height: 4px;
  background: #0D2E8D;
  border-radius: 4px;
  margin: 2px auto;
}
.clear-icon{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}
</style>