judicial-hy / 0.200103

<template>
  <div class="content">
    <!--搜索-->
    <div class="search_box">
      <input placeholder="请输入关键词..." class="search" v-model="keywords">
      <!--<navigator class="mic_icon"><img src='/static/imgs/mic_icon.png'></navigator>-->
    </div>
    <span class="search_btn"  @click="search">搜索</span>
    <div class="clear"></div>
    <!--搜索-->
    <!--类别-->
    <div class="tab_box" v-if="type == 'flfg'">
        <div v-for='(v,i) in FGArray' :key='i' class="tab " @click="checkedBox(i,v.type)" v-bind:class="{ checked:changeOne == i}">{{v.title}}</div>
    </div>
    <div class="tab_box" v-if="type == 'cpal'">
       <div  v-for='(v,i) in AlArray' :key='i' class="tab5 "  @click="checkedBox(i,v.type)" v-bind:class="{ checked:changeOne == i}">{{v.title}}</div>
    </div>
    <div class="tab_box" v-if="type == 'cpws'">
      <div  v-for='(v,i) in WsArray' :key='i' class="tab6 "  @click="checkedBox(i,v.type)" v-bind:class="{ checked:changeOne == i}">{{v.title}}</div>
    </div>
    <!--类别-->
    <!--列表-->
    <div class="list_box">
      <navigator v-for='(v,i) in lists' :key='i' :url="'../lawinfo/main?title='+title+'&gid='+v.itemgid+'&lib='+lib">
        <div class="list">
          <p v-if="v.itemvalue =='' || v.itemvalue ==null"><rich-text :nodes="v.itemtitle"></rich-text></p>
          <p v-else><rich-text :nodes="v.itemvalue"></rich-text></p>
          <span>{{v.itemftitle}}</span>
        </div>
      </navigator>
    </div>
    <!--列表-->
    <div v-if='lists.length>0 && !all_data_loaded' class='three-dot-box'>
      <div class="dot-flashing"></div>
    </div>
    <div v-else-if='lists.length>0' class='all-load-foot'>已经到底了……</div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        all_data_loaded: false,
        keywords: '',
        lib: '',
        changeOne: 0,
        lists: [],
        type: '',
        typeChild: '',
        title: '',
        pagenum: 0,
        pagesize: 20,
        keyTitle: '',
        keyContent: '',
        anyou: '',
        Fdate_b: '',
        Fdate_e: '',
        FGArray: [
          { type:'gjfl', title: '国家法律'},
          { type:'dffg',title: '地方法规'},
          { type:'lfzl',title: '立法资料'},
          { type:'sfzl',title: '司法资料'}
        ],
        WsArray: [
          { type:'ms', title: '民事'},
          { type:'xs',title: '刑事' },
          { type:'xz',title: '行政' },
          { type:'zx',title: '执行' },
          { type:'pc',title: '赔偿' },
          { type:'zscq',title: '知识产权' }
        ],
        AlArray : [
          { type:'ms', title: '民事'},
          { type:'xs',title: '刑事' },
          { type:'xz',title: '行政' },
          { type:'zx',title: '执行' },
          { type:'pc',title: '赔偿' }
        ],
        loaded: false
      }
    },
    methods: {
      loadArticles () {
        this.pagenum = 1
        this.getList(this.pagenum)
      },
      getList (pagenum) {
        this.keyContent = this.keywords
        this.keyTitle = this.keywords
        this.anyou = this.keywords
        var path = ''
        console.log(this.typeChild)
        var TypesOf = this.type
        if (TypesOf == 'flfg') {
          if(this.typeChild == ''){
            this.typeChild = 'gjfl'
          }
          path = 'reg/getLawsRegulationsList'
        }else if(TypesOf == 'cpws'){
          path = 'reg/getLawReferee'
          if(this.typeChild == ''){
            this.typeChild = 'ms'
          }
          this.lib = 'cpws_cp'
        }else if(TypesOf == 'cpal'){
          path = 'reg/getLawCase'
          if(this.typeChild == ''){
            this.typeChild = 'ms'
          }
          this.lib = 'cpws_al'
        }
        if (this.typeChild == 'gjfl'){
          this.lib = 'zyfl'
        } else if (this.typeChild=='dffg'){
          this.lib = 'dffl'
        }else if(this.typeChild=='lfzl'){
          this.lib = 'lf'
        }else if(this.typeChild=='sfzl'){
          this.lib = 'sf'
        }
        console.log(this.lib)
        wx.showLoading({ title: '正在加载' })
        wx.request({
          url: this.rootUrl + path,
          method: 'get',
          header: {'content-type': 'application/x-www-form-urlencoded'},
          data:{
            pagenum: ++this.pagenum,
            pagesize: this.pagesize,
            keyTitle: this.keyTitle,
            keyContent: this.keyContent,
            anyou: this.anyou,
            type: this.typeChild,
            Fdate_b: this.Fdate_b,
            Fdate_e: this.Fdate_e,
            sessionID: wx.getStorageSync('sessionID')
          },
          success: res=> {
            if(res.statusCode=='500'){
              this.service.getUnionId(this.rootAvatar,this.rootUrl).then(res=>{
                console.log(res)
                this.loadArticles()
              })
            }else{
              console.log(1,res)
              if(res.data.value.length>0){
                if(res.data.value.length<this.pagesize){
                  this.all_data_loaded = true
                }else{
                  this.all_data_loaded = false
                }
              }else {
                this.all_data_loaded = true
              }
              console.log(this.pagenum)
              this.setLawyerData(res.data.value)
            }
          },
          fail: res=> {
            console.log(res)
          }
        })
      },
      setLawyerData(arr){
        const lists = [...this.lists,...arr]
        console.log(lists)
        console.log(this.lists)
        this.lists = []
        this.lists = lists
        this.loaded = true
        wx.hideLoading()
      },
      checkedBox: function (index,typeChild) {
        this.changeOne = index
        this.typeChild = typeChild
        this.lists = []
        this.pagenum = 1
        this.getList(this.pagenum)
      },
      search () {
        this.pagenum = 1
        this.lists = []
        this.getList(this.pagenum)
      }
    },
    onLoad(){
      this.title = this.$root.$mp.query.title
      this.type = this.$root.$mp.query.type
      this.keywords = this.$root.$mp.query.keywords
      console.log(this.keywords)
      wx.setNavigationBarTitle({title: this.title})
    },
    onReachBottom() {
      if(!this.all_data_loaded){
      const pagenum=++this.pagenum
        this.getList(pagenum)
      }
    },
    onShow() {
      this.loadArticles()
    },
    onUnload(){
      this.lists = []
      this.typeChild = ''
      this.keywords=''
      this.changeOne = 0
      this.lib = ''
      this.pagenum=0
      this.loaded = false
    }
  }
</script>
<style lang="stylus" scoped>
  .clear
    clear both
  .content
    margin 0 3%
    width 94%
    font-size 30rpx
  .search_box
    float left
    width 80%
    margin 30rpx 0
    height 80rpx
    padding 0 20rpx
    background #eee
    border-radius 40rpx
  .mic_icon
    float right
    width 80rpx
    height 80rpx
  .mic_icon img
    width 100%
    height 100%
  .search
    float left
    width 80%
    height 80rpx
    padding 0 10rpx
    line-height 80rpx
    color #333
  .search_btn
    margin 30rpx 0
    float right
    line-height 80rpx
  .tab_box
    width 100%
  .tab_box div
    margin 0 5rpx 8rpx 0
    display inline-flex
    background-color #dedede
    justify-content center
    align-items center
    line-height 80rpx
    border-radius 8rpx
  .tab
    width 24%
  .tab5
    width 19%
  .tab6
    width 16%
    font-size 25rpx
  .checked
    background-color #aa001a !important
    color #fff !important
  .list_box
    width 100%
    background-color #fff
  .list
    padding 20rpx 0
    border-bottom 1px solid #dedede
  .list p
    margin-bottom 10rpx
    line-height 40rpx
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp 2
    -webkit-box-orient vertical
  .list span
    font-size 28rpx
    color #999
  .line
    margin 0 20rpx
    color #999
 /* .three-dot-box .dot-flashing
      position relative
      height 15rpx
      width 15rp
      border-radius 10rpx
      background #aa001a
      color #aa001a
      animation dotFlashing 1s infinite linear alternate
      animation-delay 0.5s
  .three-dot-box .dot-flashing::before,
  .three-dot-box .dot-flashing::after
    content ''
    display inline-block
    position absolute
    height 15rpx
    width 15rpx
    top 0
    border-radius 10rpx
    background #aa001a
    color #aa001a
    animation dotFlashing 1s infinite alternate
    background #aa001a
  .three-dot-box .dot-flashing::before
    left -30rpx
    animation-delay 0
  .three-dot-box .dot-flashing::after
    left 30rpx
    animation-delay: 1s*/
  .all-load-foot
    width 100%
    font 30rpx/70rpx false
    text-align center
    color #999

</style>