detection-business/pages/xiaoxi/notice.vue

<template>
  <view class="container">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="content">
      <view class="top_">
        <view class="top_box" v-for="(item,index) in taplist" :key="index" @click="tapqh(index)">
          <view class="">{{ item }}</view>
          <view class="gang" v-if="tapindex == index"></view>
        </view>
      </view>
      <view class="lsit_">
        <view class="lsit_box" v-for="(item,index) in arrlist" :key="index" @click="getdetails(item.id)">
          <view v-if="tapindex === 0">
            <view class="d_s">
              <view class="touxiang_">
                <image :src="baseImageUrl+getUrl(item.newsCover)" mode=""></image>
              </view>
              <view class="">
                <view class="title_">{{ item.newsTitle }}</view>
                <view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
              </view>
            </view>
            <view class="t-zi" v-html="item.newsContent"></view>
          </view>
          <view v-else>
            <view class="d_s">
              <view class="item-container">
                <view class="title_">{{ item.title }}</view>
                <view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
              </view>

            </view>
            <view class="t-zi" v-html="item.content"></view>
          </view>
        </view>
      </view>
      <view style="width: 100%; height: 88rpx;"></view>

    </view>

    <!-- 底部 -->
    <view style="width: 100%; height: 50px;"></view>
    <tabBar :msg="msg "></tabBar>

  </view>
</template>

<script>
import headersVue from '../../components/header/headers.vue';
import request from "@/utils/request";
import {formatDate} from "@/utils/utils";

export default {
  data() {
    return {
      titles: "通知",
      tapindex: 0,
      taplist: ["监管通知", "内部通知"],
      show: false,
      status: 'loading',
      msg: '2',
      chuan: '',
      roles: [],
      jcshopRole: false,
      jcgfRole: false,
      isOpen: false,
      fab: false,
      imgs: '',
      type: 'zflm',
      animationData: {},
      isRote: false,
      animation: null,
      actindex: 0,
      partnerId: '',
      arrlist: [],
      pageNum: 1,//第几页
      pageSize: 20,//一页多少张
      totalPages: 0,//总数
      baseImageUrl: this.$baseImageUrl,
    }
  },
  components: {
    headersVue
  },
  onShow() {
    if (this.tapindex === 1) {
      this.getwarnMsglist()
    } else {
      this.getlistindex()
      this.getIfSend()
    }
  },
  onLoad(data) {
    this.partnerId = uni.getStorageSync('partnerId')
    if (data && data.index) {
      this.tapindex = parseInt(data.index)
      this.getwarnMsglist()
    } else {
      this.getlistindex()
      this.getIfSend()
    }
  },
  methods: {
    setIndex(num) {
      this.tapindex = num
    },
    getUrl(value) {
      if (!value) {
        return ""
      }
      if (value[0] === '/') {
        return value
      } else {
        return "/" + value
      }
    },
    toAdd() {
      uni.navigateTo({
        url: '/pages/authority/newadd?type=' + null
      })
    },
    getIfSend() {
      request({
        url: '/system/inspectionNews/ifSend',
        method: 'get'
      }).then(res => {
        this.ifSend = res.data
      })
    },
    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);
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  background: #F7F8FC;
  width: 100%;
  height: 100vh;
}

.content {
  background: #F7F8FC;
  width: 100%;

  box-sizing: border-box;

  padding-top: 170rpx;
}

.top_ {
  margin-top: 20rpx;
  height: 98rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.top_box {
  width: 50%;
  height: 98rpx;
  text-align: center;
  font-size: 28rpx;
  color: #8D90A6;
  box-sizing: border-box;
  padding: 30rpx;
}

.gang {
  width: 112rpx;
  height: 8rpx;
  background: linear-gradient(90deg, #366FFF 0%, #5DA0FC 100%);
  margin: 5px auto;
}

.lsit_ {
  background: #F7F8FC;
  box-sizing: border-box;
  padding: 30rpx;
}

.lsit_box {
  width: 100%;
  border-radius: 8rpx;
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.d_s {
  display: flex;
  align-items: center;
}

.touxiang_ {
  width: 40%;
  height: 100px;
  margin-right: 10px;
  overflow: hidden;

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

}

.title_ {
  font-size: 32rpx;
  color: #101A3E;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.num_ {
  font-size: 24rpx;
  color: #327DFB;
}

.text_ {
  font-size: 24rpx;
  color: #8D90A6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 20rpx;
}


.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;
}

.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 确保容器占满父级 */
}

</style>