nsgk_mobile/src/views/project/index.vue

<template>
  <div class="app-container">
    <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch"/>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getList"/>
      <van-dropdown-item :value="value2" :title="value2" ref="item">
        <van-tree-select
          :active-id.sync="activeId"
          :items="deptListOption"
          :main-active-index.sync="activeIndex"
          :max="1"
          @click-item="clickItem"
          @click-nav="clickNav"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value3" :options="option3" @change="getList"/>
    </van-dropdown-menu>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <router-link :to="{path:'project/projectDetail',query:{id:item.id}}" v-for="(item,index) in infoList">
        <van-card :thumb="item.fileUrl?''+item.fileUrl:'../../static/images/index/projectImg.png'" >
          <template #tags>
            <p class="title">【{{item.rollout}}】{{item.projectName}}</p>
            <p class="type">{{ item.projectShowStatus }}</p>
            <p class="timeEnd">报名结束 {{ item.signupStopTime }}</p>
            <p class="timeEnd">竞价结束 {{ item.biddingStopTime }}</p>
            <van-row>
              <van-col span="12" class="money"><span>{{ item.price }}</span>{{ item.unit }}</van-col>
              <van-col span="8" offset="4" class="time">{{ item.projectReleaseTime }}</van-col>
            </van-row>
          </template>
        </van-card>
      </router-link>
    </van-list>
  </div>
</template>

<script>
import {getOutProjectList,getDeptList} from "../../api/project";

export default {
  name: "project",
  data() {
    return {
      value1: '',
      value2: '标的物位置',
      activeId: 1,
      activeIndex: 0,
      value3: '',
      value:"",
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: true,
      option1: [
      ],
      option2: [
      ],
      option3: [
        { text: '竞价状态', value: '' },
        { text: '全部', value: '全部' },
        { text: '竞价中', value: '竞价中' },
        { text: '竞价结束', value: '竞价结束' },
      ],
      //标的物类型
      projectTypeOption:[{text:'标的物类型',value:''}],
      //标的物所在地
      deptListOption: [
      ],
      input: '',
      infoList:[],
    };
  },
  created() {
    this.getDicts("project_type").then(response => {
      response.data.map(item => {
        this.projectTypeOption.push({ value:item.dictCode, text: item.dictLabel});
      });
    });
    getDeptList().then(response => {
      response.data.map(item => {
        getDeptList(item.deptId).then(res => {
          let list = []
          res.data.map(i =>{
            list.push({text:i.deptName,children:[],id:i.deptId})
          })
          if(list.length==0){
            list.push({text:item.deptName,id:item.deptId})
          }else{
            this.deptListOption.push({ text: item.deptName,children: list});
          }
        });
      });
    });
    this.getList();
  },
  mounted() {},
  methods: {
    onSearch(val) {
      this.loading = true;
      if(this.infoList.length>0){
        let newList = []
        for(let j = 0 ;j<this.infoList.length;j++){
          if(this.infoList[j].projectName.indexOf(val)>-1){
            newList.push(this.infoList[j]);
          }
        }
        this.infoList = newList
      }
      if(val==""){
        this.getList()
      }
      this.loading = false;
    },
    getList(){
      let queryDatas = {
        deptId: this.value1,
        projectNumber:this.activeId,
        projectShowStatus:this.value3
      }
      getOutProjectList(queryDatas).then(response =>{
        this.infoList = response.rows
        if(this.infoList.length>0){
          let newList = []
          for(let j = 0 ;j<this.infoList.length;j++){
            if(this.infoList[j].projectName.indexOf(this.value)>-1){
              newList.push(this.infoList[j]);
            }
          }
          this.infoList = newList
          console.log(this.infoList)
        }
      });
    },
    clickNav(index){

    },
    clickItem(data){
      if(data.text==this.value2){
        this.activeId=1
        this.value2='标的物位置'
      }else{
        this.value2=data.text
      }
      this.getList()
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
  .title{
    font-size: 0.4rem;
  }
  .type{
    font-size: 0.35rem;
    color: #E7851C;
    margin-top: 5px;
  }
  .timeEnd{
    color: #666666;
    margin-top: 5px;
    font-size: 0.1rem;
  }
  .money{
    color: #C21F3A;
    line-height: 0.5rem;
    margin-top: 5px;
  }
  .money span{
    font-size: 0.5rem;
  }
  .time{
    color: #666666;
    line-height: 0.6rem;
    margin-top: 5px;
  }
</style>