nsgk_mobile/src/views/lawEnforcement/index.vue

<template>
  <div class="app-container">
    <van-nav-bar fixed placeholder >
      <template #title>
        <van-image src="../../../static/images/lawEnforcement/logo.png" width="30" height="30" />
        <p style="">农业综合行政执法公众平台</p>
      </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" height="128" indicator-color="white">
      <van-swipe-item v-for="(item , index) in workImgList" :key="index">
        <van-image :src="item.img" height="128" @click="goWork(item.id)"/>
        <p class="bannerTit">{{item.title}}</p>
      </van-swipe-item>
    </van-swipe>

    <van-tabs type="card" animated>
      <van-tab title="工作动态">
        <van-cell-group>
          <van-cell v-for="(item , index) in workList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id,type:'work'}}" />
          <van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'work'}}" />
        </van-cell-group>
      </van-tab>
      <van-tab title="通知公告">
        <van-cell-group>
          <van-cell v-for="(item , index) in noticeList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id,type:'notice'}}" />
          <van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'notice'}}" />
        </van-cell-group>
      </van-tab>
      <van-tab title="执法依据">
        <van-cell-group>
          <van-cell v-for="(item , index) in enforcementList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id,type:'enforcement'}}" />
          <van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'enforcement'}}" />
        </van-cell-group>
      </van-tab>
    </van-tabs>



    <van-cell-group class="listBox">
      <van-cell value="全部" is-link :to="{name:'work',query:{type:'scheme'}}">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_zf.png" size="20"></van-icon>
          <span class="custom-title">执法方案<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <van-cell v-for="(item , index) in schemeList" :key="index" :title="item.schemeName" :value="item.applyTime" :to="{name:'schemeDetail',query:{id:item.id}}"></van-cell>
    </van-cell-group>

    <van-cell-group class="listBox">
      <van-cell value="全部" is-link :to="{name:'indexComplaint'}">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_ts.png" size="20"></van-icon>
          <span class="custom-title">投诉建议<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <van-cell v-for="(item , index) in communicateList" :key="index" :to="{name:'indexComplaint',query:{id:item.id}}" :title="item.title" :value="item.replyTime"></van-cell>
    </van-cell-group>
    <div style="height: 20PX"></div>
    <law></law>
  </div>
</template>
<script>
import request from "@/utils/request";
import { getTopDeptId , news , scheme , communicate } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        deptId:100,
        number:2
      },
      // 查询参数
      queryParamsTask: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        taskName: null,
        systemType: 26,
      },
      //新闻集合
      newList:[],
      //轮播图集合
      bannerList:'',
      //工作动态
      workList:[],
      //工作动态图片集合
      workImgList:[],
      //通知公告
      noticeList:[],
      //通知公告图片集合
      noticeImgList:[],
      //执法依据
      enforcementList:[],
      //执法依据图片集合
      enforcementImgList:[],
      //执法方案
      schemeList:[],
      //投诉建议
      communicateList:[],
      taskList:[],
    };
  },
  created() {
    this.getDeptId();
  },
  watch: {
    setUpModule: function (newVal, oldVal) {
      this.setUpModuleId = newVal;
    },
  },
  methods: {
    getDeptId(){
      getTopDeptId().then(response => {
        this.getNewList(response.data);
        // this.getTaskList();
      })
    },
    getNewList(deptId){
      news('003',deptId,8).then(response => {
        this.workList = response.data;
        for (var i = 0; i < response.data.length; i++) {
          var imgStrs = response.data[i].content.match(/<img.*?>/g);
          var title = response.data[i].title;
          var id = response.data[i].id;
          if (imgStrs != null && imgStrs != '') {
            this.workImgList.push({img:imgStrs[0].trim().substr(10,(imgStrs[0].trim().length-12)).replace(/amp;/g,''),title:title,id:id})
          }
          console.log(this.workImgList)
        }
      });
      news('001',deptId,8).then(response => {
        this.noticeList = response.data;
      });
      news('002',deptId,8).then(response => {
        this.enforcementList = response.data;
      });
      scheme(deptId,4).then(response => {
        console.log(response)
        this.schemeList = response.data;
      })
      var query = {
        deptId:deptId,
        pageNum:1,
        pageSize:4
      };
      communicate(query).then(response => {
        for (var i = 0 ; i < response.rows.length ; i++){
          response.rows[i].replyTime = response.rows[i].replyTime == '' ? '' : response.rows[i].replyTime.substr(0,10);
          console.log(response.rows[i].replyTime.substr(0,10))
          this.communicateList.push(response.rows[i])
        }
      })
    },
    /** 查询待办列表 */
    /*getTaskList() {
      this.loading = true;
      return request({
        url: "/activiti/process/taskList",
        method: "get",
        params: this.queryParamsTask,
      })
        .then((response) => {
          console.log(response)
          this.taskList = response.rows;
          this.total = response.total;
          console.log(this.total)
          this.loading = false;
        })
        .then(() => {
        });
    },*/
    getList(){
      this.loading = true;
      this.queryParams.number = 2 ;
      this.queryParams.pageSize = 5 ;
      newList(this.queryParams).then(response => {
        for (var i = 0; i < response.rows.length; i++) {
          this.newList.push(response.rows[i]);
          var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
          if (imgStrs != null && imgStrs != '') {
            this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
          }
        }
        console.log(this.newList)
        if(this.newList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    getBanner(){
      this.loading = true;
      this.queryParams.number = 1 ;
      this.queryParams.pageSize = 5 ;
      newList(this.queryParams).then(response => {
        this.bannerList = response.rows;
        for (var i = 0; i < response.rows.length; i++) {
          var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
          if (imgStrs != null && imgStrs != '') {
            this.bannerList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
          }
        }
        this.loading = false;
      });
    },
    goWork(id){
      window.location = '/lawEnforcement/workDetail?type=work&id='+id;
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container {
  padding: 0 ;
  background-color: #FFFCFC; /* 浏览器不支持时显示 */
  background-image: linear-gradient(#1D6FE9,#4286EC,#FFFCFC);
  background-size: 100% 400Px;
  background-repeat: no-repeat;
}
.van-cell__title{
  color: #666666;
  flex: 0.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}
.van-cell__value{
  flex: 0.3;
}
.van-tabs{
  .van-cell__title:last-child{
    flex: 1;
  }
}
.listBox{
  width: 96%;
  margin: 0 auto;
  border-radius: 8Px;
  overflow: hidden;
  box-shadow: 0PX 5PX 5PX #cccccc;
  margin-top: 10PX;
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
/deep/ .van-nav-bar__title{
  display: flex;
  max-width: initial;
  p{
    line-height: 30Px;
    margin-left: 6Px;
    font-size: 21Px;
    color: #D60303;
    font-family: SourceHanSansCNBold;
  }
}
/deep/ .van-tabs__content{
  width: 96%;
  margin: 0 auto;
  box-shadow: 0px 5px 5px #ccc;
}
/deep/ van-tab__pane-wrapper{
  padding: 0 2%;
}
/deep/ .van-tab{
  border: none!important;
  color: #1D6FE9!important;
}
/deep/ .van-tab--active{
  border-radius: 30Px;
  color: #ffffff!important;
  box-shadow: 0px 5px 5px #ccc;
  background-color: #FE1313!important;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: 0.9rem;
  margin: 10Px 0;
}
/deep/ .van-tab__pane{
  background: #FFF;
  overflow: hidden;
}
/deep/ .van-tabs__nav--card{
  padding: 3Px 2%;
  border: none;
  border-radius: 1rem;
  height: 0.9rem;
}
.bannerTit{
  position: absolute;
  bottom: 10px;
  background: rgba(255,255,255,0.3);
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #fff;
  overflow: hidden;
  padding: 0 3%;
  font-size: 16Px;
}
.link{
  color: #000;
}
.my-swipe {
  border-radius: 8Px;
  width: 96%;
  margin: 0 auto;
  margin-top: 10Px;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.van-grid-item p{
  margin-top: 10px;
}
.newTit{
  font-size: 0.45rem;
  margin: 0.4rem 0;
  font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
}
.newContent{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.search-icon {
  line-height: inherit;
  margin-left: 10px;
}
</style>