nsgk_mobile/src/views/lawEnforcement/complaint/indexComplaint.vue

<template>
  <div class="app-container" id="container">
    <van-nav-bar
      title="投诉回复"
      fixed
      placeholder
      left-arrow
      @click-left="onClickIndex"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="pageId == 0 ? '没有更多了' : ''"
      @load="getNewList"
    >
      <div class="tabsBox" v-for="(item,index) in schemeList" :key="index" :id="item.id">
        <van-cell :title="item.name" :label="'待回复 · ' + item.replyTime" center>
          <template #icon>
            <van-icon name="../../../static/images/lawEnforcement/12.jpg" size="36" color="#539FFD" style="margin-right: 10px;border-radius: 50%;overflow: hidden;" />
          </template>
          <template #default>
            <p style="color: #1D6FE9;"><van-icon name="phone" />{{item.phone}}</p>
          </template>
        </van-cell>
        <van-row>
          <van-col :span="5">类型：</van-col>
          <van-col :span="19">{{item.communicateType}}</van-col>
        </van-row>
        <van-row>
          <van-col :span="5">标题：</van-col>
          <van-col :span="19">{{item.title}}</van-col>
        </van-row>
        <van-row>
          <van-col :span="5">内容：</van-col>
          <van-col :span="19">{{item.content}}</van-col>
        </van-row>

        <van-row v-if="item.reply">
          <van-col :span="24" style="border-top: 1px solid rgba(112,112,112,0.3)"></van-col>
        </van-row>

        <van-row v-if="item.reply">
          <van-col :span="5">回复：</van-col>
          <van-col :span="19">{{item.reply}}</van-col>
        </van-row>
        <van-row v-if="item.reply">
          <van-col :span="5">回复人：</van-col>
          <van-col :span="19">{{item.replyName}}</van-col>
        </van-row>
        <van-row v-if="item.reply">
          <van-col :span="12"><p style="color: #cccccc;font-size: 12px">{{item.replyTime}}</p></van-col>
          <van-col :span="12"></van-col>
        </van-row>
      </div>
      <p style="text-align: center;font-size: 14px;color: #666666" v-if="pageId!=0 && finished" @click="getAll">查看全部</p>
    </van-list>
  </div>
</template>
<script>
import { getTopDeptId , schemeDetail,communicate } from "@/api/lawEnforcement/index";
export default {
  name: "index",
  data() {
    return {
      active:0,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId:100,
      },
      schemeList:[],
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      communicateOptions:[],
      pageId:0
    };
  },
  created() {
    //转出方式字典
    this.getDicts("communicate_type").then(res => {
      this.communicateOptions = res.data;
    });
    this.pageId = this.$route.query.id?this.$route.query.id:0;
  },
  methods: {
    getNewList(){
      this.loading = true;
      console.log(this.$route.query.id)
      getTopDeptId().then(response => {
        this.queryParams.deptId = response.data ;
        communicate(this.queryParams).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);
            response.rows[i].communicateType = this.selectDictLabel(this.communicateOptions,response.rows[i].communicateType)
            if (this.$route.query.id){
              if (this.$route.query.id == response.rows[i].id){
                this.schemeList.push(response.rows[i]);
                this.finished = true;
                this.loading = false;
                return;
              }
            }else{
              this.schemeList.push(response.rows[i]);
            }

          }
          if(this.schemeList.length >= response.total){
            this.finished = true;
            return;
          }
          this.queryParams.pageNum += 1 ;
          this.loading = false;
        })
      })
    },
    getAll(){
      var url=window.location.href;                    //获取当前页面的url
      if(url.indexOf("?")!=-1){                        //判断是否存在参数
        url = url.replace(/(\?|#)[^'"]*/, '');           //去除参数
        window.history.pushState({},0,url);
      }
      location.reload();
    },
    onClickIndex(){
      this.$router.push('/lawEnforcement');
    }
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
body{
  overflow: scroll;
}
.app-container{
  padding: 5% 2%;
}
/deep/ .van-tabs__line{
  background-color: #1D6FE9;
}
/deep/ .van-tab--active{
  color: #1D6FE9;
}
/deep/.van-cell__title{
  flex: 0.63;
  line-height: 1;
}
/deep/.van-cell__value{
  flex: 0.37;
  line-height: 1;
}
/deep/.van-cell__label{
  line-height: 1;
}
/deep/.van-cell{
  padding: 0;
}
/deep/.van-row{
  margin-top: 15PX;
  .van-col{
    font-size: 0.4rem;
  }
}
.tabsBox{
  padding: 5% 4%;
  background-color: #FFF;
  border-radius: 8PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  margin-bottom: 15PX;
}
  .van-tab__pane-wrapper{
    padding: 5% 2%;
  }
  .answerBtn{
    padding: 5PX 15PX;
    height:auto;
  }
</style>